/* Hallmark · macrostructure: Operations-light (scoped chrome rebuild) · genre: playful
 * nav: N5 floating pill · footer: Ft2 three-column civic
 * theme: brand-locked (Primavera) · paper: light · display: rounded-sans (Sniglet) · accent: magenta-purple
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 * Loaded AFTER the kidzy parent and child stylesheets. Additive only: this file
 * overrides, it never replaces theme CSS.
 */

:root {
  /* Brand, read off the live computed styles, not eyeballed */
  --pv-purple: #92278f;
  --pv-purple-deep: #6d1d6b;
  --pv-cyan: #7fdbe8;
  --pv-ink: #33323a;
  --pv-paper: #ffffff;
  --pv-paper-soft: #f6f2f7;
  --pv-on-purple: #ffffff;
  --pv-on-purple-muted: rgba(255, 255, 255, 0.78);

  --pv-font-display: "Sniglet", "Trebuchet MS", sans-serif;

  /* 4pt scale */
  --pv-space-xs: 8px;
  --pv-space-sm: 16px;
  --pv-space-md: 24px;
  --pv-space-lg: 40px;
  --pv-space-xl: 64px;

  --pv-radius-pill: 999px;
  --pv-radius-md: 16px;

  --pv-shadow-pill: 0 6px 24px rgba(51, 50, 58, 0.14);
  --pv-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pv-dur: 180ms;

  /* One number, used by the pill, its inset, and the scroll-jump guard.
     They must agree or the header pops on scroll. */
  --pv-nav-h: 84px;
  --pv-nav-inset: 14px;
  /* compacted state, after the theme adds .sticky at ~600px */
  --pv-nav-h-compact: 62px;
  --pv-nav-inset-compact: 6px;
  --pv-logo-compact: 46px;
}

html, body { overflow-x: clip; }

/* ============================================================
   HEADER — N5 floating pill
   Replaces a full-bleed white bar whose 182px circular logo was
   clipped 50px above the viewport and spilled 56px below the bar
   the moment the nav went fixed. A pill owns its own height, so
   the badge sits INSIDE it and rest/stuck look identical.
   ============================================================ */

/* The theme collapsed .header-area 132px -> 56px when the nav detached,
   which is the jump you feel as the header "breaking free". Reserve the
   space so nothing moves. */
/* The theme's top strip is a 56px band above the nav carrying a social row
   and a mailto. Both now live in the rebuilt footer, so on the page it reads
   as an empty band pushing the pill 70px down from the top. */
.header-top { display: none; }

.header-area {
  min-height: calc(var(--pv-nav-h) + (var(--pv-nav-inset) * 2));
  position: relative;
  z-index: 90;
  /* Once .header-top was hidden the pill became the first in-flow child, so
     its top margin collapsed straight through this parent and the pill sat
     flush at y=0. flow-root establishes a BFC and stops the collapse. */
  display: flow-root;
}

.navigation,
.navigation.fixed-menu,
.navigation.sticky {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  /* Above .header-area (90). The theme shipped the child BELOW its parent. */
  z-index: 120 !important;
}

/* The pill itself is #header-container, so the outer nav can stay full width
   and the visible bar can be inset from every edge. */
.navigation #header-container {
  /* Inset on BOTH axes. A max-width alone let the pill run edge to edge on
     any viewport under 1180px, where it stops reading as a floating bar. */
  max-width: 1180px;
  width: calc(100% - (var(--pv-nav-inset) * 2));
  margin: var(--pv-nav-inset) auto 0;
  padding: 0 var(--pv-space-md);
  background: var(--pv-paper);
  border-radius: var(--pv-radius-pill);
  box-shadow: var(--pv-shadow-pill);
  min-height: var(--pv-nav-h);
  display: flex;
  align-items: center;
  transition: box-shadow var(--pv-dur) var(--pv-ease-out);
}

