/*
Theme Name: Boiler Theme
Theme URI: http://
Author: Aaron Elizondo
Author URI: https://aaronelizondoe.com
Description: Boiler Theme
Version: 4.0
License: NA
License URI: NA
*/

/*IMPORTS*/
@import "./mixins.scss";

/* RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-text-size-adjust: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.3em;
    border: none;
    outline: none;
    text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: $font_base;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    line-height: 1.2em;
}

#wrapper {
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

p {
    color: #494949;
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
}

/*/////////////////////////////////////////////////////////////
GUTENBERG OVERWRITES
*/
/////////////////////////////////////////////////////////////
#content-wrap {
    .wp-block-columns {
        margin-bottom: 0;
        gap: 0 !important;
    }

    @media (min-width: 782px) {
        .wp-block-column:not(:first-child) {
            margin-left: 0;
        }
    }

    .wp-block-cover {
        min-height: auto;
    }

    .wp-block-image img {
        height: auto;
    }

    .wp-block-column {
        flex-grow: 1;
        margin-left: 0;
    }

    .wp-block-cover,
    .wp-block-cover-image {
        padding: initial;
    }
}

/*/////////////////////////////////////////////////////////////
COMMON
*/
/////////////////////////////////////////////////////////////
body.freeze {
    overflow: hidden;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.show-mobile {
    display: none;
}

.background-cover {
    @include background-cover;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

/*/////////////////////////////////////////////////////////////
LAYOUT CLASSES
*/
/////////////////////////////////////////////////////////////
#wrapper {
    .content {
        &.center {
            margin-inline: auto;

            .wp-block-group__inner-container,
            .wp-block-cover__inner-container {
                margin-inline: auto;
            }
        }

        &.scene {
            @include interpolate(
                (margin-top, margin-bottom),
                $min-width,
                $max-width,
                $min,
                $max
            );
            margin-inline: auto;
        }

        &.massive {
            .wp-block-group__inner-container,
            .wp-block-cover__inner-container {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $massive-container
                );
            }

            &.not-inner {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $massive-container
                );
            }
        }

        &.max {
            .wp-block-group__inner-container,
            .wp-block-cover__inner-container {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $max-container
                );
            }

            &.not-inner {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $max-container
                );
            }
        }

        &.medium {
            .wp-block-group__inner-container,
            .wp-block-cover__inner-container {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $medium-container
                );
            }

            &.not-inner {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $medium-container
                );
            }
        }

        &.medium-s {
            .wp-block-group__inner-container,
            .wp-block-cover__inner-container {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $medium-container * 0.7
                );
            }

            &.not-inner {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    $container-on-small-pc,
                    $medium-container * 0.7
                );
            }
        }

        &.small {
            .wp-block-group__inner-container,
            .wp-block-cover__inner-container {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    438px,
                    $max-container/2
                );
            }

            &.not-inner {
                @include interpolate(
                    max-width,
                    $small-pc,
                    $max-width,
                    438px,
                    $max-container/2
                );
            }
        }

        &.max,
        &.large,
        &.medium,
        &.small {
            width: 100%;
        }
    }

    .left,
    .right {
        @include interpolate(
            max-width,
            $small-pc,
            $max-width,
            438px,
            $max-container/2
        );
    }

    .left {
        margin-left: auto;
    }

    .right {
        margin-right: auto;
    }

    .pad-left {
        @include interpolate(padding-left, $small, $max-width, 0, 160px);
    }

    .pad-right {
        @include interpolate(padding-right, $small, $max-width, 0, 160px);
    }

    .flex-center {
        @include custom-flex(center, center, wrap);
    }

    //MARGIN
    .scene {
        @include interpolate(
            (margin-top, margin-bottom),
            $min-width,
            $max-width,
            $min,
            $max
        );

        &.just-top {
            margin-bottom: 0;
        }

        &.just-bottom {
            margin-top: 0;
        }
    }

    .margin-top-2x {
        @include interpolate(
            margin-top,
            $min-width,
            $max-width,
            $min * 1.5,
            $max * 1.5
        );
    }

    .margin-top-x {
        @include interpolate(margin-top, $min-width, $max-width, $min, $max);
    }

    .margin-top-m {
        @include interpolate(
            margin-top,
            $min-width,
            $max-width,
            $min * 0.6,
            $max * 0.6
        );
    }

    .margin-top-s {
        @include interpolate(
            margin-top,
            $min-width,
            $max-width,
            $min * 0.2,
            $max * 0.2
        );
    }

    .margin-bottom-2x {
        @include interpolate(
            margin-bottom,
            $min-width,
            $max-width,
            $min * 1.5,
            $max * 1.5
        );
    }

    .margin-bottom-x {
        @include interpolate(margin-bottom, $min-width, $max-width, $min, $max);
    }

    .margin-bottom-m {
        @include interpolate(
            margin-bottom,
            $min-width,
            $max-width,
            $min * 0.6,
            $max * 0.6
        );
    }

    .margin-bottom-s {
        @include interpolate(
            margin-bottom,
            $min-width,
            $max-width,
            $min * 0.2,
            $max * 0.2
        );
    }

    //PADDING
    .scene-padding {
        @include interpolate(
            (padding-top, padding-bottom),
            $min-width,
            $max-width,
            $min,
            $max
        );

        &.small-top-a-little {
            @include breakpoint($small) {
                padding-top: 30px;
            }
        }

        &.small-no-bottom {
            @include breakpoint($small) {
                padding-bottom: 0;
            }
        }
    }

    .padding-top-2x {
        @include interpolate(
            padding-top,
            $min-width,
            $max-width,
            $min * 1.5,
            $max * 1.5
        );
    }

    .padding-top-x {
        @include interpolate(padding-top, $min-width, $max-width, $min, $max);
    }

    .padding-top-m {
        @include interpolate(
            padding-top,
            $min-width,
            $max-width,
            $min * 0.6,
            $max * 0.6
        );
    }

    .padding-top-s {
        @include interpolate(
            padding-top,
            $min-width,
            $max-width,
            $min * 0.2,
            $max * 0.2
        );
    }

    .padding-bottom-2x {
        @include interpolate(
            padding-bottom,
            $min-width,
            $max-width,
            $min * 1.5,
            $max * 1.5
        );
    }

    .padding-bottom-x {
        @include interpolate(
            padding-bottom,
            $min-width,
            $max-width,
            $min,
            $max
        );
    }

    .padding-bottom-m {
        @include interpolate(
            padding-bottom,
            $min-width,
            $max-width,
            $min * 0.6,
            $max * 0.6
        );
    }

    .padding-bottom-s {
        @include interpolate(
            padding-bottom,
            $min-width,
            $max-width,
            $min * 0.2,
            $max * 0.2
        );
    }

    .large-50 {
        width: 50%;
    }
    .large-66{
        width: 66.666%;
    }

    .small-100 {
        @include breakpoint($small) {
            width: 100%;
        }
    }

    .alignleft {
        text-align: left;
    }

    .alignright {
        text-align: right;
    }

    .aligncenter {
        text-align: center;
    }
}

