@font-face
{
    font-family: "Delight";
    font-style: normal;
    font-weight: 100 900;
    src: url("https://lockesoftware.co.uk/fonts/Delight-VF.ttf") format("truetype");
}

@font-face
{
    font-family: "Host Grotesk";
    font-style: normal;
    font-weight: 100 900;
    src: url("https://lockesoftware.co.uk/fonts/HostGrotesk-VariableFont_wght.ttf") format("truetype");
}

@font-face
{
    font-family: "Host Grotesk";
    font-style: italic;
    font-weight: 100 900;
    src: url("https://lockesoftware.co.uk/fonts/HostGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
}

:root
{
    --primary: #000;
    --secondary: #777;
    --tertiary: #AAA;
    --quaternary: #CCC;
    --background: #DDD;
    --quinary: #EBEBEB;
    --accent: #0048FF;
    --warn: #FF4F00;
    --danger: #E4004E;

    --heading: "Delight";
    --body: "Host Grotesk";

    --common-padding: calc((100vw - 1000px) / 2);
    --comfort-inset: 100px;

    background-color: var(--background);
    color: var(--primary);

    .maxWidthPad { display: none; }
    .maxWidthPhone { display: none; }

    @media only screen and (max-width: 1199px)
    {
        --common-padding: calc((100vw - 750px) / 2);
        --comfort-inset: 75px;

        .maxWidthPad { display: revert; }
        .minWidthDesktop { display: none !important; }
    }

    @media only screen and (max-width: 599px)
    {
        --common-padding: calc((100vw - 300px) / 2);
        --comfort-inset: 0px;

        .maxWidthPhone { display: revert; }
        .minWidthPad { display: none !important; }
    }
}

body
{
    margin: 0 var(--common-padding);
}

body.nonconform
{
    margin: 0;
}

.conform
{
    margin: 0 var(--common-padding);
}



/* TEXT STYLES */

h1
{
    font-family: var(--heading), ui-sans-serif, sans-serif;
    font-size: 48px;
    font-weight: 500;
    margin-top: 80px;
    margin-bottom: 30px;
}

h1.centre
{
    text-align: center;
}

h1.pagetitle
{
    font-size: 64px;
    font-weight: 200;
    margin: auto 0;
    width: 100%;
}

h1.pagetitle.notop
{
    margin-top: 0;
}

h1.errortitle
{
    font-size: 128px;
    font-weight: bold;
    color: var(--danger);
}

h2
{
    font-family: var(--heading), ui-sans-serif, sans-serif;
    font-size: 32px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 30px;
}

h3
{
    font-family: var(--heading), ui-sans-serif, sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 30px;
}

p
{
    font-family: var(--body), ui-sans-serif, sans-serif;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 30px;
}

p.large
{
    font-family: var(--body), ui-sans-serif, sans-serif;
    font-size: 20px;
    margin-bottom: 30px;
}

p.extraLarge
{
    font-family: var(--body), ui-sans-serif, sans-serif;
    font-weight: 300;
    font-size: 25px;
    margin-bottom: 30px;
}

p.preamble
{
    font-family: var(--heading), ui-sans-serif, sans-serif;
    font-weight: 300;
    font-size: 20px;
    margin-bottom: 50px;
}

p.footnote
{
    font-family: var(--body), ui-sans-serif, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: var(--secondary);
}

p.end
{
    margin-bottom: 0;
}

a
{
    font-family: var(--body), ui-sans-serif, sans-serif;
    color: var(--accent);
    text-decoration: none;
}

a:active, a:visited { color: var(--accent); }
a:hover
{
    opacity: 50%;
    text-decoration: underline;
}

li
{
    font-family: var(--body), ui-sans-serif, sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
}

ul
{
    margin-bottom: 30px;
}

@media only screen and (max-width: 599px)
{
    h1 { font-size: 32px; }
    h1.pagetitle { font-size: 44px; }
    h2 { font-size: 28px; }
}



/* CONTAINER STYLES */

div.masthead
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    background-color: #FFF;
    padding-top: 60px;
    padding-left: var(--common-padding);
    padding-right: var(--common-padding);
    margin-left: calc(var(--common-padding) * -1);
    margin-right: calc(var(--common-padding) * -1);
    margin-bottom: 60px;
    border-bottom: var(--secondary) solid 1px;
    min-height: 360px;
}

div.breadcrumb
{
    width: 100%;
    margin-top: auto;
    margin-bottom: 30px;

    * { margin: 0; }

    p
    {
        display: inline-block;
        color: var(--secondary);
        padding-right: 20px;
    }
    p.separator { color: var(--tertiary); }

    a
    {
        display: inline-block;
        padding-right: 20px;
    }

    a.up { display: none; }
}

section
{
    margin-left: var(--comfort-inset);
    margin-bottom: 80px;
}

.ignoreSection
{
    margin-left: calc(var(--comfort-inset) * -1);
}

div.warningbox
{
    border: var(--warn) solid 1px;
    border-radius: 5px;
    color: var(--warn);
}

div.split
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 0;

    margin-bottom: 80px;

    .left { grid-area: 1 / 1 / 2 / 2; }
    .right { grid-area: 1 / 2 / 2 / 3; }
}

div.hero
{
    margin: 0 calc(var(--common-padding) * -1);
    padding: 80px var(--common-padding);
    width: calc(100vw - (var(--common-padding) * 2));
    min-height: calc(100vh - 160px);
}