.navigation #navigation,
.navigation #navigation > .row {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pv-space-md);
}

.navigation #navigation > .row > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
  /* Without this the logo column is a shrinkable flex item and collapses to
     width 0 while KEEPING its 68px height, so the badge disappears while
     every height-based check still reports it as present. */
  flex-shrink: 0;
}

.navigation .col-sm-9 { flex-shrink: 1; min-width: 0; }

/* Pinned from the FIRST pixel, not from scroll 600.
   The theme's script leaves the nav position:relative until roughly 600px,
   so the pill scrolled clean off the page (measured at -136px by scroll 150),
   then the script added .sticky and played `fadeInDown`, flying the bar back
   down into view. That disappear-then-reappear is the "breaking away".
   Fixing it only in the .sticky state, as I first did, left the whole gap
   intact. It is fixed at every scroll position now, and .header-area already
   reserves its height so nothing jumps. */
.navigation,
.navigation.fixed-menu,
.navigation.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
}

/* Kill the theme's fly-in. A bar that is always present must never animate
   itself into view. */
.navigation,
.navigation.animated,
.navigation.fadeInDown {
  animation: none !important;
}

/* Starts tall at the top of the page, then compacts once you scroll.
   The theme's own script already adds `.sticky` at roughly 600px, so the
   trigger costs nothing and needs no JS of ours. A header that is the same
   size at rest and in use wastes reading area, which is the whole argument
   for sticky over fixed. */
/* The size change is INSTANT on purpose. Transitioning min-height, margin and
   height animates layout properties, which thrashes; only box-shadow, a
   composited property, is allowed to ease. The swap happens once, at a scroll
   threshold, while the page is already moving, so a snap is imperceptible and
   costs nothing. */
.navigation.sticky #header-container {
  min-height: var(--pv-nav-h-compact);
  margin-top: var(--pv-nav-inset-compact);
  box-shadow: 0 10px 30px rgba(51, 50, 58, 0.18);
  transition: box-shadow var(--pv-dur) var(--pv-ease-out);
}

.navigation.sticky img.enter-logo {
  height: var(--pv-logo-compact) !important;
  max-height: var(--pv-logo-compact) !important;
}

.navigation.sticky ul.main-menu > li > a { padding-top: 8px; padding-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .navigation.sticky #header-container,
  .navigation.sticky img.enter-logo { transition-duration: 0.01ms; }
}

/* The badge, sized to live INSIDE the pill instead of overhanging it. */
.navigation .navbar-header,
.navigation .logo-wrapper {
  margin: 0;
  padding: 0;
  float: none;
}

.navigation .navbar-brand {
  display: flex;
  align-items: center;
  height: auto;
  padding: 0;
  margin: 0;
}

.navigation img.enter-logo {
  height: 68px !important;
  width: auto !important;
  max-height: 68px !important;
  flex-shrink: 0;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
}

/* Menu sits on the pill's baseline, not floated against it. */
.navigation .main-menu.pull-right { float: none !important; }

.navigation ul.main-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The theme sets margin-left:37px on EVERY item. Seven items is 259px of
   margin, and my flex `gap` stacked on top of it, pushing the last link
   ("Contact") 24px past the right edge of the pill. Spacing is owned by the
   gap alone now. */
.navigation ul.main-menu > li {
  float: none;
  margin: 0 !important;
}

/* Menu hugs the right edge of the pill and is allowed to shrink before it
   ever overflows. */
.navigation .col-sm-9 { display: flex; justify-content: flex-end; }
.navigation #main-menu { min-width: 0; }

.navigation ul.main-menu > li > a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--pv-radius-pill);
  line-height: 1.2;
  /* Gate 49: a nav link must never wrap to two lines. The theme's
     default let "Our School", "Parent Forms" and "Availability Request"
     each break across two rows inside the pill. */
  white-space: nowrap;
  font-size: 16px;
  transition: background var(--pv-dur) var(--pv-ease-out);
}

