/*
 * Main navigation, version 3 (Lee, 2026-10-06). Loaded by the layout only
 * while App\Services\SiteNav::on() (staging and local until signed off).
 * Markup: views/partials/header-nav-v3.php and nav-drawer-v3.php.
 * Plain CSS on purpose, so the header needs no Tailwind rebuild.
 */
:root {
    --nv-navy: #224685; --nv-navy-d: #1b386a; --nv-ink: #142a50; --nv-mist: #eef1f8; --nv-line: #e2e8f0;
    --nv-text: #334155; --nv-muted: #64748b; --nv-head: #0f172a; --nv-pink: #d6157d; --nv-violet: #6d28d9;
}

/* Desktop header from 1280px; below that the burger and the drawer */
.nv, .nv-right { display: none; }
@media (min-width: 1280px) {
    .nv, .nv-right { display: flex; }
    .nv-burger, .nv-drawer { display: none !important; }
}

/* The bar: the whole screen width, logo left, sections, then the calls to action */
.nv-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 4rem; padding: 0 16px; }
@media (min-width: 640px) { .nv-bar { padding: 0 24px; } }
@media (min-width: 1024px) { .nv-bar { height: 5rem; } }
@media (min-width: 1536px) { .nv-bar { padding: 0 40px; gap: 28px; } }

.nv { align-items: center; align-self: stretch; gap: 4px; min-width: 0; margin-right: auto; }
@media (min-width: 1536px) { .nv { gap: 6px; } }
.nv-item { display: flex; align-items: center; align-self: stretch; flex-shrink: 0; }
/* Plain text links, no pills (Lee, 2026-10-06). A bar under the word marks
   the section you are in and the one that is open. */
.nv-pill {
    position: relative; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 10px 11px; border: 0; border-radius: 0;
    font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.25rem; color: var(--nv-text); background: none; cursor: pointer;
    transition: color .15s;
}
.nv-pill::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--nv-navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.nv-pill:hover { color: var(--nv-navy); }
.nv-pill:hover::after { transform: scaleX(1); opacity: .35; }
.nv-pill.is-here { color: var(--nv-navy); }
.nv-pill.is-here::after { transform: scaleX(1); opacity: .35; }
.nv-pill.is-open { color: var(--nv-navy); }
.nv-pill.is-open::after { transform: scaleX(1); opacity: 1; }
.nv-pill .nv-chev { width: 14px; height: 14px; opacity: .6; transition: transform .2s; }
.nv-pill.is-open .nv-chev { transform: rotate(180deg); opacity: 1; }
@media (min-width: 1536px) { .nv-pill { padding: 10px 14px; } .nv-pill::after { left: 14px; right: 14px; } }
.nv-badge { display: none; padding: 1px 7px; border-radius: 9999px; background: linear-gradient(90deg, var(--nv-pink), var(--nv-violet)); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1rem; }
@media (min-width: 1700px) { .nv-badge { display: inline-block; } }
.nv-acc .nv-badge { display: inline-block; }

