/* ================================================================
   Jijiboo pastel-blue brand layer
   Loaded last by shell/base.html so public pages, family panels and
   child experiences share one visual language despite legacy CSS.
   ================================================================ */

:root {
  --jjb-blue-900: #153b63;
  --jjb-blue-800: #245f9e;
  --jjb-blue-700: #327fbe;
  --jjb-blue-600: #4a9de0;
  --jjb-blue-500: #78b7f2;
  --jjb-blue-400: #94c9fa;
  --jjb-blue-300: #b9dcff;
  --jjb-blue-200: #d7ebff;
  --jjb-blue-100: #e5f3ff;
  --jjb-blue-50: #f6fbff;
  --jjb-ink: #20344a;
  --jjb-muted: #526a82;
  --jjb-line: rgba(32, 76, 119, .13);
  --jjb-card: rgba(255, 255, 255, .94);
  --jjb-shadow: 0 10px 30px rgba(40, 104, 164, .11);

  /* Legacy aliases used across old public and panel styles. */
  --ink: var(--jjb-ink);
  --ink-soft: var(--jjb-muted);
  --canvas: var(--jjb-blue-50);
  --canvas-2: #eaf5ff;
  --sun: var(--jjb-blue-500);
  --sun-deep: var(--jjb-blue-800);
  --sun-100: var(--jjb-blue-100);
  --sky: var(--jjb-blue-600);
  --sky-100: #ddf0ff;
  --grape: #6f91d8;
  --grape-100: #e8eeff;
  --line: var(--jjb-line);
  --white: #fff;
  --card-bg: #fff;
  --color-primary: var(--jjb-blue-500);
  --color-primary-dark: var(--jjb-blue-800);
  --color-primary-light: var(--jjb-blue-100);
  --parent-primary: var(--jjb-blue-500);
  --parent-primary-dark: var(--jjb-blue-800);
  --parent-primary-light: var(--jjb-blue-100);
  --admin-primary: var(--jjb-blue-500);
  --admin-primary-dark: var(--jjb-blue-800);
  --admin-primary-light: var(--jjb-blue-100);
}

html[data-theme="dark"] {
  --ink: #f1f8ff;
  --ink-soft: #b7cde0;
  --canvas: #102235;
  --canvas-2: #162c42;
  --white: #1c3852;
  --card-bg: #1c3852;
  --line: rgba(185, 220, 255, .15);
}

body {
  color: var(--jjb-ink);
  background: var(--jjb-blue-50) !important;
}

/* Flat-color contract: legacy pages may still declare gradients in their
   component CSS. This final layer disables them without touching real <img>
   content. Form controls are excluded so validation and select icons remain. */
body,
body *:not(input):not(select):not(textarea),
body *::before,
body *::after {
  background-image: none !important;
  border-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Gradient-text implementations become ordinary readable text. */
body * {
  -webkit-text-fill-color: currentColor !important;
}

/* Shared website chrome: identical on home, blog, store and content pages. */
.jjb-chrome-header {
  background: rgba(246, 251, 255, .94) !important;
  border-bottom-color: var(--jjb-line) !important;
  box-shadow: 0 8px 28px rgba(40, 104, 164, .08) !important;
}

.jjb-chrome-header .brand,
.jjb-chrome-footer .brand {
  color: var(--jjb-blue-900) !important;
}

.jjb-chrome-nav a:hover,
.jjb-chrome-nav a.is-active,
.jjb-nav-dropdown__trigger:hover,
.jjb-nav-dropdown.is-active .jjb-nav-dropdown__trigger,
.jjb-nav-dropdown.is-open .jjb-nav-dropdown__trigger,
.jjb-nav-dropdown__menu a:hover,
.jjb-nav-dropdown__menu a.is-active {
  color: var(--jjb-blue-800) !important;
  background: var(--jjb-blue-100) !important;
}

.jjb-chrome-cta .btn,
.btn-primary,
button.btn-primary,
a.btn-primary {
  color: var(--jjb-blue-900) !important;
  background: var(--jjb-blue-500) !important;
  border-color: #63a6e5 !important;
  box-shadow: 0 3px 0 var(--jjb-blue-800), 0 8px 20px rgba(54, 129, 193, .14) !important;
}

.jjb-chrome-cta .btn:hover,
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: var(--jjb-blue-400) !important;
}

.btn-outline:hover,
.btn-light:hover,
.btn-outline-light:hover,
.text-link,
.breadcrumb a {
  color: var(--jjb-blue-800) !important;
  border-color: var(--jjb-blue-300) !important;
}

.jjb-chrome-burger,
.drawer-close {
  border-color: var(--jjb-blue-200) !important;
  background: #fff !important;
}

.jjb-chrome-drawer {
  background: var(--jjb-blue-50) !important;
  box-shadow: -25px 0 100px rgba(21, 59, 99, .24) !important;
}

.jjb-chrome-drawer a:hover,
.jjb-drawer-accordion__trigger:hover,
.jjb-drawer-logout:hover {
  color: var(--jjb-blue-800) !important;
  background: var(--jjb-blue-100) !important;
}

.jjb-menu-scrim {
  background: rgba(21, 59, 99, .32) !important;
}

.jjb-chrome-footer {
  margin-top: 56px;
  background: #e3f1ff !important;
  border-top-color: var(--jjb-blue-200) !important;
}

.jjb-chrome-footer .footer-col b::after {
  background: var(--jjb-blue-600) !important;
}

.jjb-chrome-footer a:hover,
.jjb-chrome-footer .footer-inline-form button:hover {
  color: var(--jjb-blue-800) !important;
}

