/*
 * Skooly public-site design system.
 * Shared tokens (color / type / spacing / radius / shadow) for the
 * server-rendered public website. Views keep their own small, page-specific
 * <style> blocks for layout, but reach for these variables and utility
 * classes instead of hardcoding colors/gradients per file.
 *
 * The primary color intentionally matches react-app/tailwind.config.js's
 * `primary` scale so the public site and the portal read as one product.
 */

:root {
  /* Brand */
  --color-primary-50: #eff4ff;
  --color-primary-100: #dce6ff;
  --color-primary-200: #b9cdff;
  --color-primary-300: #8eacfb;
  --color-primary-400: #5c82f0;
  --color-primary-500: #3b63de;
  --color-primary-600: #2748be;
  --color-primary-700: #1d3894;
  --color-primary-800: #172c71;
  --color-primary-900: #14245a;
  /* Same three steps as rgb triplets - Bootstrap's utilities compose with
     an opacity (rgba(var(--bs-primary-rgb), .5)) and so need the channels,
     which CSS cannot extract from a hex custom property. */
  --color-primary-600-rgb: 39, 72, 190;
  --color-primary-700-rgb: 29, 56, 148;
  --color-primary-800-rgb: 23, 44, 113;

  /* Neutral / ink */
  --color-ink: #1f2937;
  --color-ink-soft: #4b5563;
  --color-ink-muted: #6b7280;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f8fb;
  --color-border: #e5e7eb;

  /* Semantic (kept close to Bootstrap's own so the two systems agree) */
  --color-success: #198754;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  /* Spacing scale (rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation - restrained, no heavy card shadows */
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-raised: 0 8px 20px -8px rgba(15, 23, 42, 0.16), 0 2px 6px -2px rgba(15, 23, 42, 0.06);

  /* Typography: an interface family for chrome (nav/buttons/labels) and a
     book-style reading family for prose (paragraphs, notices, bios) - per
     language, since a Bangla serif and an English serif are different
     fonts. Arabic uses one naskh family for both, matching how Arabic
     religious/institutional sites are typically set. */
  --font-ui-bn: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
  --font-read-bn: 'Noto Serif Bengali', 'Hind Siliguri', serif;
  --font-ui-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-read-en: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ar: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  /* A modern, stylized display face for the school's own name/wordmark -
     deliberately distinct from --font-ar, which stays a classic Naskh
     book face for actual Arabic reading content (notices, bios, prose).
     Cairo over the denser Kufic styles - open counters and even spacing
     keep it readable at large/bold sizes instead of looking congested. */
  --font-ar-display: 'Cairo', 'Tajawal', var(--font-ar);
}

html[lang='bn'] {
  --font-ui: var(--font-ui-bn);
  --font-read: var(--font-read-bn);
}
html[lang='en'] {
  --font-ui: var(--font-ui-en);
  --font-read: var(--font-read-en);
}
html[lang='ar'] {
  --font-ui: var(--font-ar);
  --font-read: var(--font-ar);
}

body {
  font-family: var(--font-ui, var(--font-ui-en));
  color: var(--color-ink);
}

/* Reading content - the "like a book" feel - stays on the serif/reading
   family while headings, nav, buttons and labels stay on the interface
   family for a crisp, modern shell around that content. */
p,
.card-text,
.notice-excerpt,
.page-content,
.prose,
.prose p,
blockquote {
  font-family: var(--font-read, var(--font-read-en));
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.navbar, .nav-link, .btn, .dropdown-menu, .badge,
.form-label, .form-control, .form-select {
  font-family: var(--font-ui, var(--font-ui-en));
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--color-ink);
}

/* Mixed-direction content (Arabic text carrying embedded Latin numerals or
   names) - isolate dynamic fragments so bidi reordering never scrambles them. */
.content, .page-content, .card-text {
  unicode-bidi: isolate;
}

/* One restrained, single-hue brand gradient - replaces the old
   purple-to-violet two-hue gradient repeated across every page. */
.brand-gradient {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
  color: #fff;
}

.brand-surface {
  background: var(--color-surface-muted);
}

.text-brand {
  color: var(--color-primary-600) !important;
}

.shadow-soft { box-shadow: var(--shadow-soft) !important; }
.shadow-raised { box-shadow: var(--shadow-raised) !important; }

/* Comfortable touch targets on small screens - buttons/nav links/dropdown
   items should never be harder to tap than ~44px. */
@media (max-width: 767.98px) {
  .btn { min-height: 44px; }
  .nav-link { min-height: 44px; display: flex; align-items: center; }
  .dropdown-item { min-height: 44px; display: flex; align-items: center; }
}

/* ---- Reusable presentational primitives, used across the public site so
   pages stop reinventing "card with icon" / "stat tile" per view. ---- */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.icon-badge-lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.75rem;
}

.section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-600);
  margin-bottom: var(--space-2);
}

.section-title {
  font-weight: 700;
  color: var(--color-ink);
}

/* Individual stat tile - replaces plain numbers floating in a shared box. */
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary-600);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  height: 100%;
}

.stat-tile .stat-tile-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary-700);
  line-height: 1.1;
}

.stat-tile .stat-tile-label {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  font-weight: 500;
}

/* The school's own name, wherever it's rendered in Arabic - a bigger,
   modern display treatment rather than book-style Naskh, since a name/
   wordmark reads differently than a paragraph. */
.school-name-ar {
  font-family: var(--font-ar-display);
  font-weight: 600;
  font-size: 1.75em;
  line-height: 1.5;
  letter-spacing: 0;
}

