/* ============================================================
   TED Digital - site header + mega menu
   Copied from the locked kit's homepage demo (header over the hero,
   charcoal overlay menu with nav left + featured tiles right), values
   swapped for tokens. Two tones: dark (over imagery - white chrome)
   and light (on the white page - ink chrome). The open menu always
   forces the dark chrome because the overlay is charcoal.
   ============================================================ */

/* ---- header ---- */
.site-head { position: relative; z-index: 20; padding-block: var(--gap-sm); }
.site-head--dark { position: absolute; top: 0; left: 0; right: 0; }
.admin-bar .site-head--dark { top: var(--wp-admin--admin-bar--height, 0px); }
.site-head .container { display: flex; align-items: center; justify-content: space-between; }

.brand { display: inline-flex; text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.site-head--dark .brand__light, .site-head--light .brand__dark { display: none; }
html.menu-open .site-head .brand__dark { display: block; }
html.menu-open .site-head .brand__light { display: none; }

.head-right { display: flex; align-items: center; gap: var(--gap-sm); }
.head-cta {
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  color: var(--ted-white); border: 1px solid var(--line-inverse); border-radius: var(--radius-full);
  padding: var(--gap-xs) var(--gap-sm);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* No-JS row of the same links (inside <noscript>) */
.nav-static { display: flex; flex-wrap: wrap; gap: var(--gap-xs) var(--gap-sm); padding-top: var(--gap-sm); }
.nav-static a {
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: inherit;
}
.site-head--light .nav-static { color: var(--ink); }
.site-head--dark .nav-static { color: var(--ted-white); }
.head-cta:hover { background: var(--ted-teal); border-color: var(--ted-teal); color: var(--ted-black); }

/* MENU pill (Pete, 13 Oct): solid, the word beside three lines, far right at every width. Same height as the
   basket circle beside it. Over imagery it is white on ink; on the white page it is ink; the open overlay is
   charcoal, so it goes back to white and the lines fold into a cross. */
.menu-pill {
  height: 44px; padding: 0 var(--gap-sm); cursor: pointer; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; gap: var(--gap-2xs);
  border: 1px solid var(--ted-white); background: var(--ted-white); color: var(--ted-black);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu-pill:hover { background: var(--ted-teal); border-color: var(--ted-teal); color: var(--ted-black); }
.menu-pill__icon { display: flex; flex-direction: column; gap: var(--gap-3xs); }
.menu-pill__icon span { display: block; width: var(--icon-xs); height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); }
html.menu-open .menu-pill__icon span:nth-child(1) { transform: translateY(calc(2px + var(--gap-3xs))) rotate(45deg); }
html.menu-open .menu-pill__icon span:nth-child(2) { opacity: 0; }
html.menu-open .menu-pill__icon span:nth-child(3) { transform: translateY(calc(-2px - var(--gap-3xs))) rotate(-45deg); }
html.menu-open .site-head { position: fixed; top: 0; left: 0; right: 0; }
html.menu-open { overflow: hidden; }

/* Light tone: ink chrome on the white page */
.site-head--light .head-cta { color: var(--ink); border-color: var(--ink-50); }
.site-head--light .menu-pill { background: var(--ink); border-color: var(--ink); color: var(--ted-white); }
.site-head--light .menu-pill:hover { background: var(--ted-teal); border-color: var(--ted-teal); color: var(--ted-black); }
html.menu-open .site-head--light .head-cta { color: var(--ted-white); border-color: var(--line-inverse); }
html.menu-open .site-head--light .head-cta:hover { color: var(--ted-black); border-color: var(--ted-teal); }
html.menu-open .site-head--light .menu-pill { background: var(--ted-white); border-color: var(--ted-white); color: var(--ted-black); }

/* Header circles (Richard, 28 Oct): brochure + basket are 44px circles, the icon in the chrome's ink. On hover or
   keyboard focus the circle opens into a pill and its word slides out, eased in and out, then folds away again.
   The word is clipped (a zero-width column), never display:none, so it stays in the accessible name (the basket's full name
   is "Basket, ..." from cart.js; the brochure's is its aria-label). Touch screens get the icon; the names carry it. */
.head-cart { display: flex; }
.head-icon {
  position: relative; height: 44px; min-width: 44px; cursor: pointer; border-radius: var(--radius-full);
  padding: 0 calc((44px - 2px - var(--icon-sm)) / 2);   /* the icon sits dead centre while closed */
  background: transparent; border: 1px solid var(--line-inverse); color: var(--ted-white); text-decoration: none;
  display: inline-flex; align-items: center;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.head-icon:hover, .head-icon:focus-visible { border-color: var(--ted-white); }
.head-icon__svg, .head-cart__icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.head-icon__label {
  display: grid; grid-template-columns: minmax(0, 0fr); overflow: hidden;   /* minmax: a bare 0fr keeps the padding (12px) */
  transition: grid-template-columns 0.5s var(--ease-in-out);
}
.head-icon__label > span {
  min-width: 0; white-space: nowrap; padding: 0 var(--gap-3xs) 0 var(--gap-2xs); opacity: 0;
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  transition: opacity 0.3s var(--ease-in-out);   /* fades out first on the way back, so the word never shows cut */
}
/* Tablet up only: below 769px the bar has no room for a circle to open (Moirai r2, 1.4.10). */
@media (min-width: 769px) {
  .head-icon:focus-visible .head-icon__label { grid-template-columns: minmax(0, 1fr); }
  .head-icon:focus-visible .head-icon__label > span { opacity: 1; transition-delay: 0.15s; }
}
@media (min-width: 769px) and (hover: hover) {
  .head-icon:hover .head-icon__label { grid-template-columns: minmax(0, 1fr); }
  .head-icon:hover .head-icon__label > span { opacity: 1; transition-delay: 0.15s; }
}
@media (prefers-reduced-motion: reduce) {
  .head-icon__label, .head-icon__label > span { transition: none; }
}
.head-cart__bag { position: relative; display: flex; }   /* the badge is pinned to the bag, wherever the word sits */
.head-cart__count {
  position: absolute; top: calc(var(--gap-xs) * -1); right: calc(var(--gap-xs) * -1);
  min-width: var(--gap-sm); height: var(--gap-sm); padding: 0 var(--gap-3xs); border-radius: var(--radius-full);
  background: var(--ted-teal); color: var(--ted-black);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; line-height: var(--gap-sm); text-align: center;
  animation: head-cart-pop 0.4s var(--ease-spring);
}
.head-cart__count[hidden] { display: none; }
@keyframes head-cart-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .head-cart__count { animation: none; } }
.site-head--light .head-icon { border-color: var(--ink-50); color: var(--ink); }   /* the Where to buy pill's own border */
.site-head--light .head-icon:hover, .site-head--light .head-icon:focus-visible { border-color: var(--ink); }
html.menu-open .site-head--light .head-icon { border-color: var(--line-inverse); color: var(--ted-white); }

/* ---- mega menu overlay (charcoal; nav left, featured tiles right on desktop) ---- */
.menu {
  position: fixed; inset: 0; z-index: 15; background: var(--ted-charcoal);
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease);
  display: flex; align-items: center;
}
html.menu-open .menu { opacity: 1; pointer-events: auto; }
.menu .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: center; }
/* Two layers in one grid cell: the top-level list, and a submenu panel that slides in from the right over it
   while the list slides out to the left (header.js sets .menu--sub and .is-active, and inert on the away layer). */
