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

    Site CSS - Theme
    -------------------------

    Site-wide look for THIS theme (fonts, header, footer tweaks, global
    overrides). Loaded last on every page, after base.css and the components.

    THIS SITE: The MMC Foundation, copied from the agreed Rounded mockup
    (mockups/rounded/), measured in a browser. Jarno asked on 2026-10-01 for
    the header, colours, footer and moving circles to match it exactly; the
    decisions and the exceptions to AI/design-rules.md that this takes are in
    AI/site-style-guide.md (sections 8, 9 and 13) and AI/context.md

    Per-component styling goes in theme-css/components/{Name}.css instead.

    Break points (the six in base.css, use no others)
    Mobile      : 0px (Default)
    Large phone : 576px (sm)
    Tablet      : 768px (md)
    Small laptop: 992px (lg)
    Laptop      : 1170px (xl)
    Desktop     : 1470px (xxl)

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

/*---------------------------------------------------------------------------------*\
    Colours
    - Every colour here comes from the colour schemes on Strata > Theme, through
      the scheme variables (--bg-colour, --title-colour, --body-colour ...)
    - Lines, borders and dividers use --line-colour
    - Write each rule once with the scheme variables. Never write a separate
      version of a rule for each background: the section's class already sets them
    - Which scheme each part uses:
        Header, menus, modals, blog cards       Default
        Top bar, footer                         Secondary
        Cookie banner, related posts            Grey
        Text over images                        Dark Overlay / Light Overlay
    - Set in includes/color-schemes.php (selectors) and the templates (classes)
\*---------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------*\
    Fonts
    - Poppins for headings, navigation and buttons, self-hosted from
      theme-css/fonts/ (SIL Open Font License, fonts/OFL.txt), so no visitor's
      browser contacts Google. Only the two weights the design uses
    - Body copy stays in the system stack, exactly as the mockup sets it
\*---------------------------------------------------------------------------------*/
    @font-face{
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('fonts/poppins-latin-600-normal.woff2') format('woff2');
    }

    @font-face{
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
    }

/*---------------------------------------------------------------------------------*\
    Site values
    - The container is 1200px for every section, as in the mockup, so the wide
      container is the same width
    - One radius (28px) for cards, tiles and photographs. The mockup's panels
      are rounder (40px on the intro panel, 32px on the call to action) and the
      footer logo plate is 16px, the questions 18px: named here so they are
      written once
    - The mockup's depths, named. --shadow is the card shadow and the default
    - --sky-h is the height of the skyline standing on the footer's top edge.
      It is the artwork's own 1600 by 280 as arithmetic, NOT a clamp: the room
      the last section leaves has to equal the height the drawing actually
      renders at, and a floor or a cap makes the two disagree and leaves a gap.
      100vw counts the scrollbar and the drawing does not, so the room is a few
      pixels over rather than under, which is the safe way round
\*---------------------------------------------------------------------------------*/
    :root{
        --font-head: 'Poppins', system-ui, sans-serif;
        --fs-base: 1.0625rem;
        --lh-base: 1.7;
        --container: 1200px;
        --container-wide: 1200px;
        --section-pad: 4.5rem;
        --radius: 28px;
        --radius-panel: 40px;
        --radius-cta: 32px;
        --radius-small: 18px;
        --radius-plate: 16px;
        --shadow: 0 4px 18px rgba(4, 28, 62, .08);
        --shadow-btn: 0 2px 10px rgba(4, 28, 62, .1);
        --shadow-head: 0 2px 14px rgba(4, 28, 62, .08);
        --shadow-photo: 0 14px 38px rgba(4, 28, 62, .16);
        --shadow-stack: 0 12px 30px rgba(4, 28, 62, .18);
        --shadow-lift: 0 18px 50px rgba(26, 12, 3, .22);
        --shadow-mascot: 0 18px 22px rgba(4, 28, 62, .28);
        --sky-h: calc(100vw * 280 / 1600);
    }

/*---------------------------------------------------------------------------------*\
    Type
\*---------------------------------------------------------------------------------*/
    h1,
    h2,
    h3,
    h4{
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.015em;
        margin-bottom: .5em;
    }

    h1{
        font-size: clamp(2.25rem, 5vw, 3.5rem);
    }

    h2{
        font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    }

    h3{
        font-size: 1.4rem;
    }

    h4{
        font-size: 1.2rem;
    }

    p{
        margin-bottom: 1.1rem;
    }

    /* Headings inside written content (a privacy notice, a blog post) are
       sub headings of the section, so they sit a step smaller than a section
       title, with room above them */
    .component .txt-wrp h2{
        margin-top: 2.25rem;
        font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    }

    .component .txt-wrp h3{
        margin-top: 1.75rem;
    }

    .component .txt-wrp > h2:first-child,
    .component .txt-wrp > h3:first-child{
        margin-top: 0;
    }

    /* Lists in written content keep the paragraph's space under them */
    .component .txt-wrp ul,
    .component .txt-wrp ol{
        margin-bottom: 1.1rem;
    }

