/**
 * Kopa Portal — unified section spacing, navbar offset, and content heights.
 * Use section modifiers on <section> elements; avoid stacking Bootstrap py-* on the same node.
 */

:root {
  --nav-height: 4.5rem;
  --scroll-offset: 5.5rem;

  --section-y-default: 5rem;
  --section-y-large: 5.625rem;
  --section-y-compact: 1.5rem;
  --section-y-cta: 6.25rem;

  --section-hero-top: 6.25rem;
  --section-hero-bottom: 5rem;

  --section-inner-y: 2rem;
  --section-title-mb: 2.5rem;
  --section-block-gap: 1.5rem;

  --section-content-sm: 20rem;
  --section-content-md: 30rem;
  --section-content-lg: 32.5rem;
}

@media (max-width: 991.98px) {
  :root {
    --nav-height: 4rem;
    --scroll-offset: 4.75rem;

    --section-y-default: 3rem;
    --section-y-large: 2.8125rem;
    --section-y-compact: 1.25rem;
    --section-y-cta: 3.75rem;

    --section-hero-top: 5.3125rem;
    --section-hero-bottom: 3.125rem;

    --section-inner-y: 1.5rem;
    --section-title-mb: 1.75rem;
    --section-block-gap: 1rem;

    --section-content-sm: 16rem;
    --section-content-md: 22rem;
    --section-content-lg: 24rem;
  }
}

[id] {
  scroll-margin-top: var(--scroll-offset);
}

.section {
  padding-block: var(--section-y-large) !important;
  position: relative;
}

.section-sm {
  padding-block: var(--section-y-default) !important;
  position: relative;
}

.section--default {
  padding-block: var(--section-y-default) !important;
}

.section--large {
  padding-block: var(--section-y-large) !important;
}

.section--compact {
  padding-block: var(--section-y-compact) !important;
}

.section--cta {
  padding-block: var(--section-y-cta) !important;
}

.section--hero {
  padding-block: var(--section-hero-top) var(--section-hero-bottom) !important;
}

.page-section {
  padding-top: calc(var(--scroll-offset) + var(--section-y-compact));
  padding-bottom: var(--section-y-default);
}

.page-section .container {
  padding-inline: 0.75rem;
}

@media (min-width: 992px) {
  .page-section .container {
    padding-inline: 0;
  }
}

.section-inner {
  padding-block: var(--section-inner-y);
}

.section-head {
  margin-bottom: var(--section-title-mb);
}

.section-head .title {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.section-head .title-line {
  margin-bottom: 0;
}

section .title {
  margin-top: 0;
}

section .subtitle {
  margin-bottom: 0.5rem;
}

section .row.mt-5.pt-4,
section .row.mt-5.pt-5 {
  margin-top: var(--section-block-gap) !important;
  padding-top: 0 !important;
}

.section-stack > * + * {
  margin-top: var(--section-block-gap);
}

.section--content-sm {
  min-height: var(--section-content-sm);
}

.section--content-md {
  min-height: var(--section-content-md);
}

.section--content-lg {
  min-height: var(--section-content-lg);
  display: flex;
  align-items: center;
}

.hero-new {
  padding-block: var(--section-hero-top) var(--section-hero-bottom) !important;
}

.hero-stats-bar {
  padding-block: var(--section-y-compact) !important;
}

.about-traditional-section,
.features-traditional-section,
.why-join-us-section {
  padding-block: var(--section-y-default) !important;
}

.feedback-mandala-section,
.faq-traditional-section {
  padding-block: var(--section-y-large) !important;
}

.trusted-by-section,
.team-premium-section {
  padding-block: var(--section-y-default) !important;
}

.cta-app-download {
  padding-block: var(--section-y-cta) !important;
}

.home-blog-news {
  padding-block: var(--section-y-large) !important;
}

.brochure-custom-section {
  padding-block: 0 !important;
  min-height: var(--section-content-lg);
}

.brochure-custom-section > .container-fluid {
  padding-block: var(--section-y-default);
  min-height: inherit;
  display: flex;
  align-items: center;
}

section.section.py-5,
section.section.bg-white.py-5 {
  padding-block: var(--section-y-default) !important;
}

.navbar-custom {
  min-height: var(--nav-height);
  padding-block: 0.65rem;
}

.navbar-custom .container {
  padding-inline: 0.75rem;
}

@media (max-width: 991.98px) {
  .navbar-custom .navbar-collapse {
    margin-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .navbar-custom .navbar-nav .nav-item .nav-link {
    padding-block: 0.65rem !important;
  }
}

.blog-hero,
.detail-hero {
  padding-block: calc(var(--scroll-offset) + var(--section-y-default)) var(--section-y-default) !important;
  min-height: var(--section-content-md);
}

.blog-shell {
  padding-block: var(--section-y-default) var(--section-y-large) !important;
}

.auth-panel {
  padding-top: calc(var(--scroll-offset) + var(--section-y-compact)) !important;
  padding-bottom: var(--section-y-default) !important;
}

.page-banner {
  padding-block: calc(var(--scroll-offset) + var(--section-y-compact)) var(--section-y-compact);
  background: linear-gradient(135deg, #8a1538 0%, #5c0f25 100%);
  color: #fff;
  text-align: center;
}

.page-banner h1,
.page-banner h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
}

.contact-section {
  padding-block: var(--section-y-default) !important;
}

.footer.section,
section.footer {
  padding-block: var(--section-y-default) !important;
}