/* 

Base Stylesheet

    * Version: 1.0
    
    * Powered by Grace & James
    * https://gracejamesmedia.com

    File Structure
     ↳header.php
      ↳page.php
       ↳content-page.php
     ↳footer.php

    Post Structure
     ↳header.php
      ↳single.php
       ↳content-page.php
     ↳footer.php

    Archive Structure
     ↳header.php
      ↳page.php
       ↳index.php
        ↳content.php
     ↳footer.php

    Breakpoints
    * Desktop: 1200px
    * Tablet: 992px
    * Mobile: 768px
    
    Contents
    * 01. Base
    * 02. Text
    * 03. Buttons
    * 04. Forms
    * 05. Elements
    * 06. Animations

*/


/* 01. Base */
/* -------------------------------------------- */

/* HTML */
html {
    font-size: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;

    /* Min Height to keep Footer at bottom of short pages */
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Default Fonts */
    font-family: var(--body);

    background: var(--black);
}

.no-scroll {
    overflow: hidden;
}

/* Root */
:root {

    /* Widths */
    --max-width: 1400px;
    --fixed-width: 1080px;

    /* Heights */
    --row: 180px;
    --gutter: 50px;
    --gap: 40px;
    --margin: 20px;
    --padding: 10px;

    /* Colour */
    --primary: #00249c;
    --secondary: #9c0000;
    --bg: #ececec;
    --white: #ececec;
    --black: #141414;
    --overlay: rgba(20, 20, 20, 0.75);
    --gradient: linear-gradient(180deg, rgba(20, 20, 20, 1) 70%, rgba(20, 20, 20, 0) 70%);

    /* Design */
    --border: 1px solid var(--black);
    --border-radius: 12px;

    /* Text */
    --line-height: 1.2;
    --p: 1rem;

    /* Transition */
    --trans: 500ms ease;
    --hover: opacity 400ms ease, background-color 400ms ease, color 400ms ease, border-color 400ms ease, transform 400ms ease, border 400ms ease;
    --menu: right 1.1s cubic-bezier(0.86, 0, 0.07, 1), transform 1.1s cubic-bezier(0.86, 0, 0.07, 1), opacity 1.1s cubic-bezier(0.86, 0, 0.07, 1);

   /* Augmented Fourth */
   /* --h1: 7.993rem;
   --h2: 5.653rem;
   --h3: 3.998rem;
   --h4: 2.827rem;
   --h5: 1.414rem;
   --h6: 1.333rem;
   --p: 1rem; */

    /* Perfect Fourth */
    /* --h1: 5.61rem;
    --h2: 4.209rem;
    --h3: 3.157rem;
    --h4: 2.369rem;
    --h5: 1.777rem;
    --h6: 1.333rem;
    --p: 1rem; */

    /* Major Third */
    --h1: 3.815rem;
    --h2: 3.052rem;
    --h3: 2.441rem;
    --h4: 1.953rem;
    --h5: 1rem;
    --h6: 1.25rem;
    --p: 1rem;

    /* Minor Third */
    /* --h1: 2.986rem;
    --h2: 2.488rem;
    --h3: 2.074rem;
    --h4: 1.728rem;
    --h5: 1.44rem;
    --h6: 1.2rem;
    --p: 1rem; */
    
    /* Major Second */
    /* --h1: 2.027rem;
    --h2: 1.802rem;
    --h3: 1.602rem;
    --h4: 1.424rem;
    --h5: 1.266rem;
    --h6: 1.125rem;
    --p: 1rem; */


    --heading: Helvetica, Arial, sans-serif;
    --body: Helvetica, Arial, sans-serif;

    --bold: 900;
    --regular: 400;
    --light: 300;

    --letter-spacing-wide: 0.15em;
    --letter-spacing-close: -0.025rem;
    --line-height: 1.2;

    /* Buttons */
    --button-padding: var(--margin) calc(var(--margin) * 2);
    --button-border: 1px solid var(--black);
    --button-radius: calc(var(--margin) * 2)
}

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

        /* Widths */
        --max-width: 1400px;
        --fixed-width: 1080px;
        --gutter: 30px;

        /* Heights */
        --row: 120px;
        --gap: 30px;
    }
}




/* 02. Text */
/* -------------------------------------------- */

/* Text */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* overflow-wrap: break-word; This makes words stay intact, so big fonts can break layouts */
    /* overflow-wrap: anywhere; 26th Feb 2025 - dont put on universale selector, it breaks div like within swiper.js */

    /* Makes mutiple words get broken onto different lines within buttons */
    /* word-break: break-word; */
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading);
    margin: 0;
    font-weight: var(--bold);
    letter-spacing: var(--letter-spacing-close);
    line-height: var(--line-height);

    color: var(--black);
    /* word-break: break-word; 26th March 2025 - Removed this because it was breaking auto flex sizing on some layouts */
    word-break: break-word; /* 26th March 2025 - Added back because on tiny mobile size, words would stay intact, not break, and overflow horizontally */
}

