/*--- Blurbs (master) ---*/
/*---------------------------------------------------------------------------------*\

    Blurbs - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/Blurbs.css

    The title + top text (.top-txt-wrp) is a general component area styled in
    base.css.

\*---------------------------------------------------------------------------------*/

/* A PART ROW SITS IN THE MIDDLE (Jamie, 2026-10-22: justify centre the
   ambassadors and any other blurbs).

   Two ambassadors in a row three wide used to hang off the left with a gap
   beside them, which reads as a missing card rather than a deliberate pair.
   A FULL ROW LOOKS EXACTLY THE SAME as it did: the columns already fill the
   width, so there is nothing left over to centre. */
    .component.blurbs .blurbs-wrp{
        row-gap: 2rem;
        justify-content: center;
    }

    .component.blurbs .blurb{
        height: 100%;
        text-align: center;
    }

    .component.blurbs .blurb .icon-wrp{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .component.blurbs .blurb .icon-wrp .icon{
        width: 44px;
        height: 44px;
    }

    .component.blurbs .blurb .icon-wrp img{
        max-width: 72px;
        height: auto;
    }

    .component.blurbs .blurb .title{
        margin-bottom: .5rem;
    }

    .component.blurbs .blurb .txt{
        margin-bottom: .75rem;
    }


/*--- Blurbs (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Blurbs - Theme CSS
    -------------------------

    The look of Blurbs for this theme. Loaded after the master CSS in
    components/Blurbs/Blurbs.css, so rules here win.

    As the rest of the MMC site (added 2026-10-01, for the Contact page)
    - Each blurb is a tile like the partner tiles: the section's line colour
      softened into its background, the site's radius
    - The icon sits in a disc in the alt scheme's button colours (the orange on
      white or grey), the same pair as the number discs on cards
    - The link is the strongest thing on the tile: bold, in the title colour,
      underlined, as the footer's links are

\*---------------------------------------------------------------------------------*/
    .component.blurbs .blurb{
        padding: 2rem 1.5rem;
        border-radius: var(--radius);
        background-color: color-mix(in srgb, var(--line-colour) 55%, var(--bg-colour));
    }

    .component.blurbs .blurb .icon-wrp{
        width: 64px;
        height: 64px;
        margin-inline: auto;
        border-radius: 50%;
        background-color: var(--alt-btn-bg-colour);
        color: var(--alt-btn-txt-colour);
    }

    .component.blurbs .blurb .icon-wrp .icon{
        width: 28px;
        height: 28px;
    }

    .component.blurbs .blurb .title{
        font-size: 1.4rem;
    }

    .component.blurbs .blurb .link{
        font-family: var(--font-head);
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--title-colour);
        text-decoration: underline;
        text-underline-offset: 4px;
    }


/*--- FaqsFeed (master) ---*/
/*---------------------------------------------------------------------------------*\

    FAQs Feed - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/FaqsFeed.css

    The title + top text (.top-txt-wrp) and empty message (.empty-msg) are
    general component areas styled in base.css.

    Changed 2026-10-02
    - The open / shut mark is a chevron from the icon bank in the markup, not a
      + and a minus drawn with content. It turns over when the answer opens
    - The answer slides rather than appearing. ::details-content is the box a
      <details> wraps its own content in, and interpolate-size is what lets a
      height transition finish at auto. A browser without either opens the answer
      at once, which is what every browser did before this

\*---------------------------------------------------------------------------------*/
    .component.faqs-feed .faqs-wrp{
        max-width: 52rem;
        margin-inline: auto;
    }

    .component.faqs-feed .faq .question{
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 0;
        cursor: pointer;
        list-style: none;
    }

    .component.faqs-feed .faq .question::-webkit-details-marker{
        display: none;
    }

    .component.faqs-feed .faq .marker{
        display: grid;
        flex: none;
        place-items: center;
    }

    .component.faqs-feed .faq[open] .marker{
        transform: rotate(180deg);
    }

    .component.faqs-feed .faq .answer{
        padding: 0 0 1.25rem;
    }

    .component.faqs-feed .faq .answer > *:last-child{
        margin-bottom: 0;
    }

    /* Motion. Only while <html> has motion-on, which the footer pause button and
       reduced motion both take off */
    .motion-on .component.faqs-feed .faq{
        interpolate-size: allow-keywords;
    }

    .motion-on .component.faqs-feed .faq::details-content{
        block-size: 0;
        overflow: hidden;
        transition: block-size .3s ease, content-visibility .3s allow-discrete;
    }

    .motion-on .component.faqs-feed .faq[open]::details-content{
        block-size: auto;
    }

    .motion-on .component.faqs-feed .faq .marker{
        transition: transform .3s ease;
    }


