/*
 Theme Name:   Marston Hall
 Description:  Custom theme
 Author:       Carnoustie Creative
 Author URI:   https://www.carnoustiecreative.co.uk
 Template:     baseline
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  baseline-child


font-family: lora, serif;
font-weight: 400;
font-style: normal;

font-family: lora, serif;
font-weight: 400;
font-style: italic;

font-family: lora, serif;
font-weight: 700;
font-style: normal;

font-family: the-seasons, sans-serif;
font-weight: 400;
font-style: normal;
 
*/

:root {
    --mh-empress: #796B6B;
    --mh-alabaster: #FAF9F7;
    --mh-swiss-coffee: #D4CFCF;
    --mh-dusty-sage: #A6B8A0;
    --mh-burnished-gold: #B38A58;
    --mh-soft-charcoal: #2E2E2E;
}

.baseline {
    --baseline-aos-distance: 100px;
    --baseline-aos-distance-negative: -100px;
}

body.baseline {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.45;
    font-family: lora, serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 1.8vw, 1.85rem);
    font-style: normal;
}

.baseline h1,
.baseline h2 {
    font-family: the-seasons, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #4a4040;
}

.baseline h1.xl {
    font-size: clamp(5.5rem, 7vw, 7.8rem);   
}

.baseline h1,
.baseline h2.xl {
    font-size: clamp(4.8rem, 5vw, 5.5rem);
}

.baseline .cde-image-header h2,
.baseline .cde-slides h2 {
    font-size: clamp(2.7rem, 2.8vw, 3rem);
}

.baseline h2 {
    font-size: clamp(3.3rem, 3.1vw, 3.9rem);
}

.baseline h2.xl {
    font-size: clamp(3.7rem, 4vw, 4.5rem);
}

.baseline h4,
.baseline .has-bgcolor.col-none h4 {
    color: var(--mh-burnished-gold);
    font-style: italic;    
}

.baseline .container,
.header-wrap .container,
#footer-bottom-container.container {
    max-width: 92%;
    width: 92%;
}

.baseline .header-wrap {
    border-bottom: none;
}

.header-wrap .container {
    border-bottom: 0.2rem solid var(--mh-burnished-gold);
}

.baseline header .left .first .menu,
.baseline header .left .second .menu {
    justify-content: flex-start;
}

.baseline header .left .second .menu,
.baseline header .right .second .menu {
    justify-content: space-between;
}

header .right .first .menu li {
    margin-left: 4rem;
}

header .left .first .menu li {
    margin-right: 4rem;
}

header .right .second .menu li {
    margin: 0 0.5vw;
}

header .first .menu li a {    
    font-size: clamp(1.2rem, 1.4vw, 1.5rem);
}

header .second .menu li a {    
    font-size: clamp(1.2rem, 1.1vw, 1.6rem);
    text-align: center;
}

header .second .menu li:not(.button) a {
    text-transform: uppercase;
}

header .second .menu li.current-menu-item a {
    font-weight: bold;
}

.footer-credit {
    margin-top: 3rem;
    opacity: 0.5;
}

.footer-credit p {
    text-align: center;
    margin-bottom: 0.3rem;
}

footer {
    padding-top: 3rem;
}

.footer_logo {
    margin: 4rem auto 1rem;
    text-align: center;
}

.footer_contact {
    text-align: center;
    margin-bottom: 2rem;
}

.footer_contact_address {
    font-size: 1.4rem;
}

.footer_contact_phone {
    font-size: 1.6rem;
}

.baseline .fa-thin,
.baseline .fa-brands {
    min-width: 2rem;
    display: inline-block;
    color: var(--mh-burnished-gold);
}

.baseline footer .fa-thin {
    color: #D0A168;
}

footer .widget .menu a {    
    font-size: clamp(1.3rem, 1.5vw, 1.55rem);
}

footer .widget .menu li:not(.button) a {  
    text-transform: uppercase;
}

.baseline footer .widget-area .menu li:after {
    opacity: 0.2;
    margin: 0 2vw;
}

header .logotitle.row {
    display: grid;
    grid-template-columns: 1fr 13vw 1fr;
    grid-column-gap: 4rem;
    padding: 1.5rem 0;
}

.baseline header .left,
.baseline header .right {
    position: relative;
}

.baseline header .custom-logo {
    width: 100% !important;
    height: auto;
}

header .middle {
    margin: 0;
}

.baseline header .first {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.9vw;
}

@media ( max-width: 1200px ) {

    .baseline header .first {     
        justify-content: flex-start;        
    }

}

.baseline header .second {
    border-top: 0.1rem solid var(--mh-swiss-coffee);
    min-height: 3.8vw;
    bottom: 0;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;;
}

.flex-elm.cde-narrow .inner {
    max-width: 80rem;
    margin: 0 auto;
}

.baseline p {
    margin-bottom: 0.7rem;
}

