/*
    2 - Style framework. Authorized changes only! It's likely you are in the wrong file.

    2.10 - html basics
    2.11 - images and videos
    2.12 - links and buttons
    2.20 - form items
    2.30 - site modal

    2.60 - flex layout
    2.61 - flex positioning
    2.70 - grid layout
    2.71 - grid positioning
    2.72 - grid responsiveness
    2.80 - visibility
    2.90 - magic classes
    2.91 - coloring
 */


/* 2.10 - html basic setup */
html {
    -webkit-text-size-adjust: 100%;
}

*,
:after,
:before {
    box-sizing: border-box;
}
a,
body,
header,
main,
footer,
section,
article,
div,
ol,
ul {
    margin: 0;
    padding: 0;
}
p {
    margin: 0 0 var(--spacing-text) 0;
}
ol,
ul {
    --line-height: 1.7;
    list-style-position: outside;
    padding-left: revert;
}

body {
    background-color: var(--color-bg);
}
a,
button,
address,
body,
p,
span,
ol,
ul,
time {
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-style: var(--font-style);
    font-variant: var(--font-variant);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    color: var(--color-text);
    font-family: var(--font-family-h);
    font-size: var(--font-size);
    font-weight: var(--font-weight-h);
    letter-spacing: normal;
    line-height: var(--line-height-h);
    margin: 0;
}
h1, .h1 {
    --font-family-h: var(--font-family-alt);
    font-size: var(--font-size-h1);
}
h2, .h2 {
    font-size: var(--font-size-h2);
}
h3, .h3 {
    --font-weight-h: var(--weight-bold);
    font-size: var(--font-size-h3);
    letter-spacing: 0.1em;
}
h4, .h4 {
    --font-weight-h: var(--weight-bold);
    font-size: var(--font-size-h4);
    letter-spacing: 0.1em;
}
h5, .h5 {
    font-size: var(--font-size-h5);
}
h6, .h6 {
    font-size: var(--font-size-h6);
}


/* 2.11 - images and videos */
img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.wp-block-image .svg-wrapper .svg-container {
    height: 100%;
}
svg {
    height: 100%;
    vertical-align: middle;
    width: auto;
}
svg.svg-inline--fa {
    color: var(--color-text);
    vertical-align: middle;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
    width: 100%;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/* 2.12 - links and buttons */
a,
.link {
    color: var(--color-link);
    cursor: pointer;
    transition: color 300ms ease-out;
}
a * {
    transition: color 300ms ease-out;
}
a.no-underline {
    text-decoration: none;
}
h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
    font-weight: inherit;
    text-decoration: none;
}
button,
.wp-block-button > a,
input[type='submit'] {
    --font-size: 16px;
    background: var(--button-bg);
    border: none;
    border-radius: var(--border-radius);
    color: var(--color-link);
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-family);
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    line-height: 3;
    height: 3em;
    margin: 0.5em 0;
    overflow: hidden;
    padding: 0 max(25px, calc(var(--border-radius)));
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: background 400ms ease, color 200ms ease;
    vertical-align: middle;
    white-space: nowrap;
}
.wp-block-button > a {
    align-content: center;
    --border-radius: 3em;
    box-shadow: 0 2px 6px 0 var(--color-bravo);
    display: grid;
    line-height: 2.5;
    height: auto;
}
.wp-block-button.is-style-outline > a {
    --button-bg: transparent;
    border: 1px solid var(--color-bravo);
}
@media (hover: hover) {
    a:hover, .link:hover {
        color: var(--color-link-hover);
    }
    button:hover,
    .wp-block-button > a:hover,
    input[type='submit']:hover {
        background: var(--button-hover-bg);
        color: var(--color-link-hover);
    }
}


/* 2.20 - form items */
label {
    display: block;
    font-weight: var(--weight-bold);
}
input,
select,
textarea {
    border: 1px solid var(--gray-medium);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size);
    outline: none;
    padding: 14px var(--padding);
    width: 100%;
}
input:focus,
select:focus,
textarea:focus {
    outline: var(--color-delta) solid thin;
}
input[type=checkbox] {
    --size: 1.4em;
    border: 1px solid var(--color-text);
    height: var(--size);
    margin: 0;
    width: var(--size);
}


/* 2.30 - site modal */
#site-modal {
    background-color: #000000cc;
    bottom: 0;
    display: none;
    padding: var(--padding);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2000;
}
#site-modal.show {
    display: grid;
    align-items: center;
}
.modal-wrap {
    padding: var(--padding);
}


/* 2.60 - flex layout */
.flex {
    --gap: var(--padding);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap) var(--gap);
    justify-content: stretch;
    width: 100%;
}
.is-layout-flex {
    --gap: var(--padding);
    gap: var(--gap) var(--gap);
}
.flex.cols {
    flex-direction: column;
}
.flex > * {
    max-width: 100%;
}
.flex.col-2 > * {
    flex: 0 1 calc((100% - (var(--gap) * 1)) / 2);
}
.flex.col-3 > * {
    flex: 0 1 calc((100% - (var(--gap) * 2)) / 3);
}
.flex.col-4 > * {
    flex: 0 1 calc((100% - (var(--gap) * 3)) / 4);
}
.flex > .grow {
    flex-grow: 1;
}
/* 2.61 - flex positioning */
.flex.left {
    justify-content: start;
}
.flex .left {
    justify-self: start;
}
.flex.right {
    justify-content: end;
}
.flex .right {
    justify-self: end;
}
.flex.center,
.is-layout-flex .is-content-justification-center {
    justify-content: center;
}
.flex .center {
    justify-self: center;
}
.flex.between {
    justify-content: space-between;
}
.flex.evenly {
    justify-content: space-evenly;
}
.flex.top {
    align-items: start;
}
.flex .top {
    align-self: start;
}
.flex.bottom {
    align-items: end;
}
.flex .bottom {
    align-self: end;
}
.flex.middle {
    align-items: center;
}
.flex .middle {
    align-self: center;
}


