/* =========================================================
   Cendekia Ceria School — shared stylesheet
   Design language: sunny community bulletin board.
   Cards read like pinned photos & notices with washi tape,
   sections divided by scalloped paper edges.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --cream:#FFF7E8;
  --paper:#FFFFFF;
  --ink:#2B2933;
  --ink-soft:#5B5766;
  --marigold:#F5A623;
  --marigold-dark:#C97A0A;
  --coral:#FF6F59;
  --coral-dark:#E4543F;
  --teal:#1C9099;
  --teal-dark:#137880;
  --grape:#7B5EA7;
  --grape-dark:#61478A;
  --green:#7CB342;
  --green-dark:#5C8A2E;
  --line:rgba(43,41,51,0.14);
  --shadow:0 10px 24px rgba(43,41,51,0.10), 0 2px 6px rgba(43,41,51,0.08);
  --radius:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Nunito',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800;}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}
a{color:var(--teal-dark);}
img{max-width:100%;display:block;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral-dark);
  font-weight:700;
  display:inline-block;
  margin-bottom:.6em;
}

/* ---------- Skip link / focus ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:200;
}
.skip-link:focus{left:16px; top:16px;}
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--grape); outline-offset:3px;
}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--cream);
  border-bottom:2px dashed var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink);
}
.brand-mark{
  width:44px; height:44px; flex:none;
  background:var(--marigold);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  position:relative;
}
.brand-mark svg{width:24px; height:24px;}
.brand-name{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.25rem;
  line-height:1.1;
}
.brand-name span{
  display:block; font-family:'Space Mono',monospace; font-weight:400;
  font-size:.68rem; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase;
}

.main-nav ul{
  list-style:none; display:flex; gap:4px; margin:0; padding:0;
}
.main-nav a{
  text-decoration:none; color:var(--ink); font-weight:700;
  font-family:'Baloo 2',sans-serif; font-size:1.02rem;
  padding:8px 14px; border-radius:999px; display:inline-block;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.main-nav a:hover{background:var(--marigold); color:var(--ink); transform:translateY(-1px);}
.main-nav a[aria-current="page"]{background:var(--ink); color:var(--cream);}

.nav-toggle{
  display:none; background:var(--paper); border:2px solid var(--ink);
  border-radius:10px; width:44px; height:40px; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2.5px; background:var(--ink);
  position:relative; transition:.2s;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}

@media (max-width:820px){
  .nav-toggle{display:flex;}
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:2px dashed var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .main-nav.open{max-height:400px;}
  .main-nav ul{flex-direction:column; padding:12px 24px 20px;}
  .main-nav a{display:block;}
}

/* ---------- Scallop divider ---------- */
.scallop{
  height:26px; width:100%; display:block;
  -webkit-mask-image: radial-gradient(circle at 13px 13px, transparent 13px, black 13.5px);
  mask-image: radial-gradient(circle at 13px 13px, transparent 13px, black 13.5px);
  -webkit-mask-size:26px 26px; mask-size:26px 26px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
}
.scallop.to-cream{background:var(--cream);}
.scallop.to-paper{background:var(--paper);}
.scallop.flip{transform:scaleY(-1);}

