/*
    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.75 - splide fixes
    2.80 - visibility
    2.90 - magic classes
 */


/* 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;
}
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
p {
    margin: 0 0 var(--spacing-text) 0;
}
ol,
ul {
    list-style-position: outside;
    padding-left: revert;
}

body {
    background-color: var(--color-bg);
}
a,
address,
body,
button,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
span,
time,
ul {
    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);
}

.is-style-headline1 {
    font-family: var(--font-family-headline);
    line-height: var(--line-height-headline);
    font-size: var(--font-size-headline1);
    font-weight: var(--font-weight-headline1);
    margin: 0 0 var(--spacing-headline) 0;
}
.is-style-headline2 {
    font-family: var(--font-family-headline);
    line-height: var(--line-height-headline);
    font-size: var(--font-size-headline2);
    font-weight: var(--font-weight-headline2);
    margin: 0 0 var(--spacing-headline) 0;
}
.is-style-headline3 {
    font-family: var(--font-family-headline);
    line-height: var(--line-height-headline);
    font-size: var(--font-size-headline3);
    font-weight: var(--font-weight-headline3);
    margin: 0 0 var(--spacing-headline) 0;
}
.is-style-headline4 {
    font-family: var(--font-family-headline);
    line-height: var(--line-height-headline);
    font-size: var(--font-size-headline4);
    font-weight: var(--font-weight-headline4);
    margin: 0 0 var(--spacing-headline) 0;
}
.is-style-headline5 {
    font-family: var(--font-family-headline);
    line-height: var(--line-height-headline);
    font-size: var(--font-size-headline5);
    font-weight: var(--font-weight-headline5);
    margin: 0 0 var(--spacing-headline) 0;
}
.is-style-headline6 {
    font-family: var(--font-family-headline);
    line-height: var(--line-height-headline);
    font-size: var(--font-size-headline6);
    font-weight: var(--font-weight-headline6);
    margin: 0 0 var(--spacing-headline) 0;
}

.content-max-width > * {
    margin: 0 auto;
    max-width: calc(var(--max-width-md) + (2 * var(--padding)));
    padding-left: var(--padding);
    padding-right: var(--padding);
    width: 100%;
}


/* 2.11 - images and videos */
img,
.svg-image svg,
.wp-block-image img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    width: 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%;
}

.is-style-rounded img,
.is-style-rounded .svg-container {
    border-radius: var(--image-border-radius);
    overflow: hidden;
}


/* 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;
}
button,
.forminator-guttenberg .forminator-ui.forminator-custom-form[data-design] .forminator-button,
.wp-block-button a,
input[type='submit'] {
    background: var(--button-bg);
    border: var(--button-border) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    color: var(--button-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-weight);
    line-height: var(--button-height);
    height: 1lh; /* TODO is this a problem? */
    overflow: hidden;
    padding: 0 max(var(--font-size), calc(var(--border-radius)));
    text-align: center;
    text-decoration: none;
    transition: background 300ms ease, color 300ms ease;
    vertical-align: middle;
    white-space: nowrap;
}
button.is-style-button-secondary,
.wp-block-button.is-style-button-secondary a,
input[type='submit'].is-style-button-secondary {
    --button-bg: var(--secondary-button-bg);
    --button-border-color: var(--secondary-button-border-color);
    --button-color: var(--secondary-button-color);
    --button-hover-bg: var(--secondary-button-hover-bg);
    --button-hover-color: var(--secondary-button-hover-color);
}
.wp-block-button.no-margin-b a {
    margin-bottom: 0;
}
@media (hover: hover) {
    a:hover, .link:hover {
        color: var(--color-link-hover);
    }
    button:hover,
    .forminator-guttenberg .forminator-ui.forminator-custom-form[data-design] .forminator-button:hover,
    .wp-block-button a:hover,
    input[type='submit']:hover {
        background: var(--button-hover-bg);
        color: var(--button-hover-color) !important; /* Justin */
    }
}