.navigation ul.main-menu > li > a:hover,
.navigation ul.main-menu > li > a:focus-visible {
  background: var(--pv-paper-soft);
}

.navigation a:focus-visible,
.footer-section a:focus-visible {
  outline: 3px solid var(--pv-purple);
  outline-offset: 2px;
  /* Never animate a focus ring; it must appear instantly. */
  transition: none;
}

/* ============================================================
   FOOTER — Ft2, three equal columns
   The theme used col-sm-3 x3, so the columns filled 75% of the
   row and left a quarter of the footer empty, with three
   different column heights (194 / 349 / 336px measured).
   ============================================================ */

.footer-section {
  background: var(--pv-purple);
  color: var(--pv-on-purple);
  padding: var(--pv-space-xl) 0 var(--pv-space-lg);
}

.footer-section .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pv-space-lg);
  margin: 0;
}

/* Bootstrap 3 puts a clearfix on .row via ::before and ::after. Under
   display:grid those pseudo-elements become GRID ITEMS, so they eat the
   first and last cells: column one renders empty and the third widget
   wraps onto a second row. */
.footer-section .row::before,
.footer-section .row::after {
  display: none;
}

/* The badge strip is its own row and must not inherit the 3-up grid. */
.footer-section .pv-badges-row {
  display: block;
  margin-top: var(--pv-space-lg);
  padding-top: var(--pv-space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.footer-section .row > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}

/* Every column starts at the same baseline, which is what "uniform" means here. */
.footer-section .footer-widget {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-sm);
  align-items: flex-start;
  /* Gate 51. The email is a single 30-character token; in a ~248px column at
     820px it ran straight out of its cell and printed over the Hours text. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer-section .footer-widget a { max-width: 100%; }

.footer-section .widget_title {
  font-family: var(--pv-font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--pv-on-purple);
  margin: 0 0 var(--pv-space-xs);
  padding-bottom: var(--pv-space-xs);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  width: 100%;
}

.footer-section p,
.footer-section .textwidget {
  color: var(--pv-on-purple);
  margin: 0;
  line-height: 1.6;
}

.footer-section a { color: var(--pv-on-purple); }
.footer-section a:hover { color: var(--pv-cyan); }

/* Both of these are real tap targets on a phone and measured 103x17 and
   275x25. 44px is the floor. */
.pv-foot-phone,
.footer-widget a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.pv-foot-phone {
  font-family: var(--pv-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
}

.pv-foot-label {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-on-purple-muted);
}

/* Replaces the 265px-wide map iframe that overran its own 188px column
   at tablet widths and painted over the phone number. */
.pv-directions {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-xs);
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--pv-radius-pill);
  text-decoration: none;
  transition: background var(--pv-dur) var(--pv-ease-out),
              border-color var(--pv-dur) var(--pv-ease-out);
}

.pv-directions:hover,
.pv-directions:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--pv-paper);
  color: var(--pv-on-purple);
}

/* Accreditation marks, normalised to one height so they stop reading
   as two unrelated images at two random sizes. */
.footer-section .footer-logo { margin: 0; }

.footer-section .footer-logo img,
.pv-badges img {
  height: 74px;
  width: auto;
  max-width: 100%;
}

.pv-badges {
  display: flex;
  align-items: center;
  gap: var(--pv-space-md);
  flex-wrap: wrap;
}

/* Social: measured at 9 x 20px on the live site. */
.footer-section ul.social-icon {
  display: flex;
  gap: var(--pv-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section ul.social-icon li { float: none; margin: 0; }

.footer-section ul.social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--pv-on-purple);
  transition: background var(--pv-dur) var(--pv-ease-out),
              transform var(--pv-dur) var(--pv-ease-out);
}

.footer-section ul.social-icon a:hover,
.footer-section ul.social-icon a:focus-visible {
  background: var(--pv-paper);
  color: var(--pv-purple);
}