/*---------------------------------------------------------------------------------*\
    Focus
    - The mockup never set one. A ring in the section's title colour, which is
      the strongest colour on every scheme, so it shows on white, grey, orange
      and navy alike (WCAG 2.4.7 and 2.4.13)
\*---------------------------------------------------------------------------------*/
    :focus-visible{
        outline: 3px solid var(--title-colour);
        outline-offset: 3px;
    }

/*---------------------------------------------------------------------------------*\
    Buttons
    - Pills with no arrow, as in the mockup
    - Main button (.btn): the scheme's own button colours. On orange that is the
      near-black, on navy the orange, on grey the white "pale" button
    - Second button (.btn-alt): the alt scheme's button. On orange and navy
      the alt is Grey, whose button is the white "pale" one with its soft
      shadow. Default's and Grey's alt is Secondary, the orange: the header's
      Donate button, and the number discs on cards and questions
    - The larger, bolder main button of the hero, the call to action and the
      header is set in those components' theme CSS and below in Header
\*---------------------------------------------------------------------------------*/
    .btn{
        padding: .85rem 1.75rem;
        border-width: 0;
        border-radius: 999px;
        font-family: var(--font-head);
        font-weight: 600;
        line-height: 1.7;
    }

    .btn-outline{
        border-width: 2px;
    }

    .btn-alt{
        box-shadow: var(--shadow-btn);
    }

    .component .btns-wrp{
        gap: 1.1rem;
    }

/*---------------------------------------------------------------------------------*\
    Top Bar
\*---------------------------------------------------------------------------------*/
    .site-top-bar{
        background-color: var(--bg-colour);
        color: var(--body-colour);
    }

    .site-top-bar .tagline{
        opacity: .85;
    }

    .site-top-bar .contact-wrp a{
        color: var(--link-colour);
    }

/*---------------------------------------------------------------------------------*\
    Header and Menus
    - Full width, as in the mockup: the logo and the Donate button hold the two
      edges of the screen while every section below stays in the container
    - The orange rule under it and the Donate button are the Default scheme's
      alt button colour (Default's alt is Secondary, whose button is the orange)
    - Social links (Strata > Header > Show Social Links in the Header) are 40px
      circles in a light tint of the line colour
    - Below 992px the header wraps to two rows, as in the mockup: logo and social
      links, then the Menu button and Donate
\*---------------------------------------------------------------------------------*/
    .site-header{
        background-color: var(--bg-colour);
        border-bottom: 6px solid var(--alt-btn-bg-colour);
        box-shadow: var(--shadow-head);
    }

    .site-header .inner-wrp{
        max-width: none;
        gap: 1.75rem;
        padding: 1.1rem clamp(1.5rem, 1.5vw, 3rem);
    }

    .site-header .logo-wrp img{
        width: 195px;
        height: auto;
    }

/* THE STUCK BAR ARRIVES, AND IT ONLY FADES.

   Master makes the header sticky, so it never leaves and any change to it is
   read as the same bar rearranging itself. This site takes it out of that: the
   header scrolls away like the rest of the page, and once it has gone a short
   bar fades in over the top. assets/js/theme.js marks is-stuck when the header
   has actually left the viewport and holds its space open so nothing jumps.

   An ANIMATION and not a transition. The header's resting state is opaque and
   in the flow, so there is nothing for a transition to run from; an animation
   plays once, when the class lands, which is exactly the arrival. Going back up
   there is deliberately no animation: the real header is already there to see.

   Under reduced motion base.css cuts every animation to near zero, so the bar
   simply appears, which is the right behaviour rather than a lost feature. */

    .site-header{
        position: static;
    }

    .site-header.is-stuck{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 100;
        animation: header-fade .25s ease both;
    }

    @keyframes header-fade{

        from{
            opacity: 0;
        }

        to{
            opacity: 1;
        }

    }

