/* 

Base Stylesheet

    * Version: 1.0
    * Powered by Grace & James
    * https://gracejamesmedia.com
    
    File Structure
     ↳header.php
      ↳index.php
     ↳footer.php

    Breakpoints
    * Desktop: 1200px
    * Tablet: 992px
    * Mobile: 768px
    
    Contents
    * 01. Base
    * 02. Text
    * 03. Buttons
    * 04. Header
    * 05. Footer
    * 06. Pages
    * 07. Forms
    * 08. Elements
    * 09. Animations
    * 10. Fixes

*/



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

/* HTML */
html {
    font-size: 18px;
    margin-top: 0 !important; /* Removes Margin from Wordpress Admin Bar */
}

@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
    }
}



/* Body */
body {
    margin: 0;
    background-color: var(--background);
    color: var(--grey);
}
body.scroll-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;

    padding-right: var(--scrollbar-width, 0px); /* optional: for scrollbar compensation on desktop */
}
  

/* Universal */
* {
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
    font-style: normal;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Root */
:root {

    /* Variables */
    --header-height: 128.53px;
    --button-height: 51.8px;

    /* Widths */
    --max-width: 1280px;
    --fixed-width: 820px;

    /* Spacing */
    --spacer: 10px;
    --padding: 20px;
    --margin: 40px;
    --gap: 80px;
    --gutter: 50px;
    --row: 150px;
      
    /* Colour */
    --primary: #172c37;
    --secondary: #FFC74B;
    --tertiary: #BA4C28;

    --background: #FFF;
    --white: #FFF;


    --black: #242d32;
    --grey: #2E3B42;
    --footer: #e6e6e6;
    --overlay: rgba(22, 63, 86, 0.5);
    --gradient: linear-gradient(180deg, rgba(20, 20, 20, 1) 70%, rgba(20, 20, 20, 0) 70%);

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

    /* Transitions */
    --trans: 800ms ease;
    --hover: 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);

    /* Typography */
    --heading: lust, serif;
    --body: "gotham", sans-serif;

    --bold: 800;
    --regular: 400;
    --light: 400;

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

    /* 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.1rem;
    --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; */


    /* Buttons */
    --button-padding-vertical: 15px;
    --button-padding-horizontal: 30px;
    --button-border: 1px solid var(--primary);
    --button-radius: 100px;
}


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

        /* Variables */
        --header-height: 108.53px;
        /* --button-height: 51.59px; */

        /* Spacing */
        /* --spacer: 10px; */
        /* --padding: 20px; */
        /* --margin: 40px; */
        --gap: 20px;
        --gutter: 20px;
        --row: 80px;

        /* Minor Third */
        --h1: 2.986rem;
        --h2: 2.488rem;
        --h3: 2.074rem;
        --h4: 1.728rem;
        --h5: 1rem;
        --h6: 1.2rem;
        --p: 1rem;

    }
}



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

/* Defaults */
body,
input,
textarea,
button,
select {
  appearance: none;
  text-rendering: optimizeLegibility;

  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-variant-emoji: normal;

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

  font-optical-sizing: auto;
  font-size-adjust: none;
  font-kerning: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;

  /*width: 100%;*/ /* Removed to fix Builder UI */
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    font-family: var(--heading);
    font-weight: var(--bold);
	font-style: italic;
    letter-spacing: 0.035em;
    line-height: var(--line-height);

    color: var(--black);

    word-break: break-word; /* Added 2025/05/03 – Without this, headings with grids can easily overflow */
    text-wrap: balance;
}

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

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

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

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

h5 {
    font-family: var(--body);
    font-size: var(--h5);
    font-weight: var(--light);
	font-style: normal;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

h6 {
    font-family: var(--body);
    font-size: var(--h6);
    font-weight: var(--regular);
	font-style: normal;
	line-height: 1.4;
	letter-spacing: var(--letter-spacing-close);
}

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

    /* color: var(--black); /* Temporarily removed because its harder to change Module color later, checking if this matters */
}

