/*
Theme Name: Webseller Marketing Child Theme
Theme URI: https://www.rkanswers.com/themes/ws-marketing/
Author: RK Answers
Author URI: https://www.rkanswers.com/
Description: Child theme for the Webseller Marketing Theme.
Requires at least: 2.8
Requires PHP: 7
Version: 1.0.0.R153
License: GPLv2
License URI: https://www.gnu.org/licenses/gpl.html
Template: ws-marketing-theme
Text Domain: wsmc
Tags: rkanswers, bizboomr, webseller, marketing.
*/

/*
-----------------
TABLE OF CONTENTS
-----------------
- General
    > Bootstrap 5
    > Typography
    > Buttons
    > Borders
- Header
    > Hello Bar
    > Nav Bar
- Footer
    > Form Row
    > Links Row
    > Social Row
- Pages
    > Home
    > Menu
- Decorations
    > Highlight Circle
    > Oval Images
    > Curved Boundaries
    > Sliced Sections
- Gravity Forms
    > Textboxes
    > Location List
    > Error messages
*/

/*------------------------------------------------------------------------------
- General
------------------------------------------------------------------------------*/

/* Bootstrap 5 */
@media (min-width: 1400px) {
    .container,
    .wp-block-kadence-rowlayout.alignwide{
        max-width: 1320px; /* Force to behave as BS5 container-xxl */
    }
}
.bb-section-top-2{
	padding-top:8rem
} 
.bb-section-bottom-2{
	padding-bottom:8rem
	
}

.bb-section-top-3{
	padding-top:6rem
} 
.bb-section-bottom-3{
	padding-bottom:6rem
	
}
.bb-section-bottom-curved{
	padding-bottom:8rem
	
}


/* Typography */
.vit{
    font-size: 1.5rem !important;
}

h1, h2{
    text-transform: uppercase;
}

.underline-primary-wavy{
    text-decoration: underline wavy var(--bb-color-primary);
}

a,
a:hover,
a:focus, 
a:active{
    color: var(--bb-color-primary);
}

/* Buttons */
.bb-btn-primary:not(.wp-block-button),
.bb-btn-primary.wp-block-button a.wp-block-button__link,
.bb-btn-secondary:not(.wp-block-button),
.bb-btn-secondary.wp-block-button a.wp-block-button__link,
.bb-btn-tertiary:not(.wp-block-button),
.bb-btn-tertiary.wp-block-button a.wp-block-button__link{
    text-transform: uppercase;
}

.bb-btn-primary:not(.wp-block-button).bb-btn-fill-inverse,
.bb-btn-primary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link,
.gf-styled .gform-footer input[type="submit"].bb-btn-primary{
    color: var(--bb-color-primary) !important;
    background-color: transparent !important;
}

.bb-btn-primary:not(.wp-block-button).bb-btn-fill-inverse:hover,
.bb-btn-primary:not(.wp-block-button).bb-btn-fill-inverse:focus,
.bb-btn-primary:not(.wp-block-button).bb-btn-fill-inverse:active,
.bb-btn-primary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link:hover,
.bb-btn-primary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link:focus,
.bb-btn-primary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link:active,
.gf-styled .gform-footer input[type="submit"].bb-btn-primary:hover,
.gf-styled .gform-footer input[type="submit"].bb-btn-primary:focus,
.gf-styled .gform-footer input[type="submit"].bb-btn-primary:active{
    color: var(--bb-color-alt2) !important;
    background-color: var(--bb-color-primary) !important;
}

.bb-btn-secondary:not(.wp-block-button).bb-btn-fill-inverse,
.bb-btn-secondary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link{
    background-color: transparent !important;
}

.bb-btn-secondary:not(.wp-block-button).bb-btn-fill-inverse:hover,
.bb-btn-secondary:not(.wp-block-button).bb-btn-fill-inverse:focus,
.bb-btn-secondary:not(.wp-block-button).bb-btn-fill-inverse:active,
.bb-btn-secondary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link:hover,
.bb-btn-secondary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link:focus,
.bb-btn-secondary.bb-btn-fill-inverse.wp-block-button a.wp-block-button__link:active{
    color: var(--bb-body-color) !important;
    background-color: var(--bb-color-alt2) !important;
}

/* Borders */
.img-rounded, 
.img-rounded > img{
    border-radius: 1.5rem !important;
    overflow: hidden;
}

/*------------------------------------------------------------------------------
- Header
------------------------------------------------------------------------------*/

/* Hello Bar */
.header-hello-bar a.wsm-social-profile{
    font-size: 1.25rem;
    margin-right: 1rem;
}

