/*
  Nav — refinements only, not a rebuild.

  The parent's floating pill nav is already the right shape for this
  direction (base.css notes it was modeled on the client-approved
  colabs.com.au reference), and main.js already owns its drawer, backdrop,
  Escape handling and scroll lock. Re-implementing any of that here would
  be throwing away working, accessible code to arrive at the same place.

  What this file adds is the scroll transition the parent's nav doesn't
  have: at rest the pills float clear of the page on a generous margin;
  once scrolled they tighten, settle closer to the edge and gain depth, so
  the nav reads as part of the page at the top and as chrome further down.

  No blur, no translucency anywhere — the no-glassmorphism constraint.
*/

.theme-meridian .nav{
  padding-top:var(--s-5);
  transition:padding-top var(--dur-mid) var(--ease-out);
}
.theme-meridian .nav.is-scrolled{padding-top:var(--s-2);}

.theme-meridian .nav-brand-pill,
.theme-meridian .nav-pill{
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.theme-meridian .nav.is-scrolled .nav-brand-pill,
.theme-meridian .nav.is-scrolled .nav-pill{box-shadow:var(--shadow);}

.theme-meridian .nav-brand-text strong{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
}
.theme-meridian .nav-brand-text span{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;
  color:var(--accent-2);
}

.theme-meridian .nav-links a{
  font-size:var(--t-sm);font-weight:500;letter-spacing:-.003em;
}
.theme-meridian .nav-pill-cta{
  background:var(--accent-2);color:var(--accent-dark);font-weight:700;
  font-size:var(--t-sm);
}
.theme-meridian .nav-pill-cta:hover{
  background:var(--surface);color:var(--accent-dark);filter:none;
}

/* Dropdowns pick up this theme's softer radius and hairline. */
.theme-meridian .nav-dropdown{
  border-radius:var(--radius-md);border-color:var(--line);
  box-shadow:var(--shadow);padding:var(--s-2);
}
.theme-meridian .nav-dropdown a{border-radius:var(--radius-sm);font-size:var(--t-sm);}
.theme-meridian .nav-dropdown a:hover{background:var(--accent-tint);color:var(--accent);}

/* Drawer: display type at drawer scale, matching the theme's headings. */
.theme-meridian .nav-drawer-eyebrow{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;
  font-weight:500;color:var(--accent-2);
}
@media (max-width:1300px){
  .theme-meridian .nav-links a{
    font-family:var(--font-display);font-size:clamp(1.4rem,5vw,1.9rem);
    font-weight:600;letter-spacing:-.02em;
  }
}

/* Back-to-top adopts the theme's arrow affordance. */
.theme-meridian .totop{
  background:var(--accent-dark);color:var(--panel-dark-text);
  border-radius:50%;box-shadow:var(--shadow-sm);
}
.theme-meridian .totop:hover{background:var(--accent);}

/* ---------- Social cluster ----------
   Two placements of the same markup, as in the approved reference: inside
   the nav capsule on desktop, and on its own tab beside the toggle on
   mobile so the accounts stay reachable with the menu shut. */
.m-social{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:var(--s-2);
}
.m-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:var(--nav-text);opacity:.8;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.m-social svg{width:17px;height:17px;display:block;}
.m-social a:hover{
  opacity:1;color:var(--accent-2);
  background:rgba(236,239,230,.12);transform:translateY(-1px);
}

/* Inside the capsule: a hairline separates them from the links. */
.m-social-nav{
  flex:none;
  padding-left:var(--s-4);margin-left:var(--s-2);
  border-left:1px solid rgba(236,239,230,.2);
}

/* The mobile tab is hidden until the drawer breakpoint. */
.m-social-tab{display:none;}

@media (prefers-reduced-motion: reduce){
  .m-social a:hover{transform:none;}
}

/* ---------- Drawer search ----------
   Hidden on desktop: the capsule has no room for it and the reference only
   shows search inside the open mobile panel. */
.m-nav-search{display:none;}

/* ==========================================================================
   MOBILE MENU — full-screen panel
   ==========================================================================
   Modeled on the approved reference's mobile menu: the drawer is not a
   dropdown but a full-height coloured panel that takes over the viewport,
   with a welcome line, large display links separated by hairlines, and a
   chevron on anything that expands. The top bar stays put throughout — the
   brand on the left and the toggle, now reading "Close", on the right.

   The colour is SREF's own gold (--accent-2) over ink, not the reference's
   chartreuse. main.js still owns open/close, Escape, the backdrop and the
   scroll lock; everything here is appearance.
*/
@media (max-width:1300px){
  /* Measured on colabs.com.au at 414px with the menu open:
       panel   x=10 y=60 w=394, radius 30px 0 30px 30px, no shadow
       close   70x39, radius 20px, cream fill + 2px black border
       socials border goes transparent while open
       links   32px, separated by 1px rgba(0,0,0,.5)

     Two things this gets right that the previous version did not: the
     panel sits BELOW the persistent bar rather than starting behind it
     (which is why it needed ~90px of top padding to clear it), and its
     top-right corner is squared — that is the notch the socials tab tucks
     into, and it is what makes the tab read as attached to the panel. */
  .theme-meridian .nav-pill{
    /* --sref-bar-bottom is the real bottom edge of the persistent bar,
       including the WordPress admin bar when an editor is logged in.
       Without the admin-bar term the panel stayed pinned to the viewport
       while the page shifted down under it, so the panel's top edge cut
       straight through the Close button — visible to every logged-in
       editor and invisible when testing logged out. */
    --sref-admin-bar: 0px;
    --sref-bar-bottom: calc(68px + var(--sref-admin-bar));
    top:var(--sref-bar-bottom);left:14px;right:14px;
    max-height:calc(100dvh - var(--sref-bar-bottom) - var(--s-4));
    height:auto;
    background:var(--accent-2);
    border-radius:var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
    padding:var(--s-6) clamp(var(--s-5), 5vw, var(--s-6)) var(--s-7);
    box-shadow:none;
    display:flex;flex-direction:column;
  }

  .theme-meridian .nav-drawer-eyebrow{
    text-align:center;color:var(--accent-dark);opacity:1;
    padding-top:0;margin-bottom:var(--s-5);
    font-family:var(--font-body);font-weight:700;
    font-size:var(--t-sm);letter-spacing:0;text-transform:none;
  }

  .theme-meridian .nav-links{
    display:block;border-top:1px solid rgba(15,35,27,.5);
  }
  .theme-meridian .nav-links a{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
    /* Ink at 82% rather than --accent-2-deep: the current page has to read
       as MORE prominent than its siblings, and gold-on-gold was making the
       active link the faintest item in the list. */
    color:rgba(15,35,27,.82);opacity:1;
    font-family:var(--font-display);
    /* 32px at 414px, matching the reference's measured size. */
    font-size:clamp(1.6rem, 7.7vw, 2.2rem);
    font-weight:600;letter-spacing:-.025em;line-height:1.1;
    padding:var(--s-4) 0;
    border-bottom:1px solid rgba(15,35,27,.5);
  }
  .theme-meridian .nav-links a:hover,
  .theme-meridian .nav-links a.active{color:var(--accent-dark);}
  /* A solid marker for the current page, since colour alone is a weak cue
     at this size and carries no meaning for anyone not seeing it. */
  .theme-meridian .nav-links > .nav-links a.active::after,
  .theme-meridian .nav-links > a.active::after,
  .theme-meridian .nav-links > ul > li > a.active::after{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--accent-dark);flex:none;
  }

  /* The chevron is the affordance for an expandable item, so it is shown
     here rather than hidden as base.css does at this width. */
  .theme-meridian .nav-item > a .caret{
    display:block;width:14px;height:14px;flex:none;opacity:.6;
  }

  /* Sub-items: indented, body font, quieter — clearly a level down from the
     display-type parents rather than competing with them. */
  .theme-meridian .nav-dropdown{
    position:static;transform:none;opacity:1;visibility:visible;
    background:transparent;border:0;box-shadow:none;border-radius:0;
    padding:var(--s-2) 0 var(--s-4);
  }
  .theme-meridian .nav-dropdown li{border:0;}
  .theme-meridian .nav-dropdown a{
    font-family:var(--font-body);font-size:var(--t-body);font-weight:500;
    color:rgba(15,35,27,.72);padding:var(--s-3) 0 var(--s-3) var(--s-5);
    border-bottom:0;justify-content:flex-start;
  }
  .theme-meridian .nav-dropdown a::before{
    content:"";width:var(--s-4);height:1px;background:currentColor;
    opacity:.4;margin-right:var(--s-3);flex:none;
  }
  .theme-meridian .nav-dropdown a:hover{color:var(--accent-dark);background:none;}

  .theme-meridian .nav-pill-cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:var(--s-6);padding:var(--s-5);
    background:var(--accent-dark);color:var(--panel-dark-text);
    font-size:var(--t-body);font-weight:700;
  }
  .theme-meridian .nav-pill-cta:hover{background:var(--accent);color:#fff;}

  /* Brand and toggle both stay above the panel: the top bar persists while
     the menu is open, which is how the reference behaves and what keeps the
     visitor oriented. */
  .theme-meridian .nav-brand-pill{position:relative;z-index:95;}
  .theme-meridian .nav.open .nav-brand-pill{background:var(--accent-dark);}
  .theme-meridian .nav-toggle{z-index:95;}
  .theme-meridian .nav.open .nav-toggle{
    background:var(--accent-dark);color:var(--panel-dark-text);
  }

  .theme-meridian .nav-backdrop{background:rgba(15,35,27,.55);}
}

