/* ================================
   Shepherd Heritage – Site Styles (static-first)
   Palette:
     --navy:    #0b1d36
     --oxblood: #5a0a14
     --fuchsia: #ff2bb3
     --purple:  #7a3ef0
     --lilac:   #e6d6ff
   Fonts: Poppins (headings), Inter (body)
   ================================ */

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color: #0f1222;
  background-color: #fbfbfe;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* Tokens */
:root{
  --navy: #0b1d36;
  --navy-900:#09152a;
  --navy-800:#0c2345;
  --oxblood:#5a0a14;
  --oxblood-800:#4a0c11;
  --fuchsia:#ff2bb3;
  --purple:#7a3ef0;
  --lilac:#e6d6ff;
  --ink:#0f1222;
  --muted:#5f6783;
  --surface:#ffffff;
  --shadow: 0 8px 30px rgba(11, 29, 54, .15);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --container: 1200px;
  --gradient-brand: linear-gradient(135deg, var(--navy) 0%, var(--oxblood) 100%);
  --gradient-accent: linear-gradient(135deg, var(--purple), var(--fuchsia));
}

/* Type */
h1,h2,h3,h4{
  font-family: "Poppins", "Inter", Arial, sans-serif;
  line-height: 1.2;
  margin: 0 0 .6rem;
  color: var(--navy-800);
}

/* Layout helpers */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(3rem, 6vw, 6rem) 0; }
.section-title{
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing:.2px;
  position: relative;
  display:inline-block;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:-10px;
  width:56%; height:4px; border-radius:3px;
  background: var(--gradient-accent);
}

