/*
 * Legacy compat — applied on Body Map, Calendar, PED and other
 * surfaces where the parent's page templates render Bootstrap-based
 * markup inside our new chrome.
 *
 * Goals:
 *   - Let Bootstrap's grid/components keep working for the inner
 *     content (Body Map's interactive panel, calendar, etc.)
 *   - Override Bootstrap's body/heading/link defaults that would
 *     fight our Performance design tokens
 *   - Reset radii to 0 so legacy components match the hard edge
 *
 * Loaded only when gp2026_keep_parent_assets() is true.
 */

/* Bootstrap sets body to white text-on-white — force our dark surface.
   Also kill the parent's responsive.css `body { padding-top: 91px }` rule
   which fires at <=979px and was injecting a giant gap above gp-header. */
body {
    background: var(--gp-bg) !important;
    color: var(--gp-text) !important;
    font-family: var(--gp-font-body) !important;
    padding-top: 0 !important;
}

/* Font override for legacy CONTENT only (#gp-main) — leave the chrome
   (.gp-header / .gp-footer) untouched so it inherits its own design
   tokens. The parent theme uses `font-family: proxima-nova` in many
   rules and the TypeKit subscription is expired, so the browser falls
   back to a serif default. Force the content area back to our fonts. */
body.gp-legacy #gp-main, body.gp-legacy #gp-main * {
    font-family: var(--gp-font-body);
}
body.gp-legacy #gp-main h1, body.gp-legacy #gp-main h2, body.gp-legacy #gp-main h3,
body.gp-legacy #gp-main .page-title, body.gp-legacy #gp-main .archive_title {
    font-family: var(--gp-font-display) !important;
}
/* Display headings often contain a gold-accent <span> (e.g. .gp-ped-head__title
   wraps "OF EXERCISES." in a span; .gp-covers__title wraps "GALLERY."). The
   wildcard reset above resets spans to body font — make them inherit from
   their parent heading instead so the entire title keeps the display face. */
body.gp-legacy #gp-main h1 span,
body.gp-legacy #gp-main h2 span,
body.gp-legacy #gp-main h3 span,
body.gp-legacy #gp-main h1 em, body.gp-legacy #gp-main h1 strong,
body.gp-legacy #gp-main h2 em, body.gp-legacy #gp-main h2 strong,
body.gp-legacy #gp-main h3 em, body.gp-legacy #gp-main h3 strong {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    letter-spacing: inherit !important;
}
body.gp-legacy #gp-main h1 .muted,
body.gp-legacy #gp-main h2 .muted,
body.gp-legacy #gp-main h3 .muted {
    font-family: var(--gp-font-display) !important;
    color: var(--gp-text-muted) !important;
    font-style: normal !important;
}
body.gp-legacy #gp-main [class*="proxima"],
body.gp-legacy #gp-main [style*="proxima"] {
    font-family: var(--gp-font-display) !important;
    font-style: normal !important;
}

/* Bootstrap's `ul, ol { margin: 0 0 10px 25px }` only needs to be
   reset for header lists here — footer.css owns its own resets. */
body.gp-legacy .gp-header ul,
body.gp-legacy .gp-header ol { margin: 0 !important; padding: 0 !important; }
body.gp-legacy .gp-header li { margin: 0 !important; line-height: inherit !important; }

/* Header chrome only — footer.css now owns the footer's own resets.
   Kill the parent's `a:hover { text-decoration: underline }` leak
   on the header. text-align reset handles per-page rules
   like body.page-id-485 / 5195 { text-align: center } that inherit
   into the chrome. */
body.gp-legacy .gp-header { text-align: left !important; }
body.gp-legacy .gp-header a,
body.gp-legacy .gp-header a:hover,
body.gp-legacy .gp-header a:focus { text-decoration: none !important; }

/* Bootstrap heading sizes are very different from ours — let
   inner-page headings inherit the parent's intent but in our type.
   Scope to #gp-main so .gp-footer__heading (h4) keeps its own
   mono+gold style. */
body.gp-legacy #gp-main h1, body.gp-legacy #gp-main h2, body.gp-legacy #gp-main h3 {
    font-family: var(--gp-font-display);
}
/* Body copy that authors mis-tagged as <h5>/<h6> in the legacy CMS
   should read as paragraph text. Scoped to #gp-main only — never
   touch chrome headings. */