/* The mobile sub-menu toggle stays in the DOM at every width (nav.js only
   tears down its behaviour, not the element), so it must be hidden
   explicitly outside the mobile query — otherwise it renders as a bare,
   unstyled 16px button inside the desktop nav pill. */
.m-nav-expand{display:none;}

/* ---------- Collapsible sub-menus (mobile) ----------
   Scoped to .js-nav-collapsible, which assets/js/nav.js adds. Without that
   class nothing here applies and every sub-menu stays open — so a script
   failure degrades to the previous, still-usable behaviour rather than to
   a menu whose sections cannot be opened. */
@media (max-width:1300px){
  /* The chevron inside the link is decorative once a real button exists
     next to it; two chevrons on one row would be nonsense. */
  .theme-meridian .js-nav-collapsible .nav-item > a .caret{display:none;}

  .theme-meridian .js-nav-collapsible .nav-links a{
    justify-content:flex-start;
  }
  /* The section link and its toggle share one row, hairline underneath. */
  .theme-meridian .js-nav-collapsible .nav-item,
  .theme-meridian .js-nav-collapsible li.menu-item-has-children{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .theme-meridian .js-nav-collapsible .nav-item > a,
  .theme-meridian .js-nav-collapsible li.menu-item-has-children > a{
    border-bottom:0;
  }
  .theme-meridian .js-nav-collapsible .nav-item,
  .theme-meridian .js-nav-collapsible li.menu-item-has-children{
    border-bottom:1px solid rgba(15,35,27,.18);
  }

  /* A plain chevron, as in the reference — the bordered circle that was
     here read as a second button competing with the link beside it. The
     44px tap target is kept; only the visible chrome is dropped. */
  .m-nav-expand{
    grid-column:2;
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    background:transparent;border:0;border-radius:0;
    color:var(--accent-dark);cursor:pointer;padding:0;
  }
  .m-nav-expand svg{width:20px;height:20px;transition:transform var(--dur-mid) var(--ease-out);}
  .m-nav-expand:hover{color:var(--accent-2-deep);}
  .is-open > .m-nav-expand svg{transform:rotate(180deg);}

  .theme-meridian .js-nav-collapsible .nav-dropdown,
  .theme-meridian .js-nav-collapsible .sub-menu{
    grid-column:1 / -1;
    max-height:0;overflow:hidden;padding:0;
    transition:max-height var(--dur-mid) var(--ease-out);
  }
  .theme-meridian .js-nav-collapsible .is-open > .nav-dropdown,
  .theme-meridian .js-nav-collapsible .is-open > .sub-menu{
    padding:var(--s-2) 0 var(--s-4);
  }

  @media (prefers-reduced-motion: reduce){
    .theme-meridian .js-nav-collapsible .nav-dropdown,
    .theme-meridian .js-nav-collapsible .sub-menu,
    .m-nav-expand svg{transition:none;}
  }
}

/* ---------- Social tab + drawer search (mobile) ---------- */
@media (max-width:1300px){
  /* Socials leave the capsule and become their own pill in the top bar. */
  .theme-meridian .m-social-nav{display:none;}

  .theme-meridian .m-social-tab{
    display:flex;flex:none;position:relative;z-index:95;
    background:var(--nav-bg);border-radius:999px;
    padding:var(--s-2) var(--s-3);gap:var(--s-1);
    box-shadow:var(--shadow-sm);
  }
  .theme-meridian .m-social-tab a{width:30px;height:30px;}
  .theme-meridian .m-social-tab svg{width:15px;height:15px;}
  /* Against the gold panel the tab inverts, matching the brand pill. */
  .theme-meridian .nav.open .m-social-tab{background:var(--accent-dark);}

  .theme-meridian .m-nav-search{
    display:flex;align-items:center;gap:var(--s-2);
    background:rgba(255,255,255,.55);
    border-radius:999px;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-5);
    margin-bottom:var(--s-6);
  }
  .theme-meridian .m-nav-search input{
    flex:1;min-width:0;border:0;background:transparent;
    font-family:var(--font-body);font-size:var(--t-body);
    color:var(--accent-dark);padding:var(--s-2) 0;
  }
  .theme-meridian .m-nav-search input::placeholder{color:rgba(15,35,27,.5);}
  .theme-meridian .m-nav-search input:focus{outline:none;}
  .theme-meridian .m-nav-search button{
    flex:none;width:38px;height:38px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--bg);border:0;color:var(--accent-dark);cursor:pointer;
    transition:background var(--dur-fast) var(--ease-out);
  }
  .theme-meridian .m-nav-search button:hover{background:var(--accent-dark);color:var(--accent-2);}
  .theme-meridian .m-nav-search button svg{width:16px;height:16px;}
}

