/* ===============================================================
   HEADER v2  ·  parts/header.css
   Desktop:  logo LEFT | menu CENTRE | button RIGHT
   Mobile:   logo LEFT | button + burger RIGHT, full screen menu

   Height comes from the --headH token. Do not write px heights here.
   Where the hamburger turns off: see 5. BREAKPOINT below.

   Contents
     1. Announcement bar
     2. Header shell and its three tracks
     3. Brand
     4. Nav links and chevron
     5. Breakpoint
     6. Simple dropdown
     7. Phone, CTA, burger
     8. Full screen mobile menu
   =============================================================== */


/* ===============================================================
   1. ANNOUNCEMENT BAR
   =============================================================== */
.annbar{background:var(--teal-800);color:var(--neutral-100);font-size:14px;position:relative;z-index:61}
.annbar__in{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;padding-top:9px;padding-bottom:9px;text-align:center}
.annbar a{color:var(--gold-400);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (hover:hover){ .annbar a:hover{color:var(--white)} }
.annbar a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}


/* ===============================================================
   2. HEADER SHELL
   =============================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  height:var(--headH);
  background:var(--head-bg);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.site-head.is-stuck{
  background:var(--head-bg-stuck);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 16px rgba(7,14,36,.28);
  border-bottom-color:var(--head-border);
}

/* CORE ALIGNMENT LINE  <- do not remove.
   .site-head has a fixed height (--headH). The inner .container must
   be 100% tall too, otherwise .nav height:100% resolves to nothing and
   items stick to the top. With this, align-items:center really works. */
.site-head > .container{height:100%;display:flex;align-items:center}

/* Three tracks: logo left, menu centre, actions right.
   From 1280px the side tracks are equal (1fr), so the menu sits at
   the TRUE optical centre even if the CTA is wider than the logo.
   Below 1280px space is tight, so auto 1fr auto: the menu sits in
   the remaining space and nothing overlaps. */
.nav{
  width:100%;
  height:100%;
  min-height:var(--headH);
  display:grid;align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:20px;
}
@media (min-width:1280px){ .nav{grid-template-columns:1fr auto 1fr} }
.nav__left{justify-self:start;display:flex;align-items:center;height:100%;min-width:0}
.nav__mid{justify-self:center;display:flex;align-items:center;height:100%;min-width:0}
.nav__right{justify-self:end;display:flex;align-items:center;height:100%;gap:10px;min-width:0}

/* For a CENTRED logo, uncomment these three lines:
.nav{grid-template-columns:1fr auto 1fr}
.nav__left{justify-self:center;grid-column:2}
.nav__mid{justify-self:start;grid-column:1}
*/


/* ===============================================================
   3. BRAND
   =============================================================== */
.brand{display:flex;align-items:center;gap:10px;color:var(--white);line-height:1;max-width:100%}
.brand__mark{
  width:32px;height:32px;border-radius:10px;flex:none;
  background:var(--head-mark-bg);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:900;font-size:16px;
  line-height:1;
}
.brand__name{
  font-family:var(--font-heading);font-weight:900;font-size:17px;letter-spacing:-.01em;
  line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* However tall the logo is, it never breaks the header height.
   Width comes from Theme Settings > Logo width. */
.brand__img{max-width:100%;max-height:calc(var(--headH) - 20px);height:auto;object-fit:contain}
.brand:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:4px;border-radius:6px}


/* ===============================================================
   4. NAV LINK
   =============================================================== */
.navlinks{display:none;align-items:center;gap:4px;height:100%}
.nav__item{position:relative;height:100%;display:flex;align-items:center}

.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 12px;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--head-text);
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
  cursor:pointer;
}
@media (hover:hover){ .nav__link:hover{color:var(--head-text-hover);background:rgba(255,255,255,.08)} }
.nav__link:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* Active page: colour + underline. Never rely on colour alone. */
.nav__item.current-menu-item > .nav__link,
.nav__item.current_page_item > .nav__link,
.nav__item.current-menu-ancestor > .nav__link,
.nav__item.current-menu-parent > .nav__link{
  color:var(--head-text-hover);
  box-shadow:inset 0 -2px 0 var(--head-text-hover);
}

.nav__chev{display:inline-flex;transition:transform var(--dur) var(--ease);opacity:.8}
.nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__link[aria-expanded="true"]{color:var(--gold-400);background:rgba(255,255,255,.08)}


/* ===============================================================
   5. BREAKPOINT  <- the hamburger turns off HERE
   =============================================================== */
@media (min-width:768px){
  .brand__mark{width:34px;height:34px}
  .brand__name{font-size:18px}
}
@media (min-width:1024px){
  .navlinks{display:flex}
}
@media (min-width:1024px){
  .nav__link{padding:0 9px;font-size:12.5px}
}
@media (min-width:1280px){
  .navlinks{gap:6px}
  .nav__link{padding:0 13px;font-size:13px}
}
@media (min-width:1440px){
  .brand__name{font-size:19px}
  .brand__mark{width:38px;height:38px;font-size:18px}
  .nav__link{padding:0 16px}
}
@media (max-height:700px){
  .brand__mark{width:28px;height:28px;font-size:14px}
  .brand__name{font-size:16px}
}