.footer-section ul.social-icon i {
  font-size: 20px;
  line-height: 1;
  width: auto;
}

.blank-footer-section {
  background: var(--pv-purple-deep);
  color: var(--pv-on-purple-muted);
  padding: var(--pv-space-md) 0;
  text-align: center;
}

.blank-footer-section strong { color: var(--pv-on-purple); }

/* The contact page carries its own map, hard-coded width="600" height="450".
   That is real content and it stays, but a fixed 600px overflows a 390px
   phone. Make it fluid and keep its shape. */
iframe[src*="google.com/maps"] {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
  border-radius: var(--pv-radius-md);
  display: block;
}

/* ============================================================
   RESPONSIVE — verified at 320 / 375 / 414 / 768
   ============================================================ */

/* The seven top-level links need about 750px. The mobile menu plugin only
   takes over at 782px, which left a dead band from 783 to ~1100 where the
   desktop menu was shown but could not fit: "Contact" fell off the pill
   entirely. Hand that band to the mobile menu, which already works. */
@media (max-width: 1099px) {
  .navigation { display: none !important; }
  .header-area { min-height: 0; }

  /* dynamic-mobmenu.css carries
        .mob_menu, .mobmenu-panel, .mobmenu, ... { display:none !important }
     inside `only screen and (min-width: 641px)`, and the header holder also
     carries the bare `.mobmenu` class. That selector is (0,1,0) with
     !important, same as a plain class of ours, and it loads later, so a
     matching-specificity rule LOSES on source order. Out-specify it rather
     than pile on another !important. */
  body .mob-menu-header-holder.mobmenu,
  body .mobmenu-panel.mobmenu,
  body .mobmenu-overlay,
  body .mob-menu-left-bar,
  body .mob-menu-right-bar {
    display: block !important;
  }

  /* The holder is the LAST element in <body>, and the plugin only makes it
     fixed inside its own max-width:782px query. Un-pinned it renders below
     the footer. Pin it and reserve its height so nothing hides underneath. */
  body .mob-menu-header-holder.mobmenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000;
  }

  body { padding-top: 73px; }
}

/* Three short columns still fit comfortably at 768px; a 2-up grid just left
   a large empty cell under "Hours". */
@media (max-width: 991px) and (min-width: 768px) {
  .footer-section .row { gap: var(--pv-space-md); }
}

@media (max-width: 767px) {
  :root { --pv-nav-h: 68px; --pv-nav-inset: 8px; }

  .navigation #header-container {
    border-radius: var(--pv-radius-md);
    padding: 0 var(--pv-space-sm);
  }

  .navigation img.enter-logo { height: 46px !important; max-height: 46px !important; }

  .footer-section {
    padding: var(--pv-space-lg) 0 var(--pv-space-md);
    text-align: left;
  }

  .footer-section .row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .navigation,
  .navigation #header-container,
  .footer-section a,
  .pv-directions {
    transition-duration: 0.01ms !important;
  }
  .navigation.animated,
  .navigation.fadeInDown { animation: none !important; }
}


/* ============================================================
   CLASSROOM CARDS
   Replaces two columns of plain text on the homepage.
   ============================================================ */

.pv-classrooms{padding:56px 24px 72px;background:var(--pv-paper-soft)}
/* Hallmark - macrostructure: Card Field - genre: playful
 * theme: brand-locked (Primavera) - display: rounded-sans (Sniglet)
 * Creature graphics: Twemoji, CC-BY 4.0
 */
:root {
  --pv-purple:#92278f; --pv-green:#8ac53f; --pv-cyan:#4fc3d9;
  --pv-yellow:#f6c445; --pv-red:#e0483d; --pv-orange:#f28b30;
  --pv-ink:#33323a; --pv-muted:#6b6a73;
  --pv-paper:#ffffff; --pv-ground:#f7f4f9;
  --pv-font:"Sniglet","Trebuchet MS",sans-serif;
  --pv-radius:20px;
  --pv-ease:cubic-bezier(.22,.61,.36,1);
}