/* 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 */
:where(.is-layout-flex) {
    --gap: var(--padding);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap) var(--gap);
    justify-content: stretch;
    width: 100%;
}
.is-layout-flex.cols {
    flex-direction: column;
}
.is-layout-flex > * {
    max-width: 100%;
}
.is-layout-flex.col-2 > * {
    flex: 0 1 calc((100% - (var(--gap) * 1)) / 2);
}
.is-layout-flex.col-3 > * {
    flex: 0 1 calc((100% - (var(--gap) * 2)) / 3);
}
.is-layout-flex.col-4 > * {
    flex: 0 1 calc((100% - (var(--gap) * 3)) / 4);
}
.is-layout-flex > .grow {
    flex-grow: 1;
}


/* 2.61 - flex positioning */
.is-layout-flex.left {
    justify-content: start;
}
.is-layout-flex .left {
    justify-self: start;
}
.is-layout-flex.right {
    justify-content: end;
}
.is-layout-flex .right {
    justify-self: end;
}
.is-layout-flex.center {
    justify-content: center;
}
.is-layout-flex .center {
    justify-self: center;
}
.is-layout-flex.between {
    justify-content: space-between;
}
.is-layout-flex.evenly {
    justify-content: space-evenly;
}
.is-layout-flex.top {
    align-items: start;
}
.is-layout-flex .top {
    align-self: start;
}
.is-layout-flex.bottom {
    align-items: end;
}
.is-layout-flex .bottom {
    align-self: end;
}
.is-layout-flex.middle {
    align-items: center !important;
}
.is-layout-flex .middle {
    align-self: center;
}


/* 2.70 - grid layout */
:where(.is-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;
}
.is-layout-grid.col-2 {
    --grid-columns: 2;
}
.is-layout-grid.col-3 {
    --grid-columns: 3;
}
.is-layout-grid.col-4 {
    --grid-columns: 4;
}
.is-layout-grid.col-5 {
    --grid-columns: 5;
}
.is-layout-grid.col-6 {
    --grid-columns: 6;
}


/* 2.71 - grid positioning */
.is-layout-grid.left {
    justify-items: start;
}
.is-layout-grid .left {
    justify-self: start;
}
.is-layout-grid.right {
    justify-items: end;
}
.is-layout-grid .right {
    justify-self: end;
}
.is-layout-grid.center {
    justify-items: center;
}
.is-layout-grid .center {
    justify-self: center;
}
.is-layout-grid.top {
    align-items: start;
}
.is-layout-grid .top {
    align-self: start;
}
.is-layout-grid.bottom {
    align-items: end;
}
.is-layout-grid .bottom {
    align-self: end;
}
.is-layout-grid.middle {
    align-items: center;
}
.is-layout-grid .middle {
    align-self: center;
}


/* 2.72 - responsive grid variables */
.is-layout-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: 600px) {
    .is-layout-grid.col-xs-2 {
        --grid-columns: 2;
    }
    .is-layout-grid.col-xs-3 {
        --grid-columns: 3;
    }
    .is-layout-grid.col-xs-4 {
        --grid-columns: 4;
    }
    .is-layout-grid.col-xs-5 {
        --grid-columns: 5;
    }
    .is-layout-grid.col-xs-6 {
        --grid-columns: 6;
    }
}
@media (min-width: 782px) {
    .is-layout-grid.col-sm-1 {
        --grid-columns: 1;
    }
    .is-layout-grid.col-sm-2 {
        --grid-columns: 2;
    }
    .is-layout-grid.col-sm-3 {
        --grid-columns: 3;
    }
    .is-layout-grid.col-sm-4 {
        --grid-columns: 4;
    }
    .is-layout-grid.col-sm-5 {
        --grid-columns: 5;
    }
    .is-layout-grid.col-sm-6 {
        --grid-columns: 6;
    }
}
@media (min-width: 960px) {
    .is-layout-grid.col-md-1 {
        --grid-columns: 1;
    }
    .is-layout-grid.col-md-2 {
        --grid-columns: 2;
    }
    .is-layout-grid.col-md-3 {
        --grid-columns: 3;
    }
    .is-layout-grid.col-md-4 {
        --grid-columns: 4;
    }
    .is-layout-grid.col-md-5 {
        --grid-columns: 5;
    }
    .is-layout-grid.col-md-6 {
        --grid-columns: 6;
    }
}
@media (min-width: 1080px) {
    .is-layout-grid.col-lg-1 {
        --grid-columns: 1;
    }
    .is-layout-grid.col-lg-2 {
        --grid-columns: 2;
    }
    .is-layout-grid.col-lg-3 {
        --grid-columns: 3;
    }
    .is-layout-grid.col-lg-4 {
        --grid-columns: 4;
    }
    .is-layout-grid.col-lg-5 {
        --grid-columns: 5;
    }
    .is-layout-grid.col-lg-6 {
        --grid-columns: 6;
    }
}
@media (min-width: 1440px) {
    .is-layout-grid.col-xl-1 {
        --grid-columns: 1;
    }
    .is-layout-grid.col-xl-2 {
        --grid-columns: 2;
    }
    .is-layout-grid.col-xl-3 {
        --grid-columns: 3;
    }
    .is-layout-grid.col-xl-4 {
        --grid-columns: 4;
    }
    .is-layout-grid.col-xl-5 {
        --grid-columns: 5;
    }
    .is-layout-grid.col-xl-6 {
        --grid-columns: 6;
    }
}