/* --- 5.1 ALIGNMENT GUARD (desktop + tablet + mobile) ---------------
   Every header item sits on the same optical line. These three
   lines also handle any new element you add. */
.nav > *{align-self:center}
.nav__right > *{flex:none}
.nav__left .brand{align-items:center}
/* Minimum gap between logo and burger on small phones */
@media (max-width:479px){
  .nav{gap:12px}
  .brand__name{font-size:16px}
}
@media (min-width:480px) and (max-width:1023px){
  .nav{gap:14px}
}


/* ===============================================================
   6. SIMPLE DROPDOWN
   =============================================================== */
.drop{
  position:absolute;top:100%;left:0;min-width:240px;
  background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-drop);
  padding:8px;margin-top:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:5;
}
.nav__item.has-drop.is-open > .drop{opacity:1;visibility:visible;transform:none}
.drop .nav__item{display:block;height:auto;position:relative}
.drop .nav__link{
  display:block;width:100%;height:auto;padding:10px 12px;
  color:var(--teal-700);text-transform:none;letter-spacing:0;
  font-size:15px;font-weight:600;
}
@media (hover:hover){ .drop .nav__link:hover{background:var(--teal-tint);color:var(--teal-700)} }
.drop .nav__link:focus-visible{outline-color:var(--focus-ring)}


/* ===============================================================
   7. PHONE, CTA, BURGER
   Display rules for these three live HERE, not in section 5,
   because they must come after the base rules to win.
   =============================================================== */
.nav__phone{display:none;align-items:center;gap:7px;color:var(--white);font-weight:600;font-size:14px;white-space:nowrap}
@media (hover:hover){ .nav__phone:hover{color:var(--gold-400)} }
.nav__phone:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

.nav__cta{display:none;min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap}
.btn.ghost.nav__cta2{display:none;min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap;color:var(--white);border-color:rgba(255,255,255,.5);background:transparent}
@media (hover:hover){ .btn.ghost.nav__cta2:hover{background:rgba(255,255,255,.1);border-color:var(--white)} }

.burger{
  width:44px;height:44px;flex:none;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);
  cursor:pointer;
}
.burger i{width:18px;height:2px;background:var(--white);border-radius:2px}
.burger:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* Small phones: logo + burger only. The button shows from 480px. */
@media (min-width:480px){ .nav__cta{display:inline-flex} }
@media (min-width:1280px){ .btn.ghost.nav__cta2{display:inline-flex} }
/* Phone number from 1700px, where the container grows to 1560px.
   Below that, menu + logo + phone + button do not fit in 1208px.
   With a short menu (3-4 items) you can lower this to 1280;
   then test at 1280, 1440 and 1600. */
@media (min-width:1700px){ .nav__phone{display:inline-flex} }
@media (min-width:1024px){
  .nav__cta{min-height:42px;padding:0 18px;font-size:14px}
  .burger{display:none}      /* <- the hamburger turns off HERE */
}

/* ===============================================================
   8. FULL SCREEN MOBILE MENU
   =============================================================== */
.mnav{
  position:fixed;inset:0;z-index:80;
  background:var(--teal-800);
  display:flex;flex-direction:column;
  overscroll-behavior:contain;
}
.mnav[hidden]{display:none}
body.menu-open{overflow:hidden}

.mnav__top{flex:none;height:var(--headH);border-bottom:1px solid rgba(255,255,255,.16)}
.mnav__topin{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mnav__close{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--white);
  border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);cursor:pointer;
}
@media (hover:hover){ .mnav__close:hover{background:rgba(255,255,255,.1)} }
.mnav__close:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

.mnav__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 0 24px}

.mnav__list{display:block}
.mnav__item{border-bottom:1px solid rgba(255,255,255,.14)}
.mnav__row{display:flex;align-items:center;gap:8px}
.mnav__link{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:16px 0;color:var(--white);
  font-family:var(--font-body);font-weight:600;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;
}
.mnav__link:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:-3px}
.mnav__item.current-menu-item > .mnav__row > .mnav__link{color:var(--gold-400)}

.mnav__tog{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--white);
  border:0;border-radius:var(--radius-sm);cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur-fast) var(--ease);
}
.mnav__tog[aria-expanded="true"]{background:var(--gold-400);color:var(--teal-900);transform:rotate(45deg)}
.mnav__tog:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

.mnav__sub{padding:2px 0 12px}
.mnav__sub[hidden]{display:none}
.mnav__sub .mnav__item{border-bottom:0}

.mnav__foot{
  flex:none;padding:18px 0 24px;
  border-top:1px solid rgba(255,255,255,.16);
  background:var(--teal-900);
}
.mnav__phone{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--gold-400);font-weight:700;font-size:17px}

@media (min-width:1024px){ .mnav{display:none !important} }

/* Call button (header CTA linking to tel:) — icon only on small phones */
.nav__cta--call{display:inline-flex;gap:8px}
.nav__cta--call .ico{flex:none}
@media (max-width:479px){
  .nav__cta--call{width:44px;min-height:44px;padding:0;justify-content:center}
  .nav__cta--call .nav__cta-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}