/* ============================================================================
   general.css - global layer
   ----------------------------------------------------------------------------
   Created in Phase 1.5. The starter theme had no global token layer at all -
   only four header-scoped tokens at the top of header-footer.css.

   This file is deliberately small, and that is a decision worth stating.

   The skill's skeleton puts base typography (h1-h6, p, a) here. In this build
   it must not: home.css is generated from design.css by apply-assignment.py and
   already carries the design's typography, in the design's own cascade order
   (.el-h1 at 4.5rem, .shared-h2 at 2.625rem, and the #ffroot overrides below
   1200px). Declaring those sizes a second time here would create two sources of
   truth for the same value, and whichever won would be an accident of load
   order rather than a decision. The generated file is the 1:1 contract, so it
   keeps typography; this file carries only what it cannot: the font faces, the
   palette, and the root the rem sizes are measured against.

   For the same reason there is no .md-container and no .md-btn. The design
   already ships its own container (.w1146 + .pad) and its own button
   (.btn-blue), both harvested into home.css. Inventing a second one would be
   creating what already exists.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Fonts */
/* Figtree is a variable font: the design's 400, 500, 600 and 700 all resolve to
   one file per unicode-range, so four weights cost two requests, not eight.
   Self-hosted - the export loaded these from the Google CDN, which is a
   render-blocking third-party request and not allowed in the theme. */

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------- 2. Tokens */
/* The export defined exactly one custom property (--ff-ease, which stays in
   home.css where the harvest put it). Everything else was an inline hex, so
   this palette is named here for the first time. Values are taken verbatim
   from design.css - the comment on each says where it is used and how often,
   so a later edit can tell a brand colour from a one-off. */

:root {
    /* Ink and paper */
    --md-white:      #FFFFFF;  /* x39 */
    --md-ink:        #101010;  /* x21 - body text */
    --md-ink-soft:   #2A2A2A;  /* x5  */
    --md-ink-muted:  #3A3A3A;  /* x6  */

    /* Brand cyan - the design uses four near-identical tints */
    --md-cyan:       #6BD1F4;  /* x5 - nav hover, accents */
    --md-cyan-link:  #3BB9E4;  /* x1 - a:hover */
    --md-cyan-mid:   #4FBFEA;  /* x1 */
    --md-cyan-deep:  #1D9AD0;  /* x1 */

    /* Dark sections */
    --md-dark:       #0D1F26;  /* x3 - coverage background */
    --md-dark-deep:  #12181D;  /* x1 */
    --md-dark-slate: #22333B;  /* x1 */
    --md-dark-drop:  #0C1B20;  /* nav dropdown and mobile nav panel */

    /* Warm neutrals */
    --md-cream:      #FBF7F0;  /* x2 - benefit cells */
    --md-sand:       #F7F2EA;  /* x4 */
    --md-sand-mid:   #E6E3DC;  /* x5 */
    --md-sand-deep:  #E4E0D5;  /* x3 */

    /* Cool neutrals and lines */
    --md-line:       #C6D2D7;  /* x7 - borders */
    --md-line-alt:   #C9D2D6;  /* x3 */
    --md-grey-line:  #DDDDDD;  /* x2 - benefit bar gaps */
    --md-muted:      #5C6E75;  /* x3 - secondary text */
    --md-muted-soft: #A9B8BE;  /* x2 */

    /* Type */
    --md-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------- 3. The rem root */
/* bootstrap.css puts a 10px font-size on the root element. The harvest expressed
   every font-size in rem against a 16px root (manifest.json: rem_root_px 16.0),
   so left alone every size on the page renders at 62.5% - the hero h1 would come
   out 45px instead of 72px. Restated here explicitly rather than relying on the
   browser default, because the browser default is exactly what Bootstrap took
   away. general.css is enqueued after bootstrap.css so this wins on order. */

html {
    font-size: 16px;
}

/* Bootstrap's body rule also sets font-size: 14px and line-height: 1.428, which
   the design does not - measured against the export, its body computes to 16px
   and `normal`. Anything the design leaves unsized inherits from here, so these
   two are restated rather than left to whichever stylesheet happens to win. */
body {
    font-family: var(--md-font);
    font-size: 1rem;
    line-height: normal;
    color: var(--md-ink);
}

img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------- 4. The design's box model */
/* The export declares no global box-sizing, so it is a content-box document -
   and it opts into border-box in exactly two places (the before/after card and
   the mobile header bar), which is the signature of one. bootstrap.css sets
   border-box on the root and has everything inherit it, so every harvested
   width and max-width came out short by its own padding: .hero-copy measured
   860px against the design's 1044, and the h1 wrapped onto a fourth line.

   Scoped to #ffroot, the design's own root, so the rest of the theme keeps
   Bootstrap's border-box. Written with :where() so it carries no specificity
   and the design's two explicit border-box rules still win. */
:where(#ffroot, #ffroot *, #ffroot *::before, #ffroot *::after) {
    box-sizing: content-box;
}

/* ------------------------------------------- 5. Bootstrap's clearfix vs flex */
/* The design's header nav carries the class `nav`, which Bootstrap also uses -
   and Bootstrap gives `.nav` a float clearfix: `content: " "` on ::before and
   ::after. In a float layout those are invisible. In a flex row they are two
   extra flex items, and `.el-nav` has `gap: 44px`, so the nav came out 88px
   wider than the design for two elements nobody can see.

   `nav` is the design's own hook and several 1200px rules target it, so the
   class stays and the clearfix goes. Of the eighteen Bootstrap classes that
   inject this pair, `nav` is the only one the design uses. */
#ffroot .nav::before,
#ffroot .nav::after {
    content: none;
}

