/* =========================================================
   Tshepiso ya Botshelo Foster Homes — base layer
   Design tokens, reset, typography, buttons and shared
   utilities. Component-specific styling lives in
   components/<name>/<name>.css
   ========================================================= */

:root{
  /* Brand — sampled from the official artwork */
  --purple:      #754AA3;
  --purple-deep: #5B3583;
  --purple-dark: #3B2158;
  --purple-soft: #9B72C4;
  --lilac:       #D3BFE2;
  --lilac-pale:  #EFE6F6;
  --yellow:      #FDCC03;
  --gold:        #E2B148;
  --cream:       #FDF8EE;
  --ink:         #2C1B42;
  --ink-soft:    #5C4A70;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 6px 18px rgba(59,33,88,.10);
  --shadow-md: 0 14px 36px rgba(59,33,88,.16);
  --shadow-lg: 0 26px 60px rgba(59,33,88,.24);

  --ff-display: "Fredoka", "Trebuchet MS", sans-serif;
  --ff-body: "Poppins", "Segoe UI", system-ui, sans-serif;

  --wrap: 1160px;
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }

body{
  margin:0;
  font-family:var(--ff-body);
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{ font-family:var(--ff-display); line-height:1.12; margin:0 0 .5em; font-weight:600; }

a{ color:var(--purple); text-decoration-thickness:2px; text-underline-offset:3px; }

:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; border-radius:6px; }

/* Component host elements must not interfere with layout. */
body [data-component]{ display:block; }

/* ---------------- Layout utilities ---------------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.section{ position:relative; padding:6rem 0; }
.section--cream{ background:var(--cream); }
.section--white{ background:#fff; }
.section--lilac{ background:linear-gradient(180deg, var(--lilac-pale), #fff); }
.section--purple{
  background:linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  color:#fff; overflow:hidden;
}

.section__head{ max-width:760px; margin:0 auto 3.5rem; text-align:center; position:relative; z-index:2; }

/* A plain section placed directly under the fixed nav (i.e. the page
   opens without a hero or page-header) needs clearance for it. */
main > [data-component]:first-child .section{ padding-top:calc(var(--nav-h) + 4rem); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--yellow); color:var(--ink); padding:.75rem 1.25rem;
  border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------------- Typography utilities ---------------- */
.eyebrow{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:.8rem; color:var(--purple); margin:0 0 .75rem;
}
.eyebrow--light{ color:var(--yellow); }

.h2{ font-size:clamp(1.85rem, 4.2vw, 2.9rem); margin:0 0 1rem; }
.h2--light{ color:#fff; }

/* Highlighter-pen effect behind a word. */
.hl{ position:relative; z-index:0; color:var(--purple); }
.hl::after{
  content:""; position:absolute; inset:auto 0 .05em 0; height:.42em; z-index:-1;
  background:var(--yellow); opacity:.42; border-radius:.2em; transform:rotate(-.6deg);
}
.hl--gold{ color:var(--yellow); }
.hl--gold::after{ background:rgba(253,204,3,.22); opacity:1; }

/* Hand-drawn underline squiggle. */
.squiggle{ color:var(--yellow); position:relative; white-space:nowrap; }
.squiggle::after{
  content:""; position:absolute; left:0; right:0; bottom:-.12em; height:.16em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 20 1, 32 11, 50 6 S 84 1, 100 8 S 116 9, 118 6' stroke='%23FDCC03' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

.lead{ font-size:1.05rem; font-weight:300; color:var(--ink-soft); }
.section__sub{ color:rgba(255,255,255,.85); font-weight:300; font-size:1.05rem; margin:0; }
.section__sub--dark{ color:var(--ink-soft); }
.section__sub em{ color:var(--yellow); font-style:normal; font-weight:500; }
.section__sub--dark em{ color:var(--purple); }

.pill{
  background:var(--lilac-pale); color:var(--purple-deep);
  padding:.4rem 1rem; border-radius:var(--r-pill);
  font-size:.85rem; font-weight:500; border:1.5px solid var(--lilac);
}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--yellow); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.5rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--ff-display); font-weight:600; font-size:1rem;
  border:none; border-radius:var(--r-pill); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 0 rgba(0,0,0,.14);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-3px) rotate(-1deg); box-shadow:0 10px 0 rgba(0,0,0,.16); }
.btn:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.16); }
.btn--lg{ padding:.95rem 2rem; font-size:1.075rem; }
.btn--sun{ --bg:var(--yellow); --fg:var(--ink); }
.btn--plum{ --bg:var(--purple); --fg:#fff; }
.btn--ghost{ --bg:transparent; --fg:#fff; border:2px solid rgba(255,255,255,.55); box-shadow:none; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); box-shadow:none; }
.btn--outline{ --bg:#fff; --fg:var(--purple); border:2px solid var(--purple); box-shadow:0 6px 0 rgba(117,74,163,.22); }

/* ---------------- Decorative: waves ---------------- */
.wave{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:1; pointer-events:none; }
.wave svg{ width:100%; height:90px; display:block; }

/* ---------------- Decorative: floating confetti dots ---------------- */
.confetti{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.confetti i{
  position:absolute; display:block; border-radius:50%;
  animation:float var(--dur,9s) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
}
@keyframes float{ from{ transform:translateY(0); } to{ transform:translateY(-22px); } }

/* ---------------- Toast ---------------- */
/* Hidden with visibility rather than a large translate — a translate
   alone leaves a sliver of the pill peeking above the bottom edge. */
.toast{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%,1.5rem);
  background:var(--purple-dark); color:#fff; padding:.85rem 1.5rem;
  border-radius:var(--r-pill); box-shadow:var(--shadow-lg); z-index:300;
  font-size:.92rem; font-weight:500; border:2px solid var(--yellow);
  opacity:0; visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4), opacity .25s ease, visibility .25s;
}
.toast.is-visible{ transform:translate(-50%,0); opacity:1; visibility:visible; }

/* ---------------- Scroll reveal ---------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease var(--d,0s), transform .7s cubic-bezier(.2,.7,.3,1) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* Until the component loader has mounted, hide the shell to avoid a flash. */
body:not(.is-ready) [data-component]{ opacity:0; }
body.is-ready [data-component]{ opacity:1; transition:opacity .3s ease; }
/* A component whose asset failed to load leaves an empty host — never
   let that swallow a chunk of vertical space. */
body [data-component]:empty{ display:none; }

/* Shown only when the site is opened straight from disk (file://). */
.file-warning{
  position:fixed; inset:0; z-index:400;
  display:grid; place-items:center; padding:2rem;
  background:var(--purple-dark); color:#fff; text-align:center;
}
.file-warning__inner{ max-width:46ch; }
.file-warning code{
  display:inline-block; background:rgba(0,0,0,.35); padding:.2rem .5rem;
  border-radius:6px; color:var(--yellow); font-size:.9rem;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 820px){
  .section{ padding:4.5rem 0; }
}
@media (max-width: 560px){
  .btn{ width:100%; }
}

/* ---------------- Motion preferences ---------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------- Print ---------------- */
@media print{
  .confetti, .toast, .btn, .wave{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section--purple{ background:#fff !important; color:#000 !important; }
}