body.gp-legacy #gp-main h4, body.gp-legacy #gp-main h5, body.gp-legacy #gp-main h6 {
    font-family: var(--gp-font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Strip border-radius from Bootstrap-default rounded chrome */
.btn, .btn-yellow, .navbar, .form-control, .input-append, .well {
    border-radius: 0 !important;
}

/* .btn-yellow — parent's primary CTA. Restyle to match gp-btn--primary
   so the "Sign up Now" overlays etc. are legible on dark surface. */
body.gp-legacy a.btn-yellow,
body.gp-legacy .btn-yellow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    background: var(--gp-gold) !important;
    color: var(--gp-text-on-gold) !important;
    border: 0 !important;
    font-family: var(--gp-font-display) !important;
    font-size: 18px !important;
    letter-spacing: var(--gp-ls-nav) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.gp-legacy a.btn-yellow:hover,
body.gp-legacy .btn-yellow:hover {
    background: var(--gp-gold-deep) !important;
    color: var(--gp-text-on-gold) !important;
}

/* Bootstrap link color (blue) → brand gold. Scope to content only —
   the header (.gp-header) and footer (.gp-footer) own their own link
   colors and shouldn't be repainted. */
body.gp-legacy #gp-main a:not(.btn):not(.gp-btn) {
    color: var(--gp-gold);
}
body.gp-legacy #gp-main a:not(.btn):not(.gp-btn):hover {
    color: var(--gp-gold-deep);
}

/* The parent's content area — give it our page gutter so it doesn't
   hug the viewport edge inside our shell. Top padding is intentionally
   small so the page chrome (gp-header) flows straight into content
   without a dead-space band. Pages that need more breathing room can
   set their own padding-top below. */
body.gp-legacy #gp-main {
    padding: var(--gp-space-4) var(--gp-page-gutter) var(--gp-space-9);
    min-height: 60vh;
}
/* The site-wide cover gallery + the footer's preceding section-rule
   need to render at viewport width, but on gp-legacy pages they sit
   inside #gp-main's gutter-padding above and end up narrower than on
   non-legacy pages where #gp-main has no padding. Negative-margin to
   restore viewport width; .gp-covers has its own internal gutter. */
body.gp-legacy #gp-main .gp-covers {
    margin-left: calc(-1 * var(--gp-page-gutter)) !important;
    margin-right: calc(-1 * var(--gp-page-gutter)) !important;
}

/* Same `body.page-id-* { text-align: center }` cascade reaches into the
   footer newsletter input — its placeholder + value end up centered
   inside the field. Footer.css already locks .gp-footer text-align,
   but the input element has its own text-align that wins inheritance. */
.gp-footer input,
.gp-footer .gp-newsletter__input,
.gp-footer .gp-newsletter__form,
body.gp-legacy .gp-footer,
body.gp-legacy .gp-footer * {
    text-align: left !important;
}
body.gp-legacy #gp-main > .container-fluid,
body.gp-legacy #gp-main > .container {
    padding: 0;
}

/* Hide the parent's right-column sidebar (#sidebar1) on every legacy
   page — none of the legacy pages were actually using it for navigation,
   it just inherits the parent theme's "every page has a sidebar" pattern.
   Make #main fill the full row when the sidebar is removed. */
body.gp-legacy #sidebar1,
body.gp-legacy .fluid-sidebar { display: none !important; }
body.gp-legacy #main.span8,
body.gp-legacy #main.span9 {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
}

/* The parent often has a top-bar (`#top-bar`) and a hero (`.fly-header`)
   that we don't want — they're parts of the OLD chrome that the parent
   header.php would have provided. Hide if they leak in. */
#top-bar, .fly-header, #inner-header > .navbar,
#wrapper > #inner-header, .navbar-fixed-top,
.scroll-to-top, .popup-background:empty { display: none !important; }

/* The parent's "fly-header" hero block adds 200-400px of dead space at
   the top of every page — strip it. */
body.gp-legacy .fly-header,
body.gp-legacy .fly-header * { display: none !important; height: 0 !important; }

/* About Greg / parent page templates use Bootstrap's row/span12 grid.
   Constrain text columns to a readable max width inside our gutter. */
