/* ═══════════════════════════════════════════════════════════════════
 * Siraat School — visual identity (kids Islamic school)
 *
 * Direction:  warm, friendly, welcoming — but not childish-cartoony.
 *             Parents are the buying audience (must trust the school),
 *             kids are the daily audience (must feel welcome). Strikes
 *             a balance: clean and professional with sunshine warmth.
 *
 * Palette:    warm teal (Islamic tile, kid-friendly, distinct from the
 *             other Islamic sites) + sunny golden yellow (cheerful CTA)
 *             + warm sunny cream bg + deep teal topbar/footer anchor.
 *
 * Typography: Nunito Latin sans (rounded, friendly, education-grade) +
 *             Noto Naskh Arabic (clean letterforms — readable for kids
 *             still learning to read Arabic/Urdu).
 *
 * Shape:      generously rounded (0.75 / 1.25rem). Friendly without
 *             being pillowy.
 *
 * To customize: edit this file. No code changes needed.
 * ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --color-primary: #0D9488;          /* warm teal — Islamic tile, kid-friendly */
  --color-secondary: #115E59;        /* deeper teal for gradients / hover */
  --color-accent: #FBBF24;           /* sunny golden yellow — cheerful CTA pop */
  --color-accent-dark: #F59E0B;      /* amber hover */

  /* ── Surfaces ─────────────────────────────────────── */
  --color-bg: #FEF9E7;               /* warm sunny cream — feels cheerful & welcoming */
  --color-background-light: #FEF9E7;
  --color-background-dark: #134E4A;  /* deep teal for dramatic blocks (stats, CTAs) */
  --color-card-dark: #115E59;
  --color-message-bg: #FFF4D6;       /* peachy-cream for director's message section */
  --color-topbar-bg: #134E4A;        /* deep teal strip on top — anchors the brightness */
  --color-navbar-bg: #0D9488;        /* bright teal navbar — friendly main identity */
  --color-footer-bg: #134E4A;        /* matches topbar — single dark teal identity */

  /* ── Text ─────────────────────────────────────────── */
  --color-text: #1F2937;             /* warm charcoal — softer than pure black for friendliness */
  --color-text-light: #FFFFFF;
  --color-nav-text: #FFFFFF;         /* white on teal nav */
  --color-topbar-text: #FBBF24;      /* sunny yellow on dark teal — sunshine on water */
  --color-footer-heading: #FFFFFF;
  --color-footer-text: #D1FAE5;      /* soft mint cream on dark teal */
  --color-footer-link: #FBBF24;      /* yellow links pop on dark teal */
  --color-footer-muted: #6EE7B7;
  --color-footer-copyright: #5EBFA0;

  /* ── Neutrals — warm cream tones, never cold gray ─── */
  --color-muted-text: #4B5563;       /* slightly warm gray for subtitle text */
  --color-muted-bg: #FDF6D8;         /* very soft cream for alternate surfaces */
  --color-border: #E7DCB3;           /* soft warm border, faded sunshine */

  /* ── Typography ───────────────────────────────────── */
  --font-urdu: "Noto Naskh Arabic", "Traditional Arabic", serif;
  --font-latin: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --base-font-size: 14.5px;          /* a touch larger than the institutional sites — kid-readable */

  /* ── Shape & spacing — friendly, rounded, welcoming ── */
  --radius-button: 0.75rem;          /* rounded but not pills — friendly, not childish */
  --radius-card: 1.25rem;            /* generous card radius — soft & welcoming */
  --button-py: 0.8rem;
  --button-px: 1.6rem;
  --shadow-card: 0 2px 4px rgba(13,148,136,0.06), 0 12px 28px rgba(13,148,136,0.10);
}

/* ═══════════════════════════════════════════════════════════════════
 * Custom touches — these elevate the design beyond plain tokens.
 * ═══════════════════════════════════════════════════════════════════ */

/* Topbar — sunny yellow hairline above + below, like sunshine border */
[class*="bg-topbar-bg"] {
  border-top: 2px solid var(--color-accent);
  border-bottom: 1px solid rgba(251,191,36,0.30);
}