/* ------------------------------------------------- 6. Buttons as design elements */
/* The export hangs onClick on plain <div>s, so its accordion and carousel triggers
   carry no button styling to override. We render them as real <button>s - the
   skill requires aria-expanded/aria-controls on an accordion trigger, and that
   belongs on a focusable control, not a div with a role bolted on.

   A <button> then arrives with the UA's own background, outset border, padding,
   13px Arial and centred text, none of which the harvested rules undo: the
   coverage accordion header rendered as a grey 240px box on a dark section
   instead of a full-width flex row. This strips the chrome so a button carries
   only what the design gives it. Scoped to #ffroot, and written as an element
   selector so every harvested class rule still wins. */
/* `:where()` keeps this at the weight of a bare `button`, so it beats the UA but
   loses to every harvested class. Written as `#ffroot button` it outranked them
   instead, and its `padding: 0` ate the design's own padding on the trainer
   card's See More row - 32px tall against the export's 54. */
:where(#ffroot) button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

/* A button is shrink-to-fit even as a flex container, where the div it replaced
   filled its parent. Only the triggers the design drew full width need this. */
:where(#ffroot) .shared-div-13 {
    width: 100%;
}

/* ------------------------------------------------------ 8. hidden, and flex */
/* `[hidden]` is a UA rule, so any class that sets `display` silently defeats it -
   and the design sets `display: flex` on exactly the rows we hide: a trainer's
   extra skills stayed visible and every card came out 68px too tall.

   `!important` here, and it is the one place in this build that has it. The
   alternative is losing on specificity again: `#ffroot [hidden]` is id + attribute,
   and an inner screen's section rules are id + class, which ties - and ties go to
   the later stylesheet, which is always the section. Every scoped section added
   from here on would re-open the bug, one section at a time, and each time it would
   look like a content problem rather than a cascade one.

   This is not a style competing with other styles. `hidden` is a state: the element
   is not there. Nothing should ever win against it, which is exactly what
   `!important` says. */
#ffroot [hidden] {
    display: none !important;
}

/* ------------------------------- 9. Laptop widths the design never faced */
/* The export is a fixed 1920 canvas scaled down between 1200 and 1920, so it
   never has to fit its desktop header into a narrower box - at 1440 it simply
   draws the 1920 layout at 0.75. This theme reflows instead (the deviation the
   mapping documents), and that is where these two break.

   Both fixes reuse values the design already uses elsewhere rather than
   inventing new ones. */

/* The one-row header needs 1517px at the design's own sizes: 64 padding + 201
   logo + 40 gap + 762 nav + 40 gap + 410 phone. Below that something has to
   give, and the design's answer - dropping the nav onto its own full-width row -
   is not usable here: `.el-header` is a fixed 91px, so that row lands outside
   the bar and the links sit on the hero.

   So the row is kept and its parts are tightened instead, in two steps, easing
   back to the design's values as the width allows. Nothing here changes above
   1520px. */