h1 {
    font-size: var(--h1);
    text-transform: capitalize;
}

h2 {
    font-size: var(--h2);
    text-transform: capitalize;
}

h3 {
    font-size: var(--h3);
    text-transform: capitalize;
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
    font-weight: var(--regular);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

h6 {
    font-size: var(--h6);
    font-weight: var(--regular);
}

/* Body */
p,
ul,
li,
ol,
i {
    font-family: var(--body);
    margin: 0;
    font-size: var(--p);
    font-weight: var(--regular);
    letter-spacing: var(--letter-spacing-close);
    line-height: 1.4;
    text-align: justify;
    transition: var(--hover);

    color: var(--black);

    word-break: break-word;
}

/* Links */
a {
    margin: 0;
    transition: var(--hover);

    color: var(--black);
    text-decoration: none;
}

a:hover:not(.fl-button) {
    opacity: 0.5;
}

.fl-rich-text a:-webkit-any-link {
    /* Must be "inline" because anything else will break links within text blocks */
    display: inline;
    text-decoration: underline;
}

/* Alignment */
*.center {
    text-align: center;
}

*.left {
    text-align: left;
}

*.right {
    text-align: right;
}

*.justify {
    text-align: justify;
}




/* 03. Buttons */
/* -------------------------------------------- */

button {
    appearance: auto;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-variant-alternates: normal;
    font-variant-position: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: medium;
    font-family: sans-serif;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-kerning: auto;
    font-feature-settings: normal;
    font-variation-settings: normal;
    text-rendering: auto;
    color: inherit;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: buttonface;
    margin: 0em;
    padding-block: 0;
    padding-inline: 0;
    border-width: 0;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}

/* Shape */
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:visited,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a:visited,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more:visited,
input[type="submit"],
input[type="submit"]:visited {
    display: inline-block;

    padding: var(--button-padding);

    font-size: var(--p);
    font-weight: var(--regular);
    line-height: var(--line-height);

    text-transform: capitalize;
    text-decoration: none;
    text-shadow: none;

    border: var(--button-border);
    border-radius: var(--button-radius);

    transition: var(--hover);

    -webkit-appearance: none; /* Fixes Safari on iPhone adding border radius */
}

/* Default */
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:visited,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a:visited,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more:visited,
input[type="submit"],
input[type="submit"]:visited {
    color: var(--black);
    background: transparent;
    border-color: var(--black);
}

.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:focus,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a:focus,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
    cursor: pointer;
    color: var(--bg);
    background: var(--black);
    border-color: var(--black);
}

/* Disabled */
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:disabled,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button a:disabled,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-post-feed .fl-post-feed-post .fl-post-feed-text .fl-post-feed-content .fl-post-feed-more:disabled,
input[type="submit"]:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Light */
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.light .fl-module-content .fl-button-wrap .fl-button,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.light .fl-module-content .fl-button-wrap .fl-button:visited,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.light a,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.light a:visited,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:visited,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:visited,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input[type="submit"],
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input[type="submit"]:visited {
    color: var(--bg);
    background: transparent;
    border-color: var(--bg);
}

.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.light .fl-module-content .fl-button-wrap .fl-button:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.light .fl-module-content .fl-button-wrap .fl-button:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.light .fl-module-content .fl-button-wrap .fl-button:focus,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.light a:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.light a:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.light a:focus,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:hover,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:active,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:focus,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:hover,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:active,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:focus,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input[type="submit"]:hover,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input[type="submit"]:active,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input[type="submit"]:focus {
    cursor: pointer;
    color: var(--black);
    background: var(--bg);
}

/* Alt */
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.alt .fl-module-content .fl-button-wrap .fl-button,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.alt .fl-module-content .fl-button-wrap .fl-button:visited,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.alt a,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.alt a:visited {
    color: var(--bg);
    background: var(--primary);
    border-color: var(--primary);
}

.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.alt .fl-module-content .fl-button-wrap .fl-button:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.alt .fl-module-content .fl-button-wrap .fl-button:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.alt .fl-module-content .fl-button-wrap .fl-button:focus,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.alt a:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.alt a:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button.alt a:focus {
    cursor: pointer;
    color: var(--bg);
    background: var(--secondary);
    border-color: var(--secondary);
}




/* 04. Forms */
/* -------------------------------------------- */

