:root{
  /* Palette — ratios 5:3:1:0.5:0.5 (DP:DB:LB:Orange:LP) */
  --dp:#75308B;        /* Dark Purple (primary) */
  --dp-700:#5e2471;    /* deeper */
  --db:#126081;        /* Dark Blue (secondary) */
  --db-700:#0e506b;
  --lb:#178FBF;        /* Light Blue (accent) */
  --lb-600:#116e94;
  --peach:#F68D2C;     /* Orange (accent) */
  --peach-700:#c76f20;
  --lp:#8E1CB0;        /* Light Purple (accent) */
  --lp-700:#6f1490;

  /* Aliases (back-compat) */
  --green: var(--lp);
  --green-700: var(--lp-700);

  /* Surfaces & ink */
  --paper:#FFFFFF;
  --paper-2:#F7F5FA;
  --ink:#1d1b21;
  --ink-2:#3a3740;

  /* Focus */
  --focus: var(--lb);

  /* Fun accents for kids (soft sprinkles) */
  --sparkle-1: color-mix(in srgb, var(--lb) 18%, transparent);
  --sparkle-2: color-mix(in srgb, var(--peach) 18%, transparent);
  --sparkle-3: color-mix(in srgb, var(--lp) 18%, transparent);
}

/* ===== Page surface ===== */
#page-content{
  background:
    radial-gradient(24px 24px at 12% 10%, var(--sparkle-1), transparent 60%),
    radial-gradient(22px 22px at 78% 14%, var(--sparkle-2), transparent 60%),
    radial-gradient(18px 18px at 22% 86%, var(--sparkle-3), transparent 60%),
    radial-gradient(20px 20px at 88% 78%, var(--sparkle-1), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--ink);
  background-attachment: fixed;
}

/* Typography & rhythm */
#page-content h1,#page-content h2,#page-content h3,#page-content h4{
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--dp-700);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lb) 45%, transparent), transparent 70%)
    0 100%/100% 6px no-repeat;
  padding-bottom: .125rem;
}
#page-content h2 .fa,
#page-content h3 .fa{ opacity:.9; }

#page-content p,
#page-content .card-text{
  line-height: 1.55;
  letter-spacing: .1px;
  color: var(--ink-2);
}

/* Buttons & links — scoped so navbar isn't affected */
#page-content .btn{
  min-height: 44px;
  padding: .8rem 1rem;
  border-radius: 1rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
#page-content .btn:active{ transform: translateY(1px); }

#page-content .btn-primary,
#page-content .btn-link{
  background-color: var(--dp);
  border-color: var(--dp);
  color:#fff;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}
#page-content .btn-primary:hover,
#page-content .btn-link:hover{
  background-color: var(--dp-700);
  border-color: var(--dp-700);
  color:#fff;
}
#page-content .btn-primary:focus,
#page-content .btn-link:focus{
  outline: 3px solid transparent;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 35%, transparent);
}
#page-content .btn-primary::after,
#page-content .btn-link::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg,
    transparent 0 30%,
    color-mix(in srgb, #fff 45%, transparent) 45% 55%,
    transparent 70% 100%);
  transform: translateX(-120%);
  transition: transform .35s ease;
  pointer-events:none;
}
#page-content .btn-primary:hover::after,
#page-content .btn-primary:focus::after,
#page-content .btn-link:hover::after,
#page-content .btn-link:focus::after{
  transform: translateX(0%);
}

/* Secondary accent button */
#page-content .btn-outline-primary{
  color: var(--db);
  border-color: var(--db);
  background:#fff;
  position: relative;
}
#page-content .btn-outline-primary:hover{
  color:#fff;
  background: var(--db);
  border-color: var(--db);
}
#page-content .btn-outline-primary::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:8px;
  height:4px; border-radius:4px;
  background: linear-gradient(90deg, var(--lb), var(--peach), var(--lp));
  opacity:.6;
}

