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

    Strata: base.css
    Reset + tokens + colour-scheme CONSUMPTION + grid + type + utils.

    The per-scheme colour VALUES are editable on the Theme options page
    and generated as CSS at runtime (includes/color-schemes.php +
    enqueue.php). This file only *uses* the scheme variables
    (--bg-colour, --title-colour, --btn-bg-colour, --alt-btn-bg-colour …).
    Component-specific styles live in each component's own .css.

\*---------------------------------------------------------------------------------*/
    :root{
        /* Layout */
        --container: 1200px;
        --container-wide: 1440px;
        --gutter: 1.5rem;
        --section-pad: 4rem;
        /* Type */
        --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-head: var(--font-body);
        --fs-base: 1rem;
        --lh-base: 1.6;
        --radius: 8px;
        /* The one shadow style. Override it in theme-css/site.css */
        --shadow: 0 6px 24px rgba(12, 35, 64, .08);
        /* Fallback active scheme: overridden by the generated scheme CSS.
           Keeps the page usable if options/generation are unavailable. */
        --bg-colour: #ffffff;
        --title-colour: #0c2340;
        --subtitle-colour: #667085;
        --body-colour: #1d1d1f;
        --link-colour: #2155a8;
        --btn-bg-colour: #2155a8;
        --btn-txt-colour: #ffffff;
        --btn-hover-bg-colour: #0c2340;
        --btn-hover-txt-colour: #ffffff;
        --alt-btn-bg-colour: #ffffff;
        --alt-btn-txt-colour: #2155a8;
        --alt-btn-hover-bg-colour: #0c2340;
        --alt-btn-hover-txt-colour: #ffffff;
        --line-colour: #dbdee2;
    }

/*---------------------------------------------------------------------------------*\
    Reset
\*---------------------------------------------------------------------------------*/
    *,
    *::before,
    *::after{
        box-sizing: border-box;
    }

    *{
        margin: 0;
    }

    /* Anything with the hidden attribute stays hidden, whatever display a class gives it */
    [hidden]{
        display: none !important;
    }

    html{
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        /* Keeps focused and linked-to content clear of the sticky header (WCAG 2.4.11).
           --admin-bar-h is 0 for a visitor and the toolbar's height for an editor,
           set below, so an anchor lands clear of both.
           --stuck-h is the stuck header's own measured height, written by
           assets/js/theme.js while the bar is up and removed when it goes. It has to
           be measured: the bar is one row on a desktop and two on a phone, and a
           theme can make it any height it likes. 6rem is the fallback for a theme
           that never sticks, and for the moment before the script runs. */
        --admin-bar-h: 0px;
        scroll-padding-top: calc(var(--stuck-h, 6rem) + var(--admin-bar-h));
    }

    body{
        font-family: var(--font-body);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        background: var(--bg-colour);
        color: var(--body-colour);
    }

    img,
    picture,
    svg,
    video{
        display: block;
        max-width: 100%;
        height: auto;
    }

    a{
        color: var(--link-colour);
        text-decoration: none;
    }

    a:hover{
        text-decoration: underline;
    }

    /* Links inside text are underlined, so they are not told apart by colour alone (WCAG 1.4.1) */
    .txt-wrp a,
    .entry-content a,
    .answer a,
    .about-txt a,
    .cookie-banner .txt-wrp a,
    .cookie-list-wrp a{
        text-decoration: underline;
        text-underline-offset: .15em;
    }

    .txt-wrp a:hover,
    .entry-content a:hover,
    .answer a:hover,
    .about-txt a:hover{
        text-decoration-thickness: 2px;
    }

    /* The skip link and blog pages move focus to <main>; no outline round the whole page */
    #main:focus{
        outline: none;
    }

    ul[class],
    ol[class]{
        list-style: none;
        padding: 0;
    }

    input,
    button,
    textarea,
    select{
        font: inherit;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        font-family: var(--font-head);
        color: var(--title-colour);
        line-height: 1.2;
        margin-bottom: .5em;
    }

    h1{
        font-size: clamp(2rem,4vw,3rem);
    }

    h2{
        font-size: clamp(1.6rem,3vw,2.25rem);
    }

    h3{
        font-size: 1.4rem;
    }

    h4{
        font-size: 1.2rem;
    }

    /* h5 is body text size, set apart by weight (h6 is never used) */
    h5{
        font-size: var(--fs-base);
        font-weight: 700;
    }

    p{
        margin-bottom: 1rem;
    }

    p:last-child{
        margin-bottom: 0;
    }

    /* h6 is never used (removed from the editor). If one appears, it looks exactly like a paragraph */
    h6{
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;
        margin-bottom: 1rem;
    }

    h6:last-child{
        margin-bottom: 0;
    }

