/*
 * Kindergarten visual system
 *
 * The Public School's typography, spacing, navigation and footer establish
 * the shared institutional design. Kindergarten imagery and content remain
 * distinct, with a small set of brighter supporting accents.
 */

:root {
    --ink: #40364d;
    --ink-soft: #6f6877;
    --cream: #fffaf0;
    --paper: #ffffff;
    --yellow: #f2b318;
    --yellow-dark: #d99a00;
    --purple: #78569a;
    --purple-dark: #563670;
    --pink: #e85f88;
    --teal: #43b8ba;
    --orange: #ef9342;
    --green: #79a93b;
    --blue: #557fc1;
    --border: #eadfce;
    --shadow: 0 14px 40px rgba(65, 44, 77, .13), 0 20px 50px rgba(65, 44, 77, .08);
    --radius-sm: 8px;
    --radius: 20px;
    --radius-lg: 28px;
    --container: 1240px;
    --font-heading: "Plus Jakarta Sans", "Roboto", sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
}

body {
    color: var(--ink);
    background: var(--paper);
    font: 400 16px/1.55 var(--font-body);
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body { overflow-x: hidden; }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--purple-dark);
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); }
h2 { font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); }

.container {
    width: min(calc(100% - 48px), var(--container));
}

.section { padding: 88px 0; }
.section-heading { max-width: 760px; margin-bottom: 42px; }
.section-heading > p:last-child { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.eyebrow { color: var(--pink); font-size: .78rem; letter-spacing: .13em; }
.heading-squiggle { height: 3px; width: 48px; background: var(--yellow); border-radius: 999px; }
.centered .heading-squiggle { margin-inline: auto; }

.button {
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 9999px;
    font-size: .94rem;
    box-shadow: none;
}

.button-primary { background: var(--pink); }
.button-primary:hover { background: #d94a77; }
.button-outline { color: var(--purple-dark); border-color: rgba(120, 86, 154, .35); }
.button-light { color: var(--purple-dark); }
.text-link { color: var(--purple); }

.page-hero {
    min-height: 300px;
    background: linear-gradient(125deg, #563670, #78569a 58%, #9876b1);
}

.page-hero .container { min-height: 300px; }
.page-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); }
.page-hero p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; }
.page-hero .eyebrow { color: #ffd75f; }

.home-hero { min-height: 610px; }
.hero-content { min-height: 610px; }
.hero-content > p:not(.eyebrow) { font-size: 1.06rem; line-height: 1.7; }
.hero-content .eyebrow { color: #ffd75f; }

/* Public School navigation, adapted only for Kindergarten branding/content. */
.top-bar {
    background: linear-gradient(90deg, #563670 0%, #3d294b 100%) !important;
    color: #eee6f2 !important;
    position: relative !important;
    top: auto !important;
}

.top-bar__item,
.top-bar__link { color: #eee6f2 !important; }
.top-bar__item:hover,
.top-bar__link:hover { color: #ffd75f !important; }
.top-bar__cta {
    color: #251b2d !important;
    background: #f2b318 !important;
    box-shadow: 0 4px 12px rgba(242, 179, 24, .3) !important;
}
.top-bar__cta:hover { color: #251b2d !important; background: #d99a00 !important; }

.navbar {
    position: relative !important;
    top: 0 !important;
    border-bottom-color: rgba(86, 54, 112, .12) !important;
    transition: box-shadow .24s ease, border-color .24s ease !important;
}

.navbar.is-sticky {
    border-bottom-color: rgba(86, 54, 112, .18) !important;
    box-shadow: 0 10px 30px rgba(65, 44, 77, .14) !important;
}

.kg-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.kg-brand .logo__img {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    padding: 3px !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(65, 44, 77, .14) !important;
    object-fit: contain !important;
}

.kg-brand__text {
    display: flex;
    flex-direction: column;
    color: var(--purple-dark);
    font-family: var(--font-heading);
    line-height: 1.08;
    text-align: left;
}

.kg-brand__text strong {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.kg-brand__text span {
    margin-top: 5px;
    color: var(--purple);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nav__list > li > a { color: #40364d !important; }
.nav__list > li > a:hover,
.nav__list > li > a[aria-current="page"] {
    color: #78569a !important;
    background: #f4eef8 !important;
}

.nav__list > li > a.nav__campus-link {
    color: #40364d !important;
    background: transparent !important;
    box-shadow: none !important;
}
.nav__list > li > a.nav__campus-link:hover {
    color: #78569a !important;
    background: #f4eef8 !important;
}

.mobile-menu.is-open { display: block !important; }
.mobile-menu a { color: #40364d !important; }
.mobile-menu a:hover,
.mobile-menu a[aria-current="page"] { color: #78569a !important; background: #f4eef8 !important; }
.mobile-menu a.nav__campus-link {
    color: #40364d !important;
    background: transparent !important;
    border: 0 !important;
}
.mobile-menu__cta { color: #fff !important; background: #78569a !important; }
.mobile-menu .nav__campus-link { margin-top: 8px !important; }
.hamburger span { background: #563670 !important; }

.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The sticky state changes only shadow/border; keeping layout dimensions
   unchanged prevents the navbar from jumping while the page scrolls. */

/* Smooth desktop scroll-reveal navigation. The original header remains in
   the document flow while this compact copy slides in from the top. */
.navbar--scroll {
    position: fixed !important;
    inset: 0 0 auto;
    z-index: 110 !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-110%);
    transition: transform .32s ease, opacity .2s ease, box-shadow .24s ease;
}
.navbar--scroll.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(65, 44, 77, .16) !important;
}
.navbar--scroll .navbar__inner {
    min-height: 72px !important;
    padding: 8px 24px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}
.navbar--scroll .navbar__inner > .logo {
    order: 0 !important;
    margin: 0 auto 0 0 !important;
}
.navbar--scroll .kg-brand .logo__img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 12px rgba(65, 44, 77, .12) !important;
}
.navbar--scroll .kg-brand__text strong { font-size: 1rem; }
.navbar--scroll .kg-brand__text span {
    margin-top: 3px;
    font-size: .66rem;
    letter-spacing: .1em;
}
.navbar--scroll .nav__list {
    order: 1 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    margin: 0 0 0 auto !important;
}
.navbar--scroll .nav__list > li > a {
    padding: 8px 9px !important;
    font-size: .85rem !important;
}
.navbar--scroll .hamburger,
.navbar--scroll .mobile-menu { display: none !important; }

@media (max-width: 980px) {
    .navbar--scroll { display: none !important; }
}

/* Public School footer spacing and alignment with Kindergarten content. */
.site-footer {
    color: #eee6f2 !important;
    background: linear-gradient(180deg, #563670 0%, #3d294b 100%) !important;
    font-family: var(--font-body) !important;
}
.site-footer p { margin-top: 0; }
.footer__nav-list,
.footer__contact-list { margin: 0 !important; }
.kg-footer-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.kg-footer-lockup .footer__logo-link {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
    padding: 7px !important;
}
.kg-footer-lockup .footer__logo-img {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    object-fit: contain !important;
}
.kg-brand__text--footer { color: #fff; }
.kg-brand__text--footer strong { color: #fff; }
.kg-brand__text--footer span { color: #ffd75f; }
.footer__affil { color: #ffd75f !important; background: rgba(242, 179, 24, .13) !important; }
.footer__affil-dot,
.footer__col-head::after { background: #f2b318 !important; }
.footer__desc { max-width: 440px; color: rgba(255, 255, 255, .78) !important; }
.footer__nav-list a { color: #eee6f2 !important; }
.footer__nav-list a:hover { color: #ffd75f !important; }
.footer__social { color: #eee6f2 !important; }
.footer__social:hover { color: #3d294b !important; background: #f2b318 !important; }
.footer__contact-icon { color: #ffd75f !important; }
.footer__contact-label { color: #c9b9d5 !important; }
.footer__contact-value,
.footer__contact-value a { color: #eee6f2 !important; }
.footer__contact-value a:hover { color: #ffd75f !important; }
.footer__contact-value strong { color: #fff; }
.footer__copyright { color: #c9b9d5 !important; }
.footer__copyright a { color: #ffd75f !important; }

@media (max-width: 980px) {
    .navbar__inner {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .kg-brand .logo__img {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }

    .kg-brand__text strong { font-size: 1rem; }
    .kg-brand__text span { font-size: .7rem; }

}

@media (max-width: 720px) {
    .container { width: min(calc(100% - 32px), var(--container)); }
    .section { padding: 68px 0; }
    .home-hero,
    .hero-content { min-height: 560px; }

    .home-hero {
        overflow: clip;
        contain: paint;
    }

    .hero-slide,
    .hero-slide.is-active { transform: none; }

    .image-frame::before,
    .image-frame::after { display: none; }

    .image-sticker {
        right: 8px;
        max-width: calc(100% - 16px);
    }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); }
    h2 { font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem); }
    .kg-brand { gap: 9px !important; }
    .kg-brand .logo__img {
        width: 46px !important;
        height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }
    .kg-brand__text strong { font-size: .9rem; }
    .kg-brand__text span { margin-top: 3px; font-size: .61rem; letter-spacing: .08em; }
    .kg-footer-lockup { align-items: flex-start; }
    .home-hero,
    .hero-content { min-height: 520px; }
}

/* Keep the mobile footer in the same readable, left-aligned flow as the
   reference layout.  The legacy kindergarten stylesheet centers generic
   footer selectors below 640px, while the shared footer uses the
   footer__* naming scheme. */
@media (max-width: 768px) {
    .site-footer { text-align: left !important; }
    .footer__brand,
    .footer__col { text-align: left !important; }
    .kg-footer-lockup { justify-content: flex-start !important; }
    .footer__socials { justify-content: flex-start !important; }
    .footer__col-head { text-align: left !important; }
    .footer__col-head::after {
        left: 0 !important;
        transform: none !important;
    }
    .footer__nav-list { align-items: flex-start !important; text-align: left !important; }
    .footer__nav-list a { justify-content: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hamburger span { transition: none !important; }
}