/* ==========================================================================
   VanSpark - Vandana & Vedika Learning Studio
   Brand Design System & Custom CSS (Logo-inspired Palette)
   ========================================================================== */

/* 1. CSS Custom Properties (VanSpark Theme Tokens) */
:root {
  /* Logo Core Palette */
  --vanspark-purple: #5C2596;
  --vanspark-purple-dark: #3F156C;
  --vanspark-purple-soft: #F4EEFC;

  --vanspark-pink: #FF2A85;
  --vanspark-pink-soft: #FFF0F6;

  --vanspark-orange: #FF8A00;
  --vanspark-orange-soft: #FFF7ED;

  --vanspark-green: #72C712;
  --vanspark-green-soft: #F2FCE8;

  --vanspark-blue: #00A3E0;
  --vanspark-blue-dark: #0077A8;
  --vanspark-blue-soft: #E0F2FE;

  --vanspark-yellow: #FFC700;
  --vanspark-yellow-soft: #FFFBEB;

  /* Legacy mappings for seamless UI compatibility */
  --primary-amber: var(--vanspark-yellow);
  --primary-amber-soft: var(--vanspark-yellow-soft);
  --primary-amber-hover: #E0AF00;
  
  --sky-blue: var(--vanspark-blue);
  --sky-blue-soft: var(--vanspark-blue-soft);
  --sky-blue-dark: var(--vanspark-blue-dark);

  --coral: var(--vanspark-pink);
  --coral-soft: var(--vanspark-pink-soft);

  --mint-green: var(--vanspark-green);
  --mint-green-soft: var(--vanspark-green-soft);

  --lavender: var(--vanspark-purple);
  --lavender-soft: var(--vanspark-purple-soft);

  --neutral-dark: #2A0F49;
  --neutral-body: #334155;
  --neutral-muted: #64748B;
  --neutral-light: #FAF8FD;
  --neutral-card: #FFFFFF;
  --neutral-border: #E8E0F2;

  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 50rem;

  --shadow-soft: 0 4px 20px -2px rgba(42, 15, 73, 0.08);
  --shadow-hover: 0 12px 30px -4px rgba(92, 37, 150, 0.16);
  --shadow-glow: 0 0 25px rgba(255, 42, 133, 0.3);

  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Global Typography & Reset */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--neutral-body);
  background-color: var(--neutral-light);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  color: var(--neutral-dark);
  font-weight: 700;
  line-height: 1.25;
}
/* A heading only ever inherits colour when nothing else sets it — the
   rule above sets colour explicitly on every heading, so a coloured
   section's .text-white (set on the ancestor, not the heading) never
   reaches it. Every purple gradient CTA on the site (home, about,
   activity, shop, video) was rendering its own headline in dark text on
   a dark background as a result. Restated here so it wins instead. */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
  color: #FFFFFF;
}
/* Same problem, different property: .btn-custom-outline's purple text
   and purple border are invisible against a purple gradient CTA
   (About Us, Activity, Shop, Video "Have a question / Keep exploring"
   sections all use it this way) — a near-invisible ghost button. Give
   it a light variant wherever it sits inside a .text-white section. */
.text-white .btn-custom-outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.85);
}
.text-white .btn-custom-outline:hover {
  background-color: #FFFFFF;
  color: var(--vanspark-purple);
  border-color: #FFFFFF;
}

/* Accessible Focus States (WCAG 2.2 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--vanspark-purple) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(92, 37, 150, 0.25) !important;
}

/* Skip to Content Link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 10px;
  background: var(--vanspark-purple-dark);
  color: #FFFFFF;
  padding: 10px 18px;
  z-index: 9999;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 10px;
}

/* 3. Top Announcement Bar */
.announcement-bar {
  background: linear-gradient(90deg, #5C2596 0%, #FF2A85 50%, #FF8A00 100%);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 16px;
}

/* 4. Navigation & Navbar */
.navbar-custom {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(92, 37, 150, 0.08);
  padding: 10px 0;
  transition: padding var(--transition-fast);
  position: relative;
}

/* Center the main nav links in the full header width (not just the
   space left after the brand), independent of the brand block's and
   the icon group's widths on either side — lifted out of the normal
   flex flow so it doesn't shove the search/account/cart icons off
   toward the middle. Scoped to the same breakpoint Bootstrap uses to
   expand the collapse into a row (.navbar-expand-lg = 992px); below
   that the nav stays in normal stacked flow inside the mobile menu. */
@media (min-width: 992px) {
  .navbar-custom #mainNavbar > .navbar-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }
}

.brand-logo-img {
  max-height: 64px;
  width: auto;
  object-fit: contain;
}

/* Full trademark lockup (book + wordmark + tagline) used as the header logo. */
.brand-logo-full {
  height: 78px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .brand-logo-full { height: 60px; }
}

/* Footer: the trademark logo sits on a white tile against the dark band. */
.footer-logo-tile {
  width: 88px;
  height: 88px;
  padding: 6px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.footer-logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.navbar-brand-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--vanspark-purple);
  letter-spacing: -0.5px;
}

