/* =====================================================================
   KID-FRIENDLY CONTENT HEADER  🎈
   Styles ONLY the page title (<h1>) and description (<p class="lead">)
   inside the content header. Scoped with :has(#viewlet-above-content-title)
   so the site masthead / navigation title is never affected.
   Embed globally for the kids' views — one consistent look for every kids theme.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Fredoka:wght@400;500;600&display=swap");

/* ---- palette (tweak to taste) ---- */
:root {
  --kid-title-1: #ff6b6b;   /* title gradient start */
  --kid-title-2: #4dabf7;   /* title gradient end   */
  --kid-title-solid: #4a4ae0; /* fallback if gradient text unsupported */
  --kid-wave: #ffd166;      /* wavy underline colour */
  --kid-desc-text: #4a5b74;
  --kid-desc-bg: #f4f7ff;
  --kid-desc-border: #d7e6ff;
  --kid-desc-accent: #ff8fb1;
}

/* ---------------------- TITLE ---------------------- */
header:has(> #viewlet-above-content-title) > h1,
.documentFirstHeading {
  display: inline-block !important;      /* so the wavy underline hugs the text */
  position: relative !important;
  font-family: 'Baloo 2', 'Fredoka', 'Comic Sans MS', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4.5vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: .5px !important;
  margin: 10px 0 8px !important;
  padding-bottom: 12px !important;       /* room for the underline */

  /* cheerful gradient text (with solid fallback) */
  color: var(--kid-title-solid) !important;
  background: linear-gradient(90deg, var(--kid-title-1), var(--kid-title-2)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* hand-drawn style wavy underline (separate layer so it doesn't clip to text) */
header:has(> #viewlet-above-content-title) > h1::after,
.documentFirstHeading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'><path d='M0 5 Q 10 0 20 5 T 40 5' fill='none' stroke='%23ffd166' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 40px 10px;
}

/* ------------------- DESCRIPTION ------------------- */
header:has(> #viewlet-above-content-title) > p.lead,
p.lead,
.documentDescription {
  font-family: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif !important;
  font-size: clamp(16px, 2vw, 19px) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: var(--kid-desc-text) !important;

  /* soft rounded callout with a playful left accent */
  background: var(--kid-desc-bg) !important;
  border: 2px solid var(--kid-desc-border) !important;
  border-left: 6px solid var(--kid-desc-accent) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin: 6px 0 14px !important;
  box-shadow: 0 3px 10px rgba(74, 91, 116, .06) !important;
}