/*
Theme Name: KlimaatContact 2025
Theme URI: https://klimaatcontact.be
Author: LittleBigThings
Author URI: https://littlebigthings.be/nl/
Description: Een duurzaam thema voor KlimaatContact
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klimaatcontact2025
*/

/* Basic tweaks */
html {
	scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.wp-site-blocks {
    padding-bottom: 0 !important;
}
.wp-block-site-title {
    overflow-wrap: break-word;
}

/* Fix number alignment */
body {
    font-feature-settings: 'lnum' 1;
    font-variant-numeric: lining-nums;
}

/* Style link */
a:where(:not(.wp-element-button)) {
    text-decoration-color: var(--wp--preset--color--accent-1);
}
footer a:where(:not(.wp-element-button)) {
    text-decoration: none;
}

/* Style the current nav menu item */
header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
    font-weight: bold;
}
header .wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent-2);
}

@media (max-width: 781px) {
    /* Reset footer borders && padding */
    footer.wp-block-template-part #colophon .wp-block-column {
        border-left: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Reverse the order of collapsed columns */
    .wp-block-columns.reverse-order {
        flex-direction: column-reverse;
    }
}

@media (min-width: 780px) {
    .wp-block-navigation-submenu .wp-block-navigation-item {
        border-top: 1px solid #00000026;
    }
    .wp-block-navigation-submenu .wp-block-navigation-item:first-child {
        border-top: none;
    }
}

/* Style outline button */
.wp-block-button.is-style-outline a:hover {
    background: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--base);
}

/* Style arrow button */
.wp-block-button.klimaatcontact-icon-button a {
    border-color: var(--wp--preset--color--accent-4);
    height: 3em;
    padding: 0;
    width: 3em;
}
.wp-block-button.klimaatcontact-icon-button a.wp-block-button__link:hover {
    background: var(--wp--preset--color--accent-3) !important;
    border-color: var(--wp--preset--color--accent-3);
}
.wp-block-button.klimaatcontact-icon-button a.wp-block-button__link:active {
    background: var(--wp--preset--color--base) !important;
    border-color: var(--wp--preset--color--accent-1);
}
.wp-block-button.klimaatcontact-icon-button a .read-more-arrow {
    vertical-align: middle;
}

/* Style the terms */
.wp-block-post-terms a {
    border: 1px solid currentColor;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 10px;
    text-decoration: none;
}
.wp-block-post-terms__separator {
    visibility: hidden;
}

/* Light styling for presentation */
details {
    border-block-end: 1px solid #000;
    margin-block: .5rem;
    padding-block: .5rem;
}

/* Style the details element */
summary {
    anchor-name: --summary;
    padding-right: 1em;
    position: relative;
}
summary::marker {
    content: "";
}
summary::before,
summary::after {
    /* Custom marker dimensions */
    content: "";
    border-block-start: 3px solid currentColor;
    display: block;
    height: 0;
    width: 1rem;

    /* Positions the lines */
    inset-block-start: 50%;
    inset-inline-end: 0;

    /* Anchor the shape to the summary */
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
}
summary::after {
    transform: rotate(90deg);
    transform-origin: 50%;
}
details[open] summary::after {
    transform: rotate(0deg);
}

/* Events */
.evenement .event-from,
.evenement .full,
.evenement.event-full .wp-block-read-more {
    display: none;
}
.evenement.event-multiday .event-from,
.evenement.event-full .full {
    display: block;
}
.evenement.event-full {
    background-color: var(--wp--preset--color--accent-4);
}
/*
.wp-block-query .wp-block-post.evenement:not(.event-full) {
    position: relative;
}
.wp-block-query .wp-block-post.evenement:not(.event-full) .wp-block-group.wp-block-group-is-layout-constrained {
    position: static;
}
.wp-block-query .wp-block-post.evenement:not(.event-full):hover {
    opacity: 0.8;
}
.wp-block-query .wp-block-post.evenement:not(.event-full) .wp-block-post-title a:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 2;
}*/