/* When the whole page is in Arabic, the header's <h1> school name gets the
   same display treatment as the standalone .school-name-ar fallback line. */
html[lang='ar'] .school-name-section h1 {
  font-family: var(--font-ar-display);
  font-weight: 600;
}

/* Nav active/hover state - a soft filled pill instead of an underline. */
.main-navbar .nav-link.active,
.main-navbar .nav-link[aria-current='page'] {
  color: var(--color-primary-700) !important;
  background-color: var(--color-primary-50);
}

/* ---------------------------------------------------------------------
 * Palettes.
 *
 * The tokens above are the platform default (blue). An institution can
 * select a different one - `theme_palette` in its settings - which the
 * layout stamps on <html data-palette="...">. Only the brand ramp and the
 * page ground change; type, spacing, radius and elevation stay shared, so
 * the two institutions read as the same product wearing its own colours.
 * ------------------------------------------------------------------- */

html[data-palette='green'] {
  /* Deep madrasah green, the colour of the reference screenshots. */
  --color-primary-50: #eef6f0;
  --color-primary-100: #d6ebdd;
  --color-primary-200: #aed6ba;
  --color-primary-300: #7cbb90;
  --color-primary-400: #479c68;
  --color-primary-500: #2b8049;
  --color-primary-600: #1d6b3a;
  --color-primary-700: #155634;
  --color-primary-800: #10402a;
  --color-primary-900: #0b2e1f;
  --color-primary-600-rgb: 29, 107, 58;
  --color-primary-700-rgb: 21, 86, 52;
  --color-primary-800-rgb: 16, 64, 42;

  /* A warm off-white ground rather than cool grey - green over cool grey
     reads cold, and the reference pages sit on a faint cream. */
  --color-surface-muted: #f6f7f2;
}

/* Gold, the secondary the reference design uses for eyebrow rules,
   small ornaments and carousel controls. Defined for every palette so a
   component can reach for it unconditionally; the blue default keeps a
   muted brass that does not fight the primary. */
:root {
  --color-accent-300: #e2cd8e;
  --color-accent-400: #d4b769;
  --color-accent-500: #c1a04a;
  --color-accent-600: #a08031;
  --color-accent: var(--color-accent-500);
}

html[data-palette='green'] {
  --color-accent-300: #e6d194;
  --color-accent-400: #d9bb63;
  --color-accent-500: #c8a24a;
  --color-accent-600: #a5822f;
}

.text-accent { color: var(--color-accent-500) !important; }
.bg-accent { background-color: var(--color-accent-500) !important; }

/* ---------------------------------------------------------------------
 * Bootstrap bridge.
 *
 * Bootstrap ships pre-compiled from the CDN, so its `primary` is a fixed
 * blue baked into the stylesheet - which is why a green-palette page still
 * rendered blue .btn-primary buttons, blue links and a blue focus ring.
 * Bootstrap 5.3 exposes each component's colours as CSS custom properties,
 * so pointing those at the palette tokens re-skins every component at once
 * and keeps doing so for any palette added later.
 *
 * Scoped to :root rather than restated per palette on purpose: the tokens
 * are what change, not these mappings.
 * ------------------------------------------------------------------- */

:root {
  --bs-primary: var(--color-primary-600);
  --bs-primary-rgb: var(--color-primary-600-rgb);
  --bs-link-color: var(--color-primary-700);
  --bs-link-color-rgb: var(--color-primary-700-rgb);
  --bs-link-hover-color: var(--color-primary-800);
  --bs-link-hover-color-rgb: var(--color-primary-800-rgb);
}

.btn-primary {
  --bs-btn-bg: var(--color-primary-600);
  --bs-btn-border-color: var(--color-primary-600);
  --bs-btn-hover-bg: var(--color-primary-700);
  --bs-btn-hover-border-color: var(--color-primary-700);
  --bs-btn-active-bg: var(--color-primary-800);
  --bs-btn-active-border-color: var(--color-primary-800);
  --bs-btn-disabled-bg: var(--color-primary-400);
  --bs-btn-disabled-border-color: var(--color-primary-400);
  --bs-btn-focus-shadow-rgb: var(--color-primary-600-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary-700);
  --bs-btn-border-color: var(--color-primary-600);
  --bs-btn-hover-bg: var(--color-primary-600);
  --bs-btn-hover-border-color: var(--color-primary-600);
  --bs-btn-active-bg: var(--color-primary-700);
  --bs-btn-active-border-color: var(--color-primary-700);
  --bs-btn-disabled-color: var(--color-primary-400);
  --bs-btn-disabled-border-color: var(--color-primary-200);
  --bs-btn-focus-shadow-rgb: var(--color-primary-600-rgb);
}

.pagination {
  --bs-pagination-color: var(--color-primary-700);
  --bs-pagination-hover-color: var(--color-primary-800);
  --bs-pagination-hover-bg: var(--color-primary-50);
  --bs-pagination-focus-color: var(--color-primary-800);
  --bs-pagination-focus-bg: var(--color-primary-50);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-600-rgb), 0.25);
  --bs-pagination-active-bg: var(--color-primary-600);
  --bs-pagination-active-border-color: var(--color-primary-600);
}

/* Focus rings on inputs, selects and checkboxes - the last obviously blue
   thing on a green page once the buttons are mapped. */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-600-rgb), 0.2);
}

.form-check-input:checked {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.form-check-input:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-600-rgb), 0.2);
}

/* An in-page anchor must not land under the sticky header. */
html {
  scroll-padding-top: 7rem;
}