/* ===========================================================================
   VGS Group — site header and footer
   =========================================================================== */

/* --- Header --------------------------------------------------------------- */
/* The blurred panel is the default. On interior pages the hero sits beneath the
   bar, so there is something behind it worth seeing through. */
/* ---------------------------------------------------------------------------
   Top bar
   Sits above the sticky header and scrolls away with the page, which is what
   keeps --header-h honest -- every hero offset and sticky column on the site is
   measured from it, so the header's own height must not change.
   --------------------------------------------------------------------------- */
.top-bar {
  background: var(--surface-deep);
  color: var(--text-inverse-muted);
  font-size: var(--step--1);
}

/* Pinned height, not content height. The hero subtracts --top-bar-h to end at
   the fold, so the bar has to be exactly that tall before any script runs --
   its type is fluid and the button grew it by a few pixels between breakpoints,
   which is what made the correction visible. Padding is small enough that the
   contents never reach the floor. */
.top-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  min-height: var(--top-bar-h);
  padding-block: var(--space-3xs);
}

.top-bar__reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
  margin: 0;
  max-width: none;
}

/* inline-flex with centred items puts the icon's centre on the text's centre,
   which is what reads as aligned -- baseline alignment sits a square glyph
   visibly low against lining figures like a phone number. */
.top-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--text-inverse-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

/* Centring is geometric, and the two boxes are not the same shape: the icon
   fills its box, while a line box reserves descender space below the digits
   that a phone number never uses. Centre those and the icon reads high, which
   is what it did. line-height: 1 collapses the line box onto the em box and
   the ink centres then agree -- measured at 0.02px apart, against 0.67px when
   an optical nudge was added on top, which over-corrected the other way. */
.top-bar__link span,
.site-footer__reach-link span { line-height: 1; }

/* Sized in em, not pixels. The bar sets its text at 12.6px and the footer at
   18.1px; a fixed 16px icon is proportionally right in neither, and the
   mismatch shows up as the icon reading high against the larger text. */
.contact-icon {
  flex: none;
  width: 1em;
  height: 1em;
}

/* The underline belongs to the words, not the icon. */
.top-bar__link:hover span,
.top-bar__link:focus-visible span { text-decoration: underline; }

.top-bar__link:hover,
.top-bar__link:focus-visible { color: var(--text-inverse); }

/* The hero's button, a step smaller so it sits inside a slim bar, and filled
   snow rather than charcoal -- .btn's default ground is charcoal, which all but
   disappears against the bar's black. .btn already carries a 2px transparent
   border, so the solid fill reads as no border while the box keeps the same
   height as every other button on the site. */
.top-bar__cta {
  font-size: var(--step--2);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--vgs-snow);
  color: var(--vgs-black);
}

/* .btn:hover goes black, which would vanish here, and lifts 2px, which would
   push it out of a 44px bar. */
.top-bar__cta:hover {
  background: var(--vgs-silver);
  color: var(--vgs-black);
  transform: none;
}

.top-bar :focus-visible { outline-color: var(--focus-ring-inverse); }

/* On a phone the email is the first thing to go: it is the longest of the three
   and the one already repeated in the footer and on the contact page. */
