/* Styles for Weiser Theme for fiddlecontest.org */ 

:root {
    --fingerboard:  #232323;
    --herman:       #A92C21;
    --banjo:        #F9EFE9; /* Primary */
    --twin:         #F6E7DE; /* Secondary */
    --fiddle:       #6D3525;
    --strings:      #806D6E;
    --white:        var(--color-white);
    --black:        var(--color-black);
    --gray:         #B3B3B3;
    
    --font-size-sx: calc(calc(var(--font-size-xs) + var(--font-size-sm)) / 2);
    --font-size-ms: calc(calc(var(--font-size-md) + var(--font-size-sm)) / 2);
    --font-size-ml: calc(calc(var(--font-size-md) + var(--font-size-lg)) / 2);
    --font-size-lx: calc(calc(var(--font-size-xl) + var(--font-size-lg)) / 2);
    
    --spacing-sx: calc(calc(var(--spacing-xs) + var(--spacing-sm)) / 2);
    --spacing-ms: calc(calc(var(--spacing-md) + var(--spacing-sm)) / 2);
    --spacing-ml: calc(calc(var(--spacing-md) + var(--spacing-lg)) / 2);
    
    --link-text-decoration-offset: var(--spacing-xxxs);
    
    --button-border-radius: .2rem;
    --button-outline: 1px solid var(--button-background);
    --button-outline-hover: 1px solid var(--button-background-hover);
    --button-background: var(--herman);
    --button-background-hover: var(--black);
    --button-color: var(--white);
    --button-font-family: var(--body-font-family);
    --button-text-transform: uppercase;
    --button-letter-spacing: 1px;
    
    --title-area-padding: var(--title-area-padding-mobile) 0 0 0;
}
.button-secondary {
    --button-outline: 1px solid var(--black);
    --button-outline-hover: 1px solid var(--herman);
}
.button-secondary:hover, .button-secondary:active, .button-secondary:focus {   
    --button-background-hover: var(--herman);
}
.button-link {
    --button-outline: 1px solid var(--fiddle);
    --button-padding: .5rem 1rem;
    --button-font-weight: 600;
    --button-color-hover: var(--black);
}
.button-link:hover, .button-link:active, .button-link:focus {
    
}

.desktop-only {
    display: none;
}
@media only screen and (min-width: 900px) {
    .desktop-only {
        display: block;
    }
    .mobile-only {
        display: none !important;
    }
    
}

/* Header */ 
.before-header .wp-block-search {
    --input-padding: 0 var(--spacing-xxs);
    --input-border-radius: .2rem;
    --input-background-color: var(--twin);
    --input-border: 1px solid var(--twin);
    --input-border-color-focus: var(--twin);
}
.before-header .wp-block-search .wp-block-search__inside-wrapper  {
    --search-inside-wrapper-width: min(250px, 100%);
}
.before-header button.wp-block-search__button {
    --button-background: var(--twin);
    border-left: 2px solid var(--gray);
    --button-color: var(--gray);
    --button-padding: var(--spacing-xxxs) var(--spacing-sm);
}
.has-logo-center {
    --title-area-margin: 0 var(--spacing-lg) calc(-1 * (var(--spacing-xl))) 0;
    
}
@media only screen and (min-width: 900px) {
    --title-area-padding: 0;
}
button.menu-toggle, button.sub-menu-toggle {
    --button-outline: none;
    --button-background: transparent !important;
}
.mobile-menu {
    padding: var(--spacing-xl) 0;
}
@media only screen and (max-width: 899px) {
    .title-area {
        z-index: 99;
    }
}
.mobile-menu .button, .nav-header .button {
    --button-color: var(--white);
    --button-background-hover: var(--color-primary-dark);
    --button-color-hover: var(--white);
    --menu-item-name-filter-hover: none;
}
@media only screen and (min-width: 900px) {
    .menu-item-button:not(.menu-item-first) {
        margin-left: var(--spacing-lg);
    }
}

/* Buttons */ 
.button, .button:visited, [type=button], [type=reset], [type=submit], button {
    outline-offset: .2rem;
}
.has-header-background-color .button, .has-header-background-color button {
    
}
.has-background-background-color .button, .has-background-background-color button {
    --button-color: var(--color-background);
}
.has-alt-background-color .button, .has-alt-background-color button {
    --button-color: var(--color-alt);
}
button.wp-block-search__button {
    --button-outline: none;
    --button-outline-hover: none;
}


