/* =========================================================================
   HOME PAGE — FIXED VERTICAL SECTION NAVIGATION ("kvn-" = Kaaya Vertical Nav)
   -------------------------------------------------------------------------
   Exclusive to index.php: the markup only ever appears there (see the
   <nav data-kvn-nav> block right after the navbar include) and this
   stylesheet is only linked there too (see the $kgIsHomePage guard in
   includes/header.php). Namespaced throughout so nothing here can collide
   with the existing horizontal .kg-section-nav quick-nav, which stays
   exactly as it was.

   Visual language: a single curved line runs beside the six numbers
   (drawn/measured by assets/js/kg-vertical-nav.js so it always passes
   exactly through each row, at any viewport size), with a small dot at
   each section. The line is drawn once in a dim dark→light green
   gradient, then a second brighter copy of the same path is "revealed"
   along its length as the person scrolls — that's the progress indicator.
   The current section's number stands sharp, dark and enlarged; every
   other number sits smaller, muted and slightly softened, so attention
   lands on the one that's current (hovering/tapping any of the others
   sharpens it back up too).

   Each number carries its section title directly underneath it:
       01 Our Philosophy · 02 Our Services · 03 Packages ·
       04 Seasonal Offers · 05 Memberships · 06 The Kaaya Glow Difference
   On wide screens (>= 1600px) every title is visible under its number.
   Below that there isn't room for six titles beside the page content, so
   the column collapses to numbers only and just the CURRENT section's
   title appears as a small label beside its number (also shown on
   hover / tap). The link keeps its full aria-label either way.

   Structure recap:
     .kvn-nav
       svg.kvn-curve            positioned/sized by JS to match .kvn-list
         path.kvn-curve-track     dim base line (dark→light gradient)
         path.kvn-curve-fill      bright overlay = scroll progress
         circle.kvn-dot (x6)      appended by JS, one per section
       .kvn-list > .kvn-item (x6)
         .kvn-link > .kvn-num       "01".."06"
                   > .kvn-title     section title, under the number
   ========================================================================= */

