/* Direction: friendly Indian school — warm cream paper, navy purple, golden yellow, red and sky blue accents, rounded Baloo display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fffaf0;
  --surface: #ffffff;
  --surface-2: #f1ecfb;
  --border: #dcd8d1;
  --border-strong: #b5b1ae;
  --ink: #1f1744;
  --muted: #5b5478;
  --accent: #3a2a85;
  --accent-hover: #312471;
  --accent-ink: #ffffff;
  --accent-text: #3a2a85;
  --accent-strong: #2a1a6e;
  --accent-soft: #e9e3fa;
  --accent-border: #a69cc0;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3ebdb;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e6d4;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7dfd7;
  --danger-strong: #b91c1c;
  --chart-1: #3a2a85;
  --chart-2: #8a2c69;
  --chart-3: #7d340b;
  --chart-4: #475904;
  --chart-5: #045668;
  --chart-6: #3060b5;

  --font-display: "Baloo 2", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-body: "Nunito", "Noto Sans Devanagari", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --x-navy: #2a1a6e;
  --x-red: #c8202f;
  --x-gold: #f6b60b;
  --x-sky: #5bbcf2;
  --x-wa: #17803d;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", "Noto Sans Devanagari", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #080613;
  --surface: #211f2b;
  --surface-2: #14121f;
  --border: #2b2934;
  --border-strong: #52515a;
  --ink: #fffaf0;
  --muted: #9c9898;
  --accent: #3a2a85;
  --accent-hover: #584a97;
  --accent-ink: #ffffff;
  --accent-text: #9087bb;
  --accent-strong: #867db5;
  --accent-soft: #130e2c;
  --accent-border: #1e1646;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0b211c;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2e1711;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2f0b15;
  --danger-strong: #d16969;
  --chart-1: #6860bf;
  --chart-2: #c5639f;
  --chart-3: #c45f2e;
  --chart-4: #90871a;
  --chart-5: #17966d;
  --chart-6: #148fd6;
}

/* Language switch: English is the default, Hindi shows when <html data-lang="hi"> */
[data-lang-hi] { display: none; }
html[data-lang="hi"] [data-lang-hi] { display: inline; }
html[data-lang="hi"] [data-lang-en] { display: none; }
.lang-btn { transition: background 0.15s; }
html:not([data-lang="hi"]) .lang-en,
html[data-lang="hi"] .lang-hi { @apply bg-accent text-accent-ink; }

/* Announcement ticker */
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-row { display: flex; flex-shrink: 0; padding: 0.55rem 0; white-space: nowrap; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Logo mark (monogram until the real logo is added) */
.logo-mark {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; flex-shrink: 0;
  border-radius: 50%; background: var(--x-navy); color: var(--x-gold);
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 3px var(--x-gold), 0 0 0 5px var(--x-red);
}

/* Buttons in school colours */
.btn-gold, .btn-gold:hover { background: var(--x-gold); color: var(--x-navy); border-color: var(--x-gold); }
.btn-red, .btn-red:hover { background: var(--x-red); color: var(--x-on-photo); border-color: var(--x-red); }
.btn-gold:hover, .btn-red:hover { filter: brightness(0.94); }
.btn-ghost-light, .btn-ghost-light:hover { background: transparent; color: var(--x-on-photo); border: 2px solid var(--x-on-photo); }
.btn-ghost-light:hover { background: color-mix(in srgb, var(--x-on-photo) 14%, transparent); }

/* Hero decoration */
.hero-pattern {
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--x-sky) 22%, transparent) 0 90px, transparent 91px),
    radial-gradient(circle at 92% 80%, color-mix(in srgb, var(--x-gold) 20%, transparent) 0 140px, transparent 141px);
}
.blob { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; overflow: hidden; border: 6px solid var(--x-gold); }
.sticker {
  display: grid; place-items: center; text-align: center; width: 7.5rem; height: 7.5rem; border-radius: 50%;
  background: var(--x-red); color: var(--x-on-photo); font-family: var(--font-display); font-weight: 800;
  line-height: 1.05; transform: rotate(-10deg); box-shadow: 0 0 0 4px var(--x-gold);
  animation: wobble 3.4s ease-in-out infinite;
}
@keyframes wobble { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-4deg) scale(1.05); } }
html.reduced-motion .sticker, html.reduced-motion .ticker-track { animation: none; }

.menu-summary { list-style: none; cursor: pointer; }
.menu-summary::-webkit-details-marker { display: none; }
.step-no {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; flex-shrink: 0;
  background: var(--x-gold); color: var(--x-navy); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
}
table.school-table { width: 100%; border-collapse: collapse; }
table.school-table th { text-align: left; background: var(--x-navy); color: var(--x-on-photo); padding: 0.8rem 1rem; font-weight: 700; }
table.school-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
table.school-table tr:nth-child(even) td { background: var(--surface-2); }
.table-scroll { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); }