/**
 * GENERAL BLOCK STYLES
 * This file is loaded in both the WordPress front- and backend.
 * Add styles here which should be present in both views.
 */



/* TYPOGRAPHY 
   ==================================================================================================== */

a {
    font-family: inherit;
    color: inherit;
    text-underline-offset: 0.25em;
}
a:hover {
    text-decoration: none;
}

p:where(.has-h-1-font-size, .has-h-2-font-size, .has-h-3-font-size, .has-h-4-font-size, .has-h-5-font-size, .has-h-6-font-size) {
    line-height: var(--wp--custom--line-height--small);
}
:where([style*="text-decoration:line-through"]) {
    text-decoration-style: wavy !important;
    text-decoration-color: var(--wp--preset--color--secondary-base) !important;
}

.has-reenie-beanie-font-family {
    font-weight: 400 !important;
    line-height: 1.1 !important;
}

.has-huge-font-size {
    line-height: var(--wp--custom--line-height--small);
}


mark {
    --mark-pin-color: var(--wp--preset--color--primary-base);

    font-family: var(--wp--preset--font-family--playfair-display);
    border-left: 0.05em solid var(--mark-pin-color);
    border-right: 0.05em solid var(--mark-pin-color);
    color: inherit;
    position: relative;
}
mark.has-secondary-alpha-40-background {
    --mark-pin-color: var(--wp--preset--color--secondary-base);
}

@media (min-width: 1120px) {
    mark {
        padding-left: 0.15em;
        padding-right: 0.15em;
    }
    mark::before,
    mark::after {
        content: "";
        display: inline-block;
        width: 0.217em;
        height: 0.217em;
        background: var(--mark-pin-color);
        border-radius: 50%;
        pointer-events: none;
        position: absolute;
    }
    mark::before {
        /* transform: translate(-0.14em, -0.98em); */
        transform: translate(calc(-1 * 0.267em / 2), calc(-1 * 0.217em / 2));
        top: 0;
        left: 0;
    }
    mark::after {
        /* transform: translate(0.12em, 0.33em); */
        transform: translate(0.05em, calc(0.217em / 2));
        bottom: 0;
    }
}


.circled-text {
	--circle-width: calc(100% + 0.5em);
	--circle-x: -50%;
	--circle-y: -50%;

    padding-inline: 0.15em;
    margin-inline-start: 0.25em;
    margin-inline-end: 0.25em;
}
.underlined-text {
	--circle-width: 100%;
	--circle-x: -50%;
	--circle-y: 80%;
}
.circled-text,
.underlined-text {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	isolation: isolate;
}
.circled-text::after,
.underlined-text::after {
	content: "";
	position: absolute;
	left: 50%;
	z-index: -1;
	width: var(--circle-width);
	transform: translate(var(--circle-x), var(--circle-y));
    pointer-events: none;
}
.circled-text::after {
    top: 50%;
    aspect-ratio: 420 / 220;
    background: center / contain no-repeat url("../images/scribble-circle-blue.svg");
}
.underlined-text::after {
    bottom: 0;
    aspect-ratio: 310 / 30;
    background: center / contain no-repeat url("../images/scribble-underline-blue.svg");
}

.has-text-color:where(.has-white-color) .circled-text::after {
    background-image:  url("../images/scribble-circle-red.svg");
}
.has-secondary-to-primary-gradient-background  .circled-text::after {
    background-image:  url("../images/scribble-circle-white.svg");
}
.has-secondary-base-background-color .underlined-text::after {
    background-image:  url("../images/scribble-underline-red.svg");
}



/* LAYOUT / GRID
   ==================================================================================================== */

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

.site-main {
    margin-block-start: 0px;
}

:where(.wp-block-group.has-background.content-section, .wp-block-group.has-background.is-style-content-section),
:where(.is-style-content-section, .content-section),
.site-main > .entry-content:not(:has(> .content-section)):not(:has(> .is-style-content-section)) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: var(--wp--custom--spacing--section) !important;
    padding-bottom: var(--wp--custom--spacing--section) !important;
}

:where(.is-style-content-section-small, .content-section-small) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: calc(var(--wp--custom--spacing--section) * 0.6) !important;
    padding-bottom: calc(var(--wp--custom--spacing--section) * 0.6) !important;
}


.wp-block-social-links.is-layout-flex,
.wp-block-navigation.is-vertical {
    gap: var(--wp--custom--spacing--gap-small);
}


:where(.wp-block-group.has-background) {
    padding: 1.25em;
}
:where(.wp-block-columns.is-style-gap-large) {
    row-gap: var(--wp--custom--spacing--gap-large);
}


/* IMAGE
   ==================================================================================================== */
:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img) {
    border-radius: var(--wp--custom--border-radius--large);
}



/* SOCIAL LINKS
   ==================================================================================================== */
.wp-block-social-links .wp-social-link svg {
    height: 1.5rem;
    width: 1.5rem;
}


/* SEPARATOR
   ==================================================================================================== */
