/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR — Law Office of Conrad J. Kuyawa
   Depends on: assets/css/tokens.css
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --nav-height:     68px;
  --nav-gradient-h: 130px;
  --nav-z:          9999;
  --nav-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --nav-duration:   0.45s;
}


/* ─── WRAPPER ────────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top:   0;
  left:  0;
  right: 0;
  z-index: var(--nav-z);
}

/* ─── GRADIENT SHROUD ────────────────────────────────────────────────────── */

.navbar__gradient {
  position:       absolute;
  top:            0;
  left:           0;
  right:          0;
  height:         var(--nav-gradient-h);
  pointer-events: none;
}

.navbar__gradient::before,
.navbar__gradient::after {
  content:    '';
  position:   absolute;
  inset:      0;
  transition: opacity var(--nav-duration) ease;
}

.navbar__gradient::before {
  background: linear-gradient(
    to bottom,
    var(--color-blue-darkest) 0%,
    var(--color-blue-darkest) 8%,
    var(--color-blue-alpha-0) 100%
  );
  opacity: 0.8;
}

.navbar__gradient::after {
  background: linear-gradient(
    to bottom,
    white 0%,
    var(--color-beige) 8%,
    var(--color-beige-alpha-0) 100%
  );
  opacity: 0;
}

.navbar[data-theme="light"] .navbar__gradient::before { opacity: 0; }
.navbar[data-theme="light"] .navbar__gradient::after  { opacity: 1; }


/* ─── TOP BAR ────────────────────────────────────────────────────────────── */

.navbar__bar {
  position:              relative;
  z-index:               1;
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  height:                var(--nav-height);
  padding:               0 clamp(1.25rem, 4vw, 3rem);
}


/* ─── LOGO ───────────────────────────────────────────────────────────────── */

.navbar__logo {
  display:         inline-flex;
  align-items:     center;
  text-decoration: none;
  color:           var(--color-white);
  transition:      color var(--nav-duration) ease;
  justify-self:    start;
}

.navbar[data-theme="light"] .navbar__logo {
  color: var(--color-blue-darkest);
}

/* Logotype (full wordmark) — desktop and ≥ 480px */
.navbar__logo-full {
  display: block;
  height:  clamp(36px, 34.1px + 0.474vw, 43.2px);
}

.navbar__logo-full svg {
  display: block;
  height:  clamp(36px, 34.1px + 0.474vw, 43.2px);
  width:   auto;
}

/* Isotype (icon mark) — only at < 480px */
.navbar__logo-icon {
  display: none;
  height:  43px;
}

.navbar__logo-icon svg {
  display: block;
  height:  43px;
  width:   auto;
}


/* ─── DESKTOP NAV LINKS ──────────────────────────────────────────────────── */

.navbar__desktop {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  list-style:      none;
}

.navbar__item {
  position: relative;
}

.navbar__link,
.navbar__trigger {
  display:         inline-flex;
  align-items:     center;
  gap:             0.3rem;
  padding:         0.45rem 0.8rem;
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-regular);
  letter-spacing:  0.015em;
  color:           white;
  text-decoration: none;
  background:      none;
  border:          none;
  border-radius:   6px;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      color var(--nav-duration) ease, background 0.2s ease;
}