@media (min-width: 1201px) and (max-width: 1520px) {
    #ffroot .hdr {
        flex-wrap: nowrap;
        gap: 20px;
        padding-left: 28px;
    }

    /* 0.75rem, not the 0.875rem this band carried at first, and the number comes
       from the design rather than from what fitted: the export scales this whole
       band by `vw / 1920`, so its 15px nav renders at 11.9px across the top of
       the band and 11.25px at 1440. 12px is that, held flat, because only the
       nav is being scaled here and not the page around it. Above 1520 the scale
       is gone and so is this rule - the nav is the design's own 15px again. */
    #ffroot .hdr .nav {
        order: 0;
        width: auto;
        flex-wrap: nowrap;
        gap: 20px;
        font-size: 0.75rem;
    }

    #ffroot .hdr .logo {
        height: 38px;
    }

    /* The phone block follows the nav down by the same ratio: 17px scaled by the
       band is 13.5px at 1520 and 12.75px at 1440, so 13px. Its own padding can
       ease back now that the row has the width. */
    #ffroot .hdr .phoneblk {
        padding-left: 24px;
        padding-right: 24px;
    }

    #ffroot .hdr .phoneblk .el-div-38 {
        font-size: 0.8125rem;
    }
}

/* Tighter still between the mobile breakpoint and 1200, where the design itself
   has already given up on one row. The phone label goes and the number stays:
   the number is the point of the block, the words in front of it are not. */
@media (min-width: 992px) and (max-width: 1200px) {
    #ffroot .hdr {
        flex-wrap: nowrap;
        gap: 14px;
        padding-left: 24px;
        padding-right: 0;
    }

    #ffroot .hdr .nav {
        order: 0;
        width: auto;
        flex-wrap: nowrap;
        gap: 16px;
        font-size: 0.8125rem;
    }

    #ffroot .hdr .logo {
        height: 32px;
    }

    #ffroot .hdr .phoneblk {
        padding-left: 20px;
        padding-right: 20px;
        gap: 10px;
    }

    #ffroot .hdr .phoneblk .el-div-38 {
        font-size: 0.9375rem;
    }

    #ffroot .hdr .md-phone-label {
        display: none;
    }
}

/* ------------------------------------------- The header's solid background */
/* `.el-header` carries the translucent bar the design uses over a hero photo -
   rgba(10,14,17,0.30) with a hairline under it. On a screen whose first section
   is not a photo band the design draws the same bar solid, #0D1F26, and drops
   the hairline: there is nothing behind it for the translucency to reveal, and
   the line would be drawing the edge of nothing.

   Taken from contact.html and trainer-silvia.html, which are the two screens the
   handoff ships in that state; every other screen's header sits inside its hero.
   `section/site-header.php` adds the class when header.php renders it, which is
   precisely when no hero does. */
#ffroot .hdr.hdr-solid {
    background: #0D1F26;
    border-bottom: 0;
}

/* A nav label should never break inside itself, at any width. */
#ffroot .hdr .nav a {
    white-space: nowrap;
}

/* Every menu label is uppercase in the design, dropdown links included, so the
   case comes from here and not from however an item is titled in wp-admin. */
#ffroot .hdr .nav a,
#ffroot .md-navdrop__link {
    text-transform: uppercase;
}

/* The design sets the hero h1 to 5.625rem (90px) between 1201 and 1440 - larger
   than the 4.5rem it uses above 1440, which only makes sense because the export
   scales that band down. Unscaled, 90px needs 849px for "Your Personal
   Trainer." against the h1's own 760px max-width, so the last line wraps. Held
   at the design's own desktop size, which fits on one line. */
@media (min-width: 1201px) and (max-width: 1520px) {
    #ffroot .hero-copy h1 {
        font-size: 4.5rem;
    }
}

/* --------------------------------------------- 10. Trainer cards open alone */
/* The design's grid is `align-items: stretch`, so every card in a row grows to
   the tallest: opening one trainer's See More grew all three beside it. That is
   the export's behaviour too - verified against it - but it reads as all three
   cards opening at once, and is not what was wanted.

   `start` lets each card size to its own content, so only the clicked one
   grows. The cost is 34px of raggedness at rest where a trainer has five skills
   instead of six, which is less movement than the alternative of releasing
   stretch only while a card is open - that would shrink the neighbours by the
   same 34px on every click. Documented as a deviation in mapping-index.md. */
