/*
Theme Name: mdc-ollie
Theme URI:
Author: Klaus Dettmer
Description: Eigene Anapssungen an Ollie-WP
Version: 1.0
Template: ollie
Text Domain: mdc-ollie
*/

/**
  * Styling für den aktiven Menüpunkt (Current Page) *
  * WordPress blockbasiert: Der Navigations-Block nutzt die Klasse .wp-block-navigation-item.
  * Wenn die Seite aktiv ist, kommt die Klasse .current-menu-item hinzu.
 */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary) !important; /* Nutzt die im Theme definierten CSS-Variablen */
    font-weight: 700;
    position: relative;
}

/** * Fortgeschrittener Hover-Effekt: Animierter Unterstrich von links nach rechts * Das ist mit dem reinen Editor-UI (noch) nicht möglich. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--wp--preset--color--primary);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.wp-block-navigation-item__content {
    text-decoration: none !important;
}

/* Im Footer Links ohne Underline */
.mdc-footer-link a {
    text-decoration: none;
}

/* Liste */
ul.is-style-list-check-circle li::before {
    background: var(--global-palette1);
    color: var(--wp--preset--color--base);
    border-radius: 100px;
    height: 1.8rem;
    width: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
    font-size: var(--wp--preset--font-size--base);
    font-weight: bold;
    font-family: var(--wp--preset--font-family--chakra-petch);
    transform: scale(.8);
}

ul.is-style-list-check li::before, ul.is-style-list-check-circle li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: .1em;
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
    color: red;
    content: " *";
    margin-left: 3px;
    font-weight: bold;
    /* text-shadow: 2px 0 3px rgb(255, 255, 255) , -2px 0 3px rgb(255, 255, 255);*/
    font-size: 1.2em;
}

.mdc-newsletter-label {
    display: block;
}

.mdc-newsletter-feld {
    width: 100%;
}

/* Checkbox im Newsletter-Anmelden-Dialog */
.mdc-newsletter-checkbox-label {
    position: relative;
    padding-left: 25px;
    display: block;
    line-height: 1.5em;
}

.mdc-newsletter-checkbox {
    position: absolute;
    top: 4px;
    left: 0;
}

/* Formular */
input:not([type="submit"]):not([type="radio"]), select, textarea, .wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wp-block-post-comments-form textarea {
    border: solid 1px color-mix(in srgb, var(--wp--preset--color--main) 100%, var(--wp--preset--color--main) 20%) !important;
}