/*
Theme Name: SimGolf 2024
Description: Child theme for Brooklyn WordPress theme
Author: Squidart
Author URI: http://squidart.co.za
Template: brooklyn
Version: 1.4.0

License URI: http://opensource.org/licenses/mit-license.php
*/


/********** IMPORT RESPONSIVE BEHAVIOURS **********/
@import "assets/theme-spacing.css?v=1.4.0";


body h1 { line-height: 1.1em; margin-bottom: 0.8em; }
body h2 { line-height: 1.1em; margin-bottom: 0.8em; }
body h3 { line-height: 1.1em; margin-bottom: 0.8em; }
body h4 { line-height: 1.1em; margin-bottom: 0.8em; }
body h5 { line-height: 1.1em; margin-bottom: 0.8em; }
body h6 { line-height: 1.1em; margin-bottom: 0.8em; }
body p { line-height: 1.2em; margin-bottom: 0.8em; }

/* ------------------------------------------- */
/* -------------- WooCommerce ---------------- */
/* ------------------------------------------- */

/* Hide Additional fields section */
#customer_details > .col-2 {
    display: none;
}

.woocommerce-order h2,
.woocommerce-order h3 {
    margin-bottom: 0.25em;
}

.woocommerce-order ol li {
    font-size: inherit;
    line-height: 1.5em;
}

#ut-sitebody .woocommerce .woocommerce-order  table.shop_table td, 
#ut-sitebody .woocommerce .woocommerce-order table.shop_table th {
    text-align: left;
    vertical-align: top;
    padding: 10px 0;
}

.woocommerce-thankyou-order-details {
    padding-top: 40px;
}

/* ------------------------------------------- */
/* ---------------- AMELIA ------------------- */
/* ------------------------------------------- */

.body-no-scroll {
    overflow: hidden;
}

#booking_form_section {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 70%;
}

.am-select-service-price { opacity: 0; display: none; }

.am-advsc__duration .am-select-wrapper::before {
    content: "How many timeslots?";
    display: block;
    font-size: 1.5em;
    margin-top: 1em;
    color: #ff0000;
}

.fake-total-players,
.amelia-v2-booking #amelia-container div .fake-total-players {
    position: absolute;
    font-size: 1em;
    line-height: 1em;
    top: 50%;
    /* bottom: 1px; */
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
    padding: 3px 6px !important;
}

/* Peak Timeslot Indication above Timeslots */
.amelia-v2-booking #amelia-container div.gBoxPeakTimesContainer {
    border-radius: var(--am-rad-advsc-slot);
    background: #ff0000;
    color: #fff;
    padding: 4px;
    font-size: 0.95em;
    font-weight: 600;
}
.amelia-v2-booking #amelia-container div.gBoxPeakTimesPricingOffPeak,
.amelia-v2-booking #amelia-container div.gBoxPeakTimesPricingPeak {
    width: 100%;
    display: block;
    font-size: 0.85em;
    font-weight: 400;
}

.amelia-v2-booking #amelia-container .am-advsc__slots-item__inner.is-peak-timeslot::after {
    content: "Peak time";
    position: absolute;
    top: 50%;
    /* top: 0px; */
    left: 10px;
    font-size: 0.55em;
    line-height: 1em;
    color: #fff;
    background: #000;
    font-weight: 400;
    padding: 2px 0px;
    display: block;
    width: fit-content;
    max-width: 24px;
    text-align: center;
    border-radius: var(--am-rad-advsc-slot);
    transform: translateY(-50%);
}

@media (max-width: 540px) {
    .amelia-v2-booking #amelia-container .am-advsc__slots-item__inner.is-peak-timeslot::after {
        left: 6px;
        max-width: 20px;
    }
}

/* WooCommerce */
.wc-block-components-product-details.wc-block-components-product-details:last-of-type {
    text-align: left;
}



