/*
Theme Name: MyChild
Theme URI: 
Author: Jon Olsson
Author URI: https://jonolsson.se
Description: A FSE theme for MyChild.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: frost
Text Domain: MyChild
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/

/* Main Layout
--------------------------------------------- */

/* Remove default BlockGap */
.entry-content > .wp-block-cover, .entry-content > .wp-block-group {
    margin-top: 0px !important;
}

.entry-content > .wp-block-cover {
    min-height: 500px !important;
    padding-top: 70px !important;
}

@media only screen and (max-width: 800px) {
    .entry-content > .wp-block-cover {
        min-height: 300px !important;
        padding-top: 200px !important;
    }
}

/* Height classes
--------------------------------------------- */

.mychild-height-200 {
    min-height: 200px !important;
}

.mychild-height-250 {
    min-height: 250px !important;
}

.mychild-height-300 {
    min-height: 300px !important;
}

.mychild-height-350 {
    min-height: 350px !important;
}

.mychild-height-400 {
    min-height: 400px !important;
}

.mychild-height-500 {
    min-height: 500px !important;
}

.mychild-height-600 {
    min-height: 500px !important;
}


/* CTA Design
--------------------------------------------- */

.mychild-text-shadow {
    text-shadow: 2px 2px 5px #000000;
}

.mychild-box-shadow {
    box-shadow: 2px 2px 5px #e1e1e1;
}

.mychild-box-shadow-dark {
    box-shadow: 2px 2px 5px #2F3C40;
}

.wp-block-image.mychild-filter-black, .wp-block-image.mychild-filter-black-light {
    background-color: #2F3C40;
    border-radius: 5px;
}

.wp-block-image.mychild-filter-black img {
    opacity: 0.7;
}

.wp-block-image.mychild-filter-black-light img {
    opacity: 0.9;
}

/* Puffar
--------------------------------------------- */

.wp-block-columns.mychild-puffar .wp-block-column a:hover {
    opacity: 0.8;
}


/* Navigation Menu
--------------------------------------------- */

