/* ══════════════════════════════════════════════════════════
   PCSD Vidhya Niketan — Shared Stylesheet (Redesigned 2026)
   A modern, premium design system for a prestigious school.
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND PALETTE (Fresh 2026 — teal + warm coral) ──
     Light, airy and welcoming. Variable NAMES are kept
     (--navy / --saffron / --gold) so every page cascades
     automatically, but the VALUES are all-new & brighter. */

  /* accent 1 — warm coral-orange (was "saffron") */
  --saffron:        #FF7A45;   /* friendly coral — energetic accent    */
  --saffron-deep:   #F0602B;   /* pressed / hover state                */
  --saffron-light:  #FF9E6E;
  --saffron-soft:   #FFF1EA;   /* faint coral wash                     */

  /* primary — fresh teal / emerald (was "navy") */
  --navy:           #0FA3A0;   /* bright teal — primary brand          */
  --navy-mid:       #14B8A6;
  --navy-dark:      #0E7C77;   /* deep teal — headers, footer          */

  /* secondary — sunny amber (was "gold") */
  --gold:           #F5B93E;
  --gold-light:     #FFD98A;
  --gold-soft:      #FFF3D6;

  --green:          #16A75C;
  --red:            #E05656;

  /* ── NEUTRALS (cool, airy off-whites) ── */
  --cream:          #F4FBFA;   /* pale mint-white topbar               */
  --cream-2:        #E9F6F4;
  --warm-white:     #FCFEFE;
  --ink:            #143038;   /* body text — deep teal-slate          */
  --text:           #1E3A42;
  --muted:          #5D7078;
  --muted-soft:     #93A6AC;
  --border:         #DCEDEA;
  --border-cool:    #D6EBE8;

  /* ── EFFECTS ── */
  --shadow-sm:  0 1px 3px rgba(15,124,119,.07), 0 1px 2px rgba(15,124,119,.05);
  --shadow-md:  0 8px 24px rgba(15,124,119,.10), 0 2px 6px rgba(15,124,119,.06);
  --shadow-lg:  0 20px 50px rgba(15,124,119,.15), 0 6px 16px rgba(15,124,119,.08);
  --shadow-xl:  0 30px 70px rgba(15,124,119,.20);
  --ring-saffron: 0 0 0 4px rgba(255,122,69,.20);

  --grad-saffron: linear-gradient(135deg, #FF9E6E 0%, #FF7A45 48%, #F0602B 100%);
  --grad-navy:    linear-gradient(135deg, #22C5B8 0%, #0FA3A0 55%, #0E7C77 100%);
  --grad-gold:    linear-gradient(90deg, var(--saffron), var(--gold));

  --radius:    14px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── RESET ── */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink);
  background:var(--warm-white);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
::selection { background:var(--saffron); color:#fff; }

/* Decorative dotted / grid background helper */
.bg-dots {
  background-image:radial-gradient(rgba(30,58,138,.06) 1px, transparent 1px);
  background-size:22px 22px;
}

/* ── TRICOLOR ── */
.tricolor {
  height:5px;
  background:linear-gradient(90deg,
    #FF9933 0%,#FF9933 33.33%,
    #ffffff 33.33%,#ffffff 66.66%,
    #138808 66.66%,#138808 100%);
}

/* ── TICKER ── */
.ticker {
  background:var(--navy-dark);
  color:rgba(255,255,255,.9);
  padding:0;
  display:flex; align-items:stretch;
  font-size:12.5px; overflow:hidden;
  position:relative;
}
.ticker-label {
  background:var(--grad-saffron);
  color:#fff; font-weight:800; font-size:11px;
  letter-spacing:.8px; padding:8px 16px;
  white-space:nowrap; flex-shrink:0;
  text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
  box-shadow:6px 0 14px rgba(0,0,0,.25);
  z-index:2;
}
.ticker-body { flex:1; overflow:hidden; display:flex; align-items:center; }
.ticker-text {
  display:inline-block; white-space:nowrap;
  animation:tick 42s linear infinite; padding-left:100%;
}
.ticker-text i { color:var(--gold-light); }
@keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
@media (prefers-reduced-motion:reduce){ .ticker-text{animation:none} }

/* ── TOPBAR ── */
.topbar {
  background:var(--cream);
  border-bottom:1px solid var(--border);
  padding:8px 5%;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--muted);
  flex-wrap:wrap; gap:8px;
}
.topbar-left { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.topbar-left > span { display:inline-flex; align-items:center; gap:7px; }
.topbar-left i { color:var(--saffron); }
.topbar a { color:var(--navy); text-decoration:none; font-weight:600; transition:color .2s; }
.topbar a:hover { color:var(--saffron); }
.topbar-right { display:flex; gap:9px; align-items:center; }
.soc {
  width:32px; height:32px; border-radius:50%;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
/* Brand colours so icons are bright & clearly visible on the light topbar */
.soc-fb { background:#1877F2; }                         /* Facebook blue   */
.soc-yt { background:#FF0000; }                          /* YouTube red     */
.soc-ig { background:linear-gradient(45deg,#F58529 0%,#DD2A7B 45%,#8134AF 75%,#515BD4 100%); } /* Instagram */
.soc-wa { background:#25D366; }                          /* WhatsApp green  */
.soc:hover {
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  filter:brightness(1.06);
}

/* ── NAVBAR ── */
nav {
  position:sticky; top:0; z-index:999;
  background:rgba(15,31,82,.92);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:72px;
  box-shadow:0 6px 26px rgba(15,31,82,.28);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-brand { display:flex; align-items:center; gap:13px; text-decoration:none; }
.nav-emblem {
  width:50px; height:50px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
  transition:transform .3s var(--ease);
}
.nav-emblem img { width:100%; height:100%; object-fit:contain; }
.nav-brand:hover .nav-emblem { transform:rotate(-6deg) scale(1.05); }
.nav-text strong {
  display:block; color:#fff; font-size:14.5px;
  font-weight:800; font-family:'Baloo 2',sans-serif; letter-spacing:.2px;
}
.nav-text span { color:var(--gold-light); font-size:11px; font-weight:500; letter-spacing:.3px; }
.nav-links { display:flex; gap:3px; list-style:none; align-items:center; }
.nav-links a {
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:9px;
  transition:.22s var(--ease); position:relative;
}
.nav-links a:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav-links a.active {
  background:var(--grad-saffron); color:#fff;
  box-shadow:0 4px 14px rgba(245,158,11,.4);
}
.hamburger { display:none; cursor:pointer; flex-direction:column; gap:5px; padding:6px; }
.hamburger span { width:25px; height:2.5px; background:#fff; border-radius:2px; transition:.3s; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background:var(--grad-navy);
  padding:64px 5% 60px;
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; opacity:.6;
}
.page-hero::after {
  content:''; position:absolute; right:-80px; top:-80px;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 70%);
  pointer-events:none;
}
.page-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; }
.page-hero .breadcrumb {
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:rgba(255,255,255,.55);
  margin-bottom:16px; font-weight:500;
}
.page-hero .breadcrumb a { color:var(--gold-light); text-decoration:none; }
.page-hero .breadcrumb a:hover { text-decoration:underline; }
.page-hero h1 {
  font-family:'Baloo 2',sans-serif;
  font-size:clamp(28px,4.4vw,48px);
  font-weight:800; color:#fff; line-height:1.15;
  margin-bottom:12px;
}
.page-hero h1 span { color:var(--saffron-light); }
.page-hero p {
  color:rgba(255,255,255,.72);
  font-size:15.5px; line-height:1.75; max-width:600px;
}

/* ── SECTION COMMON ── */
.section-pad { padding:80px 5%; }
.section-pad > *, .page-hero-inner { max-width:1200px; margin-left:auto; margin-right:auto; }
section { scroll-margin-top:72px; }
.tag {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:800;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--saffron-deep); margin-bottom:12px;
}
.tag::before {
  content:''; width:22px; height:2px;
  background:var(--grad-gold); border-radius:2px;
}
.section-header[style*="center"] .tag { justify-content:center; }
.section-title {
  font-family:'Baloo 2',sans-serif;
  font-size:clamp(24px,3.6vw,40px);
  font-weight:800; color:var(--navy);
  line-height:1.18; margin-bottom:10px; letter-spacing:-.3px;
}
.section-sub { font-size:15.5px; color:var(--muted); line-height:1.75; max-width:600px; }
.rule { width:56px; height:4px; background:var(--grad-gold); border-radius:4px; margin:14px 0 22px; }
.section-header { margin-bottom:48px; }

/* ── BUTTONS ── */
.btn-primary, .btn-outline, .btn-outline-white, .btn-white {
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:14px; padding:13px 28px;
  border-radius:11px; text-decoration:none; cursor:pointer;
  transition:.25s var(--ease); border:2px solid transparent;
  line-height:1;
}
.btn-primary {
  background:var(--grad-saffron); color:#fff;
  box-shadow:0 8px 22px rgba(245,158,11,.34);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(245,158,11,.42); }
.btn-outline {
  background:transparent; color:var(--navy); border-color:var(--navy);
}
.btn-outline:hover { background:var(--navy); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-outline-white {
  background:rgba(255,255,255,.06); color:#fff;
  border-color:rgba(255,255,255,.4);
}
.btn-outline-white:hover { border-color:#fff; background:rgba(255,255,255,.14); transform:translateY(-3px); }
.btn-white {
  background:#fff; color:var(--saffron-deep);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.btn-white:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.24); }

/* ── FOOTER ── */
footer {
  background:var(--navy-dark);
  color:rgba(255,255,255,.62);
  padding:64px 5% 26px;
  position:relative; overflow:hidden;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#FF9933 0%,#FF9933 33.33%,#fff 33.33%,#fff 66.66%,#138808 66.66%,#138808 100%);
}
.footer-grid {
  display:grid; grid-template-columns:2.2fr 1fr 1fr;
  gap:52px; margin-bottom:40px; max-width:1200px; margin-left:auto; margin-right:auto;
}
.footer-logo { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.footer-logo-circle {
  width:54px; height:54px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.footer-logo-circle img { width:100%; height:100%; object-fit:contain; }
.footer-logo-name { font-size:15px; color:#fff; font-weight:800; font-family:'Baloo 2',sans-serif; line-height:1.35; }
.footer-brand p { font-size:13.5px; line-height:1.8; max-width:320px; margin-bottom:18px; }
.footer-contacts div { font-size:13.5px; margin-bottom:9px; display:flex; align-items:flex-start; gap:10px; }
.footer-contacts i { color:var(--saffron); margin-top:3px; width:15px; text-align:center; }
.footer-contacts a { color:var(--gold-light); text-decoration:none; }
.footer-contacts a:hover { color:#fff; }
.footer-col h4 {
  color:#fff; font-size:12px;
  text-transform:uppercase; letter-spacing:1.6px;
  font-weight:800; margin-bottom:18px; position:relative; padding-bottom:10px;
}
.footer-col h4::after { content:''; position:absolute; left:0; bottom:0; width:26px; height:2.5px; background:var(--grad-gold); border-radius:2px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:11px; }
.footer-col ul li a {
  color:rgba(255,255,255,.62); text-decoration:none;
  font-size:13.5px; transition:.2s var(--ease); display:inline-flex; align-items:center; gap:8px;
}
.footer-col ul li a::before { content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px; color:var(--saffron); transition:transform .2s; }
.footer-col ul li a:hover { color:var(--gold-light); }
.footer-col ul li a:hover::before { transform:translateX(3px); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:22px; font-size:12.5px; max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.footer-bottom a { color:var(--gold-light); text-decoration:none; }

/* ── CARDS & COMMON UI ── */
.card {
  background:#fff; border-radius:var(--radius);
  border:1px solid var(--border);
  padding:30px 24px; transition:.28s var(--ease);
  box-shadow:var(--shadow-sm);
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-5px); border-color:var(--saffron-light); }

.chip {
  background:#fff; border:1.5px solid var(--border-cool);
  color:var(--navy); font-size:12.5px; font-weight:600;
  padding:7px 15px; border-radius:24px;
  display:inline-flex; align-items:center; gap:7px;
  box-shadow:var(--shadow-sm);
}
.chip i { color:var(--saffron); }
.chips { display:flex; gap:9px; flex-wrap:wrap; }

/* Reusable circular icon badge (replaces emoji) */
.icon-badge {
  width:56px; height:56px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; color:#fff; flex-shrink:0;
  background:var(--grad-saffron);
  box-shadow:0 8px 20px rgba(245,158,11,.3);
}
.icon-badge.navy   { background:var(--grad-navy); box-shadow:0 8px 20px rgba(30,58,138,.3); }
.icon-badge.gold   { background:linear-gradient(135deg,var(--gold-light),var(--gold)); box-shadow:0 8px 20px rgba(201,154,46,.3); }
.icon-badge.green  { background:linear-gradient(135deg,#22c07a,var(--green)); box-shadow:0 8px 20px rgba(21,138,78,.3); }
.icon-badge.soft   { background:var(--saffron-soft); color:var(--saffron-deep); box-shadow:none; }

/* Fade-in on scroll */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* Floating WhatsApp button */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .25s var(--ease);
  animation:wa-pulse 2.4s infinite;
}
.wa-float:hover { transform:scale(1.1); }
@keyframes wa-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
@media (prefers-reduced-motion:reduce){ .wa-float{animation:none} }

/* ── MOBILE ── */
@media (max-width:960px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:72px; left:0; right:0;
    background:var(--navy-dark); padding:18px 5%;
    gap:5px; z-index:998; box-shadow:var(--shadow-lg);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .nav-links.open a { padding:12px 15px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:600px) {
  .topbar { display:none; }
  .section-pad { padding:56px 5%; }
  .wa-float { width:52px; height:52px; font-size:25px; bottom:18px; right:18px; }
}