/*
* FONTS
*/

#wrapper {
    p,
    .like-p {
        @include p-style();
        text-transform: none;
        letter-spacing: 0;

        a:not(.button) {
            color: #000;
            text-decoration: underline;
        }

        strong {
            font-weight: 700;
        }
    }

    h1,
    .like-h1 {
        @include h1-style();
    }

    h2,
    .like-h2 {
        @include h2-style();
    }

    h3,
    .like-h3 {
        @include h3-style();
    }

    h4,
    .like-h4 {
        @include h4-style();
    }

    h5,
    .like-h5 {
        @include h5-style();
    }

    h6,
    .like-h6 {
        @include h6-style();
    }

    ul,
    ol {
        margin-left: 50px;

        &.slick-dots {
            margin-left: 0;
        }

        li {
            @include p-style();
        }
    }

    ul li {
        list-style: disc;
    }
}

/*/////////////////////////////////////////////////////////////
SKIP TO CONTENT BUTTON
*/
/////////////////////////////////////////////////////////////
#hidden-skip-buttons {
    @include flex-center();
    position: absolute;
    width: 100%;
    top: -100%;
    #skip-nav,
    #accs-options {
        z-index: 11;
        transform: translateY(-100%);

        &:focus-visible {
            transform: translateY(0);
        }
    }
}

#toggle-accesibility {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
}
/*/////////////////////////////////////////////////////////////
ANNOUNCEMENT BANNER
*//////////////////////////////////////////////////////////////
#announcement-banner{
	@include transition-duration(0.6s);
	@include flex-center();
	background-color: $color_navy;
	text-align: center;
	min-height: 5vh;
    p{
        color: #fff;
    }
	&:hover{
		background-color: $color_primary;
	}
}


/*/////////////////////////////////////////////////////////////
HEADER
*/
/////////////////////////////////////////////////////////////
#header-wrap {
    @include transition-duration(0.6s);
    width: 100%;
    height: 9vh;
    z-index: 10;
    left: 0;
    background-color: #fff;
    top: 5vh;
    header {
        padding-left: 25px;

        #header-logo img {
            max-height: 8vh;
            width: auto;
        }

        @include custom-flex(space-between, center, wrap);
        height: 100%;

        li {
            list-style: none;

            a {
                @include nav-link();
            }
        }

        #nav {
            @include custom-flex(flex-end, center, nowrap);

            nav#primary {
                > ul {
                    > li {
                        display: inline-block;
                        margin-left: 30px;
                    }
                }
            }

            #header-cta {
                position: relative;
                @include interpolate(width, $mobile, $max-width, 320px, 420px);
                @include flex-center();

                .buttons-wrapper {
                    margin-top: 0;

                    a.button {
                        margin-bottom: 0;
                        margin-right: 0;
                    }
                }

                @include breakpoint($mobile) {
                    display: none;
                }
            }
        }
    }

    &.solid-background {
        top: 0;
    }
}