@keyframes waveRight {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }
    50% {
        transform: scaleY(1.4);
        opacity: 0.5;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes waveLeft {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }
    50% {
        transform: scaleY(1.4);
        opacity: 0.5;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.cls-6 {
    --index: 0; 
    --total-lines: 23;
    --animation-duration: 1s;
    --delay-step: 0.05s;
    animation: waveRight var(--animation-duration) ease-in-out forwards,
               waveLeft var(--animation-duration) ease-in-out calc(2s + var(--animation-duration)) forwards;
    transform-origin: center;
}


.cls-6 {
    animation-delay: calc(var(--index) * var(--delay-step)), 
                     calc((var(--total-lines) - var(--index)) * var(--delay-step) + var(--animation-duration) * 2);
} 

.frm_form_field.295 .frm_description {
    text-align: center;
    margin-top: 10px;
    color: #ff6b35;
    font-weight: bold;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
    background-color: var(--wp--preset--color--white);
    border: 2px solid var(--wp--preset--color--accent-4);
    border-radius: 25px;
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.25;
    padding: 0.667em;
    margin: 0 !important;
    max-width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
.site textarea:focus {
    outline-offset: 2px;
    outline: 2px solid var(--wp--preset--color--contrast);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
input[type="time"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
input[type="color"]:disabled,
.site textarea:disabled {
    opacity: 0.7;
}

.site textarea {
    background-color: var(--wp--preset--color--white);
    border: 2px solid var(--wp--preset--color--accent-4);
    border-radius: 10px;
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.25;
    padding: 0.667em;
    margin: 0 !important;
    max-width: 100%;
    min-height: 160px;
}

input[type="search"]:focus {
    outline-offset: -7px;
}

input[type="submit"],
input[type="button"] {
    background-color: var(--wp--preset--color--accent-1);
    border: 2px solid var(--wp--preset--color--accent-1);
    border-radius: 25px;
    color: var(--wp--preset--color--base);
    cursor: pointer;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    padding: 0.667em 1.333em;
    margin: 0 !important;
    max-width: 100%;
}
.wp-block-search__button {
    border: 2px solid var(--wp--preset--color--accent-1);
    border-radius: 25px;
}
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--wp--preset--color--base);
}
input[type="submit"]:focus,
input[type="button"]:focus {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    outline-offset: 2px;
    outline: 2px solid var(--wp--preset--color--contrast);
}
input[type="submit"]:disabled,
input[type="button"]:disabled {
    opacity: 0.7;
}

select {
    border: 2px solid var(--wp--preset--color--accent-4);
    border-radius: 25px;
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    background: var(--wp--preset--color--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
    background-position: right calc(0.667em + 2px) top 60%;
}
select:focus {
    border-color: var(--wp--preset--color--accent-1);
    outline-offset: 2px;
    outline: 2px solid var(--wp--preset--color--contrast);
}

textarea {
    width: 100%;
}

label {
    display: block;
    font-size: var(--wp--preset--font-size--medium);
    margin-top: calc(var(--wp--preset--spacing--10) / 2);
    margin-bottom: calc(var(--wp--preset--spacing--10) / 4);
}

/**
 * https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
 * https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
 * License: MIT.
 */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: relative;
        width: 25px;
        height: 25px;
        border: 2px solid var(--wp--preset--color--accent-2);
        background: var(--wp--preset--color--base);
        top: 8px;
    }
    input[type="checkbox"]:disabled,
    input[type="radio"]:disabled {
            opacity: 0.7;
        }

    input[type="checkbox"]:focus {
        outline-offset: 2px;
        outline: 2px solid var(--wp--preset--color--contrast);
    }

    input[type="checkbox"]:after {
        content: "";
        opacity: 0;
        display: block;
        left: 5px;
        top: 2px;
        position: absolute;
        width: 7px;
        height: 13px;
        border: 3px solid var(--wp--preset--color--contrast);
        border-top: 0;
        border-left: 0;
        transform: rotate(30deg);
    }

    input[type="checkbox"]:checked {
        color: var(--wp--preset--color--contrast);
    }
    input[type="checkbox"]:checked:after {
        opacity: 1;
    }

    input[type="radio"] {
        border-radius: 50%;
    }
    input[type="radio"]:focus {
        outline-offset: 2px;
        outline: 2px solid var(--wp--preset--color--contrast);
    }

    input[type="radio"]:after {
        content: "";
        opacity: 0;
        display: block;
        left: 3px;
        top: 3px;
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--wp--preset--color--contrast);
    }

    input[type="radio"]:checked {
        border: 4px solid var(--wp--preset--color--accent-2);
    }
    input[type="radio"]:checked:after {
        opacity: 1;
    }
    input[type="radio"]:checked:focus {
        outline-offset: 4px;
        outline: 2px solid var(--wp--preset--color--contrast);
    }
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    display: inline-block;
    padding-left: 10px;
    font-size: var(--wp--preset--font-size--medium);
    vertical-align: top;
}

fieldset {
    border: none;
    padding: 0;
}
fieldset legend {
    font-size: var(--wp--preset--font-size--medium);
}
fieldset input[type="submit"] {
    max-width: max-content;
}

fieldset input:not([type="submit"]) {
    margin-bottom: var(--wp--preset--spacing--10);
}

fieldset input[type="radio"],
fieldset input[type="checkbox"] {
    margin-bottom: 0;
}

fieldset input[type="radio"] + label,
fieldset input[type="checkbox"] + label {
    font-size: var(--wp--preset--font-size--medium);
    padding-left: 0;
    margin-bottom: var(--wp--preset--spacing--10);
}

::-moz-placeholder {
    opacity: 1;
}

.post-password-message {
    font-size: var(--wp--preset--font-size--medium);
}

.post-password-form {
    display: flex;
    flex-wrap: wrap;
}
.post-password-form__label {
    width: 100%;
    margin-bottom: 0;
}

.post-password-form input[type="password"] {
    flex-grow: 1;
    margin-top: calc(1.333em + 2px);
    margin-right: calc(0.667em + 2px);
}

.post-password-form__submit {
    margin-top: calc(1.333em + 2px);
}