body.gp-legacy #content,
body.gp-legacy .single-video-main,
body.gp-legacy article.page,
body.gp-legacy article.single-page {
    max-width: var(--gp-container-max);
    margin-inline: auto;
}
body.gp-legacy article.page,
body.gp-legacy article.single-page,
body.gp-legacy .single-video-main {
    background: transparent !important;
    color: var(--gp-text);
}
body.gp-legacy article.page p,
body.gp-legacy .single-video__content p,
body.gp-legacy .post_content p {
    font-family: var(--gp-font-body);
    font-size: var(--gp-fs-body);
    line-height: var(--gp-lh-body);
    color: var(--gp-text-dim);
    max-width: 760px;
    margin: 0 0 1em;
}
body.gp-legacy #gp-main h1, body.gp-legacy #gp-main h2, body.gp-legacy #gp-main h3,
body.gp-legacy #gp-main h4, body.gp-legacy #gp-main h5, body.gp-legacy #gp-main h6 {
    color: var(--gp-text);
}
body.gp-legacy .single-title,
body.gp-legacy .page-title,
body.gp-legacy .entry-title,
body.gp-legacy h1.tk-proxima-nova {
    font-family: var(--gp-font-display);
    font-size: var(--gp-fs-h2);
    letter-spacing: var(--gp-ls-display-normal);
    text-transform: uppercase;
    line-height: 1;
    color: var(--gp-text);
    margin: 0 0 var(--gp-space-6);
}
/* Parent uses Adobe TypeKit "tk-proxima-nova" class on many headings —
   force our display font (the TypeKit subscription is expired anyway). */
body.gp-legacy .tk-proxima-nova,
body.gp-legacy [class*="tk-"] {
    font-family: var(--gp-font-display) !important;
}

/* Bootstrap images get arbitrary sizes — constrain inside content */
body.gp-legacy article img,
body.gp-legacy .single-video__content img {
    max-width: 100%;
    height: auto;
}

/* PED/Plittionary page — accordion + exercise rows; tighten typography */
body.gp-legacy .accordion-heading a,
body.gp-legacy .accordion-group {
    color: var(--gp-text);
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
}
body.gp-legacy .accordion-heading a {
    font-family: var(--gp-font-display);
    font-size: var(--gp-fs-card);
    letter-spacing: var(--gp-ls-display-wide);
    padding: 12px 18px;
    text-decoration: none;
}

/* ── Testimonials page (page-id-1491) ────────────────────────────── */

body.page-id-1491 .gp-testimonials-head { margin: 0 0 var(--gp-section-py-xs); }
body.page-id-1491 .gp-testimonials-head__eyebrow {
    font-family: var(--gp-font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height: 1;
}
body.page-id-1491 .gp-testimonials-head__title {
    font-family: var(--gp-font-display);
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: var(--gp-ls-display-tight);
    text-transform: uppercase;
    color: var(--gp-text);
    margin: 0;
}
body.page-id-1491 .gp-testimonials-head__title-accent { color: var(--gp-gold); }

/* Hide the legacy article-level page-header h1 since the new top
   header replaces it */
body.page-id-1491 article .page-header,
body.page-id-1491 .archive_title { display: none !important; }

/* Intro paragraph treated as an editorial pull-quote */
body.page-id-1491 .page-introduction {
    margin: 0 0 var(--gp-section-py-xs) !important;
}
body.page-id-1491 .page-introduction .lead {
    font-family: var(--gp-font-body) !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: var(--gp-text-dim) !important;
    text-align: left !important;
    background: var(--gp-surface);
    border-left: 3px solid var(--gp-gold);
    padding: var(--gp-space-6) var(--gp-space-7) !important;
    margin: 0 0 var(--gp-space-5) !important;
    max-width: none;
    font-style: normal !important;
}
body.page-id-1491 .page-introduction p {
    font-family: var(--gp-font-body) !important;
    color: var(--gp-text-dim) !important;
    font-style: normal !important;
}

/* JW Player container — script is dequeued globally so the player
   never inits and 'Loading the player...' shows forever. Hide that
   text and replace the block with a 16:9 dark surface that says the
   video is members-only. The script tag below it is harmless. */
body.page-id-1491 .shortcodeVideoPlayer {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gp-surface) center/cover no-repeat;
    border: 1px solid var(--gp-border);
    margin: 0 0 var(--gp-space-6);
    overflow: hidden;
    text-indent: -9999px;
    color: transparent;
}
body.page-id-1491 .shortcodeVideoPlayer::before {
    content: "MEMBERS-ONLY VIDEO";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    color: var(--gp-text);
    font-family: var(--gp-font-display);
    font-size: 24px;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, rgba(5,5,5,0.6), rgba(5,5,5,0.95));
    z-index: 1;
}
body.page-id-1491 .shortcodeVideoPlayer > div { display: none !important; }