.menu__nav { display: grid; overflow: hidden; padding: var(--gap-2xs); margin: calc(var(--gap-2xs) * -1); } /* room for the focus ring inside the clip */
.menu__panel {
  grid-area: 1 / 1; display: grid; gap: var(--gap-xs); align-content: start; justify-items: start;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.menu__panel[hidden] { display: none; }
.menu--sub .menu__panel--root { transform: translateX(calc(var(--gap-xl) * -1)); opacity: 0; pointer-events: none; }
.menu__panel--sub { transform: translateX(var(--gap-xl)); opacity: 0; pointer-events: none; }
.menu__panel--sub.is-active { transform: none; opacity: 1; pointer-events: auto; }
/* Reduced motion drops the slides, not the fades: base.css zeroes every transition, so the menu keeps a short crossfade. */
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__panel, .menu nav a, .menu__more, .menu-feature a {
    transform: none !important; transition-property: opacity !important; transition-duration: 0.25s !important; transition-delay: 0s !important;
  }
}

.menu nav a, .menu__more {
  font-family: var(--font-heading); font-weight: 300; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: var(--text-2xl); color: var(--ted-white);
  text-decoration: none; opacity: 0; transform: translateY(16px);
  transition: color 0.2s var(--ease), opacity 0.4s var(--ease), transform 0.4s var(--ease);
  transition-delay: 0s, calc(var(--i, 0) * 0.04s), calc(var(--i, 0) * 0.04s); /* stagger, any count */
}
.menu__more { display: inline-flex; align-items: center; gap: var(--gap-xs); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
html.menu-open .menu nav a, html.menu-open .menu__more { opacity: 1; transform: none; }
.menu nav a:hover, .menu__more:hover { color: var(--ted-teal); }
/* A submenu's links stagger in again each time the panel arrives */
.menu__panel--sub a { opacity: 0; transform: translateY(16px); }
html.menu-open .menu__panel--sub.is-active a { opacity: 1; transform: none; }

/* Chevron: two strokes of the text colour; points right on a parent, left on Back */
.menu__chev { width: var(--gap-xs); height: var(--gap-xs); border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); flex: none; }
.menu__back {
  display: inline-flex; align-items: center; gap: var(--gap-xs); margin-bottom: var(--gap-xs);
  background: none; border: 0; padding: var(--gap-xs) 0; cursor: pointer; color: var(--ink-inverse-70);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
.menu__back .menu__chev { transform: rotate(-135deg); width: var(--gap-2xs); height: var(--gap-2xs); }
.menu__back:hover { color: var(--ted-teal); }
.menu__meta { position: absolute; bottom: var(--gap-md); left: 0; right: 0; }
.menu__meta .container { display: block; font-size: var(--text-sm); color: var(--ink-inverse-50); }
.menu__meta a { color: inherit; text-decoration: none; margin-right: var(--gap-sm); transition: color 0.2s var(--ease); }
.menu__meta a:hover { color: var(--ted-teal); }

/* Featured tiles inside the mega menu */
.menu-feature { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: var(--gap-sm); }
.menu-feature a {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; opacity: 0; transform: translateY(16px);
  transition: opacity 0.45s var(--ease) 0.15s, transform 0.45s var(--ease) 0.15s;
}
.menu-feature a.mf--wide { grid-column: span 2; }
html.menu-open .menu-feature a { opacity: 1; transform: none; }
.menu-feature .mf-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; transition: transform 0.6s var(--ease); }
.menu-feature a:hover .mf-img { transform: scale(1.05); }
.menu-feature .mf-label {
  position: absolute; left: var(--gap-sm); bottom: var(--gap-sm); right: var(--gap-sm); color: var(--ted-white);
  font-family: var(--font-heading); font-weight: 500; font-size: var(--text-sm);
  letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.menu-feature .mf-tool {
  position: absolute; inset: 0; background: var(--ted-teal); padding: var(--gap-sm);
  display: flex; flex-direction: column; justify-content: flex-end; transition: background 0.25s var(--ease);
}
.menu-feature a:hover .mf-tool { background: var(--ted-teal-dark); }
.menu-feature .mf-tool strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: var(--text-lg); color: var(--ted-black); line-height: 1.25; text-wrap: balance; }
.menu-feature .mf-tool span { font-size: var(--text-sm); color: var(--ink-70); margin-top: var(--gap-3xs); }

