/*
 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 Sans";
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/dm-sans-v17-latin-700.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: "Sofia Sans Extra Condensed";
	font-style: normal;
	font-weight: 800;
	src: url('assets/fonts/sofia-sans-extra-condensed-v6-latin-800.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: "Sofia Sans Extra Condensed";
	font-style: italic;
	font-weight: 800;
	src: url('assets/fonts/sofia-sans-extra-condensed-v6-latin-800italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: "Sofia Sans Extra Condensed";
	font-style: italic;
	font-weight: 900;
	src: url('assets/fonts/sofia-sans-extra-condensed-v6-latin-900italic.woff2') format('woff2');
}

/* Globals */

:root {
    --site-width: 1424px;
    --narrow-container: 920px;
    --site-padding-inline: 1rem;
    --border-radius-small: .125rem;
    --border-radius-medium: .25rem;
    --heading-xl: clamp(4rem, 2.6957rem + 5.2174vw, 7rem);
    --heading-h1: clamp(3rem, 1.6957rem + 5.2174vw, 6rem);
    --heading-h2: clamp(2.5rem, 1.75rem + 3vw, 4rem);
    --heading-h3: 2rem;
    --heading-h4: 1.5rem;
    --heading-h5: 1.25rem;
    --heading-h6: 1.25rem;
    --text-xl: clamp(1.25rem, 0.9011rem + 0.726vw, 1.5rem);
    --text-l: clamp(1.125rem, 0.9505rem + 0.363vw, 1.25rem);
    --text-body: clamp(1rem, 0.8255rem + 0.363vw, 1.125rem);
    --text-s: 1rem;
    --text-xs: .875rem;
    --spacing-xxl: clamp(4rem, 2.4375rem + 6.25vw, 8rem);
    --spacing-xl: clamp(3rem, 1.0469rem + 7.8125vw, 8rem);
    --spacing-l: clamp(3rem, 2.2188rem + 3.125vw, 5rem);
    --spacing-m: clamp(3rem, 2.6094rem + 1.5625vw, 4rem);
    --spacing-s: 3rem;
    --spacing-xs: 2rem;
    --spacing-xxs: 1.5rem;
    interpolate-size: allow-keywords;
}

@media (width >= 769px) {

    :root {
        --site-padding-inline: 3.25rem;
        --body-size: 1.125rem;
    }

}

html {
    overflow-x: clip;
    scrollbar-gutter: stable; /* fix for full width containers and margins */
    accent-color: var(--bg-accent-dark);
}

html.mobile-menu-open.slide-opened {
    overflow: clip;
}

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

    html {
        scroll-behavior: smooth;
    }

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

}

body {
    --body-margin: .25rem;
    margin: var(--body-margin);
    @media (width > 768px) {
        --body-margin: .5rem;
    }
}

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


p,
li:not(.comment),
figcaption {
    text-wrap: pretty;
    max-width: 85ch;
}

a {
    text-underline-offset: .125em;
}

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

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

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

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

.entry-content :is(p,ul)+:is(h2,h3,h4),
.dynamic-entry-content :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-embed .is-type-video {
    margin-block: 1.5rem;
}

.wp-block-embed iframe {
    border-radius: var(--border-radius);
}

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

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

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

blockquote p::before {
    content: "\201C";
}

blockquote p::after {
    content: "\201D";
}

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

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

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

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

.isolate, 
.btn {
    isolation: isolate;
}

ul.wp-block-list {
    --bullet-size: .5em;
    list-style-type: none;
    margin: 1em 0;
    display: grid;
    row-gap: var(--bullet-size);
}

ul.wp-block-list li {
    position: relative;
    padding-left: calc(var(--bullet-size) * 2);
}

ul.wp-block-list li::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--bullet-size) - 1px);
    left: 0;
    width: var(--bullet-size);
    height: var(--bullet-size);
    background-color: var(--bg-accent);
    border-radius: var(--border-radius-small);
}

hr.wp-block-separator {
    border: none;
    background-color: var(--bg-light);
}