.jjb-chrome-footer .footer-contact__icon {
  color: var(--jjb-blue-800) !important;
  background: var(--jjb-blue-200) !important;
}

/* Public page canvas and repeated page furniture. */
body:has(.jjb-chrome-header) {
  background: #f1f8ff !important;
}

.masthead,
.cat-masthead,
.legal-masthead,
.blog-masthead,
.article-masthead {
  background: #e5f3ff !important;
  border-bottom-color: var(--jjb-line) !important;
}

.masthead::after,
.cat-masthead::after,
.legal-masthead::after {
  background: var(--jjb-blue-200) !important;
  border-color: #8dbce8 !important;
}

.eyebrow,
.home-eyebrow,
.section-head .eyebrow,
.cat-masthead .eyebrow,
.legal-masthead .eyebrow,
.masthead .eyebrow,
.blog-masthead .eyebrow,
.article-masthead .eyebrow {
  color: var(--jjb-blue-800) !important;
  background: var(--jjb-blue-100) !important;
  border-color: var(--jjb-blue-300) !important;
}

.content-card,
.video-card,
.guide-card,
.team-card,
.val,
.info-card,
.form-card,
.legal-prose,
.home-plan,
.benefit-grid article,
.tl-item,
.auth-form-pane,
.auth-welcome,
.featured-card,
.post-card,
.blog-sidebar .widget,
.article-content figure,
.article-content table {
  border-color: var(--jjb-blue-200) !important;
  box-shadow: var(--jjb-shadow) !important;
}

.level-badge,
.content-tag,
.chip,
.hours,
.post-tag,
.featured-tag {
  color: var(--jjb-blue-800) !important;
  background: var(--jjb-blue-100) !important;
  border-color: var(--jjb-blue-200) !important;
}

input:focus,
textarea:focus,
select:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--jjb-blue-500) !important;
  box-shadow: 0 0 0 4px rgba(74, 157, 224, .16) !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--jjb-blue-700);
}

.page-cta__inner,
.cta-inner,
.final-card,
.newsletter-inner {
  background: #e5f3ff !important;
  border-color: var(--jjb-blue-200) !important;
}

/* Homepage is the visual reference, now expressed in the new blue brand. */
.jjb-home,
.jjb-home .home-hero {
  background-color: transparent !important;
}

.jjb-home .home-hero {
  background: #e5f3ff !important;
}

.jjb-home .popular-section,
.jjb-home .how-section,
.jjb-home .quiz-section {
  background-color: rgba(229, 243, 255, .58) !important;
}

.jjb-home .hero-copy h1 > span,
.jjb-home .world-bubble b,
.jjb-home .text-link,
.jjb-home .section-heading a {
  color: var(--jjb-blue-800) !important;
}

.jjb-home .hero-copy h1 > span::after {
  background: var(--jjb-blue-300) !important;
}

.jjb-home .world-orbit {
  background: var(--jjb-blue-200) !important;
}

.jjb-home .world-orbit::after {
  border-color: #8dbce8 !important;
}

.jjb-home .letter-a,
.jjb-home .letter-b,
.jjb-home .world-spark,
.jjb-home .little-star {
  color: var(--jjb-blue-700) !important;
}

.jjb-home .note-icon,
.jjb-home .content-tag,
.jjb-home .plan-kicker {
  color: var(--jjb-blue-800) !important;
  background: var(--jjb-blue-100) !important;
}

.jjb-home .discovery-peach {
  background: #dff0ff !important;
}

.jjb-home .discovery-lilac {
  background: #e8eeff !important;
}

.jjb-home .discovery-mint {
  background: #d9f4f2 !important;
}

.jjb-home .quiz-panel,
.jjb-home .parent-feature,
.jjb-home .home-trust {
  border-color: var(--jjb-blue-200) !important;
}

.jjb-home .quiz-progress span,
.jjb-home progress::-webkit-progress-value,
.jjb-home .home-plan.is-featured::before {
  background: var(--jjb-blue-500) !important;
}

/* Blog used to look like a separate product; normalize its chrome and CTAs. */
.blog-sidebar .mini-post .thumb,
.thumb,
.content-thumb,
.guide-cover,
.avatar {
  background: var(--jjb-blue-100) !important;
  border-color: var(--jjb-blue-200) !important;
}

.blog-sidebar .mini-post .rank {
  background: var(--jjb-blue-700) !important;
}

.blog-sidebar .ad-slide,
.blog-sidebar .ad-static,
.blog-sidebar .ad-slide.s1,
.blog-sidebar .ad-slide.s2,
.blog-sidebar .ad-slide.s3,
.blog-sidebar [class*="ad-slide--"],
.blog-sidebar [class*="ad-static--"] {
  color: var(--jjb-ink) !important;
  background: #e5f3ff !important;
}

.blog-sidebar .ad-slide span.cta,
.blog-sidebar .ad-static .cta,
.blog-sidebar .ad-foot a {
  color: var(--jjb-blue-800) !important;
}

/* Panel shells consume these classes even when their legacy variables differ. */
.bg-primary,
.nav-link-active,
.progress-bar-fill,
.kids-progress-fill {
  background-color: var(--jjb-blue-500) !important;
}

.text-primary,
.tab-active,
.badge-primary {
  color: var(--jjb-blue-800) !important;
}

.border-primary {
  border-color: var(--jjb-blue-500) !important;
}

@media (prefers-contrast: high) {
  :root {
    --jjb-blue-500: #245f9e;
    --jjb-blue-800: #153b63;
  }
}

@media (max-width: 640px) {
  .jjb-chrome-footer {
    margin-top: 38px;
  }
}