/* KPG app shell — phone + iPad portrait (<=1024px, matches the Tailwind lg: breakpoint).
   Plain CSS on purpose: the host has no node/npm, so `npm run build` cannot run there.
   Loaded after @vite(...) so it wins ties at equal specificity. */

:root {
    --kpg-orange: #ff632a;
    --kpg-orange-dark: #e85520;
    --kpg-ink: #1f2933;
    --kpg-muted: #8a939c;
    --kpg-tabbar-h: 62px;
}

/* ================= bottom tab bar ================= */

.kpg-tabbar {
    display: none;
}

@media (max-width: 1024px) {

    .kpg-tabbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid rgba(17, 20, 24, .07);
        box-shadow: 0 -6px 24px rgba(17, 20, 24, .08);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .kpg-tabbar-inner {
        display: grid;
        /* minmax(0,1fr) + min-width:0 below: plain 1fr lets the nowrap Lao labels
           set a min-content floor that widens the whole page. */
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        height: var(--kpg-tabbar-h);
        max-width: 680px;
        margin: 0 auto;
    }

    .kpg-tab {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 100%;
        padding: 6px 2px 8px;
        color: var(--kpg-muted);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease;
    }

    .kpg-tab svg {
        width: 23px;
        height: 23px;
        stroke-width: 1.7;
        flex: none;
    }

    .kpg-tab span {
        font-size: 10.5px;
        line-height: 1.25;
        font-weight: 600;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kpg-tab.is-active {
        color: var(--kpg-orange);
    }

    .kpg-tab:active {
        transform: scale(.94);
    }

    /* raised centre action */
    .kpg-tab-cta {
        justify-content: flex-end;
        color: var(--kpg-ink);
    }

    .kpg-tab-cta .kpg-tab-fab {
        width: 50px;
        height: 50px;
        margin-top: -24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, var(--kpg-orange), var(--kpg-orange-dark));
        box-shadow: 0 8px 20px rgba(255, 99, 42, .42);
        border: 3px solid #fff;
    }

    .kpg-tab-cta .kpg-tab-fab svg {
        width: 23px;
        height: 23px;
        color: #fff;
        stroke-width: 1.9;
    }

    .kpg-tab-cta span {
        margin-top: 2px;
    }

    .kpg-tab-cta.is-active {
        color: var(--kpg-orange);
    }

    /* keep footers and page bottoms clear of the bar */
    body {
        padding-bottom: calc(var(--kpg-tabbar-h) + env(safe-area-inset-bottom));
    }

    /* ================= app-style header ================= */

    /* The header is transparent until scroll, which left a white logo sitting on
       a pale sky — unreadable. On touch sizes it stays an opaque app bar. */
    body > header {
        background: rgba(255, 255, 255, .96) !important;
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        box-shadow: 0 1px 0 rgba(17, 20, 24, .07);
    }

    body > header img {
        filter: none !important;
        -webkit-filter: none !important;
    }

    body > header button svg {
        color: var(--kpg-ink);
    }

    /* the hero scrim exists only to protect a transparent header; drop it here */
    .kpg-hero::after {
        display: none;
    }

    /* ================= hero sizing ================= */

    .kpg-hero {
        height: calc(100dvh - var(--kpg-tabbar-h));
        min-height: 520px;
    }

    .hero-swiper h1,
    .hero-swiper h2 {
        font-size: clamp(1.9rem, 6.4vw, 2.6rem) !important;
        line-height: 1.18 !important;
    }

    .hero-swiper p {
        font-size: clamp(.98rem, 3.6vw, 1.1rem) !important;
        line-height: 1.6 !important;
    }

    /* Decorative .-top-20 / .-bottom-32 blobs push the page 8px sideways on phones */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Default Swiper arrows render bright blue over the hero; touch devices swipe */
    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next {
        display: none !important;
    }

    .hero-swiper .swiper-pagination-bullet-active {
        background: var(--kpg-orange) !important;
    }

    /* ================= touch comfort ================= */

    body.antialiased section p,
    body.antialiased section li {
        font-size: 1rem;
        line-height: 1.75;
    }

    /* the slide-in menu must clear the tab bar */
    body > header > div[x-show="mobileOpen"] {
        bottom: calc(var(--kpg-tabbar-h) + env(safe-area-inset-bottom));
    }
}

/* iPad portrait: the shell applies, but give it room to breathe */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --kpg-tabbar-h: 70px;
    }

    .kpg-tab svg {
        width: 26px;
        height: 26px;
    }

    .kpg-tab span {
        font-size: 12px;
    }

    .kpg-tab-cta .kpg-tab-fab {
        width: 58px;
        height: 58px;
        margin-top: -28px;
    }

    .kpg-tab-cta .kpg-tab-fab svg {
        width: 26px;
        height: 26px;
    }
}

/* standalone (installed to the home screen): no browser chrome to lean on */
@media (display-mode: standalone) {
    body > header {
        padding-top: env(safe-area-inset-top);
    }
}

/* Browsers without backdrop-filter get solid surfaces instead of see-through ones */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    @media (max-width: 1024px) {
        .kpg-tabbar { background: #fff; }
        body > header { background: #fff !important; }
    }
}