/* =================================================================
   ANSONS HEADER 01  (v2, floating lozenge + mega menu)
   Namespaced .ansons-hdr so nothing collides with the theme CSS.

   Contrast, measured (AA needs 4.5:1 under 24px, 3:1 at 24px+):
     white on #2E7F92 (default bar) ....  4.60:1  pass
     white on #399FB6 (exact brand) ....  3.08:1  FAIL, opt-in only
     #252334 on white (panels) ......... 15.34:1  pass AAA
     #5A5870 on white (descriptions) ...  7.06:1  pass AAA
     white on gradient CTA darkest end .. 15.34:1  pass
     #2A7383 headings on white .........  5.41:1  pass
     white on bar + 18% black (open) ...  6.30:1  pass
     (a white hover overlay would have been 3.21:1, so states darken)
   ================================================================= */

.ansons-hdr {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 900;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* How far the panel and the drawer float below the bar. Declared once here
     because three rules depend on it agreeing: the panel offset, the drawer
     offset, and the height of the bridge that makes the gap hoverable. */
  --hdr-panel-gap: 10px;
}

.ansons-hdr--sticky { position: fixed; }

.ansons-hdr *,
.ansons-hdr *::before,
.ansons-hdr *::after { box-sizing: border-box; }

.ansons-hdr__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ansons-hdr a:focus-visible,
.ansons-hdr button:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: 4px;
}
.ansons-hdr__panel a:focus-visible,
.ansons-hdr__panel button:focus-visible { outline-color: var(--hdr-accent); }

/* ---------- Lozenge ----------
   Width formula matches the live header exactly, measured on ansons.law:
   min(100% - 30px, 1410px), centred. Live gets there by sitting inside
   .container.container-large (max-width 1440, padding 0 15px); here it is
   the max-width plus auto side margins. Both give 1395 at a 1440 viewport
   (1425 document width once the scrollbar is out) and 1410 above that. */

.ansons-hdr__lozenge {
  position: relative;
  margin: var(--hdr-top) var(--hdr-gutter) 0;
  max-width: var(--hdr-maxw);
  margin-inline: auto;
  width: calc(100% - (var(--hdr-gutter) * 2));
}

.ansons-hdr__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 75px;
  padding: 0 15px 0 20px;
  border-radius: var(--hdr-radius);
  background: color-mix(in srgb, var(--hdr-bar) calc(var(--hdr-bar-alpha) * 100%), transparent);
  color: var(--hdr-text);
  box-shadow: 0 6px 24px rgba(15, 27, 32, 0.14);
}

/* color-mix is widely supported but not universal. Solid fallback first
   so older engines get a readable bar rather than a transparent one. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ansons-hdr__bar { background: var(--hdr-bar); }
}

@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .ansons-hdr__bar {
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    backdrop-filter: saturate(140%) blur(8px);
  }
}

.ansons-hdr__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ansons-hdr__logo-img { display: block; height: auto; max-width: 100%; }
.ansons-hdr__logo-img--mobile { display: none; }

/* ---------- Nav ---------- */

.ansons-hdr__nav { flex: 1 1 auto; display: flex; justify-content: center; }

.ansons-hdr__nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ansons-hdr__nav-item { position: static; }

.ansons-hdr__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: var(--hdr-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
}

/* Hover and open states DARKEN the bar rather than lightening it.
   A white overlay looks fine but drops white-on-bar contrast from
   4.60:1 to 3.21:1, i.e. it fails AA exactly where the user is
   pointing. Darkening takes it up to 5.48:1 instead. */
.ansons-hdr__nav-link:hover { background: rgba(0, 0, 0, 0.10); }

.ansons-hdr__nav-link[aria-expanded="true"] { background: rgba(0, 0, 0, 0.18); }

.ansons-hdr__chev { transition: transform 0.16s ease; flex: 0 0 auto; }
[aria-expanded="true"] > .ansons-hdr__chev { transform: rotate(180deg); }

/* ---------- Mega panel ---------- */

.ansons-hdr__panel {
  position: absolute;
  top: calc(100% + var(--hdr-panel-gap));
  left: 0;
  right: 0;
  background: var(--hdr-panel-bg);
  color: var(--hdr-panel-text);
  border-radius: var(--hdr-radius);
  box-shadow: 0 18px 48px rgba(15, 27, 32, 0.22);
  animation: ansonsPanelIn 0.16s ease;
  /* NOT overflow: hidden. The clip that keeps the dark featured panel inside
     the rounded corners lives on .ansons-hdr__panel-inner instead, because
     the hover bridge below has to escape this box upwards. The inner grid
     fills the panel exactly, so the clipping is identical. */
}

