/* ==========================================================================
   Greenwood International School — public site design system
   ========================================================================== */

:root {
  --primary: #0f6b3c;
  --primary-dark: #0a4d2b;
  --primary-light: #e8f5ee;
  --accent: #f5b400;
  --accent-dark: #d99a00;
  --ink: #10241a;
  --gray-700: #3f4a44;
  --gray-500: #6b7a72;
  --gray-200: #e4ece7;
  --bg: #fbfdfc;
  --radius: 16px;
  --shadow-sm: 0 2px 10px rgba(15, 107, 60, 0.08);
  --shadow-md: 0 10px 30px rgba(15, 107, 60, 0.12);
  --shadow-lg: 0 20px 60px rgba(15, 107, 60, 0.18);
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-head {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { text-decoration: none; }

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

/* ---------- Preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.loaded { opacity: 0; visibility: hidden; }
.loader-mark {
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid var(--primary-light);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Buttons ---------- */
.btn-brand {
  background: var(--primary); color: #fff; border: none;
  padding: .75rem 1.75rem; border-radius: 50px; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  position: relative; overflow: hidden;
}
.btn-brand:hover { background: var(--primary-dark); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-accent {
  background: var(--accent); color: var(--ink); border: none;
  padding: .75rem 1.75rem; border-radius: 50px; font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); }
.btn-outline-brand {
  background: transparent; color: var(--primary); border: 2px solid var(--primary);
  padding: .65rem 1.6rem; border-radius: 50px; font-weight: 600;
  transition: all .25s ease;
}
.btn-outline-brand:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.btn-outline-light-brand {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6);
  padding: .65rem 1.6rem; border-radius: 50px; font-weight: 600;
  transition: all .25s ease;
}
.btn-outline-light-brand:hover { background: #fff; color: var(--primary); border-color: #fff; transform: translateY(-3px); }

/* ---------- Navbar ---------- */
.navbar-brand-site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  padding: 1.1rem 0;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.navbar-brand-site.scrolled {
  background: rgba(251, 253, 252, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding: .6rem 0;
}
/* Default (not scrolled) state sits directly over the dark hero gradient,
   so brand/nav text needs to be light here — it only switches to dark ink
   once .scrolled gives the bar a light background. Without this split the
   active link (tinted primary green) becomes nearly invisible against the
   green hero, and body text reads low-contrast dark-on-dark. */
.navbar-brand-site .navbar-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: #fff; transition: color .35s ease; }
.navbar-brand-site.scrolled .navbar-brand { color: var(--ink); }
.navbar-brand-site .navbar-brand .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; margin-right: .6rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-weight: 700;
}
.navbar-brand-site .nav-link {
  color: rgba(255,255,255,.92) !important; font-weight: 500; margin: 0 .4rem;
  position: relative; padding: .4rem .2rem !important; transition: color .35s ease;
}
.navbar-brand-site.scrolled .nav-link { color: var(--ink) !important; }
.navbar-brand-site .nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent); transition: width .25s ease, background .35s ease;
}
.navbar-brand-site.scrolled .nav-link::after { background: var(--primary); }
.navbar-brand-site .nav-link:hover::after,
.navbar-brand-site .nav-link.active::after { width: 100%; }
.navbar-brand-site .nav-link.active { color: #fff !important; font-weight: 700; }
.navbar-brand-site.scrolled .nav-link.active { color: var(--primary) !important; font-weight: 500; }
.navbar-brand-site .navbar-toggler { color: #fff; }
.navbar-brand-site .navbar-toggler i { color: #fff; transition: color .35s ease; }
.navbar-brand-site.scrolled .navbar-toggler i { color: var(--ink); }

@media (max-width: 991.98px) {
  .navbar-brand-site .navbar-collapse.show {
    background: #fff; border-radius: 16px; margin-top: .75rem; padding: 1rem 1.25rem;
    box-shadow: var(--shadow-md);
  }
  .navbar-brand-site .navbar-collapse.show .nav-link { color: var(--ink) !important; }
  .navbar-brand-site .navbar-collapse.show .nav-link.active { color: var(--primary) !important; }
  .navbar-brand-site .navbar-collapse.show .nav-link::after { background: var(--primary); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 9.5rem 0 6rem;
  background: radial-gradient(1200px 500px at 100% -10%, rgba(245,180,0,.12), transparent),
              linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 55%, #14875a 100%);
  color: #fff;
  overflow: hidden;
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.hero::before { width: 420px; height: 420px; top: -140px; right: -120px; }
.hero::after { width: 280px; height: 280px; bottom: -120px; left: -80px; }
.hero .badge-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  padding: .4rem 1rem; border-radius: 50px; font-size: .85rem; font-weight: 600;
}
.hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.1; }
.hero p.lead { color: rgba(255,255,255,.85); }
.hero-visual {
  position: relative; border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-stat-card {
  position: absolute; bottom: -1.5rem; left: -1.5rem;
  background: #fff; color: var(--ink); border-radius: 16px;
  padding: 1rem 1.25rem; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: .75rem;
}
@media (max-width: 767.98px) { .hero-stat-card { position: static; margin-top: 1rem; } }

/* ---------- Stat counters ---------- */
.stat-counter { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--primary); }
.stat-band { background: #fff; }
.stat-item { text-align: center; padding: 1.5rem 1rem; }
.stat-icon-wrap {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 1.4rem; margin: 0 auto 1rem;
}

/* ---------- Section framing ---------- */
.section { padding: 5.5rem 0; }
.section-tight { padding: 3.5rem 0; }
.eyebrow {
  color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
}
.section-title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-top: .4rem; }
.section-sub { color: var(--gray-500); max-width: 640px; }

/* ---------- Cards ---------- */
.feature-card, .program-card, .facility-card, .news-card, .staff-card, .gallery-card, .info-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease; border: 1px solid var(--gray-200);
  height: 100%;
}
.feature-card:hover, .program-card:hover, .facility-card:hover, .news-card:hover, .staff-card:hover, .info-card:hover {
  transform: translateY(-8px); box-shadow: var(--shadow-md);
}
.icon-tile {
  width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 1.35rem; transition: all .3s ease;
}
.feature-card:hover .icon-tile, .facility-card:hover .icon-tile { background: var(--primary); color: #fff; transform: rotate(-8deg) scale(1.08); }

.program-card { overflow: hidden; }
.program-card .program-media {
  height: 170px; background: linear-gradient(135deg, var(--primary), #14875a);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.2rem;
  transition: transform .5s ease;
}
.program-card:hover .program-media { transform: scale(1.06); }

/* ---------- Staff / faculty ---------- */
.staff-card { overflow: hidden; text-align: center; }
.staff-photo-wrap { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.staff-photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.staff-card:hover .staff-photo-wrap img { transform: scale(1.08); }

/* ---------- Gallery ---------- */
.gallery-card { overflow: hidden; border-radius: 14px; position: relative; cursor: pointer; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; transition: transform .5s ease; }
.gallery-card:hover img { transform: scale(1.12); }
.gallery-overlay {
  position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,77,43,.85), transparent 60%);
  opacity: 0; transition: opacity .35s ease; display: flex; align-items: flex-end; padding: 1rem; color: #fff; font-weight: 600;
}
.gallery-card:hover .gallery-overlay { opacity: 1; }
.filter-pill {
  border: 1px solid var(--gray-200); background: #fff; border-radius: 50px; padding: .45rem 1.1rem;
  font-weight: 600; font-size: .9rem; color: var(--gray-700); transition: all .25s ease; cursor: pointer;
}
.filter-pill.active, .filter-pill:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Timeline (About) ---------- */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--gray-200); }
.timeline-item { position: relative; padding-bottom: 2.2rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -2.5rem; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); border: 4px solid var(--primary-light);
}