/* THE MASCOT IS THE STUCK BAR'S MARK, AND ONLY THAT.

   THE FULL HEADER'S LOGO ALREADY HAS THE MASCOT IN IT. logo.webp is the lockup:
   the mascot, the words and the strapline, in one file. A second mascot beside it
   put two of them in the bar, which is what Jamie saw on 2026-10-05. So the
   pseudo-element below is display: none until the bar sticks, and it is only
   there because the lockup is too wide for a short bar.

   It is a pseudo-element on the home link, so it is decoration and needs no alt
   text: the link is named by the logo's own alt, which stays in the markup at
   every size. In the stuck bar that img is sized to nothing rather than hidden,
   because display: none and visibility: hidden would take the link's name out of
   the accessibility tree with it.

   NOTHING INSIDE THE BAR MOVES OR RESIZES. The whole bar fades in, so by the time
   any of it can be seen the mark is already the mascot at its final size. An
   earlier version grew the mascot and shrank the lockup while the bar came in;
   Jamie found the scaling jarring, and it was doing the same job twice.

   The mascot artwork is 720 by 782, so every width and height pair below is its
   own proportion. */

    .site-header .logo-wrp{
        display: flex;
        align-items: center;
        position: relative;
    }

    .site-header .logo-wrp::after{
        content: '';
        display: none;
        flex: none;
        width: 48px;
        height: 52px;
        background-image: url('img/mmc-mascot.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .site-header.is-stuck .logo-wrp img{
        width: 0;
        opacity: 0;
    }

    .site-header.is-stuck .logo-wrp::after{
        display: block;
    }

    .site-header .nav-wrp .menu a{
        font-family: var(--font-head);
        font-weight: 600;
        color: var(--title-colour);
    }

    .site-header .nav-wrp .menu a::after{
        display: none;
    }

    .site-header .nav-wrp .menu a:hover,
    .site-header .nav-wrp .menu .current-menu-item > a{
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .site-header .social-list-header{
        flex: none;
        gap: .5rem;
    }

    .site-header .social-list-header a{
        width: 40px;
        height: 40px;
        background-color: color-mix(in srgb, var(--line-colour) 55%, var(--bg-colour));
        color: var(--btn-bg-colour);
        transition: background-color .15s ease, color .15s ease;
    }

    .site-header .social-list-header a:hover{
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
        opacity: 1;
    }

    .site-header .enquiry-btn{
        border-width: 0;
        background-color: var(--alt-btn-bg-colour);
        color: var(--alt-btn-txt-colour);
        font-size: 1.2rem;
        font-weight: 700;
    }

    /* Dark on hover, as in the mockup: the header's own (navy) button */
    .site-header .enquiry-btn:hover{
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
    }

    .site-header .enquiry-btn .icon{
        display: none;
    }

    .site-header .nav-toggle{
        color: var(--title-colour);
    }

    .site-header .nav-wrp .sub-menu{
        background-color: var(--bg-colour);
    }

    @media(max-width: 991px){

        .site-header .inner-wrp{
            flex-wrap: wrap;
            row-gap: 1.75rem;
        }

        .site-header .social-list-header{
            margin-left: auto;
        }

        .site-header .actions-wrp{
            flex-wrap: wrap;
            justify-content: flex-start;
            order: 3;
            width: 100%;
            margin-left: 0;
            gap: 1rem 1.5rem;
        }

        .site-header .cta-btn{
            padding: .85rem 1.75rem;
        }

        .site-header .nav-toggle{
            order: -1;
            width: auto;
            height: auto;
            padding: .6rem 1.1rem;
            border: 2px solid var(--title-colour);
            border-radius: 999px;
            font-family: var(--font-head);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.7;
        }

        .site-header .nav-toggle span{
            display: none;
        }

        .site-header .nav-toggle::before{
            content: 'Menu';
        }

        .site-header .nav-toggle[aria-expanded="true"]::before{
            content: 'Close';
        }

        .site-header .nav-wrp{
            background-color: var(--bg-colour);
        }

        .site-header .nav-wrp .sub-menu{
            background-color: transparent;
        }

        .site-header .nav-wrp .menu a{
            border-bottom-color: var(--line-colour);
        }

        .site-header .nav-wrp .sub-menu a{
            border-bottom-color: var(--line-colour);
        }

    }

    @media(max-width: 575px){

        .site-header .enquiry-btn .icon{
            display: none;
        }

        .site-header .enquiry-btn .btn-txt{
            position: static;
            width: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            clip: auto;
        }

        .site-header .cta-btn{
            padding: .85rem 1.75rem;
        }

    }

    @media(min-width: 992px){

        .site-header .logo-wrp img{
            width: 260px;
        }

        .site-header.is-stuck .logo-wrp::after{
            width: 59px;
            height: 64px;
        }

    }

/*---------------------------------------------------------------------------------*\
    Footer (the Secondary scheme: navy)
    - Jamie's Corby heritage skyline standing on the top edge, as the Squared
      mockup has it. It hangs outside the footer, and the last section on the
      page leaves it the room (Last section, below), so it stands against that
      section's own colour. Printed by includes/site-footer-art.php
    - Three soft shapes behind it, a shade lighter than the navy, inside their
      own clipped layer because the footer can no longer clip anything
    - The logo on a light plate: both supplied logos set the words in navy,
      which vanish on the navy footer until there is a reversed version
    - Text and links in the scheme's title colour (cream), links underlined
\*---------------------------------------------------------------------------------*/
    .site-footer{

/* The skyline hangs ABOVE this box, so nothing here may clip it. The soft shapes
   used to rely on overflow: hidden on the footer; they are inside .footer-bg now,
   which does the clipping for them. */

        position: relative;
        isolation: isolate;
        background-color: var(--bg-colour);
        color: var(--title-colour);

/* The drawing's tiers, derived from the footer's own scheme rather than picked,
   so a scheme change takes the skyline with it. Ported from mockups/skyline.py,
   with that file's tokens read off this scheme: --acc is the scheme's button
   colour, which is the orange on Secondary, and --on-dark is its title colour.

   The town stays the footer's own colour, so it reads as a silhouette cut from
   the footer. That is NOT the mockup's band value, which lifts the town 44%
   toward the light: the band sits INSIDE the footer against one known navy, and
   this drawing stands above it against whatever section is there, usually white
   or grey. Lifted, it would wash out. */

        --sky-far: color-mix(in srgb, var(--title-colour) 16%, var(--bg-colour));
        --sky-mid: color-mix(in srgb, var(--title-colour) 26%, var(--bg-colour));

/* The second shade. The works' plant, the crane's structure and the plinth.

   Jamie, on the drawing: "keep the background and foreground of the steelworks the
   same colour just the background to be a shade lighter to create the depth", and
   on 2026-10-02: TWO SHADES OF THE SAME ORANGE. So this is the accent made lighter,
   not the accent diluted with the cream: at 45% in sRGB it came out a pale peach
   that read as a different colour and washed out against the grey section above.

   Two declarations on purpose. sRGB first, because mixing toward a light colour in
   sRGB drags the chroma down and every browser understands it. oklch second, which
   wins where it is supported and is the one that holds the hue and the saturation
   while only raising the lightness, which is what "a lighter shade of the same
   orange" means. A browser that does not know oklch ignores that line and keeps the
   first, rather than being left with no value at all and painting the shapes black. */

        --sky-plant: color-mix(in srgb, var(--btn-bg-colour) 72%, var(--title-colour));
        --sky-plant: color-mix(in oklch, var(--btn-bg-colour) 72%, var(--title-colour));
    }

/* THE ACCENT, AND WHY IT IS BACK.

   Squared's standing treatment drops it, because there the drawing stood against
   an orange call to action and orange on orange is three missing landmarks. Here
   the section above the footer is white or grey, so it works, and Jamie asked for
   it on 2026-10-02 after seeing the one tone version rendered.

   The five things anyone from Corby would name. NAMED GROUPS, not an outline
   round everything: the first heritage band put orange on every edge and the
   sawtooth roof came out reading as bunting.

   Rockingham Castle joined them on 2026-10-19, asked for by Graham at the MMC
   Foundation. It stands on the far hill at the left, which had the crane and
   nothing else, so the accent is spread across the drawing rather than piled
   into the middle and the right. */

    .site-footer .sky-top .skyline #steelworks-front,
    .site-footer .sky-top .skyline #dragline,
    .site-footer .sky-top .skyline #rockingham-castle,
    .site-footer .sky-top .skyline #steel-man,
    .site-footer .sky-top .skyline #corby-cube{
        color: var(--btn-bg-colour);
    }

/* The same two tones on the crane and the steel man. THE SPLIT COMES FROM THE
   DRAWING, not from path order: every solid mass in them carries no stroke, and
   every piece of structure is stroked. The cab, the tracks and the bucket are
   fills; the A frame, the guy ropes, the boom, its lattice and the hoist ropes
   are strokes. So the structure goes lighter and the machine stays solid, which
   is the works treatment by another name.

   :not([stroke="none"]) because setting stroke on a shape that had none would
   draw an outline round it that was never in the drawing. nth-of-type() would
   also work and is not used: it is correct until the artwork is edited, and then
   it is silently wrong. */

    .site-footer .sky-top .skyline #dragline [stroke]:not([stroke="none"]),
    .site-footer .sky-top .skyline #steel-man [stroke]:not([stroke="none"]){
        stroke: var(--sky-plant);
    }