/* Links */
a {
    font-family: var(--body);
    margin: 0;
    transition: opacity var(--hover);
    color: inherit;
    text-decoration: none;
}

a.active {
    color: var(--primary);
}

main p a,
main li a {
    text-decoration: underline;
}

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

header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a {
    opacity: 1 !important;
}




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

button {
    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: 0;
    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 a.fl-button, /* Must use a.fl-button so that it doesnt apply stlyes to li.fl-button which has a child <a> */
input[type="submit"],
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a {
    display: inline-block;

    padding: var(--button-padding-vertical) var(--button-padding-horizontal);

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

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

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

    transition: var(--hover);

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

    width: auto;
    align-self: start; /* Needed otherwise width: auto gets overridden later on by width: 100% on input later on in form section */

    word-break: keep-all;
    /* white-space: nowrap; */ /* This caused issue on mobile */
}

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

.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:focus,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module li.fl-button a:hover,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module li.fl-button a:active,
.fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module li.fl-button a:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
    cursor: pointer;
    color: var(--secondary);
    background: var(--primary);
    border-color: var(--primary);
}

/* Light */
header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button,
header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:visited,
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button,
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:visited,
header.hero .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button,
header.hero .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:visited,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a:visited,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:visited
header.navigation input[type="submit"],
header.navigation input[type="submit"]:visited,
footer.navigation input[type="submit"],
footer.navigation input[type="submit"]:visited,
header.hero input[type="submit"],
header.hero input[type="submit"]:visited {
    color: var(--background);
    background: transparent;
    border-color: var(--background);
}

header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:hover,
header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:active,
header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:focus,
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:hover,
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:active,
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:focus,
header.hero .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:hover,
header.hero .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:active,
header.hero .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:focus,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a:hover,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a:active,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a:focus,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:hover,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:active,
.fl-row.banner .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button:focus,
header.navigation input[type="submit"]:hover,
header.navigation input[type="submit"]:active,
header.navigation input[type="submit"]:focus,
footer.navigation input[type="submit"]:hover,
footer.navigation input[type="submit"]:active,
footer.navigation input[type="submit"]:focus,
header.hero input[type="submit"]:hover,
header.hero input[type="submit"]:active,
header.hero input[type="submit"]:focus {
    cursor: pointer;
    color: var(--primary);
    background: var(--background);
}

/* @media screen and (max-width: 768px) {
    .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button,
    input[type="submit"] {
        width: 100%;
    }
} */



/* 04. Header */
/* -------------------------------------------- */

/* Header */
header.navigation {
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 99999;
}
header.navigation .fl-row .fl-row-content-wrap {
    background-color: transparent;
    transition: background-color var(--trans);
}
header.navigation .fl-row .fl-row-content-wrap .fl-row-content {
    padding: var(--margin) var(--margin) 0 var(--margin);
    transition: padding var(--trans);
}

@media screen and (min-width: 768px) {
    header.navigation.scrolled .fl-row .fl-row-content-wrap {
        background-color: var(--primary);
    }
    header.navigation.scrolled .fl-row .fl-row-content-wrap .fl-row-content {
        padding: var(--padding) var(--margin);
    }
}

@media screen and (max-width: 768px) {
    header.navigation {
        position: absolute;
    }
    header.navigation .fl-row .fl-row-content-wrap .fl-row-content {
        padding: var(--gutter) var(--gutter) 0 var(--gutter);
    }
}
  
/* Column */
header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group {
    align-items: center;
}

/* Navigation */
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content {
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--spacer);
}

@media screen and (max-width: 768px) {
    header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col:last-of-type .fl-col-content .fl-module:first-of-type {
        display: none;
    }
}


/* Logo */
header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col:first-child .fl-col-content .fl-module .fl-photo-content {
    max-width: 150px;
}

