/**
 * Theme Name: MyJLC klaro
 * Template: klaro
 * Version: 0.0.7
 */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
.quicksand-300 {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

:root {
  	--font-base: "Quicksand", sans-serif;
	--color-bg-secondary: #eef1f3;
	--color-border: #b84f7a;
	--color-interactive: #ffd57e;
	--color-accent: #b84f7a;
	--color-border-panel: #f7e3b8;
	--color-bgr-global: #fdd9dd;
}

.klaro-high-contrast {
	--color-interactive: #1A1A1A;
	--color-accent: #fdd9dd;
	--color-border-panel: #000;
	--color-bgr-global: #1A1A1A;
}

.klaro-monochrome {
	--color-interactive: #fff;
	--color-accent: #000;
	--color-border-panel: #fff;
	--color-bgr-global: #fff;
}

.skip-link {
	top: -5rem;
}

body {
	background-color: var(--color-bgr-global);
}

body.post,
body.page {
	margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.site-header,
.site-main,
.site-main::before {
    background-color: var(--color-background);
	/* border: 0 solid var(--color-border-panel);
    border-width: 0 6px 0 6px; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	max-width: 1200px;
    margin: 0 auto;
    width: 100%;
	position: relative;
}

.site-main {
    /* border-bottom-width: 6px; */
	border-radius: 0 0 6px 6px;
}

.site-main::before {	/* to make seamless shadow */
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    height: 10px;
	left: 0;
    /* left: -6px; */
	box-shadow: none;
}

/* Header */

.site-title {
    position: relative;
	line-height: 1;
	background: var(--color-interactive);
    border-radius: 6px;
}

.site-title a {
	color: transparent;
    z-index: 10;
    position: relative;

    font-size: 1rem;
    padding: 0.1em 1em;
    min-height: var(--touch-target-min);
    line-height: var(--line-height-base);
    display: flex;
    width: 9.2rem;
    align-items: center;
}

.site-title::before {
    content: "";
    background: url('myjlc-head.png') no-repeat center;
    display: block;
    width: 10.5rem;
    height: 6rem;
    background-size: contain;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    margin-top: 5px;
	z-index: 1;
}

@media (max-width: 768px) {
	.site-branding {
		width: 100%
	}

	.site-title {
		background: transparent;
	}

    .site-title::before {
    	width: 7.35rem;
    	height: 4.2rem;
		margin: 0 auto;
    }
}

.site-description {
	display: none;
}

.klaro-accessibility-toggle {
	padding: 0.4rem 0.65rem;
}

.klaro-accessibility-label {
	display: none;
}

@media (max-width: 768px) {
    .klaro-accessibility-label {
		display: block;
	}
}


/* Menu */

.main-navigation {
	margin-bottom: 0;
    margin-top: calc(-1 * (var(--spacing-lg) + Max(2.3rem, var(--touch-target-min))));
    margin-left: 9.45rem;
    margin-right: 2.5rem;
}

.klaro-large-text .main-navigation,
.klaro-medium-text .main-navigation {
	margin-top: calc(-1 * (var(--spacing-lg) + Max(2.2rem, var(--touch-target-min))));
}

.klaro-maximum-text .main-navigation {
	margin-top: calc(-1 * (var(--spacing-lg) + Max(2.4rem, var(--touch-target-min))));
}

@media (max-width: 768px) {
    .main-navigation {
    	margin-top: 0;
    	margin-left: 0;
    }

    .main-navigation a {
        justify-content: center;
    }

	.main-navigation .sub-menu {
		width: 80%;
    	margin: 0 10%;
	}
}

.main-navigation a,
.main-navigation .sub-menu,
.main-navigation .sub-menu a {
	border-radius: 6px;
	background: var(--color-interactive);
    border-width: 0;
}

.main-navigation .sub-menu {
	border-radius: 9px;
}

.klaro-high-contrast .main-navigation a,
.klaro-high-contrast .main-navigation .sub-menu,
.klaro-high-contrast .main-navigation .sub-menu a,
.klaro-monochrome .main-navigation a,
.klaro-monochrome .main-navigation .sub-menu,
.klaro-monochrome .main-navigation .sub-menu a {
	border-width: 2px;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	background: var(--color-accent);
}

/* Content */

.entry-title {
	color: var(--color-accent);
}

/* Breadcrumbs */

.breadcrumbs {
    padding: 0;
    background: transparent;
    border: none;
}

/* FAQ */

.qe-faqs-filters-container li a {
    border-bottom: none;
}

.qe-faq-toggle .qe-toggle-title {
	background-color: var(--color-bg-secondary);
	color: var(--color-link);
	border-radius: 2rem;
}

.qe-faq-toggle.active .qe-toggle-title,
.qe-faq-toggle .qe-toggle-title:hover {
	background-color:  var(--color-interactive);
}

.qe-faq-toggle .qe-toggle-title h4 {
    color: inherit;
    font-weight: 600;
}

.qe-faq-toggle .qe-toggle-content {
	border: none;
}

/* Play button */

a.play-button {
    background: var(--color-accent);
    color: var(--color-interactive);
	display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 2rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	font-size: 1.25rem;
}

/* Patreon button */

.patreon-responsive-button-wrapper {
	border-radius: 6px;
}