.header-hello-bar a.wsm-social-profile,
.header-hello-bar a.wsm-social-profile:hover,
.header-hello-bar a.wsm-social-profile:focus,
.header-hello-bar a.wsm-social-profile:active{
    color: inherit;
}

.header-hello-bar span.ml-3{
    display: none;
}

.header-hello-bar .lang-switcher{
/*     word-spacing: -1rem; */
}

.header-hello-bar .lang-switcher a[aria-current]:first-child::after{
	display:inline-block;
}

.header-hello-bar .lang-switcher a{
    color: var(--bb-color-primary);
}

.header-hello-bar .lang-switcher a[aria-current]{
    color: var(--bb-color-alt2);
}

.header-hello-bar .lang-switcher a[aria-current]:hover{
    cursor: text;
    text-decoration: none;
}

.header-hello-bar .lang-switcher a[aria-current]:first-child::after,
.header-hello-bar .lang-switcher a[aria-current]:last-child::before{
    content: '|';
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* Nav Bar */
.navbar.header-navbar{
    padding: 1rem;
}

@media (min-width: 992px){
    .header-navbar .nav-link.active::after{
        content: '';
        display: block;
        height: 1px;
        width: calc(100% + 2px);
        margin-top: 1px;
        margin-left: -1px;
        background-color: black;
    }

    .header-navbar .current-menu-ancestor .nav-link{
        position: relative;
    }

    .header-navbar .current-menu-ancestor .nav-link::before{
        content: '';
        display: block;
        height: 1px;
        width: calc(100% - 0.75rem - 0.75rem - 0.255em - 0.3em);
        margin-left: -1px;
        background-color: black;
        position: absolute;
        bottom: 7px;
    }
}

@media (max-width: 991px){
    .header-navbar .nav-link{
        font-size: 2.5rem !important;
        text-align: center;
    }

    .header-navbar .dropdown-item{
        font-size: 2rem;
        text-align: center;
    }

    .header-navbar .bb-menu-item-primary{
        text-align: center;
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .bb-menu-item-primary.style-always > a.nav-link{
        font-size: 2rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .header-navbar .navbar-nav .dropdown-menu{
        border: 0;
    }

    .header-navbar .navbar-nav .dropdown-item{
        padding-left: 0.25rem;
    }
}

/*------------------------------------------------------------------------------
- Footer
------------------------------------------------------------------------------*/

/* Form Row */
.footer-form-row img{
    max-height: 500px;
    width: auto;
}

.footer-form-row .gfield--type-email input{
    height: 60px;
}

/* Links Row */
.footer-links-row .wsm-footer-menu{
    text-transform: uppercase;
}

@media (min-width: 480px){
    .footer-links-row .wsm-footer-menu{
        display: flex;
        justify-content: center;
        column-gap: 1.5rem;    
    }
}

@media (max-width: 479px){
    .footer-links-row .wsm-footer-menu li{
        margin-bottom: 1.5rem !important;
    }
}

/* Social Row */
.footer-social-row a.wsm-social-profile{
    font-size: 1.25rem;
    text-align: center;
    margin-right: 1rem;
    border: solid 1px var(--bb-footer-color);
    border-radius: 50%;
    padding: 0.5rem;
    display: inline-block;
    width: 3rem;
    height: 3rem;
}

.footer-social-row a.wsm-social-profile:hover{
    color: var(--bb-footer-bg-color);
    background-color: var(--bb-footer-color);
}

/*------------------------------------------------------------------------------
- Pages
------------------------------------------------------------------------------*/

/* === Home === */

/* Section: Explore Menu */
.explore-menu .menu-category-title{
    font-family: inherit !important;
    font-size: 1.375rem !important;
}

/* Section: About Us */
.about-us-img-section{
    position: relative;
}

.about-us-img-section .owner-photo{
    position: absolute;
    width: 40vw;
    bottom: -15vw;
    right: -0.875rem;
}

@media (min-width: 576px){
    .about-us-img-section .owner-photo{
        width: 14rem;
        top: -4rem;
        bottom: auto;
    }
}

@media (min-width: 1200px){
    .about-us-img-section .owner-photo{
        width: 15.625rem;
        top: -5rem;
    }
}

@media (min-width: 1400px){
    .about-us-img-section .owner-photo{
        right: -2.5rem;
    }
}

.about-us-img-section .owner-photo img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}

/* Section: Explore Our Menu */
.menu-category-title a,
.menu-category-title a:hover,
.menu-category-title a:focus,
.menu-category-title a:active{
    color: var(--bb-body-color);
}

/* Section: Our Locations */
.location-title, 
.location-title a,
.location-title a:hover,
.location-title a:focus,
.location-title a:active{
    color: var(--bb-color-primary);
    font-family: inherit !important;
    font-size: 1.5rem !important;
    font-weight: normal !important;
}

/* === Menu === */

/* Section: Menu Categories */
.menu-accordion .kt-blocks-accordion-title{
    font-family: 'Permanent Marker', sans-serif !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    color: var(--bb-body-color) !important;
}

.menu-accordion .kt-blocks-accordion-icon-trigger::before,
.menu-accordion .kt-blocks-accordion-icon-trigger::after{
    background-color: var(--bb-body-color) !important;
}

.menu-accordion .kt-accordion-panel-inner{
   font-size: 1.5rem !important; 
}

.menu-accordion .kt-blocks-accordion-header{
    background-color: transparent !important;
    border-color: var(--bb-body-color) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.menu-accordion .kt-accordion-pane:not(:last-child) .kt-blocks-accordion-header,
.menu-accordion .kt-accordion-pane:last-child .kt-blocks-accordion-header.kt-accordion-panel-active{
    border-bottom: 0 !important;
}

/*------------------------------------------------------------------------------
- Decorations
------------------------------------------------------------------------------*/

/* Highlight Circle */
.highlight-circle {
    position: relative;
    display: inline-block;
    z-index: 1;
    margin-left: 1rem;
    margin-right: 1rem;
}

.highlight-circle::before {
    content: '';
    position: absolute;
    top: 0;
    right: -1rem;
    bottom: -0.75rem;
    left: -1rem;
    background: url('assets/images/highlight-circle.svg?ver=1') center / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Oval Images */
.oval-image{
    width: 62.5rem;
    max-width: 90%;
    height: auto;
    clip-path: ellipse(50% 50% at 50% 50%);
    transform: rotate(-15deg); 
    overflow: hidden; 
}

.oval-image img{
    width: 100%;
    height: auto;;
    object-fit: cover;
    transform: rotate(15deg) scale(1.2); 
}
@media(max-width:767px){
	.oval-image{
		max-width:100%;
	}
}

@media(max-width:575px){
	.oval-image img{
		transform:rotate(15deg) scale(1.5);
	}
}
/* Curved Boundaries */
.separator{
    display: block;
    width: 100%;
    height: 12rem;
    position: relative;
    z-index: 20;
}

.separator.curved-bottom.move-up{
    -webkit-mask-image: radial-gradient(ellipse 55% 12rem at 50% -50%, transparent 99.5%, black 100%);
    mask-image: radial-gradient(ellipse 55% 12rem at 50% -50%, transparent 99.5%, black 100%);
    margin-top: -8rem;
	height:8rem;
}

.separator.curved-bottom.move-down{
    -webkit-mask-image: radial-gradient(ellipse 55% 12rem at 50% -50%, black 99.5%, transparent 100%);
    mask-image: radial-gradient(ellipse 55% 12rem at 50% -50%, black 99.5%, transparent 100%);
    margin-top: -8rem;
    margin-bottom: -8rem;
	height:8rem
}

.separator.curved-bottom.move-down + div{
    padding-top: 8rem !important;
}

.separator.curved-top.move-up{
    -webkit-mask-image: radial-gradient(ellipse 55% 12rem at 50% 0%, black 99.5%, transparent 100%);
    mask-image: radial-gradient(ellipse 55% 12rem at 50% 0%, black 99.5%, transparent 100%);
    transform: scaleY(-1);
    margin-top: -12rem;
}
/*Large*/
@media(max-width:1199px){
	.separator{
		height:10rem;
	}
	.separator.curved-bottom.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 10rem at 50% -50%, transparent 99.5%, black 100%);
    	mask-image: radial-gradient(ellipse 55% 10rem at 50% -50%, transparent 99.5%, black 100%);
    	margin-top: -7.5rem;
		height:7.5rem;
	}

	.separator.curved-bottom.move-down{
    	-webkit-mask-image: radial-gradient(ellipse 55% 10rem at 50% -50%, black 99.5%, transparent 100%);
    	mask-image: radial-gradient(ellipse 55% 10rem at 50% -50%, black 99.5%, transparent 100%);
    	margin-top: -7.5rem;
    	margin-bottom: -7.5rem;
		height:7.5rem;
	}

	.separator.curved-bottom.move-down + div{
    	padding-top: 7.5rem !important;
	}

	.separator.curved-top.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 10rem at 50% 0%, black 99.5%, transparent 100%);
	    mask-image: radial-gradient(ellipse 55% 10rem at 50% 0%, black 99.5%, transparent 100%);
    	transform: scaleY(-1);
	    margin-top: -10rem;
	}
	/**??? move with its grouped content**/
	.bb-section-bottom-curved{
		padding-bottom:10rem;
	}
}
/*Medium*/
@media(max-width:991px){
	.separator{
		height:8rem;
	}
	.separator.curved-bottom.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 8rem at 50% -50%, transparent 99.5%, black 100%);
    	mask-image: radial-gradient(ellipse 55% 8rem at 50% -50%, transparent 99.5%, black 100%);
    	margin-top: -6rem;
		height:6rem;

	}

	.separator.curved-bottom.move-down{
    	-webkit-mask-image: radial-gradient(ellipse 55% 8rem at 50% -50%, black 99.5%, transparent 100%);
    	mask-image: radial-gradient(ellipse 55% 8rem at 50% -50%, black 99.5%, transparent 100%);
    	margin-top: -6rem;
    	margin-bottom: -6rem;
		height:6rem;
	}

	.separator.curved-bottom.move-down + div{
    	padding-top: 8rem !important;
	}

	.separator.curved-top.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 8rem at 50% 0%, black 99.5%, transparent 100%);
	    mask-image: radial-gradient(ellipse 55% 8rem at 50% 0%, black 99.5%, transparent 100%);
    	transform: scaleY(-1);
	    margin-top: -8rem;
		height:8rem;
	}
}
/*Small*/
@media(max-width:767px){
	.separator{
		height:6rem;
	}
	.separator.curved-bottom.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 6rem at 50% -50%, transparent 99.5%, black 100%);
    	mask-image: radial-gradient(ellipse 55% 6rem at 50% -50%, transparent 99.5%, black 100%);
    	margin-top: -4.5rem;
		height:4.5rem;

	}

	.separator.curved-bottom.move-down{
    	-webkit-mask-image: radial-gradient(ellipse 55% 6rem at 50% -50%, black 99.5%, transparent 100%);
    	mask-image: radial-gradient(ellipse 55% 6rem at 50% -50%, black 99.5%, transparent 100%);
    	margin-top: -4.5rem;
    	margin-bottom: -4.5rem;
		height:4.5rem;
	}

	.separator.curved-bottom.move-down + div{
    	padding-top: 4.5rem !important;
	}

	.separator.curved-top.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 6rem at 50% 0%, black 99.5%, transparent 100%);
	    mask-image: radial-gradient(ellipse 55% 6rem at 50% 0%, black 99.5%, transparent 100%);
    	transform: scaleY(-1);
	    margin-top: -6rem;
		height:6rem;
	}
}
/*X-Small*/
@media(max-width:575px){
	.separator{
		height:4rem;
	}
	.separator.curved-bottom.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 4rem at 50% -50%, transparent 99.5%, black 100%);
    	mask-image: radial-gradient(ellipse 55% 4rem at 50% -50%, transparent 99.5%, black 100%);
    	margin-top: -3rem;
		height:3rem
	}
		/**??? move with its grouped content**/
	.bb-section-bottom-curved{
		padding-bottom:6rem;
	}
	.bb-hero-custom .bb-section-top{
        padding-top: 2rem !important;
        padding-bottom: 3rem;
	}
	
	