/* Block - Weiser Frame Heading */ 
.wsr-frame-heading {
    background: url('/wp-content/themes/weiser-pro/images/wsr-line-half.svg') no-repeat center;
    background-size: contain !important;
    text-align: center;
}
.wsr-frame-heading.fh-style-primary .wsr-frame-heading-inner {
    background: url('/wp-content/themes/weiser-pro/images/wsr-heading-frame-mb.svg') no-repeat center !important;
    background-size: contain !important;
}
.wsr-frame-heading.fh-style-secondary .wsr-frame-heading-inner {
    background: url('/wp-content/themes/weiser-pro/images/wsr-heading-frame-alt-mb.svg') no-repeat center !important;
    background-size: contain !important;
}
@media only screen and (min-width: 600px) {
    .wsr-frame-heading {
        background: url('/wp-content/themes/weiser-pro/images/wsr-heading-frame-line.svg') no-repeat center;
    }
    .wsr-frame-heading.fh-style-primary .wsr-frame-heading-inner {
        background: url('/wp-content/themes/weiser-pro/images/wsr-heading-frame.svg') no-repeat center !important;
        background-size: contain !important;
    }
    .wsr-frame-heading.fh-style-secondary .wsr-frame-heading-inner {
        background: url('/wp-content/themes/weiser-pro/images/wsr-heading-frame-alt.svg') no-repeat center !important;
        background-size: contain !important;
    }
}
.wsr-frame-heading .wsr-fh-hd {
    padding: var(--spacing-md);
}
.wsr-frame-heading h1.wsr-fh-hd {
    padding: var(--spacing-lg) var(--spacing-xl);
}

/* Block - Weiser Heading Line */ 
.wsr-heading-line-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.wsr-hl-hd {
    white-space: nowrap;
    padding-right: var(--spacing-sm);
    margin: 0 0 var(--spacing-xxs) 0;
    line-height: 1;
}
.wsr-heading-line .wsr-hl-line {
    height: .06rem;
    width: 100%;
}
.wsr-heading-line.hl-style-light .wsr-hl-line {
    background: var(--strings);
}
.wsr-heading-line.hl-style-dark .wsr-hl-line {
    background: var(--white);
}
.wsr-heading-line .wsr-hl-line-end {
    background-size: contain !important;
    width: .45rem;
    height: 1rem;
    margin-left: -.1rem;
}
.wsr-heading-line.hl-style-light .wsr-hl-line-end {
   background: url('/wp-content/themes/weiser-pro/images/wsr-line-end-light.svg') no-repeat center !important;
}
.wsr-heading-line.hl-style-dark .wsr-hl-line-end {
   background: url('/wp-content/themes/weiser-pro/images/wsr-line-end-dark.svg') no-repeat center !important;
}
@media only screen and (min-width: 600px) {
    .wsr-hl-hd {
        margin-bottom: var(--spacing-xs);
    }
}

/* Block - Weiser Separator */ 
.wsr-separator {
    background-size: contain !important;
    min-height: 1rem;
    margin: var(--spacing-sm) 0;
}
.wsr-separator.sp-type-double {
    background: url('/wp-content/themes/weiser-pro/images/wsr-line-half.svg') no-repeat center;
    min-height: 1.25rem;
}
.wsr-separator.sp-type-s-up {
    background: url('/wp-content/themes/weiser-pro/images/wsr-shalf-upper.svg') no-repeat center;
}
.wsr-separator.sp-type-s-down {
    background: url('/wp-content/themes/weiser-pro/images/wsr-shalf-lower.svg') no-repeat center;
}

@media only screen and (min-width: 600px) {
    .wsr-separator.sp-width-full.sp-type-double {
        background: url('/wp-content/themes/weiser-pro/images/wsr-heading-frame-line.svg') no-repeat center;
    }
    .wsr-separator.sp-width-full.sp-type-s-up {
        background: url('/wp-content/themes/weiser-pro/images/wsr-sfull-upper.svg') no-repeat center;
    }
    .wsr-separator.sp-width-full.sp-type-s-down {
        background: url('/wp-content/themes/weiser-pro/images/wsr-sfull-lower.svg') no-repeat center;
    }
}

