/*
 * Sri Sai Vidyanikethan — site additions on top of the Udaya kit (ssvn.css).
 * ssvn.css is an unedited copy of the Udaya kit (design system version 1792054169-5336, copied 15 October 2026).
 * To update it, copy the new kit/ssvn.css over it; never edit it here.
 * Tokens only: no new colours, fonts or sizes. Anything here that proves useful belongs back in the design system.
 */

/* ===== Theme toggle (proposed Udaya component: ThemeToggle) ===== */
.sv-theme { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ink-inverse-muted); border-radius: var(--radius-round); background: transparent; color: var(--ink-inverse); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.sv-theme:hover { background: var(--ink-inverse); color: var(--night); }
.sv-theme__sun { display: none; }
[data-theme="dhuni"] .sv-theme__sun { display: block; }
[data-theme="dhuni"] .sv-theme__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dawn"]) .sv-theme__sun { display: block; }
  :root:not([data-theme="dawn"]) .sv-theme__moon { display: none; }
}
/* Phones: keep the phone number, student login and toggle on one line. */
@media (max-width: 420px) {
  .sv-utility__inner { gap: var(--space-3); }
  .sv-utility__end { gap: var(--space-2); }
  .sv-utility__link .sv-icon:last-child { display: none; }
}

/* ===== Header: the full menu needs ~1140px beside the school's name; below 1200px use the menu button =====
   (Same rules as the kit's max-width: 1023px block, extended to 1199px so the name is never squeezed or cut off.) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .sv-header__bar { flex-wrap: wrap; padding: var(--space-2) var(--space-4); }
  .sv-header__menu { display: inline-flex; }
  .sv-nav, .sv-header__cta { display: none; }
  .sv-header.is-open .sv-nav { display: flex; flex-direction: column; order: 3; width: 100%; margin: 0; padding-bottom: var(--space-3); }
  .sv-header.is-open .sv-header__cta { display: inline-flex; order: 4; width: 100%; margin-bottom: var(--space-3); }
}

/* ===== Sticky header: the menu stays in view while scrolling and after jumping to a section =====
   (The utility bar above it scrolls away.) Sections stop just below the header instead of under it. */
