:root {
    --kindersite-color-page: #e9f8fb;
    --kindersite-color-surface: #ffffff;
    --kindersite-color-surface-soft: #f8fcfb;
    --kindersite-color-text: #173b46;
    --kindersite-color-muted: #52707a;
    --kindersite-color-line: #cfe6e9;
    --kindersite-color-brand: #087f91;
    --kindersite-color-brand-strong: #075867;
    --kindersite-color-coral: #e45f65;
    --kindersite-color-yellow: #f7c84b;
    --kindersite-color-mint: #6dcaa5;
    --kindersite-color-violet: #8a71c9;
    --kindersite-color-focus: #a23d88;
    --kindersite-radius-small: 8px;
    --kindersite-radius-medium: 14px;
    --kindersite-radius-large: 24px;
    --kindersite-shadow-shell: 0 16px 46px rgba(24, 99, 113, 0.16);
    --kindersite-shadow-card: 0 8px 22px rgba(28, 91, 103, 0.1);
    --kindersite-space-1: 4px;
    --kindersite-space-2: 8px;
    --kindersite-space-3: 12px;
    --kindersite-space-4: 16px;
    --kindersite-space-5: 20px;
    --kindersite-space-6: 24px;
    --kindersite-space-8: 32px;
}

html {
    min-width: 300px;
    background: var(--kindersite-color-page);
}

body.kindersite-page {
    margin: 0;
    color: var(--kindersite-color-text);
    background:
        radial-gradient(circle at 10% 18%, rgba(247, 200, 75, 0.2) 0 5px, transparent 6px),
        radial-gradient(circle at 93% 36%, rgba(138, 113, 201, 0.14) 0 7px, transparent 8px),
        var(--kindersite-color-page);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.kindersite-shell,
.kindersite-shell * {
    box-sizing: border-box;
}

.kindersite-shell {
    width: calc(100% - 32px);
    max-width: 1360px;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background: var(--kindersite-color-surface);
    border-radius: 0 0 var(--kindersite-radius-large) var(--kindersite-radius-large);
    box-shadow: var(--kindersite-shadow-shell);
}

.kindersite-skip {
    position: fixed;
    z-index: 10000;
    top: var(--kindersite-space-2);
    left: var(--kindersite-space-2);
    padding: var(--kindersite-space-2) var(--kindersite-space-3);
    color: #ffffff;
    background: #102f37;
    border-radius: var(--kindersite-radius-small);
    transform: translateY(-170%);
}

.kindersite-skip:focus { transform: none; }

.kindersite-header {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 320px;
    align-items: center;
    padding: var(--kindersite-space-8) clamp(24px, 5vw, 72px);
    background-color: #e6f8fb;
    background-image: url("images/headers/kindergarten-learning-garden.jpg");
    background-position: center;
    background-size: cover;
}

.kindersite-header::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 7px;
    background: linear-gradient(90deg, #31b4d0, #73cda6 24%, #f7ce51 48%, #ee7b79 72%, #9879d0);
    content: "";
}

.kindersite-header__identity {
    width: min(57%, 710px);
    min-width: 0;
    padding: clamp(20px, 3vw, 34px);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.96);
    border-radius: var(--kindersite-radius-large);
    box-shadow: 0 12px 34px rgba(19, 106, 120, 0.13);
    backdrop-filter: blur(4px);
}

.kindersite-header__eyebrow {
    margin-bottom: var(--kindersite-space-3);
    color: var(--kindersite-color-brand);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.kindersite-header__title {
    margin: 0;
    color: var(--kindersite-color-brand-strong);
    font-size: clamp(27px, 3vw, 43px);
    font-weight: bold;
    line-height: 1.14;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.kindersite-nav-toggle {
    display: none;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--kindersite-space-2);
    margin: var(--kindersite-space-4) 0 0;
    padding: var(--kindersite-space-2) var(--kindersite-space-4);
    color: #ffffff;
    background: var(--kindersite-color-brand);
    border: 2px solid var(--kindersite-color-brand);
    border-radius: 999px;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

.kindersite-nav-toggle:hover,
.kindersite-nav-toggle:focus-visible { background: var(--kindersite-color-brand-strong); }

.kindersite-nav-toggle__icon,
.kindersite-nav-toggle__icon::before,
.kindersite-nav-toggle__icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
}

.kindersite-nav-toggle__icon { position: relative; }
.kindersite-nav-toggle__icon::before,
.kindersite-nav-toggle__icon::after { position: absolute; left: 0; content: ""; }
.kindersite-nav-toggle__icon::before { top: -6px; }
.kindersite-nav-toggle__icon::after { top: 6px; }

.kindersite-toolbar {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: var(--kindersite-space-4);
    padding: var(--kindersite-space-2) var(--kindersite-space-6);
    color: var(--kindersite-color-muted);
    background: #fff9e8;
    border-bottom: 1px solid #f0dfae;
    font-size: 14px;
}

.kindersite-toolbar a,
.kindersite-breadcrumb a { color: var(--kindersite-color-brand-strong); text-underline-offset: 3px; }

.kindersite-toolbar__links { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--kindersite-space-4); }
.kindersite-toolbar__links span:empty { display: none; }