@media screen and (max-width: 768px) {
    header.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col:first-child .fl-col-content .fl-module .fl-photo-content {
        max-width: 100px;
    }
}

/* Toggle */
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle {
    width: var(--button-height);
    height: var(--button-height);
    position: relative;
}

header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button {
    padding: 10px;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    position: absolute;
    width: var(--button-height);
    height: var(--button-height);
    z-index: 999;

    background-color: transparent;
    border-color: var(--background);
}

header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button:hover,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button.on {
    background-color: var(--background);
    border-color: var(--background);
}

header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button .line,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button:visited .line {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--background);
    transform-origin: center;
    transition: all var(--hover);
}

header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button .line.on,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button:hover .line,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button:active .line,
header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button:focus .line {
    background: var(--primary);
}

header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button .line.on:nth-child(1) {
    transform: rotate(-45deg) translate(-4px, 4px);
}

header.navigation .fl-row.fl-navigation .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module.fl-toggle a.fl-button .line.on:nth-child(2) {
    transform: rotate(45deg) translate(-4px, -4px);
}


/* Flyout */
header.navigation .fl-row.fl-flyout {
    position: fixed;
    top: 0;
    right: 0;
    width: 40vw;
    height: 100vh;
    height: 100svh;

    background: var(--primary);

    transition: var(--menu);

    z-index: 888;

    /* visibility: hidden; */
    pointer-events: none;
    transform: translateX(100%);
}


header.navigation .fl-row.fl-flyout.on {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}
 