/* Details/summary element */

details {
    overflow: hidden;
}

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

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

details summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    cursor: pointer;
    gap: 1.25rem;
    padding-bottom: .75rem;
    font-family: "Sofia Sans Extra Condensed";
    font-size: var(--heading-h4);
    font-weight: 800;
    text-transform: uppercase;
}

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

details summary::after {
    --icon-size: .375em;
    content: ''; 
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: url('assets/images/chevron-down.svg');    
    background-repeat: no-repeat;
    background-size: var(--icon-size);
    background-position: center;
    flex-shrink: 0;
    position: relative;
    top: -.125em;
}

details[open] > summary:after {
    transform: rotate(180deg);  
}

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

/* Overlays */

.gb-overlay.gb-overlay--standard {
    z-index: 9999999999;
}

/* Form fields / Gravity Forms */

.gform_wrapper .gform_body .gform_fields {
    gap: 1.5rem;
}

/* Inputs */

input::placeholder,
textarea::placeholder {
    font-size: var(--text-s);
}

:is(input:not([type="submit"],[type="checkbox"],[type="radio"]), textarea, select):is(:focus,:focus-visible) {
    outline: 2px solid var(--text-accent);
    outline-offset: .125rem;
}

input:not([type="submit"],[type="checkbox"],[type="radio"]), 
textarea, 
select {
    border-bottom: 1px solid var(--bg-accent);
}

input:not([type="submit"],[type="checkbox"],[type="radio"]):is(:focus,:focus-visible), 
textarea:is(:focus,:focus-visible), 
select:is(:focus,:focus-visible) {
    border-color: transparent;
}

.gform_wrapper .gform_body :is(input:not([type="submit"]), textarea, select) {
    padding: .75rem 1rem;
}

.contactformulier :is(input:not([type="submit"]), textarea, select) {
    background-color: var(--bg-soft);
}

/* HTML field */
.gfield--type-html {
    font-size: var(--text-s);
}

/* Textarea */
.gfield textarea {
    display: block;
}

/* checkboxes and radio buttons */

.gfield_checkbox .gchoice,
.gfield_radio .gchoice {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    vertical-align: revert;
    line-height: 1.2;
}

.gfield_checkbox .gfield-choice-input,
.gfield_radio .gfield-choice-input {
    --size: 1rem;
    width: var(--size);
    height: var(--size);
    border: 1px solid var(--bg-accent);
}

.gfield_checkbox .gchoice label.gform-field-label,
.gfield_radio .gchoice label.gform-field-label {
    font-size: var(--text-s);
}

/* Labels */
.gfield_label.gform-field-label {
    line-height: 1.2;
}

/* Required field */
.gfield_label .gfield_required .gfield_required.gfield_required_text {
    color: var(--text-dark);
    font-style: normal;
}

/* Submit button */

input[type="submit"] {
    border-bottom: 1px solid var(--bg-accent);
    padding: .25em 2rem .25em .25rem;
    margin-bottom: 0 !important;
    background-image: url('assets/images/arrow-right-icon__accent.svg');
    background-size: 0.75em;
    background-repeat: no-repeat;
    background-position: calc(100% - .25rem) center;
    background-color: transparent;
    transition: 
        background-image 100ms ease-in-out,
        padding-right 100ms ease-in-out,
        background-color 100ms ease-in-out,
        color 100ms ease-in-out;
    font-weight: 900;

}

input[type="submit"]:is(:hover, :focus-visible) {
    background-image: url('assets/images/arrow-right-icon__dark.svg');
    padding-right: 2.25rem;
}

.gform-footer {
    padding-bottom: 0 !important;
}

/* Menu */

#menu-hoofdmenu .menu-item-has-gb-mega-menu .gb-overlay--anchored.gb-overlay--width-full {
    width: auto; /* ipv 100vw zodat hij niet buiten het scherm valt. */
}

.gb-site-header .gb-overlay__content {
    padding-top: 1rem;
}