.sv-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.sv-header.is-open .sv-header__bar { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 4px); overflow-y: auto; }
[id] { scroll-margin-top: calc(var(--header-height) + 4px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Sections receive focus after a menu jump (so keyboard users continue from there); they need no focus ring. */
section[tabindex="-1"]:focus { outline: none; }

/* ===== Header menu: show a close icon while open ===== */
.sv-header__menu-close { display: none; }
.sv-header.is-open .sv-header__menu-open { display: none; }
.sv-header.is-open .sv-header__menu-close { display: block; }

/* ===== Hero headline: the school motto in Telugu, in kumkum (Udaya: the motto's colour), with its meaning below.
   Tiro Telugu needs a line height around 1.6 for its vowel signs. Sizes step down with the hero's width. ===== */
.sv-hero__motto { margin: 0; font-family: var(--font-telugu); font-weight: 400; font-size: 52px; line-height: 84px; color: var(--kumkum); text-wrap: balance; }
.sv-hero__motto-en { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; color: var(--ink); }
@container (max-width: 820px) {
  .sv-hero__motto { font-size: 40px; line-height: 64px; }
  .sv-hero__motto-en { font-size: 19px; line-height: 27px; }
}
@container (max-width: 420px) {
  .sv-hero__motto { font-size: 34px; line-height: 56px; }
}

/* ===== FactStrip, flat variant (proposed to Udaya): no raised card or overlap, so it reads as information under the
   hero rather than one big button. Four across with hairline dividers; two across below 1100px; a list on phones. ===== */
.sv-facts-wrap--flat { margin-top: 0; padding-top: var(--space-7); padding-bottom: var(--space-7); }
.sv-facts-wrap--flat .sv-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.sv-facts-wrap--flat .sv-fact { padding: var(--space-2) var(--space-5); }
.sv-facts-wrap--flat .sv-fact:first-child { padding-left: 0; }
.sv-facts-wrap--flat .sv-fact + .sv-fact { border-left: 1px solid var(--line); }
@media (max-width: 1099px) {
  .sv-facts-wrap--flat .sv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .sv-facts-wrap--flat .sv-fact { padding: 0 var(--space-4); }
  .sv-facts-wrap--flat .sv-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .sv-facts-wrap--flat { padding-top: var(--space-5); padding-bottom: var(--space-6); }
  .sv-facts-wrap--flat .sv-facts { grid-template-columns: 1fr; row-gap: 0; }
  .sv-facts-wrap--flat .sv-fact { padding: var(--space-4) 0; border-left: 0; }
  .sv-facts-wrap--flat .sv-fact + .sv-fact { border-left: 0; border-top: 1px solid var(--line); }
}

/* ===== Hero, stacked (phones/tablets): the sun and its halo rise ~62px above the photo, more than the kit's
   48px gap, so they ran into the buttons. Make room for them. ===== */
@container (max-width: 820px) {
  .sv-hero__grid { gap: calc(var(--space-7) + var(--space-6)); }
}

/* ===== CtaBand on phones: keep the decorative sun in the corner, clear of the stacked buttons ===== */
@media (max-width: 560px) {
  .sv-cta__sun { width: 240px; right: -90px; bottom: -150px; }
}

/* ===== Text for screen readers and search engines only (e.g. the school's name inside the home page's h1) ===== */
.sv-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Tinted outline buttons (proposed to Udaya): a secondary button whose outline and text carry a meaning colour —
   neem for WhatsApp and messaging, saffron for admissions. Hover fills with the matching soft tint. ===== */
.sv-btn--secondary.sv-btn--tint-neem { border-color: var(--neem); color: var(--neem); }
.sv-btn--secondary.sv-btn--tint-neem:hover { background: var(--neem-soft); }
.sv-btn--secondary.sv-btn--tint-saffron { border-color: var(--saffron-ink); color: var(--saffron-ink); }
.sv-btn--secondary.sv-btn--tint-saffron:hover { background: var(--saffron-soft); }

/* ===== Hero buttons (three): slimmer side padding so they fit on one row beside the photo, and when they do wrap
   (narrow columns, phones) they stretch to fill each row instead of leaving one button stranded at the left. ===== */
.sv-hero__actions .sv-btn { flex: 1 1 auto; }
.sv-hero__actions .sv-btn--lg { padding-left: var(--space-5); padding-right: var(--space-5); }

/* ===== Places list (proposed to Udaya): villages on the bus routes, in balanced columns on a raised panel ===== */
.sv-places { padding: var(--space-5) var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sv-places__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 400; }
.sv-places__title .sv-icon { color: var(--saffron-ink); }
.sv-places__list { margin: 0; padding: 0; list-style: none; column-width: 13rem; column-gap: var(--space-6); }
.sv-places__list li { position: relative; break-inside: avoid; padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.sv-places__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: var(--radius-round); background: var(--saffron); }
@media (max-width: 520px) { .sv-places { padding: var(--space-4); } }

/* ===== Layout helpers that replace the kit's inline styles ===== */
.sv-nowrap { white-space: nowrap; }
.sv-quick-grid, .sv-video-row { margin-top: var(--space-7); }
.sv-split--center { align-items: center; }
.sv-narrow { max-width: 760px; }
.sv-video-row__title { margin: var(--space-1) 0 0; }
.sv-video-row__text { margin: var(--space-3) 0; }

/* ===== Notices ===== */
.sv-notice__title, .sv-sched__title, .sv-info__title, .sv-pagehead__title { overflow-wrap: anywhere; }
.sv-notice__title, .sv-sched__title, .sv-sched__when { text-wrap: pretty; }
.sv-notice__te { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 28px; color: var(--kumkum); }
.sv-empty { margin: 0; padding: var(--space-5) var(--space-2); color: var(--ink-muted); }
.sv-feed-link { margin: var(--space-4) 0 0; }
.sv-feed-link a, .sv-back a { display: inline-flex; align-items: center; gap: var(--space-2); }

/* One notice's text (Markdown) */
.sv-prose { max-width: var(--measure); font-size: 18px; line-height: 30px; }
.sv-prose > :first-child { margin-top: 0; }
.sv-prose > :last-child { margin-bottom: 0; }
.sv-prose p, .sv-prose ul, .sv-prose ol { margin: 0 0 var(--space-4); }
.sv-prose li + li { margin-top: var(--space-1); }
.sv-prose h2, .sv-prose h3 { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-display); font-weight: 400; }
.sv-prose a { color: var(--link); }
.sv-prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.sv-notice-files { margin-top: var(--space-6); }
.sv-back { margin: var(--space-7) 0 0; }