@media (max-width: 900px) {
  .menu .container { grid-template-columns: 1fr; }
  .menu-feature { display: none; }
}

/* Narrow screens: tighter gaps and the short pill label (below 480px the Contact pill steps out, see below) */
.head-cta__short { display: none; }
@media (max-width: 560px) {
  .head-right { gap: var(--gap-xs); }
  .head-cta { padding: var(--gap-xs); white-space: nowrap; }
  .head-cta__long { display: none; }
  .head-cta__short { display: inline; }
}
/* Below 480px the logo, the Where to buy pill, basket and MENU pill no longer share the bar (~373px of chrome in 350px).
   The pill steps out only when its page is in the menu: the overlay's utility row carries it (and the brochure) whenever
   there is a menu at all, so MENU keeps its word at every width (Pete, 13 Oct). */
@media (max-width: 480px) {
  .head-cta--in-menu { display: none; }
}
/* The brochure circle (28 Oct) is the first thing to step out on phones: the menu's utility row and the footer carry
   the same download. 600px, not 560: measured, the bar runs out of room between 561 and 590 with the real 101px logo. */
@media (max-width: 600px) {
  .head-brochure { display: none; }
}

/* Menu utility links (28 Oct, stacked 29 Oct): Where to buy, the brochure and Contact us, in small tracked caps under the big links, every width. */
.menu nav .menu__utility { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-2xs); margin-top: var(--gap-sm); }
.menu nav .menu__utility a { font-size: var(--text-xs); font-weight: 500; letter-spacing: 2px; }