header.navigation .fl-row.fl-flyout .fl-row-content-wrap {
    height: 100%;
    overflow-y: scroll;
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content {
    height: auto;
    min-height: 100%;
    justify-content: space-between;
    padding: calc(var(--margin) + 44.265px - (var(--button-height) / 2)) var(--margin) var(--margin) var(--margin);
    /* gap: unset; 2025/05/30 – Removed due to there being no vertical spacing when the VH is small */ 
}

@media screen and (min-width: 768px) {
    header.navigation.scrolled .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content {
        padding: var(--margin);
    }
}

@media screen and (max-width: 992px) {
    header.navigation .fl-row.fl-flyout {
        width: 60vw;
    }
}

@media screen and (max-width: 768px) {
    header.navigation .fl-row.fl-flyout {
        width: 100vw;
    }
    header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content { 
        padding-top: calc(var(--gutter) + 44.265px - (var(--button-height) / 2));
    }
}

/* Close Spacer */
header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-close-spacer {
    width: var(--button-height);
    height: var(--button-height);
}

/* Links */
header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li a {
    color: var(--white);
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul {
    gap: 0;
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group:nth-of-type(1) .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li {
    font-size: var(--body);
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group:nth-of-type(2) .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li {
    font-size: var(--h2);
    font-weight: var(--bold);
    line-height: 1.2;
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group:nth-of-type(3) .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li {
    font-size: var(--body);
}

@media screen and (max-width: 768px) { 
    header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group:nth-of-type(2) .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li {
        font-size: var(--h3);
        line-height: 1.4;
    }
}

/* Sub Menu */
header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li.menu-item-has-children > a::after {
    content: "+";
    display: inline-block;
    padding-left: calc(var(--spacer) / 2);
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li.menu-item-has-children.submenu-open > a::after {
    content: "–";
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li ul.sub-menu {
    height: 0;
    overflow: hidden;
    transition: height var(--trans);
}
  
header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li ul.sub-menu.open {
    height: auto;
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li ul.sub-menu li {
    font-size: var(--body);
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li ul.sub-menu li:first-of-type {
    margin-top: var(--spacer);
}

header.navigation .fl-row.fl-flyout .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-module-content .fl-menu nav ul li ul.sub-menu li:last-of-type {
    margin-bottom: var(--spacer);
}

/* Overlay */
.fl-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;

    background: var(--overlay);
    opacity: 0;

    cursor: pointer;
    pointer-events: none;

    z-index: 777;
    transition: var(--menu);
}

.fl-overlay.visible {
    opacity: 1;
    pointer-events: all;
}



/* 05. Footer */
/* -------------------------------------------- */

/* Footer */
footer.navigation {
    background-color: var(--footer);
    padding: calc(var(--row) / 2) 0 var(--gutter) 0;
}

@media screen and (max-width: 768px) { 
    footer.navigation {
        padding-top: var(--row);
    }
}


/* Columns */
footer.navigation .fl-row:not(:last-child) .fl-row-content-wrap .fl-row-content .fl-col-group {
    width: 100%;
}
footer.navigation .fl-row:not(:last-child) .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col {
    flex: 1;
}
footer.navigation .fl-row:not(:last-child) .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col:first-of-type {
    flex: 3;
}

@media screen and (max-width: 768px) {
    footer.navigation .fl-row:not(:last-child) .fl-row-content-wrap .fl-row-content .fl-col-group {
        gap: calc(var(--row) / 2);
    }
    footer.navigation .fl-row:not(:last-child) .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col:first-of-type {
        margin-bottom: calc(var(--row) / 2);
    }
}

/* Logo */
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module .fl-photo-content {
    max-width: 280px;
    margin: auto;
}

/* Bottom */
footer.navigation .fl-row:last-of-type {
    margin-bottom: 0;
}
footer.navigation .fl-row:last-of-type ul {
    flex-direction: row;
    gap: var(--spacer);
}

@media screen and (max-width: 768px) {
    footer.navigation .fl-row:last-of-type .fl-row-content-wrap .fl-row-content .fl-col-group {
        flex-direction: column-reverse;
        gap: var(--spacer);
    }
}

/* Modules */
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module {
    color: var(--primary);
}
footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module:not(:last-child) {
    margin-bottom: var(--padding) !important;
    padding-bottom: calc(var(--spacer) / 2) !important;
    border-bottom: var(--border);


    word-break: keep-all;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    footer.navigation .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module {
        text-align: center;
        width: max-content;
        margin: auto;
    }
}



/* 06. Pages */
/* -------------------------------------------- */

/* Home */
.home *:not(header):not(footer) > .fl-row:first-of-type .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content h5.fl-module:first-of-type {
    margin-bottom: calc(var(--spacer) / 2);
}
.home *:not(header):not(footer) > .fl-row:first-of-type .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content h6.fl-module:first-of-type {
    margin-bottom: 0;
}

.home *:not(header):not(footer) > .fl-row:first-of-type .fl-row-content-wrap .fl-row-content {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: var(--header-height);
    padding-bottom: var(--margin);
    
    justify-content: space-between;
}

.home *:not(header):not(footer) > .fl-row:first-of-type .fl-row-content-wrap .fl-row-content::before {
    display: block !important;
}

@media screen and (max-width: 768px) {
    .home *:not(header):not(footer) > .fl-row:first-of-type .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module-photo .fl-photo-content img {
        max-width: 80px;
        margin: auto;
    }
}


@media screen and (min-width: 768px) {
    .home *:not(header):not(footer) > .fl-row:first-of-type .fl-row-content-wrap .fl-row-content .fl-col-group:first-of-type {
        padding-bottom: calc(var(--row) / 2);
    }
}




/* Hero */
header.hero .fl-row {
    /* margin-bottom: calc(var(--row) / 2); */
    margin-bottom: var(--row);
}

header.hero .fl-row .fl-row-content-wrap {
    background: var(--primary);
    position: relative;
}

header.hero .fl-row .fl-row-content-wrap .fl-row-content {
    max-width: var(--fixed-width);
    padding-top: calc(var(--gap) + var(--header-height));
    padding-bottom: var(--row);
}

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

    background: var(--overlay);
}

header.hero .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group {
    position: relative; 
    z-index: 2;
}

header.hero .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module {
    color: var(--white);
    text-align: center;
}


/* 404 */
header.error-404 .fl-row {
    margin-bottom: 0;
}

header.error-404 .fl-row .fl-row-content-wrap .fl-row-content {
    padding-bottom: 0;
}

header.error-404 .fl-row-content-wrap .fl-row-content .fl-col-group {
    padding-bottom: var(--row);

    border-bottom: var(--border);
    border-color: var(--white);
}

header.hero.error-404 .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module {
    text-align: center;
}

header.error-404 .fl-row .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col .fl-col-content .fl-module a.fl-button, 
header.error-404 input[type="submit"] {
    width: auto;
}
  

/* 07. Forms */
/* -------------------------------------------- */

/* Inputs - Default */
input,
textarea,
select {    
    display: inline-block;
    cursor: text;

    -webkit-rtl-ordering: logical;

    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;

    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;

    margin: 0;
    padding: 0;
    padding-block: var(--button-padding-vertical);
    padding-inline: var(--button-padding-vertical);

    width: 100%;

    color: var(--black);
    caret-color: var(--black);
    background: transparent;
    background-color: transparent;

    border-width: unset;
    border-style: unset;
    border-color: unset;
    border-image: unset;
    border: var(--border);
    border-radius: var(--border-radius);
}

/* Inputs - Alternate */
header.navigation input,
header.navigation textarea,
header.hero input,
header.hero textarea,
.fl-row.banner input,
.fl-row.banner textarea {   
    color: var(--white);
    caret-color: var(--white);

    border-color: var(--white);
}

input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  -webkit-appearance: checkbox; /* Safari fallback */
  -moz-appearance: checkbox;    /* Firefox fallback */
  width: 1rem;
  height: 1rem;
  margin: 0;
  vertical-align: middle;
}

/* Placeholder - Default */
input::placeholder,
textarea::placeholder {
    color: var(--grey);
    background: none;
    background-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: var(--grey);
    background: none;
    background-color: transparent;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: var(--grey);
    background: none;
    background-color: transparent;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: var(--grey);
    background: none;
    background-color: transparent;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: var(--grey);
    background: none;
    background-color: transparent;
}

/* Placeholder - Alternate */
header.navigation input::placeholder,
header.navigation textarea::placeholder,
header.hero input::placeholder,
header.hero textarea::placeholder,
.fl-row.banner input::placeholder,
.fl-row.banner textarea::placeholder {
    color: var(--white);
}

header.navigation input::-webkit-input-placeholder,
header.navigation textarea::-webkit-input-placeholder,
header.hero input::-webkit-input-placeholder,
header.hero textarea::-webkit-input-placeholder,
.fl-row.banner input::-webkit-input-placeholder,
.fl-row.banner textarea::-webkit-input-placeholder {
    color: var(--white);
}

header.navigation input:-moz-placeholder,
header.navigation textarea:-moz-placeholder,
header.hero input:-moz-placeholder,
header.hero textarea:-moz-placeholder,
.fl-row.banner input:-moz-placeholder,
.fl-row.banner textarea:-moz-placeholder {
    color: var(--white);
}

header.navigation input::-moz-placeholder,
header.navigation textarea::-moz-placeholder,
header.hero input::-moz-placeholder,
header.hero textarea::-moz-placeholder,
.fl-row.banner input::-moz-placeholder,
.fl-row.banner textarea::-moz-placeholder {
    color: var(--white);
}

header.navigation input:-ms-input-placeholder,
header.navigation textarea:-ms-input-placeholder,
header.hero input:-ms-input-placeholder,
header.hero textarea:-ms-input-placeholder,
.fl-row.banner input:-ms-input-placeholder,
.fl-row.banner textarea:-ms-input-placeholder {
    color: var(--white);
}

/* Autofill - Default */
input:-webkit-autofill,
textarea:-webkit-autofill {
    transition: background-color 100000s ease-in-out 0s; /* Hack to avoid yellow flash */
    -webkit-text-fill-color: var(--black);
    caret-color: var(--black);
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
}

input:-moz-autofill,
textarea:-moz-autofill {
    background-color: transparent !important;
    color: var(--black) !important;
}

/* Autofill - Alternative */
header.navigation input:-webkit-autofill,
header.navigation textarea:-webkit-autofill,
header.hero input:-webkit-autofill,
header.hero textarea:-webkit-autofill,
.fl-row.banner input:-webkit-autofill,
.fl-row.banner textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--white);
    caret-color: var(--white);
}

header.navigation input:-moz-autofill,
header.navigation textarea:-moz-autofill,
header.hero input:-moz-autofill,
header.hero textarea:-moz-autofill,
.fl-row.banner input:-moz-autofill,
.fl-row.banner textarea:-moz-autofill {
    color: var(--white) !important;
}


/* Remove Safari’s native "clear" (x) button */
input::-webkit-search-cancel-button {
    display: none;
}

/* For number inputs (removes up/down arrows) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For date inputs (removes calendar icon) */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}


/* Contact Form 7 */
.wpcf7 .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--padding);
}
.wpcf7 .wpcf7-form .wpcf7-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding);
}