@media (width < 1025px) {
    .gb-site-header .gb-overlay--width-full {
        width: 100% !important;
        max-width: 100% !important;
    }

    .gb-site-header .gb-overlay__content {
        padding-top: 0;
    }
}


/* Home */

.home-banner > img {
    -webkit-mask: linear-gradient(
    to bottom,
    transparent,
    black 30%,
    black 70%,
    transparent
    );

    mask: linear-gradient(
    to bottom,
    transparent,
    black 30%,
    black 70%,
    transparent
    );

    -webkit-mask: linear-gradient(
    to bottom,
    transparent,
    black 40%,
    transparent
    );

    mask: linear-gradient(
    to bottom,
    transparent,
    black 40%,
    transparent
    );
}

/* Hero Banner */

.hero-banner:before {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 350px, rgba(0, 0, 0, 0.39) 450px);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: normal;
}

/* Single Post */

.wprm-recipe .post-terms {
    max-width: var(--narrow-container);
}

.wprm-recipe .post-terms h3 {
    margin-bottom: .25em;
}

.post-term-list li {
    margin: 0;
}

/* Single Post - Comment reply form */

.dynamic-entry-content > figure,
.dynamic-entry-content > img {
    margin: 1rem auto;
}

.dynamic-entry-content details {
    --details-border-color: var(--bg-dark);
    padding-inline: 1rem;
    padding-top: 1rem;
    border: 1px solid var(--details-border-color);
    font-size: var(--text-s);
}

.dynamic-entry-content details + details {
    border-top: none;
}

.dynamic-entry-content details:first-of-type {
    margin-top: var(--spacing-m);
    border-top: 1px solid var(--details-border-color);
}

.dynamic-entry-content :is(h2,h3) + details:first-of-type {
    margin-top: var(--spacing-xxs);
}

.dynamic-entry-content details:last-of-type {
    margin-bottom: var(--spacing-m);
    border-bottom: 1px solid var(--details-border-color);
}

@media (width < 769px) {
    .dynamic-entry-content details {
        padding-inline: var(--spacing-xxs);
    }
}

.dynamic-entry-content details summary {
    font-size: 1.75rem;
    line-height: 1.1;
}

.single .comments-area {
    padding-block: var(--spacing-xxl);
}

article.category-bbq-blog + .comments-area {
    border-top: 1px solid var(--bg-light);
}

.comment-respond {
    max-width: 800px;
    margin-inline: auto;
}

.comment-reply-title {
    font-size: var(--heading-h2);
    font-style: italic;
}

.comment-respond .comment-form {
    display: grid;
    column-gap: 1rem;
    @media (width > 768px) {
        grid-template-columns: repeat(2, 1fr);
        & > * {
            grid-column: span 2;
        }
        & :is(.form-field--author, .form-field--email) {
            grid-column: span 1;
        }
    }

    & .form-field--author input, .form-field--email input {
        width: 100%;
    }
}

.comment-respond .comment-form-wprm-rating {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-respond .comment-form-wprm-rating label {
    font-size: var(--text-l);
    font-weight: 400;
}

.comment-respond label {
    /* overrides of screen-reader only styles */
    border: 0;
    clip: revert;
    clip-path: revert;
    height: auto;
    margin: 0;
    overflow: auto;
    padding: 0;
    position: revert !important;
    width: auto;
    /* end of overrides */
    display: block;
    font-size: var(--text-s);
    font-weight: 700;
    margin-bottom: .25rem;
}

.comment-form-description {
    font-size: var(--text-xs);
    margin-block: .375rem 1rem;
}

/* Single post - Related posts */

.related-posts-wrapper .full-width-inner {
    display: grid;
    row-gap: var(--spacing-s);
}

.related-posts__header  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    column-gap: 1.5rem;
}

.related-posts-wrapper__title {
    margin-bottom: 0;
}

.related-post-inner {
    display: flex;
    position: relative;
}

.related-post__image-block {
    order: -1;
    overflow: clip;
}