/* 2.75 - splide fixes */
.wp-block-theme-grid-slider .splide__list {
    display: flex !important;
}
.wp-block-theme-grid-slider:not(.is-active) .splide__list {
    display: grid !important;
}


/* 2.80 - hidden and visible */
/* it works up in view width, always starting visible */
.hidden {
    display: none !important;
}
@media (min-width: 0px) and (max-width: 599px) {
    .hidden-xxs {
        display: none !important;
    }
}
@media (min-width: 600px) and (max-width: 781px) {
    .hidden-xs {
        display: none !important;
    }
}
@media (min-width: 782px) and (max-width: 959px) {
    .hidden-sm {
        display: none !important;
    }
}
@media (min-width: 960px) and (max-width: 1079px) {
    .hidden-md {
        display: none !important;
    }
}
@media (min-width: 1080px) and (max-width: 1439px) {
    .hidden-lg {
        display: none !important;
    }
}
@media (min-width: 1440px) {
    .hidden-xl {
        display: none !important;
    }
}
.block-editor-block-list__layout [class *= hidden],
.show {
    display: revert !important;
}

.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-xs {
    margin: 0 auto !important;
    max-width: var(--max-width-xs);
    width: 100%;
}
.max-width-sm {
    margin: 0 auto !important;
    max-width: var(--max-width-sm);
    width: 100%;
}
.max-width-md {
    margin: 0 auto !important;
    max-width: var(--max-width-md);
    width: 100%;
}
.max-width-lg {
    margin: 0 auto !important;
    max-width: var(--max-width-lg);
    width: 100%;
}
.max-width-xl {
    margin: 0 auto !important;
    max-width: var(--max-width-xl);
    width: 100%;
}

.no-max-width { /* overrides default content-max-width (set padding with has-padding-h) */
    max-width: none;
    padding: 0;
}

.no-padding-h {
    padding-left: 0;
    padding-right: 0;
}

.no-gap {
    gap: 0;
}

.has-margin-b {
    margin-bottom: var(--padding);
}
.has-margin-t {
    margin-bottom: var(--padding);
}
.no-margin-b {
    margin-bottom: 0;
}

.has-padding-h {
    padding-left: calc(var(--padding)*1.5);
    padding-right: calc(var(--padding)*1.5);
}
.has-padding-v {
    padding-bottom: var(--padding);
    padding-top: var(--padding);
}

.has-padding-v-large,
.has-padding-v-lg {
    padding-bottom: calc(var(--padding)*3);
    padding-top: calc(var(--padding)*3);
}

.has-padding-v-md {
    padding-bottom: calc(var(--padding)*2);
    padding-top: calc(var(--padding)*2);
}

@media all and (min-width: 782px) {
    .has-padding-v-large,
    .had-padding-v-lg {
        padding-bottom: calc(var(--padding)*5);
        padding-top: calc(var(--padding)*5);
    }
}

.has-border {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

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

.sticky {
    position: sticky;
    top: 10px;
    z-index: 1999;
}
.admin-bar .sticky {
    top: 45px;
}