/* =============================================
   NAVBAR & MOBILE MENU (REDESIGN)
   ============================================= */

/* SOLID white (owner, 2026-10-20: "sometimes in the far left there is a small off grey box that appears"). The bar was
   frosted glass - rgba(255,255,255,.92), .97 once scrolled, with a 20px backdrop blur - so whatever passed under it
   showed through: a navy block, a photo or the hero's dark slides under its left end turned that part of the bar grey,
   a grey box beside the wordmark, seen while scrolling or after a menu link scrolled the page. Measured in a browser:
   33 of ~215 scroll positions on a desktop. Opaque, nothing can show through; the blur went with it (nothing left to
   blur). The hairline, and the soft shadow once scrolled, stay. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav);
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  z-index: 1000;
  transition: box-shadow .4s;   /* not "all": padding must never animate */
}
.navbar.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, .06);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;               /* explicit breathing room between wordmark | links | actions */
  height: 100%;
}

/* --- Logo (top-left, vertically + horizontally centred within its slot) --- */
.logo {
  display: inline-flex;
  align-items: center;     /* vertical centring of the wordmark inside the 80px-tall bar */
  justify-content: flex-start;
  height: 100%;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
}
/* Text wordmark in Ersen (see @font-face in Variables.css), all-caps. Flexbox centres the line box;
   a small downward nudge then centres the CAPS. Tuned by eye: 0.08em sat too low, so this is a light
   0.03em. Increase to drop the wordmark, decrease (toward 0 / negative) to raise it. */
.logo-text {
  font-family: var(--logo);
  font-size: 46px;
  font-weight: 560;        /* Ersen ships one weight; the browser synthesises the heavier stroke.
                              Synthetic bold is graded by (weight - 400), so lowering the number
                              thins the stroke. 560 is well down from the original 700; drop toward
                              500/400 (400 = the true, un-thickened Ersen) if still too heavy. */
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
  position: relative;
  top: .03em;
}
/* Plain static logo - no hover dim/scale, and no outline on MOUSE click ("button" look).
   :focus-visible must still show something: the logo is the first tab stop on the page,
   so removing it too meant a keyboard user pressing Tab once saw nothing at all. */
.logo:focus { outline: none; }
.logo:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 2px; }
.logo-divider {
  width: 1px;
  height: 32px;
  background: var(--g200);
  margin: 0 16px;
}
.logo-subtext-box {
  font-family: var(--heading);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--g500);
  transition: color .2s;
}
.logo-subtext-box:hover {
  color: var(--g500);
}

/* --- Nav Links --- */
/* Links sit as a centred group with one uniform gap between items, instead of five
   equal-width slots that stretched with the viewport (huge gaps on wide screens,
   squashed labels on laptops). */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(18px, 2.2vw, 36px);
  height: 100%;            /* the row is as tall as the bar, so a panel at top:100% meets the bottom
                              edge of the bar exactly - no gap for the mouse to cross on its way down,
                              so no bridge element is needed. The header is a centred grid with
                              align-items:center, so without this the ul would only be as tall as its
                              content and the panel would float in mid-air. */
  list-style: none;
  margin: 0;
  min-width: 0;            /* keep: in the three-column header (Responsive.css) this lets the row be squeezed, which is
                              how fitNav (Js/Main.js) notices that the icons no longer fit */
}
/* "> li": the bar's five top-level items only. The dropdown panels hold <li> rows too, and
   they must NOT inherit this flex row. height:100% makes the item span the whole 80px bar, so
   the panel's top:100% lands exactly on the bar's bottom edge in both the normal and the
   .scrolled state - no gap to cross on the way down, so no bridge element is needed - and
   position:relative is what the absolutely-positioned panel is measured against. Widths are
   unchanged, so fitNav (Js/Main.js) is unaffected. */
.nav-links > li {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  height: 100%;
}
/* Nav hover icon: a Lottie animation (Assets/Animations/*.json) - fixed size so the bar's width never changes when it loads. */
.nav-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.nav-icon svg { display: block; }
/* Icons only show from 1700px (see Responsive.css); the five general menus plus their three carets
   need the tighter gap - switched at exactly the same width as the icons, so the row never gets the
   icons with the wide gap. MUST track the icon breakpoint: at 1700-1897px with the old min-width:1898px
   the icons would show with the 36px gap and the row would sit 8.5px right of page centre, which is the
   defect the owner reported on 2026-10-01. */