.related-post__image-block img {
    transition: transform 0.2s ease-in-out 0s;
}

.related-post a {
    text-decoration: none;
}

.related-post a::after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1;
}

.related-post a:is(:hover,:focus) {
    text-decoration: underline;
}

.related-post :has(a:is(:hover,:focus)) .related-post__image-block img {
    transform: scale(1.05);
}

.related-posts__footer-link {
    margin-inline: auto;
}

@media (max-width: 767px) {

    .related-posts-wrapper .full-width-inner {
        row-gap: var(--spacing-xs);
    }

    .related-posts__header {
        justify-content: center;
        text-align: center;
    }


}

/* facetwp */

/* FacetWP - Sorter */
.facetwp-facet-sorter.facetwp-type-sort select {
    font-family: "Sofia Sans Extra Condensed";
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    border: 1px solid var(--bg-accent);
    border-radius: var(--border-radius-medium);
    padding: .5rem 1rem;
}

/* Facetwp - Selections */

.facetwp-selections {
    font-size: var(--text-xs);
}

.facetwp-selections:empty {
    display: none;
}

.facetwp-selections ul,
.facetwp-selections ul li {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}

.facetwp-selections .facetwp-selection-label {
    display: none;
}

.facetwp-selections li .facetwp-selection-value {
    margin: 0;
    padding: .25rem 1.75rem .25rem .675rem;
    border: 1px solid var(--bg-dark);
    border-radius: 2rem;
    background-size: .5rem;
    background-position: calc(100% - .75rem) center;
    line-height: 1.4;
}

.facetwp-selections li .facetwp-selection-value:is(:hover, :focus-visible) {
    text-decoration: underline;
}

.facetwp-reset,
.facetwp-reset:is(:hover, :focus-visible) {
    font-size: var(--text-xs);
    color: var(--text-dark);
}

@media (width < 1025px) {
    .facetwp-selections li .facetwp-selection-value {
        color: var(--text-dark);
        background-color: var(--bg-accent);
    }
}

/* FacetWP - Search */

.facetwp-toggle,
.facetwp-toggle:is(:hover, :focus-visible) {
    font-size: var(--text-xs);
    color: var(--text-dark);
}

.facetwp-facet.facetwp-type-search .facetwp-input-wrap {
    width: 100%;
}

.facetwp-facet.facetwp-type-search .facetwp-search {
    width: 100%;
    background-color: var(--bg-soft);
    border: 1px solid var(--bg-accent);
    border-radius: var(--border-radius-medium);
    padding: .75rem 2rem .75rem 1rem
}

.facetwp-facet.facetwp-type-search .facetwp-search::placeholder {
    font-size: var(--text-xs);
    font-style: italic;
}

.facetwp-facet.facetwp-type-search .facetwp-icon::before {
    width: 2rem;
    background-image: url('assets/images/icon-search.svg');
    background-position: left 50%;
    background-size: 1.5rem;
}

@media (width < 1025px) {
    .facetwp-facet.facetwp-type-search .facetwp-search {
        background-color: rgba(239, 238, 236, 0.05);
    }

    .facetwp-facet.facetwp-type-search .facetwp-search::placeholder {
        color: var(--text-light);
    }
    .facetwp-facet.facetwp-type-search .facetwp-icon::before {
        filter: invert(1);
    }
}

/* FacetWP - Checkboxes */

.facetwp-type-checkboxes {
	padding-left: 1rem;
}

.facetwp-type-checkboxes .facetwp-checkbox {
    --checkbox-size: 1.125em;
	padding-left: 1.75rem;
    margin-bottom: .675rem;
    background: url('assets/images/empty-checkbox.svg') 0 .125em / var(--checkbox-size) no-repeat;
}

.facetwp-type-checkboxes .facetwp-checkbox:hover {
    background-image: url('assets/images/empty-checkbox-highlighted.svg');
}

.facetwp-type-checkboxes .facetwp-checkbox.checked {
    background-image: url('assets/images/filled-checkbox.svg');
}