/* ===== Top Bar (no wrap) ===== */
.top-bar{
  background: var(--navy);
  color: #e5ecff;
  font-size:.9rem;
}
.top-bar-container{
  width: min(100% - 2rem, var(--container));
  display:flex; align-items:center; justify-content:space-between;
  margin-inline:auto; padding:.45rem 0;
  white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  contain: content; /* perf isolation */
}
.top-bar-container::-webkit-scrollbar{ display:none; }
.top-bar-left, .top-bar-right{ display:inline-flex; align-items:center; gap:.5rem; flex: 0 0 auto; }
.top-bar a{ color:#dfe7ff; text-decoration:none; opacity:.95; }
.top-bar a:hover{ opacity:1; text-decoration: underline; }
.top-bar .divider{ opacity:.4; margin: 0 .4rem; }

/* Social icons */
.social-icon{
  margin-left:.1rem; display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background: rgba(255,255,255,.07);
  transition: transform .25s ease, background .25s ease;
  flex: 0 0 auto;
}
.social-icon svg{ width:16px; height:16px; color:#ffffff; }
.social-icon:hover{ transform: translateY(-2px); background: rgba(255,255,255,.15); }

/* ===== Header / Nav ===== */
.header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(9,21,42,.06);
}
.navbar .nav-container{
  width: min(100% - 2rem, var(--container));
  display:flex; align-items:center; justify-content:space-between;
  margin-inline:auto; padding: .85rem 0;
}
.logo{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.logo-icon{
  width:42px; height:42px; border-radius:12px; font-weight:800; color:#fff;
  display:grid; place-items:center; letter-spacing:.5px;
  background: var(--gradient-accent);
  box-shadow: 0 6px 18px rgba(122,62,240,.35);
}
.logo-text{ font-weight: 800; letter-spacing:.2px; color: var(--navy-800); }

/* Desktop nav */
.nav-links{
  list-style:none; display:flex; align-items:center; gap:1rem; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; padding:.6rem .9rem; border-radius:10px;
  color: var(--navy-800); font-weight:600;
  transition: background .2s ease, transform .2s ease;
}
.nav-links a:hover{ background: var(--lilac); transform: translateY(-1px); }

/* Mobile menu */
.mobile-menu-btn{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.mobile-menu-btn span{
  display:block; width:26px; height:3px; margin:5px 0;
  background: var(--navy-800); border-radius:3px; transition: transform .3s ease, opacity .3s ease;
}
.mobile-menu-btn.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2){ opacity:0; }
.mobile-menu-btn.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ===== Hero ===== */
.hero{ position:relative; min-height: clamp(70vh, 80vh, 92vh); display:grid; place-items:center; overflow:hidden; }
.hero-background{ position:absolute; inset:0; background-size: cover; background-position:center; filter: saturate(105%); }
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 70% 30%, rgba(122,62,240,.35), transparent 60%),
              linear-gradient(180deg, rgba(11,29,54,.55), rgba(90,10,20,.75));
  mix-blend-mode: multiply;
}
.hero-content{ position:relative; z-index:2; text-align:center; color:#fff; padding: 0 1rem; max-width: 900px; animation: fadeUp .6s ease both .05s; }
.hero-title{ font-size: clamp(2rem, 4.5vw, 3.5rem); text-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hero-subtitle{ margin-top:.75rem; font-size: clamp(1rem, 2.2vw, 1.25rem); opacity:.95; }
.hero-buttons{ margin-top:1.5rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none; font-weight:700; padding:.85rem 1.1rem; border-radius:14px;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  box-shadow: 0 10px 24px rgba(11,29,54,.12);
}
.btn-primary{ background: var(--gradient-accent); color:#fff; }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(122,62,240,.28); }
.btn-secondary{ background: #ffffff; color: var(--oxblood); border: 2px solid transparent; }
.btn-secondary:hover{ border-color: rgba(255,255,255,.7); transform: translateY(-2px); }

/* Scroll indicator */
.scroll-indicator{ position:absolute; bottom:20px; left:50%; transform: translateX(-50%); color:#fff; opacity:.9; animation: bounce 1.8s infinite ease-in-out; }

/* ===== Schools Intro ===== */
.schools-intro{
  background: radial-gradient(900px 500px at 20% 20%, #f5f1ff 0%, transparent 70%),
              radial-gradient(900px 500px at 80% 0%, #ffe9f7 0%, transparent 60%);
}
.schools-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.2rem; margin-top:1.4rem; }
.school-card{
  background: var(--surface); border: 1px solid #eef; border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.1rem; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: fadeUp .7s ease both;
}
.school-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(11,29,54,.18); }
.school-card h3{ color: var(--oxblood); font-weight:800; }
.card-link{
  display:inline-block; margin-top:.6rem; font-weight:700; text-decoration:none;
  background-image: linear-gradient( to right, var(--purple), var(--fuchsia) );
  background-clip: text; -webkit-background-clip:text; color: transparent;
}
.card-link:hover{ text-decoration: underline; }

/* ===== Core Values ===== */
.values-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.1rem; margin-top:1.4rem; }
.value-card{
  background: linear-gradient(180deg, #ffffff, #fbf9ff);
  border:1px solid #eee7ff; border-radius: var(--radius-lg);
  padding: 1rem; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: fadeUp .7s ease both .05s;
}
.value-card:hover{ transform: translateY(-6px) rotate(-.3deg); box-shadow: 0 14px 36px rgba(11,29,54,.18); }
.value-icon{
  width: 46px; height:46px; border-radius: 12px; display:grid; place-items:center;
  background: var(--lilac);
  box-shadow: inset 0 0 0 2px rgba(122,62,240,.25), 0 8px 20px rgba(122,62,240,.18);
  margin-bottom:.5rem;
}
.value-icon svg{
  width: 24px; height:24px;
  stroke: var(--purple);
  fill: none;
  stroke-width: 2;
}

/* ===== Facilities ===== */
.facilities-preview{ background:#fafbff; }
.facilities-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; margin-top:1.4rem; }
.facility-card{
  background:#fff; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: fadeUp .7s ease both .1s;
}
.facility-card img{ aspect-ratio: 4 / 3; object-fit: cover; width:100%; }
.facility-card h3{ padding: .8rem 1rem 0; color: var(--navy); }
.facility-card p{ padding: .35rem 1rem 1.1rem; color: var(--muted); }
.facility-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(11,29,54,.18); }

/* ===== Footer ===== */
.footer{
  color: #eef3ff;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(122,62,240,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,43,179,.20), transparent 60%),
    var(--gradient-brand);
  padding-top: 2.5rem;
}
.footer .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap:1.2rem; }
.footer h3, .footer h4{ color: #fff; }
.footer a{ color:#ffffff; text-decoration:none; opacity:.95; }
.footer a:hover{ opacity:1; text-decoration: underline; }
.footer-bottom{
  margin-top:1.3rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer .social-links a{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background: rgba(255,255,255,.12);
  transition: transform .25s ease, background .25s ease;
}
.footer .social-links a + a{ margin-left:.6rem; }
.footer .social-links a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.22); }
.footer .social-links svg{ width:18px; height:18px; color:#fff; }

/* ===== Animations (CSS-only, no JS) ===== */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes bounce{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,6px);} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .values-grid{ grid-template-columns: repeat(2, 1fr); }
  .facilities-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px){
  .navbar .nav-container{ padding: .75rem 0; }
  .mobile-menu-btn{ display:block; }
  .nav-links{
    position: fixed; inset: 64px 0 auto 0; height: auto;
    display: grid; gap:.25rem;
    background: #ffffff;
    transform: translateY(-100%); opacity:0; visibility:hidden;
    border-bottom: 1px solid #eef;
    box-shadow: 0 20px 40px rgba(9,21,42,.12);
    transition: transform .35s cubic-bezier(.21,1,.21,1), opacity .3s ease, visibility .3s ease;
    padding: .6rem; z-index: 40;
  }
  .nav-links.is-open{ transform: translateY(0); opacity:1; visibility:visible; }
  .nav-links a{ padding: .85rem 1rem; border-radius: 12px; background: #f7f7ff; }
  .schools-grid{ grid-template-columns: 1fr; }
  .footer .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .facilities-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer .footer-grid{ grid-template-columns: 1fr; }
  .hero-title{ font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .btn{ width: 100%; }
}

/* Focus states */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--fuchsia);
  outline-offset: 2px;
}