/* ===================================================================
   Parkia International School — Design tokens
   Palette: deep navy + warm gold + forest green, on warm ivory paper.
   Type: Fraunces (display serif) + Karla (body/UI sans)
   =================================================================== */

:root{
  --maroon: #6E1226;
  --maroon-deep: #4A0C19;
  --gold: #C9A227;
  --gold-deep: #A9821A;
  --forest: #1F5C3A;
  --ivory: #F7F2E0;
  --paper: #FFFFFF;
  --ink: #241416;
  --ink-soft: #5C4E4F;
  --line: #E1D4B8;

  /* kept as aliases so the rest of the stylesheet (written against a
     navy scheme) now resolves to the school's real maroon brand colour */
  --navy: var(--maroon);
  --navy-deep: var(--maroon-deep);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 3px;
  --container: 1140px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--serif); color: var(--navy-deep); line-height:1.15; margin:0 0 .5em; font-weight:600; }
p{ margin:0 0 1em; max-width: 62ch; }
ul{ padding-left: 1.2em; }

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn{
  display:inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight:600;
  font-size: .95rem;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{ background: var(--navy); color: #fff; }
.btn--accent{ background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.btn--accent:hover{ background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn--ghost-light{ border-color: rgba(255,255,255,.6); color:#fff; }
.btn--ghost-light:hover{ background:#fff; color: var(--navy); }
.btn--block{ display:block; width:100%; text-align:center; }
.btn--sm{ padding: 8px 16px; font-size: .85rem; }

/* Topbar */
.topbar{ background: var(--navy-deep); color: #D9CBA8; font-size: .8rem; }
.topbar__inner{ display:flex; align-items:center; gap:10px; padding: 7px 24px; flex-wrap: wrap; }
.topbar a{ color: #D9CBA8; }
.topbar a:hover{ color:#fff; }
.topbar__sep{ opacity:.5; }
.topbar__right{ margin-left:auto; color: var(--gold); font-weight:600; letter-spacing:.02em; }

/* Header */
.site-header{ background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index: 50; }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:50px; height:50px;
  flex-shrink:0;
}
.brand__mark img{ width:100%; height:100%; object-fit:contain; }
.brand__text{ font-family: var(--serif); font-weight:600; font-size:1.05rem; color: var(--maroon-deep); line-height:1.25; }
.brand__text small{ font-family: var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.03em; color: var(--ink-soft); text-transform:none; }
.brand--footer .brand__text{ color:#fff; }
.brand--footer .brand__text small{ color:#C9BFA6; }

.nav{ display:flex; align-items:center; gap: 28px; }
.nav__list{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.nav__list a{ font-weight:600; font-size:.94rem; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav__list a:hover, .nav__list a.is-active{ color: var(--navy); border-color: var(--gold); }
.nav__toggle{ display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; }

/* Hero */
.hero{
  position: relative;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 65%);
  color: #fff;
  overflow: hidden;
}
.hero__inner{ position:relative; z-index:2; padding: 88px 24px 100px; display:grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items:center; }
.hero__eyebrow{ color: var(--gold); font-weight:700; letter-spacing:.03em; margin-bottom: 14px; font-size:.95rem; }
.hero h1{ color:#fff; font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: 14ch; margin-bottom:.4em; }
.hero p.lede{ color: #CBD5E2; font-size: 1.1rem; max-width: 46ch; }
.hero__actions{ display:flex; gap:16px; margin-top: 28px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap: 34px; margin-top: 56px; flex-wrap:wrap; }
.hero__stat b{ display:block; font-family: var(--serif); font-size: 2rem; color: var(--gold); }
.hero__stat span{ font-size: .82rem; color:#B7C4D6; }
.hero__panel{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  padding: 30px;
  border-radius: var(--radius);
}
.hero__panel h3{ color:#fff; font-size:1.2rem; }
.hero__panel p{ color:#CBD5E2; font-size:.92rem; }
.hero__panel ol{ color:#E7ECF3; padding-left: 1.1em; font-size:.94rem; }
.hero__panel li{ margin-bottom:.5em; }

/* Section basics */
.section{ padding: 76px 0; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head{ max-width: 640px; margin-bottom: 44px; }
.section__kicker{ color: var(--forest); font-weight:700; font-size:.85rem; margin-bottom:8px; display:block; }
.section__head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Pillars / feature grid */
.grid{ display:grid; gap: 28px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }

.pillar{ border-top: 3px solid var(--gold); padding-top: 18px; }
.pillar h3{ font-size: 1.15rem; }
.pillar p{ color: var(--ink-soft); font-size: .95rem; }

/* Levels / programme strip */
.level-strip{ display:grid; grid-template-columns: repeat(4,1fr); border:1px solid var(--line); }
.level-strip > div{ padding: 26px 22px; border-right: 1px solid var(--line); }
.level-strip > div:last-child{ border-right:none; }
.level-strip h4{ font-family: var(--serif); margin:0 0 6px; color: var(--navy-deep); }
.level-strip p{ font-size:.87rem; color: var(--ink-soft); margin:0; }

/* CTA band */
.cta-band{ background: var(--forest); color:#fff; padding: 54px 0; }
.cta-band__inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; margin:0; font-size:1.6rem; }
.cta-band p{ color: #D6E3DC; margin:6px 0 0; }

/* Testimonial / quote */
.quote-block{ border-left: 3px solid var(--gold); padding-left: 26px; max-width: 680px; }
.quote-block p{ font-family: var(--serif); font-size:1.3rem; color: var(--navy-deep); max-width: none; }
.quote-block cite{ font-style:normal; color: var(--ink-soft); font-size:.9rem; }

/* Footer */
.site-footer{ background: var(--navy-deep); color: #B7C4D6; margin-top: 60px; }
.footer__inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 24px 40px; }
.footer__col h4{ color:#fff; font-family: var(--sans); font-size:.85rem; letter-spacing:.04em; margin-bottom: 14px; }
.footer__col ul{ list-style:none; padding:0; margin:0; }
.footer__col li{ margin-bottom:9px; }
.footer__col a:hover{ color:#fff; }
.footer__col address{ font-style:normal; font-size:.92rem; }
.footer__staff-link{ display:inline-block; margin-top:14px; font-size:.82rem; color: var(--gold); border-bottom:1px solid var(--gold-deep); }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding: 18px 24px; font-size:.82rem; text-align:center; color:#8FA0B6; }

/* Forms */
.form-card{ background: var(--paper); border:1px solid var(--line); padding: 36px; border-radius: var(--radius); }
.form-section-title{ font-family: var(--serif); font-size:1.15rem; color: var(--navy-deep); margin: 28px 0 16px; padding-top:18px; border-top:1px solid var(--line); }
.form-section-title:first-child{ margin-top:0; padding-top:0; border-top:none; }
.field-row{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field{ margin-bottom: 18px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color: var(--navy-deep); }
.field .hint{ font-size:.78rem; color: var(--ink-soft); margin-top:4px; }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field input[type=password],
.field input[type=file],
.field select,
.field textarea{
  width:100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .95rem;
  background: var(--ivory);
  color: var(--ink);
}
.field textarea{ min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--gold); background:#fff;
}
.field-radio{ display:flex; gap: 20px; margin-top: 6px; }
.field-radio label{ font-weight:500; display:flex; align-items:center; gap:6px; }

.alert{ padding: 14px 18px; border-radius: var(--radius); margin-bottom: 22px; font-size:.92rem; border:1px solid; }
.alert--success{ background:#EBF4EE; border-color:#8FBFA0; color:#1F5133; }
.alert--error{ background:#FBEAEA; border-color:#E4A2A2; color:#7A2020; }
.alert--info{ background:#EEF2F8; border-color:#AEC1DB; color: var(--navy-deep); }

/* Simple page header used on inner pages */
.page-hero{ background: var(--navy); color:#fff; padding: 56px 0; }
.page-hero h1{ color:#fff; margin:0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.page-hero p{ color:#CBD5E2; margin: 10px 0 0; }
.breadcrumb{ font-size:.8rem; color: var(--gold); margin-bottom:10px; }

/* Tables (admin) */
table.data-table{ width:100%; border-collapse: collapse; background:#fff; font-size:.92rem; }
table.data-table th, table.data-table td{ padding: 11px 14px; border-bottom: 1px solid var(--line); text-align:left; }
table.data-table th{ background: var(--navy); color:#fff; font-weight:600; font-size:.82rem; text-transform: uppercase; letter-spacing:.03em; }
table.data-table tr:hover td{ background: #F5F1E6; }
.badge{ display:inline-block; padding:3px 10px; border-radius: 20px; font-size:.75rem; font-weight:700; }
.badge--pending{ background:#FCEFD8; color:#8A5A00; }
.badge--approved{ background:#E1F0E5; color:#1F6D3B; }
.badge--rejected{ background:#FBE3E3; color:#A32222; }

/* Admin shell */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{ width: 240px; background: var(--navy-deep); color:#fff; flex-shrink:0; padding: 24px 0; }
.admin-sidebar__brand{ padding: 0 22px 20px; font-family: var(--serif); font-size:1.1rem; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:14px; }
.admin-sidebar a{ display:block; padding: 11px 22px; color:#B7C4D6; font-size:.92rem; font-weight:600; }
.admin-sidebar a:hover, .admin-sidebar a.is-active{ color:#fff; background: rgba(255,255,255,.06); border-left:3px solid var(--gold); }
.admin-main{ flex:1; background: var(--ivory); padding: 32px 36px; }
.admin-topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 26px; }
.stat-cards{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 30px; }
.stat-card{ background:#fff; border:1px solid var(--line); padding: 20px; }
.stat-card b{ font-family: var(--serif); font-size:1.8rem; display:block; color: var(--navy-deep); }
.stat-card span{ font-size:.82rem; color: var(--ink-soft); }
.panel{ background:#fff; border:1px solid var(--line); padding: 24px; margin-bottom: 24px; }
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--navy-deep); }
.login-card{ background:#fff; padding: 44px; width: 100%; max-width: 400px; border-radius: var(--radius); }

/* Responsive */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr 1fr; }
  .grid--3, .grid--4{ grid-template-columns: 1fr 1fr; }
  .level-strip{ grid-template-columns: 1fr 1fr; }
  .level-strip > div{ border-bottom:1px solid var(--line); }
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; }
  .stat-cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .nav__list{ display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; padding:16px 24px; border-bottom:1px solid var(--line); }
  .nav__list.is-open{ display:flex; }
  .nav__toggle{ display:block; }
  .nav__cta{ display:none; }
  .field-row{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }
  .grid--3, .grid--4, .grid--2{ grid-template-columns: 1fr; }
  .level-strip{ grid-template-columns: 1fr; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
}