.facetwp-filter-wrapper details:not(.filter-type):has(.facetwp-facet:empty) {
    display: none;
}

.gb-overlay__content .facetwp-filter-wrapper details summary::after {
    filter: invert();
}

.facetwp-filter-wrapper details[open]::details-content {
    padding-bottom: 0;
}

/* FacetWP - Range slider */

.facetwp-facet.facetwp-type-slider {
    margin-top: 1rem;
}

.facetwp-facet.facetwp-type-slider .facetwp-slider {
    background-color: var(--bg-soft);
    border: none;
    height: 2px;
}

.facetwp-facet.facetwp-type-slider .facetwp-slider .noUi-connect {
    background-color: var(--bg-accent);
}

.facetwp-facet.facetwp-type-slider .facetwp-slider .noUi-handle {
    width: 1rem;
    height: 1rem;
    background-color: var(--bg-accent);
    border: none;
    border-radius: 100vw;
    top: -7px;
    right: -.5rem;
    cursor: pointer;
}

.facetwp-facet.facetwp-type-slider .facetwp-slider-label {
    font-size: var(--text-xs);
}

.facetwp-type-slider .facetwp-slider-reset {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-xs);
    font-weight: 400;
    font-style: normal;
    text-transform: revert;
    color: var(--text-dark);
    background-color: transparent;
    text-decoration: underline;
    margin-top: 1.25rem;
    padding: 0;
    border: none;
    box-shadow: none;
}

.facetwp-type-slider .facetwp-slider-reset:empty {
    display: none;
}

.facetwp-type-slider .facetwp-slider-reset:is(:hover, :focus, :focus-visible) {
    background-color: transparent;
    text-decoration: none;
}

/* Recipe maker */

/* Recipe maker - Instructies */

.wprm-recipe {
    overflow: revert; /* override of overflow: hidden in wprm-recipe */
    margin-top: var(--spacing-m);
    position: relative;
}

.wprm-recipe .stroke-text-wrapper.full-width-outer {
    font-size: var(--heading-h2);
    position: absolute;
    left: var(--body-margin);
    width: calc(100vw - 2px);
    max-width: calc(100vw - 2px);
    left: calc(var(--body-margin) * -1);
    transform: rotate(-2deg);
}

.wprm-recipe .stroke-text-wrapper::before,
.wprm-recipe .stroke-text-wrapper::after {
    content: '';
    width: var(--body-margin);
    height: 100%;
    position: absolute;
    background: var(--bg-soft);
    top: 0;
    z-index: 999;
}

.wprm-recipe .stroke-text-wrapper::before {
    left: -1px;
    rotate: 2deg;
}

.wprm-recipe .stroke-text-wrapper::after {
    right: -2px;
    rotate: 2deg;
}

.wprm-recipe:not(.wprm-recipe-roundup-item) > :first-child {
    top: 1rem;
}

.wprm-recipe:not(.wprm-recipe-roundup-item) > :last-child {
    bottom: 1rem;
}

.wprm-recipe__wrapper {
    padding-block: 12rem;
}

.wprm-recipe__wrapper .full-width-inner {
    display: grid;
    row-gap: var(--spacing-xxs);
}

.wprm-recipe :is(h2, h3) {
    text-transform: uppercase;
}

.wprm-recipe h2 {
    margin-top: 0;
}

.wprm-recipe h3 {
    margin-bottom: 1.5rem;
}

.wprm-recipe h4.wprm-recipe-group-name {
    font-family: "DM Sans", sans-serif;
    font-size: var(--text-s);
    font-weight: 700;
    margin-top: 1.5em !important;
    margin-bottom: 1em;
}

.wprm-recipe__top, .wprm-recipe__header, .wprm-recipe__content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
}

.wprm-recipe__top {
    align-items: center;
}

.wprm-recipe__top-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.wprm-recipe__top-buttons :is(a, button) {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 2rem;
    border: 1px solid var(--bg-accent);
    border-radius: 2rem;
    font-family: 'DM Sans';
    font-size: var(--text-s);
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    line-height: 1;
    transition: border-radius 150ms ease-in-out;
}