/* `[class]` is there for weight, not for matching - every grid has a class. The
   rule has to beat an inner screen's own `#md-trainers-team .trainers-grid`, which
   is also id + class and, being in the later stylesheet, wins the tie. With the
   attribute it is id + class + attribute and settles it. The homepage does not need
   it (home.css writes a bare class) but gets the same rule either way. */
#ffroot .trainers-grid[class] {
    align-items: start;
}

/* The even row is restored by a floor, not by stretch: team.js measures the
   tallest card while every card is closed and publishes it here. Falls back to
   the design's own resting height so the cards are still even if the script
   never runs. */
#ffroot .trainers-grid[class] .trainer-card {
    min-height: var(--md-trainer-min, 0);
}

/* ----------------------------------- 11. The mobile breakpoint moves to 991px */
/* The design switches to the burger at 768px. Between 769 and 991 that leaves a
   full nav in a header too narrow to hold it comfortably, so the switch happens
   at 991 instead - which is also where the starter theme has always put its own
   mobile menu. The rules below are the design's own 768px header treatment,
   lifted to the wider band; the design's copies still apply underneath it. */
@media (min-width: 769px) and (max-width: 991px) {
    #ffroot .hdr {
        padding: 16px 20px;
        align-items: center;
        height: 64px;
        box-sizing: border-box;
        flex-wrap: nowrap;
        gap: 16px;
    }

    #ffroot .hdr > * {
        height: 32px;
        max-height: 32px;
        padding-top: 0;
        padding-bottom: 0;
        align-self: center;
    }

    #ffroot .hdr .nav,
    #ffroot .hdr .phoneblk {
        display: none;
    }

    #ffroot .hdr .burger {
        display: flex;
        width: 36px;
        height: 32px;
        max-height: 32px;
        gap: 6px;
    }

    #ffroot .hdr .burger span {
        width: 30px;
        height: 2.5px;
    }

    #ffroot .hdr .logo {
        height: 32px;
    }
}

/* ------------------------------------------------------- 12. Mobile nav panel */
/* The design has no mobile menu. Below its own 768px breakpoint - 991px here -
   its CSS hides the nav and the phone
   block and shows the burger, and nothing brings them back - the export left the
   handler as an unevaluated {{ toggleNav }}, so there is no panel to harvest.

   The theme's own mobile menu could not be reused as-is either: it is written
   against `#primary-menu` / `.navbar-toggle` / `#md-collapse-menu`, and the design
   header replaced all of that markup, so those rules now match nothing. What is
   reused is its behaviour - a collapse panel the burger opens, links stacked - and
   The breakpoint is the theme's own 991px, which is the collision the Phase 0.5
   table flagged, now settled in the theme's favour.

   Every value below comes from the design's own header: --md-dark-drop is the
   phone block's hover background, the link colour and 0.06em tracking are
   .shared-a-3 and .el-nav, and 64px is the header's own height at this width.
   This is the one place in the build where CSS is authored rather than
   harvested, because it is the one place the design does not cover. */
@media (max-width: 991px) {
    #ffroot .hdr .nav[data-open="true"] {
        display: flex;
        flex-direction: column;
        /* The design caps every direct child of the header at 32px and leaves the
           nav wrapping, which is right for a row and wrong for a panel: the six
           links wrapped into columns inside a 32px box. */
        flex-wrap: nowrap;
        height: auto;
        max-height: none;
        align-items: flex-start;
        gap: 4px;
        /* Fixed, not absolute: the header renders inside the hero, and the hero
           is overflow:hidden at a fixed height, so an absolute panel was cut off
           at the hero's bottom edge - PROGRAMS alone is taller than the hero at
           this width. Fixed escapes that clip; header.js sets --md-nav-top to the
           header's bottom edge on open, and the panel scrolls within itself
           when its content is taller than the screen. */
        position: fixed;
        top: var(--md-nav-top, 64px);
        bottom: 0;
        /* The header centres its children (align-self: center), and a fixed box
           honours that: it shrank to its content and centred itself instead of
           filling top-to-bottom, which is what let it run off the screen. */
        align-self: stretch;
        left: 0;
        right: 0;
        width: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 18px 20px 24px;
        background: var(--md-dark-drop);
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        z-index: 3;
    }

    /* 13px, not 12: the row comes to 45px against the handoff's "hit targets
       >= 44px" on mobile. At 12 it was 43, and the submenu links 39. */
    #ffroot .hdr .nav[data-open="true"] a {
        display: block;
        width: 100%;
        padding: 13px 0;
        font-size: 1rem;
        letter-spacing: 0.06em;
    }

    /* The burger's two bars become a cross while the panel is open. The design
       ships a close icon (icon-close.svg) but only for the results carousel, at a
       different size and stroke, so the bars are rotated instead of swapping it. */
    #ffroot .hdr .burger[aria-expanded="true"] span:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    #ffroot .hdr .burger[aria-expanded="true"] span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    #ffroot .hdr .burger span {
        transition: transform 200ms var(--ff-ease);
    }
}