@media (max-width: 29.9375rem) {
  .top-bar__link--email { display: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* The header carries u-inverse for its text colours, and that class also
     sets a solid charcoal background. The ground is painted by ::before
     below, so this has to be cleared or the solid colour covers the blur. */
  background-color: transparent;
  border-bottom: var(--header-border) solid rgba(238, 242, 247, 0.14);
}

/*
 * The blur lives on a pseudo-element rather than on .site-header itself.
 *
 * backdrop-filter makes an element the containing block for its
 * position: fixed descendants, and the mobile menu panel is exactly that. With
 * the filter on the header, the panel was sized by the header instead of the
 * viewport -- 88px tall on every interior page, so only the logo strip showed
 * and the rest sat clipped behind the hero. The homepage escaped it because
 * its overlay variant drops the filter until the page is scrolled.
 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(9, 10, 12, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Without backdrop-filter a translucent bar leaves the navigation sitting on
   whatever is behind it, so those browsers get a solid one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background-color: var(--vgs-black); }
}

/* Homepage: the bar sits over the hero and has no ground of its own until the
   page is scrolled, at which point it fades in as a blurred charcoal panel.

   It stays sticky like every other page rather than going fixed. Fixed took it
   out of flow, which was fine when it was the first thing on the page and wrong
   the moment the top bar went above it: pinned to top: 0 it covered the bar
   entirely. Sticky starts below the bar, follows it up, and pins once the bar
   has gone -- which is the behaviour without writing any of it. The hero is
   pulled up under it by --header-h instead. */
.site-header--overlay {
  transition: border-color var(--dur) var(--ease);
}

.site-header--overlay::before {
  transition:
    background-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
}

.site-header--overlay.is-scrolled {
  border-bottom-color: rgba(238, 242, 247, 0.14);
}

.site-header--overlay.is-scrolled::before {
  /* VGS Black at 75%. A dark value absorbs the bleed-through from bright
     sections behind it, so the bar can stay genuinely translucent and let
     the blur show without the links losing contrast. */
  background-color: rgba(9, 10, 12, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Without backdrop-filter the translucent bar would leave text on moving
   footage, so those browsers get a solid bar instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header--overlay.is-scrolled::before { background-color: var(--vgs-black); }
}

/* Over the video the bar has no ground of its own until the page is scrolled. */
.site-header--overlay:not(.is-scrolled) {
  border-bottom-color: transparent;
}

.site-header--overlay:not(.is-scrolled)::before {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Over the video the wordmark needs a little separation from bright frames. */
.site-header--overlay:not(.is-scrolled) .site-brand__mark,
.site-header--overlay:not(.is-scrolled) .site-nav__list a {
  text-shadow: 0 1px 12px rgba(9, 10, 12, 0.55);
}

.site-header--overlay:not(.is-scrolled) .site-brand__mark {
  filter: drop-shadow(0 1px 10px rgba(9, 10, 12, 0.5));
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-inverse);
}

.site-header .custom-logo { max-height: 3.25rem; width: auto; }

.site-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;  /* Right-justified, should a word ever sit beneath. */
  text-decoration: none;
  color: var(--text-inverse);
}

.site-brand__mark { display: block; }

.site-brand__mark svg {
  display: block;
  height: 3.25rem;
  width: auto;
  color: currentColor;
}

@media (min-width: 48rem) {
  .site-brand__mark svg { height: 4.25rem; }
}

.site-brand__word {
  display: block;
  margin-top: 0.1rem;
  margin-right: 0.1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-inverse);
}

@media (min-width: 48rem) {
  .site-brand__word { font-size: 0.85rem; }
}

.site-footer .site-brand__mark svg { height: 4.5rem; }
.site-footer .site-brand__word { font-size: 0.95rem; }

.site-nav__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-s), 2vw, var(--space-l));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Sliding current-page rule ---------------------------------------------
   One line for the whole menu rather than a border on each link, so it can
   travel between them. It is 1px wide and stretched by scaleX, which keeps the
   whole animation on transform -- width and left would relayout every frame.
   nav.js inserts it, so without JavaScript the per-link borders below stay as
   they were.
   -------------------------------------------------------------------------- */
.site-nav__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--vgs-silver);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.site-nav__list.has-indicator .site-nav__indicator { opacity: 1; }

/* Nothing on this route owns the line -- a 404, or search. It fades out rather
   than sliding to an arbitrary item. */
.site-nav__list.has-indicator.is-homeless .site-nav__indicator { opacity: 0; }

/* The borders are the no-JS state. Once the line exists they would double it. */
.site-nav__list.has-indicator a:hover,
.site-nav__list.has-indicator .current-menu-item > a { border-bottom-color: transparent; }

/* The line is desktop only: below the breakpoint the menu is a stacked panel,
   where a horizontal rule sliding between rows makes no sense. */
@media (max-width: 63.9375rem) {
  .site-nav__indicator { display: none; }
}

/* Placing the line is measurement, and measuring mid-transition fights itself.
   No transition while the window is being dragged, and none for the first
   placement -- animating from a default transform slid it in from the left edge
   on every page load, which is motion nobody asked for. */
.is-resizing .site-nav__indicator,
.site-nav__list.is-settling .site-nav__indicator { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .site-nav__indicator { transition: none; }
}

.site-nav__list a {
  display: inline-block;
  padding-block: var(--space-2xs);
  font-family: var(--font-display);
  /* Eurostile Bold, matching the nav on the client's existing site. */
  font-weight: 700;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  color: var(--text-inverse);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
  border-bottom-color: var(--vgs-silver);
}

/* --- Navigation toggle ---------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* 44px target: the icon is small, the hit area should not be. */
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-inverse);
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 22px;
}

.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* --- Off-canvas panel -----------------------------------------------------
   Below the breakpoint the same <nav> becomes a panel that slides in from the
   right. Using one element rather than a second menu keeps a single set of
   links in the document. */