.wprm-recipe__top-buttons :is(a, button):is(:hover, :focus-visible) {
    background-color: transparent;
    border-radius: var(--border-radius-small);
    text-decoration: underline;
}

.wprm-recipe__top-buttons :is(a, button):focus {
    background-color: transparent;
}

.wprm-recipe__top-buttons .wprm-recipe-icon img,
.wprm-recipe__top-buttons .wprm-recipe-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.wprm-recipe-image img {
    width: 330px;
    max-width: 100%;
    aspect-ratio: 1.3/1;
    object-fit: cover;
    border-radius: var(--border-radius-small);
    margin: 0;
}

.wprm-prevent-sleep.wprm-toggle-switch-container {
    font-size: var(--text-xs);
    flex-direction: column;
    align-items: flex-start;
    gap: .5em;
}

.wprm-prevent-sleep.wprm-toggle-switch-container .wprm-prevent-sleep-description {
    font-size: var(--text-xs);
    margin-left: 0;
}

.wprm-recipe-summary {
    margin-top: .5rem;
}

.wprm-recipe-times-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .25rem;
    margin-top: 1.5rem;
}

.wprm-recipe-times-container .wprm-recipe-time-container {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .675rem;
    align-items: center;
    background-color: var(--bg-soft);
    padding: .5rem;
    border-radius: var(--border-radius-small);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.wprm-recipe-times-container .wprm-recipe-icon {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.wprm-recipe-times-container .wprm-recipe-details-label {
    grid-column: 2 / 3;
}

.wprm-recipe-times-container .wprm-recipe-time {
    grid-column: 2 / 3;
}

.wprm-recipe-times-container .wprm-recipe-icon img {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.wprm-recipe-details-unit {
    font-size: var(--text-xs);
}

.wprm-recipe__content-left-ingredients,
.wprm-recipe__content-left-equipment,
.wprm-recipe__content-left-nutrition,
.wprm-recipe__content-right-instructions {
    position: relative;
    border-top: 1px solid var(--bg-soft);
}

.wprm-recipe__content-left-ingredients::before,
.wprm-recipe__content-left-equipment::before,
.wprm-recipe__content-left-nutrition::before,
.wprm-recipe__content-right-instructions::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.5rem;
    border-top: 1px solid var(--bg-accent);
}

.wprm-recipe-servings-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    margin-bottom: 1.5rem;
    background-color: var(--bg-soft);
    border-radius: var(--border-radius-small);
    font-size: var(--text-xs);
}

.wprm-recipe-details-label.wprm-recipe-servings-label {
    margin-right: auto;
}

.wprm-recipe-servings-text-buttons-container {
    gap: .75rem;
}

.wprm-recipe-icon.wprm-recipe-servings-icon img {
    flex-shrink: 0;
}

.wprm-recipe-servings-text-buttons-container input[type=text].wprm-recipe-servings {
    background-color: var(--bg-soft);
    border: 1px solid var(--bg-accent) !important;
    border-radius: var(--border-radius-small) !important;
}

.wprm-recipe-servings-unit {
    display: none;
}

.wprm-recipe__content-left-ingredients,
.wprm-recipe__content-left-equipment,
.wprm-recipe__content-left-nutrition {
    padding-inline: var(--spacing-xxs);
}

.wprm-recipe__content-left-ingredients:empty,
.wprm-recipe__content-left-equipment:empty,
.wprm-recipe__content-left-nutrition:empty {
    display: none;
}

.wprm-recipe__content-left-equipment,
.wprm-recipe__content-left-nutrition {
    margin-top: 2rem;
}

.wprm-recipe-ingredients-container,
.wprm-recipe-equipment-container,
.wprm-recipe-nutrition-container {
    font-size: var(--text-s);
}

.wprm-recipe-ingredient-amount,
.wprm-recipe-ingredient-unit {
    font-weight: 700;
}

.wprm-recipe-equipment-name::first-letter {
    font-weight: 700;
}

.wprm-recipe__content-right-instructions {
    max-width: 760px;
}

.wprm-recipe-instructions {
    list-style-type: '';
    counter-reset: step-counter;
}

.wprm-recipe .wprm-recipe-instructions > li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    list-style-type: none !important;
    margin: clamp(2rem, 1rem + 4vw, 4rem) 0 0 0 !important;
    counter-increment: step-counter;
    border-top: 1px solid var(--bg-accent);
}

