/* ==========================================================================
   Jump! Gymnastics — program pages and the locations hub

   Loaded only by /gymnastics/, /campjump/, /preschool/, /locations/ and the
   prose pages. Deliberately tiny: those pages reuse the hero, the pillar grid
   and the location cards jump.css already ships, so there is one design to
   maintain rather than five. Only what genuinely has no equivalent lives here.
   ========================================================================== */

/* Numbered steps reuse .pillar, with a numeral where the icon normally sits. */
.pillar__num{
  font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1;
  color:var(--c,var(--sky));
}

/* Natalie's sports / academics / gymnastics band, kept from the current
   preschool page because it is the one element she screenshotted for it.

   Retired from /preschool/ on September 23 — the strip and the wave under it
   read as one lime wedge — but the rules stay: the field is only emptied in
   content/pages/preschool.json, so putting it back is one CMS edit. */
.band{background:var(--lime)}
.band__row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1rem,6vw,4rem);padding-block:.9rem;
}
.band__row span{
  font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(.85rem,.7rem + .4vw,1.05rem);
  letter-spacing:.12em;text-transform:uppercase;
}

/* The hub's hero is words only — no photograph — so its wrap must not sit in
   the two-column hero grid waiting for one that never arrives. */
.hero--location .wrap:not(.hero__grid){max-width:var(--wrap)}


/* --------------------------------------------------------------------------
   The four-gym comparison table.

   As a scrolling table it was cut off mid-word on a phone ("Westg…") and the
   Serving column — the one a parent actually reads to find their gym — was
   the column that disappeared. Below 700px each row becomes a small card
   with its own labels, so nothing is hidden and there is no sideways scroll.
   The markup stays a real <table> so it is still a table to a screen reader
   and still gives search engines the service areas.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .feetable--stack thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .feetable--stack,
  .feetable--stack tbody,
  .feetable--stack tr,
  .feetable--stack th,
  .feetable--stack td{display:block;width:100%}
  .feetable--stack tr{
    background:#fff;border-radius:20px;padding:1.1rem 1.25rem;
    margin-bottom:.9rem;box-shadow:var(--lift-1);
  }
  .feetable--stack tr:last-child{margin-bottom:0}
  .feetable--stack th[scope="row"]{
    padding:0 0 .6rem;border-bottom:1px solid rgba(13,13,13,.09);
    font-family:var(--display);font-weight:800;font-size:1.15rem;
    text-transform:none;letter-spacing:0;color:var(--navy);
  }
  .feetable--stack th[scope="row"] a{color:inherit}
  .feetable--stack td{padding:.7rem 0 0;border-bottom:0}
  .feetable--stack td::before{
    content:attr(data-label);display:block;
    font-family:var(--display);font-weight:800;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.09em;
    color:var(--text-soft);margin-bottom:.15rem;
  }
}

/* --------------------------------------------------------------------------
   Prose pages — the guarantee, birthday parties, privacy, SMS terms.

   One measured column. Anything wider than about 68 characters is harder to
   read, and these are the pages people actually read rather than scan.

   .prose a is --pink-link, not --pink, and that is a contrast fix rather than
   a style choice: brand pink on white measures 3.39:1 and these are body
   links at 14-16px, which need 4.5:1. --pink-link is defined in brand.css and
   clears white, the cream hero and the grey tint at 6.21, 5.89 and 5.65:1.
   Its first version used --pink-deep, which is 4.68:1 on white but only
   4.44:1 on cream — correct on one ground and wrong on another.

   It could not be corrected from brand.css, because this file loads after
   brand.css and would have won at equal specificity.

   The list marker keeps brand pink on purpose — it is decorative, carries no
   text, and has no contrast floor to clear.
   -------------------------------------------------------------------------- */
.hero--prose .wrap{max-width:62rem}
/* Room between the lede and the confetti edge. The location hero gets this
   from .hero__grid; the prose hero has no grid, so a short lede ran straight
   into the dots and frogs (BugHerd #84, Parent Portal, 10/9/2026). Same
   value as .hero__grid so every hero clears the edge by the same amount. */
.hero--prose .wrap{padding-bottom:clamp(3.5rem,8vw,5.5rem)}
@media (max-width:979px){.hero--prose .wrap{padding-bottom:clamp(2.5rem,7vw,4rem)}}
.prose{max-width:44rem}
.prose h2{
  font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);
  color:var(--navy);margin:2.4rem 0 .75rem;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;color:var(--navy);margin:1.6rem 0 .5rem}
