/* ==========================================================================
   NavForge — skin flourishes. Colours/fonts come from inline variables;
   this file only adds the per-skin touches the variables can't express.
   ========================================================================== */

/* ---- Atlas : light premium, soft sticky shadow ---- */
.nf-skin-atlas.nf-sticky-sticky { background: color-mix(in srgb, var(--nf-bg) 92%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--nf-border); }
.nf-skin-atlas.nf-scrolled { border-color: transparent; }

/* ---- Sentinel : bold block, thicker underline, darker on scroll ---- */
.nf-skin-sentinel .nf-item > a::after { height: 3px; }
.nf-skin-sentinel.nf-scrolled { background: var(--nf-accent2); }
.nf-skin-sentinel .nf-cta { letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }

/* ---- Meridian : navy executive, serif logo spacing ---- */
.nf-skin-meridian .nf-logo { letter-spacing: .3px; }
.nf-skin-meridian .nf-cta { box-shadow: 0 6px 16px color-mix(in srgb, var(--nf-accent) 35%, transparent); }

/* ---- Vanguard : centered logo, champagne outline CTA ---- */
.nf-skin-vanguard .nf-logo { letter-spacing: 7px; }
.nf-skin-vanguard .nf-item > a { letter-spacing: 1.6px; }
.nf-skin-vanguard .nf-item > a::after { bottom: max(50% - 16px, 22px); height: 1.5px; }
.nf-skin-vanguard .nf-cta { border: 1px solid var(--nf-accent); }
.nf-skin-vanguard .nf-cta:hover { background: var(--nf-accent); color: var(--nf-bg); filter: none; }

/* ---- Beacon : transparent over hero, serif logo ---- */
.nf-skin-beacon .nf-cta { box-shadow: 0 8px 18px color-mix(in srgb, var(--nf-accent) 28%, transparent); }
.nf-skin-beacon.nf-sticky-transparent.nf-scrolled { box-shadow: 0 6px 24px rgba(26, 27, 30, .1); }

/* ---- Cornerstone : two-tier institutional ---- */
.nf-skin-cornerstone .nf-tier .nf-item > a { color: var(--nf-text); }
.nf-skin-cornerstone .nf-tier .nf-item > a:hover,
.nf-skin-cornerstone .nf-tier .nf-item:focus-within > a { color: var(--nf-strong); }
.nf-skin-cornerstone .nf-tier .nf-item > a::after { bottom: 0; inset-inline: 12px; height: 3px; }
.nf-skin-cornerstone .nf-cta { font-weight: 700; }
.nf-skin-cornerstone .nf-top .nf-search input { background: color-mix(in srgb, var(--nf-bg) 6%, #fff); }

/* ---- Apex : enterprise flagship (light bar + dark utility strip + green accent) ---- */
.nf-skin-apex .nf-logo { font-weight: 800; letter-spacing: -.3px; }
.nf-skin-apex .nf-item > a { font-weight: 500; }
.nf-skin-apex .nf-item > a::after { height: 2.5px; }
.nf-skin-apex .nf-cta { box-shadow: 0 8px 18px color-mix(in srgb, var(--nf-accent) 25%, transparent); }
.nf-skin-apex.nf-sticky-condense.nf-scrolled { box-shadow: 0 6px 28px rgba(15,27,22,.1); }
.nf-skin-apex .nf-iconwrap, .nf-skin-apex .nf-search input { border-radius: 10px; }

/* ---- Horizon : floating glass holding-company bar ---- */
.nf-skin-horizon .nf-logo { font-weight: 800; letter-spacing: -.2px; }
.nf-skin-horizon .nf-item > a { font-weight: 500; }
.nf-skin-horizon .nf-dd { border-radius: 14px; }
.nf-skin-horizon .nf-dd a { border-radius: 9px; }
.nf-skin-horizon.nf-sticky-floating:not(.nf-scrolled) .nf-item > a:hover { color: #fff; }