@media only screen and (min-width: 100px) {
    /* Use this instead to remove scrolling opacity on navigation menu

    .wp-site-blocks .site-header {
        position: sticky;
        top: 0px;
        left: 0px;
        right: 0px;
        background: white;
        z-index: 99;
    }
    */

    /* Header group row: middle or bottom : set in header template*/

    .home .site-header {
        /* background-color: var(--wp--preset--color--base); 
        opacity: 0.6; */
        background-color: #00000099;
    }

    .site-header {
        background-color: var(--wp--preset--color--contrast); 
        opacity: 1;
        left: 0;
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .site-header .wp-block-navigation a, .site-header .wp-block-search {
        padding: 20px 5px 20px 5px !important;
    }


   .site-header.scroll {
        background-color: var(--wp--preset--color--contrast); 
        opacity: 1;
    }

    .site-header.scroll .wp-block-site-logo img {
        max-width: 80%;
    }

    .site-header.scroll,
    .site-header.scroll .wp-block-site-logo img {
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    /* Shrink padding when scrolling */
    .site-header.scroll .wp-block-navigation a, .site-header.scroll .wp-block-search {
        padding: 10px 5px 10px 5px !important;
    }

    .site-header.scroll .wp-block-navigation__submenu-icon {
        padding-bottom: 10px !important; 
    }
}


@media only screen and (min-width: 100px) {
    .wp-block-search__input {
        padding: 0px 12px !important;
    }

    /* Version 1 - bg 
    .wp-block-navigation .wp-block-navigation-item:not(.has-child) a:hover,
    .wp-block-navigation .current-menu-item a {
        border-radius: 5px 5px 0px 0px;
        color: var(--wp--preset--color--base) !important;
        background: var(--wp--preset--color--contrast) !important;
    }

    .wp-block-navigation .wp-block-navigation-item a:hover {
        border-radius: 5px 5px 0px 0px;
        color: var(--wp--preset--color--contrast) !important;
        background: var(--wp--preset--color--neutral) !important;
    }

    .wp-block-navigation a {
        padding: 10px 8px 10px 8px;
        border-bottom: 2px solid transparent;
    }

    .wp-block-search {
        padding: 10px 8px 10px 8px !important; 
    }
    
    .wp-block-navigation__submenu-icon {
        padding-bottom: 10px !important; 
    }
    */

    /* Version 2 - underline */
    .wp-block-navigation .wp-block-navigation-item:not(.has-child) a:hover,
    .wp-block-navigation .current-menu-item a {
        color: var(--wp--preset--color--base) !important;
        background: var(--wp--preset--color--contrast) !important;
        border-color: var(--wp--preset--color--base);
        border-bottom: 2px solid;
    }

    .wp-block-navigation .wp-block-navigation-item a:hover {
        color: var(--wp--preset--color--base) !important;
        background: var(--wp--preset--color--contrast) !important;
        border-color: var(--wp--preset--color--base);
        border-bottom: 2px solid transparent;
    }

    .wp-block-navigation a {
        color: var(--wp--preset--color--base) !important;
        padding: 20px 5px 20px 5px;
        border-bottom: 2px solid transparent;
    }

    .site-header .wp-block-button a {
        color: var(--wp--preset--color--base) !important;
        padding: 3px 5px 3px 5px !important;
        border-color: var(--wp--preset--color--base) !important;
        border-width: 2px !important;
        border-radius: 10px !important;
        white-space: nowrap;
    }

    .wp-block-search {
        padding: 20px 5px 20px 5px !important; 
    }
    
    .wp-block-navigation__submenu-icon {
        color: var(--wp--preset--color--base) !important;
        padding-bottom: 15px !important; 
    }
    

    /* Design current page for submenu items */
    .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
        background-color: var(--wp--preset--color--contrast) !important;
        color: var(--wp--preset--color--base) !important;
        padding: 0px !important;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
        color: var(--wp--preset--color--base) !important;
        background: var(--wp--preset--color--contrast) !important;
        padding: 10px 15px !important;
        border: 0px;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
        background: var(--wp--preset--color--base);
        opacity: 0.2;
        border: 0px;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
    .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item a {
        font-weight: bold !important;
    }
}

/* Mobile Navigation
--------------------------------------------- */
@media only screen and (max-width: 600px) {
    .home .site-header:has(.is-menu-open) {
        /* background-color: var(--wp--preset--color--base); 
        opacity: 1; */
        background-color: #000000dd;
    }

    .wp-block-site-logo img {
        height: auto;
        padding: 10px !important;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
        background-color:  #00000099  !important;
        color: var(--wp--preset--color--contrast);
        padding: 40px 20px !important;
        font-size: var(--wp--preset--font-size--medium);
        font-weight: 600;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        background-color: var(--wp--preset--color--secondary) !important;
        padding: 20px !important;
        border-radius: 10px;
    }

    .wp-block-navigation__responsive-container-open {
        color: var(--wp--preset--color--primary) !important;
        background-color: var(--wp--preset--color--base);
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container ul {
        gap: 10px !important;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container a {
        color: var(--wp--preset--color--contrast) !important;
        background-color: var(--wp--preset--color--secondary) !important;
        font-size: var(--wp--preset--font-size--large);
        padding: 0px !important;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container .current-menu-item a {
        color: var(--wp--preset--color--contrast) !important;
        background-color: var(--wp--preset--color--secondary) !important;
    }

    /* Design current page for submenu items */
    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        padding: 20px 10px !important;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container a {
        color: var(--wp--preset--color--contrast) !important;
        background-color: var(--wp--preset--color--secondary) !important;
        font-size: var(--wp--preset--font-size--medium);
        padding: 0px !important;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .current-menu-item a {
        color: var(--wp--preset--color--contrast) !important;
        background-color: var(--wp--preset--color--secondary) !important;
    }
    
    .wp-block-navigation__responsive-container-close {
        top: 10px;
        right: 10px;
    }

    .site-header.scroll .wp-block-group .mysearch {
        display: none; 
    }
}

/* Query Loop
--------------------------------------------- */

.wp-block-query .wp-block-group {
    overflow: hidden;
}

/* ALigning different kind of query boxes in height */
.mychild-height {
    height: 400px;
}

.mychild-featureImg-height {
    min-height: 400px;
}

@media only screen and (max-width: 800px) {
    .mychild-featureImg-height {
       min-height: 200px;
    }
}

/* Links
--------------------------------------------- */
/*
a {
    text-decoration: none;
}

.mychild-link-white a, .conexus-link-white a:visited {
    color:#fff !important;
}

.mychild-link-white a:hover {
    color:#c1c1c1 !important;
}
*/

/* Extras
--------------------------------------------- */

@media (max-width: 800px) {
    .mychild-reverse-mobile {
        flex-direction: column-reverse;
    }
}

.mychild-image-width {
    width: 150px;
}

/* Zeroing the media-text block */
.wp-block-media-text .wp-block-media-text__content {
    padding: 0;
}

.wp-block-group li:nth-child(2n+1) .mychild-profil {
    background-color: #fff !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #ddd !important;
    border-radius: 10px !important;
}

.page {
    background-attachment: fixed;
}

.mychild-parallax-grey {
    background-color: #1c2126ab;
}

.mychild-parallax-darkgrey {
    background-color: #0f1015;
}

.mychild-parallax-black {
    background-color: #000000ab;
}


.wp-block-table.prislista tr:nth-child(2) td:first-child {
    background-color: var(--wp--preset--color--custom-grundskolan);
}

.wp-block-table.prislista tr:nth-child(3) td:first-child {
    background-color: var(--wp--preset--color--custom-ovrig);
}

.wp-block-table.prislista tr:nth-child(4) td:first-child {
    background-color: var(--wp--preset--color--custom-foretag);
}

.wp-block-table.loops tr:first-child {
    background-color: var(--wp--preset--color--primary);
}

/* Inspiration boxes */

.featured-image-with-text-base {
    position: relative;
}

.grundskolan .featured-image-with-text {
    position: absolute;
    background-color: var(--wp--preset--color--custom-grundskolan);
    padding: 10px 5px;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: 10;
}

.utbildning .featured-image-with-text {
    position: absolute;
    background-color: var(--wp--preset--color--custom-ovrig);
    padding: 10px 5px;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: 10;
}

.foretag .featured-image-with-text {
    position: absolute;
    background-color: var(--wp--preset--color--custom-foretag);
    padding: 10px 5px;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: 10;
}

/* Change all button background color */
.wp-block-button a:hover {
    color: var(--wp--preset--color--base) !important;
	background-color: var(--wp--preset--color--primary) !important;
}

/* Make categoreis links inactive */
.mychild-disable-link a{
    pointer-events: none;
    cursor: default;
}