/* The panel floats clear of the bar, so the gap between them belongs to the
   page, not to the header. Measured: a 10px band where the pointer is over
   the hero, outside the header element, which fired the header's mouseleave
   and shut the panel on the way to it. Moving fast enough could skip the
   band entirely, which is why it only happened sometimes.
   This bridges the band so the pointer stays inside the header's subtree the
   whole way down. Invisible, and only present while a panel is open. */
.ansons-hdr__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hdr-panel-gap) * -1);
  height: var(--hdr-panel-gap);
}

.ansons-hdr__panel[hidden] { display: none; }

@keyframes ansonsPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.ansons-hdr__panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--hdr-radius);
  overflow: hidden;
}

.ansons-hdr__panel-inner.has-featured {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.ansons-hdr__panel-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 8px 28px;
  padding: 28px 32px;
  /* Cap column width so a two column panel on a 1440 screen does not
     stretch each column to ~490px and leave the panel looking empty. */
  max-width: calc(var(--cols, 2) * 360px);
}

.ansons-hdr__panel--simple .ansons-hdr__panel-cols { padding: 14px; max-width: none; }

/* Deterministic heading box. The spacer below depends on this being an
   exact known height, so line-height and height are pinned rather than
   left to font metrics (which measured 14.5px, not the 21px you would
   assume from the font size). */
.ansons-hdr__panel-heading {
  height: 15px;
  line-height: 15px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* NOT --hdr-accent: #399FB6 on white is 3.08:1 at 11px and fails AA.
     --hdr-heading defaults to #2A7383 at 5.41:1. */
  color: var(--hdr-heading);
}

/* A column with no heading still needs the same top offset so its first
   link lines up with the headed column beside it. 15 + 10 = 25. */
.ansons-hdr__panel-col:not(:has(.ansons-hdr__panel-heading)) .ansons-hdr__panel-list { margin-top: 25px; }
@supports not selector(:has(*)) {
  .ansons-hdr__panel-col .ansons-hdr__panel-list { margin-top: 0; }
}

.ansons-hdr__panel-list { list-style: none; margin: 0; padding: 0; }

.ansons-hdr__panel-link {
  display: block;
  padding: 11px 12px;
  margin-left: -12px;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
}

.ansons-hdr__panel-link:hover { background: rgba(57, 159, 182, 0.1); }

.ansons-hdr__panel-link-label {
  display: block;
  position: relative;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hdr-panel-text);
}

.ansons-hdr__panel-link:hover .ansons-hdr__panel-link-label { color: var(--hdr-bar); }

/* Hover arrow. Overlaid rather than laid out, so it costs no horizontal
   space. That matters: measured at a 1030 viewport, "Transport and
   logistics" in Sectors has only 18.2px of clear run to the right edge, so
   anything that reserved space would wrap it.
   Anchored to the label, not the link, so it centres on the label's line
   box. Anchoring to the link would make it drift down on rows whose
   description wraps to two lines, and the arrow would sit at a different
   height on every row. No pinned constant needed either way. */
.ansons-hdr__panel-link-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-5px, -50%);
  opacity: 0;
  color: inherit;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ansons-hdr__panel-link:hover .ansons-hdr__panel-link-arrow,
.ansons-hdr__panel-link:focus-visible .ansons-hdr__panel-link-arrow {
  opacity: 1;
  transform: translate(0, -50%);
}

.ansons-hdr__panel-link-desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hdr-panel-muted);
}

/* ---------- Featured panel ---------- */

.ansons-hdr__featured {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px;
  background: var(--hdr-ink);
  color: #FFFFFF;
}

.ansons-hdr__featured-heading {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  /* Explicit, NOT inherited from the aside. This was the one text element in
     the module without its own colour, and the theme puts a colour on
     headings. An inherited value loses to any matching declaration however
     weak its specificity, so on the live site this rendered #252334 on the
     #252334 featured panel: 1:1, invisible, on all five panels.
     Every text element in this module states its own colour. Keep it that
     way; the module cannot see what the theme does to bare h1-h6. */
  color: #FFFFFF;
}

.ansons-hdr__featured-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.ansons-hdr__featured-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 2px;
  color: var(--hdr-accent);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.ansons-hdr__featured-tel:hover { text-decoration: underline; }

.ansons-hdr__featured-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  margin-top: auto;
  background: var(--hdr-accent);
  color: #0F1B20;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
}
.ansons-hdr__featured-cta:hover { filter: brightness(1.08); }

