/* ===============================================================
   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 (non-mega submenu)
     7. MEGA MENU
     8. Phone, CTA, burger
     9. 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(10,53,59,.28);
  border-bottom-color:var(--head-border);
}
/* Header is solid while mega is open, otherwise it blends with the panel below */
.site-head.mega-open{background:var(--head-bg);box-shadow:none}

/* 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}
/* The mega panel spans the full width, so this item is static */
.nav__item.has-mega{position:static}

.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  (non-mega submenu)
   =============================================================== */
.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. MEGA MENU
   ---------------------------------------------------------------
   A full-width panel under the header. Content comes automatically
   from the Service and Industry post types, inc/nav-mega.php.
   =============================================================== */
.navscrim{
  position:fixed;left:0;right:0;top:0;bottom:0;
  background:rgba(10,53,59,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
  z-index:-1;
}
body.mega-open .navscrim{opacity:1}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--mega-bg);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 48px rgba(10,53,59,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:4;
  max-height:calc(100vh - var(--headH) - 20px);
  overflow-y:auto;
}
/* Without JS the panel stays closed. nav.js removes hidden on init. */
.mega[hidden],.navscrim[hidden]{display:none}
.nav__item.has-mega.is-open > .mega{opacity:1;visibility:visible;transform:none}

.mega__in{
  display:grid;grid-template-columns:1fr;gap:28px;
  padding-top:32px;padding-bottom:32px;
}
@media (min-width:1200px){
  .mega__in{grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:40px;padding-bottom:40px}
}

/* --- Left-hand list --- */
.mega__main{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){  .mega__main{grid-template-columns:1fr 1fr;gap:24px 32px} }
@media (min-width:1400px){ .mega__main{grid-template-columns:1fr 1fr 1fr} }

.mega__gname{
  font-family:var(--font-body);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-accent);
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--border-subtle);
}
.mega__list{display:grid;gap:2px}

.mega__item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;
  padding:10px;border-radius:var(--radius-md);
  transition:background-color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .mega__item:hover{background:var(--white)} }
.mega__item:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-2px}

.mega__ico{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-tint);color:var(--teal-700);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .mega__item:hover .mega__ico{background:var(--orange-tint);color:var(--orange-700)} }

.mega__txt{min-width:0}
.mega__t{display:block;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--teal-700);line-height:1.3}
.mega__d{display:block;font-size:13px;line-height:1.45;color:var(--text-muted);margin-top:3px}
.mega__arrow{color:var(--orange-700);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);margin-top:9px}
@media (hover:hover){ .mega__item:hover .mega__arrow{opacity:1;transform:none} }

/* --- Right-hand promo column --- */
.mega__side{
  background:var(--mega-side-bg);color:var(--neutral-100);
  border-radius:var(--radius-lg);padding:24px;
  align-self:start;
}
.mega__sidee{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-bottom:10px}
.mega__sideh{font-family:var(--font-heading);font-weight:800;font-size:19px;line-height:1.2;color:var(--white);letter-spacing:-.02em}
.mega__sidet{font-size:14px;line-height:1.55;color:var(--neutral-100);margin:10px 0 18px}
.mega__side .btn{min-height:46px}
.mega__all{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-weight:700;font-size:14px;color:var(--gold-400);
}
@media (hover:hover){ .mega__all:hover{color:var(--white)} }
.mega__all:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}


/* ===============================================================
   8. 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 */
}

/* ===============================================================
   9. 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__link--sub{
  padding:11px 0;font-size:14px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--neutral-100);
}
.mnav__ico{
  width:32px;height:32px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--gold-400);
}
.mnav__link--all{padding:11px 0;font-size:13px;color:var(--gold-400);text-transform:none;letter-spacing:0;font-weight:700}

.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}
}