div.hero-cta
{
    display: flex;
    flex-direction: row;
    height: 60px;

    position: absolute;
    bottom: 80px;
    left: var(--common-padding);
    right: var(--common-padding);

    div
    {
        flex-grow: 1;
    }

    button
    {
        margin: 0 10px;
    }
}

div#addendum
{
    padding: 40px var(--common-padding);
    margin-left: calc(var(--common-padding) * -1);
    margin-right: calc(var(--common-padding) * -1);
    margin-bottom: -80px;

    background-color: var(--quaternary);
    color: var(--secondary);
}

@media only screen and (max-width: 599px)
{
    div.breadcrumb
    {
        p { display: none; }
        a { display: none; }
        a.up { display: revert; }
    }

    div.split
    {
        display: revert;
        .left, .right { margin-bottom: 50px; }
        .nobottom { margin-bottom: 0; }
    }

    div.hero
    {
        margin: 0 calc(var(--common-padding) * -1);
        padding: 80px calc(var(--common-padding) * 0.5);
        width: calc(100vw - (var(--common-padding) * 2));
        min-height: calc(100vh - 160px);
    }

    div.hero-cta
    {
        left: calc(var(--common-padding) * 0.5);
        right: calc(var(--common-padding) * 0.5);

        div { flex-grow: 0; }
        button { flex-grow: 1; }
    }
}

@media only screen and (max-width: 599px)
{
    div.masthead
    {
        min-height: 240px;
    }
}

/* BUTTON STYLES */

button
{
    height: 45px;
    padding: 10px 30px;
    font-family: var(--body), ui-sans-serif, sans-serif;
    font-size: 16px;
    background-color: transparent;
    border-radius: 23px;
    border: var(--primary) solid 1.5px;
    color: var(--primary);

    transition: background-color 0.2s ease-out,
                color 0.2s ease-out;
}

button.accent
{
    background-color: var(--accent);
    border: none;
}

button.large
{
    height: 60px;
    padding: 10px 30px;
    font-size: 20px;
    border-radius: 30px;
}

button:hover
{
    cursor: pointer;

    background-color: var(--primary);
    color: var(--background);
}

button.accent:hover
{
    color: var(--accent);
}

@media only screen and (max-width: 599px)
{
    button.large
    {
        height: 45px;
        padding: 10px 30px;
        font-size: 16px;
        border-radius: 23px;
    }
}


/* FOOTER STYLES */

div#footer
{
    padding: 80px var(--common-padding);
    margin-left: calc(var(--common-padding) * -1);
    margin-right: calc(var(--common-padding) * -1);
    background-color: #000;
    color: #FFF;
    min-height: 380px;

    div#topBar
    {
        height: 30px;
    }

    div#bottomBar
    {
        border-top: #FFF solid 1px;
        height: 31px;

        display: flex;
        flex-direction: row;

        p
        {
            margin-top: 16px;
            margin-bottom: 0
        }

        a
        {
            display: inline-block;
            font-family: var(--body), ui-sans-serif, sans-serif;
            font-size: 16px;
            margin-left: 30px;
            color: white;
            margin-top: 16px;
            margin-bottom: 0;
        }

        a:active, a:visited { color: white; }
        a:hover { opacity: 50% }
    }
}

div#footer.mini
{
    min-height: 120px;
}

@media only screen and (max-width: 599px)
{
   div#footer
   {
       div#bottomBar
       {
           height: revert;
           flex-direction: column;

           a { margin-left: 0; }
       }
   }
}



/* LOCKE MENU STYLES */

div.lockebutton
{
    position: fixed;
    z-index: 9999;

    margin-left: calc(var(--common-padding) * -1);

    background-color: #000;
    color: #FFF;
    width: 100px;
    height: 20px;
    padding: 20px;

    transition: background-color 200ms ease-out,
                color 200ms ease-out;
}

div.lockebutton:hover
{
    cursor: pointer;
    background-color: #FFF;
    color: #000;
}

div#lockemenu
{
    --vertical-padding: calc((100vh - 800px) / 2);

    position: fixed;
    z-index: 9998;
    display: flex;
    flex-direction: column;

    margin-left: calc(var(--common-padding) * -1);
    padding: var(--vertical-padding) var(--common-padding);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: #00000077;
    color: #FFF;
    width: calc(100vw - var(--common-padding) * 2);
    height: calc(100vh - var(--vertical-padding) * 2);

    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease-out;
    a
    {
        font-family: "Delight", ui-sans-serif, sans-serif;
        font-size: 32px;
        font-weight: bold;
        color: white;
        margin-top: 30px;
        text-decoration: none;

        position: relative;
        top: 10px;

        transition: opacity 200ms ease-out, top 200ms ease-out;
    }

    a.top
    {
        margin-top: 0;
    }

    a.prominent
    {
        font-size: 64px;
    }

    a.here
    {
        opacity: 25%;
        pointer-events: none;
    }

    div { flex-grow: 1; }

    a:active, a:visited { color: white; }
    a:hover { opacity: 50% }
    a.here:hover { opacity: 25% }
}

div#lockemenu.visible
{
    pointer-events: revert;
    opacity: 100%;

    a
    {
        top: 0;
    }
}

@media only screen and (max-width: 1199px)
{
    div#lockemenu
    {
        --vertical-padding: calc((100vh - 600px) / 2);
    }
}

@media only screen and (max-width: 599px)
{
    div#lockemenu
    {
        --vertical-padding: 10vh;
    }
}