/* =========================================================
   Unity Safa Academy — public site
   Palette: royal navy #142B6B / deep navy #0A1638 / gold #C79A3D
            gold light #E8C877 / cream #F7EFDD / teal #1E5A6B
   Type: Cinzel (display) + Work Sans (body)
   ========================================================= */

:root{
  --navy: #142B6B;
  --navy-deep: #0A1638;
  --gold: #C79A3D;
  --gold-light: #E8C877;
  --cream: #F7EFDD;
  --cream-warm: #F1E6C8;
  --teal: #1E5A6B;
  --ink: #2B211A;
  --ink-soft: #5B4B3C;
  --line: #E4D8B8;
  --radius-arch: 200px 200px 10px 10px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 16px;
}
h1,h2,h3,h4{
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy-deep);
  margin: 0 0 .5em;
}
p{ margin: 0 0 1em; max-width: 62ch; color: var(--ink-soft); }
a{ color: var(--teal); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; display: block; }
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section{ padding: 84px 0; }
.section-alt{ background: #fff; }
.section-navy{ background: var(--navy); color: var(--cream); }
.section-navy h2, .section-navy h3{ color: var(--cream); }
.section-navy p{ color: #E4CFC6; }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .04em;
  color: var(--gold); margin-bottom: 14px;
}
.eyebrow::before{ content: ""; width: 22px; height: 1px; background: var(--gold); }

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: 4px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn-gold{ background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover{ background: var(--gold-light); text-decoration: none; transform: translateY(-1px); }
.btn-outline{ border-color: var(--cream); color: var(--cream); }
.btn-outline:hover{ background: rgba(247,239,221,.12); text-decoration: none; }
.btn-outline-navy{ border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover{ background: var(--navy); color: #fff; text-decoration: none; }

/* ---------- Top strip + header ---------- */
.topstrip{ background: var(--navy-deep); color: var(--cream-warm); font-size: 13px; }
.topstrip-inner{ display: flex; justify-content: space-between; align-items: center; height: 34px; }
.topstrip a{ color: var(--gold-light); }
.topstrip-loc{ opacity: .8; }

.site-header{ background: var(--navy); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 14px rgba(0,0,0,.15); }
.site-header-inner{ display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand{ display: flex; align-items: center; gap: 12px; }
.brand-text{ display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong{ font-family: 'Cinzel', serif; color: var(--cream); font-size: 17px; }
.brand-text small{ color: var(--gold-light); font-size: 11.5px; letter-spacing: .03em; }
.site-nav{ display: flex; align-items: center; gap: 26px; }
.site-nav a{ color: var(--cream-warm); font-weight: 500; font-size: 14.5px; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a.active{ color: var(--gold-light); text-decoration: none; border-color: var(--gold); }
.nav-portal{ background: var(--gold); color: var(--navy-deep) !important; padding: 9px 18px !important; border-radius: 4px; border: none !important; font-weight: 600; }
.nav-portal:hover{ background: var(--gold-light); }
.nav-toggle{ display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span{ width: 24px; height: 2px; background: var(--cream); }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 500px at 82% -10%, rgba(199,154,61,.22), transparent),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  padding: 76px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60'%3E%3Cpath d='M0 40 L40 10 L80 40 L120 12 L160 40 L200 8 L240 40 L280 14 L320 40 L360 10 L400 40' stroke='%23C79A3D' stroke-width='1' fill='none' opacity='0.35'/%3E%3C/svg%3E") repeat-x;
  background-size: 400px 60px;
  pointer-events: none;
}
.hero-grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1{ color: var(--cream); font-size: clamp(32px, 4vw, 50px); max-width: 14ch; }
.hero-lede{ color: #E4CFC6; font-size: 17.5px; max-width: 46ch; }
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.hero-crest-wrap{ display: flex; justify-content: center; }
.hero-stats{ display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 56px; border-top: 1px solid rgba(232,200,119,.25); padding-top: 30px; }
.hero-stats div{ text-align: center; border-right: 1px solid rgba(232,200,119,.2); }
.hero-stats div:last-child{ border-right: none; }
.hero-stat-num{ font-family: 'Cinzel', serif; font-size: 30px; color: var(--gold-light); display: block; }
.hero-stat-label{ font-size: 12.5px; color: #D8BDB4; }

/* ---------- Arch cards (mihrab-inspired) ---------- */
.arch-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 44px; }
.arch-card{
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-arch);
  padding: 46px 26px 30px; text-align: center;
  box-shadow: 0 10px 28px rgba(62,20,10,.06);
}
.arch-icon{
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--cream-warm); display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gold);
}
.arch-card h3{ font-size: 19px; margin-bottom: 10px; }
.arch-card p{ margin: 0 auto; font-size: 14.5px; }

/* ---------- Two-col content sections ---------- */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-reverse .split-media{ order: 2; }
.split-media{
  border-radius: var(--radius-arch);
  overflow: hidden; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(62,20,10,.14);
  min-height: 320px; background: linear-gradient(155deg, var(--teal), #123945);
  display: flex; align-items: center; justify-content: center;
}
.split ul{ padding-left: 0; list-style: none; margin: 20px 0 0; }
.split ul li{ position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--ink-soft); }
.split ul li::before{ content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 13px; top: 3px; }

/* ---------- Program list (Islamic + academics) ---------- */
.program-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.program-card{ background: var(--cream-warm); border: 1px solid var(--line); border-radius: 6px; padding: 26px 22px; }
.program-card h4{ font-size: 16.5px; margin-bottom: 8px; }
.program-card p{ font-size: 14px; margin-bottom: 0; }

/* ---------- Timeline (curriculum stages) ---------- */
.stage-row{ display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.stage-row:last-child{ border-bottom: none; }
.stage-name{ font-family: 'Cinzel', serif; color: var(--navy); font-size: 16px; }
.stage-row p{ margin-bottom: 6px; }

/* ---------- Table (subjects) ---------- */
.subject-table{ width: 100%; border-collapse: collapse; margin-top: 24px; }
.subject-table th, .subject-table td{ text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.subject-table th{ font-family: 'Cinzel', serif; color: var(--navy); font-weight: 600; font-size: 13px; }

/* ---------- Gallery ---------- */
.gallery-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.gallery-tile{
  aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; position: relative;
  display: flex; align-items: flex-end; padding: 18px; color: #fff;
}
.gallery-tile span{ font-size: 13.5px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,.5); position: relative; }
.gallery-tile::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }

/* ---------- Testimonials ---------- */
.quote-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
.quote-card{ background: rgba(247,239,221,.06); border: 1px solid rgba(232,200,119,.25); border-radius: 6px; padding: 28px; }
.quote-card p{ color: var(--cream-warm); font-style: italic; font-size: 15px; }
.quote-name{ color: var(--gold-light); font-weight: 600; font-size: 13.5px; margin-top: 14px; }

/* ---------- Forms ---------- */
.form-card{ background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 40px; box-shadow: 0 16px 40px rgba(62,20,10,.08); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea{
  font-family: inherit; font-size: 14.5px; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 4px; background: var(--cream); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--gold); background: #fff; }
.field textarea{ resize: vertical; min-height: 90px; }
.form-note{ font-size: 13px; color: var(--ink-soft); margin-top: 16px; }
#formStatus{ margin-top: 18px; padding: 13px 16px; border-radius: 4px; font-size: 14px; display: none; }
#formStatus.show{ display: block; }
#formStatus.ok{ background: #eaf4ea; color: #1f6d33; border: 1px solid #bfe2c4; }
#formStatus.err{ background: #fbeaea; color: #a5271f; border: 1px solid #f0c4c1; }

/* ---------- Map / contact tiles ---------- */
.contact-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; }
.contact-tile{ display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-tile .ic{ width: 40px; height: 40px; border-radius: 50%; background: var(--cream-warm); border: 1.5px solid var(--gold); flex: none; display: flex; align-items: center; justify-content: center; }
.map-frame{ border-radius: 8px; overflow: hidden; border: 1px solid var(--line); min-height: 340px; }

/* ---------- CTA band ---------- */
.cta-band{ background: linear-gradient(120deg, var(--navy-deep), var(--navy)); color: var(--cream); text-align: center; padding: 70px 0; }
.cta-band h2{ color: var(--cream); }
.cta-band .btn{ margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-deep); color: #D8BDB4; padding: 64px 0 0; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 44px; }
.footer-brand p{ color: #C7A79E; font-size: 13.5px; margin-top: 14px; max-width: 24ch; }
.site-footer h4{ color: var(--gold-light); font-size: 14px; margin-bottom: 14px; }
.site-footer a{ color: #E4CFC6; display: block; margin-bottom: 9px; font-size: 14px; }
.site-footer a:hover{ color: var(--gold-light); }
.footer-portal{ color: var(--gold-light) !important; font-weight: 600; }
.footer-bottom{ border-top: 1px solid rgba(232,200,119,.18); display: flex; justify-content: space-between; padding: 18px 0; font-size: 12.5px; color: #B79187; }

/* ---------- Reveal-on-load (single orchestrated entrance) ---------- */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ---------- Page header (inner pages) ---------- */
.page-hero{ background: linear-gradient(180deg, var(--navy), var(--navy-deep)); color: var(--cream); padding: 56px 0 64px; text-align: center; }
.page-hero h1{ color: var(--cream); }
.page-hero p{ margin: 0 auto; color: #E4CFC6; }
.breadcrumb{ font-size: 13px; color: var(--gold-light); margin-bottom: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-grid, .split, .contact-grid{ grid-template-columns: 1fr; }
  .split-reverse .split-media{ order: 0; }
  .arch-grid, .program-grid, .gallery-grid, .quote-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .nav-toggle{ display: flex; }
  .site-nav{
    position: absolute; top: 84px; left: 0; right: 0; background: var(--navy-deep);
    flex-direction: column; align-items: flex-start; padding: 20px 24px; gap: 16px;
    display: none;
  }
  .site-nav.open{ display: flex; }
  .form-grid{ grid-template-columns: 1fr; }
  .arch-grid, .program-grid, .gallery-grid, .quote-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  section{ padding: 56px 0; }
  .topstrip-loc{ display: none; }
}