/**Placeholder**/
::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--black) !important;
    background: transparent !important;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--black) !important;
    background: transparent !important;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--black) !important;
    background: transparent !important;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: var(--black) !important;
    background: transparent !important;
}

/* Autofill */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s; /* Prevents autofill background flashing */
}

/* Blinking Dash */
input,
textarea {
  caret-color: var(--white) !important;
}

/* Forms */
form {
    display: flex;
    flex-direction: column;
    letter-spacing: var(--letter-spacing-close);
    gap: var(--margin);
}

form p {
    width: 100%;
}

label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--padding);
}

label span {
    margin: 0 !important;
    width: 100%;
}

input:not([type="submit"]):not([type="checkbox"]),
form textarea {
    width: 100%;
    margin: 0;
    padding: 0 0 var(--padding) 0;
    background: transparent;
    border: none;
    border-bottom: var(--border);
    border-radius: 0;

    font-family: var(--body);
    font-size: var(--p);
    font-weight: var(--regular);
}

input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 0;
    padding: initial;
    border: initial;
}

select {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: var(--padding);

    font-weight: var(--regular);
    font-size: var(--p);
    font-family: var(--body);
    color: var(--black);
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: left;

    appearance: auto;
    box-sizing: border-box;
    align-items: center;
    -webkit-rtl-ordering: logical;
    background-color: field;
    cursor: default;

    white-space: pre;
    border: var(--border);
    border-color: var(--black);
    border-radius: 0;

    background: transparent !important;
}

form .wpcf7-not-valid-tip {
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: var(--regular);

    margin-top: 5px !important;
}

form .wpcf7-response-output {
    font-size: var(--button-font);
    margin: 0 !important;
    padding: calc(var(--padding) / 2) !important;
    border: var(--border) !important;

    color: var(--black) !important; 

    /* 2 April 2025 !important neceassry on all of these to override plugin styles */
}

form.invalid .wpcf7-response-output,
form.unaccepted .wpcf7-response-output,
form.payment-required .wpcf7-response-output {
    color: var(--secondary);
    border-color: var(--secondary);
}

/* Checkboxes */
form .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item {
    display: block;
    margin: 0;
}

/* Submit */
form p:last-of-type {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--margin);
}