.kvn-nav {
    --kvn-c1: #04211C; /* darkest  — 01 */
    --kvn-c3: #235347;
    --kvn-c5: #8EB69B; /* lightest — 05 */
    --kvn-row-h: 68px; /* number + up to two lines of title */
    --kvn-gap: 8px;
    --kvn-curve-w: 30px;

    position: fixed;
    left: 20px;
    left: max(20px, calc(env(safe-area-inset-left, 0px) + 10px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 640; /* above section content, below the header's 999/1000 */
    display: flex;
    align-items: stretch;
    max-width: 160px; /* hard cap: curve + number/title column, nothing can push past this */
    pointer-events: none; /* re-enabled on the interactive children only */
    opacity: 1;
    transition: opacity 0.4s var(--kg-ease, ease);
}

/* Hidden over the hero itself (JS toggles this via an IntersectionObserver
   on #home-hero) — the nav fades in only once the hero has scrolled out
   of view, so it never sits over the hero photo/headline. */
.kvn-nav.kvn-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.kvn-curve {
    position: relative;
    width: var(--kvn-curve-w);
    height: auto; /* JS sets an explicit pixel height matching .kvn-list */
    flex: 0 0 auto;
    overflow: visible;
}

.kvn-curve-track,
.kvn-curve-fill {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.kvn-curve-track {
    stroke: url(#kvnCurveGrad);
    stroke-width: 1.6px;
    opacity: 0.24;
}
.kvn-curve-fill {
    stroke: url(#kvnCurveGrad);
    stroke-width: 2.2px;
    filter: drop-shadow(0 0 4px rgba(142, 182, 155, 0.55));
    /* stroke-dasharray/-dashoffset are written by JS: the fill path is
       identical to the track path, and revealing it from the start point
       onward is what makes the line read as "how far you've scrolled". */
    transition: stroke-dashoffset 0.12s linear;
}

.kvn-dot {
    fill: var(--kaaya-sage, #8EB69B);
    opacity: 0.55;
    transition: r 0.35s var(--kg-ease, ease), opacity 0.35s ease, fill 0.35s ease;
}
.kvn-dot.is-active {
    fill: var(--kaaya-black, #051F20);
    opacity: 1;
}

.kvn-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--kvn-gap);
    margin-left: 12px;
}

.kvn-item { position: relative; }

.kvn-link {
    position: relative;
    display: flex;
    flex-direction: column;
    /* FIX: was "center" — the whole numbered rail (nums + titles) sat
       centered under the curve instead of reading as a left-aligned list. */
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    height: var(--kvn-row-h);
    text-decoration: none;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* ---- The number: soft/blurred and small by default, sharp, dark and
   enlarged for the current section — the "rest stays blurred while one
   is selected" effect. transform-origin is centered (not left-aligned)
   now that there's no title trailing it, so scaling up never nudges the
   number sideways toward the page content next to the nav. ---- */
.kvn-num {
    display: inline-block;
    /* Numbers now match the body/sans-serif typeface (Inter/Poppins)
       instead of the heading serif, per request — matched throughout the
       rest of the page's 01–06 numerals below. */
    font-family: var(--kg-body-font, 'Inter', 'Poppins', sans-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #4A6157; /* muted moss-grey — meets ~4.7:1 on white, still reads as "dimmed" */
    filter: blur(0.6px);
    opacity: 0.75;
    /* FIX: was "center" (kept the number's midpoint fixed while scaling,
       correct for the old centered layout). Now that .kvn-link is
       left-aligned, "center" would grow the active number leftward past
       the rail's left edge instead of in place — anchored to the left
       edge instead so scale-up grows rightward, staying inside the rail. */
    transform-origin: left center;
    transition: color 0.4s var(--kg-ease, ease), filter 0.4s var(--kg-ease, ease),
                opacity 0.4s var(--kg-ease, ease), transform 0.4s var(--kg-ease, ease);
}

/* ---- Section title, sitting directly under its number. Kept un-blurred
   (small text turns illegible when blurred) — the "current" cue is
   colour + weight + opacity instead. ---- */
.kvn-title {
    display: block;
    width: 104px;
    font-family: var(--kg-body-font, 'Inter', 'Poppins', sans-serif);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    color: #3B5249;
    opacity: 0.95;
    transition: color 0.4s var(--kg-ease, ease), opacity 0.4s var(--kg-ease, ease);
}
.kvn-item.is-active .kvn-title {
    color: var(--kaaya-black, #051F20);
    opacity: 1;
    font-weight: 700;
}

/* ---- Current section: sharp, larger, dark ---- */
.kvn-item.is-active .kvn-num {
    color: var(--kaaya-black, #051F20);
    filter: blur(0);
    opacity: 1;
    transform: scale(1.2);
    font-weight: 700;
}

/* ---- Desktop hover/focus: temporarily un-blur any row, even when it
   isn't the active one. ---- */
@media (hover: hover) and (pointer: fine) {
    .kvn-link:hover .kvn-num,
    .kvn-link:focus-visible .kvn-num {
        filter: blur(0);
        opacity: 0.9;
        color: #2A3F38;
    }
    .kvn-link:hover .kvn-title,
    .kvn-link:focus-visible .kvn-title {
        opacity: 1;
        color: #2A3F38;
    }
}

/* ---- Touch: briefly sharpen the tapped number (JS adds/removes this) ---- */
.kvn-item.kvn-touch-reveal .kvn-num {
    filter: blur(0);
    opacity: 0.9;
}

/* ---- Sitting over a dark section (kg-offers / kg-packages / kg-memberships
   all use .kg-on-dark): flip the palette so contrast stays high against a
   dark backdrop instead of reading as near-invisible dark-on-dark. JS
   toggles this class on .kvn-nav based on the active section. ---- */
.kvn-nav.kvn-on-dark .kvn-num { color: rgba(255, 255, 255, 0.72); }
.kvn-nav.kvn-on-dark .kvn-item.is-active .kvn-num,
.kvn-nav.kvn-on-dark .kvn-link:hover .kvn-num { color: #fff; }
.kvn-nav.kvn-on-dark .kvn-title { color: rgba(255, 255, 255, 0.85); opacity: 1; }
.kvn-nav.kvn-on-dark .kvn-item.is-active .kvn-title,
.kvn-nav.kvn-on-dark .kvn-link:hover .kvn-title { color: #fff; }
.kvn-nav.kvn-on-dark .kvn-curve-track { opacity: 0.32; }
.kvn-nav.kvn-on-dark .kvn-dot { fill: rgba(255, 255, 255, 0.8); }
.kvn-nav.kvn-on-dark .kvn-dot.is-active { fill: #fff; }

/* Short desktop windows: tighten the rows so all six still fit. */
@media (min-width: 1600px) and (max-height: 700px) {
    .kvn-nav { --kvn-row-h: 56px; --kvn-gap: 4px; }
    .kvn-title { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .kvn-curve-fill,
    .kvn-num,
    .kvn-title,
    .kvn-dot {
        transition-duration: 0.01ms !important;
    }
}

/* ---- Below 1600px there's no room for six titles beside the page
   content: numbers only, plus a small label showing the current
   section's title (or the hovered / tapped one). ---- */
@media (max-width: 1599px) {
    .kvn-nav {
        --kvn-row-h: 40px;
        --kvn-gap: 8px;
        max-width: 64px;
    }
    .kvn-link { flex-direction: row; gap: 0; }
    .kvn-title {
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        width: auto;
        white-space: nowrap;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 2px 10px rgba(5, 31, 32, 0.14);
        color: var(--kaaya-black, #051F20);
        font-size: 9.5px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-4px, -50%);
        transition: opacity 0.3s var(--kg-ease, ease), transform 0.3s var(--kg-ease, ease), visibility 0s linear 0.3s;
    }
    .kvn-item.is-active .kvn-title,
    .kvn-item.kvn-touch-reveal .kvn-title,
    .kvn-link:hover .kvn-title,
    .kvn-link:focus-visible .kvn-title {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
        transition-delay: 0s;
    }
    .kvn-nav.kvn-on-dark .kvn-title {
        background: rgba(5, 31, 32, 0.9);
        color: #fff;
    }
    .kvn-nav.kvn-on-dark .kvn-item.is-active .kvn-title,
    .kvn-nav.kvn-on-dark .kvn-link:hover .kvn-title { color: #fff; }
}

@media (max-width: 1100px) {
    .kvn-nav { left: 12px; }
    .kvn-num { font-size: 19px; }
}

/* ---- Tablet / mobile: compact, tap-to-navigate, safe-area aware,
   generous hit area that never grows the visible nav or overlaps the
   section content beside it. ---- */
@media (max-width: 860px) {
    .kvn-nav {
        --kvn-row-h: 36px;
        --kvn-gap: 6px;
        --kvn-curve-w: 20px;
        left: max(6px, env(safe-area-inset-left, 0px));
        max-width: 46px;
    }
    .kvn-list { margin-left: 8px; }
    .kvn-num { font-size: 15px; }
    .kvn-title { font-size: 9px; padding: 4px 9px; }
    .kvn-item.is-active .kvn-num { transform: scale(1.15); }
    /* Invisible hit-area padding around the number so a thumb near the
       screen edge still lands on the right row, without the nav itself
       getting visually bigger or overlapping neighbouring content. */
    .kvn-link::before {
        content: '';
        position: absolute;
        left: -14px;
        right: -14px;
        top: -8px;
        bottom: -8px;
    }
}

@media (max-width: 480px) {
    .kvn-nav { left: max(4px, env(safe-area-inset-left, 0px)); }
}


/* ---- Phones, tablets and small laptops: the numbered side rail is hidden. ----
   Page content (containers up to ~1240-1360px) runs close to the screen edge below ~1440px, so a fixed
   rail on the left sat ON TOP of headings, text and cards. The horizontal quick-nav pills (Philosophy /
   Services / Packages ...) under the header already do this job on smaller screens.
   1440-1599px: compact numbers-only rail.  1600px+: numbers with titles. */
@media (max-width: 1439px) {
    .kvn-nav { display: none !important; }
}