/* See https://raw.githubusercontent.com/JayGeorge/framework_css/main/css-framework/css/readme.css for more information */

/* GROUP LAYERS
=================================================== */

@layer
base,
elements,
objects,
components,
modifiers,
utilities,
plugins,
ui,
scope;

:root {
    /* GROUP VARIABLES -- SPACING
    =================================================== */
    --spacing-s-x-x: 0.25rem;
    --spacing-s-x: 0.45rem;
    --spacing-s: 0.8rem;
    --spacing-s-1: 1.1rem;
    --spacing-s-2: 1.35rem;
    --spacing-m: 1.5rem;
    --spacing-l: 1.8rem;
    --spacing-l-1: 2.5rem;

    /* Smaller values for mobile */
    --spacing-l-2: min(14vw, 4.2rem);
    --spacing-l-3: min(18vw, 4.7rem);
    --spacing-l-3-horizontal: var(--spacing-s); /* Increased later */
    --spacing-l-4: min(21vw, 7rem);
    --spacing-vh-s: min(21vw, 15vh);
    --spacing-vh-m: min(22vw, 25vh);
    --button-spacing-vertical: 1rem;
    --button-spacing-horizontal: 1.5rem;
    /* GROUP VARIABLES -- LAYOUT
    =================================================== */
    /* Useful for slides */
    --vh-s: max(28rem, 80vmin);
    /* Use min things don't get too tall, e.g. consider a device at 1600 x 2560 */
    --vh-full: min(100svh, 60rem);
    /* GROUP VARIABLES -- LAYOUT -- CONSTRAINTS -- MAX
    =================================================== */
    /* From lowest to highest value */
    --max-width-reading-short: 22rem;
    --max-width-reading-short-ch: 26ch;
    --max-width-reading: 34rem; /* e.g. >> /bills */
    --max-width-title: 53rem;
    --max-width-1: 75rem;
    --max-width-2: 85rem;
    /* GROUP VARIABLES -- LAYOUT -- GRID
    =================================================== */
    --grid-column-gutter: 4rem;
    --grid-template-columns-lean-left: 
        [flush-start] 
        var(--grid-column-gutter) 
        [left-gutter-start] 
        var(--grid-column-gutter) 
        [left-gutter-end left-start] 
        19.1fr 
        [main-start]
        19.1fr 
        [left-end right-start right-inset-start] 
        4fr 
        [off-center-start]
        10fr
        [right-inset-end]
        36fr
        [off-center-end]
        11.8fr 
        [right-end flush-end]
    ;
    /* GROUP VARIABLES -- LAYOUT -- OTHER
    =================================================== */
    --side-column: 22rem;
    /* GROUP VARIABLES -- LAYOUT -- Z-INDEX
    =================================================== */
    --z-index-below-body: -1;
    --z-index-above-body: 1;
    --z-index-nav: 2;
    --z-index-above-nav: 3;
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME
    =================================================== */
    /* Dark to light */
    --colour-grey-aa: #111;
    /* AA compliant as gray text on white background. AAA is 595959 */
    --color-gray-reading: hsl(0 0% 18%);
    --color-gray-light-1: hsl(0 0% 90%);
    --color-gray-light-2: hsl(0 0% 95%);
    --color-gray-light-3: hsl(0 0% 98%);
    --color-black-off: #0b0b0b;
    --color-purple: oklch(53.24% .301 290);
    --color-purple-light: oklch(66% 0.27 50 / 0.04);
    --colour-focus: purple;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- FONTS
    =================================================== */
    --font-family-main: neue-haas-grotesk-text, sans-serif;
    --font-family-heading: neue-haas-grotesk-display, sans-serif;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- WEIGHTS
    =================================================== */
    /* Or, if you are only using ONE weight by design then you should just add something like --font-family-main-weight: 500;
    to save confusion about which one to pick */
    --font-family-main-weight-light: 300;
    --font-family-main-weight-normal: 500;
    --font-family-main-weight-strong: 700;
    --font-family-heading-weight-normal: 500;
    --font-family-heading-weight-strong: 900;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
    =================================================== */
    /* Optimise line-height for reading */
    --font-size-reading-line-height: 1.5;
    --font-size-s-x-x: 0.707em;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- OUTSIDE SCALE
    =================================================== */
    /* e.g. Outside scale. Sometimes I go outside scales because of my font-bump adjustmemts */
    /* Decreased at a later root breakpoint */
    /* --font-size-s-x: 0.9em; */
    --font-size-s-x: 1em;
    --font-size-s-x-line-height: 1.3;
    --font-size-s-x-1: 1rem;
    --font-size-s: clamp(1.05em, 4vw, 1.1em);
    /* --font-size-s-2: clamp(1.3em, 7vw, 1.5em); */
    /* --font-size-s-2-line-height: 1.3; */
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- AUGMENTED FOURTH
    =================================================== */
    /* Based on Augmented Fourth - https://type-scale.com/ */
    --font-size-s-1: clamp(1.35em, 4vw, 1.414em);
    --font-size-s-1-line-height: 1.35;
    --font-size-m: clamp(1.999em * 0.75, 6vw, 1.999em);
    --font-size-m-line-height: 1.3;
    --font-size-l: clamp(2.827em * 0.8, 9vw, 2.827em);
    --font-size-l-line-height: 1.15;
    --font-size-l-1: clamp(3.998em * 0.8, 11vw, 3.998em);
    --font-size-l-1-line-height: 1.15;
    /* --font-size-l-2: clamp(5.653em * 0.618, 12vw, 5.653em); */
    --font-size-l-2: clamp(6em * 0.618, 12vw, 6em);
    --font-size-l-2-line-height: 0.9;
    /* GROUP VARIABLES -- DECORATION -- BORDER RADIUS
    =================================================== */
    --border-radius-l: 100px;
    --border-radius-m: 15px;
    /* GROUP VARIABLES -- DECORATION -- OTHER
    =================================================== */
    --filter-bw: grayscale(100%) contrast(128%);
    --filter-bw-less: grayscale(100%) contrast(115%);
}

/* --mq-root-variable-adjustments-1 */

@media (min-width: 450px) {
    :root {
        /* GROUP VARIABLES -- SPACING
        ===================================================  */
        --spacing-l: 3rem;
        --spacing-l-1: 3.5rem;
    }
}

/* --mq-root-variable-adjustments-2 */

@media (min-width: 730px) {
    :root {
        --spacing-l-3-horizontal: var(--spacing-l-3);
    }
}

/* --mq-root-variable-adjustments-2-portrait */

@media (min-width: 730px) and (orientation: portrait) {
    :root {
        /* e.g. iPad */
        --spacing-vh-s: 10vh;
        --spacing-vh-m: 14vh;
    }
}

@media (orientation: portrait) {
    :root {
        /* GROUP VARIABLES -- LAYOUT
        =================================================== */
        /* Switch to vmin at larger MQs, so things don't get too tall */
        --vh-full: 100lvmin;
    }
}