/*---------------------------------------------------------------------------------*\
    Layout / container
\*---------------------------------------------------------------------------------*/
    .container{
        width: 100%;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .container.wide{
        max-width: var(--container-wide);
    }

/*---------------------------------------------------------------------------------*\
    Flex grid (mobile-first)
    - The theme's six break points, and the only ones to use in any CSS:
        Mobile (xs)                 0px (default)
        Large phone (sm)            576px
        Tablet (md)                 768px
        Small laptop (lg)           992px
        Laptop (xl)                 1170px
        Desktop (xxl)               1470px
    - Write mobile first with min-width, e.g. @media(min-width: 768px). For
      "below" a break point use one pixel less, e.g. @media(max-width: 767px)
\*---------------------------------------------------------------------------------*/
    .flex-row{
        display: flex;
        flex-wrap: wrap;
        margin-inline: calc(var(--gutter) / -2);
    }

    .flex-col{
        width: 100%;
        padding-inline: calc(var(--gutter) / 2);
    }

    .no-gutters{
        margin-inline: 0;
    }

    .no-gutters > .flex-col{
        padding-inline: 0;
    }

    /* Flex alignment + text utilities (all sizes) */
    .justify-content-start{
        justify-content: flex-start;
    }

    .justify-content-center{
        justify-content: center;
    }

    .justify-content-end{
        justify-content: flex-end;
    }

    .justify-content-between{
        justify-content: space-between;
    }

    .justify-content-around{
        justify-content: space-around;
    }

    .justify-content-evenly{
        justify-content: space-evenly;
    }

    .align-items-start{
        align-items: flex-start;
    }

    .align-items-center{
        align-items: center;
    }

    .align-items-end{
        align-items: flex-end;
    }

    .align-items-baseline{
        align-items: baseline;
    }

    .align-items-stretch{
        align-items: stretch;
    }

    .align-self-start{
        align-self: flex-start;
    }

    .align-self-center{
        align-self: center;
    }

    .align-self-end{
        align-self: flex-end;
    }

    .align-self-stretch{
        align-self: stretch;
    }

    .txt-start{
        text-align: start;
    }

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

    .txt-end{
        text-align: end;
    }

    /* Columns: n/12 widths. xs all sizes; sm >=576; md >=768; lg >=992; xl >=1170; xxl >=1470. */
    .xs-1{
        width: 8.3333%;
    }

    .xs-2{
        width: 16.6667%;
    }

    .xs-3{
        width: 25%;
    }

    .xs-4{
        width: 33.3333%;
    }

    .xs-5{
        width: 41.6667%;
    }

    .xs-6{
        width: 50%;
    }

    .xs-7{
        width: 58.3333%;
    }

    .xs-8{
        width: 66.6667%;
    }

    .xs-9{
        width: 75%;
    }

    .xs-10{
        width: 83.3333%;
    }

    .xs-11{
        width: 91.6667%;
    }

    .xs-12{
        width: 100%;
    }

    @media(min-width: 576px){

        .sm-1{
            width: 8.3333%;
        }

        .sm-2{
            width: 16.6667%;
        }

        .sm-3{
            width: 25%;
        }

        .sm-4{
            width: 33.3333%;
        }

        .sm-5{
            width: 41.6667%;
        }

        .sm-6{
            width: 50%;
        }

        .sm-7{
            width: 58.3333%;
        }

        .sm-8{
            width: 66.6667%;
        }

        .sm-9{
            width: 75%;
        }

        .sm-10{
            width: 83.3333%;
        }

        .sm-11{
            width: 91.6667%;
        }

        .sm-12{
            width: 100%;
        }

        .justify-content-sm-start{
            justify-content: flex-start;
        }

        .justify-content-sm-center{
            justify-content: center;
        }

        .justify-content-sm-end{
            justify-content: flex-end;
        }

        .justify-content-sm-between{
            justify-content: space-between;
        }

        .justify-content-sm-around{
            justify-content: space-around;
        }

        .justify-content-sm-evenly{
            justify-content: space-evenly;
        }

        .align-items-sm-start{
            align-items: flex-start;
        }

        .align-items-sm-center{
            align-items: center;
        }

        .align-items-sm-end{
            align-items: flex-end;
        }

        .align-items-sm-baseline{
            align-items: baseline;
        }

        .align-items-sm-stretch{
            align-items: stretch;
        }

        .align-self-sm-start{
            align-self: flex-start;
        }

        .align-self-sm-center{
            align-self: center;
        }

        .align-self-sm-end{
            align-self: flex-end;
        }

        .align-self-sm-stretch{
            align-self: stretch;
        }

        .txt-sm-start{
            text-align: start;
        }

        .txt-sm-center{
            text-align: center;
        }

        .txt-sm-end{
            text-align: end;
        }

        .order-sm-first{
            order: -1;
        }

        .order-sm-last{
            order: 1;
        }

    }

    @media(min-width: 768px){

        .md-1{
            width: 8.3333%;
        }

        .md-2{
            width: 16.6667%;
        }

        .md-3{
            width: 25%;
        }

        .md-4{
            width: 33.3333%;
        }

        .md-5{
            width: 41.6667%;
        }

        .md-6{
            width: 50%;
        }

        .md-7{
            width: 58.3333%;
        }

        .md-8{
            width: 66.6667%;
        }

        .md-9{
            width: 75%;
        }

        .md-10{
            width: 83.3333%;
        }

        .md-11{
            width: 91.6667%;
        }

        .md-12{
            width: 100%;
        }

        .justify-content-md-start{
            justify-content: flex-start;
        }

        .justify-content-md-center{
            justify-content: center;
        }

        .justify-content-md-end{
            justify-content: flex-end;
        }

        .justify-content-md-between{
            justify-content: space-between;
        }

        .justify-content-md-around{
            justify-content: space-around;
        }

        .justify-content-md-evenly{
            justify-content: space-evenly;
        }

        .align-items-md-start{
            align-items: flex-start;
        }

        .align-items-md-center{
            align-items: center;
        }

        .align-items-md-end{
            align-items: flex-end;
        }

        .align-items-md-baseline{
            align-items: baseline;
        }

        .align-items-md-stretch{
            align-items: stretch;
        }

        .align-self-md-start{
            align-self: flex-start;
        }

        .align-self-md-center{
            align-self: center;
        }

        .align-self-md-end{
            align-self: flex-end;
        }

        .align-self-md-stretch{
            align-self: stretch;
        }

        .txt-md-start{
            text-align: start;
        }

        .txt-md-center{
            text-align: center;
        }

        .txt-md-end{
            text-align: end;
        }

        .order-md-first{
            order: -1;
        }

        .order-md-last{
            order: 1;
        }

    }

    @media(min-width: 992px){

        .lg-1{
            width: 8.3333%;
        }

        .lg-2{
            width: 16.6667%;
        }

        .lg-3{
            width: 25%;
        }

        .lg-4{
            width: 33.3333%;
        }

        .lg-5{
            width: 41.6667%;
        }

        .lg-6{
            width: 50%;
        }

        .lg-7{
            width: 58.3333%;
        }

        .lg-8{
            width: 66.6667%;
        }

        .lg-9{
            width: 75%;
        }

        .lg-10{
            width: 83.3333%;
        }

        .lg-11{
            width: 91.6667%;
        }

        .lg-12{
            width: 100%;
        }

        .justify-content-lg-start{
            justify-content: flex-start;
        }

        .justify-content-lg-center{
            justify-content: center;
        }

        .justify-content-lg-end{
            justify-content: flex-end;
        }

        .justify-content-lg-between{
            justify-content: space-between;
        }

        .justify-content-lg-around{
            justify-content: space-around;
        }

        .justify-content-lg-evenly{
            justify-content: space-evenly;
        }

        .align-items-lg-start{
            align-items: flex-start;
        }

        .align-items-lg-center{
            align-items: center;
        }

        .align-items-lg-end{
            align-items: flex-end;
        }

        .align-items-lg-baseline{
            align-items: baseline;
        }

        .align-items-lg-stretch{
            align-items: stretch;
        }

        .align-self-lg-start{
            align-self: flex-start;
        }

        .align-self-lg-center{
            align-self: center;
        }

        .align-self-lg-end{
            align-self: flex-end;
        }

        .align-self-lg-stretch{
            align-self: stretch;
        }

        .txt-lg-start{
            text-align: start;
        }

        .txt-lg-center{
            text-align: center;
        }

        .txt-lg-end{
            text-align: end;
        }

        .order-lg-first{
            order: -1;
        }

        .order-lg-last{
            order: 1;
        }

    }

    @media(min-width: 1170px){

        .xl-1{
            width: 8.3333%;
        }

        .xl-2{
            width: 16.6667%;
        }

        .xl-3{
            width: 25%;
        }

        .xl-4{
            width: 33.3333%;
        }

        .xl-5{
            width: 41.6667%;
        }

        .xl-6{
            width: 50%;
        }

        .xl-7{
            width: 58.3333%;
        }

        .xl-8{
            width: 66.6667%;
        }

        .xl-9{
            width: 75%;
        }

        .xl-10{
            width: 83.3333%;
        }

        .xl-11{
            width: 91.6667%;
        }

        .xl-12{
            width: 100%;
        }

        .justify-content-xl-start{
            justify-content: flex-start;
        }

        .justify-content-xl-center{
            justify-content: center;
        }

        .justify-content-xl-end{
            justify-content: flex-end;
        }

        .justify-content-xl-between{
            justify-content: space-between;
        }

        .justify-content-xl-around{
            justify-content: space-around;
        }

        .justify-content-xl-evenly{
            justify-content: space-evenly;
        }

        .align-items-xl-start{
            align-items: flex-start;
        }

        .align-items-xl-center{
            align-items: center;
        }

        .align-items-xl-end{
            align-items: flex-end;
        }

        .align-items-xl-baseline{
            align-items: baseline;
        }

        .align-items-xl-stretch{
            align-items: stretch;
        }

        .align-self-xl-start{
            align-self: flex-start;
        }

        .align-self-xl-center{
            align-self: center;
        }

        .align-self-xl-end{
            align-self: flex-end;
        }

        .align-self-xl-stretch{
            align-self: stretch;
        }

        .txt-xl-start{
            text-align: start;
        }

        .txt-xl-center{
            text-align: center;
        }

        .txt-xl-end{
            text-align: end;
        }

        .order-xl-first{
            order: -1;
        }

        .order-xl-last{
            order: 1;
        }

    }

    @media(min-width: 1470px){

        .xxl-1{
            width: 8.3333%;
        }

        .xxl-2{
            width: 16.6667%;
        }

        .xxl-3{
            width: 25%;
        }

        .xxl-4{
            width: 33.3333%;
        }

        .xxl-5{
            width: 41.6667%;
        }

        .xxl-6{
            width: 50%;
        }

        .xxl-7{
            width: 58.3333%;
        }

        .xxl-8{
            width: 66.6667%;
        }

        .xxl-9{
            width: 75%;
        }

        .xxl-10{
            width: 83.3333%;
        }

        .xxl-11{
            width: 91.6667%;
        }

        .xxl-12{
            width: 100%;
        }

        .justify-content-xxl-start{
            justify-content: flex-start;
        }

        .justify-content-xxl-center{
            justify-content: center;
        }

        .justify-content-xxl-end{
            justify-content: flex-end;
        }

        .justify-content-xxl-between{
            justify-content: space-between;
        }

        .justify-content-xxl-around{
            justify-content: space-around;
        }

        .justify-content-xxl-evenly{
            justify-content: space-evenly;
        }

        .align-items-xxl-start{
            align-items: flex-start;
        }

        .align-items-xxl-center{
            align-items: center;
        }

        .align-items-xxl-end{
            align-items: flex-end;
        }

        .align-items-xxl-baseline{
            align-items: baseline;
        }

        .align-items-xxl-stretch{
            align-items: stretch;
        }

        .align-self-xxl-start{
            align-self: flex-start;
        }

        .align-self-xxl-center{
            align-self: center;
        }

        .align-self-xxl-end{
            align-self: flex-end;
        }

        .align-self-xxl-stretch{
            align-self: stretch;
        }

        .txt-xxl-start{
            text-align: start;
        }

        .txt-xxl-center{
            text-align: center;
        }

        .txt-xxl-end{
            text-align: end;
        }

        .order-xxl-first{
            order: -1;
        }

        .order-xxl-last{
            order: 1;
        }

    }

/*---------------------------------------------------------------------------------*\
    Section / component (consume the active scheme)
\*---------------------------------------------------------------------------------*/
    .component{
        padding-block: var(--section-pad);
        background-color: var(--bg-colour);
        color: var(--body-colour);
    }

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

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

    /* General component areas, shared by every component */
    .component .top-txt-wrp{
        text-align: center;
        max-width: 48rem;
        margin: 0 auto 2.5rem;
    }

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

    .component .btns-wrp{
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .component .section-btn-wrp{
        text-align: center;
        margin-top: 2.5rem;
    }

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

    /* Overlay over a background image or video (Overlay option: overlay-dark / overlay-light / overlay-none).
       Its colours are the Dark Overlay and Light Overlay schemes (Strata > Theme), applied in theme-css/site.css */
    .component .overlay{
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .component.overlay-none .overlay{
        display: none;
    }

    /* Subtitle / eyebrow helper picks up the scheme's subtitle colour. */
    .subtitle,
    .eyebrow{
        color: var(--subtitle-colour);
    }

/*---------------------------------------------------------------------------------*\
    Buttons
\*---------------------------------------------------------------------------------*/
    .btn{
        display: inline-block;
        padding: .75rem 1.5rem;
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
        border: 2px solid transparent;
        border-radius: var(--radius);
        font-weight: 600;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }

    .btn:hover{
        background-color: var(--btn-hover-bg-colour);
        color: var(--btn-hover-txt-colour);
        text-decoration: none;
    }

    /* Contrasting alternate button: uses the section's alt scheme. */
    .btn-alt{
        background-color: var(--alt-btn-bg-colour);
        color: var(--alt-btn-txt-colour);
    }

    .btn-alt:hover{
        background-color: var(--alt-btn-hover-bg-colour);
        color: var(--alt-btn-hover-txt-colour);
    }

    /* Outline variant: scheme button colour as border + text. */
    .btn-outline{
        background-color: transparent;
        color: var(--btn-bg-colour);
        border-color: var(--btn-bg-colour);
    }

    .btn-outline:hover{
        background-color: var(--btn-bg-colour);
        color: var(--btn-txt-colour);
    }

    .btn-wrp{
        margin-top: 1rem;
    }

/*---------------------------------------------------------------------------------*\
    Icons
\*---------------------------------------------------------------------------------*/
    .icon{
        width: 1.25rem;
        height: 1.25rem;
        flex: none;
    }

/*---------------------------------------------------------------------------------*\
    Elements
\*---------------------------------------------------------------------------------*/
    .img-el{
        display: block;
        width: 100%;
        height: auto;
    }

    /* Modal (native <dialog>)

       margin: auto IS NOT DECORATION. A <dialog> opened with showModal() centres
       itself with the browser's own margin: auto, and the * { margin: 0 } reset
       at the top of this file takes it away, which drops every modal into the top
       left corner. Nothing noticed until the site notice became the first modal
       that opens on its own. */

    dialog.modal{
        width: min(600px, 92vw);
        margin: auto;
        border: 0;
        border-radius: var(--radius);
        padding: 0;
        box-shadow: var(--shadow);
    }

    dialog.modal .inner-wrp{
        position: relative;
        padding: 2.5rem;
    }

    dialog.modal .close-btn{
        position: absolute;
        top: .5rem;
        right: .75rem;
        background: none;
        border: 0;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
        color: inherit;
    }

    dialog.modal .title{
        margin-bottom: 1rem;
        padding-right: 2rem;
    }

    /* The site notice (includes/site-notice.php), a modal with a button under the words */
    dialog.modal.site-notice .btn-wrp{
        margin-top: 1.5rem;
    }

    dialog.modal.site-notice .txt-wrp > *:last-child{
        margin-bottom: 0;
    }

/*---------------------------------------------------------------------------------*\
    Top bar
\*---------------------------------------------------------------------------------*/
    /* Colours: theme-css/site.css (the top bar uses the Secondary scheme) */
    .site-top-bar{
        font-size: 1rem;
    }

    .site-top-bar .inner-wrp{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: .4rem 1.5rem;
        padding-block: .5rem;
    }

    .site-top-bar .tagline{
        margin: 0;
    }

    .site-top-bar .right-wrp{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem 1.25rem;
    }

    .site-top-bar .contact-wrp{
        display: flex;
        flex-wrap: wrap;
        gap: .4rem 1.25rem;
    }

    .site-top-bar .contact-wrp a{
        font-weight: 600;
    }

    .site-top-bar .contact-wrp a:hover{
        text-decoration: underline;
    }

/*---------------------------------------------------------------------------------*\
    Header
\*---------------------------------------------------------------------------------*/
/* The stuck header's sentinel (assets/js/theme.js). Zero height, above the header,
   watched by an observer so the header can be marked is-stuck without a scroll
   handler. It must take no space: the header's own top margin is the design. */

    .header-sentinel{
        height: 0;
    }

    .site-header{
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: var(--shadow);
    }

/* THE ADMIN BAR AND THE STICKY HEADER.

   Logged in, WordPress puts a fixed toolbar across the top of the front end. A
   header stuck to top: 0 slides underneath it and loses its top rows, which is
   what everyone who edits the site sees and nobody who visits it does.

   WordPress's own breakpoints, which these have to match or the header is offset
   by the wrong amount in the gaps:

     wider than 782px   the toolbar is 32px and fixed
     601px to 782px     the toolbar is 46px and fixed
     600px and under    the toolbar is 46px but POSITION: ABSOLUTE, so it scrolls
                        away with the page. Offsetting the header there would
                        leave a 46px gap under it for the whole of the rest of
                        the page, so the offset has to go back to zero

   .admin-bar is on <body>, added by WordPress only when the toolbar is shown, so
   a logged out visitor is never affected by any of this. */

    html:has(body.admin-bar){
        --admin-bar-h: 32px;
    }

    .admin-bar .site-header{
        top: 32px;
    }

    @media screen and (max-width: 782px){

        html:has(body.admin-bar){
            --admin-bar-h: 46px;
        }

        .admin-bar .site-header{
            top: 46px;
        }

    }

    @media screen and (max-width: 600px){

        html:has(body.admin-bar){
            --admin-bar-h: 0px;
        }

        .admin-bar .site-header{
            top: 0;
        }

    }

    .site-header .inner-wrp{
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding-block: .85rem;
    }

    /* The logo shrinks before anything overflows (WCAG 1.4.10, down to 320px wide) */
    .site-header .logo-wrp{
        display: inline-flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* object-fit keeps the logo's shape when a small screen squeezes it */
    .site-header .logo-wrp img{
        width: auto;
        height: 38px;
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .site-header .nav-wrp{
        margin-left: auto;
    }

    .site-header .nav-wrp .menu{
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin: 0;
    }

    .site-header .nav-wrp .menu a{
        font-weight: 600;
        padding-block: .5rem;
        position: relative;
    }

    .site-header .nav-wrp .menu a::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .18s ease;
    }

    .site-header .nav-wrp .menu a:hover{
        text-decoration: none;
    }

    .site-header .nav-wrp .menu a:hover::after,
    .site-header .nav-wrp .menu .current-menu-item > a::after{
        transform: scaleX(1);
    }

    .site-header .actions-wrp{
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .site-header .cta-btn{
        white-space: nowrap;
    }

    .site-header .phone-btn{
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .site-header .enquiry-btn{
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    /* Phone and enquiry icons only show on smaller screens, where their text is hidden */
    .site-header .phone-btn .icon,
    .site-header .enquiry-btn .icon{
        display: none;
    }

    .site-header .nav-toggle{
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .site-header .nav-toggle span{
        display: block;
        height: 2px;
        width: 24px;
        margin: 0 auto;
        background: currentColor;
    }

    @media(max-width: 991px){

        .site-header .inner-wrp{
            position: relative;
        }

        .site-header .nav-wrp{
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            display: none;
            box-shadow: var(--shadow);
        }

        .site-header .nav-wrp.is-open{
            display: block;
        }

        .site-header .nav-wrp .menu{
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: .5rem 1.25rem 1rem;
        }

        .site-header .nav-wrp .menu a{
            display: block;
            padding-block: .75rem;
            border-bottom: 1px solid transparent;
        }

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

        .site-header .nav-toggle{
            display: flex;
        }

        /* Phone and enquiry stay visible, in a compact form */
        .site-header .actions-wrp{
            margin-left: auto;
            gap: .5rem;
        }

        .site-header .cta-btn{
            padding: .5rem .75rem;
        }

        .site-header .phone-btn .icon{
            display: block;
        }

        .site-header .phone-btn .btn-txt{
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
        }

    }

    /* Below sm: the enquiry button becomes an icon too, so the header fits at 320px */
    @media(max-width: 575px){

        .site-header .inner-wrp{
            gap: .75rem;
        }

        .site-header .actions-wrp{
            gap: .25rem;
        }

        .site-header .cta-btn{
            padding: .5rem .6rem;
        }

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

        .site-header .enquiry-btn .btn-txt{
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
        }

    }

/*---------------------------------------------------------------------------------*\
    Header submenus
\*---------------------------------------------------------------------------------*/
    .site-header .nav-wrp .menu li{
        position: relative;
    }

    .site-header .nav-wrp .menu-item-has-children > a{
        padding-right: 1.1em;
    }

    .site-header .nav-wrp .menu-item-has-children > a::before{
        content: "";
        position: absolute;
        right: 0;
        top: 45%;
        width: 6px;
        height: 6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-50%) rotate(45deg);
        opacity: .55;
    }

    .site-header .nav-wrp .sub-menu{
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 60;
        min-width: 220px;
        margin: 0;
        padding: .5rem 0;
        list-style: none;
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
    }

    .site-header .nav-wrp .menu li:hover > .sub-menu,
    .site-header .nav-wrp .menu li:focus-within > .sub-menu{
        display: flex;
    }

    .site-header .nav-wrp .sub-menu a{
        display: block;
        padding: .5rem 1.25rem;
        white-space: nowrap;
        font-weight: 400;
    }

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

    /* Escape closes an open sub-menu (theme.js adds .sub-closed, WCAG 1.4.13) */
    @media(min-width: 992px){

        .site-header .nav-wrp .menu li.sub-closed > .sub-menu{
            display: none;
        }

    }

    @media(max-width: 991px){

        .site-header .nav-wrp .sub-menu{
            position: static;
            display: block;
            min-width: 0;
            padding: 0 0 0 1rem;
            background: transparent;
            box-shadow: none;
        }

        .site-header .nav-wrp .sub-menu a{
            padding-block: .6rem;
            white-space: normal;
        }

    }

/*---------------------------------------------------------------------------------*\
    Footer (colours in theme-css/site.css; the footer uses the Secondary scheme)
\*---------------------------------------------------------------------------------*/
    .site-footer .inner-wrp{
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 2.5rem;
        padding-block: 4rem 2.5rem;
    }

    .site-footer .logo-wrp{
        display: inline-block;
        margin-bottom: 1.25rem;
    }

    .site-footer .logo-wrp img{
        height: 40px;
        width: auto;
    }

    .site-footer .about-txt{
        max-width: 34rem;
    }

    .site-footer .about-txt > *:last-child{
        margin-bottom: 0;
    }

    .site-footer .brand-col .social-list{
        margin-top: 1.5rem;
    }

    .site-footer .heading{
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 1.1rem;
    }

    .site-footer .footer-col .menu{
        display: flex;
        flex-direction: column;
        gap: .65rem;
        margin: 0;
    }

    .site-footer .contact-list{
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1.6;
    }

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

    .site-footer .contact-list address{
        font-style: normal;
    }

    .site-footer .bar-inner-wrp{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding-block: 1.25rem;
        font-size: 1rem;
    }

    .site-footer .bar-inner-wrp p{
        margin: 0;
    }

    @media(max-width: 767px){

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

    }

    .social-list{
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
    }

    .social-list a{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: inherit;
        transition: opacity .15s ease;
    }

    .social-list a:hover{
        opacity: .75;
        text-decoration: none;
    }

    .social-list svg{
        width: 18px;
        height: 18px;
        fill: currentColor;
        display: block;
    }

    .social-list-bar a{
        width: 26px;
        height: 26px;
    }

    .social-list-bar svg{
        width: 15px;
        height: 15px;
    }

/*---------------------------------------------------------------------------------*\
    Forms (Ninja Forms)
    - Layout and structure only, as everywhere else. The look is in
      theme-css/site.css under Forms
    - The plugin ships almost no CSS of its own, so without this the fields are
      whatever the browser draws
    - Class names are the plugin's: .nf-field-container is one field, .nf-element
      is the control itself, and the submit button is a .nf-element in
      .submit-container
    - Every control is at least 44px tall and the labels sit above, which is what
      works on a phone and what a screen magnifier user can follow
\*---------------------------------------------------------------------------------*/
    .nf-form-cont{
        max-width: 40rem;
    }

    .nf-form-cont .nf-form-title h3{
        margin-bottom: .5rem;
    }

    .nf-form-cont .nf-form-fields-required{
        margin-bottom: 1.5rem;
        font-size: 1rem;
    }

    .nf-form-cont .nf-field-container{
        margin-bottom: 1.5rem;
    }

    .nf-form-cont .nf-field-label label{
        display: block;
        margin-bottom: .4rem;
    }

    .nf-form-cont .nf-field-description{
        margin-top: .4rem;
    }

    .nf-form-cont .nf-field-description p{
        margin-bottom: 0;
    }

    .nf-form-cont .nf-element{
        width: 100%;
        min-height: 52px;
        padding: .8rem 1rem;
        border-style: solid;
        border-width: 2px;
        font: inherit;
    }

    .nf-form-cont textarea.nf-element{
        display: block;
        min-height: 10rem;
        resize: vertical;
    }

    /* The arrow is drawn in theme CSS, which is where a colour is allowed to live */
    .nf-form-cont select.nf-element{
        appearance: none;
        padding-right: 3rem;
    }

    .nf-form-cont .checkbox-wrap .nf-field-element label{
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        min-height: 44px;
    }

    .nf-form-cont .nf-error-msg{
        margin-top: .4rem;
        font-size: 1rem;
    }

    .nf-form-cont .submit-container{
        margin-bottom: 0;
    }

    .nf-form-cont .submit-container .nf-element{
        width: auto;
        min-width: 12rem;
        cursor: pointer;
    }

    .nf-form-cont .nf-response-msg{
        padding: 1.25rem 1.5rem;
    }

    .nf-form-cont .nf-response-msg > *:last-child{
        margin-bottom: 0;
    }

/*---------------------------------------------------------------------------------*\
    Events and opportunities
    - The /events/ archive, one event's page, and the Events Feed component all
      draw the same row. Layout here; the look is in theme-css/site.css (Events)
    - THE LIST IS THE SQUARED MOCKUP'S NEWS TIMELINE: a line down the left with a
      dot for each item, the picture beside the words from 768px. The line and the
      dots are drawn here and coloured there
    - Stacked on a phone with the picture on top, and from 768px a fixed 180px
      picture column on the left. FIXED, not a fraction: a share of the row made
      the pictures grow with the text and pulled the eye off the dates, which is
      the one thing a timeline is for (the mockup's own note). Both children are
      placed, because a grid told only its column widths fills them in markup
      order and the picture comes first
    - An item with no picture (an opportunity, usually) carries no-img and its
      words take the whole row
    - The title's link is stretched over the whole row, so the row is clickable but
      there is still only one link in it for screen reader and keyboard users
\*---------------------------------------------------------------------------------*/
    /* NAMED ul, not the class on its own. The reset at the top of this file zeroes
       the padding of every list that has a class (ul[class]), and an element plus an
       attribute beats a class, so a rule written as .event-list loses and the room
       for the line and the dots is taken away again */
    ul.event-list{
        position: relative;
        margin: 0;
        padding: 0 0 0 1.75rem;
        list-style: none;
    }

    .event-list::before{
        content: '';
        position: absolute;
        top: .5rem;
        bottom: .5rem;
        left: 4px;
        width: 2px;
    }

    .event-list > li{
        position: relative;
    }

    .event-list > li::before{
        content: '';
        position: absolute;
        top: .55rem;
        left: -1.75rem;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .event-row{
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding-bottom: 2.25rem;
    }

    .event-row .img-wrp{
        overflow: hidden;
        aspect-ratio: 4 / 3;
    }

    .event-row .img-wrp .img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* The theme's stand-in is a drawing, not a photograph, so it is shown whole
       inside the frame rather than cropped to fill it */
    .event-row .img-wrp.is-fallback{
        padding: .75rem;
    }

    .event-row .img-wrp.is-fallback .img{
        object-fit: contain;
    }

    .event-row .date{
        display: block;
        margin-bottom: .3rem;
    }

    .event-row .title{
        margin-bottom: .5rem;
    }

    .event-row .row-link::after{
        content: '';
        position: absolute;
        inset: 0;
    }

    .event-row .txt > *:last-child{
        margin-bottom: 0;
    }

    .events-listing .list-title{
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    .event-single .featured-wrp{
        margin-bottom: 2rem;
    }

    .event-single .featured-wrp .featured-img{
        display: block;
        width: 100%;
        height: auto;
    }

    .event-single .back-link{
        margin-top: 2rem;
        margin-bottom: 0;
    }

/* A way back out of a single event, so it reads as one (Jamie, 2026-10-13).
   The arrow is inside the link rather than a ::before, so it is part of the
   target a finger or a pointer has to hit. */

    .event-single .back-link a{
        display: inline-flex;
        gap: .5rem;
        align-items: center;
        min-height: 24px;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: .15em;
    }

    .event-single .back-link a .icon{
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }

    @media(min-width: 768px){

        .event-row{
            grid-template-columns: 180px minmax(0, 1fr);
            gap: 1.75rem;
            align-items: center;
        }

        .event-row .img-wrp{
            grid-column: 1;
            grid-row: 1;
        }

        .event-row .bd{
            grid-column: 2;
            grid-row: 1;
        }

        .event-row.no-img .bd{
            grid-column: 1 / 3;
        }

    }

/*---------------------------------------------------------------------------------*\
    News
    - Listing pages (/news/, categories, authors), cards, the post page, the author
      box and related posts. Layout here; the look is in theme-css/site.css (Blog)
    - Cards are also used by the News Feed component
    - The listing heading is the Page Heading component's markup, so its look comes
      from PageHeading.css and theme-css/components/PageHeading.css
    - The category links and the cards sit in .blog-body, a .component, so the space
      above and below them is a section's own padding. That is also what lets the
      rule for the section after a curved page heading reach them
\*---------------------------------------------------------------------------------*/
    .blog-listing .cats-nav{
        margin-bottom: 2.5rem;
    }

    .blog-listing .cats-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
    }

    .blog-listing .cats-list a{
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: .5rem 1rem;
        border: 2px solid;
        border-radius: var(--radius);
    }

    .blog-listing .list-title{
        margin-bottom: 1.5rem;
    }

    .cards-wrp{
        row-gap: 2rem;
    }

    /* Card: the title link is stretched over the whole card */
    .post-card{
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* Inside the card, so it shows on any section colour (WCAG 2.4.7) */
    .post-card:focus-within{
        outline: 3px solid var(--link-colour);
        outline-offset: -3px;
    }

    .post-card .img-wrp{
        aspect-ratio: 16/9;
        overflow: hidden;
    }

    .post-card .img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .post-card .content-wrp{
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: .5rem;
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .post-card .title{
        margin: 0;
        font-size: 1.2rem;
    }

    .post-card .card-link{
        color: inherit;
    }

    .post-card .card-link::after{
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .post-card .card-link:focus{
        outline: none;
    }

    .post-card:hover .card-link,
    .post-card:focus-within .card-link{
        text-decoration: underline;
    }

    .post-card .type{
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    .post-card .type .icon{
        width: 1rem;
        height: 1rem;
    }

    .post-card .read-more{
        margin-top: auto;
        padding-top: .25rem;
    }

    /* Paging links: 44px targets */
    .pagination .nav-links{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        margin-top: 3rem;
    }

    .pagination .page-numbers{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: .5rem .75rem;
        border-radius: var(--radius);
    }

    .pagination .page-numbers.current{
        font-weight: 600;
    }

    /* Post page */
    .blog-post .post-header{
        padding-top: var(--section-pad);
    }

/* The heading sits on the same measure as the post's own components, which are
   full container width unless a row asks to be compact. It was capped at 48rem,
   which left the title indented against its own text (Jamie, 2026-10-13). */

    .blog-post .post-header .content-wrp{
        width: 100%;
    }

    .blog-post .cats{
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 1rem;
        margin-bottom: .75rem;
    }

/* The categories are a label, not a link: there are no category pages
   (includes/post-types.php, 2026-10-13) */

    .blog-post .cats li{
        font-weight: 600;
    }

    .blog-post .meta{
        display: flex;
        flex-wrap: wrap;
        gap: .25rem 1.25rem;
    }

    .blog-post .meta a{
        text-decoration: underline;
        text-underline-offset: .15em;
    }

    .blog-post .featured-wrp{
        margin-top: 2rem;
    }

    .blog-post .featured-img{
        width: 100%;
        height: auto;
    }

    .blog-post .post-footer{
        padding-bottom: var(--section-pad);
    }

    /* Author box (end of a post) and author page header */
    .author-box{
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        max-width: 48rem;
        margin-inline: auto;
    }

    .author-box .photo{
        flex: none;
        width: 96px;
        height: 96px;
        border-radius: 50%;
        object-fit: cover;
    }

    .author-box .heading{
        font-size: 1.2rem;
        margin-bottom: .25rem;
    }

    .author-box .name,
    .author-box .job-title{
        margin: 0;
    }

    .author-box .name a{
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: .15em;
    }

    .author-box .bio{
        margin-top: .75rem;
    }

    .author-header{
        padding-block: var(--section-pad) 2rem;
    }

    @media(max-width: 575px){

        .author-box{
            flex-direction: column;
        }

    }

    .related-posts{
        padding-block: var(--section-pad);
    }

    .related-posts .heading{
        margin-bottom: 2rem;
        text-align: center;
    }

/*---------------------------------------------------------------------------------*\
    Cookie banner (template-parts/cookies/banner.php, includes/cookies.php)
    - At the top of the page in the normal flow, so it never covers anything
    - Colours in theme-css/site.css (the banner uses the Grey scheme)
\*---------------------------------------------------------------------------------*/
    .cookie-banner .inner-wrp{
        padding-block: 1.5rem;
    }

    .cookie-banner .title{
        margin-bottom: .5rem;
        font-family: var(--font-head);
        font-size: 1.2rem;
        font-weight: 700;
    }

    .cookie-banner .txt-wrp,
    .cookie-banner .choices-wrp{
        max-width: 48rem;
    }

    .cookie-banner .txt-wrp p{
        margin-bottom: .5rem;
    }

    .cookie-banner .choices-wrp{
        margin-top: 1.25rem;
    }

    .cookie-banner fieldset{
        margin: 0 0 1rem;
        padding: 0;
        border: 0;
    }

    .cookie-banner legend{
        margin-bottom: .75rem;
        font-weight: 700;
    }

    .cookie-banner .choice{
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        column-gap: .75rem;
        margin-bottom: 1rem;
    }

    .cookie-banner .choice input{
        width: 24px;
        height: 24px;
        margin: 0;
    }

    .cookie-banner .choice label{
        font-weight: 600;
    }

    .cookie-banner .choice .hint{
        grid-column: 2;
        margin: 0;
    }

    .cookie-banner .btns-wrp{
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-top: 1rem;
    }

    .cookie-banner .done-msg{
        margin-bottom: 1rem;
    }

    /* Footer "Cookie settings": looks like a link */
    .cookie-settings-btn{
        min-height: 24px;
        padding: 0;
        background: none;
        border: 0;
        color: inherit;
        text-decoration: underline;
        text-underline-offset: .15em;
        cursor: pointer;
    }

    /* [strata_cookie_list] */
    .cookie-list-wrp .table-wrp{
        margin-bottom: 2rem;
        overflow-x: auto;
    }

    .cookie-table{
        width: 100%;
        border-collapse: collapse;
    }

    .cookie-table th,
    .cookie-table td{
        padding: .75rem;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid;
    }

/*---------------------------------------------------------------------------------*\
    Errors
\*---------------------------------------------------------------------------------*/
    .strata-error{
        padding: 2rem;
        background: #fff3f3;
        border: 1px solid #f5c2c2;
        border-radius: var(--radius);
        margin: 1rem;
    }

    .strata-error .title{
        font-weight: 700;
        color: #b00020;
    }

    .strata-error .debug{
        white-space: pre-wrap;
        background: #fff;
        padding: 1rem;
        margin-top: .5rem;
        font-size: 1rem;
        overflow: auto;
    }

/*---------------------------------------------------------------------------------*\
    Accessibility
\*---------------------------------------------------------------------------------*/
    .screen-reader-text{
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    .skip-link{
        position: absolute;
        left: -9999px;
    }

    /* Undo .screen-reader-text while focused, so keyboard users can see it (WCAG 2.4.7).
       Its colours stay here, from the Default scheme, so it is always visible */
    .skip-link:focus{
        top: 1rem;
        left: 1rem;
        z-index: 1000;
        width: auto;
        height: auto;
        margin: 0;
        padding: .75rem 1.25rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
        background-color: var(--bg-colour);
        color: var(--title-colour);
        font-weight: 600;
        text-decoration: underline;
        outline: 3px solid var(--link-colour);
        outline-offset: 2px;
    }

    /* Visitors who ask for less motion: no smooth scrolling, animations or transitions */
    @media(prefers-reduced-motion: reduce){

        html{
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after{
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }

    }