.pv-grid{display:grid;gap:24px;max-width:1180px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

.pv-card{position:relative;overflow:hidden;isolation:isolate;
  background:var(--pv-paper);border-radius:var(--pv-radius);
  /* bottom padding reserves the swarm stage so creatures never cross copy */
  padding:28px 26px 116px;border:2px solid #ece7f0;
  transition:transform .22s var(--pv-ease),box-shadow .22s var(--pv-ease),border-color .22s var(--pv-ease);
  min-width:0}
.pv-card:hover,.pv-card:focus-visible{border-color:currentColor;
  box-shadow:0 14px 34px rgba(51,50,58,.13)}
.pv-card:focus-visible{outline:3px solid var(--pv-purple);outline-offset:3px;transition:none}

/* one accent per classroom, so six cards do not read as one card six times */
.pv-card--caterpillar{color:var(--pv-green)}
.pv-card--butterfly{color:var(--pv-purple)}
.pv-card--sunflower{color:var(--pv-yellow)}
.pv-card--lovebug{color:var(--pv-red)}
.pv-card--honeybee{color:var(--pv-orange)}
.pv-card--star{color:var(--pv-cyan)}

.pv-badge{width:60px;height:60px;display:block;margin:0 0 14px;
  transition:transform .3s var(--pv-ease)}
.pv-card:hover .pv-badge,.pv-card:focus-visible .pv-badge{transform:scale(1.12) rotate(-6deg)}

.pv-card h3{font-size:1.3rem;margin:0 0 8px;color:var(--pv-purple);font-weight:400}
.pv-card p{margin:0;color:var(--pv-muted);font-size:.98rem;overflow-wrap:anywhere}

/* ---- the swarm ----
   Confined to a stage across the bottom of the card. Left free to roam the
   full card the creatures crossed the body copy and made it hard to read,
   which is a decoration beating the content. The card reserves the stage as
   padding so nothing is ever covered. */
.pv-swarm{position:absolute;left:0;right:0;bottom:0;height:112px;
  pointer-events:none;z-index:-1;overflow:hidden}
.pv-bug{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;
  opacity:0;will-change:transform,opacity}

.pv-card:hover .pv-bug,.pv-card:focus-visible .pv-bug{
  animation-name:var(--anim,pv-drift);
  animation-duration:var(--dur,2.6s);
  animation-delay:var(--delay);
  animation-timing-function:var(--tf,linear);
  animation-iteration-count:infinite}

/* Each creature moves the way it actually moves. A caterpillar that flies is
   the giveaway that nobody looked at it. */
/* Caterpillars ride a little higher in the stage and crawl slower than the
   fliers. They were sitting too low on the card edge and moving at bee speed. */
.pv-card--caterpillar .pv-bug{--anim:pv-crawl;--dur:4.4s;--tf:cubic-bezier(.5,0,.5,1);
  top:calc(var(--y) - 34px)}
.pv-card--butterfly   .pv-bug{--anim:pv-flutter;--dur:3.1s;--tf:ease-in-out}
.pv-card--sunflower   .pv-bug{--anim:pv-bloom;--dur:3.6s;--tf:ease-out}
.pv-card--lovebug     .pv-bug{--anim:pv-scatter;--dur:2.9s;--tf:ease-out}
.pv-card--honeybee    .pv-bug{--anim:pv-buzz;--dur:2.4s;--tf:ease-in-out}
.pv-card--star        .pv-bug{--anim:pv-twinkle;--dur:2.2s;--tf:ease-in-out}

@keyframes pv-crawl{
  0%{opacity:0;transform:translate(-30px,0) scaleX(.7)}
  12%{opacity:1}
  50%{transform:translate(calc(var(--tx)*.5),0) scaleX(1.15)}
  88%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),0) scaleX(.8)}}

