/* Site header redesign 2026-10-30 ("blueprint editorial", matches hm-/bp-/pf- layers).
   Desktop only (>1024px); phones/tablets keep the app-shell.css header. Prefix kn-. */

.kn {
    --kn-orange: #ff632a;
    --kn-orange-d: #e85520;
    --kn-ink: #15191e;
    --kn-cond: 'Barlow Condensed', 'Noto Sans Lao', 'Noto Sans SC', sans-serif;
    --kn-ease: cubic-bezier(.2, .7, .2, 1);
}

/* phone pill is desktop-only; hide it (and keep its icon sized) everywhere else */
.kn-phone { display: none; }
.kn-phone svg { width: .95rem; height: .95rem; }

@media (min-width: 1025px) {
    /* top state: transparent over the hero, hairline under the bar */
    .kn { background: transparent; padding-top: 0; transition: padding .45s var(--kn-ease); }
    .kn-bar { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: background .45s var(--kn-ease), border-color .45s, box-shadow .45s, border-radius .45s, max-width .45s; }
    .kn-row { height: 5.25rem; transition: height .45s var(--kn-ease); }

    /* scrolled: floating dark glass dock */
    .kn.kn-is-scrolled { padding-top: .75rem; }
    .kn.kn-is-scrolled .kn-bar {
        max-width: 78rem;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: .9rem;
        background: rgba(21, 25, 30, .86);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
        backdrop-filter: saturate(160%) blur(16px);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    }
    .kn.kn-is-scrolled .kn-row { height: 4rem; }
    .kn.kn-is-scrolled .kn-logo img { height: 2.4rem; }

    .kn-logo img { height: 3rem; filter: brightness(0) invert(1); transition: height .45s var(--kn-ease); }

    /* links: no icons, orange underline that grows from the left */
    .kn-nav { gap: .15rem; }
    .kn-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .55rem .8rem;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, .82);
        font-size: .92rem;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: color .2s;
    }
    .kn-link::after {
        content: '';
        position: absolute;
        left: .8rem;
        right: .8rem;
        bottom: .15rem;
        height: 2px;
        border-radius: 2px;
        background: var(--kn-orange);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s var(--kn-ease);
    }
    .kn-link:hover, .kn-link:focus-visible { color: #fff; }
    .kn-link:hover::after, .kn-link:focus-visible::after { transform: scaleX(1); }
    .kn-link.is-active { color: #fff; font-weight: 600; }
    .kn-link.is-active::after { transform: scaleX(1); }
    .kn-link:focus-visible { outline: 2px solid var(--kn-orange); outline-offset: 2px; border-radius: .3rem; }
    .kn-caret { width: 1rem; height: 1rem; opacity: .7; transition: transform .25s; }
    .kn-caret.is-open { transform: rotate(180deg); }

    /* dropdown: white card, orange top rule, numbered rows */
    .kn-drop { position: absolute; left: 0; top: 100%; z-index: 60; padding-top: .6rem; }
    .kn-drop-in {
        min-width: 15rem;
        padding: .45rem;
        border-top: 3px solid var(--kn-orange);
        border-radius: .35rem .35rem .7rem .7rem;
        background: #fff;
        box-shadow: 0 24px 50px rgba(17, 20, 24, .22);
    }
    .kn-drop-a {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .7rem .8rem;
        border-radius: .45rem;
        color: var(--kn-ink);
        font-size: .9rem;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
        transition: background .15s, color .15s;
    }
    .kn-drop-no { font-family: var(--kn-cond); font-size: .95rem; font-weight: 600; color: #a0a7b0; transition: color .15s; }
    .kn-drop-t { flex: 1; }
    .kn-drop-a svg { width: 1rem; height: 1rem; color: var(--kn-orange); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .2s; }
    .kn-drop-a:hover, .kn-drop-a:focus-visible, .kn-drop-a.is-active { background: #fff4ee; color: var(--kn-orange-d); }
    .kn-drop-a:hover .kn-drop-no, .kn-drop-a.is-active .kn-drop-no { color: var(--kn-orange); }
    .kn-drop-a:hover svg, .kn-drop-a:focus-visible svg { opacity: 1; transform: none; }

    /* phone pill */
    .kn-phone {
        align-items: center;
        gap: .45rem;
        padding: .45rem .85rem;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 999px;
        color: #fff;
        font-family: var(--kn-cond);
        font-size: 1.02rem;
        font-weight: 600;
        letter-spacing: .03em;
        white-space: nowrap;
        text-decoration: none;
        transition: background .2s, border-color .2s;
    }
    .kn-phone svg { width: .95rem; height: .95rem; color: var(--kn-orange); transition: color .2s; }
    .kn-phone:hover { background: var(--kn-orange); border-color: var(--kn-orange); }
    .kn-phone:hover svg { color: #fff; }

    /* language: segmented control */
    .kn-lang { align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .05); }
    .kn-lang a { padding: .28rem .65rem; border-radius: 999px; color: rgba(255, 255, 255, .7); font-size: .78rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .15s, color .15s; }
    .kn-lang a:hover { color: #fff; }
    .kn-lang a.is-on { background: var(--kn-orange); color: #fff; }

    .kn-burger { color: #fff; }
}

/* the phone pill only where the 8-item Lao menu still fits on one row */
@media (min-width: 1400px) {
    .kn-phone { display: inline-flex; }
}

/* tighter link padding between 1025 and 1280 */
@media (min-width: 1025px) and (max-width: 1279px) {
    .kn-link { padding: .5rem .55rem; font-size: .86rem; }
    .kn-link::after { left: .55rem; right: .55rem; }
}

/* entrance on load */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .kn-logo, .kn-nav > *, .kn-tools > * { animation: kn-down .6s var(--kn-ease) both; }
    .kn-nav > *:nth-child(1) { animation-delay: .05s; }
    .kn-nav > *:nth-child(2) { animation-delay: .09s; }
    .kn-nav > *:nth-child(3) { animation-delay: .13s; }
    .kn-nav > *:nth-child(4) { animation-delay: .17s; }
    .kn-nav > *:nth-child(5) { animation-delay: .21s; }
    .kn-nav > *:nth-child(6) { animation-delay: .25s; }
    .kn-nav > *:nth-child(7) { animation-delay: .29s; }
    .kn-nav > *:nth-child(8) { animation-delay: .33s; }
    .kn-tools > * { animation-delay: .38s; }
}
@keyframes kn-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .kn, .kn-bar, .kn-row, .kn-logo img, .kn-link::after { transition: none !important; }
}