.navbar__link:hover,
.navbar__trigger:hover,
.navbar__item.is-open .navbar__trigger {
  color:      var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

.navbar[data-theme="light"] .navbar__link,
.navbar[data-theme="light"] .navbar__trigger {
  color: rgba(13, 13, 29, 1);
}

.navbar[data-theme="light"] .navbar__link:hover,
.navbar[data-theme="light"] .navbar__trigger:hover,
.navbar[data-theme="light"] .navbar__item.is-open .navbar__trigger {
  color:      var(--color-blue-darkest);
  background: rgba(13, 13, 29, 0.06);
}

.navbar__chevron {
  width:           14px;
  height:          14px;
  flex-shrink:     0;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  transition:      transform 0.25s var(--nav-ease);
}

.navbar__item.is-open .navbar__chevron {
  transform: rotate(180deg);
}


/* ─── DROPDOWN PANEL ─────────────────────────────────────────────────────── */

.navbar__dropdown {
  position:       absolute;
  top:            calc(100% + 12px);
  left:           50%;
  transform:      translateX(-50%) translateY(-8px);
  min-width:      300px;
  background:     var(--color-blue-darkest);
  border:         1px solid rgba(255, 255, 255, 0.08);
  border-radius:  12px;
  padding:        0.5rem;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.2s ease, transform 0.25s var(--nav-ease);
  box-shadow:     0 20px 60px rgba(0, 0, 0, 0.5),
                  0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.navbar__dropdown::before {
  content:    '';
  position:   absolute;
  top:        -5px;
  left:       50%;
  transform:  translateX(-50%) rotate(45deg);
  width:      9px;
  height:     9px;
  background: var(--color-blue-darkest);
  border-top:  1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar__item.is-open .navbar__dropdown {
  opacity:        1;
  pointer-events: all;
  transform:      translateX(-50%) translateY(0);
}

.navbar__dropdown-link {
  display:         flex;
  align-items:     flex-start;
  gap:             0.7rem;
  padding:         0.65rem 0.75rem;
  border-radius:   8px;
  color:           var(--color-white);
  text-decoration: none;
  transition:      background 0.15s ease;
}

.navbar__dropdown-link:hover {
  background: rgba(255, 255, 255, 0.07);
}

.navbar__dropdown-icon {
  width:           32px;
  height:          32px;
  border-radius:   7px;
  background:      rgba(255, 255, 255, 0.06);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      1px;
}

.navbar__dropdown-icon svg {
  width:           15px;
  height:          15px;
  stroke:          rgba(255, 255, 255, 0.7);
  fill:            none;
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.navbar__dropdown-label {
  display:      block;
  font-family:  var(--font-sans);
  font-size:    0.85rem;
  font-weight:  var(--fw-regular);
  color:        var(--color-white);
  line-height:  1.2;
}

.navbar__dropdown-desc {
  display:      block;
  font-family:  var(--font-sans);
  font-size:    0.74rem;
  color:        rgba(255, 255, 255, 0.72);
  margin-top:   2px;
  line-height:  1.4;
}

.navbar__dropdown-divider {
  height:     1px;
  background: rgba(255, 255, 255, 0.06);
  margin:     0.35rem 0.1rem;
}

/* Dropdown category header */
.navbar__dropdown-header {
  padding:       0.55rem 0.75rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.2rem;
}

.navbar__dropdown-category {
  font-family:    var(--font-sans);
  font-size:      0.67rem;
  font-weight:    var(--fw-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.48);
}

/* Dropdown footer — "Explore all →" link */
.navbar__dropdown-footer {
  margin-top: 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar__dropdown-all {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.55rem 0.75rem;
  border-radius:   8px;
  font-family:     var(--font-sans);
  font-size:       0.72rem;
  font-weight:     var(--fw-bold);
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.32);
  text-decoration: none;
  transition:      color 0.15s ease, background 0.15s ease;
}

.navbar__dropdown-all:hover {
  color:      rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.navbar__dropdown-all svg {
  width:           13px;
  height:          13px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  flex-shrink:     0;
  transition:      transform 0.2s ease;
}

.navbar__dropdown-all:hover svg {
  transform: translateX(3px);
}


/* ─── MEGA DROPDOWN (Tenants & Personal Injury) ──────────────────────────── */

/* Override base dropdown sizing/padding for mega panels */
.navbar__dropdown--mega {
  min-width: unset;
  padding:   0;
  display:   flex;
  overflow:  hidden;
  /* width is set per-dropdown via data attribute + CSS below */
}

/* Hide the caret arrow — it can't align correctly when the panel is clamped */
.navbar__dropdown--mega::before {
  display: none;
}

.navbar__dropdown--mega[data-mega="2col"] { width: 800px; }
.navbar__dropdown--mega[data-mega="3col"] { width: 820px; }

/* Prevent overflow at small viewports */
.navbar__dropdown--mega {
  max-width: calc(100vw - 2rem);
}


/* ── Left text panel ──────────────────────────────────────────────────────── */

.navbar__mega-left {
  width:           280px;
  flex-shrink:     0;
  padding:         1.3rem 1.1rem 1.3rem 1.1rem;
  border-right:    1px solid rgba(255, 255, 255, 0.07);
  display:         flex;
  flex-direction:  column;
  gap:             0.75rem;
}

.navbar__mega-label {
  font-family:    var(--font-sans);
  font-size:      0.67rem;
  font-weight:    var(--fw-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.48);
}

.navbar__mega-intro {
  font-family: var(--font-sans);
  font-size:   0.78rem;
  color:       rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  flex:        1;
}

.navbar__mega-linklist {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        0.1rem;
}

.navbar__mega-linklist a {
  display:         block;
  font-family:     var(--font-sans);
  font-size:       0.8rem;
  color:           rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding:         0.28rem 0;
  transition:      color 0.15s ease;
}

.navbar__mega-linklist a:hover {
  color: var(--color-white);
}

.navbar__mega-see-all {
  display:         none;
}

/* keep the rule block for future use if needed */
.navbar__mega-see-all--visible {
  display:         inline-flex;
  align-items:     center;
  gap:             0.3rem;
  font-family:     var(--font-sans);
  font-size:       0.7rem;
  font-weight:     var(--fw-bold);
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.28);
  text-decoration: none;
  transition:      color 0.15s ease;
}

.navbar__mega-see-all:hover {
  color: rgba(255, 255, 255, 0.65);
}

.navbar__mega-see-all svg {
  width:           11px;
  height:          11px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  transition:      transform 0.2s ease;
}

.navbar__mega-see-all:hover svg {
  transform: translateX(3px);
}


/* ── Right image-card panel ───────────────────────────────────────────────── */

.navbar__mega-cards {
  display: flex;
  padding: 0.75rem;
  gap:     0.5rem;
  flex:    1;
}

.navbar__mega-card {
  flex:            1;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  border-radius:   8px;
  overflow:        hidden;
  text-decoration: none;
  background:      rgba(255, 255, 255, 0.03);
  border:          1px solid rgba(255, 255, 255, 0.06);
  transition:      background 0.2s ease, border-color 0.2s ease;
}

.navbar__mega-card:hover {
  background:   rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
}

/* Photo area */
.navbar__mega-card-img {
  width:        100%;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  position:     relative;
  flex-shrink:  0;
}

.navbar__mega-card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}

.navbar__mega-card:hover .navbar__mega-card-img img {
  transform: scale(1.04);
}

/* Placeholder gradients (swap out for real photos later) */
.navbar__mega-card-img--habitability {
  background: linear-gradient(145deg, #12244a 0%, #0c1830 60%, #0d0d1d 100%);
}
.navbar__mega-card-img--tenant-rep {
  background: linear-gradient(145deg, #1a2a50 0%, #0e1a38 60%, #0d0d1d 100%);
}
.navbar__mega-card-img--vehicle {
  background: linear-gradient(145deg, #3a1212 0%, #1f0a0a 60%, #160a0a 100%);
}
.navbar__mega-card-img--premises {
  background: linear-gradient(145deg, #1a2230 0%, #0d1420 60%, #0d0d1d 100%);
}
.navbar__mega-card-img--wrongful-death {
  background: linear-gradient(145deg, #1c1c2e 0%, #0d0d1d 60%, #111128 100%);
}

/* Placeholder overlay symbol */
.navbar__mega-card-img::after {
  content:     '';
  position:    absolute;
  inset:       0;
  background:  radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04) 0%, transparent 65%);
}

/* Card text body */
.navbar__mega-card-body {
  padding:        0.75rem 0.85rem 0.8rem;
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  flex:           1;
}

.navbar__mega-card-title {
  display:     block;
  font-family: var(--font-sans);
  font-size:   0.82rem;
  font-weight: var(--fw-bold);
  color:       var(--color-white);
  line-height: 1.25;
}

.navbar__mega-card-desc {
  font-family: var(--font-sans);
  font-size:   0.72rem;
  color:       rgba(255, 255, 255, 0.68);
  line-height: 1.55;
  flex:        1;
}

.navbar__mega-card-cta {
  display:        inline-flex;
  align-items:    center;
  gap:            0.25rem;
  font-family:    var(--font-sans);
  font-size:      0.7rem;
  font-weight:    var(--fw-bold);
  letter-spacing: 0.04em;
  color:          rgba(255, 255, 255, 0.52);
  margin-top:     0.2rem;
  transition:     color 0.15s ease;
}

.navbar__mega-card-cta svg {
  width:           10px;
  height:          10px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    2.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
  transition:      transform 0.2s ease;
}

.navbar__mega-card:hover .navbar__mega-card-cta {
  color: rgba(255, 255, 255, 0.65);
}

.navbar__mega-card:hover .navbar__mega-card-cta svg {
  transform: translateX(3px);
}


/* ─── RIGHT SIDE ─────────────────────────────────────────────────────────── */

.navbar__right {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             0.5rem;
  justify-self:    end;
}

/* ─── HAMBURGER ──────────────────────────────────────────────────────────── */

.navbar__burger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-end;    /* lines right-aligned = trailing feel */
  width:           40px;
  height:          40px;
  min-width:       44px;
  min-height:      44px;
  gap:             6px;
  cursor:          pointer;
  border:          none;
  background:      none;
  padding:         0;
  color:           var(--color-white);
  transition:      color var(--nav-duration) ease;
}

.navbar[data-theme="light"] .navbar__burger {
  color: var(--color-blue-darkest);
}

.navbar__burger-line {
  display:          block;
  height:           1px;
  background:       currentColor;
  border-radius:    1px;
  transform-origin: right center;  /* pivot from trailing edge */
  transition:       transform 0.4s var(--nav-ease),
                    opacity   0.3s ease,
                    width     0.35s var(--nav-ease);
}

/* Line lengths: top full, middle shorter = asymmetric feel */
.navbar__burger-line:nth-child(1) { width: 22px; }
.navbar__burger-line:nth-child(2) { width: 14px; }
.navbar__burger-line:nth-child(3) { width: 22px; }

/* → X on active */
.navbar__burger.is-active .navbar__burger-line:nth-child(1) {
  width:     22px;
  transform: translateY(7px) rotate(-45deg);
}
.navbar__burger.is-active .navbar__burger-line:nth-child(2) {
  opacity: 0;
  width:   0;
}
.navbar__burger.is-active .navbar__burger-line:nth-child(3) {
  width:     22px;
  transform: translateY(-7px) rotate(45deg);
}


/* ─── MOBILE FULLSCREEN OVERLAY ──────────────────────────────────────────── */

/* Off-screen / invisible on desktop — display:none removes from layout.
   On mobile the breakpoint switches to display:block, and
   visibility+opacity handle the open/close animation.            */
.navbar__mobile {
  display: none;
}

@keyframes navFadeUp {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* ─── MOBILE OVERLAY INNER ELEMENTS ─────────────────────────────────────── */

/* Header */
.navbar__mobile-header {
  position:        sticky;
  top:             0;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--nav-height);
  padding:         0 clamp(1.25rem, 6vw, 2rem);
  background:      var(--color-blue-darkest);
  border-bottom:   1px solid rgba(255, 255, 255, 0.06);
}

.navbar__mobile-logo {
  display:         inline-flex;
  align-items:     center;
  color:           var(--color-white);
  text-decoration: none;
}

/* Logotype: full wordmark — shown at ≥ 480px in mobile menu */
.navbar__mobile-logo-full {
  display: block;
  height:  clamp(30px, 28.42px + 0.395vw, 36px);
}

.navbar__mobile-logo-full svg {
  display: block;
  height:  100%;
  width:   auto;
}

/* Isotype: icon mark — shown only at < 480px in mobile menu */
.navbar__mobile-logo-icon {
  display: none;
  height:  43px;
}

.navbar__mobile-logo-icon svg {
  display: block;
  height:  100%;
  width:   auto;
}

/* CLOSE button — text + icon, matching reference style */
.navbar__mobile-close {
  display:      flex;
  align-items:  center;
  gap:          0.4rem;
  border:       none;
  background:   none;
  cursor:       pointer;
  color:        rgba(255, 255, 255, 0.5);
  font-family:  var(--font-sans);
  font-size:    var(--text-xs);
  font-weight:  var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:      0;
  transition:   color 0.2s ease;
}

.navbar__mobile-close:hover {
  color: var(--color-white);
}

.navbar__mobile-close svg {
  width:           16px;
  height:          16px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

/* Scrollable body */
.navbar__mobile-body {
  padding: clamp(2rem, 8vw, 3rem) clamp(1.25rem, 6vw, 2.5rem) 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Two-column section grid */
.navbar__mobile-sections {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2rem clamp(1.5rem, 6vw, 3rem);
}

/* Each group */
.navbar__mobile-group {
  position: relative;
}

/* Stretch the inner link to cover the entire group card */
.navbar__mobile-group-links a::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
}

.navbar__mobile-group-title {
  font-family:  var(--font-serif);
  font-size:    var(--text-h4);
  font-weight:  var(--fw-light);
  color:        var(--color-white);
  line-height:  1.1;
  margin-bottom: 1rem;
  transition:   color 0.2s ease, opacity 0.2s ease;
}

.navbar__mobile-group-title:active,
.navbar__mobile-group:active .navbar__mobile-group-title {
  color:   var(--color-red-light);
  opacity: 0.85;
}

/* Plain text link list */
.navbar__mobile-group-links {
  list-style:    none;
  display:       flex;
  flex-direction: column;
  gap:           0.65rem;
}

.navbar__mobile-group-links a {
  display:         block;
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-regular);
  color:           rgba(255, 255, 255, 0.5);
  text-decoration: none;
  line-height:     1.4;
  transition:      color 0.2s ease;
}

.navbar__mobile-group-links a:hover {
  color: var(--color-white);
}

/* Divider */
.navbar__mobile-divider {
  height:     1px;
  background: rgba(255, 255, 255, 0.07);
  margin:     0;
}

/* Secondary links — small plain row */
.navbar__mobile-secondary {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.25rem 0;
}

.navbar__mobile-secondary a {
  display:         block;
  width:           50%;
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-regular);
  color:           rgba(255, 255, 255, 0.4);
  text-decoration: none;
  padding:         0.4rem 0;
  transition:      color 0.2s ease;
}

.navbar__mobile-secondary a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* Bottom: social icons on top, phone CTA below */
.navbar__mobile-bottom {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0.75rem;
}

/* CTA variants — inline shown at ≥ 480px (beside social), block shown at < 480px (below social) */
/* The espanol label is a sibling of each button — it shows/hides with its button. */
.navbar__mobile-cta--inline                   { display: none; }
.navbar__mobile-cta--inline ~ .navbar__espanol { display: none; }

@media (min-width: 480px) {
  .navbar__mobile-bottom {
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
  }
  .navbar__mobile-cta--inline                   { display: inline-flex; }
  .navbar__mobile-cta--inline ~ .navbar__espanol { display: block; }
  .navbar__mobile-cta--block                    { display: none; }
  .navbar__mobile-cta--block  ~ .navbar__espanol { display: none; }
}

.navbar__mobile-social {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
}

.navbar__mobile-social > a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   8px;
  background:      rgba(255, 255, 255, 0.06);
  color:           rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition:      background 0.2s ease, color 0.2s ease;
}

.navbar__mobile-social > a:hover {
  background: rgba(255, 255, 255, 0.12);
  color:      var(--color-white);
}

.navbar__mobile-social > a svg {
  display: block;
  width:   17px;
  height:  17px;
}


/* ─── RESPONSIVE BREAKPOINTS ─────────────────────────────────────────────── */

/* Swap to isotype only at very small screens */
@media (max-width: 479px) {
  .navbar__logo-full        { display: none; }
  .navbar__logo-icon        { display: block; }
  .navbar__mobile-logo-full { display: none; }
  .navbar__mobile-logo-icon { display: block; }

}

/* Mobile nav — hamburger + overlay */
@media (max-width: 860px) {

  /* Bar: auto | flex | auto so burger is always trailing */
  .navbar__bar {
    grid-template-columns: auto 1fr auto;
  }

  .navbar__desktop      { display: none; }
  .navbar__cta--desktop { display: none; }
  .navbar__burger       { display: flex; }

  /* Hide the desktop "Hablamos Español" label — mobile menu has its own */
  .navbar__bar .navbar__espanol { display: none; }

  /* Make overlay renderable so opacity transitions work */
  .navbar__mobile {
    display:         block;
    position:        fixed;
    inset:           0;
    z-index:         calc(var(--nav-z) + 1);
    background:      var(--color-blue-darkest);
    overflow-y:      auto;
    -webkit-overflow-scrolling: touch;

    /* Closed state */
    opacity:         0;
    visibility:      hidden;
    pointer-events:  none;
    transform:       translateY(-10px);
    transition:      opacity   0.4s ease,
                     transform 0.45s var(--nav-ease),
                     visibility 0s linear 0.4s;
  }

  .navbar__mobile.is-open {
    opacity:         1;
    visibility:      visible;
    pointer-events:  all;
    transform:       translateY(0);
    transition:      opacity   0.4s ease,
                     transform 0.45s var(--nav-ease),
                     visibility 0s;
  }

  /* Staggered entrance for interior elements */
  .navbar__mobile-sections,
  .navbar__mobile-divider,
  .navbar__mobile-secondary,
  .navbar__mobile-social,
  .navbar__mobile-cta {
    opacity:    0;
    transform:  translateY(16px);
    transition: opacity 0.45s ease, transform 0.5s var(--nav-ease);
  }

  .navbar__mobile.is-open .navbar__mobile-sections {
    opacity:           1;
    transform:         translateY(0);
    transition-delay:  0.12s;
  }

  .navbar__mobile.is-open .navbar__mobile-divider {
    opacity:           1;
    transform:         translateY(0);
    transition-delay:  0.2s;
  }

  .navbar__mobile.is-open .navbar__mobile-secondary {
    opacity:           1;
    transform:         translateY(0);
    transition-delay:  0.25s;
  }

  .navbar__mobile.is-open .navbar__mobile-social {
    opacity:           1;
    transform:         translateY(0);
    transition-delay:  0.30s;
  }

  .navbar__mobile.is-open .navbar__mobile-cta {
    opacity:           1;
    transform:         translateY(0);
    transition-delay:  0.36s;
  }
}

/* Prevent body scroll when menu open */
body.nav-locked {
  overflow: hidden;
}


/* ─── NAV CTA BUTTON — tighter vertical padding ─────────────────────────── */
.navbar__cta--desktop.btn {
  padding-block: clamp(0.3rem, 0.2rem + 0.4vw, 0.7rem);
}

/* ─── HABLAMOS ESPAÑOL LABEL ─────────────────────────────────────────────── */

.navbar__cta-wrap {
  position: relative;
  display:  inline-flex;
  width:    50%;
}

@media (min-width: 861px) {
  .navbar__cta-wrap {
    width: 100%;
  }
}

.navbar__espanol {
  position:       absolute;
  bottom:         -1.3rem;
  font-family:    var(--font-sans);
  font-size:      0.75rem;
  font-weight:    var(--fw-bold);
  letter-spacing: 0.06em;
  white-space:    nowrap;
  color:          var(--color-red-light);
  pointer-events: none;
  transition:     color 0.25s ease, opacity 0.2s ease;
}

/* Desktop call button hover → label turns red */
.navbar__cta-wrap .navbar__cta--desktop:hover ~ .navbar__espanol {
  color: var(--color-red);
}

/* Hide label when any dropdown is open */
.navbar:has(.navbar__item.is-open) .navbar__espanol {
  opacity: 0;
  pointer-events: none;
}

/* Light mode → label uses blue-light */
.navbar[data-theme="light"] .navbar__espanol {
  color: var(--color-blue-light);
}

/* Mobile block wrapper — full width, position context for espanol */
.navbar__cta-wrap--block {
  display: block;
  width:   100%;
}

/* On mobile, float the label above the button */
.navbar__cta-wrap--block .navbar__espanol {
  bottom: auto;
  top:    -1.3rem;
  transform:      translateX(-100%);
}


/* ─────────────────────────────────────────────────────────────────────────── */


/* ─── LIGHT THEME — DROPDOWN & MEGA OVERRIDES ───────────────────────────── */

/* ── Panel shell ── */
.navbar[data-theme="light"] .navbar__dropdown {
  background:  var(--color-white);
  border-color: rgba(13, 13, 29, 0.09);
  box-shadow:  0 20px 60px rgba(0, 0, 0, 0.12),
               0 1px 0 rgba(13, 13, 29, 0.04) inset;
}

.navbar[data-theme="light"] .navbar__dropdown::before {
  background:   var(--color-white);
  border-color: rgba(13, 13, 29, 0.09);
}

/* ── "More" dropdown links ── */
.navbar[data-theme="light"] .navbar__dropdown-link {
  color: var(--color-blue-darkest);
}

.navbar[data-theme="light"] .navbar__dropdown-link:hover {
  background: rgba(13, 13, 29, 0.04);
}

.navbar[data-theme="light"] .navbar__dropdown-icon {
  background: rgba(13, 13, 29, 0.05);
}

.navbar[data-theme="light"] .navbar__dropdown-icon svg {
  stroke: rgba(13, 13, 29, 0.55);
}

.navbar[data-theme="light"] .navbar__dropdown-label {
  color: var(--color-blue-darkest);
}

.navbar[data-theme="light"] .navbar__dropdown-desc {
  color: rgba(13, 13, 29, 0.68);
}

.navbar[data-theme="light"] .navbar__dropdown-divider {
  background: rgba(13, 13, 29, 0.07);
}

.navbar[data-theme="light"] .navbar__dropdown-header {
  border-bottom-color: rgba(13, 13, 29, 0.07);
}

.navbar[data-theme="light"] .navbar__dropdown-category {
  color: rgba(13, 13, 29, 0.35);
}

.navbar[data-theme="light"] .navbar__dropdown-footer {
  border-top-color: rgba(13, 13, 29, 0.07);
}

.navbar[data-theme="light"] .navbar__dropdown-all {
  color: rgba(13, 13, 29, 0.38);
}

.navbar[data-theme="light"] .navbar__dropdown-all:hover {
  color:      var(--color-blue-darkest);
  background: rgba(13, 13, 29, 0.04);
}

/* ── Mega — left text panel ── */
.navbar[data-theme="light"] .navbar__mega-left {
  border-right-color: rgba(13, 13, 29, 0.08);
}

.navbar[data-theme="light"] .navbar__mega-label {
  color: rgba(13, 13, 29, 0.55);
}

.navbar[data-theme="light"] .navbar__mega-intro {
  color: rgba(13, 13, 29, 0.72);
}

.navbar[data-theme="light"] .navbar__mega-linklist a {
  color: rgba(13, 13, 29, 0.72);
}

.navbar[data-theme="light"] .navbar__mega-linklist a:hover {
  color: var(--color-blue-darkest);
}

.navbar[data-theme="light"] .navbar__mega-see-all {
  color: rgba(13, 13, 29, 0.38);
}

.navbar[data-theme="light"] .navbar__mega-see-all:hover {
  color: rgba(13, 13, 29, 0.75);
}

/* ── Mega — cards ── */
.navbar[data-theme="light"] .navbar__mega-card {
  background:   rgba(13, 13, 29, 0.025);
  border-color: rgba(13, 13, 29, 0.08);
}

.navbar[data-theme="light"] .navbar__mega-card:hover {
  background:   rgba(13, 13, 29, 0.055);
  border-color: rgba(13, 13, 29, 0.15);
}

.navbar[data-theme="light"] .navbar__mega-card-title {
  color: var(--color-blue-darkest);
}

.navbar[data-theme="light"] .navbar__mega-card-desc {
  color: rgba(13, 13, 29, 0.68);
}

.navbar[data-theme="light"] .navbar__mega-card-cta {
  color: rgba(13, 13, 29, 0.55);
}

.navbar[data-theme="light"] .navbar__mega-card:hover .navbar__mega-card-cta {
  color: var(--color-blue-darkest);
}


/* ─── PAGE BACKDROP (dropdown open state) ───────────────────────────────── */

.navbar__page-backdrop {
  position:        fixed;
  inset:           0;
  z-index:         calc(var(--nav-z) - 1);
  background:      rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events:  none;
  opacity:         0;
  transition:      opacity 0.3s ease;
}

.navbar__page-backdrop.is-active {
  opacity: 1;
}


/* ─── DESKTOP NAV — HOVER DESATURATION ──────────────────────────────────── */
/* When any nav item is hovered, the others dim so the active one stands out. */

.navbar__desktop:has(.navbar__item:hover) .navbar__link,
.navbar__desktop:has(.navbar__item:hover) .navbar__trigger {
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease, background 0.2s ease;
}

.navbar__desktop:has(.navbar__item:hover) .navbar__item:hover > .navbar__link,
.navbar__desktop:has(.navbar__item:hover) .navbar__item:hover > .navbar__trigger,
.navbar__desktop:has(.navbar__item:hover) .navbar__item.is-open  > .navbar__trigger {
  color: var(--color-white);
}

/* Light theme */
.navbar[data-theme="light"] .navbar__desktop:has(.navbar__item:hover) .navbar__link,
.navbar[data-theme="light"] .navbar__desktop:has(.navbar__item:hover) .navbar__trigger {
  color: rgba(13, 13, 29, 0.5);
}

.navbar[data-theme="light"] .navbar__desktop:has(.navbar__item:hover) .navbar__item:hover > .navbar__link,
.navbar[data-theme="light"] .navbar__desktop:has(.navbar__item:hover) .navbar__item:hover > .navbar__trigger,
.navbar[data-theme="light"] .navbar__desktop:has(.navbar__item:hover) .navbar__item.is-open  > .navbar__trigger {
  color: var(--color-blue-darkest);
}