/* Block - Polaroid Image */ 
.wsr-polaroid {
    display: flex;
    margin: var(--spacing-ms) 0;
}
.wsr-polaroid.aligncenter {
    justify-content: center;
}
.wsr-polaroid-inner {
    position: relative;
    border: 1rem solid var(--white);
    border-bottom: 1.75rem solid var(--white);
    border-radius: .6rem;
    box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.17);
    background: var(--white);
}
.wsr-polaroid-screen {
    background: url('/wp-content/themes/weiser-pro/images/wsr-polaroid-screen.svg') bottom left no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.wsr-polaroid-inner img {
    border-radius: .4rem;
}

/* Footer */ 
@media only screen and (min-width: 782px) {
    .footer-contact-left {
        border-right: 1px solid var(--white);
    }
}
.footer-contact-info .wp-block-columns {
    padding-bottom: var(--spacing-ms);
}
.footer-contact-info {
    --link-color: var(--white);
    --link-color-hover: var(--herman);
}
.footer-contact .mai-icon .mai-icon-wrap {
    --icon-size: 35px;
}
@media only screen and (max-width: 781px) {
    .footer-contact .wp-block-columns {
        justify-content: center;
    }
    .footer-contact .wp-block-columns .wp-block-columns .wp-block-column {
        max-width: 200px
    }
    .footer-contact .footer-contact-left {
        max-width: 325px;
        margin-bottom: var(--spacing-xl);
    }
}

.footer-contact-info h3 {
    margin-bottom: 0;
}
.footer-credits p {
    opacity: .6;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--banjo);
    --link-color: var(--banjo);
    --link-color-hover: var(--herman);
}



/* WSR Tabs Block Styles ====================================   */
.wsr-tabs {
    margin: 2rem 0;
    font-family: var(--body-font-family);
    
}

.wsr-tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 53px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12), 0px 2px 5px rgba(0, 0, 0, 0.08);
    background-color: #f9f4ee;
}

.tabs-navigation {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 0 16px;
    /* margin-bottom: 1rem;
    padding-bottom: 1rem; */
    /* #cf9d95 */
}

.tabs-line{
    background: url('/wp-content/themes/weiser-pro/images/wsr-heading-frame-line.svg') no-repeat center;
    min-height: 1.25rem;
    /* background-size: cover !important; */
}

.tabs-line-upper{
    background: url('/wp-content/themes/weiser-pro/images/wsr-sfull-upper.svg') no-repeat center;
    min-height: 7px;
    background-size: contain !important;
}
.tabs-line-lower{
    background: url('/wp-content/themes/weiser-pro/images/wsr-sfull-lower.svg') no-repeat center;
    min-height: 7px;
    background-size: contain !important;
}

/* for button layout */
.tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    min-width: 120px;
    outline: none;
    border-radius: 0;
    font-size: var(--font-size-sm);

}

.tab-button.active{ 
    background-color: var(--twin) ;
    color: var(--fingerboard) ; /* set to !important */
    outline: none  ;

}

.tab-button:hover{
    background-color: var(--twin) ;
    color: var(--fingerboard) ;
    outline: none ;
}


.tab-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon img {
    max-width: 100%;
    max-height: 100%;
}


/* for button layout */


.tabs-content {
    padding: 2rem 0;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

.tab-content-inner {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 2rem;
    align-items: center;
}
/* 
.tab-content-text {
} */

.tab-content-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-content-image img {
    max-width: 100%;
    height: 270px;
    background-size: cover;
    object-fit: cover;
}

.tab-content-inner p:first-child {
    margin-top: 0;
}

/* Color Schemes */
.color-scheme-primary {
    background-color: var(--banjo);
    color: var(--fingerboard);
}

.color-scheme-primary .tab-button {
    color: var(--fingerboard);
}

.color-scheme-primary .tab-button:hover,
.color-scheme-primary .tab-button.active {
    color: var(--fiddle);
}

.color-scheme-secondary {
    background-color: var(--fingerboard);
    color: var(--white);
}

.color-scheme-secondary .wsr-tabs-container {
    background-color: var(--fingerboard);
    color: var(--white);

}

.color-scheme-secondary .tab-button {
    color: var(--white);

}

.color-scheme-secondary .tab-button:hover,
.color-scheme-secondary .tab-button.active {
    background-color: var(--herman);
    color: var(--banjo) ;
}

/* Responsive styles */
@media (max-width: 767px) {
    .wsr-tabs-container {
        display: flex;
        flex-direction: row;
        padding: unset;
        align-items: flex-start;
    }

    .tabs-navigation {
        flex-direction: column;
        min-width: 120px;
        padding: 10px 5px;
    }

    .tab-button {
        width: 100%;
        max-width: 120px;
        font-size: 14px; /* Adjust font size */
        padding: 10px;
    }

    .tabs-content {
        flex-grow: 1;
        padding: 1rem;
    }

    .tab-content-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tab-content-image {
        display: none; /* Hide image on mobile */
    }

    .tab-content-text {
        font-size: 14px; /* Adjust text size */
    }
}