/**
 * Page Submenu — child theme overrides.
 *
 * Loaded with nectar-element-page-submenu as its dependency, so it always
 * follows the parent's element CSS. Several rules below only *tie* the
 * parent's specificity and win on cascade order — that dependency is what
 * makes them apply. See inc/page-submenu.php.
 *
 * Colour-dependent parts avoid color-mix(currentColor …) — it resolves to
 * transparent on some engines, silently dropping the colour — and instead
 * expose CSS variables (--nt-psm-pill, --nt-psm-pill-hover, --nt-psm-btn-bg,
 * --nt-psm-divider) so a dark-background submenu (data-bg-color) can override
 * them per instance.
 */

/* ---------- All widths ---------- */

/* 0.7 puts #07495F on white at ~4.4:1, below the 4.5 floor. 0.85 is ~6.6:1. */
body .page-submenu li a                 { opacity: .85; }
body .page-submenu li a:hover           { opacity: 1; }

/* The parent scoped the current-item highlight to .stuck and styled it
   identically to :hover. Dropping the scope makes it work unpinned. The
   desktop/mobile blocks below add the actual current-section indicator (a pill
   on desktop, an inline-start marker on mobile) — no font-weight change, which
   is what used to widen the item and shift its neighbours during scroll. */
body .page-submenu .current-menu-item a { opacity: 1; }

/* Shadow only once pinned — flat while the bar sits in the page. */
.page-submenu               { transition: box-shadow .3s ease; }
.page-submenu.stuck         { box-shadow: 0 6px 16px rgba(0, 0, 0, .13); }

.nt-psm-label               { display: none; }