/* PED page (template-ped-page) tightens vertical rhythm. The parent
   template wraps everything in a wallpaper-bg <div style="background:
   url(bg-wod.png)..."> + a .container-fluid that pushes content down
   AND tints the background gray. Force everything dark + zero pad. */
body.page-template-template-ped-page-php #gp-main {
    padding-top: var(--gp-section-py) !important;   /* 90px breathing room from gp-header */
    background: var(--gp-bg) !important;
}
body.page-template-template-ped-page-php #gp-main > div[style*="bg-wod"] {
    background: var(--gp-bg) !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.page-template-template-ped-page-php #gp-main > div[style*="bg-wod"] > .container-fluid,
body.page-template-template-ped-page-php #gp-main .container-fluid {
    background: var(--gp-bg) !important;
    padding: 0 !important;
}

/* Hide the inline icon that the cssmenu library / wp-ulike plugin
   injects next to the count. Nuke any svg/img/i/button inside the
   anchor — only the text node should remain. */
body.page-template-template-ped-page-php #cssmenu .cat-item img,
body.page-template-template-ped-page-php #cssmenu .cat-item svg,
body.page-template-template-ped-page-php #cssmenu .cat-item i,
body.page-template-template-ped-page-php #cssmenu .cat-item button,
body.page-template-template-ped-page-php #cssmenu .wp_ulike_general_class,
body.page-template-template-ped-page-php #cssmenu .wpulike,
body.page-template-template-ped-page-php #cssmenu [class*="ulike"],
body.page-template-template-ped-page-php #cssmenu .cat-item .nano-pane { display: none !important; }

/* Strip the parent's nested-pill chrome on category buttons:
   #cssmenu > ul > li > a has border + radius (outer pill)
   #cssmenu > ul > li > a > span has its own border + radius (inner pill)
   Both render as little outlined boxes inside our flat row treatment. */
body.page-template-template-ped-page-php #cssmenu > ul > li > a,
body.page-template-template-ped-page-php #cssmenu > ul > li > a > span {
    border: 0 !important;
    border-radius: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    display: inline !important;
}
/* Re-add row padding directly to the anchor (we just stripped it) */
body.page-template-template-ped-page-php #cssmenu > ul > li > a {
    display: flex !important;
    padding: 14px 16px !important;
}
/* PED page header: collapse to a small one-line band. The title is a
   utility label, not a hero — keep it inline-small so the chrome
   doesn't dominate the page. */
body.page-template-template-ped-page-php #gp-main > div[style*="bg-wod"] {
    margin-top: 0 !important;
}
/* PED page-header mirrors the site's .gp-index__header pattern: small
   gold mono eyebrow, then big Bebas display title with a gold accent,
   then a body-font intro paragraph. The parent template only renders
   one <h1>, so the eyebrow + intro are pseudo-element content. */