.wprm-recipe .wprm-recipe-instructions > li::before {
    grid-column: 1/2;
    content: counter(step-counter);
    display: grid;
    place-content: center;
    width: 2em;
    height: 2em;
    background-color: var(--bg-dark);
    font-family: "Sofia Sans Extra Condensed";
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    color: var(--text-light);
    margin-top: -1px; /* zodat hij over de rode border van de li heen valt */
}

.wprm-recipe .wprm-recipe-instruction-text {
    grid-column: 2/3;
    padding-top: 2rem;
}

.wprm-recipe .wprm-recipe-instruction-media {
    grid-column: 2/3;
    margin: 0;
}

.wprm-recipe .wprm-recipe-instruction-media img {
    width: 100%;
    border-radius: var(--border-radius-small);
}

/* wprm - checkboxes */

li:is(.wprm-recipe-ingredient, .wprm-recipe-equipment-item) {
    margin-bottom: .75rem;
}

.wprm-checkbox-container label:before {
    outline-color: var(--bg-accent) !important;
}

.wprm-checkbox-is-checked .wprm-checkbox-container label:before {
    background-color: var(--bg-accent);
}

.wprm-checkbox-is-checked .wprm-checkbox-container label:after {
    top: 6px;
}

/* Recipe roundup item */

.wprm-recipe.wprm-recipe-roundup-item {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-light);
    border-radius: var(--border-radius-medium);
    padding: 1rem;
}

.wprm-recipe.wprm-recipe-roundup-item .wprm-recipe-image img {
    width: 100%;
    aspect-ratio: 1.75/1;
}

.wprm-recipe.wprm-recipe-roundup-item .wprm-summary-container {
    padding: 1.5rem;
}

.wprm-recipe.wprm-recipe-roundup-item .wprm-recipe-name {
    margin: 0;
    font-size: var(--heading-h3);
    line-height: 1.1;
}

.wprm-recipe.wprm-recipe-roundup-item .time-link-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (width < 1025px) {
    .wprm-recipe__top, .wprm-recipe__header, .wprm-recipe__content {
        grid-template-columns: 1fr 1.5fr;
    }
    .wprm-recipe__content-left-ingredients,
    .wprm-recipe__content-left-equipment,
    .wprm-recipe__content-left-nutrition {
        padding-inline: 0;
    }

    .wprm-recipe__wrapper {
        padding-block: 10rem;
    }
}

@media (width < 768px) {

    .wprm-recipe__wrapper {
        padding-block: 2rem 7rem;
    }

    .wprm-recipe:not(.wprm-recipe-roundup-item) > :first-child {
        display: none;
    }

    .wprm-recipe__top, .wprm-recipe__header, .wprm-recipe__content {
        grid-template-columns: 1fr;
    }

    .wprm-recipe-times-container {
        grid-template-columns: 1fr;
    }

    .wprm-recipe-image img {
        width: 100%;
        aspect-ratio: 1.5 / 1;
    }

    .wprm-recipe .wprm-recipe-instructions > li {
        row-gap: 1rem;
    }

    .wprm-recipe .wprm-recipe-instructions > li > * {
        grid-column: 1/-1;
    }

    .wprm-recipe .wprm-recipe-instruction-text {
        padding-top: 0;
    }

    .wprm-recipe.wprm-recipe-roundup-item .wprm-summary-container {
        padding: 1rem 0;
    }

    .wprm-recipe.wprm-recipe-roundup-item .time-link-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

}