/* Fix Extra Vertical Spacing */
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-form-control-wrap {
    font-size: 0;
}
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-form-control-wrap .wpcf7-form-control { 
    font-size: var(--p);
}

/* Lists */
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-list-item {
    margin: 0;
}
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-form-control-wrap > span,
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-form-control-wrap > span label {
    display: flex;
    align-items: center;
    gap: var(--spacer);
}

/* Not valid Tip */
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-not-valid-tip {
    display: block;
    margin-top: calc(var(--spacer) / 2);

    font-size: 0.85rem;
    font-weight: normal;
    text-align: left;
    letter-spacing: var(--letter-spacing-close);

    color: var(--black);
}

/* Submit */
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-form-control-wrap:last-of-type {
    display: flex;
    align-items: center;
    gap: var(--spacer);
}

@media screen and (max-width: 768px) {
    .wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-form-control-wrap:last-of-type {
        flex-direction: column;
    }
}

/* Spinner - Default */
.wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-spinner {
    /* visibility: visible; */
    display: inline-block;
    background-color: var(--primary);
    opacity: 1;

    width: var(--button-height);
    height: var(--button-height);
    border: 5px solid transparent;
    border-radius: 100%;

    background:
        linear-gradient(var(--background), var(--background)) padding-box,
        conic-gradient(var(--background) 0%, var(--background) 15%, var(--primary) 50%) border-box;

    padding: 0;
    margin: 0;

    animation: spin 1000ms linear infinite;
    position: relative;
    box-sizing: border-box;

    flex-shrink: 0; /* Stops from getting squished if within flex box */
}