.navbar-brand-title span.spark {
  color: var(--vanspark-pink);
}

/* Wordmark letter colours, matched to the registered VanSpark trademark. */
.navbar-brand-title .tm-s { color: var(--vanspark-pink); }
.navbar-brand-title .tm-p { color: var(--vanspark-orange); }
.navbar-brand-title .tm-a { color: var(--vanspark-green); }
.navbar-brand-title .tm-r { color: var(--vanspark-blue); }
.navbar-brand-title .tm-k { color: #7E4BC4; }

.navbar-brand-tagline {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1E2A78;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-link-custom {
  font-weight: 600;
  color: var(--neutral-body);
  padding: 8px 14px !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav-link-custom:hover,
.nav-link-custom.active {
  color: var(--vanspark-purple);
  background-color: var(--vanspark-purple-soft);
}

.nav-icon-link {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--neutral-dark);
  font-size: 1.15rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.nav-icon-link:hover,
.nav-icon-link:focus-visible {
  color: var(--vanspark-purple);
  background-color: var(--vanspark-purple-soft);
}
.nav-icon-link.active {
  color: var(--vanspark-purple);
}

/* 5. Buttons */
.btn-custom-primary {
  background-color: var(--vanspark-purple);
  color: #FFFFFF;
  font-weight: 700;
  border: none;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(92, 37, 150, 0.35);
  transition: all var(--transition-fast);
}
.btn-custom-primary:hover {
  background-color: var(--vanspark-purple-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(92, 37, 150, 0.45);
}

.btn-custom-secondary {
  background-color: var(--vanspark-pink);
  color: #FFFFFF;
  font-weight: 700;
  border: none;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(255, 42, 133, 0.35);
  transition: all var(--transition-fast);
}
.btn-custom-secondary:hover {
  background-color: #E01A6F;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 42, 133, 0.45);
}

.btn-custom-outline {
  background: transparent;
  color: var(--vanspark-purple);
  border: 2px solid var(--vanspark-purple);
  font-weight: 700;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.btn-custom-outline:hover {
  border-color: var(--vanspark-purple);
  color: #FFFFFF;
  background-color: var(--vanspark-purple);
}

/* 6. Cards & Containers */
.card-studio {
  background: var(--neutral-card);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-smooth);
  overflow: hidden;
}
.card-studio:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--vanspark-purple);
}

.badge-age {
  background-color: var(--vanspark-blue-soft);
  color: var(--vanspark-blue-dark);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.badge-skill {
  background-color: var(--vanspark-purple-soft);
  color: var(--vanspark-purple);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.badge-category {
  background-color: var(--vanspark-pink-soft);
  color: var(--vanspark-pink);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

/* 7. Hero & Feature Banners */
.hero-section {
  --hero-pad-top: 70px;
  background: radial-gradient(circle at 10% 20%, #FFF0F6 0%, #F4EEFC 50%, #E0F2FE 100%);
  padding: var(--hero-pad-top) 0 60px 0;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
/* Tighter on desktop so the whole hero clears a laptop screen in one
   view (client: "sab ek screen mein"). */
@media (min-width: 992px) {
  .hero-section {
    --hero-pad-top: 40px;
    padding-bottom: 40px;
  }
}
/* On a short desktop screen (720-800px tall) the limit is the copy
   column's own height, not the photo, so tighten the vertical rhythm
   and the display size a step further rather than let the pills fall
   below the fold. */
@media (min-width: 992px) and (max-height: 820px) {
  .hero-section {
    --hero-pad-top: 24px;
    padding-bottom: 24px;
  }
  .hero-title {
    font-size: 2.4rem;
  }
}

.hero-title {
  font-size: 2.8rem;
  letter-spacing: -1px;
  color: var(--vanspark-purple-dark);
}
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
}

.hero-image-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  border: 4px solid #FFFFFF;
  background: #FFFFFF;
}

/* Client-supplied hero photo (site_settings.hero_image, migration 018) --
   a real picture instead of the logo card, so it drops the white card
   padding/border and just shows the photo at full bleed inside the same
   rounded, shadowed frame. */
.hero-image-frame--photo {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.hero-image-frame--photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero heading: the phrase inside .hero-title__highlight gets a soft
   highlighter-style bar behind it, matching the client-supplied mockup. */
.hero-title__highlight {
  position: relative;
  color: var(--vanspark-pink);
  white-space: nowrap;
}
.hero-title__highlight::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0.06em;
  height: 0.4em;
  background: var(--vanspark-pink-soft);
  border-radius: var(--radius-sm);
  z-index: -1;
}

/* Hero feature pills (100% Screen-Free Ideas / Low-Cost Materials / Age
   3 to 12 Years) — colour comes from inline --pill-bg/--pill-fg custom
   properties per pill, set in home.php. Squared to match the site-wide
   button/badge radius convention (see main.css §"Square off pill-shaped
   buttons"), not the fully-round pill shown in the mockup. */
.hero-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--pill-bg, var(--neutral-light));
  color: var(--pill-fg, var(--neutral-dark));
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-heading);
}

/* Hero / photo-story split layout: replaces the old Bootstrap
   col+transform bleed (which left a dead gap — translateX moves an
   element visually but its original layout slot stays reserved and
   empty, since transform never affects document flow). This is a
   plain flex row instead: the photo side has no fixed width, so it
   genuinely fills the real space next to the text with no gap, and
   because the row is not wrapped in a width-capped .container, the
   photo reaches the true viewport edge on its own — no bleed math
   needed. The text side gets a calculated left padding (matching
   Bootstrap's own container inset at each breakpoint: 960/1140/1320)
   so its copy still lines up with every other section on the page. */
.hero-split {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* This column's left padding is what lines the copy up with the site
   container, so it GROWS with the viewport ((100vw - 1320px)/2 at xxl
   = 312px at 1920). Under the default border-box sizing a max-width
   cap is shared with that padding, so the wider the screen got, the
   less measure the headline had -- 454px at 1440, 324px at 1920, and
   it wrapped into 4-5 cramped lines while the photo took the slack.
   content-box makes the cap apply to the text itself, so the measure
   is a stable ~560px at every width, matching the reference. */
.hero-split__text {
  box-sizing: content-box;
  flex: 1 1 540px;
  max-width: 560px;
  padding: 0 1.5rem;
}
.hero-split__image {
  flex: 1 1 420px;
  min-width: 0;
}
@media (max-width: 991.98px) {
  .hero-split {
    flex-direction: column;
    align-items: stretch;
  }
  /* Below the two-column breakpoint the photo has no bleed to do -- it
     needs the same side breathing room as the text above it, or it
     reads as a raw, edge-to-edge slab instead of a page section. */
  .hero-split__image {
    padding: 0 1.5rem;
  }
}
@media (min-width: 992px) {
  .hero-split { flex-wrap: nowrap; }
  .hero-split__text { padding-left: calc((100vw - 960px) / 2 + 12px); }
  /* The photo's left edge is a transparent organic curve, so it can sit
     slightly over the text column the way it does in the reference --
     the overlap only ever covers transparent pixels, never the copy. */
  .hero-split__image { margin-left: -50px; }
  /* The text column is capped at 660px, so without a matching cap here
     the photo simply swallowed every extra pixel of a wide screen (829px
     wide / 691px tall at 1478px, running the hero 155px below the fold).
     Cap by HEIGHT against the viewport instead of by width: the hero then
     always clears one screen, and the width follows the aspect ratio.
     margin-left:auto keeps it flush to the right edge as it shrinks, so
     the slack opens between the copy and the photo, never at the edge. */
  .hero-split__image img {
    width: auto;
    max-width: 100%;
    max-height: clamp(340px, calc(100vh - 300px), 640px);
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .hero-split__text { padding-left: calc((100vw - 1140px) / 2 + 12px); }
}
@media (min-width: 1400px) {
  .hero-split__text { padding-left: calc((100vw - 1320px) / 2 + 12px); }
}

/* Pulls the photo flush to the very top of its section (client:
   "section ke upar top to top aana chahiye" — no gap above the photo),
   cancelling exactly the section's own padding-top so it lands on the
   section's true border-box edge rather than overflowing past it.
   Two sizes because .hero-section and a plain py-5 section (About's
   Story row) use different top padding. Only applied at >=992px,
   where the two-column layout is active. */
@media (min-width: 992px) {
  .hero-split__image--top-bleed-70 { margin-top: calc(-1 * var(--hero-pad-top, 70px)); }
  .hero-split__image--top-bleed-48 { margin-top: -48px; }
}

/* Small decorative "spark dash" accents scattered near a hero/section
   heading, in brand colours — matches the scattered squiggle marks
   around the heading in the client's reference mockup. Purely
   decorative (aria-hidden), absolutely positioned against a
   position:relative heading wrapper. */
.hero-title-wrap {
  position: relative;
  /* block so it always starts on its own line (inline-block let the
     eyebrow label and the heading share a line on About), but
     fit-content so the box still hugs the heading text and the
     right-hand scribble lands next to the words, not at the column edge. */
  display: block;
  width: fit-content;
  max-width: 100%;
}
.hero-scribble {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
/* Decorative only -- hidden below the lg breakpoint, where the hero
   stacks to a single column and there is no reliable room beside the
   heading/photo for them without overlapping other content. */
@media (max-width: 991.98px) {
  .hero-scribble,
  .hero-doodle {
    display: none;
  }
}
.hero-scribble--tl {
  top: -18px;
  left: -34px;
  color: var(--vanspark-yellow);
  transform: rotate(-12deg);
}
.hero-scribble--tr {
  top: -6px;
  right: -30px;
  color: var(--vanspark-blue);
  transform: rotate(14deg);
}
.hero-scribble--br {
  bottom: -14px;
  right: -26px;
  color: var(--vanspark-pink);
  transform: rotate(-6deg);
}

/* Paper-airplane + dashed flight path + handwritten caption doodle,
   tucked into the corner of a hero/photo section — matches the "Hands-
   on Ideas, Happier Childhoods" doodle in the client's reference. */
.hero-doodle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vanspark-purple);
}
.hero-doodle svg {
  flex-shrink: 0;
}
.hero-doodle__caption {
  font-family: 'Caveat', var(--font-heading), cursive;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vanspark-purple-dark);
  line-height: 1.15;
  transform: rotate(-2deg);
}
.hero-doodle__caption .bi {
  color: var(--vanspark-pink);
}

/* 8. WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  color: #FFFFFF;
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}

/* 9. Interactive Brain Challenge Card */
.challenge-box {
  background: linear-gradient(135deg, #FFF0F6 0%, #FFF7ED 100%);
  border: 2px solid var(--vanspark-pink);
  border-radius: var(--radius-lg);
  padding: 30px;
}

.collapsible-content {
  display: none;
  margin-top: 15px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--vanspark-purple);
}

.collapsible-content.show {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 10. Footer */
.footer-studio {
  background-color: var(--neutral-dark);
  color: #B8A8D0;
  padding-top: 60px;
  padding-bottom: 30px;
}
.footer-studio a {
  color: #E4D8F3;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-studio a:hover {
  color: var(--vanspark-yellow);
}

.disclaimer-banner {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px dashed #5C328E;
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* 11. Print Styles */
@media print {
  .navbar-custom,
  .announcement-bar,
  .footer-studio,
  .whatsapp-float,
  .no-print {
    display: none !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .print-area {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* activity.php: the gradient hero carries .no-print (a purple
     background is pointless on paper), so its title is repeated in a
     plain heading that only appears for print. */
  .print-only {
    display: block !important;
  }
}

/* 12. Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Small additions for the VanSpark PHP app (not present in the reference
   site because it has no shop/cart/blog prose) — kept minimal, same
   design language as the rest of this file.
   -------------------------------------------------------------------------- */
.hover-primary:hover { color: var(--vanspark-purple) !important; }
.max-w-4xl { max-width: 64rem; }
.article-content, .rich-text {
  color: var(--neutral-body);
  line-height: 1.75;
}
.article-content h2, .rich-text h2 { font-family: var(--font-heading); margin-top: 1.75rem; }
.article-content h3, .rich-text h3 { font-family: var(--font-heading); margin-top: 1.5rem; }
.article-content img, .rich-text img { border-radius: var(--radius-md); max-width: 100%; height: auto; }
.article-content a, .rich-text a { color: var(--vanspark-purple); font-weight: 600; }

/* ==========================================================================
   Dark-surface text fix — Bootstrap's .text-muted resolves to a dark,
   low-opacity black (rgba(33,37,41,.75)) meant for LIGHT backgrounds. The
   footer (.footer-studio) uses a dark purple background, so anything using
   .text-muted inside it (disclaimer text, newsletter blurb, consent label,
   copyright line) was rendering as near-invisible dark-on-dark text.
   Scoping a light override to the footer fixes every instance at once,
   on every page, since the footer is a single shared partial.
   ========================================================================== */
.footer-studio .text-muted {
  color: rgba(255, 255, 255, 0.68) !important;
}
.footer-studio .disclaimer-banner {
  color: rgba(255, 255, 255, 0.68);
}
.footer-studio a.text-muted:hover,
.footer-studio a.text-muted:focus {
  color: #FFFFFF !important;
}

/* ==========================================================================
   Form controls — Bootstrap's bare .form-control / .form-select / checkbox
   defaults were left unstyled, so every input on the site (search, filters,
   contact, login, register, newsletter, checkout) looked like a plain
   browser control next to the rest of the branded, rounded, shadowed UI.
   ========================================================================== */
.form-control,
.form-select {
  border: 1.5px solid var(--neutral-border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  color: var(--neutral-dark);
  background-color: #FFFFFF;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control::placeholder {
  color: var(--neutral-muted);
  opacity: 1;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--vanspark-purple);
  box-shadow: 0 0 0 0.2rem var(--vanspark-purple-soft);
  outline: none;
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--neutral-light);
  opacity: 0.75;
}
.form-label {
  font-weight: 700;
  color: var(--neutral-dark);
  margin-bottom: 0.4rem;
  font-family: var(--font-heading);
}
.form-check-input {
  border: 1.5px solid var(--neutral-border);
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
}
.form-check-input:checked {
  background-color: var(--vanspark-purple);
  border-color: var(--vanspark-purple);
}
.form-check-input:focus {
  border-color: var(--vanspark-purple);
  box-shadow: 0 0 0 0.2rem var(--vanspark-purple-soft);
}
.footer-studio .form-control {
  border-color: rgba(255, 255, 255, 0.25);
}
.footer-studio .form-check-label {
  color: rgba(255, 255, 255, 0.68);
}
.input-group .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.input-group .form-control {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Footer "Parent Newsletter" input group — envelope icon + email field +
   Join button on the dark footer background. The generic .form-control
   dark-border override (below) still applies for contrast; this adds the
   icon chip and re-splits the corner radii now that the input is the
   MIDDLE element (icon first, button last) instead of the first child. */
.input-group-newsletter .input-group-text {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-right: none;
  color: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-group-newsletter .form-control {
  border-radius: 0 !important;
  border-left: none;
}
.input-group-newsletter .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* Newsletter consent checkbox sits directly on the dark footer background;
   the default .form-check-input border (var(--neutral-border), a light
   grey meant for white cards) was nearly invisible there. */
.footer-studio .form-check-input {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
}
.footer-studio .form-check-input:checked {
  background-color: var(--vanspark-yellow);
  border-color: var(--vanspark-yellow);
}

/* ==========================================================================
   Header nav — "Parent Corner", "Brain Challenge" and "Workshops" now
   live inside the "Resources" dropdown (see header.php) instead of
   three separate top-level items, which is what actually fixed the
   header not fitting on common laptop widths — 7 top-level items with
   full-size type, padding and the tagline comfortably clears every
   width from 992px up (measured: 150px+ to spare at the narrowest,
   992px). white-space: nowrap stays as cheap insurance against any
   single item ever wrapping mid-phrase again.
   ========================================================================== */
.nav-link-custom {
  white-space: nowrap;
}
/* 7 top-level items clears every width from 992px up with full-size
   nav links and icons — except the tagline under the brand still
   needs to go at the very tightest edge (992-1199px, Bootstrap's
   narrower lg-tier container). Nav links, icons and padding stay
   full-size everywhere; only the tagline is the one casualty, and
   only in that one range. */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand-tagline {
    display: none;
  }
}

/* ==========================================================================
   Universal filter bar — one shared look for every "narrow this list
   down" form on the site (Shop category pages, Activities, Videos).
   Full-width, sits in its own section directly above the grid it
   filters (not squeezed into the hero, not a bare unstyled row), styled
   like the site's card-studio panels but WITHOUT the hover-lift — this
   is a form, not a clickable card.
   ========================================================================== */
.filter-bar {
  background: var(--neutral-card);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
}
.filter-bar .form-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-muted);
  margin-bottom: 0.35rem;
}

/* Client preference: square (not pill) buttons/badges site-wide — see
   the --radius-sm swaps above. Bootstrap's own .rounded-pill utility is
   used directly on badges/buttons across most page headers and status
   pills; this collapses all of those to the same squared corner in one
   place rather than editing every template. */
.rounded-pill {
  border-radius: var(--radius-sm) !important;
}