/* ==========================================
   AFFMOV - site header (topbar + nav + mobile menu)
   Variables (--navy, --gold, --font-*) come from main.css,
   so this file is loaded AFTER main.css.
   File is pure ASCII on purpose (unicode via CSS escapes).
========================================== */

/* Override Elementor-kit global link fonts in the header. */
body .affmov-nav .nav-links a { font-family: var(--font-body); }
body .affmov-nav .nav-cta,
body .affmov-nav .nav-phone-num a { font-family: var(--font-display); }

/* Local resets for the header. */
.affmov-topbar, .affmov-topbar *,
.affmov-nav, .affmov-nav * { box-sizing: border-box; }
.affmov-nav ul { margin: 0; padding: 0; list-style: none; }
.affmov-topbar p { margin: 0; }
.affmov-nav a, .affmov-topbar a { text-decoration: none; }

/* -- TOP BAR -------------------------------- */
.affmov-topbar { background: var(--navy-dark); padding: 8px 32px; }
.topbar-inner {
  max-width: 1760px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.topbar-text { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; }
.topbar-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar-badge {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 6px;
}
.topbar-badge::before { content: '\2713'; color: var(--gold); font-size: 14px; }

/* -- NAV ------------------------------------ */
.affmov-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--gold); border-bottom: 3px solid var(--gold-dark);
}
.nav-inner {
  max-width: 1760px; margin: 0 auto; padding: 0 32px; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo-icon {
  width: 48px; height: 48px; background: var(--navy); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 23px;
  overflow: hidden;
}
.nav-logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.nav-logo-img { height: 52px; width: auto; max-height: 56px; max-width: 240px; object-fit: contain; display: block; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo-top {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy);
}
.nav-logo-bottom {
  font-family: var(--font-display); font-size: 23px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy);
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy); padding: 8px 14px; border-radius: var(--radius);
  transition: background 0.2s, color 0.2s; display: block;
}
.nav-links a:hover,
.nav-links .current-menu-item > a { background: rgba(27,45,107,0.1); }

/* Top-level items: positioning for dropdowns. */
.nav-links > li { position: relative; }
.nav-links > li > a { display: flex; align-items: center; gap: 6px; }
/* Arrow on items with submenu. */
.nav-links .menu-item-has-children > a::after {
  content: '\25BE'; font-size: 12px; line-height: 1; opacity: 0.7;
}

/* Dropdown submenu. */
.nav-links .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 200;
  min-width: 240px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  box-shadow: 0 12px 32px rgba(27,45,107,0.18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-links .sub-menu li { display: block; }
.nav-links .sub-menu a {
  display: block; padding: 9px 18px; border-radius: 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
.nav-links .sub-menu a:hover { background: var(--light-blue); }
/* Nested submenu (level 3) opens to the side. */
.nav-links .sub-menu .sub-menu { top: -11px; left: 100%; }
.nav-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-phone { display: flex; align-items: center; gap: 8px; }
.nav-phone-icon {
  width: 34px; height: 34px; background: var(--navy); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.nav-phone-num {
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: var(--navy); letter-spacing: 0.02em;
}
.nav-phone-num a { color: inherit; }
.nav-cta {
  background: var(--navy); color: var(--white) !important;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 24px;
  border-radius: var(--radius); transition: background 0.2s; white-space: nowrap;
}
.nav-cta:hover { background: var(--navy-mid); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span {
  display: block; width: 26px; height: 2px; background: var(--navy); border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Burger -> X when menu is open (.nav-links.open precedes .hamburger inside .nav-inner). */
.nav-links.open ~ .hamburger span:nth-child(1),
.hamburger.active span:nth-child(1),
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-links.open ~ .hamburger span:nth-child(2),
.hamburger.active span:nth-child(2),
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-links.open ~ .hamburger span:nth-child(3),
.hamburger.active span:nth-child(3),
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .hamburger span { transition: none; }
}

/* Mobile buttons inside menu (phone + Get an Estimate), hidden on desktop. */
.nav-links .nav-mobile-ctas { display: none; }

/* -- RESPONSIVE (header) ---------------------- */
@media (max-width: 768px) {
  .affmov-topbar { display: none; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--gold); padding: 8px 24px 32px; gap: 0;
    border-bottom: 3px solid var(--gold-dark);
    /* Height = screen - navbar - bottom CALL NOW bar (58px) - admin bar (if logged in). */
    max-height: calc(100vh - 72px - 58px - var(--wp-admin--admin-bar--height, 0px));
    max-height: calc(100dvh - 72px - 58px - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    text-align: center;
    box-shadow: 0 12px 24px rgba(27,45,107,0.18);
  }
  .nav-links.open > li { border-bottom: 1px solid rgba(27,45,107,0.12); }
  .nav-links.open > li:last-child { border-bottom: none; }

  /* Top-level items always centered (closed and open). */
  .nav-links.open > li > a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 0; font-size: 15px; text-align: center;
  }
  /* Flat look in open mobile menu (no hover box; :hover sticks on tap). */
  .nav-links.open a { border-radius: 0; }
  .nav-links.open a:hover,
  .nav-links.open .current-menu-item > a,
  .nav-links.open .current-menu-parent > a,
  .nav-links.open .menu-item-has-children.affmov-open > a { background: transparent; }

  /* Submenu accordion, centered: hidden, opens on tap. */
  .nav-links.open .sub-menu {
    display: none; position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: 0 0 12px; padding: 6px 0;
    border: none; border-radius: var(--radius); box-shadow: none;
    background: transparent;
    text-align: center;
  }
  .nav-links.open .menu-item-has-children.affmov-open > .sub-menu { display: block; }
  .nav-links.open .sub-menu a {
    display: block; padding: 10px 12px; font-size: 13px; border: none;
    text-align: center; white-space: normal;
  }

  /* +/- indicator right after item text. */
  .nav-links.open .menu-item-has-children > a::after {
    content: '+'; margin-left: 0; font-size: 20px; font-weight: 400; line-height: 1; opacity: 0.7;
  }
  .nav-links.open .menu-item-has-children.affmov-open > a::after { content: '\2212'; }

  /* Buttons at bottom of menu, like desktop: phone + Get an Estimate. */
  .nav-links.open > li.nav-mobile-ctas {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 0 4px; border-bottom: none;
  }
  .nav-links.open .nav-mobile-ctas a,
  .nav-links.open .nav-mobile-ctas a:hover {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px 20px; border-radius: var(--radius);
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  }
  .nav-links.open .nav-mobile-ctas .nav-mobile-phone,
  .nav-links.open .nav-mobile-ctas .nav-mobile-phone:hover {
    background: transparent; color: var(--navy) !important; border: 2px solid var(--navy);
  }
  .nav-links.open .nav-mobile-ctas .nav-mobile-estimate,
  .nav-links.open .nav-mobile-ctas .nav-mobile-estimate:hover {
    background: var(--navy); color: var(--white) !important; border: 2px solid var(--navy);
  }
  .nav-links.open .nav-mobile-ctas .nav-mobile-phone svg { flex-shrink: 0; }

  .nav-phone { display: none; }
  .hamburger { display: flex; }
  .nav-cta { display: none; }
}