/* Spinner - Alternative */
header .wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-spinner,
.banner .wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-spinner {
    background-color: var(--white);
    
    background:
        linear-gradient(var(--black), var(--black)) padding-box,
        conic-gradient(var(--black) 0%, var(--black) 15%, var(--white) 50%) border-box;
}

footer .wpcf7 .wpcf7-form .wpcf7-form-wrapper .wpcf7-spinner {
    background-color: var(--footer);
    
    background:
        linear-gradient(var(--footer), var(--footer)) padding-box,
        conic-gradient(var(--footer) 0%, var(--footer) 15%, var(--primary) 50%) border-box;

    display: none !important;
}

.wpcf7-spinner::before {
    display: none;
}

/* Response */
.wpcf7 .wpcf7-form .wpcf7-response-output {
    margin: 0;

    font-size: 0.85rem;
    font-weight: normal;
    text-align: left;
    letter-spacing: var(--letter-spacing-close);

    padding: 0;
    border: none;
}




/* 08. Elements */
/* -------------------------------------------- */

/* Rich Text  */
@media screen and (min-width: 768px) {
    .fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col:not(:last-child) .fl-rich-text {
        max-width: 480px;
        text-align: justify;
    }
}

/* Banners */
.fl-row.banner .fl-row-content-wrap {
    padding-top: calc(var(--row) * 2);
    padding-bottom: var(--gutter);

    background: var(--black);
}