@media (min-width: 1700px) {
  .nav-links { gap: clamp(18px, 1.4vw, 36px); }
}
/* A link whose section is switched off in FR8 Creator (set by applyCmsData in index.html).
   Used in the bar, the mobile menu and the footer. */
.nav-target-off { display: none !important; }
/* Direct children + the trigger only: ".nav-links a" is a DESCENDANT selector and would style
   every dropdown row as a bar link. The panel rows get their own rules further down. */
.nav-links > li > a,
.nav-links .nav-trigger {
  font-family: var(--heading);
  font-size: .875rem;
  font-weight: 600;
  color: var(--g600);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;     /* a label must never wrap onto two lines inside the bar */
  position: relative;
}
.nav-links > li > a::after,
.nav-links .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .3s cubic-bezier(.16, 1, .3, 1);
}
.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-links .nav-trigger:hover,
.nav-links > li.is-current > .nav-trigger {
  color: var(--navy);
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after,
.nav-links .nav-trigger:hover::after,
.nav-links > li.is-current > .nav-trigger::after {
  width: 100%;
}


/* --- Dropdown trigger ---------------------------------------------------------------
   A <button>, never a link: a trigger that also navigates is the classic touch trap (the
   first tap opens the panel and the visitor never reaches the section). The section itself
   is the first row in its own panel. The shared rule above gives it the bar typography and
   the growing red underline; this only strips the button chrome.
   NO horizontal padding and no border, deliberately: the width model behind the 1700px icon
   breakpoint assumes a trigger is exactly label + caret wide, and every 1px of padding per
   side costs ~6.4px of that breakpoint. */
.nav-links .nav-trigger {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: inherit;
}
.nav-trigger-label { display: inline-block; }
/* Fixed-size caret - the same discipline as .nav-icon: it must never flip display:none <-> inline,
   or the bar width jumps. 8px box + 6px margin-left = the 14px per trigger the width model assumes. */
.nav-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  position: relative;
  top: -2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(225deg); top: 1px; }
/* Solo: the group has one surviving item, so the trigger became a direct link to it and the
   label now shows THAT item's words. No caret, because there is nothing to disclose. */
.nav-solo .nav-caret { display: none; }

/* --- Dropdown panel -----------------------------------------------------------------
   position:ABSOLUTE, never fixed (the bar had a backdrop-filter until 2026-10-20, which made it the
   containing block for fixed descendants - absolute works either way). No z-index is invented - the panel inherits the navbar's 1000,
   which keeps it above the page and below every pop-up (10001) and the maintenance takeover
   (10002). The background MUST be opaque, like the bar's (solid white since 2026-10-20).
   Nothing on the ancestor chain sets overflow, so the panel may hang below the 80px bar. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 14px 34px rgba(11, 22, 40, .10);
  padding: 8px;
  margin: 0;
}
.nav-panel[hidden] { display: none; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel li { display: block; }
/* Panel rows must stay text-only forever: applyCmsData does a.textContent = label, which wipes
   any child element - an icon or a badge put in here would vanish on the second CMS apply. */
.nav-panel a {
  display: block;
  font-family: var(--heading);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--g600);
  padding: 13px 16px;
  border-radius: 4px;
  border-left: 3px solid transparent;   /* never coloured now - kept so the words stay exactly where they were */
  /* The same red underline as the bar's own links (owner, 2026-10-13, asking for a red underline on hover in the
     footer: "please do the same for the header"): it fades in under the words on hover, for the current section's row
     and for keyboard focus - no grey box and no red bar at the side any more, and the words never turn red. */
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s;
}
.nav-panel a::after { display: none; }
.nav-panel a:hover,
.nav-panel a:focus-visible,
.nav-panel a.active {
  color: var(--navy);
  text-decoration-color: var(--red);
}
/* Reveal: keyframes fire on the display change, so no requestAnimationFrame dance. It runs on the
   inner <ul>, not the panel - the panel's own transform is its centring (and the edge clamp
   overwrites it inline), so animating the panel would fight both. */
@keyframes navPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-panel:not([hidden]) > ul { animation: navPanelIn .14s ease both; }
@media (prefers-reduced-motion: reduce) {
  .nav-panel:not([hidden]) > ul { animation: none; }
  .nav-caret { transition: none; }
}

/* --- Nav Actions --- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
/* .nav-phone shares the outline-box rule with .nav-login below (no icon, no hover effect). */