/* ===== Accordion containers ===== */
/* Clean, no outline. Clip children so nothing spills past rounded edges. */
#page-content .accordion{
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #faf7fc 100%);
  box-shadow: 0 6px 22px rgba(18, 96, 129, .10);
  margin-bottom: 1rem;
  overflow: hidden; /* <— prevents the gradient bars from spilling out */
}

/* Reduce extra bottom space when the LAST accordion is open */
#page-content .accordion:last-of-type{ margin-bottom: .25rem; }
#page-content .accordion:last-of-type .card:last-of-type .card-body{ padding-bottom: .5rem; }

#page-content .accordion .card{
  border: 0;
  border-radius: .9rem;
  background: transparent;
  overflow: hidden; /* keep headers/bodies clipped within each card */
}
#page-content .accordion .card + .card{ margin-top: .5rem; }

/* Outside accordion labels (bigger, gradient, and safely inside) */
#page-content .accordion > h3{
  display:block;
  /* margin: .35rem .5rem .65rem; */ /* inset to avoid clipping */
  padding: .45rem 1.25rem;
  line-height: 1.25;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .2px;
  color:#fff !important;
  border-radius: 999px; /* fully rounded */
  background: linear-gradient(90deg,
      var(--lb) 0%,
      color-mix(in srgb, var(--db) 65%, var(--dp) 35%) 60%,
      var(--dp) 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
#page-content .accordion > h3 *{ color:#fff !important; }

/* Accordion headers (click targets) */
#page-content .accordion .card-header{
  border: 0;
  padding: 0;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--dp) 86%, #fff 14%) 0%,
      color-mix(in srgb, var(--db) 78%, #fff 22%) 100%);
  position: relative;
  overflow: hidden;
}
#page-content .accordion .card-header::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to right,
      color-mix(in srgb, #fff 18%, transparent),
      transparent 30% 70%,
      color-mix(in srgb, #fff 10%, transparent));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
#page-content .accordion .card-header h2{ margin: 0; }
#page-content .accordion .card-header .btn.btn-link{
  display: block;
  width: 100%;
  text-align: left;
  color:#fff;
  padding: 1.05rem 3rem 1.05rem 1.1rem; /* larger tap area */
  font-size: 1.125rem;
  border-radius: 0;
  position: relative;
}
#page-content .accordion .card-header .btn .fa{
  margin-right:.6rem;
  transition: transform .2s ease;
}
#page-content .accordion .card-header .btn[aria-expanded="true"] .fa.fa-chevron-down{
  transform: rotate(180deg);
}
#page-content .accordion .card-header .btn .fa{ color:#fff; }

/* Collapse body */
#page-content .accordion .card-body{
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--lp) 6%, #fff 94%) 100%);
  padding: 1rem 1rem 1rem;  /* trimmed default bottom padding */
  border-top: 3px solid color-mix(in srgb, var(--lb) 18%, #fff 82%);
  border-radius: 0 0 .9rem .9rem;
}

/* IMPORTANT: Let Bootstrap control collapse heights — no overrides here */

/* Tag chip inside headers (hidden) */
#page-content .accordion .class-tag{ display: none !important; }

/* ===== Topic cards (the 6-up) ===== */
#page-content .card.col-md-3{
  border-radius: 1rem !important;
  border: 1px solid rgba(117,48,139,.12);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fff 65%, color-mix(in srgb, var(--lb) 6%, #fff 94%) 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.08);
  position: relative;
}
#page-content .card.col-md-3::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:6px;
  background: linear-gradient(90deg, var(--lb), var(--peach), var(--lp));
}
#page-content .card.col-md-3:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

#page-content .card.col-md-3 .card-title{
  font-weight:800;
  color: var(--db);
  margin-top: .5rem;
}
#page-content .card.col-md-3 .card-img-top{
  height: 200px;
  object-fit: cover;
  border-radius: .75rem .75rem 0 0;
  position: relative;
}
#page-content .card.col-md-3 .card-img-top + .card-body .card-title{
  background: linear-gradient(90deg, color-mix(in srgb, var(--lb) 14%, transparent), transparent 80%);
  border-radius: .5rem;
  padding: .25rem .5rem;
  display: inline-block;
}

