/* ==========================================================================
   Primal Fitness: the pages rebuilt from their older site (src/pages/), on top
   of base.css and primal.css.
   ========================================================================== */

/* header links on the member pages */
.mnav { display: none; gap: 22px; margin-right: 18px; }
.mnav a { color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 700; font-size: .92rem; }
.mnav a:hover { color: #fff; }
@media (min-width: 760px) { .mnav { display: flex; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* two columns: words, then a form */
.split2 { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split2 { grid-template-columns: 1fr 1fr; } }
.split2__copy h2 { margin-top: 6px; }

/* ticked lists */
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; font-weight: 600; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--ice); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: calc(.2em + 4px); width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ticks.big { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
@media (min-width: 700px) { .ticks.big { grid-template-columns: 1fr 1fr; } }

/* form bits */
.note-box { background: var(--paper); border-left: 3px solid var(--ice); padding: 16px 18px; margin: 6px 0 18px; border-radius: var(--r); }
.note-box p { margin: 0 0 8px; }
.note-box ul { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: .93rem; }
.note-box li { margin: 0 0 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 14px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ice); flex: 0 0 auto; }
.check a { color: var(--ice); }
.form-err { color: var(--ice); font-weight: 700; margin: 0 0 12px; }
.form-thanks h3 { margin: 6px 0 10px; }
.form-card select, .form-card textarea { width: 100%; font: inherit; }
.legal a { color: inherit; }

/* numbered steps */
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 li { background: #fff; padding: 26px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.steps3 .n { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: var(--ice); color: #fff; font-weight: 800; }
.steps3 h3 { margin: 14px 0 8px; }
.steps3 p { margin: 0; color: var(--muted); }

/* link tiles (member hub, guides) */
.tiles { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow);
  text-decoration: none; color: var(--body); border-top: 3px solid var(--ice); transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile small { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .72rem; color: var(--ice); }
.tile b { font-size: 1.18rem; color: var(--ink); }
.tile span { color: var(--muted); font-size: .95rem; }
.tile.red { background: var(--ink); }
.tile.red b { color: #fff; }
.tile.red span { color: rgba(255, 255, 255, .75); }

/* YouTube films, loaded when tapped */
.yts { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .yts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .yts:not(.two) { grid-template-columns: repeat(4, 1fr); } }
.yt { margin: 0; }
.yt button, .yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); padding: 0; cursor: pointer; position: relative; }
.yt button img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.yt button:hover img { opacity: 1; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--ice); }
.yt__play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.yt figcaption { padding: 12px 2px 0; }
.yt figcaption b { display: block; color: var(--ink); }
.yt figcaption span { color: var(--muted); font-size: .93rem; }

/* /join */
.form-card.join { padding: clamp(22px, 4vw, 40px); }
.jstep { border: 0; padding: 0; margin: 0 0 28px; }
.jstep legend { font-weight: 800; font-size: 1.2rem; color: var(--ink); margin-bottom: 14px; }
.jstep .q__n { color: var(--ice); margin-right: 8px; }
.plans { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan__in { display: block; height: 100%; padding: 20px 20px 16px; border: 2px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: border-color .2s, box-shadow .2s; }
.plan__in small { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--ice); }
.plan__in b { display: block; font-size: 1.15rem; color: var(--ink); margin: 4px 0 10px; }
.plan__in ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .92rem; }
.plan input:checked + .plan__in { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(189, 50, 50, .15); }
.plan input:focus-visible + .plan__in { outline: 2px solid var(--ice); outline-offset: 2px; }
.join .opt small { color: var(--muted); font-weight: 500; }

/* legal pages (.legal is the small print under a form) */
.legaltext h2 { margin-top: 0; }
.legaltext h3, .privacy-policy .legaltext h2 { margin: 30px 0 8px; font-size: 1.05rem; letter-spacing: .02em; }
.legaltext p, .legaltext li { color: var(--body); }
.legaltext ul { padding-left: 20px; }

/* /hub */
.hub-lock { text-align: left; }
.hub__h { color: #fff; font-size: 1.15rem; margin: 34px 0 12px; }
.hub__list { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hub__list { grid-template-columns: 1fr 1fr; } }
.hub__list a { display: flex; flex-direction: column; padding: 14px 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); text-decoration: none; }
.hub__list a:hover { border-color: var(--ice); }
.hub__list b { color: #fff; }
.hub__list span { color: rgba(255, 255, 255, .55); font-size: .85rem; }

/* ------------------------------------------------- the main site's menu (src/site/) */
.snav { display: none; align-items: center; gap: 22px; margin-right: 8px; }
.snav a { color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.snav a:hover, .snav a[aria-current="page"] { color: #fff; }
.snav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ice); }
.snav__cta { display: none; }
.snav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px;
  padding: 0 10px; margin-left: 4px; border: 0; background: transparent; cursor: pointer; }
