/* ─ General Info ─────────────────────────────────────────────────────────────────────────
   kidimu.css — Shared design template for kidimu.org pages
   Hosted on GitHub, served via jsDelivr CDN.

   Each Squarespace code block should include these tags:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/YOUR-ORG/kidimu-web@main/kidimu.css">
     <script src="https://cdn.jsdelivr.net/gh/YOUR-ORG/kidimu-web@main/kidimu.js" defer></script>

   Fonts and Tabler Icons are kept as <link> tags in each code block
   (not @import here) to avoid CDN-chained loading delays.
──────────────────────────────────────────────────────────────────────────────────────── */

/* ─ Squarespace code block global settings ──────────────────────────────────────────── */
.code-block { margin: 0 !important; padding: 0 !important; width: 100%; background: #ffffff; }

/* ─ Squarespace wrappers around the code block ──────────────────────────────────────── */
.sqs-block-code { margin: 0 !important; padding: 0 !important; }
.sqs-block      { margin: 0 !important; padding: 0 !important; }
.page-section   { padding-top: 0 !important; padding-bottom: 0 !important; }
[data-section-id] { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ─ Squarespace elements after the code block ───────────────────────────────────────── */
.kidimu-page ~ * { margin-top: 0 !important; padding-top: 0 !important; }

/* ─ General card container settings for each outlined square colors applied on page ─── */
.kidimu-card, .kidimu-card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: 'Source Sans 3', sans-serif;
}
.kidimu-card {
  padding: 1.5rem 1.5rem 1.75rem;
  position: relative;
  overflow: visible;
  border-radius: 20px !important;
  margin: 0rem .5rem .5rem;
  border: 0.5px solid #e0e0e0 !important;
  background: #ffffff;
}
.kidimu-card:has(iframe) { padding: 0; overflow: hidden;}

/* ─ Main Cards ──────────────────────────────────────────────────────────────────────── */
.kidimu-main {
  background: var(--accent, #ffffff);
  color: var(--text, #000000) !important;
}
.kidimu-main-sub {
  display: block;
  font-size: 22px !important;
  line-height: 1.6;
  margin-top: 0.5rem;
}
/* ─ Circles in Main Cards ───────────────────────────────────────────────────────────── */
.kidimu-blobs {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
}
.kidimu-blobs::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.kidimu-blobs::after {
  content: '';
  position: absolute;
  bottom: -50px; left: 60%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}
/* ─ Set text in Mian Cars ───────────────────────────────────────────────────────────── */
.kidimu-main h1 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: var(--heading, #000000) !important;
}
.kidimu-main h2 {color: var(--subheading, #000000) !important;}
/* ── Typewriter pill + emoji + wiggle ───────────────────────────────────────────────── */
.kidimu-type {
  display: inline-block;
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.25) !important;
  border: 0.5px solid rgba(255,255,255,0.4) !important;
  color: inherit !important;
}
.kidimu-type-emoji {
  display: inline-block;
  transition: transform 0.15s ease;
}
.kidimu-type:hover .kidimu-type-emoji,
.kidimu-type:focus .kidimu-type-emoji {
  animation: kidEyebrowWiggle 0.45s ease forwards;
}
@keyframes kidEyebrowWiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-18deg); }
  50%  { transform: rotate(16deg); }
  75%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
/* ── Note block ───────────────────────────────────────────────────────────────────────── */
.kidimu-note {
  background-color: var(--notes, #000000) !important;
  border-left: 3px solid var(--accent, #000000) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: .75rem 1rem;
  font-size: 17px !important;
  color: #555555 !important;
  line-height: 1.5;
  margin-top: 1rem;
  display: block;
}
.kidimu-note strong {
  color: #111111 !important;
  font-weight: 600 !important;
}
/* ── Section label ────────────────────────────────────────────────────────────────────── */
.kidimu-section {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--section, #5aaa20) !important;
  margin-bottom: 1rem;
  display: block;
}
/* ── SubSection label ─────────────────────────────────────────────────────────────────── */
.kidimu-subsection {
  font-family: 'Poppins', sans-serif !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin-bottom: 1rem;
}
/* ── Big text ─────────────────────────────────────────────────────────────────────────── */
.kidimu-b-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin-bottom: 1rem;
}
/* ── Little text ──────────────────────────────────────────────────────────────────────── */
.kidimu-l-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: #555555 !important;
  margin-bottom: 1rem;
}
/* ── Legend ───────────────────────────────────────────────────────────────────────────── */
.kidimu-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid #ebebeb !important;
}
.kidimu-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 17px !important;
  color: #666666 !important;
}
.kidimu-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
/* ── Adding Columns ───────────────────────────────────────────────────────────────────── */
.kidimu-cols {
  padding: 0 0.5rem 0.5rem;
  display: grid;
  grid-template-columns: var(--col-split, 1fr 1fr);
  gap: 0.5rem;
  align-items: start;
}
/* ── Mobile Columns ───────────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .kidimu-cols { 
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
}

/* ── Discount badge ──────────────────────────────────────────────────────────
   Used on any page that shows a discount callout (Birthday packages,
   Membership toggle, Camp pricing, etc.).
   Class: kidimu-discount-badge

   Interactive version (e.g. Membership military toggle) — add
   kidimu-discount-badge--active when the discount is applied:

     el.classList.toggle('kidimu-discount-badge--active', isActive);

   Static version (e.g. Birthday package cards) — just use the base class.  */

.kidimu-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fbeaf0 !important;
  border: 0.5px solid #f2b8d0 !important;
  color: #b0305a !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 3px 10px;
  border-radius: 100px;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}

.kidimu-discount-badge--active {
  background: #E94F8A !important;
  border-color: #E94F8A !important;
  color: #ffffff !important;
}