/**
 * newapp/css/theme-schools.css
 * Skin for the Schools journey's customer-facing pages — now pulling the REAL
 * look and feel from the live site's actual theme-schools.css (the emerald/
 * sage palette, Poppins font, the same --p-/--theme- prefixed CSS variable
 * convention), not just an approximation of it. Revisited 2026-08-09 after
 * actually reading the live site's schools_base.php/schools_food.php/
 * schools_wizard_breadcrumb.php in full while building the Planner page —
 * the first version of this file (2026-08-07) was written before that, from
 * memory/guesswork, and deliberately skipped the old app's component library
 * ("without pulling in its large .sbk- / .party-wrap component library"). This
 * version still doesn't port that component library wholesale (newapp's
 * components have their own classes, e.g. .na-step-pill not .pbc-item) — but
 * now genuinely matches its COLORS, TYPE, and SHAPE language, which is what
 * "look and feel similar" actually means. Same body-class-driven loading
 * mechanism as before, see na_theme.php.
 *
 * Variable names match the live site's own theme-schools.css EXACTLY
 * (--p-color/--p-color-dk/--p-color-rgb/--p-font/--theme-btn-bg/
 * --theme-btn-color/--theme-border/--theme-font) — not a coincidence: any
 * newapp component written to read these generically (most already do,
 * e.g. group_splitter.js's GROUP_COLORS) will theme correctly for a future
 * journey the same way, and anyone who already knows the live site's
 * palette system recognizes this immediately.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap');

.theme-schools {
  --theme-font: 'Poppins', sans-serif;
  --theme-btn-bg: #1e9455;
  --theme-btn-color: #ffffff;
  --theme-border: #0e5a30;
  --p-font: 'Poppins', sans-serif;
  --p-color: #1e9455;
  --p-color-dk: #167542;
  --p-color-rgb: 30, 148, 85;

  --bs-primary: #1e9455;
  --bs-primary-rgb: 30, 148, 85;
  --bs-success: #1e9455;
  --bs-success-rgb: 30, 148, 85;
  background: #ddeee5;
  min-height: 100vh;
  font-family: var(--theme-font);
}

.theme-schools .breadcrumb-item.active {
  color: #fff;
  background: #1e9455;
  border-radius: 999px;
  padding: .2rem .75rem;
}

.theme-schools .btn-success {
  --bs-btn-bg: #1e9455;
  --bs-btn-border-color: #0e5a30;
  --bs-btn-hover-bg: #167542;
  --bs-btn-hover-border-color: #0e5a30;
}

/* ── Cards — the live site's actual card language: thicker soft-green
   border, generous radius, a gentle lift shadow (not Bootstrap's flat
   1px-border default) — used everywhere on schools_base.php/schools_food.php
   (.food-panel/.cal-section/.storage-strip etc. all share this shape). */
.theme-schools .card {
  border: 2px solid #bcdccb;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* na-panel-header (BasketSidebar/TypeGroupSummary) defaults to Bootstrap's
   .bg-dark look (see newapp.css) — this is the one line that actually makes
   those panels read as "green," since Bootstrap's own .bg-dark/.bg-success
   utilities are !important and can't be overridden this way. */
.theme-schools .na-panel-header {
  background-color: #1e9455;
}

.theme-schools h1 i {
  color: #1e9455;
}

/* ── Step pills (step_nav.php) — same rounded-pill/chevron-separator shape
   as the live site's .pbc-nav breadcrumb, themed here. */
.theme-schools .na-step-pill-active {
  background: var(--theme-btn-bg);
  color: var(--theme-btn-color);
  border-color: var(--theme-border);
}
.theme-schools .na-step-pill-link:hover {
  background: rgba(var(--p-color-rgb), .1);
  color: var(--p-color-dk);
}
.theme-schools .na-step-sep {
  color: var(--p-color);
}

/* ── Primary flow buttons (Continue/Back) — bold, padded, a soft lift
   shadow on hover, matching .btn-parties-next/.btn-parties-back's weight on
   the live site rather than a stock flat Bootstrap button. REAL BUG, fixed
   2026-08-09: this used to be a blanket `.btn-success`/`.btn-outline-secondary`
   selector — the comment claimed it was "scoped to just these two roles" but
   the selector wasn't actually scoped that way, and it silently bloated
   EVERY OTHER `.btn-outline-secondary` on the page too, including
   variant_qty_chooser.php's tiny ± stepper buttons — their fixed 130px
   stepper box couldn't fit two now-much-wider buttons + the qty input, so
   they wrapped onto two lines. Now requires the dedicated `.na-btn-nav`
   marker class (added only to the actual Continue/Back buttons on each
   journey page) so this can never again silently reach into an unrelated
   component's buttons. */
.theme-schools .btn-success.na-btn-nav,
.theme-schools .btn-outline-secondary.na-btn-nav {
  border-radius: 8px;
  font-weight: 700;
  padding: .65rem 1.85rem;
  letter-spacing: .01em;
  transition: box-shadow .2s, transform .1s;
}
.theme-schools .btn-success.na-btn-nav:not(:disabled) {
  box-shadow: 0 4px 15px rgba(var(--p-color-rgb), .25);
}
.theme-schools .btn-success.na-btn-nav:not(:disabled):hover {
  box-shadow: 0 6px 20px rgba(var(--p-color-rgb), .35);
  transform: translateY(-1px);
}
.theme-schools .btn-outline-secondary.na-btn-nav {
  border-width: 2px;
  color: var(--theme-btn-bg);
  border-color: var(--theme-btn-bg);
}
.theme-schools .btn-outline-secondary.na-btn-nav:hover {
  background: var(--theme-btn-bg);
  border-color: var(--theme-border);
  transform: translateY(-1px);
}

/* ── Small controls (date strip, qty steppers) — COLOR only, deliberately
   NOT the .na-btn-nav padding/shape rule above (that's exactly what caused
   the stepper-wrapping bug this file's history describes) — these need to
   stay visually themed without growing past their compact fixed-width
   boxes. */
.theme-schools .na-dp-btn.btn-outline-secondary,
.theme-schools .na-vqc-dec,
.theme-schools .na-vqc-inc {
  color: var(--theme-btn-bg);
  border-color: var(--theme-btn-bg);
}
.theme-schools .na-dp-btn.btn-outline-secondary:hover,
.theme-schools .na-vqc-dec:hover,
.theme-schools .na-vqc-inc:hover {
  background: var(--theme-btn-bg);
  color: var(--theme-btn-color);
  border-color: var(--theme-border);
}

/* ── Input / select focus ring — matches the live site's accent-colored
   focus ring instead of Bootstrap's default blue. */
.theme-schools input:focus,
.theme-schools select:focus,
.theme-schools textarea:focus {
  outline: none;
  border-color: var(--p-color) !important;
  box-shadow: 0 0 0 3px rgba(var(--p-color-rgb), .18);
}