.cde-image-left-text-right, 
.cde-text-left-image-right {
    position: relative;   
    z-index: 1;
}

.cde-image-left-text-right .left.img, 
.cde-text-left-image-right .right.img {
    min-height: 40vw;
    position: relative;    
}


@media ( min-width: 900px ) {

    .cde-image-left-text-right .left.img, 
    .cde-text-left-image-right .right.img {
        aspect-ratio: 1/0.75;
    }

}

.cde-text-left-image-right .right.img:after,
.cde-image-left-text-right .left.img:after {
    content: "";
    position: absolute;
    display: block;
    height: 80%;
    width: 200%;
    left: 40%;
    top: 27%;
    background-color: var(--mh-swiss-coffee);
    z-index: -1;
}

.cde-image-left-text-right .left.img:after {
    background-color: var(--mh-dusty-sage);
}

.cde-image-left-text-right .left.img:after {
    left: unset;
    right: 40%;
}

@media (max-width: 720px) {
 
    .baseline .cde-image-left-text-right .img, 
    .baseline .cde-text-left-image-right .img {
        margin-bottom: 5rem;
    }

}

.baseline .button,
.baseline a.button,
.baseline .mobile-nav li.button,
.baseline button,
.baseline input[type=reset],
.baseline input[type=button],
.baseline input[type=submit],
.baseline .woocommerce-page.woocommerce #respond input#submit,
.baseline .woocommerce-page.woocommerce a.button,
.baseline .woocommerce-page.woocommerce button.button,
.baseline .woocommerce-page.woocommerce input.button {
    font-size: clamp(1.3rem, 1.4vw, 1.5rem);
    font-weight: bold;
    line-height: 1.4;
    padding: 1.3rem 2.5vw;
}

@media ( max-width: 1100px ) {

    .baseline header .button {
        padding: 0.8rem 2.5vw;
    }    

}

@media ( max-width: 600px ) {

    .baseline a.button {
        padding: 1rem 5vw;
    }

}


p > .button {
    margin-top: 2rem;
}

.hero.big-hero,
.cde-image-header,
.hero .swiper-container,
.hero {
    height: calc(100vh - 22rem);
}

.cde-image-header.small-hero {
    height: calc(55vh);
}

@media ( max-width: 720px ) {

    .hero.big-hero,
    .hero .swiper-container,
    .hero  {
        height: calc(80vh - 10rem);
    }

}

.baseline .swiper-slide {
    background-size: cover;
    background-position: center;
}

.cde-slides {
    position: relative;
}

.cde-slides .before {
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;    
    align-items: center;
    box-sizing: border-box;
}

.cde-slides .before:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 60%;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.cde-slides .before .inner {
    position: relative;
    z-index: 3;
    margin-bottom: 7rem;
}

@media ( max-width: 720px ) {

    .cde-slides .before .inner {
        position: relative;
        z-index: 3;
        margin-bottom: 3rem;
    }

}

.hero .container {
    height: 100%;
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
}

.cde-slides .inner,
.hero.inner {
    padding-top: 4rem;
}

@media ( max-width: 720px ) {

    .cde-slides .inner,
    .hero .inner {
        padding-top: 0;
    }

}

.cde-slides .inner h1,
.hero .inner h1,
.cde-slides .inner h2,
.hero .inner h2 {
    color: #fff;    
}

.hero .inner h2 {
    margin-top: 1.5rem;
}

.swiper-slide_img,
.swiper-slide_img .inner {
    height: 100%;
}

.swiper-slide {
    z-index: 1;
}

.swiper-slide_img {
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center;    
}

.flex-elm.cde-divider {
    border-top: 0.1rem solid var(--mh-swiss-coffee);    
    margin: 1rem 0;;
}

.flex-container:has(.cde-image-left-text-right) + .cde-divider, 
.flex-container:has(.cde-text-left-image-right) + .cde-divider {
    margin-top: 7rem;
}

.cde-grid-list .before {
    margin-bottom: 6rem;
}

