/*--- 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;
    }


/*--- Text (master) ---*/
/*---------------------------------------------------------------------------------*\

    Text - Master CSS
    -------------------------

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

    The buttons (.btns-wrp) are a general component area styled in base.css.

\*---------------------------------------------------------------------------------*/
    .component.text .content-wrp{
        width: 100%;
    }

    .component.text.align-center{
        text-align: center;
    }

    .component.text.align-left{
        text-align: left;
    }

    .component.text .subtitle{
        margin-bottom: 1rem;
    }

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

    .component.text.width-compact .content-wrp{
        max-width: 48rem;
        margin-inline: auto;
    }

    .component.text .btns-wrp{
        margin-top: 1.5rem;
    }

    .component.text.align-center .btns-wrp{
        justify-content: center;
    }


/*--- Text (theme) ---*/
/*---------------------------------------------------------------------------------*\

    Text - Theme CSS
    -------------------------

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

\*---------------------------------------------------------------------------------*/
    .component.text .subtitle{
        font-size: 1.15rem;
    }