body.page-template-template-ped-page-php .page-header {
    margin: 0 0 var(--gp-space-7) !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    position: relative;
}
body.page-template-template-ped-page-php .page-header::before {
    content: "PLITTIONARY · EXERCISE LIBRARY";
    display: block;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height: 1;
}
body.page-template-template-ped-page-php .page-header .page-title {
    font-family: var(--gp-font-display) !important;
    font-size: clamp(40px, 6vw, 88px) !important;
    line-height: 0.95 !important;
    font-weight: 400 !important;
    letter-spacing: var(--gp-ls-display-tight) !important;
    text-transform: uppercase !important;
    color: var(--gp-text) !important;
    margin: 0 0 var(--gp-space-5) !important;
    font-style: normal !important;
    white-space: normal !important;
    /* Two-line treatment via inline accent — replace the - in the title
       with a line break + gold "OF EXERCISES." span. Done with CSS by
       hiding the single-line text and rendering custom content. */
    font-size: 0 !important;
}
body.page-template-template-ped-page-php .page-header .page-title::before {
    content: "DICTIONARY";
    display: block;
    font-family: var(--gp-font-display);
    font-size: clamp(40px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: var(--gp-ls-display-tight);
    color: var(--gp-text);
    text-transform: uppercase;
}
body.page-template-template-ped-page-php .page-header .page-title::after {
    content: "OF EXERCISES.";
    display: block;
    font-family: var(--gp-font-display);
    font-size: clamp(40px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: var(--gp-ls-display-tight);
    color: var(--gp-gold);
    text-transform: uppercase;
}

/* Widen the PED content row — parent template uses .span4 sidebar +
   .span5 main = 9/12 columns, wasting 25% of the row. Force full-width
   container and a flex row so sidebar and main sit side-by-side. */
body.page-template-template-ped-page-php #gp-main > div[style*="bg-wod"],
body.page-template-template-ped-page-php #gp-main > div[style*="bg-wod"] > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding: 0 var(--gp-page-gutter) !important;
    margin: 0 !important;
    box-sizing: border-box;
}
/* Override Bootstrap .row-fluid (table/clearfix) with a real flex row */
body.page-template-template-ped-page-php #content.row-fluid {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--gp-space-6);
    width: 100% !important;
    margin: 0 !important;
}
body.page-template-template-ped-page-php #content.row-fluid::before,
body.page-template-template-ped-page-php #content.row-fluid::after { content: none !important; }
body.page-template-template-ped-page-php .category-sidebar.span4 {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 !important;
    float: none !important;
}
body.page-template-template-ped-page-php #main.span5,
body.page-template-template-ped-page-php #main.jquery-sticky-column-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0;
}
/* Strip the wallpaper background image at the very top of PED — the
   template wraps everything in a div with background:url(bg-wod.png)
   that competes with our dark chrome. */
body.page-template-template-ped-page-php #gp-main > div[style*="bg-wod"] {
    background: transparent !important;
}
/* The .page-header bordered band with the giant title — tighten + restyle */
body.gp-legacy .page-header {
    padding-bottom: var(--gp-space-3);
    margin: 0 0 var(--gp-space-5);
    border-bottom: 1px solid var(--gp-border);
}
body.gp-legacy .page-header h1.page-title,
body.gp-legacy .page-header h2 {
    font-family: var(--gp-font-display);
    font-size: var(--gp-fs-h2);
    font-weight: 400;
    letter-spacing: var(--gp-ls-display-normal);
    text-transform: uppercase;
    line-height: 1;
    color: var(--gp-text);
    margin: 0;
}
body.gp-legacy .page-header h2 .muted {
    color: var(--gp-text-dim);
    font-style: normal;
}

/* PED sidebar — flat hard-edged list in the Performance system. */
body.page-template-template-ped-page-php #cssmenu ul,
body.page-template-template-ped-page-php #cssmenu li {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.page-template-template-ped-page-php #cssmenu {
    background: transparent;
    border: 0;
}
body.page-template-template-ped-page-php #cssmenu > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-family: var(--gp-font-display);
    font-size: 17px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--gp-text);
    background: var(--gp-surface);
    border: 0;
    border-bottom: 1px solid var(--gp-border);
    text-decoration: none;
    line-height: 1;
}
body.page-template-template-ped-page-php #cssmenu > ul > li:first-child > a {
    border-top: 1px solid var(--gp-border);
}
body.page-template-template-ped-page-php #cssmenu > ul > li > a::after {
    content: "+";
    font-family: var(--gp-font-mono);
    font-size: 16px;
    color: var(--gp-text-muted);
    font-weight: 400;
    transition: transform var(--gp-dur-base) var(--gp-ease-out),
                color var(--gp-dur-base) var(--gp-ease-out);
}
body.page-template-template-ped-page-php #cssmenu > ul > li.active > a::after {
    content: "−";
    color: var(--gp-text-on-gold);
}
/* The .children scroll container itself — parent CSS gives it a
   fixed 95px height. Force dark surface so the dim-white sub-items
   are legible (otherwise white-on-white blank panel). */
body.page-template-template-ped-page-php #cssmenu ul.children {
    background: var(--gp-bg) !important;
    border: 1px solid var(--gp-border);
    border-top: 0;
    height: 180px !important;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
body.page-template-template-ped-page-php #cssmenu ul.children li {
    list-style: none;
}
body.page-template-template-ped-page-php #cssmenu ul.children li a {
    display: block;
    padding: 6px 14px 6px 28px;
    font-family: var(--gp-font-body);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gp-text);
    background: transparent;
    border: 0;
}
body.page-template-template-ped-page-php #cssmenu ul.children li a:hover {
    color: var(--gp-gold);
    background: rgba(255, 186, 0, 0.06);
}
/* Before / After photos area */
body.page-template-template-ped-page-php .figrue,
body.page-template-template-ped-page-php .figure-img {
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
}
body.page-template-template-ped-page-php .description-wrapper {
    color: var(--gp-text);
    font-family: var(--gp-font-body);
}