/* Very narrow phones: the brand shrinks so bar + tab + toggle still fit. */
@media (max-width:460px){
  .theme-meridian .m-social-tab{padding:var(--s-1) var(--s-2);}
  .theme-meridian .m-social-tab a{width:26px;height:26px;}
  .theme-meridian .m-social-tab svg{width:13px;height:13px;}
  .theme-meridian .nav .wrap{gap:var(--s-2);}
}

/* ==========================================================================
   MEGA MENU (desktop only)
   ==========================================================================
   A wide rounded panel under the nav: link column with descriptions on the
   left, photo tiles and a feature card on the right. Scoped above the
   drawer breakpoint — below it the accordion in the mobile panel takes
   over, and every rule here is off.
*/
@media (min-width:1301px){

  /* The panel escapes the nav pill and centres on the viewport, so it can
     be far wider than the capsule it hangs from. */
  .theme-meridian .nav-item.has-mega{position:static;}
  .theme-meridian .nav .wrap{position:relative;}

  .theme-meridian .nav-dropdown.m-mega{
    position:absolute;
    top:calc(100% + var(--s-4));
    left:50%;transform:translateX(-50%) translateY(6px);
    /* Tracks the container rather than a fixed 1180: with no max-width on
       the page, a fixed panel looked narrow on a large screen. */
    width:min(1320px, calc(100vw - var(--gutter) * 2));
    max-width:none;min-width:0;
    padding:0;overflow:hidden;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
  }
  .theme-meridian .nav-item.has-mega:hover .nav-dropdown.m-mega,
  .theme-meridian .nav-item.has-mega:focus-within .nav-dropdown.m-mega{
    transform:translateX(-50%) translateY(0);
  }

  /* base.css sets .nav-links a{white-space:nowrap} so the top-level nav
     never wraps mid-item. Inside a mega panel that is exactly wrong — it
     pushed the feature card's heading and body straight out through the
     card's right edge and onto the page behind it. Everything in the panel
     is prose and must wrap. */
  .theme-meridian .m-mega,
  .theme-meridian .m-mega a,
  .theme-meridian .m-mega a *{white-space:normal;}

  .m-mega-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(var(--s-6), 3vw, var(--s-8));
    padding:clamp(var(--s-6), 2.6vw, var(--s-7));
    align-items:stretch;
  }

  /* ---------- Link column ---------- */
  .m-mega-links{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;
  }
  .m-mega-links li{margin:0;border:0;}
  .theme-meridian .m-mega-links a{
    display:block;padding:var(--s-4) var(--s-4);
    border-radius:var(--radius-sm);border:0;
    color:var(--ink);opacity:1;font-size:inherit;
    transition:background var(--dur-fast) var(--ease-out);
  }
  .theme-meridian .m-mega-links a:hover,
  .theme-meridian .m-mega-links a:focus-visible{
    background:var(--accent-tint);color:var(--ink);
  }
  .theme-meridian .m-mega-links a strong{
    display:block;font-family:var(--font-display);font-weight:600;
    font-size:var(--t-h4);letter-spacing:-.015em;line-height:1.25;
    color:var(--ink);
  }
  .theme-meridian .m-mega-links a span{
    display:block;margin-top:3px;
    font-family:var(--font-body);font-size:var(--t-sm);font-weight:400;
    line-height:1.5;color:var(--ink-soft);letter-spacing:0;
    text-transform:none;
  }
  .theme-meridian .m-mega-links a:hover span{color:var(--ink-soft);}

  /* ---------- Right side ---------- */
  .m-mega-aside{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, .62fr)) minmax(0, 1.5fr);
    gap:var(--s-4);
    align-items:stretch;
    /* Fills the panel rather than floating at the top of it — the link
       column is six items tall and the aside was leaving ~340px of empty
       green below itself. */
    height:100%;
  }
  .m-mega-photo{
    border-radius:var(--radius-md);overflow:hidden;
    background:var(--surface-2);min-height:230px;
  }
  .m-mega-photo img{
    width:100%;height:100%;object-fit:cover;object-position:center 25%;
    display:block;
  }

  /* .theme-meridian prefix and the .m-mega scope are both needed: base.css
     sets .nav-dropdown a{display:block} at the same specificity as a bare
     .m-mega-feature would have, and won — which collapsed this card's
     children onto one line, printing the eyebrow through the heading. */
  .theme-meridian .m-mega .m-mega-feature{
    display:flex;flex-direction:column;gap:var(--s-2);
    padding:var(--s-5);border-radius:var(--radius-md);
    background:var(--accent-dark);color:var(--panel-dark-text);
    text-decoration:none;opacity:1;
    transition:background var(--dur-fast) var(--ease-out);
  }
  .theme-meridian .m-mega .m-mega-feature:hover{background:var(--accent);}
  /* Each part on its own line, for the same reason. */
  .theme-meridian .m-mega-feature > *{display:block;width:100%;}
  .m-mega-eyebrow{
    font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);
  }
  .m-mega-feature strong{
    font-family:var(--font-display);font-weight:600;
    font-size:1.15rem;line-height:1.2;letter-spacing:-.018em;
    color:var(--panel-dark-text);
  }
  .m-mega-text{
    font-size:var(--t-sm);line-height:1.5;
    color:var(--panel-dark-text-soft);
  }
  .m-mega-cta{
    margin-top:auto;padding-top:var(--s-4);
    font-family:var(--font-mono);font-size:var(--t-mono);
    letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);
  }

  /* The open section reads as active, like the reference's dark pill. */
  .theme-meridian .nav-item.has-mega:hover > a,
  .theme-meridian .nav-item.has-mega:focus-within > a{
    color:var(--accent-2);
  }

  @media (prefers-reduced-motion: reduce){
    .theme-meridian .nav-dropdown.m-mega{transition:none;transform:translateX(-50%);}
  }
}