@media (max-width: 700px) {
    .hero h1, .hero .hero-caption {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.arch-menu .grid-list {
    margin-left: 8vw;
    margin-right: 8vw;
}

.arch-menu .cde-grid-item-inner {
    height: 100%;
}

.arch-menu .cde-grid-item a {
    display: block;   
}

.arch-menu .cde-grid-item a,
.arch-menu .cde-grid-item a:hover {
    border-bottom: none;
}

.arch-menu .item-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 338 / 318;
    /* Keep the arch silhouette fixed while the image scales beneath it */
    -webkit-mask-image: url('arch-mask.svg');
    mask-image: url('arch-mask.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center top;
    mask-position: center top;
}

.arch-menu .item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transition: transform 320ms ease-out;
}

.arch-menu .cde-grid-item:hover .item-image img {
    transform: scale(1.08);
}

.arch-menu .item-label {
    line-height: 1.3;
    padding: 2rem 2rem 2.5rem 2rem;
    text-align: center;
    border-top: 2.5rem solid var(--mh-dusty-sage);
    border-bottom: 0.3rem solid var(--mh-dusty-sage);
    font-weight: bold;    
    transition-duration: 0.3s;
}

.arch-menu .item-label span {
    max-width: 19rem;
    display: inline-block;
}

.arch-menu .cde-grid-item:hover .item-label {
    border-top-color: var(--mh-burnished-gold);
    border-bottom-color: var(--mh-burnished-gold);
}

.big-icon i:before {
    font-size: 6.5rem;
    color: var(--mh-burnished-gold);
    margin-bottom: 1.5rem;
    display: inline-block;
}

/* Testimonials - grid/flickty */

.testi .flickity-viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.testi .container {
    width: 100%;
    max-width: 100%;    
}

.testi .cde-grid-item {        
    width: 100%;        
    box-sizing: border-box;    
}

.testi .cde-grid-item-inner {    
    margin: 0 10% 4rem 10%;     
    background-color: #fff;                
    padding: 16rem 8vw 8vw 8vw;
    color: #000;
    text-align: center;        
    display: grid;
    grid-template-areas: "testi-top"
                         "testi-bottom";
    grid-column-gap: 4rem;
    position: relative;
}

.testi .flickity-button {
    display: none;
}

.testi .flickity-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testi .cde-grid-item-inner .item-label {
    grid-area: testi-top;    
    font-size: 2rem;        
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.testi .cde-grid-item-inner .item-subtitle {
    margin-top: 2rem;
    font-weight: normal;
    font-style: italic;
}

.testi .cde-grid-item-inner .item-subtitle:before {
    content: "\2014";
    margin-right: 0.7rem;
}

.testi .cde-grid-item-inner .item-content {    
    font-size: clamp(1.7rem, 3vw, 2rem);    
}

.testi .cde-grid-item-inner:before {
    content: "";
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7rem;
    height: 7rem;
    background: url('quote.svg') center/contain no-repeat;
}

.testi .xl .cde-grid-item-inner .item-content {
    font-size: clamp(2.3rem, 2vw, 3rem);
}

@media ( max-width: 720px ) {

    .testi .cde-grid-item-inner {
        margin: 0 2rem;
        padding: 3rem;
    }

    .testi .cde-grid-item-inner .item-label {
        font-size: 1.5rem;
    }

}

/* End of testimonials */

.flex-container.testi {
    background-color: var(--mh-dusty-sage);
    padding: 2rem;
    margin: 5rem auto 8rem auto;
}

.flex-container.testi > .flex-elm {
    margin: 0;
    border: 0.1rem solid #fff;
}

.testi .flickity-page-dots {
    bottom: -2rem;
}

.testi .flickity-page-dots .dot {
    background: var(--mh-soft-charcoal);
}

.flex-elm.testi.col-swiss-coffee .col-none p {
    background: transparent;
}

.testi .five-stars .cde-grid-item-inner:after,
.testi .four-stars .cde-grid-item-inner:after {
    content: "\f005\f005\f005\f005\f005";
    font-weight: 700;
    position: absolute;
    bottom: 5rem;
    color: var(--mh-burnished-gold);
    font-family: "Font Awesome 6 Pro";
    left: 0;
    right: 0%;
    text-align: center;
}

.testi .four-stars .cde-grid-item-inner:after {
    content: "\f005\f005\f005\f005";
}

.mobile-nav .container {
    border-bottom: 0.2rem solid var(--mh-burnished-gold);
}

.baseline .menu-bar {
    float: none;
    clear: both;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 3rem;
}

.baseline .widget-area.mobile-menubar .custom-html-widget {
    text-align: right;
}

.baseline .menubar-logo {
    text-align: center;
}

.baseline .mobile-nav .custom-logo {
    max-width: unset;
    height: 8rem;
}

.baseline #hamburger {
    background: var(--mh-swiss-coffee);
}

.baseline #hamburger #div-1, 
.baseline #hamburger #div-2, 
.baseline #hamburger #div-3 {
    background: var(--mh-empress);
}

.baseline .mobile-nav #menu-choices li, 
.baseline .mobile-nav #menu-choices-side li {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
}

#menu-choices.slide-right, 
#menu-choices.slide-left {
    background-color: var(--mh-soft-charcoal);
}

.baseline .mobile-nav #menu-choices li a, 
.baseline .mobile-nav #menu-choices-side li a {
    font-size: 2.6rem;
    color: var(--mh-swiss-coffee);
    font-family: the-seasons, sans-serif;
}

.baseline .mobile-nav #menu-choices li.current-menu-item > a, 
.baseline .mobile-nav #menu-choices-side li.current-menu-item > a {
    color: var(--mh-dusty-sage);
}