nav {
    ul {
        position: relative;
        display: inline-table;

        &:after {
            content: "";
            clear: both;
            display: block;
        }

        li {
            a {
                display: block;
            }

            &.menu-item-has-children {
                > a {
                    &::after {
                        width: 8px;
                        height: 18px;
                        content: "\276F";
                        display: inline-block;
                        margin-left: 5px;
                        position: initial;
                    }
                }

                position: relative;
                cursor: pointer;

                &.show {
                    > a {
                        &:after {
                            -webkit-transform: rotate(90deg);
                            transform: rotate(90deg);
                        }
                    }

                    > ul {
                        display: block;
                    }
                }
            }
        }

        ul {
            display: none;
            position: absolute;
            top: 100%;
            left: -20px;
            background-color: #fff;
            text-align: left;

            li {
                position: relative;
                display: block;
                margin-left: 0px;

                a {
                    display: block;
                }

                &.menu-item-has-children {
                    padding-right: 0;
                }
            }

            ul {
                display: none;
                position: absolute;
                left: 100%;
                top: 0;
            }
        }
    }
}

#mobile {
    display: none;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    width: 60%;
    height: 80%;
    z-index: 2;

    .menu-primary-menu-container {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #fff;
    }

    &.is-open {
        display: block;
    }

    #mobile-wrapper {
        padding: 120px 15px 30px 15px;

        ul {
            width: 70%;
            text-align: center;
            margin-inline: auto;
            margin: 0 auto;

            li {
                display: block;

                a {
                    @include nav-link();
                    padding: 15px;
                    margin-bottom: 15px;
                    border-bottom: solid 1px #b4b4b4;
                }

                ul {
                    position: static;
                    margin-left: 20px;
                }
            }
        }

        .buttons-wrapper {
            text-align: center;

            a.button {
                margin-right: 0;
            }
        }
    }
}

/*/////////////////////////////////////////////////////////////
MOBILE ICON
*/
/////////////////////////////////////////////////////////////
#mobile-icon {
    cursor: pointer;
    @include absolute-positioning(0, 0, 0, auto);
    width: 9vh;
    height: 9vh;
    background-color: $color_primary;

    &::before {
        @include bef-aft-common(0, 0, 0, 0);
        @include interpolate((width, height), $min-width, $mobile, 38px, 45px);
        background-color: $color_highlight;
    }

    div.burger-stack {
        height: 3px;
        width: 19px;
        background-color: $color_primary;
        @include absolute-positioning(0, 0, 0, 0);
        border-radius: 5px;

        &:before {
            transform: translateY(-6px);
        }

        &:after {
            transform: translateY(6px);
        }

        &:before,
        &:after {
            border-radius: 5px;
            height: 3px;
            background-color: $color_primary;
            @include bef-aft-common;
            @include transition-duration(0.3s);
        }
    }

    &.is-open {
        div.burger-stack {
            background: none;

            &:before {
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

            &:after {
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }
        }
    }
}

/*/////////////////////////////////////////////////////////////
CONTENT REUSABLE CLASSES*/
/////////////////////////////////////////////////////////////
#wrapper {
    .wp-block-cover__inner-container{
        position: static;
    }
    .photo-caption {
        @include absolute-positioning(auto, 20px, 25px, auto);
    }

    .img-wrapper {
        position: relative;

        img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .img-high, .image-high {
        @include interpolate(min-height, $min-width, $max-width, 270px, 1600px);
        height: 100%;
    }

    .img-tall, .image-tall {
        @include interpolate(min-height, $min-width, $max-width, 470px, 1800px);
        height: 100%;
    }

    .bg-maroon {
        background-color: $color_primary;
        @include all-font-color(#fff);

        a.button,
        button {
            background-color: #fff;
            color: $color_navy;

            &:hover {
                background-color: $color_blush;
            }
        }
    }

    .bg-green {
        background-color: $color_secondary;
        @include all-font-color(#fff);

        a.button {
            background-color: #fff;
            color: #000;

            &:hover {
                background-color: $color_blush;
            }

            &:focus-visible {
                outline: 3px solid #fff;
                outline-offset: 5px;
            }
        }
    }

    .bg-navy {
        background-color: $color_navy;
        @include all-font-color(#fff);

        a {
            &:focus-visible {
                outline: 3px solid #fff;
                outline-offset: 5px;
            }
        }
    }

    .bg-dark {
        background-color: $color_dark_brown;
        @include all-font-color(#fff);
    }

    .bg-blush {
        background-color: $color_blush;
    }

    .overlay-dark {
        position: relative;
        @include all-font-color(#fff);

        &::before {
            @include bef-aft-common(0, 0, 0, 0);
            background-color: rgba($color: #000000, $alpha: 0.6);
            z-index: 1;
        }
    }

    .scrolling-word-container {
        position: relative;

        .scrolling-word {
            @include absolute-positioning(0, auto, auto, 0);
            @include interpolate(min-height, $small, $max-width, 400px, 1000px);
            z-index: -2;

            img {
                width: auto;
                object-fit: contain;
                @include interpolate(
                    min-height,
                    $small,
                    $max-width,
                    500px,
                    1430px
                );
            }

            @include breakpoint($small) {
                display: none;
            }
        }
    }

    .banner-kinda-overlapping {
        background-color: rgba($color: $color_dark_brown, $alpha: 0.85);
        @include all-font-color(#fff);
        width: 70%;
        @include interpolate(
            (padding-top, padding-bottom),
            $min-width,
            $max-width,
            20px,
            60px
        );
        padding-right: 30px;
        padding-left: 25px;
        margin-left: auto;
        position: absolute;
        z-index: 1;
        @include absolute-positioning(auto, 0, 0, auto);
        @include interpolate(
            bottom,
            $min-width,
            $max-width,
            $min,
            ($max * 1.6)
        );

        h2 {
            position: relative;
            top: 3px;
        }

        @include breakpoint(850px) {
            bottom: 0;
            width: 100%;
        }

        @include breakpoint($small) {
            bottom: 20px;
        }
    }

    .massive-title-container {
        h2 {
            @include interpolate(
                font-size,
                $min-width,
                $max-width,
                25px,
                150px
            );
            @include interpolate(
                margin-bottom,
                $min-width,
                $max-width,
                5px,
                70px
            );
        }
    }

    .img-break {
        @include interpolate(min-height, $min-width, $max-width, 180px, 1930px);
    }

    .masonry-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        @include interpolate(gap, $min-width, $max-width, 10px, 40px);

        @include breakpoint($grid_breaker) {
            grid-template-columns: 1fr 1fr;
        }

        @include breakpoint($grid_breaker_smaller) {
            grid-template-columns: 1fr;
        }

        .masonry-image {
            &:nth-child(1) {
                grid-column: 1 / 2;
                grid-row: 1 / 2;
                @include single();
            }

            &:nth-child(2) {
                grid-column: 2 / 3;
                grid-row: 1 / 2;
                @include single();
            }

            &:nth-child(3) {
                grid-column: 3 / 4;
                grid-row: 1 / 2;
                @include single();
            }

            &:nth-child(4) {
                grid-column: 4 / 5;
                grid-row: 1 / 4;
                @include triple();
            }

            &:nth-child(5) {
                grid-column: 1 / 2;
                grid-row: 2 / 5;
                @include triple();
            }

            &:nth-child(6) {
                grid-column: 2 / 4;
                grid-row: 2 / 5;
                @include triple();
            }

            &:nth-child(7) {
                grid-column: 4 / 5;
                grid-row: 4 / 5;
                @include single();
            }

            &:nth-child(8) {
                grid-column: 1 / 3;
                grid-row: 5 / 7;
                @include double();
            }

            &:nth-child(9) {
                grid-column: 3 / 4;
                grid-row: 5 / 7;
                @include double();
            }

            &:nth-child(10) {
                grid-column: 4 / 5;
                grid-row: 5 / 7;
                @include double();
            }

            @include breakpoint($grid_breaker) {
                grid-column: auto !important;
                grid-row: auto !important;
                @include interpolate-important(
                    min-height,
                    $min-width,
                    $max-width,
                    ($double - 120),
                    ($double * 2)
                );
            }
        }
    }

    // .bg-paper{
    // 	background-color: $color_blush;
    // 	@include background-cover();
    // }
    .thingy-top-left-square {
        background-image: url("https://thegeneralsdaughter.com/wp-content/uploads/2023/02/corner-top-left-square-cream.svg");
        background-size: 13rem;
        background-repeat: no-repeat;
        background-position: 2% 4%;

        @include breakpoint(990px) {
            background-image: none;
        }
    }

    .thingy-top-right-square {
        background-image: url("https://thegeneralsdaughter.com/wp-content/uploads/2023/03/corner-top-right-square-cream.svg");
        background-size: 13rem;
        background-repeat: no-repeat;
        background-position: 25px 25px;

        @include breakpoint(990px) {
            background-image: none;
        }
    }

    .thingys-left {
        background-image: url("https://thegeneralsdaughter.com/wp-content/uploads/2023/02/corner-top-left-square-cream.svg"),
            url("https://thegeneralsdaughter.com/wp-content/uploads/2023/03/corner-bottom-left-square-cream.svg");
        background-size: 13rem;
        background-repeat: no-repeat;
        background-position: 3% 5%, 3% 95%;

        @include breakpoint(990px) {
            background-image: none;
        }
    }

    .column-4-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px !important;

        .wp-block-cover {
            @include interpolate(
                min-height,
                $min-width,
                $max-width,
                260px,
                600px
            );
        }
    }

    .photo-caption {
        @include absolute-positioning(auto, 10px, 10px, auto);
        color: #fff;
        text-shadow: 0px 0px 8px #000000;
    }
}

/*/////////////////////////////////////////////////////////////
HOMEPAGE
*/
/////////////////////////////////////////////////////////////
#content-wrap {
    margin-top: 9vh;
    position: relative;

    #hero {
        position: relative;
        height: 91vh;

        #hero-content {
            background-color: rgba($color: #000, $alpha: 0.6);
            @include interpolate(
                max-width,
                $min-width,
                $max-width,
                320px,
                1700px
            );
            @include interpolate(
                (padding-top, padding-bottom),
                $min-width,
                $max-width,
                30px,
                120px
            );
            @include interpolate(
                (padding-left, padding-right),
                $min-width,
                $max-width,
                15px,
                200px
            );
            @include all-font-color(#fff);
            margin-inline: auto;

            h1 {
                font-size: 3.5rem;
            }

            h2 {
                margin-top: 1rem;
                font-size: 2.8rem;
                font-family: $font_base;
                text-transform: none;
                letter-spacing: 0;
            }

            a.button {
                background-color: #fff;
                color: #000;
                margin: 0;

                &:hover {
                    background-color: $color_highlight;
                }

                &:focus-visible {
                    outline: solid 3px #fff;
                    outline-offset: 5px;
                }
            }
        }
    }

    .locations {
        @include interpolate-important(gap, $small, $max-width, 10px, 40px);

        h3 {
            margin-bottom: 15px;
        }

        .location {
            @include interpolate(
                (padding-left, padding-right),
                $min-width,
                $max-width,
                35px,
                130px
            );

            &::before,
            .location-info {
                @include transition-duration(0.6s);
                opacity: 0;
            }

            &:hover {
                &::before,
                .location-info {
                    opacity: 1;
                }
            }
        }

        @include breakpoint(892px) {
            @include direction(column);
        }

        @include breakpoint(892px) {
            gap: 90px !important;
            max-width: 360px;
            margin-inline: auto;
        }
    }
}

/*/////////////////////////////////////////////////////////////
SUBPAGE
*/
/////////////////////////////////////////////////////////////
#wrapper {
    .sub-hero {
        h1 {
            color: #fff;
        }

        min-height: 91vh;
    }
}

/*/////////////////////////////////////////////////////////////
PIZZA AND PINOT LANDING PAGE
*/
/////////////////////////////////////////////////////////////
$s-space: 3.5rem;
$xs-space: 1.8rem;
.page-id-671{
    button{
        @include buttons();
    }
    a.button, button{
        min-width: 39rem;
        text-align: center;
        @include breakpoint($small){
            min-width: 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    .logo-columns{
        img{
            max-width: 320px;
            max-height: 60px;
            object-fit: contain;
        }
    }
}
.page-template-landing-page {
    #wrapper{
        h2{
            color: $color_red;
            @include interpolate(font-size, $min-width, $hd-laptop, 35px, 85px);
            @include interpolate(line-height, $min-width, $hd-laptop, 40px, 90px);
            font-size: 6.5rem;
            line-height: 6.5rem;

        }
        h3, .like-h3{
            font-size: 5rem;
            line-height: 5.5rem;
            @include interpolate(font-size, $min-width, $hd-laptop, 28px, 65px);
            @include interpolate(line-height, $min-width, $hd-laptop, 33px, 70px);
            color: $color_red;
        }
        h4, .like-h4{
            font-family: $font_base;
        }
        h5, .like-h5{
            font-size: 3.2rem;
            font-family: $font_headlines;
            @include breakpoint($small){
                font-size: 2.6rem;
            }
        }
        .bg-red{
            background-color: $color_red;
            @include all-font-color(#fff);
            a.button{
                background-color: #fff;
                color: $color_red;
                &:hover{
                    background-color: $color_cream;
                    color: #000;
                }
            }
        }
    }
    #simple-banner {
        display: none;
    }
    #content-wrap {
        margin-top: 0;
    }

    #pizza-and-pinot-hero{
        position: relative;
        padding-top: $s-space;
        min-height: 120vh;
        @include custom-flex(center, flex-start, nowrap);
        h1{
            color: $color_cream;
            margin-top: $s-space;
            @include interpolate(font-size, $min-width, $hd-laptop, 55px, 120px);
            @include interpolate(line-height, $min-width, $hd-laptop, 60px, 125px);
            font-size: 9rem;
            line-height: 9.5rem;
        }
        h2{
            color: #fff;
            font-size: 3.5rem;
            line-height: 4rem;
            margin-top: $xs-space;
            margin-bottom: $xs-space - 1.8;
            @include breakpoint($small){
                font-size: 3rem;
                line-height: 3.5rem;
            }
        }
        p{
            color: #fff;
        }
        #hidden-button{
            display: none;
        }
        .buttons-wrapper{
            margin-bottom: 10rem;
        }
        a.button, button{
           background-color: #fff; 
           color: $color_red;
           &:hover{
            background-color: $color_cream;
            color: #000;
           }
        }
        &::before{
            @include bef-aft-common(0, 0, auto, 0);
            background-color: rgba($color: #000, $alpha: 0.7);
            height: 75%;
            @include breakpoint($small){
                height: 80%;
            }
            @include breakpoint($real_mobile){
                height: 90%;
            }
        }
        &::after{
            @include bef-aft-common(0, 0, auto, 0);
            background-image: url("https://thegeneralsdaughter.com/wp-content/uploads/2023/09/hero-arc.svg");
            background-repeat: no-repeat;
            background-position: center bottom;
            height: 75%;
            @include breakpoint($small){
                height: 80%;
            }
            @include breakpoint($real_mobile){
                height: 90%;
            }
        }
        >img{
            z-index: -1;
            height: 75%;
            top: 0;
            @include breakpoint($small){
                height: 80%;
            }
            @include breakpoint($real_mobile){
                height: 90%;
            }
        }
        @include breakpoint($small){
            padding-top: 8rem;
        }
    }

    .image-high{
        @include interpolate(min-height, $min-width, $max-width, 270px, 1400px);
        margin-top: 5rem;
    }
    #animated-pizza{
        position: relative;
        z-index: 1;
        img{
            @include interpolate(max-width, $min-width, $max-width, 270px, 1600px);
            margin-inline: auto;
        }
    }
    #big-buttons{
        @include transition-duration(0.6s);
        padding-left: 25px;
        padding-right: 25px;
        gap: 25px !important;
        position: fixed;
        top: auto;
        bottom: 25px;
        width: 100%;
        z-index: 2;
        opacity: 0;
        @include breakpoint($small){
            padding-left: 15px;
            padding-right: 15px;
            gap: 15px !important;
            bottom: 15px;
        }
        &.show{
            opacity: 1;
        }
        .buttons-wrapper{
            margin: 0;
        }
        a.button, button{
            margin: 0;
            width: 100%;
            background-color: $color_cream;
            color: #000;
            border: solid 2px #fff;
            &:hover{
                background-color: #000;
                color: #fff;
            }
        }
    }

    .landing-masonry-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 2.5rem;
        .img-wrapper{
            &:nth-child(1){
                @include double();
                grid-column: 1 / 2;
                grid-row: 1 / 3;
            }
            &:nth-child(2){
                @include single();
                grid-column: 2 / 3;
                grid-row: 1 / 2;
            }
            &:nth-child(3){
                @include single();
                grid-column: 2 / 3;
                grid-row: 2 / 3;
            }
            &:nth-child(4){
                @include double();
                grid-column: 3 / 5;
                grid-row: 1 / 3;
            }
            &:nth-child(5){
                @include double();
                grid-column: 1 / 3;
                grid-row: 3 / 5;
            }
            &:nth-child(6){
                @include single();
                grid-column: 3 / 4;
                grid-row: 3 / 4;
            }
            &:nth-child(7){
                @include single();
                grid-column: 4 / 5;
                grid-row: 3 / 4;
            }
            &:nth-child(8){
                @include single();
                grid-column: 1 / 2;
                grid-row: 5 / 6;
            }
            &:nth-child(9){
                @include single();
                grid-column: 2 / 3;
                grid-row: 5 / 6;
            }
            &:nth-child(10){
                @include single();
                grid-column: 3 / 5;
                grid-row: 4 / 6;
            }
            &:nth-child(11){
                @include triple();
                grid-column: 1 / 4;
                grid-row: 6 / 9;
            }
            &:nth-child(12){
                @include double();
                grid-column: 4 / 5;
                grid-row: 6 / 8;
            }
            &:nth-child(13){
                @include single();
                grid-column: 4 / 5;
                grid-row: 8 / 9;
            }
        }
    }

    #pizza-cta{
        position: relative;
        a.button, button{
            background-color: #fff;
            color: $color_red;
            &:hover{
                background-color: $color_cream;
                color: #000;
            }
        }
        #animated-pizza{
            margin-top: initial;
            img{
                @include interpolate(max-width, $min-width, $max-width, 220px, 1200px);
            }
        }
        &::before{
            @include bef-aft-common(auto, 0, 0, 0);
            height: 80%;
            background-color: $color_red;
            z-index: -1;
        }
        h2{
            margin-top: 5rem;
            color: #fff;
            font-size: 2.5rem;
            line-height: 4.5rem;
            span{
                font-size: 7rem;
            }
        }
        @include breakpoint($small){
            padding-bottom: 20vh;
        }
    }
}

/*/////////////////////////////////////////////////////////////
COMPLIANZ
*/
/////////////////////////////////////////////////////////////
.cmplz-manage-consent {
    &::before,
    &::after {
        display: none;
    }

    background-color: $color_primary !important;
    color: #fff !important;
}

#cmplz-cookiebanner-container {
    .cmplz-title {
        font-weight: 700;
        font-size: 22px;
    }

    .cmplz-message {
        font-size: 20px;
        line-height: 24px;
    }

    .cmplz-accept {
        &::before,
        &::after {
            display: none;
        }

        &:hover {
            background-color: $color_primary;
            color: #fff;
        }
    }

    .cmplz-link {
        font-size: 17px;
    }
}

#cmplz-document {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;

    h2 {
        margin-top: 6rem !important;
    }

    #cmplz-datarequest-form {
        max-width: 600px;
        margin-top: 4rem;

        #cmplz-datarequest-submit {
            margin-top: 4rem;
            @include buttons();
        }
    }

    .cmplz-category-title {
        font-size: 24px;
    }
}

/*/////////////////////////////////////////////////////////////
FOOTER
*/
/////////////////////////////////////////////////////////////
#harrow-footuer {
    background-image: url("https://thegeneralsdaughter.com/wp-content/uploads/2023/02/corner-top-left-square-cream.svg"),
        url("https://thegeneralsdaughter.com/wp-content/uploads/2023/03/corner-top-right-square-cream.svg");
    background-size: 15rem;
    background-repeat: no-repeat;
    background-position: 3% 5%, 97% 5%;

    @include breakpoint($small) {
        background-image: none;
    }

    #footer-logo {
        @include interpolate(max-width, $min-width, $max-width, 220px, 800px);
        margin-inline: auto;
    }

    ul.menu {
        @include custom-flex(center, center, wrap);
        margin-top: 60px;
        margin-bottom: 50px;
        margin-left: 0;

        li {
            display: inline-block;
            a {
                @include nav-link();
                padding: 15px;
                color: #fff;
                &::before {
                    background-color: #fff;
                    bottom: 7px;
                }

                &:hover {
                    color: #fff;
                }
            }
        }
    }

    h2 a {
        &:hover {
            text-decoration: none;
        }
    }
    a{
        color: #fff !important;
    }
    #wedding-credit {
        font-size: 1.6rem;
    }
}

