/* Extra styles for the school website (added on top of site.css). Safe to edit. */
html { scroll-padding-top: 76px; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
.font-display { font-family: var(--font-display); }
.site-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* Top bar */
.site-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--card) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.site-nav .site-wrap { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.site-logo { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--primary); text-decoration: none; }
.site-logo-img { height: 44px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.site-logo .ph-logo-slot { display: none; min-height: 0; width: auto; height: 44px; padding: 0 .8rem; font-size: .75rem; border-radius: .5rem; white-space: nowrap; }
.site-links { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; font-size: .9rem; font-weight: 600; }
.site-links a { color: var(--foreground); text-decoration: none; }
.site-links a:hover { color: var(--accent); }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--card); }
.lang-switch button { border: 0; background: transparent; padding: .3rem .7rem; font: 700 .75rem var(--font-sans); letter-spacing: .05em; cursor: pointer; color: var(--muted-foreground); }
.lang-switch button.active { background: var(--primary); color: var(--primary-foreground); }
.nav-burger { display: none; border: 1px solid var(--border); background: var(--card); border-radius: .5rem; padding: .4rem .7rem; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 860px) {
    .nav-burger { display: block; }
    .site-nav .lang-switch { margin-left: auto; }
    .site-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 1rem; flex-direction: column; align-items: flex-start; margin: 0; }
    .site-nav.is-open .site-links { display: flex; }
}

/* Hero */
.hero-grid { display: grid; gap: 2.5rem; align-items: center; padding: 4.5rem 1rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 768px) { .hero-grid { grid-template-columns: 1fr 1fr; } }
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; font-size: .85rem; }
.hero-chips > span { border: 1px solid color-mix(in oklab, var(--primary-foreground) 30%, transparent); border-radius: 999px; padding: .25rem .8rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.1; font-weight: 600; margin-top: 1rem; }

/* Media placeholders and real media */
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; border: 2px dashed var(--border); border-radius: .9rem; background: var(--muted); color: var(--muted-foreground); font-size: .85rem; font-weight: 600; min-height: 90px; }
.ph-square { aspect-ratio: 1 / 1; }
.ph-43 { aspect-ratio: 4 / 3; }
.ph-video { aspect-ratio: 16 / 9; }
.ph-map { aspect-ratio: 16 / 7; }
.ph-logo { width: 6rem; height: 6rem; flex-shrink: 0; }
.bg-hero .ph { border-color: color-mix(in oklab, var(--primary-foreground) 35%, transparent); background: color-mix(in oklab, var(--primary-foreground) 10%, transparent); color: var(--primary-foreground); }
.rt-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: .9rem; overflow: hidden; background: #000; }
.rt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video { max-width: 100%; border-radius: .9rem; background: #000; }
.media-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .media-grid { grid-template-columns: repeat(4, 1fr); } .media-grid.three { grid-template-columns: repeat(3, 1fr); } }
.media-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .9rem; display: block; }
.campus-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .9rem; display: block; }

/* Sections */
.sec { max-width: 72rem; margin: 0 auto; padding: 4rem 1rem; }
.sec-alt { background: color-mix(in oklab, var(--secondary) 50%, transparent); }
.sec h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 600; margin-top: .5rem; }
.sec .lead { margin: .75rem 0 2.2rem; max-width: 42rem; color: var(--muted-foreground); }
.grid-2 { display: grid; gap: 1rem; }
.grid-3 { display: grid; gap: 1rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.chip-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .chip-grid { grid-template-columns: repeat(3, 1fr); } }
.chip { background: var(--secondary); border-radius: .75rem; padding: 1rem; font-weight: 600; }
.accred { display: flex; align-items: center; gap: 1rem; background: var(--secondary); border-radius: 1rem; padding: 1rem; }
.accred img { width: 6rem; height: 6rem; object-fit: contain; border-radius: .75rem; background: #fff; }

/* Choice cards and intakes (filled by the runtime) */
.rt-card { display: flex; flex-direction: column; gap: .25rem; text-align: left; border: 2px solid var(--border); background: var(--card); border-radius: .9rem; padding: 1rem; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .15s; }
.rt-card:hover { transform: translateY(-2px); }
.rt-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
.rt-card-name { font-weight: 700; }
.rt-card-sub, .rt-card-desc { font-size: .85rem; color: var(--muted-foreground); }
.rt-card-price { font-weight: 700; color: var(--accent); font-size: .9rem; }
.cards-row { display: grid; gap: .75rem; }
@media (min-width: 640px) { .cards-row { grid-template-columns: repeat(3, 1fr); } .cards-row.two { grid-template-columns: repeat(2, 1fr); } }
.intake-row { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem; }
.rt-intake { min-width: 150px; border: 1px solid var(--border); background: var(--card); border-radius: .9rem; padding: 1rem; }
.rt-intake-day { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--primary); }
.rt-intake-day span { margin-left: .25rem; font-size: 1rem; color: var(--accent); }
.rt-intake-name { margin-top: .25rem; font-size: .85rem; font-weight: 600; }
.rt-intake-year { font-size: .75rem; color: var(--muted-foreground); }