/* The plinth is the thing the statue stands in front of: same relationship as the
   works' plant and its shed, so the same two tones. */

    .site-footer .sky-top .skyline #memorial-plinth{
        color: var(--sky-plant);
    }

/* The skyline, standing on the top edge.

   OVERLAP THE FOOTER BY A PIXEL RATHER THAN MEET IT EXACTLY. Jamie saw a hairline
   where the drawing met the footer in the mockup. Two surfaces that overlap have no
   shared boundary to round, so there is nothing for a fractional device pixel ratio
   to antialias into a blend row. The bottom of the drawing is its ground strip, in
   the footer's own colour, so the overlapping pixel cannot be seen. */

    .site-footer .sky-top{
        position: absolute;
        right: 0;
        bottom: calc(100% - 1px);
        left: 0;
        z-index: 0;
        line-height: 0;
        pointer-events: none;
    }

    .site-footer .sky-top .skyline{
        display: block;
        width: 100%;
        height: auto;
        color: var(--bg-colour);
    }

/* The clipped layer the soft shapes live in. */

    .site-footer .footer-bg{
        position: absolute;
        z-index: 0;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .site-footer .footer-bg .shape{
        position: absolute;
        display: block;
    }

    .site-footer .footer-bg .shape-1{
        top: -14%;
        left: -10%;
        width: 46%;
        aspect-ratio: 1.15;
        border-radius: 56% 44% 62% 38% / 48% 58% 42% 52%;
        background-color: color-mix(in srgb, var(--bg-colour) 94%, var(--title-colour));
    }

    .site-footer .footer-bg .shape-2{
        top: 6%;
        right: -14%;
        width: 54%;
        aspect-ratio: .9;
        border-radius: 38% 62% 44% 56% / 58% 42% 58% 42%;
        background-color: color-mix(in srgb, var(--bg-colour) 90%, var(--title-colour));
    }

    .site-footer .footer-bg .shape-3{
        top: 62%;
        left: 16%;
        width: 38%;
        aspect-ratio: 1.3;
        border-radius: 62% 38% 52% 48% / 42% 62% 38% 58%;
        background-color: color-mix(in srgb, var(--bg-colour) 97%, var(--title-colour));
    }

    .site-footer .inner-wrp,
    .site-footer .bar-inner-wrp{
        position: relative;
        z-index: 1;
    }

    .site-footer .inner-wrp{
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-block: 3rem 0;
    }

    .site-footer a{
        color: var(--title-colour);
        text-decoration: underline;
    }

    .site-footer .logo-wrp{
        max-width: 330px;
        margin-bottom: 1.5rem;
        padding: .9rem 1.1rem;
        border-radius: var(--radius-plate);
        background-color: var(--title-colour);
        line-height: 0;
    }

    .site-footer .logo-wrp img{
        width: 100%;
        height: auto;
    }

/* The social links, under the about text in the brand column. The markup was
   always in master's footer; this theme hid it until 2026-10-02, because the
   mockup put social in the header only. Jamie asked for them in both.

   Same treatment as the header's, so the two rows read as one set of controls
   rather than two designs: a disc lifted off the ground, the mark in the accent,
   and the two swapping on hover. It lands differently here only because the
   scheme underneath it is the navy rather than the white. */

    .site-footer .brand-col .social-list a{
        width: 40px;
        height: 40px;
        background-color: color-mix(in srgb, var(--line-colour) 55%, var(--bg-colour));
        color: var(--btn-bg-colour);
        transition: background-color .15s ease, color .15s ease;
    }

/* opacity: 1 cancels the base rule's fade, which would otherwise run at the same
   time as the colours swap and read as a flicker. */

    .site-footer .brand-col .social-list a:hover,
    .site-footer .brand-col .social-list a:focus-visible{
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
        opacity: 1;
    }

    .site-footer .heading{
        margin-bottom: .5em;
        font-family: var(--font-head);
        font-size: 1.2rem;
        letter-spacing: -.015em;
        text-transform: none;
        color: var(--title-colour);
    }

    .site-footer .footer-col .menu{
        gap: .4rem;
    }

    .site-footer .contact-list li{
        margin-bottom: .4rem;
    }

/* The legal row. Full width across the footer, its own rule, above the copyright.
   The rule moved here from .bar-inner-wrp: one divider, not two. */

    .site-footer .legal-bar{
        position: relative;
        z-index: 1;
        margin-top: 2.5rem;
        border-top: 2px solid var(--line-colour);
    }

    .site-footer .legal-inner-wrp{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 2rem;
        row-gap: .5rem;
        padding-block: 1.1rem;
        font-size: 1rem;
    }

    .site-footer .legal-inner-wrp .menu{
        display: flex;
        flex-wrap: wrap;
        column-gap: 2rem;
        row-gap: .5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

/* The cookie settings button sits at the far end of the row. Once the row wraps
   that would strand it right aligned on a line of its own, under left aligned
   links, so below 576 it just follows them. */

    @media(min-width: 576px){

        .site-footer .legal-inner-wrp .cookie-settings-btn{
            margin-left: auto;
        }

    }

    .site-footer .bar-inner-wrp{
        justify-content: flex-start;
        column-gap: 2rem;
        padding-block: 1.1rem 2rem;
        font-size: 1rem;
    }

    @media(min-width: 768px){

        .site-footer .inner-wrp{
            grid-template-columns: 2fr 1fr 1fr;
        }

    }

/*---------------------------------------------------------------------------------*\
    Last section
    - Room for the skyline under the last section on a page, so the drawing
      stands against that section's own colour, as it does in the Squared mockup
    - A page with no components (the blog pages) gets the room as empty space
\*---------------------------------------------------------------------------------*/
    #main > article > .component:last-child{
        padding-bottom: calc(var(--section-pad) + var(--sky-h));
    }

    #main:not(:has(> article > .component:last-child))::after{
        content: '';
        display: block;
        height: var(--sky-h);
    }