/* ---------- Sections ---------- */
section{padding:64px 0;}
.section-tight{padding:44px 0;}
.section-alt{background:var(--paper);}
.section-ink{background:var(--ink); color:var(--cream);}
.section-ink h2, .section-ink h1{color:#fff;}
.section-ink .eyebrow{color:var(--marigold);}

.lede{font-size:1.15rem; color:var(--ink-soft); max-width:60ch;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1rem;
  padding:12px 24px; border-radius:999px; text-decoration:none;
  border:2.5px solid var(--ink); background:var(--marigold); color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.btn:active{transform:translate(0,0); box-shadow:2px 2px 0 var(--ink);}
.btn.btn-coral{background:var(--coral); color:#fff;}
.btn.btn-teal{background:var(--teal); color:#fff;}
.btn.btn-ghost{background:transparent; color:var(--cream); border-color:var(--cream); box-shadow:4px 4px 0 rgba(255,247,232,.4);}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:72px 0 90px;
}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;}}
.hero-art{
  aspect-ratio:1/1; border-radius:28px; background:var(--marigold);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.confetti{position:absolute; inset:0;}
.confetti i{
  position:absolute; display:block; border-radius:3px;
}

/* ---------- Values band (KIMS) ---------- */
.values-band{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
@media (max-width:820px){.values-band{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.values-band{grid-template-columns:1fr;}}
.value-card{
  border-radius:16px; padding:22px 20px; color:#fff;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow);
}
.value-card .value-letter{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:2.1rem; line-height:1;
  opacity:.9;
}
.value-card h3{color:#fff; margin-bottom:2px; font-size:1.1rem;}
.value-card p{color:rgba(255,255,255,.9); font-size:.92rem; margin:0;}
.value-card.knowledgeable{background:var(--coral-dark);}
.value-card.interdependent{background:var(--marigold-dark);}
.value-card.smart{background:var(--teal-dark);}
.value-card.muttaqiin{background:var(--green-dark);}

/* ---------- Quick link tiles (home) ---------- */
.tiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.tiles{grid-template-columns:1fr;}}
.tile{
  background:var(--paper); border:2.5px solid var(--ink); border-radius:var(--radius);
  padding:26px 22px; text-decoration:none; color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
  display:block;
}
.tile:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink);}
.tile .tile-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.tile .tile-icon svg{width:28px; height:28px;}
.tile h3{margin-bottom:6px;}
.tile p{color:var(--ink-soft); font-size:.95rem; margin:0;}

/* ---------- Pinned / tape cards (bulletin board signature) ---------- */
.board{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px;
}
@media (max-width:900px){.board{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.board{grid-template-columns:1fr;}}

.pin-card{
  background:var(--paper); border-radius:10px; padding:22px 20px 20px;
  box-shadow:var(--shadow); position:relative;
  border:1px solid var(--line);
}
.pin-card::before{ /* washi tape */
  content:""; position:absolute; top:-14px; left:50%;
  width:76px; height:26px; transform:translateX(-50%) rotate(-3deg);
  background:repeating-linear-gradient(45deg, var(--tape,var(--teal)) 0 8px, color-mix(in srgb, var(--tape,var(--teal)) 82%, white) 8px 16px);
  opacity:.9; border-radius:2px;
}
.board .pin-card:nth-child(3n+1){transform:rotate(-1.4deg);}
.board .pin-card:nth-child(3n+2){transform:rotate(1deg);}
.board .pin-card:nth-child(3n+3){transform:rotate(-.6deg);}
.pin-card:hover{transform:rotate(0deg) translateY(-3px);}
.board.is-collapsed .pin-card:nth-child(n+7){display:none;}
button.btn{appearance:none; -webkit-appearance:none;}

.badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.chip{
  font-family:'Space Mono',monospace; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:5px 11px; border-radius:999px; color:#fff;
}
.chip.academic{background:var(--teal);}
.chip.sports{background:var(--coral);}
.chip.arts{background:var(--grape);}
.chip.civic{background:var(--marigold-dark);}

.pin-card .who{
  font-family:'Space Mono',monospace; font-size:.85rem; color:var(--ink-soft);
}

/* placeholder photo block */
.photo-ph{
  width:100%; aspect-ratio:4/3; border-radius:8px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); font-family:'Space Mono',monospace; font-size:.75rem;
  letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:8px;
}
.photo-real{
  width:100%; aspect-ratio:4/3; border-radius:8px; margin-bottom:14px; overflow:hidden;
}
.photo-real img{width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;}
#achievement-board .photo-real{aspect-ratio:3/4;}
#achievement-board .photo-real img{object-position:center 18%;}

/* ---------- Feature list (facilities) ---------- */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.feature-grid{grid-template-columns:1fr;}}
.feature{
  background:var(--paper); border-radius:var(--radius); padding:26px;
  border:2px solid var(--ink);
}
.feature .tile-icon{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.feature .tile-icon svg{width:26px; height:26px;}

/* ---------- Stat strip ---------- */
.stat-strip{
  display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between;
}
.stat{flex:1 1 140px;}
.stat b{
  font-family:'Baloo 2',sans-serif; font-size:2.4rem; display:block; color:var(--marigold);
}
.stat span{font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream);}

/* ---------- Community week schedule ---------- */
.week-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
}
@media (max-width:900px){.week-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.week-grid{grid-template-columns:1fr;}}