/* --- Mobile Toggle --- */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  background: none;
  border: none;
}
.mobile-toggle span {
  width: 22px;
  height: 2px;
  background: var(--navy);
  transition: all .3s;
  border-radius: 2px;
}
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Mobile Menu --- */
.mobile-menu {
  position: fixed;
  top: var(--nav);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 999;
  padding: 32px;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  display: flex;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;   /* off-canvas panel leaves the tab order / a11y tree when closed */
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s, visibility 0s linear .4s;
}
/* Rows never shrink: with nine links the sheet can be taller than the window, and flexbox then
   squashed the Get a Quote button (.btn has overflow:hidden, so it could shrink to nothing).
   The sheet scrolls instead. */
.mobile-menu > * { flex-shrink: 0; }
/* The group <div>s put a level between the sheet and its rows, so the rule above no longer
   reaches the rows inside an expanded panel. */
.mobile-group > *,
.mobile-group-panel > * { flex-shrink: 0; }
.mobile-menu.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s, visibility 0s;
}
.mobile-menu a {
  display: block;
  padding: 18px 24px;
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--g800);
  border-radius: 4px;
  transition: all .2s;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mobile-menu a:hover {
  background: var(--g100);
  color: var(--red);
}
.mobile-menu .btn {
  margin-top: 16px;
  justify-content: center;
}
/* The generic ".mobile-menu a" rule above was beating the button and phone-row styles:
   Get a Quote showed dark, left-aligned text and turned grey on hover. */
.mobile-menu a.btn,
.mobile-menu a.mobile-menu-phone { display: flex; }
.mobile-menu a.btn-primary,
.mobile-menu a.btn-primary:hover { color: var(--white); }
.mobile-menu a.btn-primary:hover { background: var(--red); }
/* The phone row's margin-top:auto collapses to 0 once the sheet scrolls - keep it off the Login button. */
.mobile-menu .mobile-login { margin-bottom: 12px; }
.mobile-menu-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  margin-top: auto;
  border-top: 1px solid var(--g100);
  font-family: var(--heading);
  font-weight: 600;
  color: var(--navy);
}
.mobile-menu-phone svg {
  width: 18px;
  height: 18px;
  color: var(--red);
}

/* --- Mobile sheet accordion groups (the sheet mirrors the header dropdowns) ------------
   The toggle must NOT carry .mobile-menu-link: Main.js closes the whole sheet on a click of
   that class, so a trigger carrying it would slam the sheet shut on expand. That also means it
   is not styled by ".mobile-menu a" and needs its own copy of the row look. */
.mobile-group { display: flex; flex-direction: column; }
/* Collapsed panels use the hidden ATTRIBUTE (a real display:none), never max-height:0 +
   overflow:hidden, which would leave the rows focusable inside the sheet's focus trap. */
.mobile-group-panel { display: flex; flex-direction: column; }
.mobile-group-panel[hidden] { display: none; }
.mobile-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--g800);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all .2s;
}
.mobile-group-toggle:hover { background: var(--g100); color: var(--red); }
.mobile-group-toggle[aria-expanded="true"] { color: var(--red); }
/* The chevron affordance: down when collapsed, up when open. It lives HERE and not in the
   768px block of Responsive.css because the sheet is used from 1299.98px down - below 768px
   only the row metrics change. It cannot reuse .mobile-menu-link's right-pointing ::after:
   the trigger deliberately does not carry that class (see above), and this one rotates. */
.mobile-group-toggle::after {
  content: '';
  width: 9px; height: 9px;
  margin-bottom: 4px;
  border-right: 2px solid var(--g300);
  border-bottom: 2px solid var(--g300);
  transform: rotate(45deg);
  transition: border-color .2s ease, transform .2s ease;
}
.mobile-group-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-bottom: -4px;
  border-color: var(--red);
}
/* Solo: syncNav() has stripped aria-expanded and the row is now a direct link to the one
   surviving item (same reasoning as .nav-solo .nav-caret above), so a chevron promising a
   disclosure would lie - tapping it navigates instead of expanding. */
.nav-solo .mobile-group-toggle::after { display: none; }
/* Indented and a shade lighter, so the hierarchy reads at a glance. */
.mobile-menu .mobile-sub-link { padding-left: 50px; font-weight: 400; }

/* --- Phone number + Login: matching outline boxes. No icons, no hover effect. --- */
.nav-phone,
.nav-login {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  font-family: var(--heading);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 2px solid var(--g200);
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-login { cursor: pointer; }
.nav-phone:focus-visible,
.nav-login:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }