/*
    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.99 - WP color selection
 */


/* 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 {
    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-weight: var(--font-weight-h);
    line-height: var(--line-height-h);
    margin: 0 0 var(--spacing-h) 0;
}
h1, .h1 {
    font-size: var(--font-size-h1);
}
h2, .h2 {
    font-size: var(--font-size-h2);
}
h3, .h3 {
    font-size: var(--font-size-h3);
}
h4, .h4 {
    font-family: var(--font-family);
    font-size: var(--font-size-h4);
    font-weight: 500;
    letter-spacing: 0.7px;
    line-height: 1.2;
}
h5, .h5 {
    font-family: var(--font-family);
    font-size: var(--font-size-h5);
    line-height: 1.2;
}
h6, .h6 {
    font-size: var(--font-size-h6);
}

.content-max-width > * {
    margin: 0 auto;
    max-width: calc(var(--max-width) + (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%;
}


/* 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,
.forminator-guttenberg .forminator-ui.forminator-custom-form[data-design] .forminator-button,
.button-wrap a,
.wp-block-button__link,
input[type='submit'] {
    background: var(--button-bg);
    border: 2px solid var(--button-bg);
    border-radius: var(--button-border-radius);
    color: var(--color-link);
    cursor: pointer;
    display: inline-block;
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--weight-bold);
    letter-spacing: 1.8px;
    line-height: var(--button-height);
    height: auto; /* changed 1lh to auto */
    overflow: hidden;
    padding: 0 max(var(--font-size), calc(var(--border-radius)));
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 300ms ease, color 300ms ease;
    vertical-align: middle;
    white-space: nowrap;
}
button.button-alt,
.wp-block-button.button-alt a,
.button-wrap.button-alt a,
.wp-block-button__link.button-alt,
input[type='submit'].button-alt {
    --color-link: var(--white);
    --button-bg: var(--error);
    --color-link-hover: var(--error);
    --button-hover-bg: var(--white);
}
.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,
    .button-wrap a:hover,
    .wp-block-button__link: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 */
: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;
}
.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;
}


/* 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: 576px) {
    .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;
    }
}
@media (min-width: 768px) {
    .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;
    }
}
@media (min-width: 992px) {
    .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;
    }
}
@media (min-width: 1200px) {
    .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;
    }
}
@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;
    }
}


/* 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: 575px) {
    .hidden-xxs {
        display: none !important;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}
@media (min-width: 1200px) 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,
[class *= max-width-] {
    margin: 0 auto !important;
    max-width: var(--max-width);
    width: 100%;
}
.max-width-sm {
    max-width: var(--max-width-sm);
}
.max-width-md {
    max-width: var(--max-width-md);
}
.max-width-lg {
    max-width: var(--max-width-lg);
}
.max-width-xl {
    max-width: var(--max-width-xl);
}

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

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

.no-gap {
    gap: 0;
}

.has-margin-t {
    margin-top: var(--padding);   
}

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

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

.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;
}


/* 2.99 - make wordpress color selection work for framework */
.has-alpha-color {
    --color-text: var(--wp--preset--color--alpha);
}
.has-bravo-color {
    --color-text: var(--wp--preset--color--bravo);
}
.has-charlie-color {
    --color-text: var(--wp--preset--color--charlie);
}
.has-delta-color {
    --color-text: var(--wp--preset--color--delta);
}
.has-echo-color {
    --color-text: var(--wp--preset--color--echo);
}
.has-foxtrot-color {
    --color-text: var(--wp--preset--color--foxtrot);
}
.has-golf-color {
    --color-text: var(--wp--preset--color--golf);
}
.has-hotel-color {
    --color-text: var(--wp--preset--color--hotel);
}