/* 
	.separator.curved-bottom.move-down{
    	-webkit-mask-image: radial-gradient(ellipse 55% 4rem at 50% 0%, black 99.5%, transparent 100%);
    	mask-image: radial-gradient(ellipse 55% 4rem at 50% 0%, black 99.5%, transparent 100%);
    	margin-top: -4rem;
    	margin-bottom: -4rem;
	}

	.separator.curved-bottom.move-down + div{
    	padding-top: 4rem !important;
	} 

	.separator.curved-top.move-up{
    	-webkit-mask-image: radial-gradient(ellipse 55% 4rem at 50% 0%, black 99.5%, transparent 100%);
	    mask-image: radial-gradient(ellipse 55% 4rem at 50% 0%, black 99.5%, transparent 100%);
    	transform: scaleY(-1);
	    margin-top: -4rem;
	}

    */

}
	

/* Sliced Sections */
.sliced.v1{
    clip-path: polygon(
        /* Top */
        0% 6rem, 
        10% 5.7rem, 
        20% 5.2rem, 
        30% 4.6rem, 
        40% 3.9rem, 
        50% 3.2rem, 
        60% 2.5rem, 
        70% 1.8rem, 
        80% 1.1rem, 
        90% 0.5rem, 
        100% 0%, 
        
        /* Bottom */
        100% calc(100% - 6rem), 
        90% calc(100% - 5.7rem), 
        80% calc(100% - 5.2rem), 
        70% calc(100% - 4.6rem), 
        60% calc(100% - 3.9rem), 
        50% calc(100% - 3.2rem), 
        40% calc(100% - 2.5rem), 
        30% calc(100% - 1.8rem), 
        20% calc(100% - 1.1rem), 
        10% calc(100% - 0.5rem), 
        0% 100%
    );
}