/* -------------------------------------------- 7. Heading line-height */
/* Bootstrap gives every heading `line-height: 1.1`. The design declares a
   line-height only where it wants one and otherwise leaves headings at
   `normal`, so Bootstrap quietly tightened the ones it left alone - the clips
   h2 came out 33px tall against the export's 36px.

   `:where(#ffroot)` contributes nothing to specificity, so these rules weigh
   exactly as much as Bootstrap's bare `h2` and win on load order, while any
   harvested class that does set a line-height still beats them. A plain
   `#ffroot h2` would have the opposite problem: it would outrank the design. */
:where(#ffroot) h1,
:where(#ffroot) h2,
:where(#ffroot) h3,
:where(#ffroot) h4,
:where(#ffroot) h5,
:where(#ffroot) h6 {
    line-height: normal;
}

/* ------------------------------- 13. The nav dropdowns (newer design bundle) */
/* The header the homepage was built from has a flat nav. The design handoff that
   followed added two hover dropdowns - PROGRAMS and LOCATIONS - so this is
   header behaviour the harvested stylesheet does not cover, and it belongs here
   for the same reason the mobile panel does: the header is on every page, and
   the only stylesheet that reaches every page and can be authored is this one.

   Every value is copied verbatim from about-us.html, where the export ships them
   as inline styles on the dropdown markup. The export's own JS resolves the two
   unevaluated placeholders - `{{ progDropDisplay }}` and `{{ locDropDisplay }}`
   are `block` when that menu is open and `none` otherwise - so nothing here is
   guessed; `[data-open]` is just where the theme keeps that state.

   One documented deviation: the design gives the PROGRAMS panel min-width 240px
   and the LOCATIONS panel 280px. A single 240px is used, because both panels set
   `white-space: nowrap` on their links and the LOCATIONS copy ("PERSONAL
   TRAINERS IN SHARJAH") is already wider than 280px, so that value never binds.
   Driving it from the menu would mean an editor field for a number nothing can
   observe. */

/* The dropdown has to paint over the hero copy, which the design also puts at
   z-index 2, and the header's own stacking context pins everything inside it at
   the header's level. The newer bundle raises the header to 20 for exactly this
   reason - and that also settles the mobile panel, which used to need its own
   lift while open. */
#ffroot #masthead {
    z-index: 20;
}

#ffroot .md-navitem {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

#ffroot .md-navitem > a {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The design draws the chevron as two borders on an empty rotated square rather
   than shipping an icon for it, so it inherits the link colour on hover for
   free. */
#ffroot .md-navitem__chev {
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
}

#ffroot .md-navdrop {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    z-index: 10;
}

#ffroot .md-navdrop[data-open="true"] {
    display: block;
}

#ffroot .md-navdrop__panel {
    background: var(--md-dark-drop);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 8px 8px;
    padding: 10px 0;
    min-width: 240px;
}

#ffroot .md-navdrop__panel--grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 8px;
}

#ffroot .md-navdrop__link {
    display: block;
    padding: 13px 24px;
    color: var(--md-white);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#ffroot .md-navdrop__link:hover,
#ffroot .md-navdrop__link:focus {
    color: var(--md-cyan);
}

