/* Header chrome. Enqueued globally from inc/enqueue.php.

   The header is brand teal and the hero band beneath it is the same teal, so
   they read as one block on most pages — hence no bottom border. Pages that do
   NOT open on a dark hero get the divider back via .strideuk-header--bordered,
   set in header.php. */

.strideuk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--strideuk-brand);
  color: var(--strideuk-text-invert);
}
.strideuk-header--bordered { box-shadow: 0 1px 0 rgba(255, 255, 255, .12); }

.strideuk-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--strideuk-header-height);
}

.strideuk-header__logo { display: flex; align-items: center; text-decoration: none; font-weight: 700; }

/* Ticket 72 — size is what keeps this logo sharp, so the number matters.
   The only artwork that exists is a 300x120 PNG (no SVG, nothing larger in the
   media library), so the rendered CSS width decides how it looks: display it
   wider than ~150px and a 2x screen has to invent pixels, which is exactly the
   blurriness that was reported. At 44px tall the mark is 110px wide, so a 2x
   screen asks for 220 of the 300 real pixels and a 3x phone asks for 330 — at
   or inside the source either way. Going back up to 56px (140px wide) puts 2x
   screens on the edge again; don't. */
.strideuk-header__logo img { display: block; max-height: 44px; width: auto; }

/* margin-left:auto on the nav pushes nav + actions to the right. */
.strideuk-nav { margin-left: auto; }

.strideuk-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.strideuk-nav__list > li { position: relative; }

.strideuk-nav__list a {
  display: block;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  color: var(--strideuk-text-invert);
  transition: color .2s var(--strideuk-ease), border-color .2s var(--strideuk-ease);
}

/* The current page is underlined in pink — as on the old site. */
.strideuk-nav__list > li > a { padding-block: 8px; border-bottom: 2px solid transparent; }
.strideuk-nav__list > .current-menu-item > a,
.strideuk-nav__list > .current-menu-ancestor > a,
.strideuk-nav__list > .current-page-ancestor > a { border-bottom-color: var(--strideuk-accent); }

/* Hover borrows the current-page underline, so pointing at an item and being on
   it read as the same thing. The border is already declared transparent above,
   so this only changes a colour — no reflow, and nothing shifts sideways.
   Ticket 70: white-on-teal links previously gave no hover feedback at all. */
.strideuk-nav__list > li > a:hover,
.strideuk-nav__list > li > a:focus-visible { border-bottom-color: var(--strideuk-accent); }

/* Keyboard focus needs to be visible on its own, not only via the underline —
   which says nothing on the page you are already on. */
.strideuk-nav__list a:focus-visible,
.strideuk-drawer__list a:focus-visible,
.strideuk-header__logo:focus-visible {
  outline: 2px solid var(--strideuk-text-invert);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Caret on items that have a submenu. */
.strideuk-nav__list > .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: .5em;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* ---- Desktop dropdown ------------------------------------------------
   Opened on hover AND on keyboard focus (:focus-within), so the submenu is
   reachable by tab rather than mouse-only. */
.strideuk-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 260px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--strideuk-brand-dark);
  border-radius: var(--strideuk-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--strideuk-ease), transform .18s var(--strideuk-ease), visibility .18s;
}
.strideuk-nav__list > li:hover > .sub-menu,
.strideuk-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.strideuk-nav__list .sub-menu a {
  padding: 10px 20px;
  font-size: .9rem;
  white-space: nowrap;
}
.strideuk-nav__list .sub-menu a:hover,
.strideuk-nav__list .sub-menu a:focus { background: rgba(255, 255, 255, .08); }

.strideuk-header__actions { display: flex; align-items: center; gap: 12px; }
.strideuk-header__cta { background: var(--strideuk-accent); padding: .7em 1.4em; }
.strideuk-header__cta:hover { background: var(--strideuk-accent-dark); }

/* Burger — hidden on desktop. */
.strideuk-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.strideuk-burger span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: var(--strideuk-text-invert);
  transition: transform .25s var(--strideuk-ease), opacity .25s var(--strideuk-ease);
}
.strideuk-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.strideuk-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.strideuk-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas drawer, slides in from the right. */
.strideuk-drawer {
  position: fixed;
  inset: var(--strideuk-header-height) 0 0 auto;
  width: min(360px, 86vw);
  z-index: 99;
  background: var(--strideuk-brand-dark);
  color: var(--strideuk-text-invert);
  padding: 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--strideuk-ease);
}
.strideuk-drawer.is-open { transform: translateX(0); }

.strideuk-drawer__list { list-style: none; margin: 0; padding: 0; }
.strideuk-drawer__list li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
/* The inline padding and the matching negative margin cancel out, so the text
   still lines up with the drawer's own 28px gutter while the hover highlight
   runs a little past it on both sides. Both are static — nothing moves when the
   row lights up. */
.strideuk-drawer__list a {
  display: block;
  padding: 14px 12px;
  margin-inline: -12px;
  text-decoration: none;
  font-size: 1.05rem;
  color: var(--strideuk-text-invert);
  border-radius: var(--strideuk-radius);
  transition: background-color .2s var(--strideuk-ease);
}
.strideuk-drawer__list a:hover,
.strideuk-drawer__list a:focus-visible { background: rgba(255, 255, 255, .08); }
.strideuk-drawer__list .sub-menu { list-style: none; margin: 0; padding-left: 16px; }
.strideuk-drawer__list .sub-menu li:last-child { border-bottom: 0; }
.strideuk-drawer__list .sub-menu a { font-size: .95rem; color: rgba(255, 255, 255, .78); }

.strideuk-drawer__cta { margin-top: 28px; }
.strideuk-drawer__cta .strideuk-btn { width: 100%; justify-content: center; }

@media (max-width: 992px) {
  .strideuk-nav,
  .strideuk-header__cta { display: none; }
  .strideuk-burger { display: flex; }

  /* The nav carried margin-left:auto; hiding it would collapse the burger back
     next to the logo. Re-assert the push on the actions container. */
  .strideuk-header__actions { margin-left: auto; }

  /* Ticket 72 — a phone is the narrowest place the logo has to sit next to the
     burger, and it is also where pixel density is highest (3x is normal). 36px
     tall is 90px wide, so even a 3x screen wants only 270 of the 300 source
     pixels. */
  .strideuk-header__logo img { max-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .strideuk-drawer, .strideuk-burger span, .strideuk-nav__list .sub-menu { transition: none; }
}