/* Navbar — bright teal with sunny bottom hairline */
nav.bg-navbar-bg,
[class*="bg-navbar-bg"] {
  border-bottom: 2px solid var(--color-accent);
  background: linear-gradient(180deg, var(--color-primary) 0%, #0B7C72 100%);
}

/* Hero / page banners — teal gradient with sunshine radial in the corner */
header.bg-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(19,78,74,0.20);
}
header.bg-primary::before {
  /* Sunshine radial in upper corner — warm welcoming glow */
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, transparent 60%);
  pointer-events: none;
}
header.bg-primary::after {
  /* Sunny edge at the bottom */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
}

/* Page title underline — sunny stroke, centered like a smile */
main h1.font-urdu {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}
main h1.font-urdu::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 64px; height: 4px;
  background: var(--color-accent);
  border-radius: 999px;
}

/* Cards — soft borders + generous lift on hover (kids/parents respond to motion) */
.bg-white.rounded-\(--radius-card\) {
  border: 1px solid var(--color-border);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 250ms ease;
}
.bg-white.rounded-\(--radius-card\):hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 6px 12px rgba(13,148,136,0.08), 0 20px 40px rgba(13,148,136,0.14);
}

/* Apply Now button — sunny yellow, big and friendly. Stands out hard on teal nav. */
a[href="/admission-form"].bg-primary {
  background: var(--color-accent) !important;
  color: var(--color-background-dark) !important;
  letter-spacing: 0.03em;
  font-weight: 700;
  box-shadow:
    0 2px 4px rgba(251,191,36,0.30),
    0 8px 20px rgba(251,191,36,0.30);
}
a[href="/admission-form"].bg-primary:hover {
  background: var(--color-accent-dark) !important;
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(245,158,11,0.35),
    0 14px 28px rgba(245,158,11,0.35);
}

/* Stats section — deep teal gradient with sunny numbers glowing */
section.bg-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-background-dark) 100%);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
section.bg-secondary .text-accent {
  text-shadow: 0 2px 12px rgba(251,191,36,0.40);
}

/* Footer — deep teal with sunny illuminated top edge */
footer.bg-\(--color-footer-bg\),
footer.bg-footer-bg {
  background: linear-gradient(180deg, var(--color-footer-bg) 0%, #0A3937 100%);
  border-top: 3px solid var(--color-accent);
  position: relative;
}
footer.bg-\(--color-footer-bg\)::before,
footer.bg-footer-bg::before {
  /* Highlight just below the sunny border — depth */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.10);
}

/* Typography — Nunito is friendly by default, light letter-spacing */
.font-latin h1, .font-latin h2, .font-latin h3 {
  letter-spacing: -0.01em;
  font-weight: 800;          /* Nunito heavy weights are warm and rounded */
}
.font-urdu h1, .font-urdu h2, .font-urdu h3 {
  font-weight: 600;          /* Naskh stays readable at headline sizes */
  line-height: 1.6;          /* Naskh needs some breathing room */
}

/* Carousel pagination dots — sunny ring when active */
.bg-accent.rounded-full {
  box-shadow: 0 0 0 4px rgba(251,191,36,0.30);
}

/* Image treatments — slight warm glow on hover (sunny school day) */
.rounded-t-\(--radius-card\) img {
  transition: transform 500ms ease, filter 500ms ease;
}
.group:hover .rounded-t-\(--radius-card\) img {
  transform: scale(1.04);
  filter: brightness(1.05) saturate(1.10);
}

/* Faculty avatars / circular images — sunny ring for warmth */
.rounded-full[class*="border"] {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.20);
}

/* Links — friendly underline on hover */
a:not([class*="bg-"]):not([class*="rounded-"]):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Selection — sunny yellow on teal */
::selection {
  background: var(--color-accent);
  color: var(--color-background-dark);
}

/* Focus rings — sunny yellow for accessibility */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Scrollbar — cream track + teal thumb */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--color-muted-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border: 3px solid var(--color-muted-bg);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }