/*
 Theme Name:   LMPR (GeneratePress Child Theme)
 Theme URI:    https://lamper-design.nl
 Description:  GeneratePress child theme
 Author:       Team Lamper Design
 Author URI:   https://lamper-design.nl
 Template:     generatepress
 Version:      0.1
*/

@font-face {
	font-display: swap;
	font-family: "DM Serif Text";
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/dm-serif-text-v13-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/instrument-sans-v4-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 600;
	src: url('assets/fonts/instrument-sans-v4-latin-600.woff2') format('woff2');
}

/* Globals */

:root {
    --site-width: 1360px;
    --narrow-container: 75ch;
    --site-padding-inline: 1.25rem;
    --border-radius-small: .25rem;
    --border-radius-medium: .5rem;
    --border-radius-large: 1rem;
    --heading-h1: clamp(2.875rem, 2rem + 3.5vw, 4.625rem);
    --heading-h2: clamp(2rem, 1.5625rem + 1.75vw, 2.875rem);
    --heading-h3: clamp(1.75rem, 1.625rem + 0.5vw, 2rem);
    --heading-h4: clamp(1.375rem, 1.1875rem + 0.75vw, 1.75rem);
    --heading-h5: 1.375rem;
    --heading-h6: 1.25rem;
    --text-body: clamp(1rem, 0.8255rem + 0.363vw, 1.125rem);
    --spacing-l: clamp(3.5rem, 0.75rem + 11vw, 9rem);
    --spacing-m: clamp(2.5rem, 1.75rem + 3vw, 4rem);
    --spacing-s: 2.5rem;
    --spacing-xs: 2rem;
    --spacing-xxs: 1.5rem;
    interpolate-size: allow-keywords;
}

@media (width >= 769px) {

    :root {
        --site-padding-inline: 2.5rem;
    }

}

/* ::selection {
    color: var(--text-base);
    background-color: var(--accent);
} */

html,
body {
    overflow-x: clip;
}

html.mobile-menu-open.slide-opened, 
html:has(.facetwp-flyout.active) {
    overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {

    html {
        scroll-behavior: smooth;
    }

    /* @view-transition {
        navigation: auto;
    } */

}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    text-wrap: balance;
}

p,
li:not(.comment),
figcaption {
    text-wrap: pretty;
    max-width: var(--narrow-container);
}

a {
    text-underline-offset: .25em;
    color: inherit;
}

ul, ol {
	margin-left: 1.5em;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--accent);
}

a:not([href]) {
    cursor: pointer;
}

ul.wp-block-list {
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px
}

ul.wp-block-list li {
    position: relative;
    padding-left: 1.5rem
}

ul.wp-block-list li::before {
    content: '';
    width: 3px;
    height: 3px;
    background-color: var(--text-base);
    position: absolute;
    left: .5rem;
    top: .75rem
}

.container-padding {
    padding-inline: var(--container-padding);
}

.entry-content p+:is(h2,h3,h4) {
    margin-top: .75em;
}

.entry-content > figure:not(.wp-block-gallery) img {
    margin-bottom: 1.5rem;
}

.wp-block-gallery {
    margin-block: 1.25rem;
}

.wp-block-gallery img {
    transition: opacity 250ms ease-in-out;
}

.wp-block-gallery img:hover {
    opacity: .8;
}

.wp-lightbox-overlay .wp-lightbox-close-text {
    color: var(--text-base);
}

.entry-content ol li::marker {
    font-weight: 600;
}

.entry-content .wp-block-embed {
    margin-block: 1.5em;
}

.gb-container p:last-child:last-of-type {
    margin-bottom: 0;
}

figcaption {
	margin-top: .375rem;
	font-weight: 500;
    text-align: center;
}

.scroll-offset,
[id] {
    scroll-margin-top: 2rem;
}

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
}

.line-clamp-7 {
    -webkit-line-clamp: 7;
}

/* Details/summary element */

details {
    max-width: var(--narrow-container);
    overflow: hidden;
    border-bottom: 1px solid var(--accent-alt);
}

details::details-content {
    height: 0;
    transition: 
        height 250ms,
        content-visibility 250ms;
    transition-behavior: allow-discrete;
}

details[open]::details-content {
    height: auto;
    margin-bottom: 1.5rem;
}

details summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    gap: 1.25rem;
    padding-block: 1rem;
    font-weight: 600;
}

details summary:is(:hover, :focus-visible) {
    text-decoration: underline;
    text-underline-offset: .25em;
}

@media (width >= 769px) {

    details summary {
        padding-block: 1.25rem;
    }

}

details summary::-webkit-details-marker { /* safari / ios */
    display: none !important;
}

details summary::after {
    content: ''; 
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("assets/images/plus-regular.svg");    
    background-repeat: no-repeat;
    flex-shrink: 0;
    position: relative;
    top: .125rem;
}

details[open] > summary:after {
    background-image: url("assets/images/minus-regular.svg");   
}

details p:last-child {
    margin-bottom: 0;
}

/* Pages */ 

.page .entry-content {
    margin-bottom: var(--spacing-l);
}

/* Single B&B */

.wp-block-gallery.verblijf-image-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.wp-block-gallery.verblijf-image-gallery .wp-block-image {
    width: auto !important;
}

.wp-block-gallery.verblijf-image-gallery .lightbox-trigger {
    top: .5rem !important;
    right: .5rem !important;
}

/* Rank math breadcrumbs */
.rank-math-breadcrumb p {
    margin: 0;
}

.rank-math-breadcrumb .separator {
    margin: 0 .375rem;
}

/* Gravityforms */

.gform_wrapper .gform_body .gform_fields :is(input:not([type="submit"],[type="checkbox"],[type="radio"]),textarea) {
    padding: .75rem;
    border-radius: var(--border-radius-small);
}

.bg-accent  .gform_wrapper .gform_body .gform_fields :is(input:not([type="submit"],[type="checkbox"],[type="radio"]),textarea) {
    border: none;
}

.bg-accent .gfield_required .gfield_required_text {
    color: var(--text-light);
}

.bg-accent input[type="submit"] {
    border: 1px solid var(--text-light);
    border-radius: var(--border-radius-small);
    transition: 
        color 0.1s ease-in-out 0s, 
        background-color 0.1s ease-in-out 0s, 
        border-color 0.1s ease-in-out 0s;
}

.bg-accent input[type="submit"]:is(:hover, :focus-visible) {
    border-color: var(--accent-hover);
    text-underline-offset: .25em;
    text-decoration: underline;
}

.bg-accent .ui-datepicker-trigger {
    border-radius: 0;
    filter: brightness(100);
}