@layer reset, tokens, base, nav, components, hero, dashboards, footer, layout, utilities, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100vh; background: #5456E2; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  input, textarea, select { font: inherit; }
}

@layer tokens {
  :root {
    --bg:      oklch(53.6% 0.207 276);
    --surface: oklch(100% 0 0);
    --fg:      oklch(100% 0 0);
    --muted:   oklch(80% 0.02 276);
    --border:  oklch(100% 0 0 / 0.12);
    --accent:  oklch(100% 0 0);
    --accent-hover: oklch(69% 0.15 276);
    --accent-light: oklch(100% 0 0 / 0.1);
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 60px;
    --space-xl: 100px;
    --space-2xl: 140px;
    --elevation-1: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 4px oklch(0% 0 0 / 0.04);
    --elevation-2: 0 4px 12px oklch(0% 0 0 / 0.06), 0 2px 4px oklch(0% 0 0 / 0.04);
    --elevation-3: 0 8px 24px oklch(0% 0 0 / 0.08), 0 4px 8px oklch(0% 0 0 / 0.04);
    --font-display: 'Inter', -apple-system, system-ui, sans-serif;
    --font-body: 'Inter', -apple-system, system-ui, sans-serif;
    --font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --max-width: 1400px;
    --content-pad: clamp(20px, 5vw, 56px);
  }
}

@layer base {
  body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
  }
  h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.02em; }
  h2 { font-size: clamp(28px, 3.5vw, 48px); letter-spacing: -0.015em; }
  h3 { font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.01em; }
  h4 { font-size: clamp(18px, 1.8vw, 24px); }
  p { color: inherit; opacity: .88; }
  p + p { margin-top: 1em; }

  .card, .auth-card, .testimonial-card, .search-card, .compare-agency-card,
  .review-card, .agency-card, .step, .nav-links.open,
  .profile-sidebar .card, .brief-sidebar .card,
  input, select, textarea, .hero-search {
    --fg:      oklch(18% 0.015 276);
    --muted:   oklch(50% 0.015 276);
    --border:  oklch(88% 0.005 276);
    --accent:  oklch(53.6% 0.207 276);
    --accent-light: oklch(92% 0.04 276 / 0.25);
    color: var(--fg);
  }
}

@layer layout {
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-inline: var(--content-pad);
  }
  .section { padding-block: var(--space-xl); }
  .section-spacious { padding-block: var(--space-2xl); }
  .section-alt { padding-block: var(--space-xl); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
  .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); }
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .gap-xs { gap: var(--space-xs); }
  .gap-sm { gap: var(--space-sm); }
  .gap-md { gap: var(--space-md); }
  .gap-lg { gap: var(--space-lg); }
  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
}

@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }

  /* Global keyboard focus ring */
  :focus-visible {
    outline: 2px solid oklch(53.6% 0.207 276);
    outline-offset: 3px;
  }
  /* Inputs handle focus with box-shadow — skip outline there */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible { outline: none; }
}

@layer responsive {
  @media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .section { padding-block: var(--space-lg); }
    .section-spacious { padding-block: var(--space-xl); }
  }
  @media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .section { padding-block: var(--space-lg); }
    .section-spacious { padding-block: var(--space-lg); }
    .dash-main, .analytics-main, .briefs-main, .inquiries-main, .listings-main,
    .inbox-main, .settings-main { gap: var(--space-md); }
    .dash-action-sep { display: none; }
  }
}

