/* ============================================================================
   WNC — Header. Design B. Single source of truth for the header and nav.
   ----------------------------------------------------------------------------
   Layout (parts/header.html, rebuilt 13 Sep): the logo on the left, spanning
   the full height of a right-hand column that holds the menu pills on top and
   the long search directly beneath. Live's two rows left a void under the
   logo; here the logo fills it. The search is as wide as the pill row, so it
   is never shorter than live's 570px.

     .wnc-hdr         outer group, padding, positioning context on mobile
     .wnc-hdr__row    logo | right column
     .wnc-hdr__right  nav pills over search

     W4   transparent bar, no header background
     B1   the four-column Car Reviews mega panel and the mobile drawer
     13 Sep call  big logo, equal-width pills, long search, less void

   Live's own menu CSS -- five inline blocks in functions.php that fought each
   other at priorities 130-10000 and hid the drawer's links (white on white,
   and .wp-block-navigation__container display:none inside the overlay) -- is
   deleted, as the frozen build did in aba8aba. Nothing else styles the nav.

   One breakpoint: 1024px. Below it the drawer, above it the pills and mega.

   Colours are live's: #0f172a ink, #0284c7 accent, #f9fafb hover. No tokens.
   ========================================================================== */

/* W4 -- "remove that header background so it uses the site background".
   Live's header block carried backgroundColor:base; that is removed from the
   markup, and this makes sure nothing paints behind it. Live's header is not
   sticky, so a transparent bar has nothing scrolling through it. */
header.wp-block-template-part,
header.wp-block-template-part > .wp-block-group{
  background:transparent !important;
}

/* The navigation needs to sit above the page and be a positioning context. */
header .wp-block-navigation{ position:relative; z-index:100; }
.wp-site-blocks > header{ position:relative; z-index:95; }