/* Right: the free design and contact buttons, then the channels */
.nv-right { align-items: center; gap: 10px; flex-shrink: 0; }
.nv-cta-free, .nv-cta { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 10px 18px; border-radius: 9999px; font-size: .875rem; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s, background-color .2s; }
.nv-cta-free { color: #fff; background: linear-gradient(100deg, var(--nv-pink), var(--nv-violet) 55%, var(--nv-navy)); background-size: 160% 100%; background-position: 0 0; box-shadow: 0 8px 18px -10px rgba(109,40,217,.8); }
.nv-cta-free:hover { background-position: 100% 0; transform: translateY(-2px); color: #fff; }
.nv-cta-free i, .nv-cta-free svg { width: 16px; height: 16px; }
.nv-cta { color: #fff; background: var(--nv-navy); }
.nv-cta:hover { background: var(--nv-navy-d); transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgba(20,42,80,.7); color: #fff; }
.nv-chan { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--nv-line); }
/* Fitting the row: under 1440 the Contact us button gives way (it is in the
   About panel and the drawer), under 1536 the chat icons do */
.nv-right > .nv-cta { display: none; }
.nv-chan > span { display: none; }
@media (min-width: 1440px) { .nv-right > .nv-cta { display: inline-flex; } }
@media (min-width: 1536px) { .nv-chan > span { display: inline-flex; } }
.nv-tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 32px; height: 32px; border-radius: 9999px; background: var(--nv-navy); color: #fff; font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: transform .2s; }
.nv-tel:hover { transform: translateY(-2px); color: #fff; }
.nv-tel i, .nv-tel svg { width: 16px; height: 16px; }
.nv-tel span { display: none; }
@media (min-width: 1700px) {
    .nv-tel { width: auto; height: auto; padding: 0; background: none; color: var(--nv-text); }
    .nv-tel:hover { color: var(--nv-head); }
    .nv-tel span { display: inline; }
}

/* The section bar under the header (section-subnav.php), full width like
   the header; it scrolls sideways rather than clipping on narrow desktops */
.nv-subbar { padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.nv-subbar::-webkit-scrollbar { display: none; }
@media (min-width: 1536px) { .nv-subbar { padding: 0 40px; } }
.nv-subbar > div { flex-shrink: 0; }
#section-subnav svg.lucide { width: 18px; height: 18px; flex: none; }

/* The panels: one card under its trigger, kept on screen by swdNav().place() */
.nv-panel { position: absolute; top: calc(100% - 6px); left: 16px; z-index: 50; max-width: calc(100vw - 32px); }
.nv-enter { transition: opacity .16s ease-out, transform .16s ease-out; }
.nv-enter-start { opacity: 0; transform: translateY(-6px); }
.nv-enter-end { opacity: 1; transform: none; }
.nv-card { display: flex; gap: 28px; padding: 24px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 60px -20px rgba(15,23,42,.35); }
.nv-cols { display: grid; grid-template-columns: repeat(var(--nv-n, 1), auto); align-content: start; gap: 6px 28px; }
.nv-col { width: 17.5rem; }
.nv-card.is-one .nv-col { width: 21rem; }
.nv-col__t { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.nv-col.is-rescue .nv-col__t { color: #e11d48; }
.nv-col__note { margin: 8px 0 0; font-size: .8rem; color: var(--nv-muted); }
.nv-col__note a { font-weight: 700; color: #e11d48; white-space: nowrap; text-decoration: none; }
.nv-link { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; transition: background-color .15s; }
.nv-link:hover { background: #f8fafc; }
.nv-link.is-current { background: var(--nv-mist); }
.nv-link img, .nv-ico { flex: none; width: 40px; height: 40px; object-fit: contain; }
.nv-ico { display: grid; place-items: center; border-radius: 10px; background: var(--nv-mist); color: var(--nv-navy); }
.nv-ico i, .nv-ico svg { width: 20px; height: 20px; }
.nv-link b { display: block; font-size: .925rem; font-weight: 600; color: var(--nv-head); line-height: 1.3; }
.nv-link small { display: block; margin-top: 1px; font-size: .78rem; color: var(--nv-muted); line-height: 1.35; }
.nv-link:hover b { color: var(--nv-navy); }
.nv-col.is-rescue .nv-link:hover b { color: #e11d48; }


/* The spread-the-cost line under the columns */
.nv-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, #eef1f8, #eef2ff); box-shadow: inset 0 0 0 1px #b7c5dd; text-decoration: none; transition: box-shadow .2s; }
.nv-strip:hover { box-shadow: inset 0 0 0 1px var(--nv-navy); }
.nv-strip__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9999px; background: linear-gradient(135deg, var(--nv-navy), #4f46e5); color: #fff; }
.nv-strip__ic i, .nv-strip__ic svg { width: 18px; height: 18px; }
.nv-strip b { display: block; font-size: .9rem; color: var(--nv-head); }
.nv-strip small { display: block; font-size: .8rem; color: var(--nv-muted); }
.nv-strip__go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .85rem; font-weight: 700; color: var(--nv-navy); }
.nv-strip__go i, .nv-strip__go svg { width: 15px; height: 15px; transition: transform .2s; }
.nv-strip:hover .nv-strip__go svg { transform: translateX(3px); }
/* One column: the line keeps to the column's width, its link wraps under */
.nv-card.is-one .nv-cols { grid-template-columns: 21rem; }
.nv-card.is-one .nv-strip { flex-wrap: wrap; row-gap: 6px; }
.nv-card.is-one .nv-strip > span:nth-child(2) { flex: 1 1 calc(100% - 52px); min-width: 0; }
.nv-card.is-one .nv-strip__go { margin-left: 52px; }

/* The feature card at the right of each panel */
.nv-feat { flex: none; display: flex; flex-direction: column; align-items: flex-start; width: 19rem; padding: 18px; border-radius: 16px; text-decoration: none; color: #fff; }
.nv-feat--design, .nv-feat--spread { background: linear-gradient(150deg, var(--nv-ink) 0%, var(--nv-navy) 55%, #4338ca 100%); }
.nv-feat--rescue { background: linear-gradient(150deg, #9f1239, #e11d48); }
.nv-feat--contact { background: linear-gradient(150deg, var(--nv-ink), var(--nv-navy)); }
.nv-shot { display: block; width: 100%; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 14px 28px -14px rgba(0,0,0,.6); }
.nv-shot__bar { display: flex; gap: 4px; padding: 6px 8px; background: #e2e8f0; }
.nv-shot__bar i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.nv-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; transition: transform 3s ease; }
.nv-feat:hover .nv-shot img { transform: scale(1.04); }
.nv-feat__cap { margin-top: 6px; font-size: .72rem; color: #c7d2fe; }
.nv-feat__t { display: block; margin-top: 12px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.nv-feat__p { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.45; color: #dbe2ee; }
.nv-feat--rescue .nv-feat__p { color: #ffe4e6; }
.nv-feat__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 9px 16px; border-radius: 9999px; background: #fff; color: var(--nv-navy); font-size: .85rem; font-weight: 700; text-decoration: none; transition: transform .2s; }
.nv-feat > .nv-feat__btn { margin-top: 14px; }
.nv-feat__btn i, .nv-feat__btn svg { width: 15px; height: 15px; }
.nv-feat:hover .nv-feat__btn, .nv-feat__btn:hover { transform: translateY(-2px); }
.nv-feat__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.16); }
.nv-feat__ic i, .nv-feat__ic svg { width: 22px; height: 22px; }
.nv-phone { display: block; margin: 12px 0 10px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.nv-phone:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.nv-spot { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #fff; }
.nv-spot img { width: 54px; height: 54px; object-fit: contain; }
.nv-eg { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.12); font-size: .85rem; color: #dbe2ee; }
.nv-eg b { font-size: 1.1rem; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- The drawer, below 1280px ---------- */
.nv-drawer { border-top: 1px solid #f1f5f9; background: #fff; max-height: calc(100vh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 1024px) { .nv-drawer { max-height: calc(100vh - 5rem); } }
.nv-drawer__in { max-width: 48rem; margin: 0 auto; padding: 14px 16px 22px; }
.nv-drawer__offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nv-offer { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--nv-mist); box-shadow: inset 0 0 0 1px #b7c5dd; color: var(--nv-navy); text-decoration: none; }
.nv-offer--free { background: linear-gradient(120deg, var(--nv-pink), var(--nv-violet) 60%, var(--nv-navy)); box-shadow: none; color: #fff; }
.nv-offer i, .nv-offer svg { flex: none; width: 20px; height: 20px; }
.nv-offer b { display: block; font-size: .92rem; line-height: 1.25; }
.nv-offer small { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.3; opacity: .85; }
@media (max-width: 420px) { .nv-drawer__offers { grid-template-columns: 1fr; } }
.nv-acc { margin-top: 8px; }
.nv-acc__g { border-bottom: 1px solid #f1f5f9; }
.nv-acc__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; font: inherit; font-size: 1rem; font-weight: 700; color: var(--nv-head); text-align: left; cursor: pointer; }
.nv-acc__chev { margin-left: auto; display: inline-flex; color: #94a3b8; transition: transform .2s; }
.nv-acc__chev svg, .nv-acc__chev i { width: 18px; height: 18px; }
.nv-acc__chev.is-up { transform: rotate(180deg); }
.nv-acc__body { padding: 0 0 14px 4px; }
.nv-acc__t { margin: 8px 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.nv-acc__t.is-rescue { color: #e11d48; }
.nv-acc__a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .95rem; font-weight: 600; color: var(--nv-text); text-decoration: none; }
.nv-acc__a img, .nv-acc__a .nv-ico { width: 32px; height: 32px; object-fit: contain; }
.nv-acc__a .nv-ico i, .nv-acc__a .nv-ico svg { width: 17px; height: 17px; }
.nv-acc__a.is-current { color: var(--nv-navy); }
.nv-acc__note { margin: 6px 0 0; font-size: .85rem; color: var(--nv-muted); }
.nv-acc__note a { font-weight: 700; color: #e11d48; text-decoration: none; }
.nv-drawer__foot { display: grid; gap: 10px; margin-top: 16px; }
.nv-drawer__ring { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nv-drawer__ring > a { font-size: .95rem; font-weight: 700; color: var(--nv-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.nv-cta--block { justify-content: center; padding: 14px 18px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
    .nv-pill, .nv-pill::after, .nv-cta, .nv-cta-free, .nv-tel, .nv-feat__btn, .nv-shot img, .nv-enter { transition: none; }
}