/* ── Mobile burger menu — UNLAYERED so it beats per-page <style> ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-search { display: none !important; }
}
@media (min-width: 769px) {
  .nav-links { display: flex !important; }
  .nav-mobile-toggle { display: none !important; }
  .nav-separator { order: 2; }
  .nav-lang-btn { order: 3; }
  .nav-dash-row {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    order: 4;
  }
  .nav-dash-row .btn-signout-burger,
  .nav-links > .btn-signout-burger { display: none; }
  .nav-links > .btn.btn-primary {
    margin-left: auto;
    order: 4;
  }
}

/* ── Item stagger keyframe ── */
@keyframes navItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  /* ─── Panel ─── */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 60px oklch(0% 0 0 / 0.13), 0 6px 20px oklch(0% 0 0 / 0.07);
    z-index: 200;
    /* closed */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    transition: max-height 0.36s cubic-bezier(0.4, 0, 1, 1),
                opacity 0.2s ease,
                padding 0.25s ease;
  }
  .nav-links.open {
    max-height: 560px;
    opacity: 1;
    padding: 0 0 6px;
    pointer-events: auto;
    overflow-y: auto;
    /* open — spring ease-out */
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease,
                padding 0.25s ease;
  }

  /* Accent line at top of panel */
  .nav-links.open::before {
    content: '';
    display: block;
    flex-shrink: 0;
    height: 3px;
    background: linear-gradient(90deg, oklch(53.6% 0.207 276 / 0.7) 0%, transparent 100%);
    margin: 0 0 6px;
  }

  .nav-mobile-toggle { display: block; }
  .dash-signout-header { display: none !important; }
  .nav-links.open .nav-separator { display: none !important; }
  .nav-links.open a:not(.btn)::after { display: none !important; }

  /* ─── Item entrance stagger (keyed to visual order) ─── */
  .nav-links.open > * {
    animation: navItemIn 0.4s cubic-bezier(0.2, 0, 0, 1) both;
  }
  .nav-links.open > .nav-search           { animation-delay: 0.07s; }
  .nav-links.open > .nav-dropdown     { animation-delay: 0.11s; }
  .nav-links.open > a[data-i18n="nav.services"]   { animation-delay: 0.15s; }
  .nav-links.open > .nav-dash-row,
  .nav-links.open > a.btn.btn-primary     { animation-delay: 0.19s; }
  .nav-links.open > .btn-signout-burger   { animation-delay: 0.22s; }
  .nav-links.open > .nav-lang-btn         { animation-delay: 0.25s; }

  /* ─── Search bar ─── */
  .nav-links.open .nav-search {
    max-width: none !important;
    width: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    padding: 9px 14px !important;
    margin: 8px 14px 6px !important;
    border: 1.5px solid oklch(0% 0 0 / 0.09) !important;
    border-radius: 12px !important;
    background: oklch(97% 0.003 276) !important;
    gap: 8px !important;
  }
  .nav-links.open .nav-search input {
    width: 100% !important;
    font-size: 14px !important;
  }

  /* ─── Nav links (How it works, Services) ─── */
  .nav-links.open a:not(.btn):not(.btn-signout-burger),
  .nav-links.open > button:not(.nav-lang-btn):not(.nav-mobile-toggle) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 16px !important;
    margin: 1px 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    color: oklch(22% 0.015 276) !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
  }
  .nav-links.open a:not(.btn):not(.btn-signout-burger):hover,
  .nav-links.open > button:not(.nav-lang-btn):not(.nav-mobile-toggle):hover {
    background: oklch(53.6% 0.207 276 / 0.07) !important;
    color: oklch(53.6% 0.207 276) !important;
  }

  /* ─── CTA: Login / Register ─── */
  .nav-links.open .btn.btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #292846 !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    margin: 10px 10px 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    text-decoration: none !important;
    transition: background .15s !important;
  }
  .nav-links.open .btn.btn-primary:hover {
    background: #56556f !important;
  }

  /* ─── Sign out ─── */
  .nav-links.open .btn-signout-burger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 20px !important;
    margin: 2px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    color: #DC2626 !important;
    background: oklch(55% 0.12 25 / 0.05) !important;
    border: 1.5px solid oklch(55% 0.12 25 / 0.14) !important;
    transition: background .15s, color .15s, border-color .15s !important;
    text-decoration: none !important;
  }
  .nav-links.open .btn-signout-burger:hover {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #DC2626 !important;
  }

  /* ─── Language toggle ─── */
  .nav-links.open .nav-lang-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 20px !important;
    margin: 8px 0 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: oklch(38% 0.01 276) !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid oklch(0% 0 0 / 0.07) !important;
    transition: background .15s, color .15s !important;
  }
  .nav-links.open .nav-lang-btn:hover {
    background: oklch(53.6% 0.207 276 / 0.06) !important;
    color: oklch(53.6% 0.207 276) !important;
  }

  /* ─── Dashboard row (logged-in pages) ─── */
  .nav-links.open .nav-dash-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 8px 10px 0 !important;
    padding: 10px 0 4px !important;
    border-top: none !important;
  }
  .nav-links.open .nav-dash-row > * {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    color: oklch(25% 0.015 276) !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
  }
  .nav-links.open .nav-dash-row > *:hover {
    background: oklch(53.6% 0.207 276 / 0.07) !important;
    color: oklch(53.6% 0.207 276) !important;
  }

  /* ─── Visual order ─── */
  .nav-links > .nav-search               { order: 0 !important; }
  .nav-links > .nav-dropdown            { order: 1 !important; }
  .nav-links > a[data-i18n="nav.services"]   { order: 2 !important; }
  .nav-links > a.btn.btn-primary,
  .nav-links > .nav-dash-row             { order: 3 !important; }
  .nav-links > .btn-signout-burger       { order: 4 !important; }
  .nav-links > .nav-lang-btn             { order: 5 !important; }
}

/* ═══ Nav: How it works dropdown (desktop) ═══ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: oklch(40% 0.015 276);
  text-decoration: none;
  transition: color .2s;
  cursor: pointer;
  padding: 4px 0;
  background: none; border: none; font-family: inherit;
}
.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: oklch(53.6% 0.207 276);
  border-radius: 2px;
  transition: width .25s ease;
}
.nav-dropdown-trigger:hover::after { width: 100%; }
.nav-dropdown-trigger:hover { color: oklch(53.6% 0.207 276); }
.nav-dropdown.open .nav-dropdown-trigger::after { width: 100%; }
.nav-dropdown.open .nav-dropdown-trigger { color: oklch(53.6% 0.207 276); }
.dd-arrow { transition: transform .2s ease; }
.nav-dropdown.open .dd-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  min-width: 180px;
  background: #fff;
  border: 1px solid oklch(0% 0 0 / 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, margin-top .15s ease;
  z-index: 110;
  padding: 4px;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  margin-top: 4px;
}
.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: oklch(40% 0.015 276);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.nav-dropdown-menu a:hover {
  background: oklch(53.6% 0.207 276 / 0.07);
  color: oklch(53.6% 0.207 276);
  text-decoration: none !important;
}

/* ═══ Mobile: dropdown becomes inline expandable ═══ */
@media (max-width: 768px) {
  .nav-dropdown {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .nav-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 13px 16px !important;
    margin: 1px 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    color: oklch(22% 0.015 276) !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
  }
  .nav-dropdown-trigger::after { display: none !important; }
  .nav-dropdown-trigger:hover {
    background: oklch(53.6% 0.207 276 / 0.07) !important;
    color: oklch(53.6% 0.207 276) !important;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
    margin: 0 10px;
    padding: 0 0 4px 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 200px;
  }
  .nav-dropdown-menu a {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    color: oklch(40% 0.015 276) !important;
  }
  .nav-dropdown-menu a:first-child { margin-top: 4px; }
  .nav-dropdown-menu a:hover {
    background: oklch(53.6% 0.207 276 / 0.07) !important;
    color: oklch(53.6% 0.207 276) !important;
    text-decoration: none !important;
  }
}