/*
Theme Name: RADL-DOC
Template: twentytwentyfive
Version: 1.7.0
*/

html {
    scroll-behavior: smooth;
}

/* Keep targets from hiding under a sticky header */
[id] {
    scroll-margin-top: 6rem;
    /* ≈ header height */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Sticky header: stays at the top while scrolling */
header.wp-block-template-part {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    /* sit below the admin bar when logged in */
    z-index: 100;
    background-color: var(--wp--preset--color--base);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0);
    transition: box-shadow 0.3s ease;
}

/* Subtle shadow once the page is scrolled (class set by sticky-header.js) */
header.wp-block-template-part.is-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    header.wp-block-template-part {
        transition: none;
    }
}

/* Header: push site title and navigation in from the edges (~10% each side).
   --wp--custom--page-gutter comes from theme.json (settings.custom.pageGutter)
   and is shared with the opening hours box, so both line up exactly. */
header.wp-block-template-part>.wp-block-group.alignfull {
    padding-left: var(--wp--custom--page-gutter);
    padding-right: var(--wp--custom--page-gutter);
}

/* Header: drop the 1340px wide-size cap so the padding defines the width */
header.wp-block-template-part .wp-block-group.alignwide {
    max-width: none;
}

/* Navigation: space inside each link (bigger click area) */
.wp-block-navigation .wp-block-navigation-item__content {
    padding: 0.5rem 0.75rem;
    transition: color 0.2s ease;
}

/* Navigation: hide focus outline after mouse clicks, keep it for keyboard users */
.wp-block-navigation .wp-block-navigation-item__content:focus:not(:focus-visible) {
    outline: none;
}

/* Navigation: green line grows from left to right under the focused link
   and stays under the link of the section in view (.is-active, set by nav-active.js).
   left/right match the horizontal padding, so the line is as wide as the text.
   --wp--custom--color--green comes from theme.json (settings.custom.color.green). */
.wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.25rem;
    height: .25rem;
    background-color: var(--wp--custom--color--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:focus::after,
.wp-block-navigation .wp-block-navigation-item__content.is-active::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation .wp-block-navigation-item__content::after {
        transition: none;
    }
}

/* Navigation: active / current item */
.wp-block-navigation .current-menu-item>a {
    font-weight: 700;
}

/* Navigation: mobile overlay menu */
.wp-block-navigation__responsive-container.is-menu-open {
    padding: 2rem;
}

/* Sections (e.g. pattern radl/services): content lines up with the header,
   i.e. page gutter plus the theme's root padding on both sides. */
.radl-section.alignfull {
    padding-left: calc(var(--wp--custom--page-gutter) + var(--wp--style--root--padding-left));
    padding-right: calc(var(--wp--custom--page-gutter) + var(--wp--style--root--padding-right));
}

/* Sections: drop the 1340px wide-size cap so the padding defines the width */
.radl-section.alignfull>.alignwide {
    max-width: none;
}

/* Cards: same look as the opening hours box */
.radl-card {
    padding: var(--wp--preset--spacing--40);
    border-radius: 1rem;
    background-color: var(--wp--preset--color--base);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.radl-card> :first-child {
    margin-top: 0;
    color: var(--wp--custom--color--green);
    text-transform: uppercase;
}

/* About (pattern radl/about): rounded portrait in a fixed 4:5 format */
.radl-about__image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1rem;
}

/* Contact (pattern radl/contact): map fills its column, rounded like the cards */
.radl-map {
    height: 100%;
    min-height: 400px;
    overflow: hidden;
    border-radius: 1rem;
}

.radl-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
}

/* Google Maps two-click placeholder (markup from functions.php) */
.radl-map-consent {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    min-height: 400px;
    padding: var(--wp--preset--spacing--40);
    background-color: #f5f5f5;
    font-size: var(--wp--preset--font-size--small);
    text-align: center;
}

/* The button uses the theme's button styles, but not their height: 100% */
.radl-map-consent__button {
    height: auto;
}

.radl-map-consent__text {
    max-width: 32rem;
    margin: 0;
}

.radl-map-consent__remember {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

/* Footer (parts/footer.html): small headings and a divider above the copyright line */
.radl-footer .radl-footer__heading {
    font-size: var(--wp--preset--font-size--medium);
}

.radl-footer .wp-block-site-title {
    margin-top: 0;
    font-size: var(--wp--preset--font-size--large);
}

.radl-footer__bottom {
    margin-top: var(--wp--preset--spacing--50);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: var(--wp--preset--font-size--small);
}

.radl-section__title {
    font-size: var(--wp--preset--font-size--xx-large);
    font-weight: 500;
    position: relative;
    width: fit-content;
}

/* .radl-section__title::after {

    content: "";
    display: block;
    height: 1rem;
    background-color: var(--wp--custom--color--green);
    position: absolute;
    left: -10px;
    width: 70%;
    top: 75%;
    opacity: .3;
} */

.radl-section__subtitle {
    margin-bottom: 4rem;
}
/* List block icon styles (registered in functions.php): an icon instead of the
   bullet point. The icon is an SVG used as a mask, so it takes the green from
   background-color. Icons: Material Icons (Apache License 2.0). */
.wp-block-list.is-style-radl-check {
    --radl-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.wp-block-list.is-style-radl-wrench {
    --radl-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
}

.wp-block-list.is-style-radl-bike {
    --radl-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z'/%3E%3C/svg%3E");
}

.wp-block-list.is-style-radl-clock {
    --radl-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.wp-block-list[class*="is-style-radl-"] {
    padding-left: 0;
    list-style: none;
}

.wp-block-list[class*="is-style-radl-"] > li {
    position: relative;
    padding-left: 1.75em;
}

.wp-block-list[class*="is-style-radl-"] > li + li {
    margin-top: 0.4em;
}

.wp-block-list[class*="is-style-radl-"] > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.2em;
    height: 1.2em;
    background-color: var(--wp--custom--color--green);
    -webkit-mask: var(--radl-list-icon) center / contain no-repeat;
    mask: var(--radl-list-icon) center / contain no-repeat;
}