/* WooCommerce graceful fallback — when WC isn't active, the /shop/ page
   renders bare. Show a clean message instead of empty page. */
body.gp-legacy .woocommerce-info,
body.gp-legacy .woocommerce-message,
body.gp-legacy .woocommerce-error {
    background: var(--gp-surface) !important;
    color: var(--gp-text) !important;
    border-left: 4px solid var(--gp-gold) !important;
    padding: 18px 22px !important;
    font-family: var(--gp-font-body);
}

/* Body Map page-specific — pure-black background since the body map
   image itself has a black background and any other tone shows seams.
   The page uses page-template-default (NOT a custom template) so
   target by page-id (485 on both subsites) AND the body-map container
   id for safety regardless of body class. */
body.page-id-485,
body.page-id-485 #gp-main,
body.page-id-485 #interactive_body_map,
body.page-id-485 #map_wrapper,
body[class*="interactive-body-map"],
body[class*="interactive-body-map"] #gp-main,
body[class*="interactive-body-map"] #interactive_body_map,
body[class*="interactive-body-map"] #map_wrapper {
    background-color: #000 !important;
}
/* Body map page — full-design header injected via JS (functions.php),
   sits above the 980x687 anatomy graphic. Mirrors .gp-index__header. */
body.page-id-485 #gp-main {
    padding: var(--gp-space-7) var(--gp-page-gutter) var(--gp-space-9) !important;
    background: #000 !important;
}
body.page-id-485 .gp-bodymap-head {
    margin: 0 0 var(--gp-space-7);
    max-width: 100%;
}
body.page-id-485 .gp-bodymap-head__eyebrow {
    font-family: var(--gp-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height: 1;
}
body.page-id-485 .gp-bodymap-head__title {
    font-family: var(--gp-font-display);
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: var(--gp-ls-display-tight);
    text-transform: uppercase;
    color: var(--gp-text);
    margin: 0 0 var(--gp-space-5);
}
body.page-id-485 .gp-bodymap-head__title-accent { color: var(--gp-gold); }
body.page-id-485 .gp-bodymap-head__intro {
    font-family: var(--gp-font-body);
    font-size: var(--gp-fs-body);
    line-height: var(--gp-lh-body);
    color: var(--gp-text-dim);
    max-width: 640px;
    margin: 0;
}
body.page-id-485 #interactive_body_map {
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Teaser overlays (parent's "Members only" panels). Parent CSS gives
   them position:absolute with z-index:1000 — but no positioned
   ancestor, so they default to <body> and cover the whole viewport.
   Cap z-index below the sticky header (z:100), and force the nearest
   logical ancestor to position:relative so the overlay is constrained
   to the calendar/video tile it's teasing.
   #calendars-wrapper = transformation calendar
   #video-teaser-wrapper-* parent = single video / WOD page */
body.gp-legacy .video-teaser-wrapper,
body.gp-legacy #calendar-teaser-wrapper {
    color: var(--gp-text);
    z-index: 50 !important;
}
body.gp-legacy #calendars-wrapper,
body.gp-legacy #calendar-inner,
body.gp-legacy .videos-wrapper,
body.gp-legacy .video-section {
    position: relative !important;
}
body.gp-legacy .video-teaser-wrapper h2,
body.gp-legacy #calendar-teaser-wrapper h2,
body.gp-legacy .video-teaser-inner h2 {
    color: var(--gp-text);
    font-family: var(--gp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--gp-ls-display-normal);
}

/* Calendar page — links inside calendar cells need legible color */
body.gp-legacy .calendar-wrapper a,
body.gp-legacy .calendar-day a,
body.gp-legacy table.calendar a {
    color: var(--gp-gold);
    text-decoration: none;
}
body.gp-legacy .calendar-wrapper a:hover,
body.gp-legacy .calendar-day a:hover,
body.gp-legacy table.calendar a:hover { color: var(--gp-gold-deep); }
/* Calendar cell day numbers + body text */
body.gp-legacy .calendar-wrapper, body.gp-legacy .calendar-wrapper td,
body.gp-legacy .calendar-wrapper th, body.gp-legacy table.calendar td,
body.gp-legacy table.calendar th { color: var(--gp-text); }

/* ── PED — categories + exercise list + scrollbar + content ──────── */

/* Category buttons: hover/active state changes typography */
body.page-template-template-ped-page-php #cssmenu > ul > li > a {
    transition: background var(--gp-dur-base) var(--gp-ease-out),
                color var(--gp-dur-base) var(--gp-ease-out),
                letter-spacing var(--gp-dur-base) var(--gp-ease-out);
}
body.page-template-template-ped-page-php #cssmenu > ul > li > a:hover {
    background: rgba(255, 186, 0, 0.08) !important;
    color: var(--gp-gold) !important;
    letter-spacing: 0.10em !important;
}
body.page-template-template-ped-page-php #cssmenu > ul > li.active > a,
body.page-template-template-ped-page-php #cssmenu > ul > li > a.active {
    background: var(--gp-gold) !important;
    color: var(--gp-text-on-gold) !important;
    font-weight: 500 !important;
    letter-spacing: 0.10em !important;
}