@keyframes pv-flutter{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(var(--scale))}
  14%{opacity:1}
  40%{transform:translate(calc(var(--tx)*.4),calc(var(--ty)*.65)) rotate(calc(var(--rot)*-1)) scale(var(--scale))}
  70%{transform:translate(calc(var(--tx)*.72),calc(var(--ty)*.35)) rotate(var(--rot)) scale(var(--scale))}
  86%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(0) scale(var(--scale))}}

@keyframes pv-bloom{
  0%{opacity:0;transform:translate(0,10px) scale(.2) rotate(0)}
  20%{opacity:1}
  80%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--tx)*.35),var(--ty)) scale(var(--scale)) rotate(180deg)}}

@keyframes pv-scatter{
  0%{opacity:0;transform:translate(0,0) scale(.3)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(var(--scale)) rotate(var(--rot))}}

@keyframes pv-buzz{
  0%{opacity:0;transform:translate(0,0)}
  12%{opacity:1}
  25%{transform:translate(calc(var(--tx)*.25),-14px)}
  50%{transform:translate(calc(var(--tx)*.5),6px)}
  75%{transform:translate(calc(var(--tx)*.75),-10px)}
  88%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),0)}}

@keyframes pv-twinkle{
  0%,100%{opacity:0;transform:scale(.4) rotate(0)}
  40%{opacity:1;transform:scale(var(--scale)) rotate(var(--rot))}
  70%{opacity:.75;transform:scale(calc(var(--scale)*.85)) rotate(0)}}

/* Motion is decoration. It must be possible to turn it off completely. */
@media (prefers-reduced-motion:reduce){
  .pv-card:hover .pv-bug,.pv-card:focus-visible .pv-bug{animation:none;opacity:0}
  .pv-card,.pv-badge{transition-duration:.01ms}
  .pv-card:hover .pv-badge,.pv-card:focus-visible .pv-badge{transform:none}
}


/* Toy-plane clip. Reserves its own square so nothing shifts while it loads. */
.pv-plane { line-height: 0; }

.pv-plane-video {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: var(--pv-radius-md);
  background: var(--pv-paper);
}

/* WCAG 2.2 AA contrast, 2026-10-12. Same hues as the theme, darkened just past 4.5:1 on white.
   Theme rule order is 2n, 3n, 4n, 5n, 6n, 7n; repeat it so the cascade resolves the same way. */