/*--- FaqsFeed (theme) ---*/
/*---------------------------------------------------------------------------------*\

    FAQs Feed - Theme CSS
    -------------------------

    The look of the FAQs Feed for this theme. Loaded after the master CSS in
    components/FaqsFeed/FaqsFeed.css, so rules here win.

    As the mockup's questions
    - Each question is a card in the scheme's button colour (white on the grey
      band), with the card shadow and a smaller radius than the content cards
    - The chevron sits in a disc in the alt scheme's button colours (the orange
      on the grey band), a pair already chosen to pass contrast together. It was
      a + and a minus until 2026-10-02

\*---------------------------------------------------------------------------------*/
    .component.faqs-feed .faqs-wrp{
        max-width: 51.25rem;
    }

    .component.faqs-feed .faq{
        overflow: hidden;
        margin-bottom: 1rem;
        border-radius: var(--radius-small);
        background-color: var(--btn-bg-colour);
        box-shadow: var(--shadow);
    }

    .component.faqs-feed .faq .question{
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        padding: 1.15rem 1.5rem;
        color: var(--title-colour);
        font-family: var(--font-head);
        font-size: 1.15rem;
        font-weight: 600;
    }

    .component.faqs-feed .faq .marker{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--alt-btn-bg-colour);
        color: var(--alt-btn-txt-colour);
    }

    .component.faqs-feed .faq .marker .icon{
        width: 18px;
        height: 18px;
    }

    .component.faqs-feed .faq .answer{
        padding: 0 1.5rem 1.4rem;
    }