/* Third level: a dropdown item with children of its own. Not in the design,
   which nests no deeper, so it reuses the panel's own values - the same
   background, border, padding and link rhythm - and opens beside the item it
   belongs to. Desktop opens it on hover and on keyboard focus; below the nav
   breakpoint header.js toggles `data-open` instead (section 14). */
#ffroot .md-subitem {
    position: relative;
}

#ffroot .md-subitem__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* The top-level chevron, turned to point at the flyout. */
#ffroot .md-subitem__chev {
    display: block;
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
}

#ffroot .md-subdrop {
    position: absolute;
    top: -11px;
    left: 100%;
    display: none;
    z-index: 11;
}

#ffroot .md-subdrop[data-open="true"] {
    display: block;
}

/* Flush against the item, so the pointer never crosses a gap that would drop
   the hover on its way into the flyout. */
#ffroot .md-subdrop__panel {
    border-radius: 0 8px 8px 8px;
}

@media (min-width: 992px) {
    #ffroot .md-subitem:hover > .md-subdrop,
    #ffroot .md-subitem:focus-within > .md-subdrop {
        display: block;
    }

    #ffroot .md-subitem:hover > .md-subitem__trigger {
        color: var(--md-cyan);
    }
}

/* ---------------------------------- 14. The dropdowns inside the mobile panel */
/* The design has no mobile menu at all, so it has no answer for a submenu in one
   either. The panel is the theme's own (section 12), and a parent item follows
   the same pattern: tapping it opens its children in place instead of
   navigating, which is what the existing starter menu has always done.
   The values are the panel's own - its 12px rhythm and the design's link
   colour - so nothing new is introduced. */
@media (max-width: 991px) {
    #ffroot .hdr .nav[data-open="true"] .md-navitem {
        display: block;
        width: 100%;
        align-self: auto;
    }

    /* The panel's `.nav a` rule sets display:block, which outranks the
       trigger's own flex and dropped the chevron onto a line of its own. */
    #ffroot .hdr .nav[data-open="true"] .md-navitem > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #ffroot .hdr .nav[data-open="true"] .md-navitem__chev {
        margin-top: -4px;
        transition: transform 200ms var(--ff-ease);
    }

    #ffroot .hdr .nav[data-open="true"] .md-navitem > a[aria-expanded="true"] .md-navitem__chev {
        transform: rotate(-135deg);
        margin-top: 4px;
    }

    #ffroot .hdr .nav[data-open="true"] .md-navdrop {
        position: static;
    }

    #ffroot .hdr .nav[data-open="true"] .md-navdrop__panel {
        background: none;
        border: 0;
        padding: 0 0 8px 16px;
        min-width: 0;
        display: block;
    }

    #ffroot .hdr .nav[data-open="true"] .md-navdrop__link {
        padding: 13px 0;
        white-space: normal;
    }

    /* The third level opens in place under its item, one indent further in,
       with the chevron pointing down like the top-level one. */
    #ffroot .hdr .nav[data-open="true"] .md-subitem__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #ffroot .hdr .nav[data-open="true"] .md-subitem__chev {
        transform: rotate(45deg);
        margin-top: -4px;
        transition: transform 200ms var(--ff-ease);
    }

    #ffroot .hdr .nav[data-open="true"] .md-subitem__trigger[aria-expanded="true"] .md-subitem__chev {
        transform: rotate(-135deg);
        margin-top: 4px;
    }

    #ffroot .hdr .nav[data-open="true"] .md-subdrop {
        position: static;
    }
}

/* --------------------------------------------- 16. Programme copy: links, bold */
/* Hand-written, not harvested - which is why it is here and not in inner.css,
   which build-inner-css.sh regenerates. The programme screens that share the
   Muscle Gain template put inline links and bold runs in their copy, styled
   inline in the design as below; the Muscle Gain export itself has none, so no
   harvest carries these. */
:where(body.page-template-page-muscle-gain-php) .mg-shared-p a,
:where(body.page-template-page-muscle-gain-php) .mg-shared-p-2 a,
:where(body.page-template-page-muscle-gain-php) .mg-shared-div-3 a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

:where(body.page-template-page-muscle-gain-php) .mg-shared-p strong,
:where(body.page-template-page-muscle-gain-php) .mg-shared-p-2 strong,
:where(body.page-template-page-muscle-gain-php) .mg-shared-div-3 strong {
    font-weight: 700;
}