/*
Theme Name: Storefront Child
Theme URI: https://dindomän.se/
Description: Child tema för Storefront
Author: Ditt namn
Template: storefront
Version: 1.0.0
*/

/***** GENERAL STYLES *****/
:root {
    /*primary colors*/
 	--darkGreen: #283d1c;
    --darkGreen20: rgba(40, 61, 28, 0.2);
	--lightGreen: #5a8e2b;
	--beige: #f2dca5; 
	/*secondary colors*/
	--lime: #c1d221;
	--grey: #9d9d9c;
    --grey10: rgba(157, 157, 156, 0.1);
	--black: #000000;
    --black60: rgba(0, 0, 0, 0.6);
	/*fonts*/
	--titleFont: "Bakbak One", sans-serif;
    --textFont: "Open Sans", sans-serif;
}
.visible-mobile {
        display: none !important;
}
html {
	scroll-behavior: smooth;
}
body {
    font-family: var(--textFont) !important;
    background-color: #ffffff;
}
input {
    font-family: var(--textFont) !important;
    color: var(--black) !important;
}
input::-webkit-input-placeholder {
  	font-family: var(--textFont) !important;
    color: var(--black) !important;
}
input::-moz-placeholder {
  	font-family: var(--textFont) !important;
    color: var(--black) !important;
}
input:focus,
textarea:focus {
    background-color: transparent !important;
    outline: none !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--titleFont);
    color: #000000 !important;
}
a {
    outline: none !important
}
.col-full {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0px 30px !important;
}
.col-full-container {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0px 30px !important;
}
.col-full-container-small {
    max-width: 1020px !important;
    margin: 0 auto !important;
    padding: 0px 30px !important;
}
.right-sidebar .content-area {
    float: right !important;
    margin-right: 0px !important;
}
.right-sidebar .widget-area {
    float: left !important;
    margin-right: 4.347826087% !important;
}
.search-results .content-area {
    width: 100% !important;
}
/* Remove Gutenberg margin bottom on columns */
.wp-block-columns, .wp-block-column {
    margin-bottom: 0px !important;
}
:where(.wp-block-group.has-background) {
    padding: 0px !important;
}
.yoast-breadcrumbs {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 30px 30px 40px 30px !important;
    font-size: 14px !important;
}
.yoast-breadcrumbs span {
    padding-right: 5px;
}
.yoast-breadcrumbs a {
    color: var(--grey);
}

/* Start page styles */
.startpage-banner-grid .wp-block-column {
    margin-right: 0px !important;
    padding-right: 0px !important;
}
.text-image-block-text-left,
.text-image-block-text-right {
    padding: 0px;
    gap: 0px;
}
.text-image-block-text-left .wp-block-column,
.text-image-block-text-right .wp-block-column {
    margin-right: 0px !important;
}
.text-image-block-text-left .wp-block-group {
    padding: 0px 60px 0px 0px;
}
.text-image-block-text-right .wp-block-group {
    padding: 0px 0px 0px 60px;
}
/* Contact form */
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
    border: 1px solid var(--grey) !important;
    background-color: transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    color: #000000 !important;
    font-family: var(--textFont) !important;
    width: 100% !important;
}
.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
    color: #000000 !important;
}
.contact-form input::-moz-placeholder,
.contact-form textarea::-moz-placeholder {
    color: #000000 !important;
}
.contact-form input[type=submit] {
    background-color: var(--lightGreen) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    width: 100% !important;
    font-weight: 400 !important;
}
/* Accordions */
.schema-faq-section {
	border: 1px solid var(--grey);
    padding: 15px 30px 0px 30px;
    cursor: pointer;
    margin-top: -1px;
}
.schema-faq .schema-faq-question {
	font-weight: 600;
	font-size: 24px;
}
.schema-faq .schema-faq-question::after {
	content: '\002B';
  	float: right;
	font-weight: 300;
    font-size: 40px; 
    margin-top: -10px; 
}
.schema-faq .schema-faq-section.active .schema-faq-question::after {
  	content: "\2212";
}
.schema-faq .active, .schema-faq-question:focus {
	outline: none; 
}
.schema-faq .schema-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	font-size: 14px;
}
@media only screen and (max-width: 992px) {
    #secondary {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 100vh;
        background-color: #ffffff;
        z-index: 999;
        padding: 20px;
        box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1);
    }
    .right-sidebar .content-area {
        float: none !important;
    }
    .right-sidebar .widget-area {
        float: none !important;
        margin-right: unset !important;
    }
    .wpc-custom-selected-terms {
        display: block !important;
    }
}
@media only screen and (max-width: 767px) {
    h1 {
        font-size: 20px !important;
    }
    .col-full {
        padding: 0px 15px !important;
    }
    
    /* Start page styles */
    .text-image-block-text-right .text {
        order: 1;
    }
    .text-image-block-text-right .image {
        order: 2;
    }
    .text-image-block-text-left .wp-block-group,
    .text-image-block-text-right .wp-block-group {
        padding: unset; 
        padding-top: 30px; 
        padding-bottom: 30px; 
    }
    .text-image-block-text-left .wp-block-cover,
    .text-image-block-text-right .wp-block-cover {
        min-height: unset !important;
    }
    .schema-faq .schema-faq-question {
        font-size: 16px;
    }
    .schema-faq .schema-faq-question::after {
        font-size: 30px;
    }
    .hidden-mobile {
        display: none !important;
    }
    .visible-mobile {
        display: block !important;
    }
}