@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=DM+Sans:ital,wght@0,500;1,500&display=swap');

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #242424; background-color: #FFFDF7; }
h1, h2, h3, h4, h5, .font-heading { font-family: 'Plus Jakarta Sans', sans-serif; }

::selection { background-color: #FDD835; color: #9F1D20; }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: #FFF8D6; }
::-webkit-scrollbar-thumb { background: #C62828; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #9F1D20; }

:focus-visible { outline: 2px solid #F57C00; outline-offset: 2px; border-radius: 4px; }

/* ---------- Decorative petal / radial patterns (logo-inspired) ---------- */
.bg-petal-dots {
  background-image: radial-gradient(circle, rgba(245,124,0,0.14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.bg-radial-glow {
  background: radial-gradient(circle at 30% 20%, rgba(253,216,53,0.25), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(198,40,40,0.10), transparent 50%);
}
.petal-ring {
  position: absolute;
  border-radius: 9999px;
  border: 1px dashed rgba(198,40,40,0.18);
}
.divider-curve {
  display: block;
  width: 100%;
  height: 60px;
}

/* ---------- Top bar marquee ---------- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 45s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ---------- Header ---------- */
#topbar { transition: max-height .35s ease, opacity .3s ease, padding .35s ease; max-height: 36px; overflow: hidden; }
#header-wrapper.is-scrolled #topbar { max-height: 0; opacity: 0; padding: 0; }
#header-wrapper.is-scrolled { box-shadow: 0 8px 30px -12px rgba(36,36,36,0.18); }

.site-header { transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease, backdrop-filter .35s ease; background-color: rgba(255,253,247,0.97); backdrop-filter: blur(10px); }

/* Header shrinks to a compact bar once the page is scrolled (sticky/"fixed" state) */
.header-row { height: 136px; transition: height .35s ease; }
.logo-img { height: 120px; width: 250px; transition: height .35s ease, width .35s ease; }
#header-wrapper.is-scrolled .header-row { height: 112px; }
#header-wrapper.is-scrolled .logo-img { height: 96px; width: 200px; }

/* Swap to a dedicated logo image only in the compact/scrolled "fixed" header state */
.logo-scrolled { display: none; }
#header-wrapper.is-scrolled .logo-default { display: none; }
#header-wrapper.is-scrolled .logo-scrolled { display: block; }
.site-header.is-transparent {
    background-color: #00000000;
    backdrop-filter: none;
    box-shadow: none;
    margin-top: -29px;
}
.site-header.is-transparent .nav-text { color: #fff; }
.site-header.is-transparent .nav-text-muted { color: rgba(255,255,255,0.8); }
.site-header.is-transparent .logo-school-name { color: #fff; }
.site-header.is-transparent .header-cta { background-color: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.55); }
.site-header:not(.is-transparent) .nav-text { color: #242424; }
.site-header:not(.is-transparent) .nav-text-muted { color: #6B7280; }
.site-header:not(.is-transparent) .logo-school-name { color: #9F1D20; }
.site-header:not(.is-transparent) .header-cta { background-color: #F57C00; color: #fff; border-color: #F57C00; }
.site-header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(36,36,36,0.18); }

.nav-link { position: relative; white-space: nowrap; }
.dropdown-trigger { white-space: nowrap; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: #F57C00;
  transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

.dropdown-panel {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.group:hover .dropdown-panel, .dropdown-panel:hover, .dropdown-trigger:focus-within + .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-trigger [data-lucide="chevron-down"] { transition: transform .3s ease; }
.group:hover .dropdown-trigger [data-lucide="chevron-down"] { transform: rotate(180deg); }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .marquee-track, .animate-float, .animate-floatSlow, .animate-spinSlow { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; border-radius: 9999px; padding: .85rem 1.75rem; font-size: .95rem;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background-color: #F57C00; color: #fff; box-shadow: 0 10px 25px -8px rgba(245,124,0,0.55); }
.btn-primary:hover { background-color: #FB8C00; box-shadow: 0 14px 30px -8px rgba(245,124,0,0.65); transform: translateY(-2px); }
.btn-outline { background-color: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.65); }
.btn-outline:hover { background-color: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-2px); }
.btn-outline-dark { background-color: transparent; color: #9F1D20; border: 1.5px solid rgba(158,29,32,0.35); }
.btn-outline-dark:hover { background-color: #9F1D20; color: #fff; border-color: #9F1D20; transform: translateY(-2px); }
.btn-sm { padding: .6rem 1.25rem; font-size: .85rem; }

/* ---------- Cards ---------- */
.card-hover { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 24px 45px -18px rgba(36,36,36,0.22); }

.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img { transform: scale(1.08); }

/* ---------- Placeholder photo tiles (no real image available yet) ---------- */
.ph-tile {
  position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: linear-gradient(135deg, #FFF8D6 0%, #FBEAEA 55%, #FDECD8 100%);
  color: #9F1D20;
  overflow: hidden;
}
.ph-tile::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(198,40,40,0.14) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: .6;
}
.ph-tile .ph-icon { position: relative; z-index: 1; opacity: .75; }
.ph-tile .ph-label { position: relative; z-index: 1; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; opacity: .8; margin-top: .5rem; }

/* ---------- Editable placeholder fields (clearly-marked, to be replaced with real data) ---------- */
.editable {
  border-bottom: 1.5px dashed rgba(198,40,40,0.45);
  cursor: help;
  text-decoration: none;
}

/* ---------- Stat counters ---------- */
.stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }

/* ---------- Line clamp ---------- */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Horizontal scroll snap rows ---------- */
.snap-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.snap-row > * { scroll-snap-align: start; flex-shrink: 0; }
.snap-row::-webkit-scrollbar { display: none; height: 0; }

/* ---------- Generic scrollbar-hidden utility (e.g. desktop nav safety-net overflow) ---------- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; height: 0; }

/* ---------- Lightbox ---------- */
#lightbox { transition: opacity .3s ease; }
#lightbox.hidden-lb { opacity: 0; pointer-events: none; }
#lightbox img { transition: transform .3s ease; }

/* ---------- Mobile off-canvas menu ---------- */
#mobile-menu { transition: transform .4s cubic-bezier(.16,1,.3,1), visibility .4s; }

/* ---------- Misc ---------- */
.text-gradient-fire {
  background: linear-gradient(90deg, #C62828, #F57C00 60%, #FDD835);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ring-brand { box-shadow: 0 0 0 6px rgba(253,216,53,0.35); }

.tick-badge { background-color: #C62828; }

/* ---------- Back to top button ---------- */
#back-to-top {
  transition: opacity .3s ease, transform .3s ease, background-color .25s ease;
}
#back-to-top.is-hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
#back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  #back-to-top { transition: opacity .01s linear; }
}