/* ==========================================================================
   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;
}

/* AOS "fade-left"/"zoom" elements sit translated off to the side until they animate in. Mobile
   browsers ignore body's overflow-x when sizing the layout viewport, so that pre-animation offset
   widened the whole page (390px phone → 490px layout): everything rendered zoomed out, and the
   fixed navbar stretched to match, pushing the menu toggler off-screen until scrolling animated
   the offending element back in. Clipping on <main> itself stops the overflow at its source;
   `clip` (unlike `hidden`) doesn't make <main> a scroll container. */
main { overflow-x: clip; }
@supports not (overflow: clip) { main { 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; justify-content: center; text-align: left; } }

/* ---------- 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; }
}

/* ---------- Footer brand ---------- */
/* The navbar's .brand-mark styling is scoped to the navbar, so the footer's logo letter/image
   rendered unstyled ("GGreenwood"). */
.site-footer .brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px; margin-right: .6rem;
  background: rgba(255,255,255,.14); color: #fff; font-weight: 700;
}

/* ---------- Phones ---------- */
.navbar-brand-site .navbar-toggler:focus { box-shadow: none; }
.navbar-brand-site .navbar-toggler:focus-visible { box-shadow: 0 0 0 .2rem rgba(255,255,255,.35); }

@media (max-width: 991.98px) {
  /* The hero copy is centred below lg — centre its buttons and badges with it. */
  .hero .d-flex.flex-wrap { justify-content: center; }
}

@media (max-width: 575.98px) {
  .navbar-brand-site { padding: .75rem 0; }
  .navbar-brand-site .navbar-brand { font-size: 1.2rem; }
  .navbar-brand-site .navbar-brand .brand-mark { width: 36px; height: 36px; }

  .hero { padding: 6.5rem 0 3rem; }
  .hero h1 { font-size: 2rem; }
  .hero p.lead { font-size: 1.05rem; }
  .hero .btn-accent, .hero .btn-outline-light-brand { width: 100%; justify-content: center; }
  .hero::before { width: 260px; height: 260px; top: -90px; right: -90px; }

  /* Desktop section rhythm (5.5rem top and bottom) left huge empty bands between stacked sections. */
  .section { padding: 3.25rem 0; }
  .section-tight { padding: 2rem 0; }
  .stat-item { padding: .75rem .25rem; }
  .stat-counter { font-size: 2rem; }
  .stat-icon-wrap { width: 48px; height: 48px; margin-bottom: .6rem; }

  /* Program cards: a 170px banner per card made six stacked cards very tall — side icon instead. */
  .program-card { display: flex; align-items: stretch; }
  .program-card .program-media { flex: 0 0 76px; height: auto; font-size: 1.6rem; }
  .program-card .program-media + * { padding: 1rem 1.1rem !important; }
  .program-card .program-media + * h5, .program-card .program-media + * h4 { font-size: 1.05rem; margin-bottom: .3rem !important; }

  /* 2.5rem of card padding left the form inputs only ~270px wide on a phone. */
  .form-card { padding: 1.5rem 1.25rem; }

  /* No hover on touch — the lift effect just sticks after a tap. */
  .feature-card:hover, .program-card:hover, .facility-card:hover, .news-card:hover, .staff-card:hover, .info-card:hover { transform: none; }
}