/* Sub-item (exercise) selected state */
body.page-template-template-ped-page-php #cssmenu ul.children li a {
    transition: background var(--gp-dur-base) var(--gp-ease-out),
                color var(--gp-dur-base) var(--gp-ease-out);
    border-left: 2px solid transparent;
}
body.page-template-template-ped-page-php #cssmenu ul.children li.active > a,
body.page-template-template-ped-page-php #cssmenu ul.children li a.active,
body.page-template-template-ped-page-php #cssmenu ul.children li.gp-current > a {
    background: rgba(255, 186, 0, 0.15) !important;
    color: var(--gp-gold) !important;
    border-left-color: var(--gp-gold);
    font-weight: 600;
}

/* nano scrollbar overlay (legacy plugin) — base.css handles the
   browser scrollbar; this only restyles the nano plugin's overlay. */
body.page-template-template-ped-page-php .nano > .nano-pane {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 0 !important;
}
body.page-template-template-ped-page-php .nano > .nano-pane > .nano-slider {
    background: var(--gp-gold) !important;
    border-radius: 0 !important;
}

/* ── Content panel: exercise title + start/finish picture frames ── */

/* Exercise title — eyebrow above + clean Bebas display */
body.page-template-template-ped-page-php #main h2.title {
    font-family: var(--gp-font-display) !important;
    font-size: clamp(28px, 3vw, 44px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--gp-text) !important;
    text-align: left !important;
    padding: 0 0 16px !important;
    margin: 0 0 var(--gp-space-5) !important;
    border-bottom: 1px solid var(--gp-border);
    position: relative;
}
body.page-template-template-ped-page-php #main h2.title::before {
    content: "EXERCISE";
    display: block;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    margin-bottom: 8px;
    line-height: 1;
}

/* Video panel — dark surface, hard edges, sized to match picture frames */
body.page-template-template-ped-page-php #main > div:has(> .videos-wrapper),
body.page-template-template-ped-page-php #main #accordion-load > div:has(.videos-wrapper) {
    background: transparent !important;
}
body.page-template-template-ped-page-php #main .videos-wrapper,
body.page-template-template-ped-page-php #main .video-section {
    background: var(--gp-surface) !important;
    border: 1px solid var(--gp-border);
    margin: 0 0 var(--gp-space-5) !important;
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
    overflow: hidden;
}
body.page-template-template-ped-page-php #main .videos-wrapper > div[style] {
    background: transparent !important;
    width: 100%;
    height: 100%;
}
body.page-template-template-ped-page-php #main .videos-wrapper img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    opacity: 0.12;
    mix-blend-mode: lighten;
}

/* Member-only teaser overlay — fills the entire panel, content centered */
body.page-template-template-ped-page-php #main .video-teaser-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.95) 100%) !important;
    color: var(--gp-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}
body.page-template-template-ped-page-php #main .video-teaser-inner {
    text-align: center !important;
    padding: var(--gp-space-6) !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100%;
    max-width: 420px;
}
body.page-template-template-ped-page-php #main .video-teaser-inner h2 {
    font-family: var(--gp-font-display) !important;
    font-style: normal !important;
    font-size: 28px !important;
    letter-spacing: 0.06em !important;
    color: var(--gp-text) !important;
    text-transform: uppercase !important;
    margin: 0 0 var(--gp-space-5) !important;
    line-height: 1;
}
body.page-template-template-ped-page-php #main .video-teaser-inner .btn-yellow {
    margin: 0 !important;
}
body.page-template-template-ped-page-php #main .video-teaser-inner hr {
    display: none !important;
}