/*--- FormPanel (master) ---*/
/*---------------------------------------------------------------------------------*\

    Form Panel - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/FormPanel.css

    The fields themselves are styled once for the whole site, in base.css and
    theme-css/site.css under Forms, so every form matches wherever it is put.

    One column on a phone with the words first, two from 992px. form-left
    swaps them with order rather than by changing the columns, so the words
    still come first for a screen reader and for anyone tabbing through.

\*---------------------------------------------------------------------------------*/
    .component.form-panel .panel-wrp{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .component.form-panel .txt-col > *:last-child{
        margin-bottom: 0;
    }

    .component.form-panel .form-col .nf-form-cont{
        max-width: none;
    }

    .component.form-panel.form-only .panel-wrp{
        max-width: 40rem;
        margin-inline: auto;
    }

    @media(min-width: 992px){

        .component.form-panel .panel-wrp{
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
            gap: 4rem;
            align-items: start;
        }

        .component.form-panel.form-only .panel-wrp{
            grid-template-columns: minmax(0, 1fr);
        }

        .component.form-panel.form-left .txt-col{
            order: 2;
        }

        .component.form-panel.form-left .form-col{
            order: 1;
        }

    }


/*--- FormPanel (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Form Panel - Theme CSS
    -------------------------

    The look of the Form Panel for this theme. Loaded after the master CSS in
    components/FormPanel/FormPanel.css, so rules here win.

    THE FORM SITS ON A CARD, and the card carries a colour scheme class of its
    own (Form Card Colour), exactly as a card in the Cards component does. That
    is what lets the card be white on the grey band and grey on the white one
    without a single rule written per background, which is the house rule. Every
    colour inside the card, the form fields included, then comes from the card's
    scheme rather than the section's.

\*---------------------------------------------------------------------------------*/
    .component.form-panel .txt-col h2{
        margin-bottom: 1rem;
    }

    .component.form-panel .txt-col ul{
        margin-bottom: 1.25rem;
        padding-left: 1.1rem;
    }

    .component.form-panel .txt-col li{
        margin-bottom: .5rem;
    }

    .component.form-panel .form-col{
        padding: 2rem;
        border-radius: var(--radius);
        background-color: var(--bg-colour);
        box-shadow: var(--shadow);
        color: var(--body-colour);
    }

    @media(min-width: 768px){

        .component.form-panel .form-col{
            padding: 2.5rem;
        }

    }


/*--- LeftRightText (master) ---*/
/*---------------------------------------------------------------------------------*\

    Left / Right Text - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/LeftRightText.css

    The title + top text (.top-txt-wrp) and section button (.section-btn-wrp) are
    general component areas styled in base.css.

    Background shapes (.has-shapes, added 2026-10-01)
    - Four round shapes behind the rows, placed like Hero Collage's. Colours,
      shapes and any movement are theme CSS

    The stack (.stack-wrp, added 2026-10-01)
    - Up to three photographs in a box of fixed proportions, each at its own
      angle and shape, the later ones in front. Placed by number
      (.stack-1 to .stack-3), so the arrangement holds at every width

\*---------------------------------------------------------------------------------*/
    .component.left-right-text .row-wrp + .row-wrp{
        margin-top: 3rem;
    }

    .component.left-right-text .row-wrp .img-col img{
        width: 100%;
        height: auto;
    }

    .component.left-right-text .row-wrp .txt-wrp > *:last-child{
        margin-bottom: 0;
    }

    .component.left-right-text .row-wrp .btn-wrp{
        margin-top: 1.25rem;
    }

    /* Swap the image to the right on alternate rows (desktop only) */
    @media(min-width: 992px){

        .component.left-right-text .row-wrp.reverse .img-col{
            order: 2;
        }

        .component.left-right-text .row-wrp.reverse .txt-col{
            order: 1;
        }

    }

    /* Stack of photographs */
    .component.left-right-text .stack-wrp{
        position: relative;
        width: 100%;
        aspect-ratio: 1.1;
    }

    .component.left-right-text .stack-img{
        position: absolute;
        margin: 0;
        overflow: hidden;
    }

    .component.left-right-text .row-wrp .stack-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .component.left-right-text .stack-1{
        top: 0;
        left: 0;
        z-index: 1;
        width: 58%;
        aspect-ratio: 4 / 5;
        transform: rotate(-6deg);
    }

    .component.left-right-text .stack-2{
        top: 14%;
        right: 0;
        z-index: 2;
        width: 54%;
        aspect-ratio: 1;
        transform: rotate(4.5deg);
    }

    .component.left-right-text .stack-3{
        bottom: 0;
        left: 18%;
        z-index: 3;
        width: 50%;
        aspect-ratio: 5 / 4;
        transform: rotate(-2deg);
    }

/* ROOM BETWEEN THE STACK AND THE WORDS (Jamie, 2026-10-20).

   The photographs are rotated, so the corner of the one nearest the text reaches
   past the column's own gutter and finishes a few pixels from the first line.
   Only the stack needs it: a single photograph has straight edges and sits
   inside the gutter, which is why this is not on .img-col itself.

   :has() rather than a class on the column, because the stack is decided in the
   template by how many pictures a row has, and a second class would have to be
   kept in step with that count. */
    @media(min-width: 992px){

        .component.left-right-text .row-wrp:not(.reverse) .img-col:has(.stack-wrp){
            padding-right: 3.5rem;
        }

        .component.left-right-text .row-wrp.reverse .img-col:has(.stack-wrp){
            padding-left: 3.5rem;
        }

    }

    /* Background shapes */
    .component.left-right-text.has-shapes{
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .component.left-right-text .shapes{
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .component.left-right-text.has-shapes .container{
        position: relative;
        z-index: 1;
    }

    .component.left-right-text .shape{
        position: absolute;
        display: block;
        border-radius: 50%;
    }

    .component.left-right-text .shape-1{
        top: -14%;
        left: -10%;
        width: 46%;
        aspect-ratio: 1.15;
    }

    .component.left-right-text .shape-2{
        top: 6%;
        right: -14%;
        width: 54%;
        aspect-ratio: .9;
    }

    .component.left-right-text .shape-3{
        top: 44%;
        left: 16%;
        width: 38%;
        aspect-ratio: 1.3;
    }

    .component.left-right-text .shape-4{
        top: 26%;
        left: 40%;
        width: 22%;
        aspect-ratio: 1;
    }


/*--- LeftRightText (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Left / Right Text - Theme CSS
    -------------------------

    The look of Left / Right Text for this theme. Loaded after the master CSS in
    components/LeftRightText/LeftRightText.css, so rules here win.

    Which variable does what, and why
    - Background shapes: the section background mixed a little way towards its
      button colour (lighter, on the grey that is the white button) and its
      title colour (darker), and one warm shape, the button colour with a
      little of the alt button in it (on the grey, white with a touch of the
      orange). On the MMC grey these are the mockup's four exactly
    - The stack: a frame in the scheme's button colour (white on the grey), so
      the photographs read as separate prints, square cornered, with the
      mockup's deeper stack shadow
    - The row title is set at the size of a section title, as the mockup's
      story is a section of its own with one row
    - The row button carries the soft button shadow, as the mockup's pale
      button does

    Movement (only while <html> has motion-on, see Motion in theme-css/site.css)
    - The shapes drift and change shape, as on the hero

\*---------------------------------------------------------------------------------*/
    .component.left-right-text.has-shapes:not(.remove-padding-top){
        padding-top: 5rem;
    }

    .component.left-right-text.has-shapes:not(.remove-padding-bottom){
        padding-bottom: 5rem;
    }

    .component.left-right-text .row-wrp .img-col img{
        border-radius: var(--radius);
    }

    .component.left-right-text .row-wrp h3{
        font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    }

    .component.left-right-text .row-wrp .btn-wrp{
        margin-top: 1.5rem;
    }

    .component.left-right-text .row-wrp .btn{
        box-shadow: var(--shadow-btn);
    }

    .component.left-right-text .shape-1{
        background-color: color-mix(in srgb, var(--bg-colour) 90%, var(--btn-bg-colour));
    }

    .component.left-right-text .shape-2{
        background-color: color-mix(in srgb, var(--bg-colour) 52%, var(--btn-bg-colour));
    }

    .component.left-right-text .shape-3{
        background-color: color-mix(in srgb, var(--bg-colour) 96%, var(--title-colour));
    }

    .component.left-right-text .shape-4{
        background-color: color-mix(in srgb, var(--btn-bg-colour) 85%, var(--alt-btn-bg-colour));
    }

    /* The stack */
    .component.left-right-text .stack-img{
        border: 12px solid var(--btn-bg-colour);
        background-color: var(--btn-bg-colour);
        box-shadow: var(--shadow-stack);
    }

    .component.left-right-text .row-wrp .stack-img img{
        border-radius: 0;
    }


/*--- PageHeading (master) ---*/
/*---------------------------------------------------------------------------------*\

    Page Heading - Master CSS
    -------------------------

    Layout and function only. How it looks for a particular theme lives in
    theme-css/components/PageHeading.css

    The overlay (.overlay + overlay-dark / overlay-light / overlay-none) is a
    general component area styled in base.css.

    Added 2026-10-01 (all off unless switched on)
    - .crumbs: the breadcrumb trail above the title
    - .has-side-img: the text and the side image side by side from 768px, both
      standing on the same line at the foot. The text column is as wide as its
      own content rather than a share of the row, so the image stands beside
      the words instead of at the far edge
    - .has-bg-layer: the section's colour moves onto .bg so that shapes can sit
      behind the text and .curve-bottom can cut a shallow arc out of the bottom.
      Same method as Hero Collage: a mask, so whatever is behind the section
      shows through, and the mask's colours are only read for how see-through
      they are. The arc is flatter than the hero's (a wider ellipse for the
      height it rises), and the shapes are placed as on the hero, both as in
      the mockup

    Changed 2026-10-02
    - The section after a curved page heading is pulled up under the arc, so the
      arc fills with that section's colour. Before this it filled with the page
      background, which read as a white band between the two

\*---------------------------------------------------------------------------------*/
    .component.page-heading{
        position: relative;
        padding-block: 3.5rem;
    }

    .component.page-heading.remove-padding-top{
        padding-top: 0;
    }

    .component.page-heading.remove-padding-bottom{
        padding-bottom: 0;
    }

    .component.page-heading .content-wrp{
        max-width: 50rem;
    }

    .component.page-heading.align-center .content-wrp{
        margin-inline: auto;
        text-align: center;
    }

    .component.page-heading .title{
        margin-bottom: .4rem;
    }

    .component.page-heading .subtitle{
        margin: 0;
    }

    /* Background image version */
    .component.page-heading.has-bg-img{
        background-size: cover;
        background-position: center;
    }

    .component.page-heading .container{
        position: relative;
        z-index: 2;
    }

    /* Breadcrumbs */
    .component.page-heading .crumbs{
        margin-bottom: 1rem;
    }

    .component.page-heading .crumbs ol{
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .component.page-heading .crumbs li + li::before{
        content: '/';
        margin: 0 .5rem;
        opacity: .6;
    }

    .component.page-heading.align-center .crumbs ol{
        justify-content: center;
    }

    /* Side image */
    .component.page-heading .side-img{
        width: 100%;
        max-width: 150px;
        margin-top: 1.5rem;
    }

    .component.page-heading .side-img img{
        width: 100%;
        height: auto;
    }

    /* Background layer, shapes and curve */

    /* The curve height is set on the root, not on the component, because the
       section AFTER the page heading needs the same value: it is pulled up under
       the arc so the arc fills with that section's colour, and its top padding
       has to clear the arc again. A variable set on the component itself cannot
       reach a sibling */
    :root{
        --ph-curve-h: clamp(24px, 4vw, 64px);
    }

    .component.page-heading.has-bg-layer{
        --curve-h: var(--ph-curve-h);
        overflow: hidden;
        isolation: isolate;
        background-color: transparent;
    }

    .component.page-heading .bg{
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background-color: var(--bg-colour);
        pointer-events: none;
    }

    .component.page-heading.curve-bottom{
        padding-bottom: calc(3.5rem + var(--curve-h));
    }

    .component.page-heading.curve-bottom .bg{
        -webkit-mask-image: radial-gradient(ellipse 60% calc(var(--curve-h) * 2.5) at 50% calc(100% + var(--curve-h) * 1.5), transparent 99.5%, currentColor 100%);
        mask-image: radial-gradient(ellipse 60% calc(var(--curve-h) * 2.5) at 50% calc(100% + var(--curve-h) * 1.5), transparent 99.5%, currentColor 100%);
    }

    .component.page-heading.curve-bottom.remove-padding-bottom{
        padding-bottom: 0;
    }

    /* The arc is a hole, so it shows whatever is behind the section. The section
       that follows is pulled up into it and given that height back as top padding,
       so the arc fills with that section's colour instead of the page background.
       This relies on the page heading being the positioned one of the two: it is
       position: relative above, and a section is static unless its own component
       CSS says otherwise */
    .component.page-heading.curve-bottom{
        margin-bottom: calc(var(--curve-h) * -1);
    }

    .component.page-heading.curve-bottom.remove-padding-bottom{
        margin-bottom: 0;
    }

    .component.page-heading.curve-bottom + .component:not(.remove-padding-top){
        padding-top: calc(var(--section-pad) + var(--ph-curve-h));
    }

    .component.page-heading .shape{
        position: absolute;
        display: block;
        border-radius: 50%;
    }

    .component.page-heading .shape-1{
        top: -14%;
        left: -10%;
        width: 46%;
        aspect-ratio: 1.15;
    }

    .component.page-heading .shape-2{
        top: 6%;
        right: -14%;
        width: 54%;
        aspect-ratio: .9;
    }

    .component.page-heading .shape-3{
        top: 44%;
        left: 16%;
        width: 38%;
        aspect-ratio: 1.3;
    }

    .component.page-heading .shape-4{
        top: 26%;
        left: 40%;
        width: 22%;
        aspect-ratio: 1;
    }

    @media(min-width: 768px){

        .component.page-heading.has-side-img .container{
            display: flex;
            align-items: flex-end;
            gap: 2.5rem;
        }

        .component.page-heading.has-side-img.align-center .container{
            justify-content: center;
        }

        .component.page-heading.has-side-img .content-wrp{
            flex: 0 1 auto;
            margin-inline: 0;
        }

        .component.page-heading .side-img{
            flex: none;
            max-width: 230px;
            margin-top: 0;
        }

    }


/*--- PageHeading (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Page Heading - Theme CSS
    -------------------------

    The look of the Page Heading for this theme. Loaded after the master CSS in
    components/PageHeading/PageHeading.css, so rules here win.

    With a background image, text colours come from the Dark Overlay and Light
    Overlay colour schemes (Strata > Theme). The overlay itself is in
    theme-css/site.css.

    As the mockup's inner page heads (the hero's look, shorter)
    - Title and lead at the hero's sizes
    - The shapes are mixed from the scheme's own colours exactly as on Hero
      Collage, so on the orange they are the same four accents
    - With the curve, the bottom padding follows the arc as the mockup's does,
      and the section after it starts closer (2.5rem rather than a full
      section's padding), so there is no wedge of empty space under the title.
      The 2.5rem is on top of the arc's own height, which the master CSS adds,
      because that section is pulled up under the arc to colour it in

    Movement (only while <html> has motion-on, see Motion in theme-css/site.css)
    - The side image (the mascot) floats slowly, as on the Intro Panel

\*---------------------------------------------------------------------------------*/
    .component.page-heading .title{
        margin-bottom: .5em;
        font-size: clamp(2.5rem, 6.5vw, 4.75rem);
        letter-spacing: -.01em;
    }

    .component.page-heading .subtitle{
        max-width: 56ch;
        color: var(--body-colour);
        font-size: 1.3rem;
    }

    .component.page-heading .crumbs{
        color: var(--title-colour);
        font-family: var(--font-head);
        font-size: 1rem;
        font-weight: 600;
    }

    .component.page-heading .crumbs a{
        color: inherit;
        text-decoration: underline;
    }

    :root{
        --ph-curve-h: 4vw;
    }

    .component.page-heading.curve-bottom:not(.remove-padding-bottom){
        padding-bottom: calc(7rem + var(--curve-h));
    }

    .component.page-heading.curve-bottom + .component:not(.remove-padding-top){
        padding-top: calc(2.5rem + var(--ph-curve-h));
    }

    .component.page-heading .shape-1{
        background-color: color-mix(in srgb, var(--bg-colour) 88%, var(--btn-txt-colour));
    }

    .component.page-heading .shape-2{
        background-color: color-mix(in srgb, var(--bg-colour) 76%, var(--btn-txt-colour));
    }

    .component.page-heading .shape-3{
        background-color: color-mix(in srgb, var(--bg-colour) 89%, var(--title-colour));
    }

    .component.page-heading .shape-4{
        background-color: color-mix(in srgb, var(--bg-colour) 62%, var(--btn-txt-colour));
    }

    .component.page-heading .side-img img{
        filter: drop-shadow(var(--shadow-mascot));
    }

    .motion-on .component.page-heading .side-img img{
        will-change: transform;
        animation: float-a 15s ease-in-out infinite;
    }