.sliced.v2{
    clip-path: polygon(
        /* Top */
        0 6rem,
        5% 5.7rem,
        10% 5.3rem,
        15% 4.9rem,
        20% 4.5rem,
        25% 4.1rem,
        30% 3.7rem,
        35% 3.3rem,
        40% 2.9rem,
        45% 2.5rem,
        50% 2.1rem,
        55% 1.8rem,
        60% 1.5rem,
        65% 1.2rem,
        70% 0.9rem,
        75% 0.7rem,
        80% 0.5rem,
        85% 0.3rem,
        90% 0.15rem,
        95% 0.05rem,
        100% 0,

        /* Bottom */
        100% calc(100% - 6rem),
        95% calc(100% - 5.7rem),
        90% calc(100% - 5.3rem),
        85% calc(100% - 4.9rem),
        80% calc(100% - 4.5rem),
        75% calc(100% - 4.1rem),
        70% calc(100% - 3.7rem),
        65% calc(100% - 3.3rem),
        60% calc(100% - 2.9rem),
        55% calc(100% - 2.5rem),
        50% calc(100% - 2.1rem),
        45% calc(100% - 1.8rem),
        40% calc(100% - 1.5rem),
        35% calc(100% - 1.2rem),
        30% calc(100% - 0.9rem),
        25% calc(100% - 0.7rem),
        20% calc(100% - 0.5rem),
        15% calc(100% - 0.3rem),
        10% calc(100% - 0.15rem),
        5% calc(100% - 0.05rem),
        0 100%
    );
}