/* Below the mega breakpoint the panel must behave like the old dropdown
   inside the drawer — the accordion styling already handles it, this only
   strips the desktop-specific grid. */
@media (max-width:1300px){
  .m-mega-inner{display:block;padding:0;}
  .m-mega-aside{display:none;}
  .theme-meridian .m-mega-links{display:flex;flex-direction:column;}
  .theme-meridian .m-mega-links a strong{
    display:inline;font-family:var(--font-body);font-size:var(--t-body);
    font-weight:500;color:inherit;
  }
  .theme-meridian .m-mega-links a span{display:none;}
}

/* ==========================================================================
   DESKTOP SEARCH
   ==========================================================================
   Measured off the approved reference at 1500px: a 40x40 circle sitting at
   the far right of the header, outside the nav capsule, which opens into an
   inline field. Hidden below the drawer breakpoint, where the mobile panel
   carries its own search instead.
*/
.m-navsearch{display:none;}

@media (min-width:1301px){
  .m-navsearch{
    display:block;flex:none;margin-left:var(--s-3);
  }
  .m-navsearch form{
    display:flex;align-items:center;justify-content:flex-end;
    background:var(--nav-bg);
    border-radius:999px;
    box-shadow:var(--shadow-sm);
    /* Collapsed: exactly the circle. The field is inside but zero-width. */
    width:48px;height:48px;padding:4px;
    transition:width var(--dur-mid) var(--ease-out);
    overflow:hidden;
  }
  .m-navsearch.is-open form{width:clamp(240px, 22vw, 320px);}

  /* Focus moves to the PILL, not the input inside it.
     The theme's global :focus-visible ring is a 2px --accent rectangle with
     a 3px offset. On this control that drew a green rectangle *inside* a
     rounded dark pill — the wrong shape, and deep green barely reads on the
     dark nav. Indicating focus on the container instead keeps the ring
     visible for keyboard users (it must stay) while following the pill's
     shape and using the gold that the rest of the nav already uses against
     this background. */
  .m-navsearch form:focus-within{
    outline:2px solid var(--accent-2);
    outline-offset:2px;
  }

  .m-navsearch input{
    flex:1;min-width:0;width:0;
    border:0;background:transparent;
    font-family:var(--font-body);font-size:var(--t-sm);
    color:var(--nav-text);
    padding:0;margin:0;
    opacity:0;
    transition:opacity var(--dur-fast) var(--ease-out), padding var(--dur-mid) var(--ease-out);
  }
  .m-navsearch.is-open input{
    opacity:1;padding:0 var(--s-3) 0 var(--s-5);
  }
  .m-navsearch input::placeholder{color:rgba(236,239,230,.55);}
  /* Chrome/Safari draw a clear button that breaks the pill's alignment. */
  .m-navsearch input::-webkit-search-cancel-button{display:none;}

  .m-navsearch-toggle{
    flex:none;width:40px;height:40px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:0;cursor:pointer;padding:0;
    color:var(--nav-text);
    transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .m-navsearch-toggle svg{width:17px;height:17px;}
  .m-navsearch-toggle:hover{background:rgba(236,239,230,.12);color:var(--accent-2);}
  /* The pill shows focus for the whole control, so neither the input nor
     the button inside it should draw a second, differently-shaped ring.
     These need .theme-meridian on the front: the global rule is
     `.theme-meridian :focus-visible` (0,2,0), which out-specifies a plain
     `.m-navsearch input` (0,1,1) — which is why the green rectangle was
     still showing after the first attempt at this. */
  .theme-meridian .m-navsearch input:focus,
  .theme-meridian .m-navsearch input:focus-visible,
  .theme-meridian .m-navsearch-toggle:focus-visible{outline:none;}
  .m-navsearch.is-open .m-navsearch-toggle{background:var(--accent-2);color:var(--accent-dark);}

  @media (prefers-reduced-motion: reduce){
    .m-navsearch form,
    .m-navsearch input{transition:none;}
  }
}

/* ==========================================================================
   MOBILE HEADER — matching the reference's arrangement
   ==========================================================================
   Measured at 414px on colabs.com.au:
     brand   plain logo, no pill, 10px from the edge
     Menu    filled pill in the brand colour, 20px radius
     socials OUTLINED pill, transparent, 2px border, to the RIGHT of Menu

   Ours previously wrapped the brand in a dark pill, filled the socials
   solid, and placed them before the Menu button.
*/
@media (max-width:1300px){
  /* Edge margins, measured against the reference.
     base.css puts 24px of horizontal padding on .nav, and the .wrap inside
     adds another --gutter (20px) on top — so the bar was inset 44px each
     side while the reference sits at 10px. Dropping the outer padding and
     tightening the wrap's own gutter brings the bar out to the viewport
     edge the way the reference does, without touching the page gutter that
     every section below relies on. */
  .theme-meridian .nav{padding-inline:0;}
  .theme-meridian .nav .wrap{
    padding-inline:14px;
    max-width:none;
    gap:var(--s-3);
  }

  /* Brand loses its pill — it sits directly on the page like the reference. */
  .theme-meridian .nav-brand-pill{
    background:transparent;
    box-shadow:none;
    padding:0;
    gap:var(--s-3);
  }
  .theme-meridian .nav-brand-pill img{height:44px;width:44px;}
  .theme-meridian .nav-brand-text strong{color:var(--ink);}
  .theme-meridian .nav-brand-text span{color:var(--ink-soft);}
  /* While the gold panel is open the bar sits on gold, so the brand and the
     toggle both invert to stay legible. */
  .theme-meridian .nav.open .nav-brand-text strong{color:var(--accent-dark);}
  .theme-meridian .nav.open .nav-brand-text span{color:var(--accent-2-deep);}
  .theme-meridian .nav.open .nav-brand-pill{background:transparent;}

  /* Menu: filled brand pill, as in the reference. */
  .theme-meridian .nav-toggle{
    order:2;
    background:var(--accent-2);
    color:var(--accent-dark);
    border-radius:20px;
    padding:10px 18px;
    box-shadow:none;
    font-weight:700;
  }
  /* Open state inverts to an outlined cream pill, as the reference does:
     it reads as "you are in the menu" rather than as a second primary
     action competing with the panel behind it. */
  .theme-meridian .nav.open .nav-toggle{
    background:var(--bg);
    color:var(--ink);
    border:2px solid var(--ink);
    padding:8px 16px;
  }

  /* Socials: outlined, transparent, after the Menu button. */
  .theme-meridian .m-social-tab{
    order:3;
    background:transparent;
    border:2px solid var(--ink);
    border-radius:30px;
    box-shadow:none;
    padding:4px 10px;
    gap:var(--s-2);
  }
  .theme-meridian .m-social-tab a{color:var(--ink);opacity:1;width:28px;height:28px;}
  .theme-meridian .m-social-tab a:hover{background:var(--ink-wash);color:var(--accent);}
  /* Border goes transparent while open (measured), and the tab takes the
     panel's colour so it reads as part of the panel's top edge rather than
     a floating outline above it. */
  .theme-meridian .nav.open .m-social-tab{
    border-color:transparent;
    background:var(--accent-2);
    border-radius:var(--radius-md) var(--radius-md) 0 0;
  }
  .theme-meridian .nav.open .m-social-tab a{color:var(--accent-dark);}

  /* The drawer panel must sit under the persistent bar. */
  .theme-meridian .nav-brand-pill,
  .theme-meridian .nav-toggle,
  .theme-meridian .m-social-tab{position:relative;z-index:95;}
}

@media (max-width:460px){
  .theme-meridian .nav-brand-pill img{height:38px;width:38px;}
  .theme-meridian .nav-toggle{padding:9px 14px;font-size:.78rem;}
  .theme-meridian .m-social-tab{padding:3px 8px;}
  .theme-meridian .m-social-tab a{width:26px;height:26px;}
}


/* WordPress admin bar: 46px at <=782px, 32px above that, and absent for
   logged-out visitors. body.admin-bar is added by core only when it is
   actually rendered, so this never applies to the public site. */
@media (max-width:1300px){
  body.admin-bar .theme-meridian .nav-pill,
  body.admin-bar.theme-meridian .nav-pill{--sref-admin-bar:46px;}
}
@media (max-width:1300px) and (min-width:783px){
  body.admin-bar .theme-meridian .nav-pill,
  body.admin-bar.theme-meridian .nav-pill{--sref-admin-bar:32px;}
}