@media (max-width: 63.9375rem) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 120;
    width: min(23rem, 88vw);
    padding: var(--space-m) var(--space-l) var(--space-l);
    background: var(--surface-deep);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* visibility, not display, so the panel leaves the accessibility tree when
       closed but can still animate. On close it is held visible until the
       slide finishes; on open it flips immediately, because an element that is
       still visibility:hidden cannot receive focus. */
    visibility: hidden;
    transition:
      transform var(--dur) var(--ease),
      visibility 0s linear var(--dur);
    box-shadow: var(--shadow-lg);
  }

  /*
   * Stowed: taken out of layout entirely. Parked off-screen with a transform
   * it stays part of the scrollable area, and because it is position: fixed no
   * ancestor's overflow can clip it — the whole page then scrolls sideways
   * into empty space on a phone.
   */
  .site-nav.is-stowed { display: none; }

  .nav-is-open .site-nav {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform var(--dur) var(--ease),
      visibility 0s linear 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list li + li { border-top: 1px solid rgba(238, 242, 247, 0.12); }

  .site-nav__list a {
    display: block;
    padding-block: var(--space-s);
    font-size: var(--step-1);
    border-bottom: 0;
  }

  .site-nav__list a:hover,
  .site-nav__list .current-menu-item > a { color: var(--vgs-silver); }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(9, 10, 12, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* Hold the page still behind the panel. */
  .nav-is-open body { overflow: hidden; }
}

/* --- Brand, close and contact inside the panel ---------------------------- */
.site-nav__head { display: none; }
.site-nav__brand { display: none; }

.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;   /* Optical alignment with the panel edge. */
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-inverse);
  cursor: pointer;
}

.nav-close:hover { color: var(--vgs-silver); }
.site-nav__contact { display: none; }

@media (max-width: 63.9375rem) {
  .site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-bottom: var(--space-l);
    padding-bottom: var(--space-m);
    border-bottom: 1px solid rgba(238, 242, 247, 0.12);
  }

  .site-nav__brand { display: block; }

  .site-nav__brand .site-brand__mark svg { height: 3rem; }
}

@media (max-width: 63.9375rem) {
  /* 2rem above the rule and 2rem below it left 65px of dead space under the
     last link. One step down on each side keeps the separation without the
     block floating away from the menu it belongs to. */
  .site-nav__contact {
    display: block;
    margin-top: var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid rgba(238, 242, 247, 0.12);
  }

  .site-nav__phone,
  .site-nav__email {
    display: block;
    margin-bottom: var(--space-s);
    font-family: var(--font-display);
    font-size: var(--step-1);
    text-decoration: none;
    color: var(--text-inverse);
  }

  .site-nav__contact-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--vgs-silver);
    margin-bottom: 2px;
  }

  .site-nav__emergency {
    margin: 0;
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--text-inverse);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

/* Crossing the breakpoint changes the panel's position, transform and
   visibility all at once. Without this the panel animates from its desktop
   state as the window is dragged — it slides part-way in, and the mobile
   separators flash across the desktop links. */
.is-resizing .site-nav,
.is-resizing .site-nav * {
  transition: none !important;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--surface-deep);
  color: var(--text-inverse);
  padding-top: var(--space-2xl);
}

/* Footer links carry no underline at rest — in a list of short labels the
   grouping already reads as navigation — but they must still show they are
   interactive, so the underline returns on hover and focus. */
.site-footer a {
  color: var(--text-inverse);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--vgs-silver);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer :focus-visible { outline-color: var(--focus-ring-inverse); }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  /* Even gaps between the columns, with the brand at the left edge and the
     last list at the right edge of the container. */
  justify-content: space-between;
  gap: var(--space-xl) var(--space-l);
  padding-bottom: var(--space-2xl);
}

.site-footer__brand { flex: 1 1 100%; }

/* The flex row gap is the only thing that should separate the footer blocks.
   A trailing paragraph margin inside a block adds to it, which made the space
   after the brand and contact columns 64px against the divisions list's 48px —
   visible as uneven rhythm once the columns stack on a phone. */
.site-footer__inner > * > :last-child { margin-bottom: 0; }

/* Phone: one column, centred. Two-up left the division names wrapping to two
   lines beside a contact block that did not, so neither column read cleanly. */
@media (max-width: 47.9375rem) {
  .site-footer__inner {
    justify-content: flex-start;
    text-align: center;
  }

  .site-footer__divisions,
  .site-footer__contact,
  .site-footer__nav { flex: 1 1 100%; }

  .site-footer__brand { display: grid; justify-items: center; }

  .site-footer address,
  .site-footer__hours { text-align: center; }

  .social { justify-content: center; }
}