.navigation ul.main-menu > li > a, .navigation ul.main-menu > li > a:after,
.navigation ul.main-menu .menu-item-has-children:before { color: #587f26; }
.navigation ul.main-menu > li:nth-child(2n) > a, .navigation ul.main-menu > li:nth-child(2n) > a:after { color: #1f8188; }
.navigation ul.main-menu > li:nth-child(3n) > a, .navigation ul.main-menu > li:nth-child(3n) > a:after,
.navigation ul.main-menu .menu-item-has-children:nth-child(3):before { color: #8b7208; }
.navigation ul.main-menu > li:nth-child(4n) > a, .navigation ul.main-menu > li:nth-child(4n) > a:after,
.navigation ul.main-menu .menu-item-has-children:nth-child(4):before { color: #e11077; }
.navigation ul.main-menu > li:nth-child(5n) > a, .navigation ul.main-menu > li:nth-child(5n) > a:after { color: #92278f; }
.navigation ul.main-menu > li:nth-child(6n) > a, .navigation ul.main-menu > li:nth-child(6n) > a:after { color: #007a3c; }
.navigation ul.main-menu > li:nth-child(7n) > a, .navigation ul.main-menu > li:nth-child(7n) > a:after { color: #007aa8; }
.our-classes > h3 { color: #6e9f30; }   /* large text: 3:1 */
.themeum-text-info > p, .wpb_wrapper p { color: #6b6b6b; }

/* pv-vpk 2026-10-12 */
.breadcrumb-content h1 { color: #ffffff; }   /* 7.22:1 on the purple banner; was black at 2.91:1 */
.breadcrumb-content h1.pv-hero-h1 { font-size: 50px; line-height: 1.15; margin-bottom: 10px; }
.breadcrumb-content .pv-hero-sub { color: #ffffff; font-size: 20px; line-height: 1.5; max-width: 640px; margin: 0 auto 18px; }
.breadcrumb-content .pv-hero-cta { margin: 0 0 16px; }
.breadcrumb-content .pv-hero-cta a { display: inline-block; background: #ffffff; color: #92278f; font-weight: 600; border-radius: 6px; padding: 12px 26px; font-size: 18px; text-decoration: none; }
@media (max-width: 800px) {
  .breadcrumb-content h1.pv-hero-h1 { font-size: 32px; }
  .breadcrumb-content .pv-hero-sub { font-size: 17px; padding: 0 12px; }
}
.pv-vpk { max-width: 1040px; margin: 0 auto; padding: 0 15px 60px; }
.pv-vpk h2.pv-vpk-lead { text-align: center; color: #92278f; font-size: 34px; margin: 0 0 12px; }
.pv-vpk .pv-vpk-intro { text-align: center; max-width: 760px; margin: 0 auto 36px; font-size: 18px; line-height: 1.6; color: #444; }
.pv-vpk-row { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.pv-vpk-row img { width: 100%; height: auto; border-radius: 16px; display: block; }
.pv-vpk-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-vpk-facts li { background: #f6f1f8; border-radius: 12px; padding: 18px 20px; color: #444; font-size: 16px; line-height: 1.55; }
.pv-vpk-facts li strong { display: block; color: #92278f; font-size: 18px; margin-bottom: 4px; }
.pv-vpk h3 { color: #92278f; font-size: 26px; margin: 44px 0 14px; text-align: center; }
.pv-vpk-steps { max-width: 760px; margin: 0 auto; padding-left: 22px; color: #444; font-size: 17px; line-height: 1.6; }
.pv-vpk-steps li { margin-bottom: 10px; }
.pv-vpk-note { max-width: 760px; margin: 28px auto 0; background: #f6f1f8; border-radius: 12px; padding: 18px 20px; color: #444; }
.pv-vpk-note strong { color: #92278f; }
.pv-vpk-cta { text-align: center; margin-top: 34px; }
.pv-vpk-cta a.pv-btn { display: inline-block; background: #92278f; color: #fff; border-radius: 6px; padding: 13px 28px; font-size: 18px; margin: 6px; text-decoration: none; }
.pv-vpk-cta a.pv-btn-outline { background: #fff; color: #92278f; border: 2px solid #92278f; }
@media (max-width: 800px) {
  .pv-vpk-row { grid-template-columns: 1fr; }
  .pv-vpk-row img { max-width: 300px; margin: 0 auto; }
  .pv-vpk-facts { grid-template-columns: 1fr; }
  .pv-vpk h2.pv-vpk-lead { font-size: 27px; }
}

/* links inside text must not rely on color alone (WCAG 1.4.1), 2026-10-12 */
.pv-vpk p a, .pv-vpk li a, .pv-vpk-note a { text-decoration: underline; }

/* pv-shy 2026-10-12 */
#masthead.animated { animation: none !important; }
#masthead, body .mob-menu-header-holder { transition: transform 0.28s ease; }   /* body: beats mobmenu.css, which loads later */
#masthead.pv-hide, body .mob-menu-header-holder.pv-hide { transform: translateY(-120%); }
#masthead:focus-within, body .mob-menu-header-holder:focus-within { transform: none; }
.navigation ul.main-menu > li > a { transition: padding 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  #masthead, body .mob-menu-header-holder, .navigation ul.main-menu > li > a { transition: none; }
}