/*
Theme Name: Frost Superette
Theme URI: https://desuperette.nl/
Description: Custom child theme based on Frost.
Author: Olav
Template: frost
Version: 1.0.0
Text Domain: frost-superette
*/

/* Your custom CSS goes below */

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--bold) !important;
}

@media (max-width: 350px) {
    .wp-block-site-logo {
        max-width: 67%;
    }
}


/* wp-block-columns */

@media (max-width: 781px) {
    .wp-block-columns {
        flex-wrap: wrap!important;
    }
}

.wp-block-columns {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
}

.wp-block-columns {
    align-items: normal !important;
}

:where(.wp-block-columns) {
    margin-bottom: 1.75em;
}

@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Leaflet */

.leaflet-map.leaflet-container {
    border-radius: 5px;
}

/* TeX Gyre Heros */
@font-face {
    font-family: "TeX Gyre Heros";
    src: url("./assets/fonts/texgyreheros-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TeX Gyre Heros";
    src: url("./assets/fonts/texgyreheros-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Main background */
body {
    background-color: rgba(254, 222, 227, 0.4);
    color: #000;
    font-family: "TeX Gyre Heros", Arial, sans-serif;
}

/* Semi-transparent pink sections */
.background-pink-transparent {
    background-color: rgba(254, 222, 227, 0.4);
}

/* h3: navitems frontpage */
nav-item-frontpage {
    color: rgba(240, 176, 186, 0.8);
    text-transform: uppercase;
    font-weight: 700;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: black;
}

/* H1: uppercase white text with black outline */
h1,
.wp-block-heading:is(h1) {
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    h1,
    .wp-block-heading:is(h1) {
        font-size: 2.8em;
    }
}


/* H2: bold black */
h2,
.wp-block-heading:is(h2) {
    color: #000;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -2px;
}

h1.looks-like-sub, .wp-block-heading:is(h1).looks-like-sub {
    font-size: var(--wp--preset--font-size--heading-2) !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -2px !important;
}

/* H3: smaller bold black */
h3,
.wp-block-heading:is(h3) {
    color: #000;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -1px;
}

/* Normal text: no forced capitalization */
p,
li {
    text-transform: none;
}

/* Mobile menu overlay */
@media (max-width: 767px) {

    /* Full-screen overlay */
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: #fedee3 !important;
    }

    /* Main menu list */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        width: 100%;
    }

    /* List items */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
        width: auto !important;
        text-align: right !important;
        align-items: flex-end !important;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item > a {
        display: block;
        font-size: 1.67em;
        padding: 5px 15px;
        border-radius: 100px;
        text-transform: uppercase !important;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.current-menu-item > a {
        background-color: black;
        color: rgba(254, 222, 227, 1) !important;
        padding: 5px 15px 7px 15px;
    }
    
}

@media (min-width: 600px) {
    a.wp-block-navigation-item__content {
        border: 2px solid black;
        padding: 5px 15px 7px 15px;
        border-radius: 100px;
    }
    
    a.wp-block-navigation-item__content:hover {
        background: black;
        color: white !important;
    }
    
    .wp-block-navigation-item.current-menu-item >  a.wp-block-navigation-item__content {
        background: black;
        color: white !important;        
    }
    
    .wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-dialog {
        gap: 10px !important;
    }
    
}

@media (max-width: 600px) {
    .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
        padding-top: calc(3rem + 24px) !important;
    }
}

@media (min-width: 600px) {
    .mobile-menu-only {
        display: none !important;
    }
}

/* Logo Hover */

.custom-logo-link:hover > img {
    filter: grayscale(100%) brightness(0);
}

/* button hover */

.wp-block-button.is-style-outline > a:hover {
    background: black !important;
    color: white !important;
}

/* soup image frontpage */

.soup-image > figure > img {
    border-radius: 8px;
}

/* souperette block image content */

@media (max-width: 600px) {
    .wp-block-media-text__content{
        padding: 0 0% !important;
    }
    
    .wp-block-media-text__content > h3 {
        font-size: var(--wp--preset--font-size--heading-2);
        margin-block-start: var(--wp--custom--spacing--gap);
    }
}

/* Image caption padding right */

.wp-element-caption {
    padding-right: 8px;
}

/* Footer */
.wp-block-template-part:has(footer),
footer,
.wp-block-group.has-footer-background-color {
    background-color: rgb(51, 51, 51);
    color: #fff;
}

footer a {
    color: #fff;
}

.footer-nav,
.footer-nav * {
    text-decoration: none !important;
}

.footer-nav *:hover {
    color: rgba(254, 222, 227, 1);
}

@media (max-width: 525px) {
    footer * p {
        text-align: left !important;
        justify-content: left !important;
    }
}

/* footer logo swap */

@media (max-width: 525px) {
    .footer-hidden-mobile {
        display: none;
    }
}

@media (min-width: 525.1px) {
    .footer-hidden-desktop {
        display: none;
    }
}