/* 2.70 - grid layout */
.grid {
    --gap: var(--padding);
    align-items: stretch;
    display: grid;
    gap: var(--gap) var(--gap);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    justify-items: stretch;
}
.grid.col-2 {
    --grid-columns: 2;
}
.grid.col-3 {
    --grid-columns: 3;
}
.grid.col-4 {
    --grid-columns: 4;
}
/* 2.71 - grid positioning */
.grid.left {
    justify-items: start;
}
.grid .left {
    justify-self: start;
}
.grid.right {
    justify-items: end;
}
.grid .right {
    justify-self: end;
}
.grid.center {
    justify-items: center;
}
.grid .center {
    justify-self: center;
}
.grid.top {
    align-items: start;
}
.grid .top {
    align-self: start;
}
.grid.bottom {
    align-items: end;
}
.grid .bottom {
    align-self: end;
}
.grid.middle {
    align-items: center;
}
.grid .middle {
    align-self: center;
}
/* 2.72 - responsive grid variables */
.grid { /* to alter the width of a column, set the width with 2fr 1fr to get 2/3 1/3 */
    --grid-columns: 1;
}
@media (min-width: 576px) {
    .grid.col-xs-2 {
        --grid-columns: 2;
    }
    .grid.col-xs-3 {
        --grid-columns: 3;
    }
    .grid.col-xs-4 {
        --grid-columns: 4;
    }
}
@media (min-width: 768px) {
    .grid.col-sm-1 {
        --grid-columns: 1;
    }
    .grid.col-sm-2 {
        --grid-columns: 2;
    }
    .grid.col-sm-3 {
        --grid-columns: 3;
    }
    .grid.col-sm-4 {
        --grid-columns: 4;
    }
}
@media (min-width: 992px) {
    .grid.col-md-1 {
        --grid-columns: 1;
    }
    .grid.col-md-2 {
        --grid-columns: 2;
    }
    .grid.col-md-3 {
        --grid-columns: 3;
    }
    .grid.col-md-4 {
        --grid-columns: 4;
    }
}
@media (min-width: 1200px) {
    .grid.col-lg-1 {
        --grid-columns: 1;
    }
    .grid.col-lg-2 {
        --grid-columns: 2;
    }
    .grid.col-lg-3 {
        --grid-columns: 3;
    }
    .grid.col-lg-4 {
        --grid-columns: 4;
    }
}
@media (min-width: 1440px) {
    .grid.col-xl-1 {
        --grid-columns: 1;
    }
    .grid.col-xl-2 {
        --grid-columns: 2;
    }
    .grid.col-xl-3 {
        --grid-columns: 3;
    }
    .grid.col-xl-4 {
        --grid-columns: 4;
    }
}


/* 2.80 - hidden and visible */
/* it works up in view width, always starting visible */
.hidden {
    display: none;
}
@media (min-width: 0px) and (max-width: 575px) {
    .hidden-xxs {
        display: none;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .hidden-xs {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none;
    }
}
@media (min-width: 1200px) and (max-width: 1439px) {
    .hidden-lg {
        display: none;
    }
}
@media (min-width: 1440px) {
    .hidden-xl {
        display: none;
    }
}
.show {
    display: revert;
}

.collapsible .collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 600ms ease-in-out;
}
.collapsible.open .collapsible-body {
    --max-height: none;
    max-height: var(--max-height);
}


/* 2.90 - magic classes */
.max-width,
.max-width-lg,
.max-width-xl {
    margin: 0 auto;
    width: 100%;
}
.max-width {
    --wp--style--global--content-size: var(--max-width);
    max-width: var(--max-width);
}
.max-width-lg {
    --wp--style--global--content-size: var(--max-width-lg);
    max-width: var(--max-width-lg);
}
.max-width-xl {
    --wp--style--global--content-size: var(--max-width-xl);
    max-width: var(--max-width-xl);
}
@media all and (min-width: 1440px) {
    .max-width,
    .max-width-lg,
    .max-width-xl {
        padding-left: 0;
        padding-right: 0;
    }
}
.sticky {
    position: sticky;
    top: 0;
    z-index: 1999;
}

.bottom-space {
    margin-bottom: var(--padding);
}
.no-bottom-space {
    margin-bottom: 0;
}
.has-border {
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--padding);
}
.has-padding-h {
    padding-left: var(--padding);
    padding-right: var(--padding);
}

.text-center {
    text-align: center !important;
}
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}


/* 2.91 - coloring */
.has-bg-main {
    --color-bg: var(--color-alpha);
}
.has-bg-alt {
    --color-bg: var(--color-bravo);
}
.has-bg-alpha {
    --color-bg: var(--color-charlie);
}
.has-bg-beta {
    --color-bg: var(--color-delta);
}
.has-bg-light {
    background: var(--gray-light);
}
.has-bg-black {
    --color-text: var(--white);
    background: var(--black);
    padding: var(--padding) 0;
    width: 100%;
}

.has-text-main {
    --color-text: var(--color-alpha);
}
.has-text-alt {
    --color-text: var(--color-bravo);
}
.has-text-alpha {
    --color-text: var(--color-charlie);
}
.has-text-beta {
    --color-text: var(--color-delta);
}
.has-text-other {
    --color-text: var(--color-text-other);
}