.term-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.term-cards-wrapper.popular-topics-wrapper {
    grid-template-columns: repeat(5, 1fr);
    margin-block: var(--spacing-m);
}

.term-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 1rem;
    border-radius: var(--border-radius-medium);
    background-color: var(--bg-soft);
    color: var(--text-dark);
}

.popular-topics-wrapper .term-card:nth-child(even) {
    background-color: var(--bg-light);
}

.popular-topics-wrapper :nth-child(3 of .term-card) {
    background-color: var(--bg-accent);
    /* color: var(--text-light); */
    /* & .term-card-content a {
        color: var(--text-light);
    } */
}

.topic-thumbnail {
    display: block;
    order: -1;
    aspect-ratio: 1.75/1;
    object-fit: cover;
    margin-bottom: auto;
    border-radius: var(--border-radius-small);
}

.popular-topics-wrapper .topic-thumbnail {
    aspect-ratio: 2/1;
}

.term-card-content {
    display: flex;
    flex-direction: column;
}

.term-card:not(:has(.topic-thumbnail)) .term-card-content {
    flex-grow: 1;
}

.term-card h3,
.term-card h2 {
    margin-top: .5em;
    margin-bottom: auto;
}

.term-card .term-card-content:only-child h3 {
    margin-top: 0;
}

.popular-topics-wrapper.term-card h3 {
    margin-top: 0;
}

.term-card .term-card-content a {
    color: var(--text-dark);
    text-decoration: none;
    text-underline-offset: revert;
}

.popular-topics-wrapper .term-card p {
    color: #271c1c; /* voldoende contrast creeeren */
}

.term-card a:is(:hover,:focus-visible) {
    text-decoration: underline;
}

.term-card a::after {
    position: absolute;
    content: '';
    inset: 0;
}

.term-card p {
    font-size: var(--text-s);
    margin-block: .125em 0;
    position: relative;
    pointer-events: none;
}

.term-card p:before,
.term-card p:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1.5rem;
    height: 1.5rem;
    transition: border-radius 250ms ease;
}

.popular-topics-wrapper :nth-child(3 of .term-card) p:before,
.popular-topics-wrapper :nth-child(3 of .term-card) p:after {
    content: none;
}

.term-card p:before {
    border: 1px solid var(--bg-accent);
    border-radius: var(--border-radius-small);
}

.term-card p:after {
    background-image: url('assets/images/arrow-right-icon__white.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    transform: rotate(-45deg);
    filter: invert(1);
}

.term-card :has(a:is(:hover,:focus-visible)) p:before {
    border-radius: 1rem;
}

@media ( width < 1025px ) {

    .term-cards-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .term-cards-wrapper.popular-topics-wrapper {
        grid-template-columns: 1fr;
    }

    .term-card {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        width: 100%;
        max-width: 550px;
        min-height: 128px;
        margin-inline: auto;
    }

    .term-card h2,
    .term-card h3 {
        margin-top: 0;
    }

    .topic-thumbnail {
        width: 6rem;
        aspect-ratio: 1;
        flex-shrink: 0;
    }

    .popular-topics-wrapper .topic-thumbnail {
        aspect-ratio: 1;
    }

    .term-card p:before,
    .term-card p:after {
        content: none;
    }

}

@media ( width < 769px ) {

    .term-cards-wrapper {
        row-gap: .75rem;
        grid-template-columns: 1fr;
    }

    .term-card {
        padding: .75rem;
        min-height: 96px;
    }

    .topic-thumbnail {
        width: 4.5rem;
    }

}

/* Onderstaand bij hoge uitzondering op post id getarget. Enige twee posts waarbij de "naar recept" button niet gewenst is. 
Slugs van posts: 
- /bbq-recepten/makkelijke-bbq-recepten/
- /bbq-recepten/kamado-recepten-voor-beginners/
*/
.postid-19937 .to-recipe-link,
.postid-23618 .to-recipe-link {
    display: none;
}