/*---------------------------------------------------------------------------------*\
    Modals
    - ::backdrop cannot read the scheme variables in every browser, so its
      colour is written out (the Secondary scheme's background)
\*---------------------------------------------------------------------------------*/
    dialog.modal{
        background-color: var(--bg-colour);
        color: var(--body-colour);
    }

    dialog.modal::backdrop{
        background: rgba(12, 35, 64, .6);
    }

    dialog.modal .close-btn{
        color: var(--title-colour);
    }

/* The close button is a round button, not a bare cross (Jarno, 2026-11-03).

   showModal() moves focus onto it when the notice opens on its own, and a page
   that has had no click yet counts that as keyboard focus, so the focus ring is
   drawn straight away. Round, the ring follows the button and reads as part of
   it instead of a square stuck in the corner. The ring is KEPT: a keyboard user
   needs to see where focus is (WCAG 2.4.7). 44px is the target size the arrows
   on the sponsors carousel use. */

    dialog.modal .close-btn{
        display: grid;
        place-items: center;
        top: .75rem;
        right: .75rem;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: color-mix(in srgb, var(--title-colour) 8%, var(--bg-colour));
        font-size: 1.75rem;
        transition: background-color .15s ease;
    }

    dialog.modal .close-btn:hover{
        background-color: color-mix(in srgb, var(--title-colour) 16%, var(--bg-colour));
    }

    dialog.modal .close-btn:focus-visible{
        outline-offset: 2px;
    }