@media screen and (max-width: 768px) {
    form p:last-of-type {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Spinner */
.wpcf7-spinner {
    height: 100%;
    visibility: hidden;
    display: inline-block;
    background-color: var(--primary);
    opacity: 1;
    width: calc(var(--margin) * 2);
    height: calc(var(--margin) * 2);
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

.wpcf7-spinner::before {
    content: '';
    position: absolute;
    background-color: var(--bg);
    top: 25%;
    left: 25%;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: calc(var(--margin) / 2) calc(var(--margin) / 2);
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}




/* 05. Elements */
/* -------------------------------------------- */

/* Divs */
div {
    display: block;
    unicode-bidi: isolate;
}

main {
    flex: 1;
    background: var(--bg);
}

/* Accessiblity */
:focus-visible {
    outline: var(--secondary) auto 1px;
}

:focus,
:active {
    outline: none !important;
}

/* Links */
a:-webkit-any-link {
    color: unset;
    cursor: pointer;
    text-decoration: none;

    display: inline-block;

    white-space: normal;
}


a:-webkit-any-link:focus-visible {
    outline-offset: -3px;
}

/* Selection */
::-moz-selection {
    color: var(--white);
    background: var(--primary);
}

::selection {
    color: var(--white);
    background: var(--primary);
}

/* Lists */
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: var(--margin);
    unicode-bidi: isolate;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
    text-align: left;
}

/* Images */
img {
    border-radius: var(--border-radius);
    /* transition: var(--hover); removed 30 MArch 2025 – weird animations on resisizing */
    width: 100%;
    max-width: 100%;
    height: auto;

    display: block; /* added 13 Dec 2024 – does this break? */
}

/* Iframes */
iframe {
    border-radius: var(--border-radius);
}

/* Header */
header img {
    border-radius: 0;
}

/* Footer */
footer img {
    border-radius: 0;
}

footer .fl-row {
    margin-bottom: 0;
}

/* Screen Reader */
.fl-screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Top Section */
main > *:first-child .fl-row:first-child { /* The first .fl-row within the first child of main */
    background-color: var(--black);
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap {
    height: 100%;
    height: auto; /* 2025-01-30 if 100%, then it can crop content for smaller size VH */


    padding-top: var(--row);
    padding-bottom: var(--row);
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap:after {
    border-radius: inherit;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: var(--overlay);

    z-index: 0;
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content {
    position: relative;
    z-index: 2;
}

main > *:first-child .fl-row:first-child a:hover,
main > *:first-child .fl-row:first-child i:hover {
    cursor: pointer;
    color: var(--primary);
}

main > *:first-child .fl-row:first-child *:not(span):not(.fl-html *):not(input):not(label):not(form p) {
    color: var(--bg);
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:visited {
    color: var(--bg);
    background: transparent;
    border-color: var(--bg);
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:hover,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:active,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-button-wrap .fl-button:focus {
    color: var(--black);
    background: var(--bg);
    border-color: var(--bg);
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--white) !important;
    background: transparent !important;
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--white) !important;
    background: transparent !important;
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html :-ms-input-placeholder {
    /* IE 10+ */
    color: var(--white) !important;
    background: transparent !important;
}

main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html :-moz-placeholder {
    /* Firefox 18- */
    color: var(--white) !important;
    background: transparent !important;
}

/* Autofill */
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input:-webkit-autofill,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html textarea:-webkit-autofill,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html select:-webkit-autofill {
    -webkit-text-fill-color: var(--white) !important;
    color: var(--white) !important;
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s; /* Prevents autofill background flashing */
}

/* Blinking Dash */
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input,
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html textarea {
  caret-color: var(--white) !important;
}

/* Contact Form 7 */
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html .wpcf7-spinner {
    background-color: var(--white);
}
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html .wpcf7-spinner::before {
    background-color: var(--black);
}
main > *:first-child .fl-row:first-child .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html .wpcf7-response-output {
    border: var(--white) !important;

    color: var(--white) !important; 

    /* 2 April 2025 !important neceassry on all of these to override plugin styles */
}

/* Banners */
.fl-row.banner {
    background-color: var(--black);
}

.fl-row.banner *:not(span) {
    color: var(--bg);
}

.fl-row.banner .fl-row-content-wrap {
    padding-top: var(--row);
    padding-bottom: var(--row);
}

.fl-row.banner .fl-row-content-wrap:after {
    border-radius: inherit;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.fl-row.banner >.fl-row-content-wrap:after {
    background-color: var(--overlay);
}

.fl-row.banner .fl-row-content-wrap .fl-row-content {
    position: relative;
    z-index: 2;
}

.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-accordion,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-accordion .fl-accordion-item {
    border-color: var(--white);
}

.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-accordion .fl-accordion-item .fl-accordion-button a.fl-accordion-button-icon i {
    color: var(--white);
}

.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input:not([type="submit"]):not([type="checkbox"]), 
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-html input:not([type="submit"]):not([type="checkbox"]) form textarea {
    border-color: var(--white);
}

.fl-row.banner ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--white) !important;
    background: transparent !important;
}

.fl-row.banner ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--white) !important;
    background: transparent !important;
}

.fl-row.banner :-ms-input-placeholder {
    /* IE 10+ */
    color: var(--white) !important;
    background: transparent !important;
}

.fl-row.banner :-moz-placeholder {
    /* Firefox 18- */
    color: var(--white) !important;
    background: transparent !important;
}

/* Autofill */
.fl-row.banner input:-webkit-autofill,
.fl-row.banner textarea:-webkit-autofill,
.fl-row.banner select:-webkit-autofill {
    -webkit-text-fill-color: var(--white) !important;
    color: var(--white) !important;
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s; /* Prevents autofill background flashing */
}

/* Blinking Dash */
.fl-row.banner input,
.fl-row.banner textarea {
  caret-color: var(--white) !important;
}

/* Contact Form 7 */
.fl-row.banner .wpcf7-spinner {
    background-color: var(--white);
}
.fl-row.banner .wpcf7-spinner::before {
    background-color: var(--black);
}
.fl-row.banner .wpcf7-response-output {
    border: var(--white) !important;

    color: var(--white) !important; 

    /* 2 April 2025 !important neceassry on all of these to override plugin styles */
}

/* reCAPTCHA */
.grecaptcha-logo iframe {
    border-radius: 0;
}




/* 06. Animations */
/* -------------------------------------------- */

/* Animate Display = None */
@keyframes hide {
    from {
        display: none;
        opacity: 0;
    }

    to {
        display: block;
        opacity: 1;
    }
}

@keyframes show {
    from {
        display: block;
        opacity: 1;
    }

    to {
        display: none;
        opacity: 0;
    }
}

/* Animate Overlay */
@keyframes show-overlay {
    from {
        display: none;
        opacity: 0;
    }

    to {
        display: block;
        opacity: 0.7;
    }
}

@keyframes hide-overlay {
    from {
        display: block;
        opacity: 0.7;
    }

    to {
        display: none;
        opacity: 0;
    }
}