.wp-block-separator {
    border-width: 1px;
    color: var(--wp--preset--color--black);
}



/* FILE BLOCK
   ==================================================================================================== */
.wp-block-file  {
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
    align-items: center;
}



/* ACCORDION BLOCK
   ==================================================================================================== */
.wp-block-accordion-item {
    padding: calc(1.625em - var(--wp--preset--spacing--20)) 2.5em;
}
.wp-block-accordion-item.has-background {
    border-radius: var(--wp--custom--border-radius--medium);
}
.wp-block-accordion-item.is-open {
    padding-bottom: 1.625em;
}
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    transform: rotate(180deg);
}
.wp-block-accordion-heading__toggle-icon {
    height: 2.313rem;
    width: 1.625rem;
}



/* NAVIGATION
   ==================================================================================================== */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    padding: 0.5em 0.25em;
    font-weight: 700;
}
 
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-left: 1.5em;
    padding-right: 1.5em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    align-items: stretch;
    width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
    border-bottom: 1px solid var(--wp--preset--color--primary-base);
}

.wp-block-navigation__container {
    gap: clamp(1rem, 2vw, 2rem);
}

.wp-block-navigation__responsive-container-close {
    top: 1.15rem;
    right: var(--wp--style--root--padding-right);
}
.wp-block-navigation__responsive-container-close, 
.wp-block-navigation__responsive-container-open {
    background-color: var(--wp--preset--color--secondary-alpha-40);
    padding: 0.5em;
    border-radius: 9999px;

    svg {
        fill: var(--wp--preset--color--white);
    }
}


.wp-block-navigation-item > .wp-block-navigation-item__content::after {
    --menu-marker-size: 12px;

    content: "";
    opacity: 0;
    display: block;
    width: calc(var(--menu-marker-size) * 0.5);
    height: calc(var(--menu-marker-size) * 0.5);
    background-color: var(--wp--preset--color--harbor-sand-base);
    border: 1px solid var(--wp--preset--color--harbor-sand-shade-10);
    border-radius: var(--menu-marker-size);
    position: absolute;
    bottom: calc(-1 * var(--menu-marker-size) / 2);
    left: 50%;
    transform: translate(-50%, 0);
    transition: 
        width 0.25s ease-in-out,
        height 0.25s ease-in-out,
        opacity 0.25s ease-in-out;
}
.wp-block-navigation-item > .wp-block-navigation-item__content:where(:hover, :focus)::after,
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
    opacity: 1;
    width: var(--menu-marker-size);
    height: var(--menu-marker-size);
}
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:where(:hover, :focus)::after {
     width: calc(var(--menu-marker-size) * 1.5);
}

html.has-modal-open .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    right: 0;
    bottom: calc(0.5em + (var(--menu-marker-size) / 2));
    left: initial;
}



/* PATTERN & STYLES 
   ==================================================================================================== */
.is-style-card {
    padding: 2.5em;
    border: 1px solid var(--wp--preset--color--secondary-base);
}

.is-style-pill {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
}

.is-style-slanted {
    rotate: -3.5deg;
    margin-block-end: 1em !important;
}


/* Pattern modul grid
   ---------------------------------------------------------------------------------------------------- */
.wp-block-group.is-layout-grid.pattern-modul-grid > .is-style-card {
    padding: var(--wp--preset--spacing--60);
}
.wp-block-group.is-layout-grid.pattern-modul-grid .modul__header .wp-block-image img {
    border-radius: 16px;
}

.modul .modul__header {
    position: relative;
}
.modul .modul__header .wp-block-image + .is-style-pill {
    position: absolute;
    left: 0.875em;
    bottom: 0.875em;
    font-size: 0.875rem !important;
}


/* Pattern pricing
   ---------------------------------------------------------------------------------------------------- */
.wp-block-columns.pattern-pricing {
    column-gap: 0;
}
@media (min-width: 782px) {
    .wp-block-columns.pattern-pricing > .wp-block-column:first-child > .is-style-card {
        border-right: 0;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}


/* Pattern offset left over top
   ---------------------------------------------------------------------------------------------------- */
@media (min-width: 782px) {
    .wp-block-columns.pattern-offset-left-over-right .wp-block-column:first-child {
        margin-left: 7em;
        margin-right: -7em;
        position: relative;
        z-index: 1;
    }
}


/* Pattern special grid editor styles
   ---------------------------------------------------------------------------------------------------- */
.editor-styles-wrapper .pattern-special-grid {
    --icon-size: 2em;
}
.editor-styles-wrapper .wp-block-group.pattern-special-grid .wp-block-media-text:not(:has(.components-placeholder)) {
    column-gap: 0.5em;
    grid-template-columns: var(--icon-size) auto !important;
}
.editor-styles-wrapper .wp-block-group.pattern-special-grid .wp-block-media-text:not(:has(.components-placeholder)) > .wp-block-media-text__media {
    max-width: var(--icon-size);
}