/* Notes...

    --mq-root-variable-adjustments-smaller-laptops-after to --mq-root-variable-adjustments-larger-laptops-before
    - Bear in mind users on smaller laptops do _not_ see things how you see things at a window width of 1440px.
    - You can check exactly how they see it by going to System Preferences > Displays > Scaled

*/

@media (min-width: 1025px) and (max-width: 1440px) {
    :root {
        --font-bump: -0.09em; /* Decrease */
        /* and possibly... */
        /* --font-size-l-4: calc(9.313em + 0.75em)!important; */
    }
}

/* --mq-text-bump-1-after */

@media (min-width: 1600px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
        =================================================== */
        --font-size-s-x: 0.9em; /* Decrease */
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        --font-bump: 0.115vw; /* Increase */
    }
}

/* --mq-text-bump-2-after */

@media (min-width: 1800px) {
    :root {
        /* GROUP VARIABLES -- SPACING
        =================================================== */
        --spacing-vh-m: 22vh; /* Decrease */
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        --font-bump: 0.15vw; /* Increase */
    }
}

/* --mq-text-bump-3-after */

@media (min-width: 2300px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        --font-bump: 0.25vw; /* Increase */
    }
}

@layer base {
    /* GROUP RESET / FRAMEWORK - Taken from html5boilerplate.com
    =================================================== */
    audio,canvas,iframe,img,svg,video {
        vertical-align: middle;
    }
    /* GROUP RESET / FRAMEWORK / NORMALISE
    =================================================== */
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
    /* GROUP RESET / JAY GEORGE
    =================================================== */
    *,
    *::before,
    *::after {
        /* Prevent flickering.
        When you click a link or a button or a div that has a click function on it,
        usually a grey box flickers. The below prevents that. Source: http://goo.gl/MZ4Dr5 */
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
        box-sizing: border-box;
    }
}

@layer elements {
    /* GROUP ELEMENTS / FRAMEWORK
    =================================================== */
    /* ::selection {
        background: light color;
        color: dark color;
    } */
    /* https://twitter.com/bramus/status/1452572001697153029 */
    /* html,
    body {
        background: ;
    } */
    html {
        /* Consider disabling this if you have pages that require lots of cmd + f https://css-tricks.com/downsides-of-smooth-scrolling/ */
        scroll-behavior: smooth;
        font-size: calc(1em + var(--font-bump));
        /* Opinion on this will differ depending on the font you choose. Do not carpet bomb line height with a * selector though */
        line-height: 1.5;
        /* https://web.dev/accent-color/ */
        /* accent-color: hotpink; */
    }
    body {
        /* https://app.typographychecklist.com/ - 23. Use standard ligatures but avoid using discretionary ligatures in body text */
        font-feature-settings: "kern", "liga", "clig", "calt";
        font-family: var(--font-family-main);
        /* https://css-tricks.com/scrollbar-reflowing/ */
        scrollbar-gutter: stable both-edges;
        color: var(--color-black-off);
    }
    /* Prevent images stretching too much */
    /* =JFG. Use display:inline-block to prevent white space (read full answers here...) http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image */
    img {
        display: inline-block;
        /* Maintain aspect ratio */
        max-width: 100%;
        height: auto;
    }
    /* Reset */
    h1, h2, h3, h4, h5, h6,
    p,
    ul, ol,
    figure, blockquote {
        margin-block: 0;
    }
    /* Reset */
    figure {
        margin-inline: 0;
        & img {
            /* Push the caption away from the image */
            margin-block-end: var(--spacing-s);
        }
    }
    ul {
        padding-inline-start: 0;
    }
    /* Don't affect nav */
    main li {
        padding-block-end: var(--spacing-s-x);
    }
    dl,
    dt,dd,
    th,
    td {
        padding-block-end: var(--spacing-s);
    }
    p {
        margin-block-end: var(--spacing-s-1);
        &:last-child {
            margin-block-end: 0;
        }
    }
    a {
        color: inherit;
    }
    /* Don't affect Statamic's lists here, which contain p tags like this:
        <ol>
            <li>
                <p>Sponsor games</p>
            </li>
            <li>
                <p>Promote your game</p>
            </li>
            <li>
                <p>Sponsor live events</p>
            </li>
        </ol>
    */
    main :is(p:not(li p), ol, ul):not(:has(li p)) {
        line-height: var(--font-size-reading-line-height);
        list-style-position: inside;
        padding-inline-start: 0;
        color: var(--color-gray-reading);
    }
    /* For Statamic's lists use a different method: */
    ol:has(li p) {
        padding-inline-start: var(--spacing-l-1);
    }
    p + ul {
        padding-block-start: var(--spacing-s);
    }
    strong {
        font-weight: var(--font-family-main-weight-strong);
    }
    /* GROUP ELEMENTS / FRAMEWORK / HEADINGS
    =================================================== */
    /* https://developer.chrome.com/blog/CSS-text-wrap-balance */
    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
    }
    blockquote, figcaption, p {
        text-wrap: pretty;
    }
    h1, .h1, h1 a, .h1 a, h2, .h2, h2 a, .h2 a, h3, .h3, h3 a, .h3 a {
        font-family: var(--font-family-heading);
        font-weight: var(--font-family-heading-weight-normal);
        /* https://app.typographychecklist.com/ 91 - Use discretionary ligatures and swashes in headlines */
        font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
        /* Override iOS Safari's user agent stylesheet */
        text-decoration: none;
        color: inherit; /* If you use a link inside a heading, inherit the colour so it's not the default browser-purple */
    }
    a :is(h1, h2, h3, h4, h5, h6) {
        /* When a heading is inside a link, escape the link colour */
        color: initial;
    }
    h4, .h4, h4 a, .h4 a {
        font-family: var(--font-family-heading);
        font-weight: var(--font-family-heading-weight-normal);
    }
    h1, .h1 {
        font-size: var(--font-size-l-2); line-height: var(--font-size-l-2-line-height);
        font-weight: var(--font-family-heading-weight-strong);
        text-transform: uppercase;
    }
    h2, .h2 {
        font-size: var(--font-size-s-1); line-height: var(--font-size-s-1-line-height);
        font-family: var(--font-family-main);
    }
    h3, .h3 {
        font-size: var(--font-size-s-2); line-height: var(--font-size-s-2-line-height);
    }
    h4, .h4 {
        font-size: var(--font-size-s-1); line-height: var(--font-size-s-1-line-height);
    }
    h5, .h5 {
        font-size: var(--font-size-s); line-height: var(--font-size-s-line-height);
    }
    h6, .h6 {
        font-size: var(--font-size-s-x-1); line-height: var(--font-size-s-x-1-line-height);
    }
    /* GROUP ELEMENTS / FRAMEWORK / HEADINGS / HIGH PRIORITY / VERTICAL SPACING
    =================================================== */
    h1, .h1, h2, .h2 {
        padding-block-end: var(--spacing-l);
    }
    * + h1,
    * + .h1,
    /* e.g. Objects > Counters */
    * > h1,
    * > .h1,
    * + h2,
    * + .h2,
    article + article {
        padding-block-start: var(--spacing-l);
    }
    /* GROUP ELEMENTS / FRAMEWORK / HEADINGS / LOW PRIORITY / VERTICAL SPACING
    =================================================== */
    h3, .h3 {
        padding-block-end: var(--spacing-s-x);
    }
    * > :is(h2, .h2) {
        padding-block-start: var(--spacing-m);
    }
    h4, .h4, h5, .h5, h6, .h6 {
        padding-block-end: var(--spacing-s-x-x);
    }
    * + :is(h3, .h3),
    /* e.g. p followed by a div followed by an h3 */
    * > :is(h3, .h3), * + :is(h4, .h4),
    /* e.g. p followed by a div followed by an h4 */
    * + :is(h4, .h4) {
        padding-block-start: var(--spacing-s);
    }
    /* GROUP ELEMENTS / FRAMEWORK / HEADINGS / EXCEPTIONS / VERTICAL SPACING
    =================================================== */
    ul + :is(h2, .h2) {
        padding-block-start: var(--spacing-s);
    }
    h1 + :is(h2, .h2)
    .h1 + .h2,
    h2 + h3,
    hr + * {
        padding-block-start: 0;
    }
    /* e.g. where we just have an h2 in a left column; it shouldn't have bottom padding */
    :is(h2, h3, h4, h5, h6):only-child {
        padding-block: 0;
    }
    /* GROUP ELEMENTS / FRAMEWORK / MAIN
    =================================================== */
    main {
        &:focus {
            outline: none;
        }
        /* Only when followed by the footer */
        &:has(+ footer) {
            margin-block-end: var(--spacing-l-1);
        }
        & > *:last-child {
            padding-block-end: 0;
        }
        grid-column-start: content;
    }
}

