/* ===================================================================
   Cosmic International School — HOME PAGE redesign (v2)
   Direction: warm corkboard / scrapbook — pinned photos, sticky notes,
   hand-drawn trail, poster-style callouts. Loaded AFTER style.css on
   index.html only, so inner pages are untouched until approved.
   =================================================================== */

:root{
  --kraft: #F1E7D3;
  --kraft-dark: #E6D8BC;
  --paper: #FFFFFF;
  --ink: #22303F;
  --ink-soft: #5C6A78;
  --red: #E5482F;
  --red-dark: #C43A24;
  --yellow: #FFC738;
  --sky: #2F97C9;
  --green: #3F9A5D;
  --pink: #E23D82;
  --shadow-pin: 0 12px 22px -10px rgba(34,48,63,0.38);
  --shadow-soft: 0 6px 14px -8px rgba(34,48,63,0.25);
}

body{
  background: var(--kraft);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  color: var(--ink);
}
h1,h2,h3,h4{ font-family: "Baloo 2", "DM Sans", sans-serif; color: var(--ink); }
p{ color: var(--ink-soft); }

/* header/footer re-skin for this page only */
.site-header{ background: rgba(241,231,211,0.92); border-bottom: 2px solid var(--ink); }
.nav-links a.active{ background: var(--red); color:#fff; }
.nav-links a:hover{ background: #fff; color: var(--red-dark) !important; }
.btn-primary{ background: var(--red); box-shadow: 0 8px 0 0 var(--red-dark); }
.btn-primary:hover{ background: var(--red); transform: translateY(2px); box-shadow: 0 6px 0 0 var(--red-dark); }
.btn-ghost{ background:#fff; border:2px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background: var(--yellow); border-color: var(--ink); color:var(--ink); }
footer{ background: var(--ink); }

/* ---------- logo fix: show the full mark, not a cropped circle ---------- */
.brand img{
  height: 58px; width: 58px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 0 0 2px var(--ink);
}
.footer-brand img{
  height: 54px; width: 54px;
  object-fit: contain;
  border-radius: 10px;
  background:#fff;
  padding: 4px;
}

/* ---------- banner-free page intro (replaces old page-hero/breadcrumb) ---------- */
.page-intro{ padding: 46px 0 10px; position:relative; }
.page-intro .container{ display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.page-intro h1{ font-size: clamp(1.9rem,3.6vw,2.7rem); margin:4px 0 8px; }
.page-intro .lead{ max-width:56ch; margin:0; }
.page-intro-tape{
  position:absolute; top:6px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:120px; height:30px; background: rgba(255,199,56,.65); box-shadow: var(--shadow-soft);
}

/* ---------- 3-col note variant ---------- */
.note-wall.cols-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width:900px){ .note-wall.cols-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:620px){ .note-wall.cols-3{ grid-template-columns: 1fr; } }

/* ---------- pinned index card (generic white card w/ pin) ---------- */
.index-card{
  background:#fff; border-radius:4px; box-shadow: var(--shadow-pin);
  padding: 30px 28px; position:relative;
}
.index-card .pin-dot{ top:-8px; }

/* ---------- gallery filter tabs (washi-tape style) ---------- */
.gf-btn{
  font-family:"Baloo 2",sans-serif !important; font-weight:700 !important;
  background: #fff !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; border-radius: 4px !important;
  padding: 9px 16px !important; box-shadow: var(--shadow-soft);
}
.gf-btn.active, .gf-btn:hover{ background: var(--yellow) !important; color:var(--ink) !important; }

/* photo-wall used as the gallery grid: filterable items */
.photo-wall .gallery-item{ width:250px; max-width:100%; }
.photo-wall .gallery-item:nth-child(4n+1) .cork-photo{ transform: rotate(-3deg); }
.photo-wall .gallery-item:nth-child(4n+2) .cork-photo{ transform: rotate(2deg); }
.photo-wall .gallery-item:nth-child(4n+3) .cork-photo{ transform: rotate(-1.5deg); }
.photo-wall .gallery-item:nth-child(4n+4) .cork-photo{ transform: rotate(2.5deg); }

/* ---------- contact page: pinned info note + form index card ---------- */
.contact-postit{
  background: var(--yellow); border-radius:4px; box-shadow: var(--shadow-pin);
  padding: 34px 30px; position:relative; transform: rotate(-1.5deg);
}
.contact-postit h3{ margin-top:6px; }
.contact-postit .info-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.contact-postit .info-row .ic{ font-size:1.25rem; }
.contact-postit .info-row a, .contact-postit .info-row span{ color: var(--ink); font-weight:500; }
.contact-postit .social-row{ display:flex; gap:10px; margin-top:8px; }
.contact-postit .social-row a{
  width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.contact-postit .social-row a:hover{ background: var(--red); color:#fff; border-color:var(--red); }

.cork-form{
  background:#fff; border-radius:6px; box-shadow: var(--shadow-pin);
  padding: 34px 30px; position:relative; transform: rotate(1deg);
}
.cork-form label{ font-family:"Baloo 2",sans-serif; font-weight:600; font-size:.86rem; display:block; margin:14px 0 6px; }
.cork-form input, .cork-form select, .cork-form textarea{
  width:100%; padding:12px 14px; border-radius:4px; border:2px solid rgba(34,48,63,0.25);
  font-family:"DM Sans",sans-serif; font-size:.98rem; background: var(--kraft);
}
.cork-form input:focus, .cork-form select:focus, .cork-form textarea:focus{ outline:none; border-color: var(--red); }
.cork-form textarea{ resize:vertical; min-height:110px; }
.cork-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .cork-form .form-row{ grid-template-columns:1fr; } }

.cork-map{
  border-radius:6px; overflow:hidden; box-shadow: var(--shadow-pin); border:3px solid var(--ink);
}
.cork-map iframe{ width:100%; height:340px; border:0; display:block; }

/* ---------- responsive two-column split (replaces inline grid styles) ---------- */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.split-2.wide-right{ grid-template-columns:1fr 1.2fr; gap:36px; align-items:start; }
@media (max-width: 860px){
  .split-2, .split-2.wide-right{ grid-template-columns: 1fr; }
}

/* ---------- layout scaffolding ---------- */
.corkboard-section{ padding: 70px 0; position:relative; }
.section-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Caveat",cursive; font-size:1.5rem; font-weight:700;
  color: var(--red-dark); transform: rotate(-2deg);
}
.section-title{ font-size: clamp(1.8rem,3.4vw,2.6rem); margin: 4px 0 14px; }
.section-intro{ max-width:60ch; }

/* dashed cut divider between sections */
.cut-divider{
  border-top: 3px dashed rgba(34,48,63,0.3);
  position:relative; margin: 0 auto; max-width: var(--maxw); width:90%;
}
.cut-divider::before{
  content:"✂️"; position:absolute; top:-15px; left:6%;
  background: var(--kraft); padding: 0 10px; font-size:1.1rem;
}

/* ---------- hero ---------- */
.hero-cork{ padding: 54px 0 30px; position:relative; }
.hero-cork .container{ display:grid; grid-template-columns: 1.05fr .95fr; gap:50px; align-items:center; }
.hero-cork h1{ font-size: clamp(2.3rem,4.6vw,3.6rem); line-height:1.08; }
.hero-cork h1 .hl{ background: linear-gradient(180deg, transparent 62%, var(--yellow) 62%); }
.hero-cork .lead{ font-size:1.12rem; max-width:48ch; margin-top:14px; }
.hero-note{
  font-family:"Caveat",cursive; font-size:1.4rem; color:var(--red-dark);
  transform: rotate(-2deg); display:inline-block; margin-bottom:6px;
}
.hero-actions-cork{ display:flex; gap:16px; flex-wrap:wrap; margin-top:26px; }
.pin-dot{
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--red) 40%, var(--red-dark) 100%);
  position:absolute; left:50%; top:-8px; transform:translateX(-50%);
  box-shadow: 0 3px 4px rgba(0,0,0,.35); z-index:3;
}
.cork-photo{
  position:relative; background:#fff; padding:10px 10px 14px;
  box-shadow: var(--shadow-pin); transform: rotate(-3deg); max-width:420px; margin: 0 auto;
}
.cork-photo img{ display:block; width:100%; }
.cork-wrap{ position:relative; }
.sticky-mini{
  position:absolute; padding:14px 16px; border-radius:3px;
  box-shadow: var(--shadow-soft); font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.92rem;
  z-index:2; line-height:1.25;
}
.sticky-mini .big{ display:block; font-size:1.4rem; }
.sticky-mini.yellow{ background:var(--yellow); color:var(--ink); }
.sticky-mini.pink{ background:var(--pink); color:#fff; }

/* ---------- stat stamps ---------- */
.stamp-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: 26px; }
.stamp{
  background:#fff; border-radius:6px; padding:22px 26px; text-align:center;
  box-shadow: var(--shadow-soft); position:relative; min-width:170px;
  border: 2px dashed rgba(34,48,63,0.25);
}
.stamp:nth-child(odd){ transform: rotate(-2deg); }
.stamp:nth-child(even){ transform: rotate(1.5deg); }
.stamp .n{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:2rem; color: var(--red); }
.stamp .l{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-top:4px; }

/* ---------- sticky note wall ---------- */
.note-wall{ display:grid; grid-template-columns: repeat(4,1fr); gap:26px 22px; }
.note{
  padding: 24px 20px 20px; border-radius:3px; box-shadow: var(--shadow-soft);
  position:relative; min-height:190px;
}
.note::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:34px; height:16px; background: rgba(255,255,255,.55); border-radius:2px;
}
.note h3{ font-size:1.05rem; margin: 6px 0 8px; }
.note p{ font-size:.9rem; margin:0; }
.note.yellow{ background:var(--yellow); color:var(--ink); }
.note.pink{ background:var(--pink); color:#fff; }
.note.sky{ background:var(--sky); color:#fff; }
.note.green{ background:var(--green); color:#fff; }
.note.pink p, .note.sky p, .note.green p{ color: rgba(255,255,255,0.88); }
.note:nth-child(4n+1){ transform: rotate(-2deg); }
.note:nth-child(4n+2){ transform: rotate(1.5deg); }
.note:nth-child(4n+3){ transform: rotate(-1deg); }
.note:nth-child(4n+4){ transform: rotate(2deg); }
.note .icon-line{ font-size:1.6rem; }

/* ---------- hand-drawn trail ---------- */
.trail-wrap{ position:relative; padding-top:10px; }
.trail-svg{ display:block; width:100%; height:70px; }
.trail-stops{ display:flex; justify-content:space-between; margin-top:-18px; }
.trail-stop{ text-align:center; flex:1; }
.trail-dot{
  width:52px; height:52px; border-radius:50%; background:#fff; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.2rem; box-shadow: var(--shadow-soft);
}
.trail-stop:nth-child(1) .trail-dot{ border-color: var(--red); color:var(--red); }
.trail-stop:nth-child(2) .trail-dot{ border-color: var(--sky); color:var(--sky); }
.trail-stop:nth-child(3) .trail-dot{ border-color: var(--yellow); color:#9A6B0C; }
.trail-stop:nth-child(4) .trail-dot{ border-color: var(--green); color:var(--green); }
.trail-stop:nth-child(5) .trail-dot{ border-color: var(--pink); color:var(--pink); }
.trail-age{ font-size:.74rem; font-weight:700; text-transform:uppercase; color:var(--ink-soft); }
.trail-label{ font-family:"Baloo 2",sans-serif; font-weight:600; font-size:1rem; margin-top:2px; }
@media (max-width:760px){
  .trail-svg{ display:none; }
  .trail-stops{ flex-direction:column; gap:18px; margin-top:0; }
  .trail-stop{ display:flex; align-items:center; gap:16px; text-align:left; }
  .trail-dot{ margin:0; flex-shrink:0; }
}

/* ---------- poster callout (daycare / CTA) ---------- */
.poster{
  border: 4px solid var(--ink); border-radius: 10px;
  padding: 40px 44px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.poster.red{ background: var(--red); color:#fff; }
.poster.red h2, .poster.red p{ color:#fff; }
.poster-badge{
  position:absolute; top:-18px; right:26px; width:78px; height:78px; border-radius:50%;
  background: var(--yellow); color:var(--ink); display:flex; align-items:center; justify-content:center;
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.78rem; text-align:center; line-height:1.1;
  transform: rotate(12deg); box-shadow: var(--shadow-soft); border:3px solid var(--ink);
}
.poster .btn-yellow-cork{
  background: var(--yellow); color:var(--ink); border:3px solid var(--ink);
  font-family:"Baloo 2",sans-serif; font-weight:700; padding:13px 26px; border-radius:100px;
  box-shadow: 0 6px 0 0 var(--ink);
}
.poster .btn-yellow-cork:hover{ transform: translateY(3px); box-shadow: 0 3px 0 0 var(--ink); }

/* ---------- pinned photo wall (life at cosmic) ---------- */
.photo-wall{ display:flex; flex-wrap:wrap; gap: 26px; justify-content:center; }
.photo-wall .cork-photo{ width: 235px; max-width:100%; margin:0; }
.photo-wall .cork-photo:nth-child(1){ transform: rotate(-3deg); }
.photo-wall .cork-photo:nth-child(2){ transform: rotate(2deg); }
.photo-wall .cork-photo:nth-child(3){ transform: rotate(-1.5deg); }
.photo-wall .cork-photo:nth-child(4){ transform: rotate(2.5deg); }
.photo-wall .cap{ font-family:"Caveat",cursive; font-size:1.15rem; text-align:center; margin-top:6px; color:var(--ink-soft); }

/* ---------- postcard testimonials ---------- */
.postcard{
  background:#fff !important; border:2px solid rgba(34,48,63,0.15);
  box-shadow: var(--shadow-pin) !important;
}
.postcard .mark{ font-family:"Caveat",cursive !important; color: var(--red) !important; opacity:.5; font-size:4rem !important; }
.postcard p{ font-family:"Caveat",cursive; font-size:1.35rem !important; color: var(--ink) !important; line-height:1.35; }
.postcard .who{ font-family:"Baloo 2",sans-serif !important; color: var(--red-dark) !important; }
.postcard .stamp-icon{
  position:absolute; top:18px; right:22px; width:44px; height:44px; border:2px dashed var(--ink-soft);
  border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; opacity:.5;
}

@media (max-width: 980px){
  .hero-cork .container{ grid-template-columns:1fr; }
  .note-wall{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
  .note-wall{ grid-template-columns: 1fr; }
  .stamp-row{ gap:16px; }
  .poster{ flex-direction:column; text-align:center; padding:32px 24px; }
}