/* The notice itself takes focus when it opens (theme-css/site.js), so the close
   button has no ring until a keyboard user Tabs to it. The dialog is not a
   control, so it shows no ring of its own. */

    dialog.modal:focus,
    dialog.modal:focus-visible{
        outline: none;
    }

/* The site notice wears the accent along its top edge, so it reads as a notice and
   not as a form the visitor has to fill in.

   --alt-btn-bg-colour, NOT --btn-bg-colour. A modal sits outside every section, so
   it reads the root scheme, which is Default: its button colour is the navy, and a
   navy line on a white card is a border rather than an accent. Default's ALT is
   Secondary, whose button colour is the orange, which is the one the eye reads as
   "this is a notice". */

    dialog.modal.site-notice{
        border-top: 5px solid var(--alt-btn-bg-colour);
    }

/*---------------------------------------------------------------------------------*\
    Cookie Banner (uses the Grey scheme)
\*---------------------------------------------------------------------------------*/
    .cookie-banner{
        background-color: var(--bg-colour);
        color: var(--body-colour);
        border-bottom: 1px solid var(--line-colour);
    }

    .cookie-banner .title{
        color: var(--title-colour);
    }

    .cookie-banner .choice input{
        accent-color: var(--btn-bg-colour);
    }

    .cookie-table th,
    .cookie-table td{
        border-bottom-color: var(--line-colour);
    }

/*---------------------------------------------------------------------------------*\
    Blog Cards
    - The card look everywhere: listing pages, related posts and the News Feed
    - Cards use the Default colour scheme (class default-bg), so they stay
      readable on any section colour
\*---------------------------------------------------------------------------------*/
    .post-card{
        background-color: var(--bg-colour);
        color: var(--body-colour);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    .post-card .card-link{
        color: var(--title-colour);
    }

    .post-card .excerpt{
        color: var(--body-colour);
    }

    .post-card .date{
        color: var(--subtitle-colour);
    }

    .post-card .read-more{
        font-weight: 600;
        color: var(--link-colour);
    }

    .post-card .type{
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--link-colour);
    }

    .blog-post .featured-img{
        border-radius: var(--radius);
    }

/*---------------------------------------------------------------------------------*\
    Blog Pages
\*---------------------------------------------------------------------------------*/
    .blog-listing .cats-list a{
        border-color: var(--link-colour);
    }

    .blog-listing .cats-list a[aria-current="page"]{
        background-color: var(--link-colour);
        color: var(--bg-colour);
    }

    .pagination .page-numbers.current{
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
    }

    .blog-post .meta{
        color: var(--subtitle-colour);
    }

    /* Related posts use the Grey scheme (class grey-bg) */
    .related-posts{
        background-color: var(--bg-colour);
        color: var(--body-colour);
    }