/* ------------------------------------------------------------- MOBILE -- */
@media (max-width:1023.98px){

  /* Collapse to the toggle. Core only collapses below 600px, so its own
     media query is overridden here rather than hiding .__container, which is
     what previously broke the overlay's inner list too. */
  header .wp-block-navigation__responsive-container:not(.is-menu-open){
    display:none !important;
  }
  header .wp-block-navigation__responsive-container-open{
    display:flex !important;
    align-items:center; justify-content:center;
    width:44px; height:44px;
    border-radius:10px; color:#0f172a;
    /* Always boxed (Hugh, 13 Oct call: the bare three lines did not read as a
       button until tapped). Same skin as the desktop menu pills. */
    background:#ffffff; border:1px solid #dbe3ec;
    box-shadow:0 1px 2px rgba(15,23,42,.06);
    -webkit-tap-highlight-color:transparent;
  }
  /* Guarded: a bare :hover sticks on iOS after a tap, leaving a stray blue
     block behind whichever control was last touched. */
  @media (hover:hover){
    header .wp-block-navigation__responsive-container-open:hover{
      background:#f0f9ff; border-color:#0284c7; color:#0284c7;
    }
  }

  /* ---- the drawer ---- */
  /* Core makes .is-menu-open a full-screen fixed overlay already. Only the
     skin is set here, plus a right-hand panel rather than full-bleed. */
  header .wp-block-navigation__responsive-container.is-menu-open{
    background:var(--wnc-panel,#fff) !important;
    color:#0f172a !important;
    left:auto !important;
    width:min(88vw,380px) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    padding:0 !important;
    /* iOS rubber-banding. Core makes this element overflow:auto, but with the
       accordion closed the panel is six rows - far shorter than the viewport -
       so there is nothing to scroll and a touch-drag becomes a pure overscroll
       bounce, which reads as the drawer floating on an open canvas. Desktop
       browsers have no rubber-band, so narrowing a desktop window never shows
       it. `none` rather than `contain`: contain stops the chaining to the page
       behind but leaves the local bounce, which is the part being seen. */
    overscroll-behavior:none;
  }
  /* the page behind must not bounce either while the drawer owns the screen */
  html.has-modal-open{ overscroll-behavior:none; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content{
    padding:0 8px 28px !important;
    width:100%;
  }

  /* Left-align everything. Core pipes the block's justification into the
     overlay via --navigation-layout-justification-setting, which is why the
     links were right-aligned while the headings were not. Desktop keeps its
     right-aligned bar; only the overlay is reset. */
  header .wp-block-navigation__responsive-container.is-menu-open{
    --navigation-layout-justification-setting:flex-start;
    --navigation-layout-justify:flex-start;
    --navigation-layout-align:stretch;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container,
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item{
    align-items:stretch !important;
    text-align:left;
    width:100%;
  }

  /* close button: sits where the hamburger was tapped */
  header .wp-block-navigation__responsive-container-close{
    position:absolute; top:7px; right:12px;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px; color:#0f172a;
  }
  header .wp-block-navigation__responsive-dialog{ padding-top:58px; }

  /* ---- rows ---- */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content{
    display:flex; align-items:center;
    min-height:52px; padding:0 12px !important;
    font-size:17px; font-weight:600;
    border-radius:10px; color:#0f172a;
    width:100%;
  }
  @media (hover:hover){
    header .wp-block-navigation__responsive-container.is-menu-open
      .wp-block-navigation-item__content:hover{
      background:#f9fafb; color:#0284c7;
    }
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .current-menu-item > .wp-block-navigation-item__content{
    color:#0284c7;
  }

  /* ---- Car Reviews as an accordion ---- */
  /* Core force-opens every submenu inside the overlay and hides the chevron.
     Both are undone so the ~15 grouped links are collapsed until asked for;
     core's own interactivity already toggles aria-expanded on the button, so
     this needs no JavaScript of ours. */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon{
    display:flex !important; margin-left:auto; align-items:center;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .has-child .wp-block-navigation__submenu-container{
    display:grid !important; grid-template-rows:0fr;
    padding:0 !important; min-width:0 !important;
    transition:grid-template-rows .24s ease;
    overflow:hidden !important;
  }
  /* Open or shut by .wnc-open on the item (header.js), not core's
     aria-expanded: inside the drawer core reports every submenu as open and
     ignores taps on the chevron, so the chevron did nothing (Hugh, 13 Oct). */
  header .wp-block-navigation__responsive-container.is-menu-open
    .has-child.wnc-open > .wp-block-navigation__submenu-container{
    grid-template-rows:1fr;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .has-child > .wp-block-navigation-submenu__toggle svg{ transition:transform .2s ease; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .has-child.wnc-open > .wp-block-navigation-submenu__toggle svg{ transform:rotate(180deg); }
  header .wp-block-navigation__responsive-container.is-menu-open
    .has-child .wp-block-navigation__submenu-container > *{
    min-height:0; overflow:hidden;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .has-child.wnc-open > .wp-block-navigation-submenu__toggle{
    color:#0284c7;
  }

  /* the mega's four columns stack */
  header .is-menu-open .wnc-has-mega .wp-block-columns{ display:block !important; }
  header .is-menu-open .wnc-has-mega .wp-block-column{
    border-left:0 !important; padding-left:0 !important;
  }
  header .is-menu-open .wnc-has-mega .wp-block-group{ padding:0 12px !important; max-width:none !important; }
  header .is-menu-open .wnc-has-mega a{
    display:flex; align-items:center; min-height:44px;
    padding:0 10px !important; font-size:15.5px; font-weight:400;
    border-radius:8px; color:#0f172a;
  }
  @media (hover:hover){
    header .is-menu-open .wnc-has-mega a:hover{
      background:#f9fafb; color:#0284c7;
    }
  }
  /* Recent Reviews shows in the drawer too, as compact thumbnails, matching
     Top Picks (Collins, 11 Oct; it was hidden on phones before). */
}


/* ================================================================= LOGO == */
/* 13 Sep: "make the logo bigger", then "still more bigger". Live is 200px.
   264px is the block's width in parts/header.html (editable in the Site
   Editor) and applies from 1440px up; narrower bands step it down only as far
   as the six equal pills beside it require. Its left edge is live's exactly. */
@media (max-width:1023.98px){
  header.wp-block-template-part .wp-block-site-logo img{ width:248px !important; height:auto; }
}
@media (max-width:480px){
  /* the bar also holds the labelled search button and the menu button */
  header.wp-block-template-part .wp-block-site-logo img{ width:min(216px, calc(100vw - 197px)) !important; }
  /* a tighter Search button, so the logo keeps ~193px at 390 */
  .wnc-search-toggle{ padding:0 6px !important; gap:5px !important; font-size:14px !important; }
  .wnc-search-toggle svg{ width:18px !important; height:18px !important; }
  header .wnc-hdr__row{ gap:8px !important; }
  header .wnc-hdr__right{ gap:0 !important; }
}

/* ================================================================ DESKTOP == */
@media (min-width:1024px){

  /* ---- pills ---- */
  /* 13 Sep: "uniform pills like buttons", then "equal length". The pill is the
     <li>, not the <a>, so Car Reviews' chevron sits inside its pill. Direct
     children only: links inside the mega panel are not pills.

     Equal widths come from the grid, not a fixed number: in a shrink-to-fit
     grid every 1fr column grows to the widest label ("Motoring Guides"), so a
     renamed item resizes all six together. */
  header .wp-block-navigation__container{
    display:grid !important;
    grid-auto-flow:column; grid-auto-columns:1fr;
    gap:6px !important; align-items:center;
  }
  header .wp-block-navigation__container > .wp-block-navigation-item{
    display:flex; align-items:center; justify-content:center;
    height:36px; padding:0 12px;
    background:#ffffff;
    border:1px solid #dbe3ec;
    border-radius:999px;
    box-shadow:0 1px 2px rgba(15,23,42,.06);
    transition:background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space:nowrap;
  }
  header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
    color:#0f172a; font-size:13.5px; font-weight:600; line-height:1;
    text-decoration:none; padding:0 !important;
  }
  header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon{
    margin-left:6px; color:#0f172a;
  }
  header .wp-block-navigation__container > .wp-block-navigation-item:hover,
  header .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
  header .wp-block-navigation__container > .current-menu-item{
    background:#f0f9ff; border-color:#0284c7;
  }
  header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
  header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
  header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
  header .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon{
    color:#0284c7;
  }
  header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible{
    outline:none;
  }
  header .wp-block-navigation__container > .wp-block-navigation-item:has(> .wp-block-navigation-item__content:focus-visible){
    outline:2.5px solid #0ea5e9; outline-offset:3px;
  }

  /* ---- layout ---- */
  header .wnc-hdr__row{ align-items:center !important; gap:24px !important; }
  header .wnc-hdr__logo{ flex:0 0 auto; }
  header .wnc-hdr__logo img{ width:320px !important; height:auto; }
  /* The column is as wide as the pill row. The search is live's exact length
     (Collins, 13 Sep): live's typing box is 504px at every desktop width. The
     pill-row-wide version measured 586-835px, longer than Hugh wanted; the one
     before it was shorter. Right-aligned under the pills. */
  header .wnc-hdr__right{
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; gap:10px !important;
    flex:0 0 auto; min-width:570px;
  }
  header .wnc-hdr__right .wp-block-navigation{ justify-content:flex-end; }
  header .wnc-hdr__right .wp-block-search{
    width:504px !important; max-width:100% !important; margin:0 !important;
    align-self:flex-end !important;
  }
  header .wnc-hdr__right .wp-block-search__inside-wrapper{ width:100% !important; }
  header .wnc-hdr__right .wp-block-search__input{ min-height:40px; }
  /* 13 Sep: no magnifier on desktop. Enter still submits the form, and the
     button stays in the markup for Site Editor and no-CSS use. */
  header .wnc-hdr__right .wp-block-search__button{ display:none !important; }

  /* ---- width bands ---- */
  /* Sized from measured label widths so logo + gap + six equal pills fit the
     row (1232px at 1440, 1158px at 1366, 1076px at 1280). The logo takes what
     the pills leave. At 320px it is ~97px tall and the column (36px pills,
     10px gap, 40px search) ~86px, centred on it, so the menu sits level with
     the logo rather than against the top of the header. */
  @media (max-width:1439.98px){
    header .wnc-hdr__logo img{ width:300px !important; }
    header .wp-block-navigation__container > .wp-block-navigation-item{ padding:0 10px; }
    header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{ font-size:13px; }
  }
  @media (max-width:1365.98px){
    /* 240px at 1280 (all the row leaves), 300px again by ~1340 */
    header .wnc-hdr__logo img{ width:clamp(240px, calc(100vw - 1040px), 300px) !important; }
    header .wnc-hdr__right{ gap:8px !important; }
  }
  /* Below 1280 six equal pills cannot sit beside the logo (they need ~1000px;
     the row at 1024 is 860px), so each pill follows its own label, and the
     logo grows with the viewport from 220px at 1024 to 300px by ~1120. */
  @media (max-width:1279.98px){
    header .wnc-hdr__logo img{ width:clamp(220px, calc(84vw - 640px), 300px) !important; }
    header .wp-block-navigation__container{
      display:flex !important; flex-wrap:nowrap !important; gap:6px !important;
    }
    header .wp-block-navigation__container > .wp-block-navigation-item{ height:34px; padding:0 11px; }
    header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{ font-size:13px; }
  }

  /* ---- the Car Reviews mega panel ---- */
  /* The frozen build's panel, de-tokenised to live's colours. Anchored to the
     nav block, so it opens directly under the pills and over the search, never
     below it -- a gap there would close the panel on hover before the pointer
     arrived. It is as wide as the whole logo-and-column row: the row is a size
     container, so 100cqw is the row's width, and right:0 aligns the panel's
     right edge with the pills'. Only at >=1024px: containment would trap the
     mobile drawer, which is position:fixed. */
  header .wnc-hdr__row{ container-type:inline-size; }
  header .wnc-hdr__right .wp-block-navigation{ position:relative !important; z-index:100; }
  header .wp-block-navigation__container,
  header .wp-block-navigation-item.wnc-has-mega,
  header .wp-block-navigation__responsive-container,
  header .wp-block-navigation__responsive-dialog,
  header .wp-block-navigation__responsive-container-content{
    position:static !important;
  }
  header .wp-block-navigation-item.wnc-has-mega > .wp-block-navigation__submenu-container{
    position:absolute !important;
    left:auto !important; right:0 !important; top:calc(100% + 10px) !important;
    width:100cqw !important; min-width:0 !important; max-width:none !important;
    z-index:61 !important;
    background:var(--wnc-panel,#fff) !important;
    border:1px solid var(--wnc-panel-line,#e5e7eb) !important;
    border-radius:16px !important;
    box-shadow:0 22px 44px rgba(15,23,42,.14) !important;
    padding:0 !important;
  }
  /* Invisible bridge across the gap between the pill and the panel. It is
     part of the <li>, so the pointer never "leaves" Car Reviews on its way
     down and the panel does not close mid-journey. */
  header .wp-block-navigation-item.wnc-has-mega > .wp-block-navigation__submenu-container::before{
    content:""; position:absolute; left:0; right:0; bottom:100%; height:30px;
  }
  header ul.wnc-has-mega.wp-block-navigation__submenu-container > .wp-block-group{
    max-width:none !important; margin:0 !important;
    padding:28px 32px 30px !important; box-sizing:border-box;
  }
  /* Three link columns share the left, Recent Reviews takes the wider right. */
  header .wnc-has-mega .wp-block-columns{
    display:grid !important;
    grid-template-columns:.573fr .573fr .573fr 1.28fr !important;
    gap:30px !important; margin:0 !important;
  }
  header .wnc-has-mega .wp-block-column{ flex-basis:auto !important; min-width:0; }
  header .wnc-has-mega .wp-block-column:nth-child(4){
    border-left:1px solid #e5e7eb; padding-left:32px !important;
  }
  header .wnc-has-mega .wcn-mega-heading{
    font-size:11px !important; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; color:#64748b !important;
    margin:0 0 10px !important; padding:0 0 10px !important;
    border-bottom:1px solid #e5e7eb;
  }
  header .wnc-has-mega .wp-block-navigation__submenu-container a,
  header .wnc-has-mega .wp-block-column .wp-block-navigation-item__content{
    display:block; color:#0f172a !important;
    padding:7px 10px !important; margin-left:-10px;
    border-radius:7px; font-weight:500; font-size:14.5px; text-decoration:none;
  }
  header .wnc-has-mega .wp-block-column .wp-block-navigation-item__content:hover{
    background:#f0f9ff !important; color:#0284c7 !important;
  }
  header .wnc-has-mega .wp-block-column .wp-block-navigation-item{ display:block; }
  header .wnc-has-mega a.wcn-mega-viewall{
    margin-top:4px; color:#0284c7 !important; font-weight:700; font-size:13.5px;
  }
  header .wnc-has-mega .wp-block-column p{ margin:0; }
  /* Core's flow layout puts ~1.2rem of block gap between every child of a
     column, which spaced the links ~55px apart. The link padding is the gap. */
  header .wnc-has-mega .wp-block-column > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
  /* A second heading inside a column (Awards, under By Type) needs air above it;
     it has to follow the reset above, which zeroes every child's margins. */
  header .wnc-has-mega .wp-block-column > .wcn-mega-heading--sub{ margin-block-start:22px !important; }

  /* Recent Reviews mini-list */
  header .wcn-nav-recent{ list-style:none; margin:0; padding:0; display:block; }
  header .wnc-has-mega .wcn-nav-recent li a{
    display:flex !important; align-items:flex-start; gap:13px;
    padding:11px 0 !important; margin:0 !important; border-radius:0 !important;
  }
  header .wnc-has-mega .wcn-nav-recent li a:hover{ background:transparent !important; }
  header .wnc-has-mega .wcn-nav-recent li a:hover strong{ color:#0284c7; }
  header .wcn-nav-recent li + li a{ border-top:1px solid #f1f5f9; }
  header .wcn-nav-recent img{
    width:104px; height:auto; aspect-ratio:16/9; object-fit:cover;
    border-radius:8px; flex-shrink:0;
  }
  header .wcn-nav-recent__body{ min-width:0; }
  header .wcn-nav-recent__body strong{
    display:block; font-size:14px; font-weight:700; line-height:1.3; color:#0f172a;
    white-space:normal;
  }
  header .wcn-nav-recent__meta:empty{ display:none; }
  header .wnc-has-mega a.wcn-nav-recent__all{
    display:inline-block; margin:14px 0 0 !important; padding:0 !important;
    color:#0284c7 !important; font-weight:700; font-size:13.5px;
  }
  header .wnc-has-mega a.wcn-nav-recent__all:hover{ background:transparent !important; text-decoration:underline; }

  .wnc-search-toggle{ display:none !important; }
}

/* ============================================================ DRAWER EXTRAS == */
@media (max-width:1023.98px){
  /* The group headings inside the Car Reviews accordion */
  header .is-menu-open .wnc-has-mega .wcn-mega-heading{
    margin:14px 12px 4px !important; padding:0 !important;
    font-size:11.5px; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:#64748b;
  }
  header .is-menu-open .wnc-has-mega a.wcn-mega-viewall{ color:#0284c7; font-weight:700; }
  header .is-menu-open .wnc-has-mega .wp-block-column > *{ margin-block-start:0 !important; margin-block-end:0 !important; }

  /* Car Reviews' label and its chevron on one line, the panel beneath. The
     rows above set every item's content to width:100%, which pushed the
     chevron onto a line of its own. */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child{
    flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content{
    flex:1 1 0; width:auto;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle{
    flex:0 0 44px; width:44px !important; height:44px !important;
    margin:0 4px 0 auto !important; padding:0 !important;
    border:0 !important; background:none !important; border-radius:10px;
    justify-content:center; color:#0f172a; cursor:pointer;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle svg{
    width:14px; height:14px;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container{
    flex:0 0 100%; width:100%;
  }
  /* core focuses the first link when the drawer opens; only show that ring
     to keyboard users */
  header .is-menu-open a:focus:not(:focus-visible),
  header .is-menu-open button:focus:not(:focus-visible){ outline:none; }

  /* the logo, search button and hamburger share one row: the right column
     turns from a stack into a row, and the search leaves the flow (below) */
  header .wnc-hdr__row{ align-items:center !important; gap:12px !important; }
  header .wnc-hdr__right{
    flex-direction:row !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:flex-end !important; gap:2px !important;
  }
  /* without JS the search stays visible, on its own line */
  html:not(.wnc-js) header .wnc-hdr__right{ flex-wrap:wrap !important; }
  html:not(.wnc-js) header .wnc-hdr__right .wp-block-search{ flex:1 1 100%; }
}

/* ============================================================ MOBILE SEARCH == */
/* header.js inserts .wnc-search-toggle beside the hamburger and adds .wnc-js.
   Below 1024px the search folds away behind that icon; without JS the class
   is never added and the field simply stays visible. */
@media (max-width:1023.98px){
  .wnc-search-toggle{
    display:flex; align-items:center; justify-content:center; gap:6px;
    height:44px; padding:0 10px;
    background:none; border:0; cursor:pointer;
    border-radius:10px; color:#0f172a;
    font-family:inherit; font-size:15px; font-weight:600; line-height:1;
    -webkit-tap-highlight-color:transparent;
  }
  .wnc-search-toggle svg{ width:19px; height:19px; flex-shrink:0; }
  @media (hover:hover){
    .wnc-search-toggle:hover{ background:#f9fafb; color:#0284c7; }
  }
  .wnc-search-toggle:active{ background:#f9fafb; color:#0284c7; }
  .wnc-search-toggle svg{ display:block; }
  .wnc-search-toggle:focus-visible,
  header .wp-block-navigation__responsive-container-open:focus-visible,
  header .wp-block-navigation__responsive-container-close:focus-visible{
    outline:2.5px solid #0ea5e9; outline-offset:2px;
  }

  /* folds out under the whole bar; .wnc-hdr is the positioning context */
  header .wnc-hdr{ position:relative; }
  .wnc-js header.wp-block-template-part .wp-block-search{
    position:absolute; left:0; right:0; top:100%; z-index:90;
    width:auto !important; max-width:none !important;
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .22s ease;
    background:var(--wnc-panel,#fff); margin:0;
    padding:0 16px; border-radius:0 0 14px 14px;
  }
  .wnc-js header.wp-block-template-part .wp-block-search > *{ overflow:hidden; }
  .wnc-js.wnc-search-open header.wp-block-template-part .wp-block-search{
    grid-template-rows:1fr; padding:10px 16px 12px;
    box-shadow:0 12px 24px rgba(15,23,42,.10);
  }
}

@media (prefers-reduced-motion:reduce){
  header .wp-block-navigation__submenu-container,
  header .wp-block-navigation__container > .wp-block-navigation-item,
  header .wp-block-search{ transition:none !important; }
}

/* Top Picks (Recommended + Best Buy as their own menu, Hugh 10 Oct call): the
   same panel as Car Reviews (it carries .wnc-has-mega too), with two picture
   columns. In the phone drawer the cars stay visible, since they are the menu. */
@media (min-width:1024px){
  header .wnc-has-mega.wnc-top-picks .wp-block-columns{ grid-template-columns:1fr 1fr !important; }
  header .wnc-has-mega.wnc-top-picks .wp-block-column:nth-child(2){ border-left:1px solid #e5e7eb; padding-left:32px !important; }
  header .wnc-has-mega.wnc-top-picks .wp-block-column:nth-child(4){ border-left:0; padding-left:0 !important; }
}
header .wcn-nav-recent__none{ margin:6px 0 0 !important; font-size:14px; color:#475569; }
@media (max-width:1023px){
  header .is-menu-open .wnc-top-picks .wcn-nav-recent{ display:grid !important; }
  header .is-menu-open .wnc-top-picks a.wcn-nav-recent__all{ display:flex !important; }
  header .is-menu-open .wnc-top-picks .wp-block-column:has(.wcn-nav-recent),
  header .is-menu-open .wnc-top-picks .wp-block-column:has(.wcn-nav-recent__none){ display:block !important; }
}
/* the brand is always lower case: the mega headings are uppercased, so Top Picks' are not */
header .wnc-top-picks .wcn-mega-heading{ text-transform:none !important; letter-spacing:.01em !important; font-size:14px !important; }
@media (max-width:1023px){
  header .is-menu-open .wnc-has-mega .wcn-nav-recent{ gap:4px; margin:4px 0 0 !important; padding:0 !important; list-style:none; }
  header .is-menu-open .wnc-has-mega .wcn-nav-recent li a{
    display:grid !important; grid-template-columns:76px 1fr; align-items:center; gap:12px;
    min-height:0 !important; padding:6px 8px !important;
  }
  header .is-menu-open .wnc-has-mega .wcn-nav-recent img{ width:76px !important; height:50px !important; object-fit:cover; border-radius:8px; display:block; }
  header .is-menu-open .wnc-has-mega .wcn-nav-recent strong{ font-size:14.5px; font-weight:700; line-height:1.3; }
  header .is-menu-open .wnc-has-mega a.wcn-nav-recent__all{ min-height:40px !important; color:#0284c7 !important; font-weight:700 !important; }
}

/* ---- Back button (13 Oct 2026; moved 15 Oct) ----
   At the top of a review / news / guide post, above the photos and title,
   on the content's left edge. Hugh liked what it does but not where it was
   (under the logo, which needs its space), so it left the header. A smaller
   version of the menu pills. */
.wnc-back{
  display:flex; width:100%;
  max-width:min(1100px, 124vh) !important; /* the photo carousel's own width, so the pill lines up with it */
  margin:0 auto 14px !important; box-sizing:border-box;
}
.wnc-back__link{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 14px;
  background:#ffffff; border:1px solid #dbe3ec; border-radius:999px;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  color:#0f172a !important; font-size:13.5px; font-weight:600; line-height:1; text-decoration:none !important;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wnc-back__link:hover,
.wnc-back__link:focus-visible{ background:#f0f9ff; border-color:#0284c7; color:#0284c7 !important; }
.wnc-back__link:focus-visible{ outline:2.5px solid #0ea5e9; outline-offset:3px; }

/* ---- Top Picks: award marks as column headings (13 Oct 2026; Photo finish marks 19 Oct) ---- */
header .wnc-has-mega .wcn-nav-award{ margin:0 0 10px !important; padding:0 0 12px !important; border-bottom:1px solid #e5e7eb; }
header .wnc-has-mega a.wcn-nav-award__link{ display:inline-block !important; padding:0 !important; margin:0 !important; border-radius:6px !important; }
header .wnc-has-mega a.wcn-nav-award__link:hover{ background:transparent !important; }
header .wnc-has-mega a.wcn-nav-award__link:hover .wnc-mark__txt b{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1023px){
  header .is-menu-open .wnc-has-mega .wcn-nav-award{ margin:14px 8px 4px !important; padding:0 !important; border:0; }
}

/* ---- Footer tagline on one line (15 Oct 2026, Hugh) ---- */
footer .wp-block-site-tagline{ white-space:nowrap; font-size:clamp(12px, 3.9vw, 15px) !important; }

/* ---- Phone / tablet menu: the expand control as a real button (18 Oct 2026) ----
   Hugh: the small chevron did not say "tap me to see more". It is now a boxed
   button like the hamburger, with a plus that turns into a minus when open. */
@media (max-width:1023.98px){
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle{
    width:40px !important; height:40px !important; flex:0 0 40px;
    background:#ffffff !important; border:1px solid #dbe3ec !important; border-radius:10px !important;
    box-shadow:0 1px 2px rgba(15,23,42,.06); color:#0f172a; position:relative;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle svg{ display:none !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle::before,
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle::after{
    content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px;
    background:currentColor; border-radius:2px; transition:transform .2s ease;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle::after{ transform:rotate(90deg); }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child.wnc-open > .wp-block-navigation-submenu__toggle::after{ transform:rotate(0deg); }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child.wnc-open > .wp-block-navigation-submenu__toggle{
    background:#f0f9ff !important; border-color:#0284c7 !important; color:#0284c7;
  }
}

/* ---- Phone / tablet menu: the section name opens it too (18 Oct 2026) ----
   Collins: tapping "Top Picks" went straight to the Top Picks page, so nobody
   learned there was more under it. The name now opens the section like the
   + button; the section's own page is the first link inside it. */
.wnc-drawer-all{ display:none !important; }
@media (max-width:1023.98px){
  header .wp-block-navigation__responsive-container.is-menu-open .wnc-drawer-all{ display:block !important; padding:6px 12px 2px !important; }
  header .wp-block-navigation__responsive-container.is-menu-open a.wnc-drawer-all__link{
    display:inline-flex !important; align-items:center; gap:6px; min-height:40px;
    color:#0284c7 !important; font-weight:700 !important; font-size:15px; text-decoration:none;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content{ cursor:pointer; }
}

/* ---- Phone / tablet menu as buttons (20 Oct 2026) ----
   Hugh, 20 Oct call: in portrait the menu was light blue with black text, and
   Latest News, Motoring Guides and About read as plain text, not things to
   tap. Each item is now a white button like the landscape pills he likes,
   each with a control on the right: + / − for the two that open, an arrow for
   the ones that go straight to a page. The page you are on is outlined blue. */
@media (max-width:1023.98px){
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content{ padding:0 14px 28px !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{ gap:10px !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item{
    background:#ffffff !important; border:1px solid #dbe3ec; border-radius:14px;
    box-shadow:0 2px 6px rgba(15,23,42,.07); padding:5px 5px 5px 0 !important; box-sizing:border-box;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
    min-height:44px; padding:0 14px 0 16px !important; font-size:17px; font-weight:700; color:#0f172a;
    box-sizing:border-box; background:transparent !important; text-decoration:none !important;
  }
  /* the arrow on the items that go straight to a page */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content{
    justify-content:space-between; padding-right:0 !important;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content::after{
    content:"→"; flex:0 0 40px; height:40px; display:grid; place-items:center;
    border-radius:10px; background:#eef6fd; color:#0284c7; font-size:18px; font-weight:700;
  }
  /* + / − sits inside the button, light blue; filled blue when open */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle{
    background:#eef6fd !important; border:0 !important; box-shadow:none; color:#0284c7; margin:0 !important;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child.wnc-open > .wp-block-navigation-submenu__toggle{
    background:#0284c7 !important; color:#ffffff;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child.wnc-open{ border-color:#0284c7; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container{ padding:0 0 0 5px !important; }
  /* the page you are on */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-item,
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-ancestor{ border-color:#0284c7; background:#f0f9ff !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content{ color:#0284c7; }
  @media (hover:hover){
    header .wp-block-navigation__responsive-container.is-menu-open
      .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover{ background:transparent; color:#0284c7; }
  }
}

/* ---- Back button on every page (20 Oct 2026) ----
   Hugh saw it on reviews but not on Top Picks, the award pages and so on. It
   is now under the header on every page except the homepage (functions.php,
   wnc_back_link_html); reviews, news and guides keep theirs above the photos. */
.wnc-back--page{
  max-width:var(--wp--style--global--wide-size, 1200px) !important;
  padding-inline:var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
  margin:0 auto -8px !important;
}

/* ---- Back button inside the page banner (24 Oct 2026, Collins: option A) ----
   On pages with a banner the button sits in the banner's top corner; the copy
   under the header is hidden. Pages with no banner keep that copy. */
body:has(.wnc-back--in-banner) .wnc-back--page{ display:none !important; }
.wnc-ahero, .wcn-abhero, .wcn-brand-banner{ position:relative; }
.wnc-back.wnc-back--in-banner{
  position:absolute; z-index:4; top:18px; left:max(20px, calc(50% - 538px));
  width:auto; max-width:none !important; margin:0 !important;
}
/* the award / Top Picks panel and the About box: top right, clear of the badge and the photo */
.wnc-ahero > .wnc-back--in-banner, .wcn-abhero > .wnc-back--in-banner{ left:auto; right:16px; top:16px; }
@media (max-width:800px){
  /* stacked panels on phones: top left, with room made above the content */
  .wnc-ahero > .wnc-back--in-banner{ right:auto; left:16px; }
  .wnc-ahero:has(> .wnc-back--in-banner) .wnc-ahero__copy{ padding-top:64px; }
  .wcn-abhero > .wnc-back--in-banner{ right:12px; top:12px; }
}
@media (max-width:480px){ .wnc-back.wnc-back--in-banner{ top:14px; left:14px; } }

/* ---- Phones and portrait tablets: search always shown (24 Oct 2026) ----
   Collins: as on the live site, the search bar is always there rather than
   behind a Search button. The logo and menu button share the top row; the
   search runs full width underneath. (The fold-away toggle was removed from
   header.js, so the old .wnc-js rules above no longer apply.) */
@media (max-width:1023.98px){
  header .wnc-hdr__row{ flex-wrap:wrap !important; row-gap:12px !important; }
  header .wnc-hdr__right{ display:contents !important; }
  header .wnc-hdr__right .wp-block-navigation{ margin-left:auto !important; }
  header .wnc-hdr__right .wp-block-search{
    order:3; flex:1 1 100% !important; width:100% !important; max-width:none !important;
    margin:0 !important; position:static !important; display:block !important; padding:0 !important;
  }
  header .wnc-hdr__right .wp-block-search__inside-wrapper{
    display:flex !important; align-items:center; width:100% !important;
    background:#ffffff; border:1px solid #cbd5e1; border-radius:12px; padding:0 4px 0 0 !important;
    box-shadow:0 1px 2px rgba(15,23,42,.06);
  }
  header .wnc-hdr__right .wp-block-search__input{
    flex:1 1 auto; min-height:44px; border:0 !important; background:transparent !important;
    padding:0 14px !important; font-size:16px !important; border-radius:12px; outline:none;
  }
  header .wnc-hdr__right .wp-block-search__inside-wrapper:focus-within{ border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,.18); }
  /* the magnifier: submits the search, as on live */
  header .wnc-hdr__right .wp-block-search__button{
    display:grid !important; place-items:center; width:40px; height:40px; min-height:0 !important;
    margin:0 !important; padding:0 !important; border:0 !important; border-radius:9px !important;
    background:transparent !important; color:#0f172a !important;
  }
  header .wnc-hdr__right .wp-block-search__button svg{ width:22px; height:22px; fill:currentColor; }
  header .wnc-hdr__right .wp-block-search__button:focus-visible{ outline:2.5px solid #0ea5e9; outline-offset:1px; }
}

/* "Menu" beside the hamburger box (24 Oct 2026). Only where the hamburger
   shows; header.js adds the word. */
.wnc-menu-word{ display:none; }
@media (max-width:1023.98px){
  header .wp-block-navigation:has(.wp-block-navigation__responsive-container-open){ display:flex !important; align-items:center; gap:10px; }
  .wnc-menu-word{ display:inline-block; font-size:16px; font-weight:700; color:#0f172a; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; padding:8px 0; }
  html.has-modal-open .wnc-menu-word{ visibility:hidden; }
}


/* ---- Phone / tablet menu as see-through blue glass (24 Oct 2026) ----
   Hugh liked live's translucent blue menu, where the page shows through;
   Collins chose option A: the whole drawer glass, white text, glass buttons.
   The Recommended / Best Buy badges keep a light backing so they stay
   readable on the blue. Landscape (the desktop bar) is unchanged. */
@media (max-width:1023.98px){
  header .wp-block-navigation__responsive-container.is-menu-open{
    background:linear-gradient(180deg,rgba(64,160,226,.58) 0%,rgba(22,82,140,.66) 100%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25);
    border-left:1px solid rgba(255,255,255,.35); color:#fff !important;
  }
  header .wp-block-navigation__responsive-container-close{ color:#fff !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item{
    background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.38) !important; box-shadow:none !important;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{ color:#fff !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content::after{
    background:rgba(255,255,255,.2); color:#fff;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle{
    background:rgba(255,255,255,.2) !important; color:#fff !important;
  }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child.wnc-open{ border-color:#fff !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .has-child.wnc-open > .wp-block-navigation-submenu__toggle{
    background:#fff !important; color:#0284c7 !important;
  }
  /* the page you are on */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-item,
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-ancestor{ background:rgba(255,255,255,.26) !important; border-color:#fff !important; }
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content{ color:#fff !important; }
  /* the open lists: links, headings, View all, recent reviews */
  header .is-menu-open .wnc-has-mega a,
  header .is-menu-open .wnc-has-mega a *{ color:#fff !important; }
  header .is-menu-open .wnc-has-mega a.wcn-mega-viewall,
  header .is-menu-open .wnc-has-mega a.wcn-nav-recent__all,
  header .wp-block-navigation__responsive-container.is-menu-open a.wnc-drawer-all__link{ color:#fff !important; text-decoration:underline; text-underline-offset:3px; }
  /* sub-headings (By powertrain, By type...) as dark see-through labels, so
     they stand apart from the links (Hugh, 25 Oct 2026) */
  header .is-menu-open .wnc-has-mega .wcn-mega-heading{
    display:inline-block !important; width:auto !important; color:#fff !important;
    background:rgba(6,36,74,.5); border:0 !important; border-radius:999px;
    padding:5px 12px !important; margin:14px 0 6px 10px !important;
    font-size:12px !important; font-weight:800 !important; letter-spacing:.12em !important;
  }
  @media (hover:hover){
    header .is-menu-open .wnc-has-mega a:hover,
    header .wp-block-navigation__responsive-container.is-menu-open
      .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
  }
  /* award badges: a light backing, their own colours */
  header .is-menu-open .wnc-mark{ background:rgba(255,255,255,.9) !important; border-radius:8px; }
  header .is-menu-open .wnc-has-mega a .wnc-mark__txt b{ color:#0f172a !important; }
}

/* ---- Desktop dropdowns as the same blue glass (27 Oct 2026, Collins) ----
   The look of the phone / tablet menu (24-25 Oct): see-through blue, white
   text, sub-headings as dark labels, badges on a light backing. The layout
   of the panels is unchanged. */
@media (min-width:1024px){
  header .wp-block-navigation-item.wnc-has-mega > .wp-block-navigation__submenu-container{
    background:linear-gradient(180deg,rgba(64,160,226,.62) 0%,rgba(22,82,140,.72) 100%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25);
    border-color:rgba(255,255,255,.35) !important;
    box-shadow:0 22px 44px rgba(10,40,80,.28) !important;
  }
  header .wnc-has-mega .wp-block-navigation__submenu-container a,
  header .wnc-has-mega .wp-block-column .wp-block-navigation-item__content,
  header .wcn-nav-recent__body strong{ color:#fff !important; }
  header .wnc-has-mega .wp-block-column .wp-block-navigation-item__content:hover{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
  header .wnc-has-mega .wcn-nav-recent li a:hover strong{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
  header .wnc-has-mega a.wcn-mega-viewall,
  header .wnc-has-mega a.wcn-nav-recent__all{ color:#fff !important; text-decoration:underline; text-underline-offset:3px; }
  /* sub-headings as dark see-through labels */
  header .wnc-has-mega .wcn-mega-heading{
    display:inline-block !important; color:#fff !important; background:rgba(6,36,74,.5);
    border:0 !important; border-radius:999px; padding:5px 12px !important; margin:0 0 12px !important;
    font-size:11.5px !important; font-weight:800 !important;
  }
  header .wnc-has-mega .wp-block-column:nth-child(4),
  header .wnc-has-mega.wnc-top-picks .wp-block-column:nth-child(2){ border-left-color:rgba(255,255,255,.3) !important; }
  header .wcn-nav-recent li + li a{ border-top-color:rgba(255,255,255,.2) !important; }
  header .wnc-has-mega .wcn-nav-award{ border-bottom-color:rgba(255,255,255,.3) !important; }
  header .wcn-nav-recent__none{ color:rgba(255,255,255,.85) !important; }
  /* award badges keep a light backing and their own colours */
  header .wnc-has-mega .wnc-mark{ background:rgba(255,255,255,.9) !important; border-radius:8px; }
  header .wnc-has-mega a .wnc-mark__txt b{ color:#0f172a !important; }
}