/* ---------- Desktop ---------- */
@media only screen and (min-width: 1000px) {

  /* inline-block, not flex: the element's data-alignment left/center/right is
     implemented as text-align, which flex would break — it would need
     justify-content mapping for three values across two container variants. */
  .nt-psm-label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 18px;
    font-weight: 700;
    color: inherit;
  }

  body .page-submenu ul {
    display: inline-block !important;   /* parent sets display:block !important */
    vertical-align: middle;
    width: auto;
    /* The pills are shorter than the row; this restores the ~66px bar height
       the parent got from the links' 20px vertical padding. Pad the <ul>, not
       the container — the parent sets the container's padding with a shorthand
       (0 90px) that would zero any vertical value we put there. */
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Current section = a filled pill, replacing bold + underline. The pill is
     only a background (+ a box-shadow ring), so the text box never changes size
     and links no longer reflow as the current section moves during scroll (the
     old bold widened the item ~5px and nudged its neighbours). Solid colours,
     not a currentColor tint: color-mix() with currentColor resolves to
     transparent on some engines, which silently dropped the pill. Exposed as
     variables so a dark-background submenu can override them per instance.

     Both fills clear WCAG AAA (7:1) against #07495F text: current #d0e3e7 is
     7.44:1, hover #e4eef0 is 8.36:1. A darker, more prominent current fill
     would drop below 7:1, so prominence comes from the accent ring instead —
     drawn with box-shadow, not border, so it adds no width (no reflow) and
     follows the pill's radius. */
  body .page-submenu[data-nt-psm] li a {
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 26px;
    transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  body .page-submenu[data-nt-psm] li { margin-right: 6px; }

  body .page-submenu[data-nt-psm] li a:hover {
    opacity: 1;
    background: var(--nt-psm-pill-hover, #e4eef0);
  }
  /* Higher specificity than :hover, so the current pill (fill + ring) wins even
     while the pointer is over it. */
  body .page-submenu[data-nt-psm] .current-menu-item a {
    opacity: 1;
    background: var(--nt-psm-pill, #d0e3e7);
    box-shadow: 0 0 0 1px var(--nectar-accent-color, #00677f);
  }
  /* With bold/underline gone, focus is the only non-pointer affordance left. */
  body .page-submenu[data-nt-psm] li a:focus-visible {
    outline: 2px solid var(--nectar-accent-color, #00677f);
    outline-offset: 2px;
  }
}

/* ---------- Mobile ---------- */
@media only screen and (min-width: 1px) and (max-width: 999px) {

  /* Not sticky on phones. Override the parent's fixed positioning back to the
     normal flow so the bar scrolls away with the page. The .sticky-wrapper
     reserves exactly the bar's height, so there is no leftover gap. Salient
     still toggles .stuck on scroll; we just neutralise its effect and the
     pinned shadow. !important beats the JS-set inline transform/top. */
  body .page-submenu.stuck {
    position: static !important;
    top: auto !important;
    transform: none !important;
    box-shadow: none !important;
    /* #boxed layouts get a negative inline margin + pixel width on .stuck
       (init.js:19746). Neutralise both so the in-flow bar isn't shifted or
       mis-sized; width:auto on a block nav just fills the container, matching
       the non-boxed case. */
    margin-left: 0 !important;
    width: auto !important;
  }

  /* Solid-filled button so it reads unmistakably as a tappable control — the
     stock toggle was a bare <a href="#"> that looked like body text. Fill is the
     brand teal; the caret inherits currentColor, so it turns white here for
     free. The [data-nt-psm] hook is load-bearing, not decoration: without it
     this is (0,2,1) and loses to the parent's
     .page-submenu[data-bg-color="#fff"] .mobile-menu-link at (0,3,1), which
     would restore the border-left/border-right that `border: 0` strips off. With
     the hook it ties at (0,3,1) and wins on cascade order — deterministic here
     because the stylesheet declares nectar-element-page-submenu as a dependency. */
  body .page-submenu[data-nt-psm] .mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--nt-psm-btn-bg, #07495F);
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-align: left;
    cursor: pointer;
  }
  /* Square the bottom when open so the button and panel read as one shape. */
  body .page-submenu[data-nt-psm] .mobile-menu-link[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .nt-psm-caret {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .mobile-menu-link[aria-expanded="true"] .nt-psm-caret {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  /* Parent hardcoded top:48px (the old button height) and width:101%.
     No position:relative is added — .container is already relative
     (style.css:153-157), as are .full-width-content and
     > .full-width-section (style.css:7560-7565). top:100% therefore lands
     directly below the button, whatever height it ends up. */
  /* Bordered panel that connects under the button: matching teal border, no
     top edge (the button is the top), rounded only at the bottom. */
  body .page-submenu[data-nt-psm] ul {
    top: 100%;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--nt-psm-btn-bg, #07495F);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  }

  /* [data-nt-psm] is a specificity hook, not a filter — every rewritten element
     carries it. Without it this rule is (0,1,4) and LOSES to the parent's
     .page-submenu[data-bg-color="#ffffff"] ul li a at (0,2,3), which would
     restore the near-invisible rgba(0,0,0,.08) hairline below. That parent rule
     currently misses only because it matches lowercase and the element emits
     #FFFFFF — one editor re-picking the background colour would silently revert
     this. With the hook the rule is (0,2,4) and wins outright. */
  body .page-submenu[data-nt-psm] ul li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 20px;
    /* Row divider a touch darker than the parent's near-invisible
       rgba(0,0,0,.08). A solid rgba via variable, not color-mix(currentColor …):
       that resolves to transparent on some engines (the same trap that dropped
       the pill) and would erase the divider, since the rgba only guards engines
       with no color-mix support at all. Override --nt-psm-divider for a
       dark-background submenu. */
    border-top: 1px solid var(--nt-psm-divider, rgba(0, 0, 0, .12));
  }

  /* Inline-start, not bottom: a bottom border inside a vertical list reads as
     a row divider, not a current marker. 20px padding less the 3px border. */
  body .page-submenu .current-menu-item a {
    border-inline-start: 3px solid var(--nectar-accent-color, #00677f);
    padding-inline-start: 17px;
  }
}

/* ---------- Standard page-header hero (mobile) ----------
   Converted pages open with the standard header (docs/salient-conversion-guide.md
   §3): a full-width hero row above the submenu carrying class="nt-page-hero" and a
   light 90deg split-gradient (advanced_gradient). Once the hero's two columns
   stack (title below image — Salient stacks columns under 1000px), the split
   reads as an off-white band; force solid white from the stack point down,
   tablet included (decision 2026-08-15; was 767px).

   Selector target confirmed against parent source — salient-core
   includes/vc_templates/vc_row.php. With gradient_type="advanced", Salient prints the
   advanced_gradient via the `background:` shorthand as an INLINE STYLE on a
   `.row-bg-overlay.row-bg-layer` layer inside `.row-bg-wrap` (see that template's row
   color-overlay block: $row_overlay_style .= 'background:'.$advanced_gradient — echoed
   as <div class="row-bg-overlay row-bg-layer" style="...">). It is NOT on `.row-bg`
   (which, with no bg image/colour on the hero, is emitted with an empty style), so the
   override must hit `.row-bg-overlay`; `.row-bg` is kept defensively for any hero that
   also carries a bg image/colour. Inline styles -> !important is required.

   This file already loads on exactly these pages — it ships with the [page_submenu] the
   standard header always contains — and is versioned by THEME_VERSION (= child style.css
   Version), so bumping that header busts this. */
@media only screen and (max-width: 999px) {
  .nt-page-hero .row-bg,
  .nt-page-hero .row-bg-overlay {
    background-image: none !important;
    background-color: #fff !important;
  }
}