#page-content .card.col-md-3 .card-footer{
  background: #fff;
  border: 0;
  padding: .75rem 1rem 1rem;
}
#page-content .card.col-md-3 .card-footer .btn{ width:100%; }

/* Table of Contents button wrapper */
#page-content .heading .btn{ font-size:1.125rem; }

/* Friendly list style for optional menus */
#page-content .fp-menu{
  list-style: none;
  padding-left: 0;
  margin: .5rem 0 0;
}
#page-content .fp-menu li{
  padding:.5rem .75rem;
  border-radius:.75rem;
  margin-bottom:.25rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lb) 10%, #fff 90%), #fff 70%);
  border: 1px solid color-mix(in srgb, var(--lb) 25%, #fff 75%);
}
#page-content .fp-menu li a{
  color: var(--db);
  font-weight:600;
  text-decoration:none;
}
#page-content .fp-menu li a:focus{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 35%, transparent);
  outline:none;
}

/* Modals (image previews) */
#page-content .modal-content{
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--lp) 5%, #fff 95%));
}
#page-content .modal-body img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: .5rem;
}

/* Accessibility: focus states */
#page-content a:focus,
#page-content button:focus,
#page-content [role="button"]:focus{
  outline: 3px solid transparent;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 45%, transparent);
}

/* Ensure minimum tap targets for common items */
#page-content .card-footer a,
#page-content .accordion .card-header .btn{ min-height: 44px; }

/* Gentle gradient band for headings/section separators (not on buttons) */
.fp-gradient-band{
  background: linear-gradient(180deg, color-mix(in srgb, var(--lp) 12%, #fff 88%), #ffffff);
  border-radius: 1rem;
  padding-top: .5rem;
  padding-bottom: .25rem;
}

/* Pills / chips */
.fp-pills .badge,
.fp-chip{
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lb) 12%, #fff 88%), #fff 60%);
  color: var(--db);
  border: 1px solid color-mix(in srgb, var(--lb) 35%, #fff 65%);
  font-weight: 700;
}

/* Alternate content button (no gradient fill) */
#page-content .fp-btn-alt{
  background:#fff;
  border:2px solid var(--db);
  color: var(--db);
  position: relative;
}
#page-content .fp-btn-alt:hover{
  background: color-mix(in srgb, var(--db) 8%, #fff 92%);
}
#page-content .fp-btn-alt::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:8px;
  height:4px; border-radius:4px;
  background: linear-gradient(90deg, var(--lb), var(--peach), var(--lp));
  opacity:.6;
}

/* Optional backgrounds */
.bg-paper{ background: var(--paper); }
.bg-paper-2{ background: linear-gradient(180deg, #fff 0%, #faf7fc 100%); }

/* Slightly larger hit area for ToC button */
#page-content .heading .btn{ padding-top: .9rem; padding-bottom: .9rem; }

/* Safe image rounding reset */
.rounded-clip{ border-radius: .75rem; overflow: hidden; }

/* ===== Mobile tweaks ===== */
@media (max-width: 767.98px){
  #page-content .accordion .card-header .btn.btn-link{
    padding: 1rem 2.5rem 1rem 1rem;
    font-size: 1.05rem;
  }
  #page-content .card.col-md-3{
    max-width: 100% !important;
    margin-left: .5rem !important;
    margin-right: .5rem !important;
  }
  #page-content .card.col-md-3 .card-img-top{ height: 180px; }
}

/* Small utility accents */
#page-content .accent-lb{ color: var(--lb); }
#page-content .accent-peach{ color: var(--peach); }
#page-content .accent-lp{ color: var(--lp); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  #page-content *{
    transition: none !important;
    animation: none !important;
  }
}