/*---------------------------------------------------------------------------------*\
    Forms (Ninja Forms)
    - The fields take the site's look: the one radius, the scheme's line colour,
      and the orange focus ring the rest of the site uses
    - The submit button is the scheme's main button, pill shaped like every other
      button on the site
    - The field itself is always the Default scheme's white, whatever band the
      form is standing on, because a text box has to look like somewhere to type
    - Layout is in assets/css/base.css under Forms
\*---------------------------------------------------------------------------------*/
    .nf-form-cont .nf-form-title h3{
        font-size: 1.5rem;
    }

    .nf-form-cont .nf-field-label label{
        color: var(--title-colour);
        font-family: var(--font-head);
        font-size: 1.05rem;
        font-weight: 600;
    }

    .nf-form-cont .ninja-forms-req-symbol{
        color: var(--link-colour);
    }

    .nf-form-cont .nf-form-fields-required,
    .nf-form-cont .nf-field-description{
        color: var(--subtitle-colour);
    }

    .nf-form-cont .nf-element{
        border-color: var(--line-colour);
        border-radius: var(--radius-small);
        background-color: #FFFFFF;
        color: #041C3E;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .nf-form-cont .nf-element::placeholder{
        color: #6B7684;
    }

    .nf-form-cont .nf-element:hover{
        border-color: var(--btn-bg-colour);
    }

    .nf-form-cont .nf-element:focus{
        outline: none;
        border-color: #FF7A1A;
        box-shadow: 0 0 0 4px rgba(255, 122, 26, .3);
    }

    .nf-form-cont select.nf-element{
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23041C3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 20px 20px;
    }

    .nf-form-cont .nf-error .nf-element{
        border-color: #B3261E;
    }

    .nf-form-cont .nf-error-msg{
        color: #B3261E;
        font-weight: 600;
    }

    .nf-form-cont .submit-container .nf-element{
        padding: .85rem 2rem;
        border: 0;
        border-radius: 999px;
        background-color: var(--btn-bg-colour);
        box-shadow: var(--shadow-btn);
        color: var(--btn-txt-colour);
        font-family: var(--font-head);
        font-size: 1.2rem;
        font-weight: 700;
        transition: background-color .15s ease, color .15s ease;
    }

    .nf-form-cont .submit-container .nf-element:hover{
        background-color: var(--btn-hover-bg-colour);
        color: var(--btn-hover-txt-colour);
    }

    .nf-form-cont .nf-response-msg{
        border-radius: var(--radius-small);
        background-color: var(--alt-bg-colour);
        color: var(--alt-body-colour);
    }