.kindersite-admin:empty { display: none; }
.kindersite-admin { overflow-x: auto; }
.kindersite-admin table.edit { width: 100%; border-collapse: collapse; color: var(--kindersite-color-text); background: #fff8db; font-size: 13px; }
.kindersite-admin table.edit td { padding: var(--kindersite-space-1); border: 1px solid #e3cc7a; }
.kindersite-admin table.edit a { color: #533f00; }

.kindersite-layout {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    align-items: stretch;
}

.kindersite-sidebar {
    min-width: 0;
    min-height: 580px;
    padding: var(--kindersite-space-6) var(--kindersite-space-4);
    background: linear-gradient(180deg, #effbf9, #f8fcfb);
    border-right: 1px solid var(--kindersite-color-line);
}

.kindersite-sidebar__label {
    margin-bottom: var(--kindersite-space-3);
    color: var(--kindersite-color-brand-strong);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kindersite-search { margin-bottom: var(--kindersite-space-5); }
.kindersite-search form { margin: 0; }
.kindersite-search #searchbox { display: flex; gap: var(--kindersite-space-2); }
.kindersite-search .text {
    width: auto;
    min-width: 0;
    height: 40px;
    flex: 1 1 auto;
    padding: 0 var(--kindersite-space-2);
    color: var(--kindersite-color-text);
    background: var(--kindersite-color-surface);
    border: 1px solid var(--kindersite-color-line);
    border-radius: var(--kindersite-radius-small);
    font: inherit;
}
.kindersite-search .submit {
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0 var(--kindersite-space-3);
    color: #ffffff;
    background: var(--kindersite-color-brand);
    border: 1px solid var(--kindersite-color-brand);
    border-radius: var(--kindersite-radius-small);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}
.kindersite-search .submit:hover,
.kindersite-search .submit:focus-visible { background: var(--kindersite-color-brand-strong); }

.kindersite-navigation ul { margin: 0; padding: 0; list-style: none; }
.kindersite-navigation ul ul { margin: 4px 0 6px var(--kindersite-space-3); padding-left: var(--kindersite-space-2); border-left: 2px solid #bce1da; }
.kindersite-navigation li { margin: 0; padding: 0; }
.kindersite-navigation li > a,
.kindersite-navigation li.sdoc,
.kindersite-navigation li.sdocs {
    display: block;
    margin: 3px 0;
    padding: 9px 12px;
    color: var(--kindersite-color-text);
    border-radius: var(--kindersite-radius-small);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.kindersite-navigation li > a:hover,
.kindersite-navigation li > a:focus-visible { color: var(--kindersite-color-brand-strong); background: #dff4ef; }
.kindersite-navigation li.sdoc,
.kindersite-navigation li.sdocs { color: #ffffff; background: var(--kindersite-color-brand); font-weight: bold; }
.kindersite-navigation li.sdoc > a,
.kindersite-navigation li.sdocs > a { color: inherit; }

.kindersite-main { min-width: 0; padding: clamp(24px, 4vw, 52px); background: var(--kindersite-color-surface); }
.kindersite-main:focus { outline: none; }
.kindersite-content { min-height: 470px; }
.kindersite-content::after { display: block; clear: both; content: ""; }

.kindersite-content h1,
.kindersite-content h2,
.kindersite-content h3,
.kindersite-content h4 { color: var(--kindersite-color-brand-strong); line-height: 1.25; text-wrap: balance; }
.kindersite-content h1 { margin: 0 0 22px; font-size: clamp(29px, 3vw, 40px); }
.kindersite-content h2 { margin: 32px 0 12px; font-size: clamp(23px, 2.2vw, 30px); }
.kindersite-content h3 { margin: 26px 0 10px; font-size: 21px; }
.kindersite-content h4 { margin: 22px 0 8px; font-size: 18px; }
.kindersite-content h1 *,
.kindersite-content h2 *,
.kindersite-content h3 *,
.kindersite-content h4 * { color: inherit !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }

.kindersite-content p { margin: 0 0 1em; }
.kindersite-content a { color: #076d80; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kindersite-content a:hover { color: #9b3f70; }
.kindersite-content img { max-width: 100%; height: auto; }
.kindersite-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.kindersite-content th,
.kindersite-content td { padding: 9px 11px; border: 1px solid var(--kindersite-color-line); text-align: left; vertical-align: top; }
.kindersite-content th { color: var(--kindersite-color-brand-strong); background: #eaf8f5; }
.kindersite-content blockquote { margin: 24px 0; padding: 18px 22px; color: #593959; background: #fff1f5; border-left: 5px solid var(--kindersite-color-coral); border-radius: 0 var(--kindersite-radius-medium) var(--kindersite-radius-medium) 0; }
.kindersite-content input,
.kindersite-content select,
.kindersite-content textarea { max-width: 100%; padding: 8px; color: var(--kindersite-color-text); background: #ffffff; border: 1px solid var(--kindersite-color-line); border-radius: var(--kindersite-radius-small); font: inherit; }

.kindersite-lead { max-width: 780px; color: #355e68; font-size: 19px; }
.kindersite-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kindersite-space-4); margin: 28px 0 34px; }
.kindersite-card { position: relative; min-width: 0; padding: 22px; overflow: hidden; border: 1px solid var(--kindersite-color-line); border-radius: var(--kindersite-radius-medium); box-shadow: var(--kindersite-shadow-card); }
.kindersite-card::before { position: absolute; top: -22px; right: -18px; width: 72px; height: 72px; border-radius: 50%; opacity: 0.35; content: ""; }
.kindersite-card h2 { margin-top: 0; font-size: 23px; }
.kindersite-card--sun { background: #fffae9; border-color: #eddc9b; }
.kindersite-card--sun::before { background: var(--kindersite-color-yellow); }
.kindersite-card--mint { background: #edfaf6; border-color: #bfe5d7; }
.kindersite-card--mint::before { background: var(--kindersite-color-mint); }

.kindersite-content ul.submenu { margin: 28px 0 0; padding: 18px 18px 18px 40px; background: #f2f9fa; border: 1px solid var(--kindersite-color-line); border-radius: var(--kindersite-radius-medium); }

.kindersite-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--kindersite-space-3); margin-top: var(--kindersite-space-8); padding-top: var(--kindersite-space-4); border-top: 1px solid var(--kindersite-color-line); }
.kindersite-pager a { color: var(--kindersite-color-brand-strong); }
.kindersite-pager__top { text-align: center; }
.kindersite-pager__next { text-align: right; }

.kindersite-footer {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: var(--kindersite-space-4);
    padding: var(--kindersite-space-4) var(--kindersite-space-6);
    color: #dff7f6;
    background: var(--kindersite-color-brand-strong);
    border-top: 5px solid var(--kindersite-color-yellow);
    font-size: 14px;
}
.kindersite-footer a { color: #ffffff; }

.kindersite-shell a:focus-visible,
.kindersite-shell button:focus-visible,
.kindersite-shell input:focus-visible,
.kindersite-shell select:focus-visible,
.kindersite-shell textarea:focus-visible { outline: 3px solid var(--kindersite-color-focus); outline-offset: 2px; }

@media (max-width: 980px) {
    .kindersite-header { min-height: 290px; background-position: 58% center; }
    .kindersite-header__identity { width: 62%; }
}

@media (max-width: 860px) {
    .kindersite-shell { width: 100%; border-radius: 0; }
    .kindersite-header { min-height: 300px; padding: 24px; background-position: 62% center; }
    .kindersite-header__identity { width: min(74%, 600px); }
    .kindersite-nav-toggle { display: inline-flex; }
    .kindersite-layout { display: block; }
    .kindersite-sidebar { display: none; min-height: 0; border-right: 0; border-bottom: 1px solid var(--kindersite-color-line); }
    .kindersite-sidebar--open { display: block; }
    .kindersite-navigation ul ul { margin-left: 18px; }
}

@media (max-width: 620px) {
    body.kindersite-page { font-size: 15px; }
    .kindersite-header { min-height: 360px; align-items: flex-start; padding: 18px; background-position: 70% center; }
    .kindersite-header__identity { width: 100%; margin-top: 0; padding: 18px; background: rgba(255, 255, 255, 0.9); }
    .kindersite-header__eyebrow { font-size: 11px; }
    .kindersite-header__title { font-size: clamp(24px, 7vw, 32px); }
    .kindersite-toolbar { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
    .kindersite-toolbar__links { gap: 8px 14px; }
    .kindersite-main { padding: 26px 18px 36px; }
    .kindersite-cards { grid-template-columns: 1fr; }
    .kindersite-footer { align-items: flex-start; flex-direction: column; }
}

@media print {
    body.kindersite-page { background: #ffffff; }
    .kindersite-shell { width: 100%; max-width: none; box-shadow: none; }
    .kindersite-header { min-height: 0; padding: 20px; background: #ffffff; border-bottom: 2px solid #555555; }
    .kindersite-header__identity { width: 100%; padding: 0; box-shadow: none; }
    .kindersite-toolbar,
    .kindersite-sidebar,
    .kindersite-nav-toggle,
    .kindersite-pager,
    .kindersite-footer__links { display: none !important; }
    .kindersite-layout { display: block; }
    .kindersite-main { padding: 20px 0; }
    .kindersite-footer { color: #333333; background: #ffffff; border-top: 1px solid #999999; }
}