.fl-row.banner .fl-heading,
.fl-row.banner .fl-rich-text {
    color: var(--primary);
}

/* Call To Action */
.fl-row.call-to-action .fl-row-content-wrap {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);

    border: var(--border);
}

.fl-row.call-to-action * {
    text-wrap: balance;
}

/* Ligthbox */
.mfp-content > * {
    padding: var(--padding);
}

/* Lists */
ul, ol {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 17px;
    unicode-bidi: isolate;
}
ul {
    list-style-type: disc;
}
ol {
    list-style-type: decimal;
}
header ul,
footer ul,
header ol,
footer ol {
    list-style-type: none;
    padding-inline-start: 0;

    display: flex;
    flex-direction: column;
    gap: calc(var(--spacer) / 2);
}

/* Images */
img {
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block !important;
}
header img,
footer img {
    border-radius: 0;
}

/* Posts */
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group:not(.fl-row.fl-related .fl-row-content-wrap .fl-row-content .fl-col-group:first-child) {
    /* Excludes the first row in the "Related Posts" partial where there is a section title and "All" archive taxanomy button – If you remove this, uncomment the second line under "Related" in this CSS file */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: var(--margin);
}
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group .fl-col {
    flex: unset !important;
}
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group a.fl-col {
    opacity: 1 !important;
}
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group a.fl-col .fl-col-content .fl-module .fl-photo-content {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: inline-block;
}
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group a.fl-col .fl-col-content .fl-module .fl-photo-content {
    background: var(--black);
}
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group a.fl-col .fl-col-content .fl-module .fl-photo-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.5;
    transition: var(--hover);
}
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group a.fl-col .fl-col-content .fl-module .fl-photo-content img:hover {
    opacity: 1 !important;
}
.fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group a.fl-col .fl-col-content .fl-module:first-child:not(.fl-module-photo) { /* Adds padding to first element if it's not a photo */
    padding-top: var(--padding);
}

@media screen and (max-width: 768px) {
    .fl-row.fl-posts .fl-row-content-wrap .fl-row-content .fl-col-group:not(.fl-row.fl-related .fl-row-content-wrap .fl-row-content .fl-col-group:first-child) {
        /* Excludes the first row in the "Related Posts" partial where there is a section title and "All" archive taxanomy button – If you remove this, uncomment the second line under "Related" in this CSS file */
        grid-template-columns: repeat(1, 1fr);
        gap: var(--margin);
    }
}



/* 09. Animations */
/* -------------------------------------------- */

/* Spin */
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/* 10. Accessibility */
/* -------------------------------------------- */

/* Screen Reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Remove all focus outlines by default */
:focus,
:active {
    outline: none;
}

/* Remove all sneaky beaver Builder outlines too! */
.fl-accordion-button-label:focus, 
.fl-accordion-button-label:active, 
.fl-accordion-button-icon:focus, 
.fl-accordion-button-icon:active {
    outline: 0;
}
  
/* Only show outlines if user is navigating with a keyboard */
.keyboard-user :focus,
.keyboard-user :active,
.keyboard-user :focus-visible {
    outline: var(--border);
    outline-color: var(--primary);
    outline-offset: 2px;
}

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


/* 10. Fixes */
/* -------------------------------------------- */

/* Inline button styles on span */
.fl-builder-content a.fl-button *, 
.fl-builder-content a.fl-button:visited * {
    color: unset !important;
}