/* ═══════════════════════════════════════════════════════════════════════════
   ivs-subnav — reusable sticky section-tab bar.
   ─────────────────────────────────────────────────────────────────────────
   Extracted from the V5 tour page's sub-nav (.tv5-subnav in tour-v5.css),
   which is the reference implementation (rule-wajib/komponen.md). One bar,
   one voice, on every page that needs in-page tabs:

   · tabs: Inter 0.66rem / 600 / .14em, uppercase, stone → ink on hover
   · a sliding ink marker (3px corners) behind the active tab
   · a reading-progress line along the bottom edge
   · a "locked" feel once stuck: shorter bar, deeper blur, soft shadow
   · CTA on the right: olive-700, 3px corners, sheen sweep on hover

   Markup contract: resources/views/partials/sticky-subnav.blade.php.
   Behaviour: public/js/components/ivs-subnav.js (self-boots on
   [data-ivs-subnav]; sets --ivs-subnav-top from the live header height).

   Tokens are used with fallbacks because --v5-* only exists in homepage.css
   (see rule-wajib/gotcha-teknis.md).
   ═══════════════════════════════════════════════════════════════════════════ */

.ivs-subnav {
    position: sticky;
    top: var(--ivs-subnav-top, 90px);
    z-index: 40;
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    background-color: color-mix(in oklab, #faf9f6 95%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.ivs-subnav.is-stuck {
    box-shadow: 0 6px 24px rgba(32, 31, 29, 0.07);
    background-color: color-mix(in oklab, #faf9f6 93%, transparent);
}

.ivs-subnav-bar {
    display: flex;
    height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: height 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ivs-subnav.is-stuck .ivs-subnav-bar { height: 3rem; }

.ivs-subnav-tabs {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    gap: 1.75rem;
    font-family: var(--v5-font-label, 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v5-stone, #5b574d);
    /* Left breathing room so the sliding marker (which extends 12px left of
       the first tab) never clips against the container edge. */
    padding-left: 14px;
}
/* Horizontal scroll only when the tabs genuinely overflow (small screens). */
@media (max-width: 64rem) {
    .ivs-subnav-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .ivs-subnav-tabs::-webkit-scrollbar { display: none; }
}

.ivs-subnav-tab {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    align-items: center;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
    .ivs-subnav-tab:hover {
        border-color: var(--v5-olive-300, #a9b58f);
        color: var(--v5-ink, #201f1d);
        text-decoration: none;
    }
}
/* The active tab sits on the ink marker, so it goes light; no underline. */
.ivs-subnav-tab.is-active {
    color: #fff;
    border-bottom-color: transparent;
}

/* Sliding marker behind the active tab. JS sets left/width; the eased
   transition does the sliding. 3px corners: it is the chip of the tab it
   carries, same family as buttons (rule-wajib/tombol.md). */
.ivs-subnav-pill {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: 0;
    height: 2.1rem;
    transform: translateY(-50%);
    background: var(--v5-ink, #201f1d);
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: left 0.45s cubic-bezier(0.5, 0.05, 0.15, 1),
                width 0.45s cubic-bezier(0.5, 0.05, 0.15, 1),
                opacity 0.3s ease;
}
.ivs-subnav-pill.is-ready { opacity: 1; }

/* Right-hand side: optional quiet link + the CTA. Hidden on small screens by
   default (the reference page has a bottom action bar there); pages without
   one keep it with the --keep-actions modifier. */
.ivs-subnav-actions {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 64rem) {
    .ivs-subnav-actions { display: flex; }
}
/* --keep-actions holds the CTA from tablet up. On phones the tabs ALWAYS
   own the whole bar (the V5 standard): a kept CTA was drowning the tabs
   at 390px — 188px of button left them a 132px window (4 Aug 2026). */
@media (min-width: 48rem) {
    .ivs-subnav--keep-actions .ivs-subnav-actions { display: flex; }
}

.ivs-subnav-link {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v5-stone, #5b574d);
    text-decoration: none;
    white-space: nowrap;
}
@media (hover: hover) {
    .ivs-subnav-link:hover { color: var(--v5-ink, #201f1d); text-decoration: none; }
    .ivs-subnav-link:hover .ivs-subnav-link-icon { transform: translate(2px, -2px); }
}
.ivs-subnav-link-icon {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.65rem;
    transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ivs-subnav-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    padding: 0.62rem 1.3rem;
    background: var(--v5-olive-700, #4a5e2f);
    color: #fff;
    font-family: var(--v5-font-label, 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    /* House button shape (rule-wajib/tombol.md). */
    border-radius: 3px;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1),
                box-shadow 0.3s ease;
}
/* Sheen sweep, GPU-composited and parked off to the left until hover. */
.ivs-subnav-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: translateX(-220%) skewX(-18deg);
    pointer-events: none;
}
@media (hover: hover) {
    .ivs-subnav-cta:hover {
        background: var(--v5-olive-900, #33421f);
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(74, 94, 47, 0.26);
    }
    .ivs-subnav-cta:hover::after { animation: ivs-subnav-sheen 0.8s ease; }
}
@keyframes ivs-subnav-sheen {
    from { transform: translateX(-220%) skewX(-18deg); }
    to   { transform: translateX(320%)  skewX(-18deg); }
}

/* Reading-progress line on the bottom edge of the bar. */
.ivs-subnav-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--v5-olive-500, #6b8051), var(--v5-olive-700, #4a5e2f));
    transition: width 0.12s linear;
    pointer-events: none;
}

@media (max-width: 767px) {
    .ivs-subnav-bar { gap: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-subnav-pill,
    .ivs-subnav-bar,
    .ivs-subnav-progress,
    .ivs-subnav-tab { transition: none; }
    .ivs-subnav-cta::after { display: none; }
}