#site-credit {
    padding-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid #b4b4b4;

    p,
    a {
        font-size: 1.8rem;
        color: #fff !important;
    }
}

#back-top {
    background-color: #fff;
    color: $color_navy;
}

/*/////////////////////////////////////////////////////////////
SLIDER
*/
/////////////////////////////////////////////////////////////
#wrapper {
    .slick-list {
        overflow: hidden;

        .slick-track {
            @include flex-center();
        }
    }

    .swiper {
        &.gallery-slider {
            .img-wrapper {
                @include interpolate(
                    min-height,
                    $min-width,
                    $max-width,
                    220px,
                    1800px
                );
                width: 100%;
                min-width: 100%;
            }

            .swiper-arrow {
                @include transition-duration(0.8s);
                height: auto;

                img {
                    @include interpolate(
                        height,
                        $min-width,
                        $max-width,
                        75px,
                        180px
                    );
                }

                &.swiper-button-next {
                    right: 25px;

                    &:hover {
                        transform: translateX(7px);
                    }

                    @include breakpoint(540px) {
                        right: 10px;
                    }
                }

                &.swiper-button-prev {
                    left: 25px;

                    &:hover {
                        transform: translateX(-7px);
                    }

                    @include breakpoint(540px) {
                        left: 15px;
                    }
                }

                &:focus-visible {
                    outline: solid 3px #fff;
                    background-color: $color_dark_brown;
                }
            }

            &.weddings-slider {
                .img-wrapper {
                    @include interpolate(
                        min-height,
                        $min-width,
                        $max-width,
                        320px,
                        1500px
                    );
                }
            }
        }

        &.image-slider {
            .image-wrapper {
                position: relative;
                min-height: 900px;

                img {
                    @include absolute-positioning(0, 0, 0, 0);
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        &.swiper-thumbs {
            margin-top: 20px;

            .img-wrapper {
                position: relative;
                width: 100%;
                @include interpolate(
                    min-height,
                    $min-width,
                    $max-width,
                    75px,
                    180px
                );

                img {
                    @include absolute-positioning(0, 0, 0, 0);
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    opacity: 0.5;
                }
            }

            .swiper-slide-thumb-active img {
                opacity: 1;
            }

            @include breakpoint($small) {
                display: none;
            }
        }

        .swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            background-color: #fff;
            opacity: 1;

            &.swiper-pagination-bullet-active {
                background-color: $color_primary;
                outline: solid 2px #fff;
            }
        }

        .swiper-button-prev,
        .swiper-button-next {
            width: 50px;

            &::after {
                display: none;
            }

            circle,
            path {
                @include transition-duration(0.6s);
            }

            &:hover {
                circle {
                    fill: #fff;
                }

                path {
                    fill: $color_primary;
                }
            }
        }
    }
}

/*/////////////////////////////////////////////////////////////
BUTTONS
*/
/////////////////////////////////////////////////////////////
.buttons-wrapper {
    @include interpolate(margin-top, $min-width, $max-width, 35px, 90px);
    a.button, button {
        @include interpolate(margin-right, $min-width, $max-width, 20px, 40px);
        margin-bottom: 20px;
    }
    &.aligncenter{
        a.button, button{
            @include interpolate((margin-right, margin-left), $min-width, $max-width, 10px, 20px);
        }
    }
}

a {
    &.button {
        @include buttons;

        &.secondary {
            @include secondary-button;
        }
    }
}

input[type="submit"] {
    @include buttons;
    border: none;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    @include buttons;

    &:hover {
        color: #fff !important;
    }
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    @include secondary-button;
}

/*/////////////////////////////////////////////////////////////
FORMS
*/
/////////////////////////////////////////////////////////////
input[type="text"],
input[type="email"],
input[type="textarea"],
input[type="date"],
input[type="tel"],
input[type="number"],
textarea,
select,
button {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    background-color: #f6ffff;
    border: solid 2px $color_primary;
    margin-bottom: 15px;
    margin-top: 5px;
}

.grecaptcha-badge {
    visibility: collapse !important;
}

input[type="submit"] {
    width: auto;
    cursor: pointer;
}

button {
    @include buttons();
    width: auto;
    cursor: pointer;
    margin-bottom: 0;
}

label {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 2px;
    line-height: 2rem;
}

.wpcf7{
    p{
        line-height: 2.4rem !important;
    }
}
.wpcf7-list-item{
    margin-left: 0;
    margin-bottom: 16px;
}

.wpcf7-response-output {
    border-color: $color_secondary !important;
    padding: 15px !important;
    font-size: 2.4rem;
}

/*/////////////////////////////////////////////////////////////
INFOR FORM
*/
/////////////////////////////////////////////////////////////
#rc-portal {
    max-width: 100% !important;

    .oneOfTwoColumns {
        @include custom-flex(center, center, wrap);
    }

    .rc-footnote {
        display: none;
    }

    .rc-fieldset {
        margin-top: 60px;

        .rc-legend,
        .sectionHeaderLine {
            display: none;
        }

        .rc-label-input-pair {
            flex-basis: 100%;
            @include flex();
            @include direction(column);

            .rc-input-column {
                display: flex;
                width: 100%;

                input[type="text"],
                input[type="email"],
                input[type="tel"],
                textarea {
                    font-family: $font_base;
                    font-size: 1.8rem;
                    border: solid 1px #000;
                    background-color: #fff;
                }

                #mobilePhone {
                    margin: 0 0 15px !important;
                    padding: 12px !important;
                }
            }

            .rc-label-column {
                label {
                    font-family: $font_base;
                    font-size: 1.5rem;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
            }

            &:nth-child(1),
            &:nth-child(6) {
                margin-right: 2%;
            }

            &:nth-child(2),
            &:nth-child(7) {
                margin-left: 2%;
            }

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(6),
            &:nth-child(7) {
                flex-basis: 48%;
            }

            &:nth-child(6),
            &:nth-child(7) {
                flex-basis: 100%;
                margin-left: 0;
                margin-right: 0;
            }

            &:nth-child(6) {
                @include direction(row);

                input[type="checkbox"] {
                    position: relative;
                    width: 15px;
                    right: -93px;
                    top: -7px;
                    border-color: #000;

                    &:checked {
                        background-color: $color_dark_brown;
                        outline: solid 4px #fff;
                        outline-offset: -6px;
                    }
                }
            }
        }

        .rc-required {
            left: 0;
            width: 5px;
            @include interpolate(height, $min-width, $max-width, 45px, 65px);
            background-color: $color_primary;
        }

        > .rc-label-input-pair {
            .rc-label-column {
                display: none;
            }

            input[type="submit"] {
                margin-right: 30px;
            }
        }
    }

    .rc-button-group {
        input[type="submit"],
        a span {
            background: none;
            @include buttons();
        }

        span.ui-button-text {
            border: none;

            &::before,
            &::after {
                display: none;
            }
        }
    }

    a {
        display: none !important;
    }
}