/* Start / Finish — turned into a single before/after compare panel.
   The two .figrue blocks stack via CSS grid where the second image is
   positioned over the first and clipped on hover/drag (CSS-only;
   the JS slider can come later). Uses :has() to target the wrapper
   div the AJAX response uses. */
body.page-template-template-ped-page-php #main #accordion-load > div:has(.figrue) {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    margin: 0 0 var(--gp-space-5) !important;
    overflow: hidden;
    display: block !important;
}
body.page-template-template-ped-page-php #main #accordion-load > div:has(.figrue)::before {
    content: "START";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    font-family: var(--gp-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-text);
    background: rgba(0,0,0,.6);
    padding: 4px 8px;
    pointer-events: none;
}
body.page-template-template-ped-page-php #main #accordion-load > div:has(.figrue)::after {
    content: "FINISH";
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    font-family: var(--gp-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    background: rgba(0,0,0,.6);
    padding: 4px 8px;
    pointer-events: none;
}
body.page-template-template-ped-page-php #main .figrue,
body.page-template-template-ped-page-php #main .figure-img {
    background: transparent !important;
    border: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: hidden;
}
/* Hide the parent's per-figure h3 labels — labels live on the wrapper now */
body.page-template-template-ped-page-php #main .figrue h3,
body.page-template-template-ped-page-php #main .figure-img h3 {
    display: none !important;
}
/* Second figure (FINISH) overlays first; clipped to right half by default,
   reveals more on hover via inset-clip animation */
body.page-template-template-ped-page-php #main .figrue:nth-of-type(2),
body.page-template-template-ped-page-php #main .figure-img:nth-of-type(2) {
    z-index: 2;
    clip-path: inset(0 0 0 50%);
    transition: clip-path 0.45s var(--gp-ease-out);
}
body.page-template-template-ped-page-php #main #accordion-load > div:has(.figrue):hover .figrue:nth-of-type(2),
body.page-template-template-ped-page-php #main #accordion-load > div:has(.figrue):hover .figure-img:nth-of-type(2) {
    clip-path: inset(0 0 0 0);
}
/* Vertical divider between START and FINISH */
body.page-template-template-ped-page-php #main #accordion-load > div:has(.figrue) > .figrue:nth-of-type(2)::after,
body.page-template-template-ped-page-php #main #accordion-load > div:has(.figrue) > .figure-img:nth-of-type(2)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--gp-gold);
    z-index: 5;
}
body.page-template-template-ped-page-php #main .figrue img,
body.page-template-template-ped-page-php #main .figure-img img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    background: #000;
    mix-blend-mode: lighten;
    opacity: 0.55;
}

/* Plittionary intro panel — the welcome description shown before any
   category is picked. Treated as an editorial pull-quote in the
   Performance system: mono eyebrow + body paragraph + gold rule. */
body.page-template-template-ped-page-php #accordion-load {
    color: var(--gp-text);
}
body.page-template-template-ped-page-php #main .description-wrapper,
body.page-template-template-ped-page-php #accordion-load > p,
body.page-template-template-ped-page-php #accordion-load h5 {
    font-family: var(--gp-font-body) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--gp-text-dim) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-left: 3px solid var(--gp-gold);
    padding: var(--gp-space-6) var(--gp-space-7) !important;
    margin: 0 0 var(--gp-space-5) !important;
    text-align: left !important;
    position: relative;
}
body.page-template-template-ped-page-php #accordion-load h5::before {
    content: "ABOUT THE PLITTIONARY";
    display: block;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    margin-bottom: 14px;
    text-transform: uppercase;
}
body.page-template-template-ped-page-php #accordion-load h5 strong {
    font-weight: 400 !important;
    color: var(--gp-text-dim) !important;
}

/* Parent's loop-magazines.php injects #magazines-wrapper at the bottom
   of single.php and a few other legacy templates. We now render the
   cover gallery site-wide via footer.php → template-parts/section/
   cover-gallery.php, so the legacy one is always a duplicate. */
#magazines-wrapper { display: none !important; }