/* Brochure tabs */
.tabs-layout { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .tabs-layout { grid-template-columns: 240px 1fr; } }
.tab-list { list-style: none; margin: 0; padding: 0; display: none; max-height: 80vh; overflow-y: auto; }
@media (min-width: 1024px) { .tab-list { display: block; } .tab-select { display: none; } }
.tab-list li { padding: .5rem .75rem; border-radius: .5rem; cursor: pointer; font-size: .9rem; }
.tab-list li:hover { background: var(--secondary); }
.tab-list li.is-on { background: var(--primary); color: var(--primary-foreground); font-weight: 700; }
.tab-num { opacity: .6; margin-right: .4rem; }
.panel h3 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; }
.panel > p.lead { margin: .5rem 0 1.5rem; color: var(--muted-foreground); }
.panel h4 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .6rem; }
.panel ul.dots { margin: .5rem 0 0 1.2rem; list-style: disc; }
.panel ul.dots li { margin: .3rem 0; }
.tab-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.tab-foot button:disabled { opacity: .4; cursor: default; }
[hidden] { display: none !important; }
body.is-editing .panel[hidden] { display: block !important; }

/* Calculator */
.calc-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .calc-grid { grid-template-columns: 1fr 340px; } }
.calc-summary { background: var(--primary); color: var(--primary-foreground); border-radius: 1.1rem; padding: 1.5rem; height: fit-content; }
@media (min-width: 768px) { .calc-summary { position: sticky; top: 90px; } }
.calc-total { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--accent); }
.calc-summary ul { margin-top: 1rem; list-style: none; padding: 0; font-size: .9rem; display: grid; gap: .25rem; }
.stack > * + * { margin-top: 1.25rem; }
input[type="range"] { width: 100%; accent-color: var(--primary); }

/* Application form */
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
fieldset h4 { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rt-bad { border-color: var(--destructive) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); border-radius: .75rem; }
.rt-status { display: none; padding: .9rem 1rem; border-radius: .75rem; font-weight: 600; margin-bottom: 1rem; }
.rt-status.err { background: color-mix(in oklab, var(--destructive) 12%, white); color: var(--destructive); }
.rt-success { background: var(--card); border: 2px solid var(--accent); border-radius: 1.1rem; padding: 2rem; text-align: center; }
.rt-success h3 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 1rem; }
.rt-success p { margin: .4rem 0; }
.rt-success .btn-ghost { margin-top: 1.2rem; }
.consent { display: flex; gap: .75rem; background: var(--secondary); border-radius: .75rem; padding: 1rem; font-size: .8rem; color: var(--muted-foreground); line-height: 1.6; }
.banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-radius: 1.1rem; padding: 1.5rem; margin-bottom: 2rem; }

/* Footer */
.site-foot { background: var(--primary); color: var(--primary-foreground); padding: 3rem 1rem; text-align: center; }
.site-foot .row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1rem; }
.site-foot a.link { color: inherit; opacity: .85; }
.btn-accent, .btn-primary, .btn-ghost { display: inline-flex; border-radius: .75rem; cursor: pointer; text-decoration: none; border: 0; }
.btn-ghost { border: 1px solid var(--border); background: var(--card); }
a.btn-accent:hover, button.btn-accent:hover { filter: brightness(1.05); }