/* ---------- Steps (Admissions) ---------- */
.step-card { position: relative; padding-top: 2.5rem; }
.step-number {
  position: absolute; top: -18px; left: 1.5rem; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--ink); font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); font-family: var(--font-head);
}

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200); height: 100%;
}
.testimonial-quote { font-size: 1.05rem; color: var(--gray-700); }
.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

/* ---------- News ---------- */
.news-card { overflow: hidden; }
.news-card img { height: 200px; width: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover img { transform: scale(1.08); }
.news-badge { background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: .72rem; padding: .3rem .7rem; border-radius: 50px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--primary-dark), var(--primary));
  border-radius: 28px; color: #fff; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: rgba(245,180,0,.15); right: -100px; top: -100px;
}

/* ---------- Footer ---------- */
/* --primary-dark (unlike --ink) is re-themed per school by _BrandStyleOverride.cshtml from its own
   PrimaryColorHex, so the footer actually follows a school's chosen color — --ink is a fixed near-
   black used elsewhere purely for readable dark text (on accent buttons, badges, the scrolled
   navbar) and was never meant to carry brand color, so it stays untouched everywhere else. */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,.75); }
.site-footer h6 { color: #fff; font-family: var(--font-head); }
.site-footer a { color: rgba(255,255,255,.7); transition: color .2s ease, padding-left .2s ease; }
.site-footer a:hover { color: var(--accent); padding-left: 4px; }
.social-dot {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .25s ease;
}
.social-dot:hover { background: var(--accent); color: var(--ink); transform: translateY(-4px); }

/* ---------- Forms ---------- */
.form-control-brand, .form-select-brand {
  border-radius: 12px; border: 1px solid var(--gray-200); padding: .7rem 1rem;
}
.form-control-brand:focus, .form-select-brand:focus {
  border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(15,107,60,.15);
}
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 2.5rem; }

/* ---------- Success check animation ---------- */
.success-check {
  width: 84px; height: 84px; border-radius: 50%; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  animation: pop .5s cubic-bezier(.26,1.36,.46,1);
}
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Utilities ---------- */
.bg-soft { background: var(--primary-light); }
.divider-accent { width: 60px; height: 4px; background: var(--accent); border-radius: 2px; }
.avatar-circle {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-weight: 700; font-family: var(--font-head);
}
.marquee-badge {
  border: 1px solid rgba(255,255,255,.3); border-radius: 50px; padding: .3rem .8rem; font-size: .8rem;
}

/* Reveal helper for elements without AOS (progressive enhancement) */
.reveal-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal-up.in-view { opacity: 1; transform: translateY(0); }

/* Admission pipeline — public Track page. Same markup as the admin Details page, whose styles
   live in admin.css (not loaded on the public layout), so without this every step looked
   identical and the tracker appeared stuck on its first status. */
.pipeline-track { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pipeline-step {
  flex: 1; min-width: 110px; text-align: center; padding: .7rem .5rem; border-radius: 10px;
  background: #fff; border: 2px solid #e2e8e5; font-size: .78rem; font-weight: 600; color: #8a9a92;
  transition: all .3s ease; position: relative;
}
.pipeline-step.done { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
.pipeline-step.current { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.05); box-shadow: var(--shadow-sm); }

@media (max-width: 991.98px) {
  .hero { padding: 8rem 0 4rem; text-align: center; }
}