@layer components {
    /* Put these at the component level e.g. so we make sure we override something like .c-site-footer li { padding-block-end: var(--spacing-s-x); } */
    /* Nested lists */
    ol ol,
    ol ol li:last-child,
    ul ul,
    ul ul li:last-child {
        padding-block-end: 0;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / NAV
=================================================== */

@layer elements {
    nav {
        clear: both;
        display: block;
        width: 100%;
        & li {
            position: relative;
            & a {
                /* Needed to better vertically align */
                display: flex;
                align-items: center;
                text-decoration-line: none;
            }
        }
    }
}

@layer objects {
    /* nav*/
    .o-nav-flex ul {
        display: flex;
        flex-direction: column;
        gap: 6.5rem;
        list-style: none;
        padding-inline: 0;
        /* --mq-nav-open-after */
        @media (min-width: 768px) {
            flex-direction: row;
            /* justify-content: flex-end; */
        }
    }
}

/* GROUP ELEMENTS / FRAMEWORK / SVGs
=================================================== */

@layer elements {
    svg {
        fill: currentColor;
        /* For SVG icons */
        width: 1em;
        height: 1em;
    }
    :is(h1, h2, h3, h4, h5, h6, p) svg {
        vertical-align: baseline;
        margin-inline-end: var(--spacing-s-x);
    }
}

@layer components {
    button svg,
    .c-btn :is([src*="svg"], svg) {
        font-size: 1.1em;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS }
=================================================== */

/* Notes...

    - Link styles are stored as group selectors rather than scattered, since we have multiple properties here.
    - Do not put transitions on all links, it makes keyboard navigation feel slower. Instead, use transition animations on an individual basis e.g. skip-to-content

*/

/* Default */

@layer elements {
    a,
    button {
        text-decoration-skip-ink: auto;
        color: #444;
    }
}

@layer scope {
    /* .u-link-style-1 a, */
    /* Components > Framework > Entry > Entry Content */
    .s-entry-content a {
        text-decoration-line: none;
        color: var(--colour-turquoise);
    }
}

/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / FOCUS
=================================================== */

@layer base {
    .c-nav-mobile-button:focus-visible svg,
    :is(a, button, summary):focus-visible,
    /* Elements > Framework > Forms */
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 4px solid var(--colour-focus);
    }

    /* ensure the focus outline is effective when a link is wrapped around a heading */
    a:has(> h2, h3, h4, h5, h6) {
        display: inline-block;
    }
}

@layer components {
    .c-nav-mobile-button:focus {
        /* We'll set the outline on the SVG instead because it's neater */
        outline: none;
        & svg {
            /* Increase offset for nav since we have it on the SVG instead */
            outline-offset: 10px;
        }
    }
}

@layer elements {
    /* Elements > Framework > Forms */
    :is(input, textarea):focus {
        /* Light colour here */
        background: seashell;
    }
    a:focus {
        p & {
            /* Offset for text */
            outline-offset: 5px;
        }
        :is(nav) & {
            outline-offset: 10px; /* Increase */
        }
    }
}

/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / HOVER
=================================================== */

@layer scope {
    .s-entry-content a:hover {
        text-decoration-color: black;
        color: var(--colour-grey-reading);
    }
}

/* GROUP COMPONENTS / FRAMEWORK / SKIP LINKS
=================================================== */

@layer components {
    /* .u-screen-reader*/
    .c-skip-to-content:focus {
        position: fixed!important;
        z-index: 1;
        top: 0;
        left: 0;
        padding: var(--spacing-s-1) var(--spacing-l);
        font-size: var(--font-size-s-x);
        color: var(--colour-grey);
        outline: none;
        /* Looks better on Skip to Content */
        text-underline-position: auto;
    }
}

/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Class name prefixes are influenced by Namespaces article - http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
    - Class relationships are based on BEM structure
    - For more information open readme.css at https://raw.githubusercontent.com/JayGeorge/framework_css/main/css-framework/css/readme.css

*/

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / (CROSS POLLINATED)
=================================================== */

/* HTML Example...

    <form class="c-form">
        <div class="c-form__notes">
            Your email address will not be published
        </div>

        <fieldset>
            <legend>Leave a comment</legend>
            <div>

            </div>
        </fieldset>
    </form>

*/

@layer elements {
    [type="text"],
    [type="email"],
    [type="tel"],
    [type="password"],
    [type="url"],
    [type="tel"],
    [type="search"],
    [type="file"],
    textarea {
        vertical-align: top;
        /* box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); */
        /* =JFG. e.g. search box >> blog or newsletter signup email address */
        padding: 15px;
        margin-block-end: 2rem;
        /* e.g. fields next to each other */
        margin-right: 0.5rem;
        /* =JFG. Need line height; IE9 bug. Source http://stackoverflow.com/questions/7797103/text-indent-for-a-text-box-in-ie */
        line-height: 1.45;
        border-radius: 2px;
    }

    [type="file"] {
        padding-inline-start: 0;
        border: 0!important;
    }

    select {
        /* prevent long options making the box longer */
        max-width: 100%;
    }

    label {
        /* Make padding effective */
        display: block;
        padding-block-end: 1rem;
        /* Fixed */
        font-size: 16px;
        font-weight: var(--font-family-main-weight-strong);
        /* Override line-height set on body */
        line-height: 1;
    }

    textarea {
        width: 100%;
        /* e.g. something like Hubspot might be a bit short */
        min-height: 200px;
    }

    [type="checkbox"] {
        /* Override any input styles */
        box-shadow: none;
    }

    [type="checkbox"],
    [type="radio"] {
        margin-right: var(--spacing-s);
    }

    /* Checkbox and Radio labels */
    [type="checkbox"] + label,
    [type="radio"] + label {
        padding-block-end: var(--spacing-s-2);
    }

    [type="submit"] {
        /* e.g. >> /blog/readability-test/ */
        margin-top: var(--spacing-s);
    }

    /* Don't carpet bomb since we don't want a checkbox 100% width */
    [type="email"],
    [type="text"],
    [type="url"],
    [type="password"] {
        width: 100%;
        /* max-width: 275px; */
    }

    /* Exceptions */
    /* =JFG. Need high specificity e.g. "Preferred Appointment Time" xx HH, xx MM */
    [type="text"] + label {
        position: relative;
        /* =JFG. Counter margin-block-end */
        top: -0.25rem;
    }
}

@layer components {
    .c-form {
        width: 100%;
        max-width: var(--max-width-reading);
        max-width: 50rem;
        margin-inline: auto;
    }

    input:not[type="hidden"] + .c-form__notes {
        /* e.g. 'Login' button followed by 'Forgotten your password?' */
        padding-block: var(--spacing-l) 0;
    }

    .c-form__notes {
        padding-block-end: var(--spacing-m);
        padding-inline: var(--spacing-l);
        & p {
            color: var(--colour-grey-reading);
        }
    }

    .c-form legend {
        /* START SCREEN READER TEXT
        --------------------------- */
        clip: rect(1px, 1px, 1px, 1px);

        position: absolute!important;
        overflow: hidden;
        width: 1px;
        height: 1px;
        /* END SCREEN READER TEXT
        ------------------------- */
    }

    /* We use a class of fieldset since the `fieldset` element is not always present */
    .c-form__fieldset {
        padding: 0 var(--spacing-l);
        /* Override default */
        margin: 0;
        border: 0;
    }

    .c-form__fieldset.js__formHideLabelsUntilFocused {
        /* Decrease to account for hidden labels at the top */
        padding-block-start: var(--spacing-s-1);
    }

    /* Exceptions */
    .c-form :is([type="checkbox"], [type="radio"]) {
        margin-block-end: 0;
    }

    .maple,
    /* The <br/> is inserted by Statamic to break lines. We don't want this to take up extra space */
    .c-form__checkbox-group br {
        display: none;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / (MODIFIERS)
=================================================== */

@layer modifiers {
    .c-form--wide {
        max-width: 80rem;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / STATAMIC EXAMPLE
=================================================== */

/* HTML Example...

    <form method="POST" action="https://paradise.wip/!/forms/contact" class="c-form">
    <input type="hidden" name="_token" value="08dv52uFjXl3JPShnriTrNGc3QUEMRrVWIYRH7Wb">
        <div class="c-form__notes">
            <h2>Contact us</h2>
            <p>Some text here</p>
        </div>
        <input type="text" name="maple" class="maple">
        <fieldset class="c-form__fieldset">
            <div class="c-form-cols form-cols--2">
                <div class="c-form-cols__col">
                    <label>Name</label>
                    <div><input type="text" name="name"></div>
                </div>
                <div class="c-form-cols__col">
                    <label>Email Address</label>
                    <div><input type="email" name="email_address"></div>
                </div>
                <div class="c-form-cols__col c-form-cols__col--full-width">
                    <label>Message</label>
                    <div><textarea name="form_message" rows="5"></textarea></div>
                </div>
            </div>

            <button type="submit">Submit</button>
        </fieldset>
    </form>

*/

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / PERCH EXAMPLE
=================================================== */

/* HTML Example...

    <form id="form1_comment" class="c-form" action="/blog/serving-adaptive-images-to-visitors" method="post">
        <div class="c-form__notes">
            <h2>Leave a comment</h2>
            <p>Your email address will not be published</p>
        </div>

        <fieldset class="c-form__fieldset">
            <legend>Leave a comment</legend>
            <div class="c-form-cols">
                <div class="c-form-cols__col">
                    <label for="form1_commentName">Name</label>
                    <input id="form1_commentName" name="commentName" type="text" required="required">
                </div>
                <div class="c-form-cols__col">
                    <label for="form1_commentEmail">Email</label>
                    <input id="form1_commentEmail" name="commentEmail" type="email" required="required">
                </div>
            </div>
            <div>
                <label for="form1_commentURL">Website</label>
                <input id="form1_commentURL" name="commentURL" placeholder="http://" type="url">
            </div>
            <div>
                <label for="form1_commentHTML">Comment</label>
                <textarea id="form1_commentHTML" name="commentHTML" cols="30" rows="4" required="required"></textarea>
            </div>
            <div>
                <input id="form1_postID" name="postID" value="15" type="hidden">
                <input id="form1_submitComment" name="submitComment" value="Submit" type="submit"><input type="hidden" name="cms-form" value="Y29tbWVudDpwZXJjaF9ibG9nOi90ZW1wbGF0ZXMvYmxvZy9jb21tZW50X2Zvcm0uaHRtbDoxNDk0NDM2MDkw">
            </div>
        </fieldset>
    </form>

*/

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / COLUMNS
=================================================== */

/* HTML Example...

    <div class="c-form-wrapper"> <-- (Optional). Used to adding padding on smaller MQs
        <form>
            <div class="c-form-cols"> <-- or just c-form-rows if you just want a vertically stacked form
                <div class="c-form-cols__col">
                    <input/>
                </div>
                <div class="c-form-cols__col">
                    <input/>
                </div>
                <div class="c-form-cols__col c-form-cols__col--full-width">
                    <textarea/>
                </div>
            </div>
        </form>
    </div>

*/

/* Modifiers...

    .c-form-cols__col--full-width <-- span the whole column e.g. Message

*/

@layer components {
    .c-form-wrapper {
        /* (Optional). Used to adding padding on smaller MQs */
        padding-inline: var(--spacing-s);
    }

    /* if you just want a vertically stacked form */
    .c-form-rows {
        display: grid;
        gap: var(--spacing-l);
        padding-block-end: var(--spacing-l-2);

        & input {
            width: 100%;
            max-width: none;
            margin-block-end: 0;
        }
    }

    /* When you want the submit button to span 100% */
    /* <button class="c-btn-row" type="submit">Submit</button> */
    .c-btn-row {
        width: 100%;
        text-align: center;
    }

    .c-form-cols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-column-gap: 1em;
    }

    /* Custom */
    @media (min-width: 500px) {
        .c-form-cols__col input {
            /* e.g. if we have a shorter form field like a password */
            width: 100%;
            max-width: none;
        }

        /* Exceptions */
        .c-form-cols__col [type="checkbox"],
        .c-form-cols__col [type="radio"] {
            width: initial;
        }
    }
}

@layer modifiers {
    .c-form-cols--1 {
        grid-template-columns: 1fr;
    }

    .c-form-cols__col--full-width,
    /* e.g. has a file attachment */
    .c-form-cols__col:has(input[type=file]) {
        grid-column: 1 / -1;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / BUTTONS
=================================================== */

/* Notes...

    - You should consider increasing specificity depending on the environment e.g. add .site-container to
    the selector for WordPress so rules do not affect wp-admin bar

*/

@layer elements {
    [type="submit"] {
        /* Always on a separate line */
        display: block!important;
        /* Organisms > Forms > Plugins > Mailchimp */
        font-size: 0.85rem;
        /* Same as HTML, overriding the default of 1 in the reset */
        line-height: 1.5;
        /* Remove user agent style */
        background: transparent;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / ALERTS
=================================================== */

@layer components {
    .c-alert {
        padding: var(--spacing-s) var(--spacing-s-1);
        border-radius: var(--border-radius-m);
        margin-block-end: var(--spacing-s-1);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-s);
        font-family: var(--font-family-system);
        font-weight: 600;
        font-size: var(--font-size-s-x-x);
    }

    .c-alert--success {
        /* https://tailwindui.com/components/application-ui/feedback/alerts */
        /* AA */
        background: #ecfdf5;
        color: #218065;
    }

    .c-alert--fail {
        /* https://tailwindui.com/components/application-ui/feedback/alerts */
        /* AA */
        background: #fef2f2;
        color: #c03233;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / DECORATION
=================================================== */

/* Override normalize */

@layer base {
    [placeholder],
    ::-webkit-input-placeholder,
    ::placeholder {
        color: inherit;
        opacity: 0.54;
        /* =JFG. "search this website". This needs to be rem
        because sometimes the search form gets embedded in .s-entry-content which could be 1.1em.
        We don't want the placeholder font size getting too big. */
        font-size: 1.25rem;
    }
}

@layer components {
    /* Small is output with instructions e.g.

    <label>{{ display }}</label>
    {{ field }}
    {{ instructions ?= '<small>{ instructions }</small>' }}
    {{ if error }}
        <p class="c-form-error">{{ error }}</p>
    {{ /if }}

    */
    .c-form small {
        display: block;
        padding-block-start: var(--spacing-s);
        font-size: 0.9em;
        text-transform: uppercase;
        font-family: var(--font-family-main);
        color: hsl(0deg 0% 0% / 50%);
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / DECORATION / BORDERS
=================================================== */

@layer elements {
    input:not([type="submit"]) {
        border: 1px solid hsl(0deg 0% 90%);
        border-radius: 4px;
    }

    [type="text"],
    [type="email"],
    [type="password"],
    [type="tel"],
    [type="number"],
    [type="date"],
    textarea {
        /* =JFG. Cancel default button appearance */
        -webkit-appearance: none;
        background: none;
        border: 0;
        border-radius: 0;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / INPUT TYPES
    =================================================== */
    [type="checkbox"] {
        -webkit-appearance: checkbox;
    }

    [type="radio"] {
        -webkit-appearance: radio;
    }

    [type="checkbox"],
    [type="radio"] {
        /* =JFG. So they always line up */
        float: left;
    }

    /* The \9 is correct apparently. https://www.google.co.uk/search?q=input%5Btype%3Dradio%5D%2C+input%5Btype%3Dcheckbox%5D+%7B+margin%3A+4px+0+0%3B+margin-top%3A+1px+%5C9%3B+line-height%3A+normal%3B+%7D&oq=input%5Btype%3Dradio%5D%2C+input%5Btype%3Dcheckbox%5D+%7B+margin%3A+4px+0+0%3B+margin-top%3A+1px+%5C9%3B+line-height%3A+normal%3B+%7D&aqs=chrome..69i57.552j0j7&sourceid=chrome&es_sm=91&ie=UTF-8 */
    [type="radio"],
    [type="checkbox"] {
        /* margin: 4px 0 0; */
        margin-top: 1px \9;
        line-height: normal;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / INPUT TYPES / DECORATION
    =================================================== */
    [type="search"] {
        border-radius: 5px;
    }
}

@layer elements {
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION
    =================================================== */
    textarea {
        border: 1px solid hsl(0deg 0% 73%);
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 1
    =================================================== */
    [role="search"] input {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 3px;
        box-shadow: 0 0 5px #ddd inset;
    }
}

@layer scope {
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 1
    =================================================== */
    .s-input-style--1 input {
        border: 1px solid #ccc;
        border-radius: 2px;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 2
    =================================================== */
    .s-input-style--2 {
        background-color: #f3f3f3;
    }

    .s-input-style--2 input {
        border: 1px solid #ccc;
        border-radius: 2px;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 3
    =================================================== */
    /* =JFG. https://dribbble.com/shots/267632-Personal-Info?list=searches&tag=form_input&offset=6 */
    .s-input-style--3 input:not([type="radio"]):not([type="file"]) {
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow:
            4px 4px 0 #f6f6f6,
            4px -4px 0 #f6f6f6,
            -4px -4px 0 #f6f6f6,
            -4px 4px 0 #f6f6f6;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 4
    =================================================== */
    /* =JFG. https://dribbble.com/shots/267632-Personal-Info?list=searches&tag=form_input&offset=6 */
    .s-input-style--4 input {
        border-radius: 30px;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 5
    =================================================== */
    .s-input-style--5 input {
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow:
            inset 4px 4px 0 #f2f2f2,
            inset 4px -4px 0 #f2f2f2,
            inset -4px -4px 0 #f2f2f2,
            inset -4px 4px 0 #f2f2f2;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 6
    =================================================== */
    .s-input-style--6 input:not([type="radio"]):not([type="file"]) {
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 5px rgba(0,0,0,0.1);
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 7
    =================================================== */
    .s-input-style--7 input {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 3px;
        box-shadow: 0 0 1px #ddd inset;
    }
    /* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION / STYLE 8
    =================================================== */
    .s-input-style--8 input:not([type="submit"]),
    .s-input-style--8 textarea {
        /* e.g. https://dribbble.com/shots/13869341/attachments/5476846?mode=media */
        /* In case you don't have --box-shadow-s-light-b */
        /* --box-shadow-s-light-b: 0 10px 9px -8px hsla(0, 0%, 0%, 0.09); */
        box-shadow: var(--box-shadow-s-light-b);
        border-radius: var(--border-radius-l);
    }

    .s-input-style--8 textarea {
        /* Slightly darker to make up for the fact it's bigger */
        border: 1px solid hsl(0deg 0% 88%);
    }

    .s-input-style--8 [type="submit"] {
        width: 100%;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / WORDPRESS
=================================================== */

@layer components {
    /* e.g. do not affect hubspot comment, which is the last field. We do not want to create a big gap between the Hubspot comment and the submit button */
    .comment-form-comment textarea {
        margin-block-end: 2.4rem;
    }
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / LABELS HIDDEN UNTIL FOCUSED
=================================================== */

/* Notes...

    - Uses :has(). For a version that uses JS see forms-archive in my css framework.
    - Used to provide a more compact experience
    - Still accessible since labels appear when you start typing

*/

/* HTML Example...

    {{ form:contact class='c-form u-hide-labels-until-focused' }}

*/

/* Alternative classes...

    - Use .u-hide-labels-until-focused__always-show to explicitly always show a label. You probably want to do this on radios and checkboxes since they have multiple labels

*/

@layer utilities {
    @supports selector(:has(*)) {
        .u-hide-labels-until-focused label {
            /* Fast out, Slow in */
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
            opacity: 0;
        }

        .u-hide-labels-until-focused input {
            /* Decrease */
            margin-block-end: var(--spacing-s);
        }

        .u-hide-labels-until-focused label:has(+ input:focus, + textarea:focus) {
            opacity: 1;
        }

        .u-hide-labels-until-focused__always-show label {
            opacity: 1;
            /* Make up for the labels which other fields don't have */
            padding-block-start: var(--spacing-l-1);
            padding-block-end: var(--spacing-m);
        }
    }
}

/* @import 'objects/objects.css'; */

/* @import 'components/components.css'; */

@layer components {
.c-home-hero {
    display: grid;
    grid-template-columns: var(--grid-template-columns-lean-left);
    grid-template-rows: [supplementary] 12vh [main] 1fr;
    min-height: max(100vh, 60rem);

    padding-block-start: var(--spacing-l);

    position: relative;

    .c-eyebrow-heading {
        grid-column: left;
        display: grid;
        align-content: end;
        padding-block-end: var(--spacing-s-2);
        text-transform: uppercase;
        font-weight: 900;
        color: var(--color-purple);
        letter-spacing: 1px;
    }

    .c-home-hero__image-container {
        grid-column: left-end / -1;
        grid-row: main;
        position: absolute;
        z-index: var(--z-index-below-body);
        top: 6rem;
        & img {
            filter: var(--filter-bw);
        }
        &::before {
            content: '';
            position: absolute;
            z-index: 999;
            /* bottom: 0; */
            width: 6rem;
            right: 0;
            top: -16.1rem;
            height: 20.4rem;
            border-bottom-left-radius: 160px;
            background: var(--color-purple);
        }
    }
}

.c-home-hero__content {
    grid-column: left / -1;
    grid-row: main;

    & h1 {
        position: relative;
        max-width: 40rem;
        padding-block-start: 0;
        text-transform: uppercase;
        font-weight: 900;
        font-size: 6em;
        line-height: 0.9;
        padding-block-end: var(--spacing-l-1);
    }

    & p {
        max-width: 16rem;
        font-size: 0.85em;
    }
}

.c-home-hero__supplementary {
    grid-row: supplementary / -1;
    grid-column-start: right-inset-end;
    max-width: 29rem;
    column-count: 2;
    gap: 2.85rem;
    font-size: 0.85em;
    padding-block-start: var(--spacing-l-1);
    /* max-width: 16rem; */
}
}

/* GROUP COMPONENTS / FRAMEWORK / BUTTONS
=================================================== */

@layer components {
    /* anchor instead of just .c-btn because the browser focusses on the a element, which is the background color we want to change should be... */
    .c-btn a,
    /* For when you add a button with JS and it doesn't have an anchor */
    .js--btn,
    /* Components > Framework > Nav */
    button.c-btn,
    /* Override form background default */
    /* e.g. Components > Framework > Comments */
    [type="submit"] {
        display: inline-flex;
        gap: 1rem;
        /* I've found it more stable to use pxls rather than ems. */
        --button-spacing: var(--button-spacing-vertical) var(--button-spacing-horizontal);
        padding: var(--button-spacing);
        text-decoration-line: none;
        cursor: pointer;
        /* =JFG. Hover states with a slight delay, but focus without any because keyboard users want quick feedback. Do not use 'all' because it resizes slowly when resizing the browser window */
        transition: background-color 0.2s ease 0s;
        &:last-child {
            margin-right: 0;
        }
    }
    .c-btn {
        position: relative;
        display: inline-block;
        /* Components > Framework > Forms > Layout */
        margin-block-end: 1.25rem;
        & a {
            /* e.g. icons in buttons */
            display: flex;
            align-items: center;
            text-align: left;
        }
        :is(p) + & {
            margin-block-start: var(--spacing-s-2);
        }
    }
}

@layer elements {
    /*
        - Don't affect the header
        - Not .c-btn + .c-btn in case a button is next to a different tag such as <p/>
    */
    main :is(.c-btn, button):not(:last-child) {
        margin-right: 1rem;
    }
    button,
    [type="search"],
    [type="submit"] {
        /* =JFG. Cancel default button appearance */
        -webkit-appearance: none!important;
        border: none;
    }
    button {
        /* =JFG. Cancel default button appearance */
        background: none;
        /* To combat -apple-system-blueinput on iOS 15 */
        color: initial;
        & svg {
            font-size: 1.3em;
        }
    }
}

/* GROUP COMPONENTS / FRAMEWORK / BUTTONS / TYPES
=================================================== */

@layer modifiers {
    .c-btn--1 {
        background: var(--color-purple);
        color: white;
        padding: var(--spacing-s-1) var(--spacing-l);
        border-radius: 50px;
        text-transform: uppercase;
        text-decoration: none;
        font-size: var(--font-size-s-x);
        font-weight: var(--font-family-main-weight-strong);
        font-weight: 700;
        letter-spacing: 0.2px;
    }
    /* 1 */
    /* 2 */
    .c-btn--2 a,
    button.c-btn--2,
    /* e.g. Components > Framework > Forms > Layout */
    .c-form [type="submit"] {
        background: var(--colour-turquoise);
        color: white;
        border-radius: var(--border-radius-s);
    }
    /* 3 */
    .c-btn--3 a {
        background: var(--colour-grey-light-4);
        border-radius: var(--border-radius-s);
    }
    /* GROUP COMPONENTS / FRAMEWORK / BUTTONS / ACCESSIBILITY / HOVER
    =================================================== */
    /* These should be slightly different to focus states. Subtle effects such as changing the background color from blue to darkblue are best for hover. We want to gently suggest rather than pop out (opposite of focus states).

        - Consider darkening the background color slightly e.g. blue to darkblue
        - Here is a good example...
        https://material-components.github.io/material-components-web-catalog/#/component/button

    */
    .c-btn a:hover {
        /* Cancel link hover effect */
        border-bottom: 0;
    }
}

/* GROUP COMPONENTS / DATA VIEW
=================================================== */

/* Notes...

    URL example
    -----------
    /bills

    What does it do?
    ----------------
    Arranges the page with a data view on the right

*/

/* HTML Example...

    <section class="c-data-view">
        <div class="c-eyebrow-heading">Good Evening</div>
        <div class="c-data-view__content">
            <h1>Mr Smith</h1>
            <div>
                <p class="c-lead-text"><img src="/img/help.svg" alt=""> Your fixed payment of $243 will be taken as usual by direct debit on 25th February 25th 2024</p>
                <p>Having trouble understanding your bill? Use our chat feature to get help.</p>
                <div>
                    <a class="c-btn c-btn--1" href="bills">Learn More</a>
                </div>
            </div>
        </div>
        <div class="c-data-view__supplementary">
            <div class="c-data-view__supplementary__image-container">
                <img src="img/windfarm-close-up.webp" alt="A close up of a wind turbine against a clear sky">
            </div>
            <div class="c-data-columns">
                etc.
            </div>
        </div>
    </section>

*/

@layer components {
    .c-data-view {
        display: grid;
        grid-template-columns: var(--grid-template-columns-lean-left);
        grid-template-rows: [supplementary] calc(12vh + var(--spacing-l)) [heading] 9rem [main] auto;
        /* margin-block-end: var(--spacing-l); */

        position: relative;

        .c-eyebrow-heading {
            grid-column: left;
            display: grid;
            align-content: end;
        }
    }

    .c-data-view__content {
        grid-column: left / -1;
        grid-row: heading / -1;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;

        & p {
            max-width: var(--max-width-reading-short-ch);
            margin-block-end: var(--spacing-m);
            &:last-of-type {
                margin-block-end: var(--spacing-l);
            }
        }

        > * {
            grid-column: 1 / -1;
        }

        & h1 {
            grid-column: left;
            padding-block-start: 0;
            padding-block-end: var(--spacing-l-1);
        }
    }

    .c-data-view__supplementary {
        grid-column: off-center-start / -1;
        grid-row: 1 / -1;
        display: grid;
        grid-template-rows: subgrid;

        .c-data-columns__column h2 {
            padding-block: 0 var(--spacing-m);
        }
    }

    .c-data-view__supplementary__image-container {
        /* Roughly match up with heading opposite */
        height: calc(100% - 4rem);

        grid-row: supplementary / main;

        display: flex;
        & img {
            width: 100%;
            object-fit: cover;
            filter: var(--filter-bw);
            border-bottom-left-radius: var(--border-radius-l);
        }

        position: relative;
        &::before {
            content: '';
            position: absolute;
            z-index: 999;
            /* bottom: 0; */
            width: 6rem;
            right: 0;
            height: 100%;
            background: var(--color-purple);
        }
    }
}

@layer components {
    /* GROUP COMPONENTS / FRAMEWORK / SITE HEADER
    =================================================== */
    /* HTML Example...

        .c-site-header
            .c-site-header__site-logo
            .c-site-header__nav
            .c-site-header__cta

    */
    .c-site-header {
        padding-inline-start: var(--side-column);
        /* display: grid; */
        /* grid-template-columns: var(--grid-template-columns-lean-left); */
    }

    .c-site-header__nav {
        padding: var(--spacing-l) var(--spacing-l-2);
        padding: 5rem 6rem 3rem;
        background: hsl(0deg 0% 97%);
        background: linear-gradient(to bottom, white 0%,hsl(0deg 0% 97%) 100%);
        font-weight: var(--font-family-main-weight-strong);
        text-transform: uppercase;
        letter-spacing: 0.1px;
        font-size: 0.85em;
        border-radius: var(--border-radius-l);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        a {
            color: var(--color-black-off);
        }
        [data-js-current-page] {
            text-decoration: underline;
            text-underline-offset: 7px;
            text-decoration-thickness: 4px;
            text-decoration-color: var(--color-purple);


            svg {
                font-size: 1.6em;
                margin-inline-end: var(--spacing-s-x);
            }
            &::
            before {
                --width: 145%;
                content: '';
                position: absolute;
                width: var(--width);
                height: 180%;
                right: calc(0% - (var(--width) - 100%) / 2);
                background: var(--color-purple-light);
                border-radius: 50px;
                /* box-shadow: 0px 4px 1px var(--color-purple); */
            }
        }
    }
    
    /* GROUP COMPONENTS / FRAMEWORK / NAV / CURRENT PAGE
    =================================================== */
    .o-current-menu-item > a span {
        color: var(--colour-turquoise);
    }



    /* GROUP COMPONENTS / FRAMEWORK / SITE LOGO
    =================================================== */
    .c-site-logo svg {
        width: 100%;
        height: 100%;
        /* width: 13rem; */
    }
}

@layer scope {
    body:has(.o-sidebar-layout) {
        .c-site-header {
            position: relative;
            &::after {
                /* content: ''; */
                background: linear-gradient(to bottom, white 0%,hsl(0deg 0% 97%) 100%);
                position: absolute;
                z-index: -1;
                left: 0;
                inset: 0;
            }
        }
    }
}

@layer components {
    .c-site-logo {
        /* padding-block-start: var(--spacing-l); */
        position: absolute;
        top: var(--spacing-m);
        left: var(--spacing-m);
        font-family: var(--font-family-heading);
        font-weight: 100;
        text-transform: uppercase;
        text-align: center;
    }
}

@layer components {
    .c-notices {
        display: flex;
        gap: var(--spacing-m);
        margin-block-end: 2rem;

        > * {
            margin: 0;
            background: var(--color-purple-light);
            color: var(--color-purple);
            font-size: var(--font-size-s);
            font-weight: var(--font-family-main-weight-strong);
            padding: var(--spacing-m);
            border-radius: 10px;
            max-width: 33rem;
            &:nth-child(2) {
                max-width: 14rem;
            }
        }
    }
}

@layer components {
    .c-statement {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-s);

        h2:has(+ &) {
            padding-inline-start: var(--spacing-m);
        }
    }
    .c-statement__line {
        max-width: 33rem;
        background: #fafafa;
        border-radius: 5px;
        padding: var(--spacing-s) var(--spacing-m);

        display: flex;
        justify-content: space-between;

        span:last-child {
            font-weight: var(--font-family-main-weight-strong);
        }
    }
    .c-statement__line__highlight {
        color: var(--color-purple);
        background: var(--color-purple-light);
        border-radius: 50px;
        padding-inline: var(--spacing-s-x);
        margin-inline-end: var(--spacing-s-x);
    }
}

@layer modifiers {
    .c-statement__line--total {
        margin-block-start: var(--spacing-l);
        background: #f1f1f1;
        border-radius: 50px;
    }
}

/* GROUP COMPONENTS / DATA COLUMNS
=================================================== */

/* Notes...

    URL example
    -----------
    /bills

    What does it do?
    ----------------
    Used for displaying columns of data like bills

*/

/* HTML Example...

    <div class="c-data-view__supplementary">
        <img src="img/windfarm-close-up.webp" alt="A close up of a wind turbine against a clear sky">
        <div class="c-data-columns">
            <div class="c-data-columns__column">
                <h2>Your Electricity Statement</h2>
                <table>
                    <tr>
                        <td>Previous balance</td>
                        <td>$224</td>
                    </tr>
                    <tr>
                        <td>Payments received</td>
                        <td>$243</td>
                    </tr>
                    <tr>
                        <td>Balance</td>
                        <td>CR+ $19</td>
                    </tr>
                </table>
            </div>
            <div class="c-data-columns__column">
                <h2>Your Gas Statement</h2>
            </div>
        </div>
    </div>

*/

@layer components {
    .c-data-columns {
        padding-block-end: var(--spacing-l);
        grid-row: 3;
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-l) var(--spacing-l-3);

        & h2 {
            font-size: var(--font-size-s);
            font-weight: var(--font-family-main-weight-strong);
        }
        /* GROUP ELEMENTS / TABLES
        =================================================== */
        table {
            max-width: 100%;
            min-width: 18rem;
            background-color: transparent;
            border-collapse: collapse;
            border-spacing: 0;
        }

        td:last-child {
            text-align: right;
            font-weight: var(--font-family-main-weight-strong);
        }

        table {
            width: 100%;
        }

        table > thead > tr > th,
        table > tbody > tr > th,
        table > tfoot > tr > th,
        table > thead > tr > td,
        table > tbody > tr > td,
        table > tfoot > tr > td {
            padding: 1rem 0;
            line-height: 1.43;
            vertical-align: top;
            border-block-start: 1px solid #eee;
        }
        /* GROUP ELEMENTS / TABLES / (JAY ADDED) / (CROSS POLLINATED)
        =================================================== */
        /* =JFG. So tabular info is easier to digest */
        table {
            font-size: 0.85rem;
            font-variant-numeric: tabular-nums;
        }
    }
    .c-data-columns__subtotal {
        position: relative;
        font-weight: var(--font-family-main-weight-strong);
        &::after {
            --width: var(--spacing-l);
            position: absolute;
            inset: 0;
            z-index: var(--z-index-below-body);
            margin-left: calc(0% - var(--width) / 2);
            width: calc(100% + var(--width));
            content: '';
            background: var(--color-gray-light-2);
            border-radius: var(--border-radius-l);
            border-radius: 15px;
        }
    }
    .c-data-columns__total {
        max-width: 18rem;
        flex-basis: 100%;
        color: var(--color-purple);
        font-weight: var(--font-family-main-weight-strong);
        display: flex;
        justify-content: space-between;
    }
}

@layer scope {
    h2 + table tr:first-child td {
        border-block-start: unset;
    }
    /* tr*/
    .c-data-columns__line {
        border-block-start: 3px solid black;
    }
    /* tr*/
    :has(+ .c-data-columns__subtotal) td {
        padding-block-end: var(--spacing-m);
    }
}

/* GROUP COMPONENTS / CTA
=================================================== */

/* Notes...

    URL example
    -----------
    /bills

    What does it do?
    ----------------
    Image floated left with text on the right

*/

/* HTML Example...

*/

@layer components {
    .c-cta {
        display: grid;
        grid-template-columns: var(--grid-template-columns-lean-left);
        padding-block-end: var(--spacing-l-4);
    }
    .c-cta__image {
        grid-column: 1 / left;
        margin-inline-start: 3rem;
        max-height: 35rem;
        & img {
            filter: var(--filter-bw-less);
            object-fit: cover;
            object-position: 50% 0%;
            border-radius: 150px;
            width: 90%;
            height: 100%;
        }
    }
    .c-cta__text {
        grid-column: right;
    }
}

/* Mini Components */

/* GROUP COMPONENTS / MINI / EYEBROW HEADING
=================================================== */

/* Notes...

    URL example
    -----------
    /bills

    What does it do?
    ----------------
    A small heading that sits above a larger heading or a piece of text

*/

/* HTML Example...

    <section class="c-data-view">
        <div class="c-eyebrow-heading">Good Evening</div>
        <div class="c-data-view__content">
            <h1>Mr Smith</h1>
            <p>Having trouble understanding your bill? Use our chat feature to get help.</p>
            <div>
                <a class="c-btn c-btn--1" href="bills">Learn More</a>
            </div>
        </div>
    </section>

*/

@layer components {
    .c-eyebrow-heading {
        padding-block-end: var(--spacing-s-1);
        text-transform: uppercase;
        font-weight: var(--font-family-heading-weight-strong);
        color: var(--color-purple);
        letter-spacing: 1px;
    }
}

/* GROUP COMPONENTS / MINI / LEAD TEXT
=================================================== */

/* Notes...

    URL example
    -----------
    /bills

    What does it do?
    ----------------
    A first paragraph, which has heavier styling

*/

/* HTML Example...

    <p class="c-lead-text">Your fixed payment of $243 will be taken as usual by direct debit on 25th February 25th 2024</p>

*/

@layer components {
    .c-lead-text {
        font-size: var(--font-size-s-1); line-height: var(--font-size-s-1-line-height);
        font-weight: var(--font-family-main-weight-strong);

        position: relative;
        [src*="svg"] {
            position: absolute;
            left: -4rem;
        }
    }
}

/* @import 'scope/entry-content.css'; */

/* @import 'utilities/animations.css'; */

/* GROUP SCOPE / LEGALISE
=================================================== */

/* Notes...

    URL example
    -----------
    /bills

    What does it do?
    ----------------
    Small print

*/

/* HTML Example...

    <section class="s-legalise">
        <h2>
        <p>
        <ol>
    </section>

*/

@layer scope {
    /* GROUP SCOPE / LEGALISE
    =================================================== */
    .s-legalise {
        max-width: var(--max-width-2);
        padding: var(--spacing-l) var(--spacing-l-1);
        margin-block-start: var(--spacing-l);

        /* background: var(--color-gray-light-3); */
        /* border-radius: var(--border-radius-m); */
        /* border: 1px solid var(--color-gray-light-1); */

        > h2:first-of-type {
            padding-block-start: 0;
        }
        & h2 {
            /* font-family: var(--font-family-heading); */
            /* font-weight: var(--font-family-heading-weight-strong); */
            font-size: var(--font-size-s);
            font-weight: var(--font-family-main-weight-strong);
            padding-block: var(--spacing-m); /* Decrease */
        }

        & p {
            font-size: var(--font-size-s-x);
            max-width: var(--max-width-reading);
        }
    }
}

/* GROUP UTILITIES / FRAMEWORK
=================================================== */

@layer utilities {
    .qa-test {
        border: 3px solid red!important;
    }
    /* Images without alt tags. Turn on when needed */
    /* img:not([alt]) {
        border: 5px dashed red;
    } */
    /* Components > Framework > Nav */
    .no-js .u-js-only {
        display: none!important;
    }
    /* Text meant only for screen readers. */
    /* Components > Framework > Nav */
    .u-screen-reader-text {
        clip: rect(1px, 1px, 1px, 1px);

        position: absolute!important;
        overflow: hidden;
        width: 1px;
        height: 1px;
        /* Needed if the text should be visible on keyboard focus */
        &:focus {
            clip: auto!important;

            z-index: 100000; /* Above WP toolbar. */
            display: block;
            top: 0;
            left: 0;

            width: auto;
            height: auto;
        }
    }
}

/* @import 'plugins/plyr.css'; */