/* ----------------------------------------------- */
/* ---------------- SPLIT HERO ------------------- */
/* ----------------------------------------------- */
:root {
    --unit-h: 1vh;
    --unit-w: 1vw;

    --hero-col-pad-l: calc( var(--unit-w) * 5.5 );
    --hero-col-pad-t: calc( var(--hero-col-pad-l) * 1.5 );
    
    /*  #header-section + wpadminbar */
    --header-spacer: calc( 81px + 32px );
    --hero-height: calc( ( 100 * var(--unit-h) ) - var(--header-spacer) );

    --hero-container-pad-b: calc( var(--unit-h) * 12.5 );

    --hero-logo-w-default: calc( var(--unit-w) * 20.8 );
    --hero-logo-bot-default: calc( var(--unit-w) * 4.0 );
    --hero-head-font-s-default: calc( var(--unit-w) * 4.44 );
    --hero-head-w-default: calc( var(--unit-w) * 23 );
    
    --hero-logo-w: calc( var(--unit-w) * 20.8 * 0.44 );
    --hero-logo-bot: calc( var(--unit-w) * 1.333 );
    --hero-head-font-s: calc( var(--unit-w) * 6.66 );
    --hero-head-w: calc( var(--unit-w) * 32 );

    --hero-subhead-font-s: calc( var(--unit-w) * 2.5 );
    --hero-subhead-w: calc( var(--unit-w) * 32 );
    
    --hero-button-font-s: calc( var(--unit-w) * 1.25 );
    /* 1.04 = 20/960/2*100 */
    --hero-button-pad-t: calc( var(--unit-w) * 1 );
    --hero-button-pad-l: calc( var(--unit-w) * 2 );

    --hero-back-btn-unit: calc( var(--unit-w) * 20 );
    --hero-back-btn-pt: calc( var(--unit-w) * 30 / 10 );
    --hero-back-btn-pr: calc( var(--unit-w) * 20 / 10 );
    --hero-back-btn-pb: calc( var(--unit-w) * 30 / 10 );
    --hero-back-btn-pl: calc( var(--unit-w) * 60 / 10 );

}



.home #split_hero.gbox-split-hero-section,
#split_hero.gbox-split-hero-section,
.vc_section.vc_row-o-full-height.gbox-split-hero-section {
    padding: 0;
    background-color: #000000;
    min-height: var(--hero-height);
}

#split_hero .gbox-split-hero-row {
    min-height: var(--hero-height);
    padding: 0 !important;
}

#split_hero .gbox-split-hero-row .wpb_column.vc_column_container {
    min-height: var(--hero-height);
}

#split_hero .gbox-split-hero-row .wpb_column.vc_column_container .vc_column-inner {
    min-height: var(--hero-height);
    padding: 0;
}

#split_hero .gbox-split-hero-row .wpb_column.vc_column_container .vc_column-inner .wpb_wrapper {
    min-height: var(--hero-height);
}

.gbox-split-hero-col {
    /* border: #ff0000 1px solid; */
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: var(--hero-col-pad-t) var(--hero-col-pad-l);
    
    display: flex;
    align-items: center;
    overflow: hidden;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    
    transition: width 350ms ease-out, padding 350ms ease-out;
    -webkit-transition: width 350ms ease-out, padding 350ms ease-out;
    -o-transition: width 350ms ease-out, padding 350ms ease-out;
    -ms-transition: width 350ms ease-out, padding 350ms ease-out;
}



.gbox-split-hero-col1 {
    left: 0;
    background-image: url('/wp-content/themes/brooklyn-child/images/home/hero-obrien-l.jpg');
    background-position: 70% 50%;
    border-right: solid 2px #fff;
}
.gbox-split-hero-col2 {
    right: 0;
    background-image: url('/wp-content/themes/brooklyn-child/images/home/hero-golfbox-l-ii.jpg');
    background-position: 70% 50%;
    border-left: solid 2px #fff;
}

.gbox-split-hero-container {
    padding-bottom: var(--hero-container-pad-b);
}