/* Tablet and small laptop: the brand takes its own row and the three lists
   share the next one. Left to space-between at this width the columns wrap
   two-and-two and leave a large hole between the pair on the second row.
   This runs to 75rem rather than 64rem because the four columns need about
   1060px of content plus gaps: at 1024 the Explore list did not fit and
   dropped onto a row of its own, alone at the left edge. flex-wrap moves an
   item to the next line rather than shrinking it, so the breakpoint has to
   carry this, not flex-shrink. */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
  .site-footer__inner { justify-content: flex-start; }

  .site-footer__divisions,
  .site-footer__contact,
  .site-footer__nav { flex: 1 1 calc(33.333% - var(--space-l)); }
}

@media (min-width: 75rem) {
  .site-footer__brand { flex: 0 1 20rem; }

  .site-footer__divisions,
  .site-footer__contact,
  .site-footer__nav { flex: 0 1 auto; }
}




/* line-height: 1 on the links (below, so the icons centre on the words) also
   strips the half-leading that sits above the first line in the Divisions and
   Explore columns, which left this heading looking tighter to its list than the
   other two. Half of the 1.6 line-height the others inherit, put back as space
   rather than leading, so the three headings line up.

   Padding, not margin: a top margin here collapses with the eyebrow's 8px
   bottom margin and the larger of the two wins, so it changed nothing. */
.site-footer__reach {
  display: grid;
  justify-items: start;
  gap: var(--space-3xs);
  padding-top: 0.3em;
}

.site-footer__reach-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* .site-footer a underlines the whole link on hover, which would drag the icon
   into the rule. Move it onto the words. */
.site-footer__reach-link:hover,
.site-footer__reach-link:focus-visible { text-decoration: none; }

.site-footer__reach-link:hover span,
.site-footer__reach-link:focus-visible span { text-decoration: underline; text-underline-offset: 0.2em; }

/* Centred column on a phone, so the icon and label sit together under the
   heading rather than hugging the left edge of a centred block. */
@media (max-width: 47.9375rem) {
  .site-footer__reach { justify-items: center; }
}

.site-footer__tagline { color: var(--text-inverse-muted); max-width: 32ch; }

.site-footer address { font-style: normal; color: var(--text-inverse-muted); }

/* Sits under the address, in the same muted tone as the rest of the column. */
.site-footer__hours { margin-top: var(--space-xs); color: var(--text-inverse-muted); }

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
}

.site-footer__divisions .u-eyebrow,
.site-footer__contact .u-eyebrow,
.site-footer__nav .u-eyebrow { color: var(--vgs-silver); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  border-top: 1px solid rgba(238, 242, 247, 0.12);
  padding-block: var(--space-m);
}

.site-footer__legal p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-inverse-muted);
}

/* The copyright and the two policy links read as one line of small print. */
.site-footer__rights {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-m);
}

.site-footer__policies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.site-footer__credit a,
.site-footer__policies a { color: var(--text-inverse-muted); }
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible,
.site-footer__policies a:hover,
.site-footer__policies a:focus-visible { color: var(--text-inverse); }

/* On a phone the column is centred, and space-between would leave the credit
   stranded at the left edge. This sits after the base .site-footer__legal
   rule deliberately: placed before it, as it once was, it lost to it. */
@media (max-width: 47.9375rem) {
  .site-footer__legal,
  .site-footer__rights,
  .site-footer__policies { justify-content: center; text-align: center; }
}

/* --- Generic entry -------------------------------------------------------- */
.entry__content > * + * { margin-top: var(--space-s); }
.page-header { margin-bottom: var(--space-xl); }

/* ---------------------------------------------------------------------------
   Admin bar
   WordPress fixes its toolbar to the top of the viewport for logged-in users,
   which would otherwise sit over the site header and the mobile panel. Its
   height is 32px on desktop and 46px below 783px, so it is published as a
   token — zero when no toolbar is present — and every offset below reads that
   rather than repeating the numbers.

   Below 601px core switches the toolbar to position: absolute so it scrolls
   away and gives a phone its height back. That does not work with a fixed site
   header: the header stays at top: 0 and covers the toolbar whenever the page
   is near the top of the document. Holding it fixed at every width costs an
   editor 46px of viewport and keeps one rule for the offset.
   --------------------------------------------------------------------------- */

:root { --admin-bar-h: 0px; }
.admin-bar { --admin-bar-h: 46px; }

@media screen and (max-width: 600px) {
  #wpadminbar { position: fixed; }
}

@media screen and (min-width: 783px) {
  .admin-bar { --admin-bar-h: 32px; }
}

.admin-bar .site-header,
.admin-bar .site-header--overlay,
.admin-bar .site-nav { top: var(--admin-bar-h); }

/* The hero fills the viewport, so the toolbar should come out of its height
   rather than pushing the page down. */
.admin-bar .hero { min-height: calc(100svh - var(--admin-bar-h) - var(--top-bar-h)); }