/* ---------- Actions ---------- */

.ansons-hdr__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ansons-hdr__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px;
  color: var(--hdr-text);
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
}

.ansons-hdr__tel:hover { background: rgba(0, 0, 0, 0.12); border-color: rgba(255, 255, 255, 0.6); }

.ansons-hdr__tel-icon { flex: 0 0 auto; }
.ansons-hdr__tel-text { display: flex; flex-direction: column; line-height: 1.1; }

.ansons-hdr__tel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ansons-hdr__tel-number {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Matches the live CTA: linear-gradient(270deg, #399FB6, #252334), 8px radius, 50px tall. */
.ansons-hdr__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 25px;
  background-image: linear-gradient(270deg, var(--hdr-accent), var(--hdr-ink));
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}

.ansons-hdr__cta:hover { filter: brightness(1.12); }
.ansons-hdr__cta svg { transition: transform 0.16s ease; }
.ansons-hdr__cta:hover svg { transform: translateX(3px); }

.ansons-hdr__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  background: #F5F7F9;
  color: var(--hdr-ink);
  border-radius: 8px;
  text-decoration: none;
  flex: 0 0 auto;
}
.ansons-hdr__search:hover { background: #FFFFFF; }

/* ---------- Burger ---------- */

.ansons-hdr__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  color: var(--hdr-text);
  cursor: pointer;
}

.ansons-hdr__burger-box { display: flex; flex-direction: column; gap: 4px; width: 20px; }

.ansons-hdr__burger-bar {
  display: block; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

[aria-expanded="true"] .ansons-hdr__burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .ansons-hdr__burger-bar:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .ansons-hdr__burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Drawer ---------- */

/* Sits inside the lozenge, like the panels, so 0/0 gives it exactly the bar's
   width including the max-width cap. Pinning to the gutters instead would let
   it run wider than the bar above 1440. */
.ansons-hdr__drawer {
  position: absolute;
  top: calc(100% + var(--hdr-panel-gap));
  left: 0;
  right: 0;
  display: none;
  background: var(--hdr-ink);
  color: #FFFFFF;
  border-radius: var(--hdr-radius);
  box-shadow: 0 18px 48px rgba(15, 27, 32, 0.28);
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ansons-hdr__drawer[hidden] { display: none; }
.ansons-hdr__drawer-inner { padding: 18px 20px 24px; }

.ansons-hdr__drawer-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-bottom: 16px;
  background: var(--hdr-accent);
  color: #0F1B20;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
}

.ansons-hdr__drawer-list,
.ansons-hdr__drawer-sub { list-style: none; margin: 0; padding: 0; }

.ansons-hdr__drawer-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.ansons-hdr__drawer-link,
.ansons-hdr__drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 12px 0;
  background: none;
  border: 0;
  color: #FFFFFF;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ansons-hdr__drawer-sub { padding: 0 0 10px 14px; }
.ansons-hdr__drawer-sub[hidden] { display: none; }

.ansons-hdr__drawer-sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  text-decoration: none;
}
.ansons-hdr__drawer-sublink:hover { color: var(--hdr-accent); }

.ansons-hdr__drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 20px;
  background-image: linear-gradient(270deg, var(--hdr-accent), var(--hdr-bar));
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1320px) {
  .ansons-hdr__nav-link { padding: 10px 10px; }
  .ansons-hdr__tel-label { display: none; }
}

@media (max-width: 1150px) {
  .ansons-hdr__panel-inner.has-featured { grid-template-columns: minmax(0, 1fr) 270px; }
  .ansons-hdr__cta span { display: none; }
  .ansons-hdr__cta { padding: 0 16px; }
}

@media (max-width: 1024px) {
  .ansons-hdr__nav { display: none; }
  .ansons-hdr__burger { display: inline-flex; }
  .ansons-hdr__drawer { display: block; }
  .ansons-hdr__cta, .ansons-hdr__search { display: none; }
  .ansons-hdr__bar { min-height: 68px; }
}

@media (max-width: 640px) {
  .ansons-hdr__bar { min-height: 62px; padding: 0 12px; gap: 12px; }
  .ansons-hdr__logo-img--desktop { display: none; }
  .ansons-hdr__logo-img--mobile { display: block; }
  .ansons-hdr__tel { padding: 0; width: 46px; justify-content: center; }
  .ansons-hdr__tel-text { display: none; }
  .ansons-hdr__drawer { max-height: calc(100vh - 110px); }
}

@media (prefers-reduced-motion: reduce) {
  .ansons-hdr *, .ansons-hdr *::before, .ansons-hdr *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}