@charset "UTF-8";
/* ═══════════════════════════════════════════════════════
   Longform KD Microsites – host page
   Loaded only on pages that show a microsite, after the
   theme CSS and before the microsite's own CSS.
   ═══════════════════════════════════════════════════════ */

/* ── Root font size ──────────────────────────────────── */
/* The theme sets html/body to 20px; microsites are built for the browser
   default (16px), so their rem sizes would come out 25% too big.
   `html:where(…)` / `body:where(…)` keep the theme's own specificity:
   these win over the theme (they load later) and lose to the microsite. */
html:where(.lkd-hosted) {
    font-size: 100%;
}

body:where(.lkd-microsite-page) {
    font-size: 1rem;
}

/* ── Scroll lock ─────────────────────────────────────── */
/* Microsites lock scrolling for menus/modals with body{overflow:hidden}. When
   <html> has an overflow value too (Lenis sets one while stopped), that turns
   <body> into a scroll container and the theme's sticky header scrolls away.
   `clip` locks scrolling the same way but never makes a scroll container. */
body.lkd-microsite-page[style*="overflow: hidden"],
body.lkd-microsite-page[style*="overflow:hidden"] {
    overflow: clip !important;
}

/* ── Theme footer ────────────────────────────────────── */
/* Its spacing is in rem (1rem = 20px on every other page): keep it identical. */
.lkd-hosted .site-footer {
    padding: 60px 30px 40px;
}

.lkd-hosted .footer-logo {
    margin-bottom: 30px;
}

.lkd-hosted .footer-separator {
    margin: 30px 0;
}

.lkd-hosted .footer-social {
    margin-bottom: 30px;
}