.prose p{margin:0 0 1.05rem;line-height:1.72;color:var(--text-soft)}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.35rem;line-height:1.72;color:var(--text-soft)}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--c,var(--pink));font-weight:700}
.prose a{color:var(--pink-link);text-underline-offset:2px}

/* The carve-outs a parent must not miss — the $75 membership fee on the
   guarantee, the "still being confirmed" line on parties. */
.prose__note{
  background:var(--paper);border-left:4px solid var(--c,var(--yellow));
  border-radius:0 16px 16px 0;padding:1rem 1.25rem;
  margin:1.5rem 0 1.15rem !important;color:var(--ink) !important;
  font-size:.95rem;
}
.prose__updated{
  margin-top:2.5rem;padding-top:1.25rem;
  border-top:1px solid rgba(13,13,13,.09);
  font-size:.85rem;color:var(--text-soft);
}

.prose__gyms{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
/* Centered, so a fourth button that wraps sits in the middle rather than
   hanging off the left edge; on a phone the four make a tidy 2x2 instead
   (BugHerd #153). Inside reading text (.prose__btns) they start at the left
   like the paragraph above them. */
.center .prose__gyms,#gyms .prose__gyms{justify-content:center}
.prose .prose__btns{margin-top:1rem;margin-bottom:1.25rem}
/* Same size and shape as the "Ask your gym" buttons below them (Randy,
   BugHerd #277): natural width on one line, not a fixed grid that wrapped
   the names onto two lines. */
.prose .prose__btns{display:flex;flex-wrap:wrap;gap:.75rem}
.prose--center .prose__btns{justify-content:center}
.prose .prose__btns a.btn{color:var(--white);text-decoration:none;white-space:nowrap}
@media (max-width:560px){
  .prose__gyms{display:grid;grid-template-columns:1fr 1fr}
  .prose__gyms .btn{justify-content:center;text-align:center}
}

/* --------------------------------------------------------------------------
   A prose page that ends by sending you somewhere else.

   Franchising and employment both hand off to a system Jump! already runs —
   the franchise site and CareerPlug — rather than pretending to be the end of
   the journey. The note under the button says where the button goes, because
   a link that opens a new tab and lands on a different brand should say so
   before it is clicked, not after.
   -------------------------------------------------------------------------- */
.prose__cta{text-align:center;max-width:46rem;margin-inline:auto}
.prose__cta h2{margin-bottom:.5rem}
.prose__cta .btn{margin-top:1.25rem}
.prose__cta__note{
  margin:1.5rem 0 0;font-size:var(--step--1);color:var(--text-soft);
}

/* ==========================================================================
   FAQ.

   Amy, September 23, 2026: "I feel like FAQs should be larger and have a more
   colorful treatment."

   It was a stack of hairline rules with a 1.02rem question and a small grey
   chevron — correct, legible, and the least Jump!-looking block on the site,
   sitting directly under bands of lime and pink.

   Now each question is its own rounded card in a wash of one of the four
   brand colours, cycling teal, orange, pink, grass down the list in the same
   sequence the Adventure Path stops use, with the chevron promoted to a
   filled disc in that card's colour. Opening a card deepens its wash, so the
   open one is obvious at a glance in a long list.

   Still <details> and <summary> with no JavaScript behind it, so it opens
   with the keyboard, prints open, and is searchable by the browser's own
   find-in-page.

   Two things that are load-bearing rather than decorative:

     - the wash is color-mix()ed against white rather than being a fifth set
       of hex values, so these cards stay right if a brand colour is ever
       retuned in jump.css, and so the same rule works on the white program
       pages and on the grey /about-us/faq/ without a variant.
     - the question stays --navy rather than taking its card's colour. Four
       colours of heading down a page reads as four different kinds of thing.
       The colour belongs on the disc, which is furniture; the words are the
       content and they stay one colour.

   Contrast, measured rather than assumed: --navy (#3551A3) on the deepest
   wash used here (15% of a brand colour mixed into white) is above 7:1 in
   every one of the four, and white on the undiluted disc is only ever
   carrying a chevron, not text.

   The answer's links take --pink-link. Worth knowing WHY they were missed on
   the first contrast pass: the crawler measures rendered text, and a closed
   <details> has none, so nothing was ever looking at them. They sit on a
   tinted card rather than on white, which is the ground --pink-deep would
   have been weakest against.
   ========================================================================== */
.faq{
  display:grid;
  gap:.7rem;
  margin:0 0 1.5rem;
}

.faq__item{
  --fc:var(--teal);
  border-radius:18px;
  background:color-mix(in srgb,var(--fc) 9%,#fff);
  transition:background .2s ease;
}
.faq__item:nth-child(4n+2){--fc:var(--orange)}
.faq__item:nth-child(4n+3){--fc:var(--pink)}
.faq__item:nth-child(4n+4){--fc:var(--grass)}
.faq__item[open]{background:color-mix(in srgb,var(--fc) 15%,#fff)}

.faq__q{
  display:flex;align-items:flex-start;gap:.9rem;cursor:pointer;
  padding:1.05rem 1.25rem;
  list-style:none;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.05rem,.98rem + .38vw,1.3rem);
  line-height:1.35;color:var(--navy);
}
.faq__q::-webkit-details-marker{display:none}

/* The disc. The chevron is a background image rather than a rotated border,
   because a border triangle centred inside a circle is a pile of magic
   numbers and this is one declaration. */
.faq__q::before{
  content:"";flex:0 0 auto;
  width:1.9rem;height:1.9rem;margin-top:.05rem;
  border-radius:50%;
  background:var(--fc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 64% auto no-repeat;
  transition:transform .25s ease;
}
.faq__item[open] .faq__q::before{transform:rotate(180deg)}

.faq__q:hover{color:var(--fc)}
.faq__item:focus-within .faq__q{color:var(--fc)}

/* The answer lines up under the question's first letter, not under the disc. */
.faq__a{padding:0 1.35rem 1.2rem calc(1.25rem + 1.9rem + .9rem)}
.faq__a p{margin:0 0 .85rem;line-height:1.72;color:var(--ink);font-size:clamp(.98rem,.94rem + .18vw,1.08rem)}
.faq__a p:last-child{margin-bottom:0}
.faq__a a{color:var(--pink-link);text-underline-offset:2px}

/* On a phone the disc-width indent costs a third of the column, so the answer
   goes back to the card's own padding. */
@media (max-width:560px){
  .faq__a{padding-left:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  .faq__item,.faq__q::before{transition:none}
}

/* Party booking panel (Birthday Parties, #book). Sits beside the opening
   paragraphs on desktop, in the empty right column, and drops under them on
   phones. One card per gym in that gym's colour, each opening Jackrabbit's
   party calendar filtered to that gym. */
.prose-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.prose-split{grid-template-columns:1fr}}
.prose-split--photo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.prose-split--photo .prose{max-width:none}
/* BugHerd #289 (11/12): the --photo columns above came after the 900px rule and
   won, so phones kept two squeezed columns. Stack them again on small screens. */
@media (max-width:900px){.prose-split--photo{grid-template-columns:1fr}}
.prose-aside .prose__figure{margin:0}
.party-book{background:var(--cream,#FFF8EC);border-radius:28px;padding:clamp(1.25rem,2.5vw,1.75rem)}
.party-book .eyebrow{margin-bottom:.35rem}
.party-book h2{margin:0 0 .4rem;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.party-book__lede{margin:0 0 1.1rem;color:var(--text-soft);line-height:1.6}
.party-gyms{display:grid;grid-template-columns:1fr;gap:.75rem}
.party-gym{display:flex;flex-direction:column;background:#fff;border-radius:18px;
  padding:1rem 1.1rem;border-top:7px solid var(--c);box-shadow:var(--lift-1,0 10px 24px -16px rgba(18,0,82,.35))}
.party-gym b{display:block;font:800 1.1rem/1.2 var(--display);color:var(--ink,#0D0D0D)}
.party-gym__all{display:inline-block;margin-top:.45rem;color:var(--navy);font:800 .95rem var(--display);text-decoration:none}
.party-gym__all:hover{text-decoration:underline}
.party-slots{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.4rem}
.party-slots li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--cream,#FFF8EC);border-radius:10px;padding:.45rem .6rem;font-size:.88rem;font-weight:600;color:var(--ink,#0D0D0D)}
.party-slots li a{flex:none;background:var(--c);color:#0D0D0D;font:800 .8rem/1 var(--display);text-decoration:none;
  padding:.45em .8em;border-radius:99px}
.party-slots li a:hover{filter:brightness(.95)}
.party-slots li a:focus-visible{outline:none;box-shadow:var(--ring)}
.party-slots__none{grid-column:1/-1;color:var(--text-soft)!important;font-weight:500!important;background:none!important;padding:0!important}

/* A written section centered on the page (Randy, BugHerd #251). */
.prose--center{margin-inline:auto;text-align:center}
.prose--center .btn-row,.prose--center .prose__buttons{justify-content:center}
.pillar__more{display:inline-block;margin-top:.6rem;font-family:var(--display);font-weight:800;color:var(--heading);text-decoration:underline;text-underline-offset:3px}