.sliced.v3{ /* Cosine based */
    clip-path: polygon(
        /* Top */
        0% 6rem,
        5% 5.96rem,
        10% 5.85rem,
        15% 5.67rem,
        20% 5.43rem,
        25% 5.12rem,
        30% 4.76rem,
        35% 4.36rem,
        40% 3.93rem,
        45% 3.47rem,
        50% 3rem,
        55% 2.53rem,
        60% 2.07rem,
        65% 1.64rem,
        70% 1.24rem,
        75% 0.88rem,
        80% 0.57rem,
        85% 0.33rem,
        90% 0.15rem,
        95% 0.04rem,
        100% 0,

        /* Bottom */
        100% calc(100% - 6rem),
        95% calc(100% - 5.96rem),
        90% calc(100% - 5.85rem),
        85% calc(100% - 5.67rem),
        80% calc(100% - 5.43rem),
        75% calc(100% - 5.12rem),
        70% calc(100% - 4.76rem),
        65% calc(100% - 4.36rem),
        60% calc(100% - 3.93rem),
        55% calc(100% - 3.47rem),
        50% calc(100% - 3rem),
        45% calc(100% - 2.53rem),
        40% calc(100% - 2.07rem),
        35% calc(100% - 1.64rem),
        30% calc(100% - 1.24rem),
        25% calc(100% - 0.88rem),
        20% calc(100% - 0.57rem),
        15% calc(100% - 0.33rem),
        10% calc(100% - 0.15rem),
        5% calc(100% - 0.04rem),
        0% 100%
    );
}

/*------------------------------------------------------------------------------
- Gravity Forms
------------------------------------------------------------------------------*/

/* Textboxes */
.gf-styled .ginput_container input[type="text"],
.gf-styled .ginput_container input[type="tel"],
.gf-styled .ginput_container input[type="email"],
.gf-styled .ginput_container textarea{
    border: 0;
    border-radius: 1.5rem;
    background-color: var(--bb-color-alt2);
}

.gf-styled .ginput_container input[type="text"]:focus,
.gf-styled .ginput_container input[type="tel"]:focus,
.gf-styled .ginput_container input[type="email"]:focus,
.gf-styled .ginput_container textarea:focus{
    background-color: white;
}

/* Location List */
.gf-styled .location-list .gchoice:not(:last-child){
    margin-bottom: 1rem;
}

/* Error messages */
h2.gform_submission_error{
    font-family: inherit !important;
    font-size: 1rem !important;
}