.day-card{
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:5px 5px 0 var(--ink);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.day-card:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink);}
.day-card.reveal.is-visible:hover{transform:translate(-3px,-3px);}
.day-card header{
  background:var(--accent, var(--teal));
  color:#fff;
  padding:22px 22px 18px;
}
.day-card header h3{
  color:#fff;
  margin:0 0 4px;
  font-size:1.55rem;
}
.day-card .day-time{
  font-family:'Space Mono',monospace;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0;
  opacity:.95;
  font-weight:700;
}
.day-card .club-list{
  list-style:none;
  margin:0;
  padding:16px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.day-card .club-list li{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:1.15rem;
  padding:10px 14px;
  background:var(--cream);
  border-radius:10px;
  border-left:5px solid var(--dot, var(--ink));
}
.day-card .club-list li.sports{--dot:var(--coral);}
.day-card .club-list li.arts{--dot:var(--grape);}
.day-card .club-list li.academic{--dot:var(--teal);}
.day-card .club-list li.civic{--dot:var(--marigold-dark);}

/* ---------- Timeline / calendar (parents & community) ---------- */
.timeline{border-left:3px dashed var(--line); margin-left:10px; padding-left:28px;}
.t-item{position:relative; padding-bottom:34px;}
.t-item:last-child{padding-bottom:0;}
.t-item::before{
  content:""; position:absolute; left:-36px; top:4px;
  width:14px; height:14px; border-radius:50%; background:var(--coral); border:3px solid var(--cream);
  box-shadow:0 0 0 2px var(--ink);
}
.t-date{font-family:'Space Mono',monospace; font-size:.78rem; color:var(--teal-dark); font-weight:700; text-transform:uppercase; letter-spacing:.05em;}

/* ---------- Two-col info ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
@media (max-width:820px){.split{grid-template-columns:1fr;}}

.visit-block{margin-top:56px; align-items:stretch;}
.visit-facts{
  margin:28px 0 22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.visit-facts dt{
  font-family:'Space Mono',monospace;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--coral-dark);
  font-weight:700;
  margin-bottom:4px;
}
.visit-facts dd{
  margin:0;
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.35;
}
.visit-facts dd a{color:var(--ink); text-decoration:none;}
.visit-facts dd a:hover{color:var(--teal-dark); text-decoration:underline;}
.visit-actions{display:flex; gap:14px; flex-wrap:wrap;}
.map-frame{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:2.5px solid var(--ink);
  min-height:320px;
  aspect-ratio:4/3;
}
.map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ---------- Form (community/parents contact) ---------- */
.form-card{
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius);
  padding:28px; box-shadow:5px 5px 0 var(--ink);
}
.field{margin-bottom:16px;}
.field label{display:block; font-weight:700; margin-bottom:6px; font-family:'Baloo 2',sans-serif;}
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:2px solid var(--line);
  font-family:'Nunito',sans-serif; font-size:1rem; background:var(--cream); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--teal); outline:none;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:var(--cream); padding:48px 0 28px;}
.site-footer a{color:var(--cream); text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr; gap:24px;}}
.footer-grid h4{color:var(--marigold); font-size:1rem; margin-bottom:12px;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:8px; font-size:.95rem; opacity:.9;}
.footer-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,247,232,.18);
  font-size:.82rem; opacity:.7; font-family:'Space Mono',monospace;
}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.mx-auto{margin-left:auto; margin-right:auto;}
.mb-0{margin-bottom:0;}
.mt-32{margin-top:32px;}
.center-head{max-width:640px; margin:0 auto 40px;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
.reveal.is-visible{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}