/*---------------------------------------------------------------------------------*\
    Events and opportunities
    - The squared mockup's news section, which is its TIMELINE: a hairline down
      the left in the scheme's line colour, an orange dot for each item, the date
      above the title in a darkened orange, and the picture beside the words
    - THE DATE'S ORANGE IS DERIVED, NOT A NEW COLOUR. The scheme has no dark
      orange for text, and the bright one fails contrast on anything pale, so it
      is the alt scheme's button pair mixed: its background (the orange) 60% into
      its text (the near black). MEASURED on the two bands this site puts a
      timeline on: 6.2:1 on white and 5.0:1 on the grey in oklch, 5.8 and 4.6 on
      the srgb fallback. All four pass WCAG AA. A coloured band would need
      checking again before a timeline is put on one
    - The dot is the alt scheme's button background on its own, the same orange
      the FAQ markers use
    - Layout is in assets/css/base.css under Events
\*---------------------------------------------------------------------------------*/
    .event-list::before{
        background-color: var(--line-colour);
    }

    .event-list > li::before{
        background-color: var(--alt-btn-bg-colour);
    }

    .event-row .date{
        color: color-mix(in srgb, var(--alt-btn-bg-colour) 60%, var(--alt-btn-txt-colour));
        color: color-mix(in oklch, var(--alt-btn-bg-colour) 60%, var(--alt-btn-txt-colour));
        font-family: var(--font-head);
        font-size: 1rem;
        font-weight: 600;
    }

    .event-row .title{
        font-size: 1.35rem;
    }

    .event-row .title a{
        color: var(--title-colour);
        text-decoration: none;
    }

    .event-row:hover .title a,
    .event-row .title a:focus-visible{
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .event-row .txt{
        color: var(--body-colour);
    }

    .event-row .img-wrp{
        border-radius: var(--radius-small);
        background-color: var(--line-colour);
    }

    /* The mascot standing in for a missing picture, on the orange tile it has on
       the favicon */
    .event-row .img-wrp.is-fallback{
        background-color: var(--alt-btn-bg-colour);
    }

    .event-single .featured-img{
        border-radius: var(--radius);
    }

/*---------------------------------------------------------------------------------*\
    Component Overlays
    - The overlay on components with a background image or video is the
      Overlay scheme's background colour (Strata > Theme > Dark Overlay /
      Light Overlay), see-through. Layout for .overlay is in base.css
    - With the default colours these strengths keep text at 4.5:1 over any
      image (WCAG 1.4.3). Do not go lighter; recheck if the colours change
\*---------------------------------------------------------------------------------*/
    .component .overlay{
        background-color: var(--bg-colour);
    }

    .component.overlay-dark .overlay{
        opacity: .7;
    }

    .component.overlay-light .overlay{
        opacity: .6;
    }

/*---------------------------------------------------------------------------------*\
    Motion
    - The soft shapes drift and change shape, the hero's photographs and the
      mascot float, exactly as in the mockup (the keyframes are the mockup's)
    - Only while <html> has the class motion-on. theme-css/site.js adds it,
      unless the visitor has asked for reduced motion or has paused it, so with
      no script, reduced motion, or the pause button pressed, nothing moves
    - The pause button (.motion-toggle) is written by site.js: a text button in
      the footer bar. WCAG 2.2.2 (Level A) needs one for movement that goes on
      by itself. The round one in the hero's corner was removed 2026-10-01
\*---------------------------------------------------------------------------------*/
    @keyframes drift-a{

        0%,
        100%{
            transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        }

        33%{
            transform: translate3d(5%, -6.25%, 0) rotate(8.75deg) scale(1.0875);
        }

        66%{
            transform: translate3d(-6.25%, 5%, 0) rotate(-7.5deg) scale(.9375);
        }

    }

    @keyframes drift-b{

        0%,
        100%{
            transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        }

        40%{
            transform: translate3d(-7.5%, 6.25%, 0) rotate(-11.25deg) scale(1.0625);
        }

        75%{
            transform: translate3d(3.75%, -7.5%, 0) rotate(6.25deg) scale(.9625);
        }

    }

    @keyframes drift-c{

        0%,
        100%{
            transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        }

        50%{
            transform: translate3d(8.75%, 3.75%, 0) rotate(13.75deg) scale(1.1125);
        }

    }

    @keyframes morph-a{

        0%,
        100%{
            border-radius: 56% 44% 62% 38% / 48% 58% 42% 52%;
        }

        50%{
            border-radius: 36% 64% 32% 68% / 65.5% 34.5% 64.5% 35.5%;
        }

    }

    @keyframes morph-b{

        0%,
        100%{
            border-radius: 38% 62% 44% 56% / 58% 42% 58% 42%;
        }

        50%{
            border-radius: 70.5% 29.5% 59% 41% / 35.5% 64.5% 35.5% 64.5%;
        }

    }

    @keyframes float-a{

        0%,
        100%{
            transform: translate3d(0, 0, 0);
        }

        50%{
            transform: translate3d(0, -14px, 0);
        }

    }

    @keyframes float-b{

        0%,
        100%{
            transform: translate3d(0, 0, 0);
        }

        50%{
            transform: translate3d(0, 12px, 0);
        }

    }

    /* The soft shapes, in every section that has them (hero, page heading,
       Left / Right Text): the mockup's resting shapes, then its movement */
    .component .shape-1{
        border-radius: 56% 44% 62% 38% / 48% 58% 42% 52%;
    }

    .component .shape-2{
        border-radius: 38% 62% 44% 56% / 58% 42% 58% 42%;
    }

    .component .shape-3{
        border-radius: 62% 38% 52% 48% / 42% 62% 38% 58%;
    }

    .component .shape-4{
        border-radius: 48% 52% 38% 62% / 56% 44% 56% 44%;
    }

    .motion-on .component .shape,
    .motion-on .site-footer .footer-bg .shape{
        will-change: transform, border-radius;
    }

    .motion-on .component .shape-1,
    .motion-on .site-footer .footer-bg .shape-1{
        animation: drift-a 26s ease-in-out infinite, morph-a 19s ease-in-out infinite;
    }

    .motion-on .component .shape-2,
    .motion-on .site-footer .footer-bg .shape-2{
        animation: drift-b 31s ease-in-out infinite, morph-b 23s ease-in-out infinite;
    }

    .motion-on .component .shape-3,
    .motion-on .site-footer .footer-bg .shape-3{
        animation: drift-c 37s ease-in-out infinite, morph-a 29s ease-in-out infinite;
    }

    .motion-on .component .shape-4{
        animation: drift-b 43s ease-in-out infinite reverse, morph-b 33s ease-in-out infinite;
    }

    /* The pause button */
    .motion-toggle{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        border: 0;
        font: inherit;
        cursor: pointer;
    }

    .motion-toggle svg{
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    .motion-toggle-text{
        padding: 0;
        background: none;
        color: var(--title-colour);
        text-decoration: underline;
    }

/*---------------------------------------------------------------------------------*\
    Reveal
    - Sections' contents rise and fade in as they arrive, as WOW.js and
      Animate.css did in the mockup (fadeInUp, fadeInLeft, fadeInRight)
    - site.js only marks things that start below the first screen, and only
      while motion is on, so nothing is hidden without the script, with reduced
      motion, or once paused. A marked item that has not arrived yet is still in
      the page for screen readers
\*---------------------------------------------------------------------------------*/
    .motion-on .reveal{
        opacity: 0;
        transform: translate3d(0, 40px, 0);
        transition: opacity .75s ease, transform .75s ease;
    }

    .motion-on .reveal.reveal-left{
        transform: translate3d(-40px, 0, 0);
    }

    .motion-on .reveal.reveal-right{
        transform: translate3d(40px, 0, 0);
    }

    .motion-on .reveal.is-in{
        opacity: 1;
        transform: none;
    }