.gbox-split-hero-logo {
    /* width: 42%; */
    /* max-width: 400px; */
    width: var(--hero-logo-w-default);
    margin-bottom: var(--hero-logo-bot-default);
}

    .gbox-split-hero-col1 .gbox-split-hero-logo {
        transform: translateX(-16%);
    }

.gbox-split-hero-col h1 { 
    color: #fff;
    font-size: var(--hero-head-font-s-default);
    font-weight: 900;
    line-height: 1em;
    margin-top: 0;
    margin-bottom: 0.2em;
    max-width: var(--hero-head-w-default);
}

.gbox-split-hero-col1 h1 { color: #231F20; }


body .gbox-split-hero-col p { 
    color: #fff;
    font-size: var(--hero-subhead-font-s);
    font-weight: 400;
    line-height: 1.1em;
    margin-top: 0;
    margin-bottom: 0.2em;
    max-width: var(--hero-subhead-w);
}
body .gbox-split-hero-col1 p { color: #231F20; }

.gbox-hero-btn {
    display: inline-block;
    color: #fff;
    font-size: var(--hero-button-font-s);
    line-height: 1em;
    font-weight: 600;
    background: #00AEEF;
    padding: var(--hero-button-pad-t) var(--hero-button-pad-l);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    cursor: pointer;
}


.gbox-single-hero-heading { display: none; }

.gbox-single-hero-subheading { display: none; }

.gbox-single-hero-btn { display: none; }

.gbox-hero-back-btn {
    display: none;
    position: absolute;
    width: var(--hero-back-btn-unit);
    right: calc( 0 - var(--hero-back-btn-unit) );
    bottom: 10%;
    /* top: 50%;
    transform: translateY(-50%); */

    background: #231F20;
    padding: var(--hero-back-btn-pt) var(--hero-back-btn-pr) var(--hero-back-btn-pb) var(--hero-back-btn-pl);
    box-shadow: 20px 15px 11px rgba(0, 0, 0, 0.4);


    transition-delay: 350ms;
    transition-property: right;
    transition-duration: 350ms;
    transition-timing-function: ease-out;
}

.gbox-hero-back-btn::before {
    content: "";
    display: block;
    width: calc( var(--hero-back-btn-unit) * 0.1 );
    height: calc( var(--hero-back-btn-unit) * 0.6 );

    background-image: url('/wp-content/themes/brooklyn-child/images/home/back-arrow.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    left: calc( var(--hero-back-btn-unit) * 0.1 );
    top: 50%;
    transform: translateY(-50%) ;
}

/* .gbox-split-hero-back-logo { width: calc( var(--hero-back-btn-unit) * 0.925 ); } */


/* ---------------------------------------------------------------- */
/* ---------------------- Hero Single Views ----------------------- */
/* ---------------------------------------------------------------- */


.gbox-split-hero-col-active { width: 100%; }
.gbox-split-hero-col-inactive { width: 0; padding-left: 0; padding-right: 0; }

.gbox-split-hero-col1.gbox-split-hero-col-inactive,
.gbox-split-hero-col2.gbox-split-hero-col-inactive {
    border-right: solid 0px #fff;
    border-left: solid 0px #fff;
}
.gbox-split-hero-col1.gbox-split-hero-col-active {
    border-right: solid 0px #fff;
    background-position: 50% 50%;
}
.gbox-split-hero-col2.gbox-split-hero-col-active {
    border-left: solid 0px #fff;
    background-position: 50% 50%;
}

.gbox-split-hero-col-inactive .gbox-split-hero-heading,
.gbox-split-hero-col-active .gbox-split-hero-heading,
.gbox-split-hero-col-inactive .gbox-split-hero-btn,
.gbox-split-hero-col-active .gbox-split-hero-btn { display: none; }

.gbox-split-hero-col-inactive .gbox-single-hero-heading,
.gbox-split-hero-col-inactive .gbox-single-hero-subheading,
.gbox-split-hero-col-active .gbox-single-hero-subheading,
.gbox-split-hero-col-active .gbox-single-hero-heading { display: block; }

.gbox-split-hero-col-inactive .gbox-single-hero-btn,
.gbox-split-hero-col-active .gbox-single-hero-btn { display: inline-block; }

.gbox-split-hero-col-inactive .gbox-split-hero-logo,
.gbox-split-hero-col-active .gbox-split-hero-logo {
    margin-bottom: var(--hero-logo-bot);
}

.gbox-split-hero-col-inactive .gbox-split-hero-logo,
.gbox-split-hero-col-active .gbox-split-hero-logo {
    width: var(--hero-logo-w);
}

.gbox-split-hero-col-inactive.gbox-split-hero-col h1,
.gbox-split-hero-col-active.gbox-split-hero-col h1 { font-size: var(--hero-head-font-s); max-width: var(--hero-head-w); }


.gbox-split-hero-col-active .gbox-hero-back-btn { 
    display: block; 
    right: 0;
}


@media (max-width: 768px) {

    :root {
        --hero-height: calc( ( 50 * var(--unit-h) ) - var(--header-spacer) );

        --hero-container-pad-b: calc( var(--unit-h) * 6.25 );
        --hero-button-font-s: calc( var(--unit-w) * 3 );
        --hero-button-pad-t: calc( var(--unit-w) * 1.5 );
        --hero-button-pad-l: calc( var(--unit-w) * 3.5 );

    }

    .gbox-split-hero-col {
        position: relative;
        width: 100%;
        /* height: fit-content; */
    }

    .gbox-split-hero-col-inactive {
        height: 0;
        padding: 0;
    }

    .gbox-split-hero-col2 {
        border-left: solid 0px #fff;
        border-bottom: solid 2px #fff;
    }

    .gbox-split-hero-col1 {
        border-right: solid 0px #fff;
        border-top: solid 2px #fff;
    }

    .gbox-split-hero-col-active,
    .gbox-split-hero-col-inactive {
        border-top: solid 0px #fff;
        border-bottom: solid 0px #fff;
    }

    #split_hero .gbox-split-hero-row .wpb_column.vc_column_container .wpb_content_element {
        margin: 0;
    }

    .home #split_hero.gbox-split-hero-section,
    #split_hero.gbox-split-hero-section,
    .vc_section.vc_row-o-full-height.gbox-split-hero-section,
    #split_hero .gbox-split-hero-row,
    #split_hero .gbox-split-hero-row .wpb_column.vc_column_container,
    #split_hero .gbox-split-hero-row .wpb_column.vc_column_container .vc_column-inner,
    #split_hero .gbox-split-hero-row .wpb_column.vc_column_container .vc_column-inner .wpb_wrapper {
        min-height: unset;
    }

}

@media (max-width: 540px) {

    :root {

        --hero-head-font-s-default: calc( var(--unit-w) * 6.66 );
        --hero-head-w-default: calc( var(--unit-w) * 35 );
        
        --hero-logo-w: calc( var(--unit-w) * 14 );
        --hero-logo-bot: calc( var(--unit-w) * 2 );
        --hero-head-font-s: calc( var(--unit-w) * 6.66 );
        --hero-head-w: calc( var(--unit-w) * 45 );
    
        --hero-subhead-font-s: calc( var(--unit-w) * 3.75 );
        --hero-subhead-w: calc( var(--unit-w) * 45 );
        
        --hero-button-font-s: calc( var(--unit-w) * 3 * 1.25 );
        --hero-button-pad-t: calc( var(--unit-w) * 1.5 * 1.25 );
        --hero-button-pad-l: calc( var(--unit-w) * 3.5 * 1.25 );
    
        --hero-back-btn-unit: calc( var(--unit-w) * 20 * 1.25 );
        --hero-back-btn-pt: calc( var(--unit-w) * 20 / 10  );

    }

    .gbox-hero-back-btn {
        top:unset;
        bottom: 10%;
    }

}