.snav__toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
@media (min-width: 1080px) {
  .snav { display: flex; }
  .snav__toggle { display: none; }
}
@media (max-width: 1079px) {
  .snav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); padding: 8px var(--pad) 20px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); margin: 0; }
  .snav.open a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 1.02rem; }
  .snav.open .snav__cta { display: block; margin-top: 14px; text-align: center; background: var(--ice); color: #fff; border: 0;
    border-radius: var(--r); font-family: var(--btn-font); text-transform: uppercase; letter-spacing: 2px; }
  .site .top-in { position: relative; }
}
@media (max-width: 480px) { .snav__btn { display: none; } }
.site .top { position: sticky; top: 0; z-index: 40; }

/* footer, four columns */
@media (min-width: 900px) { .foot-grid--4 { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-grid--4 .btn { margin-top: 6px; }

/* opening hours, the map, a split with a photo */
.hours { margin: 0; display: grid; gap: 8px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hours dt { font-weight: 700; color: var(--ink); }
.hours dd { margin: 0; color: var(--muted); }
.map { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--mist); }
.split2.mid { align-items: center; }
.split2 img.photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.split2 img.photo.wide { aspect-ratio: 4 / 3; }

/* numbered steps across (the pathway) and the session types */
.path4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: p; }
@media (min-width: 700px) { .path4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .path4 { grid-template-columns: repeat(4, 1fr); } }
.path4 li { background: #fff; padding: 24px; border-radius: var(--r-lg); box-shadow: var(--shadow); border-top: 3px solid var(--ice); }
.path4 li::before { counter-increment: p; content: "0" counter(p); display: block; font-weight: 800; color: var(--ice); font-size: 1.4rem; margin-bottom: 6px; }
.path4 h3 { margin: 0 0 8px; }
.path4 p { margin: 0; color: var(--muted); }
.tone-ink .path4 li { background: rgba(255, 255, 255, .05); box-shadow: none; }
.tone-ink .path4 h3 { color: #fff; }
.tone-ink .path4 p { color: rgba(255, 255, 255, .72); }
.sessions { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .sessions { grid-template-columns: repeat(3, 1fr); } }
.sessions article { background: #fff; padding: 26px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.sessions small { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .72rem; color: var(--ice); }
.sessions h3 { margin: 6px 0 10px; }
.sessions p { color: var(--muted); margin: 0 0 10px; }
.sessions ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .95rem; }

/* the timetable: a column a day, the week side by side on a desktop. On a phone pages.js shows
   one day at a time (.tt.js), with a button for each; without script, the days one under another. */
.tt__tabs { display: none; }
.tt__week { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 1000px) { .tt__week { grid-template-columns: repeat(7, 1fr); } }
.tt__day { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 14px 10px; }
.tt__day h3 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; color: var(--ink); }
.tt__day ul { list-style: none; margin: 0; padding: 0; }
.tt__day li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 8px 0 8px 10px; border-top: 1px solid var(--line); border-left: 3px solid var(--ice); font-size: .9rem; line-height: 1.3; }
.tt__day li.team { border-left-color: var(--ink); }
.tt__day time { font-weight: 800; color: var(--ink); min-width: 4.6em; }
.tt__day.closed p { color: var(--muted); margin: 0; }
.tt__key { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 18px 0 0; color: var(--muted); font-size: .9rem; }
.tt__key span { padding-left: 10px; border-left: 3px solid var(--ice); }
.tt__key b { color: var(--ink); margin-right: 6px; }
.tt__key span.team { border-left-color: var(--ink); }
@media (max-width: 699px) {
  .tt.js .tt__tabs { display: flex; gap: 6px; margin: 0 0 12px; }
  .tt.js .tt__tabs button { flex: 1 1 0; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--r);
    background: #fff; color: var(--ink); font: 700 .8rem/1 var(--btn-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .tt.js .tt__tabs button[aria-selected="true"] { background: var(--ice); border-color: var(--ice); color: #fff; }
  .tt.js .tt__week { display: block; }
  .tt.js .tt__day { display: none; }
  .tt.js .tt__day.on { display: block; }
  .tt.js .tt__day.closed { display: block; margin-top: 12px; padding: 12px 14px; }
  .tt.js .tt__day.closed h3 { display: inline; margin-right: 10px; }
  .tt.js .tt__day.closed p { display: inline; }
  .tt__day li { font-size: 1rem; padding: 11px 0 11px 12px; }
  .tt__key { justify-content: flex-start; }
}
.cta-band { text-align: center; }
.cta-band h2 { margin: 0 auto 14px; max-width: 22ch; }
.cta-band p { margin: 0 auto 26px; max-width: 52ch; }
.pull { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ice); font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.pull cite { display: block; margin-top: 6px; font-style: normal; font-weight: 500; font-size: .85rem; color: var(--muted); }
/* width/height on the main site's photos are for layout stability only: the CSS aspect ratios decide the shape */
.site main img[height] { height: auto; }
.site .arch img[height] { height: 100%; }