/*/////////////////////////////////////////////////////////////
ACCESSIBILITY SPECIFICS
*/
/////////////////////////////////////////////////////////////
#wrapper {
    a {
        &:focus-visible {
            outline: solid 3px $color_primary;
            outline-offset: 5px;
        }
    }
}

/*/////////////////////////////////////////////////////////////
MEDIA QUERIES
*/
/////////////////////////////////////////////////////////////
@media screen and (max-width: $small-pc) {
    #wrapper {
        .content,
        .left,
        .right,
        .pad-left,
        .pad-right {
            padding-left: 15px;
            padding-right: 15px;

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

@media screen and(max-width: $medium) {
    #wrapper {
        .break-medium {
            @include flex;
            @include direction(column);

            &.small-reverse {
                @include direction(column-reverse);
            }

            .left,
            .right {
                max-width: 100%;
            }

            .left {
                margin-left: 0;
            }

            .right {
                margin-right: 0;
            }
        }
    }
}

@media screen and (min-width: $mobile1) {
    /* Mobile Menu Fix */
    nav#mobile {
        &.is-open {
            display: none;
        }
    }

    .show-mobile {
        display: none;
    }
}

@media screen and (max-width: $mobile) {
    .show-mobile {
        display: block;
    }

    .hide-mobile {
        display: none;
    }
}

@media screen and (max-width: $small) {
    /* GUTENBERG Breakpoint Media Query */
    #wrapper {
        .hide-small {
            display: none;
        }

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

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

        .small-margin-top-x {
            margin-top: 75px;
        }

        .small-margin-bottom-x {
            margin-bottom: 75px;
        }

        .small-padding-top-x {
            padding-top: 75px;
        }

        .small-padding-bottom-x {
            padding-bottom: 75px;
        }

        .small-reverse {
            @include flex-center;
            @include direction(column-reverse);

            .wp-block-column {
                min-height: 100%;
                height: 100%;
                min-width: 100%;
            }
        }

        .small-no-padding-top {
            padding-top: 0;
        }

        .small-padding-bottom-s {
            padding-bottom: 40px;
        }

        .left {
            margin-left: 0;
        }

        .right {
            margin-right: 0;
        }

        .left,
        .right {
            &.small {
                max-width: 100%;
            }

            max-width: 100%;
        }
    }
}

@media (hover: none) {
    #wrapper {
        .location {
            &::before,
            .location-info {
                opacity: 1 !important;
            }
        }
    }
}