/*
Theme Name: Twenty Twenty-Five Child
Theme URI: http://franciscogordillo.com/
Author: Bartolo Geraci
Author URI: http://bgeraci.de
Template: twentytwentyfive
Description: Twenty Twenty-Five Child Theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: Child Theme
*/

/* CUSTOM CSS GOES HERE */
/*
    THEME 2025 COLOR PALET
    ======================
    default                 #111111       Pure charcoal/black for white backgrounds.
    Noon                    #5F5F5F       Dark muted gray for warm vintage cream surfaces.
    Dusk                    #3B3B3B       Off-black slate text for warm-grey setups.
    Afternoon               #516028       Deep olive forest green text.
    Morning                 #57544B       Earthy taupe/dark stone text.
    Evening (Dark Mode)     #D1D1D1       Soft bright silver text for deep dark backgrounds.
    Twilight (Dark Mode)    #FFFFFF       Solid crisp white text.
    Sunrise                 #DB9AB1       Dusty rose text for a dark maroon theme layout.
*/

/* body {
    letter-spacing: 1px !important;
} */

.no-margin-bottom {
    margin-bottom: 0 !important;
}
.no-margin-top {
    margin-top: 0 !important;
}

/* ---------------------------- */
/* POLYLANG LANGUAGE SWITCHER */
/* ---------------------------- */
.wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__label img {
    margin-right: 0.2em;
}

.wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__content {
    text-decoration: none !important;
    font-size: 80%;
}

.wp-block-polylang-navigation-language-switcher .wp-block-navigation-submenu {
    border: none !important;
    padding-top: 6px;
    margin-left: -4px;
    background: none !important;
}

.wp-block-polylang-navigation-language-switcher .wp-block-navigation-submenu li {
    border: 1px solid #ccc;
    width: 115px !important; /* 106px */
    white-space: nowrap !important; /* sicherheitsalber */
}
.wp-block-polylang-navigation-language-switcher .wp-block-navigation-submenu li:not(.current-lang) {
    background: #fff;
}

.wp-block-polylang-navigation-language-switcher .current-lang,
.wp-block-polylang-navigation-language-switcher .wp-block-navigation-submenu li:hover {
    background: #eee;
    transition: background 0.3s ease-in-out;
}

/* .wp-block-polylang-navigation-language-switcher .open-on-hover-click a {
    outline-width: 0px !important;
    outline-style: none !important;
    outline: none !important;
    box-shadow: none !important;
} */

/* .header a:focus {
    outline: none !important;
    box-shadow: none !important;
    outline-width: 0px !important;
    outline-style: none !important;
} */

/* REMOVE OUTLINE FROM ALL LINKS AND FORM ELEMENTS */
/* :where(.wp-site-blocks *:focus) {
    outline-width: 0px !important;
    outline-style: none !important;
} */

/* a:focus,
button:focus,
.wp-block-button__link:focus {
    outline: none !important;
    box-shadow: none !important;
} */

/* ---------------------------- */
/* HERO */
/* ---------------------------- */
.hero,
.seite-content {
    position: relative;
    max-width: 1200px !important;
}
.seite-content .content-768 {
    max-width: 768px !important;
}

.hero figure {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 50% !important;
    height: 50% !important;
    z-index: -1 !important;
}

.hero-heading-one {
    margin-top: -0.8em !important;
}

.hero-heading-two {
    margin-top: -0.6em !important;
}

.hero-heading-three {
    margin-top: 0.1em !important;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .hero-heading-two {
        transform: scale(0.9);
        transform-origin: bottom left;
        margin-top: -0.8em !important;
    }
}

@media (min-width: 768px) {
    .hero-heading-two {
        transform: scale(1.2);
        transform-origin: bottom left;
    }
}

@media (min-width: 768px) {
    .hero-heading-three {
        transform: scale(1.22);
        transform-origin: bottom left;
    }
}

.hero-home-link {
    text-decoration: none !important;
    outline-width: 0px !important;
    outline-style: none !important;
}

/* ---------------------------- */
/* HR */
/* ---------------------------- */
hr.hero-line,
hr.content-line {
    position: relative;
    outline: 0;
    border: 0;
    margin-top: 0.8em;
    margin-bottom: 1em;
    height: 0.5em;
    width: 100%;
    opacity: 0.8;
}
hr.hero-line:before,
hr.content-line:before {
    content: "";
    background: linear-gradient(to right, transparent, #000, transparent);
    position: absolute;
    left: 0;
    top: 0;
    width: 80%;
    height: 4px;
}

hr.content-line {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

hr.content-line:before {
    /* left: 50%; */
    /* margin-left: -15%; */
    width: 40%;
}

@media (min-width: 768px) {
    hr.hero-line:before {
        width: 50%;
    }
}

/* ---------------------------- */
/* HAUPTMENÜ */
/* ---------------------------- */
.hauptmenu a {
    position: relative;
    margin-bottom: 0.6em;
    outline-width: 0px !important;
    outline-style: none !important;
}

.hauptmenu a:before {
    content: "";
    background: linear-gradient(to bottom, transparent, #000, transparent);
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-right: 0.5em;
}

.hauptmenu .current-menu-item a {
    color: rgb(243, 27, 27) !important;
    pointer-events: none;
}

.hauptmenu .current-menu-item a:before {
    background: linear-gradient(to bottom, transparent, rgb(243, 27, 27), transparent);
}

.hauptmenu .wp-block-navigation-item a:after {
    position: absolute;
    left: 1.2em;
    bottom: -2em;
    width: 100%;
    height: 100%;
    font-size: 0.7em;
    display: inline-block;
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out;
}
.hauptmenu a:hover:after {
    opacity: 0.3;
}

/* SPANISCH */
[lang="es-ES"] .hauptmenu .wp-block-navigation-item.obras a:after {
    content: "DESCUBRE LAS OBRAS ACTUALES";
}
[lang="es-ES"] .hauptmenu .wp-block-navigation-item.sobre a:after {
    content: "EL ARTISTA Y BABALAO";
}
[lang="es-ES"] .hauptmenu .wp-block-navigation-item.trabajo a:after {
    content: "ASESORAMIENTO, CEREMONIAS, INFORMACIÓN";
}
[lang="es-ES"] .hauptmenu .wp-block-navigation-item.galeria a:after {
    content: "VISTAS A MI MUNDO";
}
[lang="es-ES"] .hauptmenu .wp-block-navigation-item.contacto a:after {
    content: "CONÉCTATE CONMIGO";
}
[lang="es-ES"] .hauptmenu .wp-block-navigation-item.cv a:after {
    content: "MI VIAJE POR LA VIDA";
}
/* ENGLISH */
[lang="en-GB"] .hauptmenu .wp-block-navigation-item.obras a:after {
    content: "DISCOVER CURRENT WORKS";
}
[lang="en-GB"] .hauptmenu .wp-block-navigation-item.sobre a:after {
    content: "THE ARTIST AND BABALAO";
}
[lang="en-GB"] .hauptmenu .wp-block-navigation-item.trabajo a:after {
    content: "ADVICE, CEREMONIES, INFORMATION";
}
[lang="en-GB"] .hauptmenu .wp-block-navigation-item.galeria a:after {
    content: "VIEWS OF MY WORLD";
}
[lang="en-GB"] .hauptmenu .wp-block-navigation-item.contacto a:after {
    content: "CONNECT WITH ME";
}
[lang="en-GB"] .hauptmenu .wp-block-navigation-item.cv a:after {
    content: "MY LIFE JOURNEY";
}
/* DEUTCH */
[lang="de-DE"] .hauptmenu .wp-block-navigation-item.obras a:after {
    content: "ENTDECKEN SIE AKTUELLE WERKE";
}
[lang="de-DE"] .hauptmenu .wp-block-navigation-item.sobre a:after {
    content: "DER KÜNSTLER UND BABALAO";
}
[lang="de-DE"] .hauptmenu .wp-block-navigation-item.trabajo a:after {
    content: "RATSCHLÄGE, ZEREMONIEN, INFORMATIONEN";
}
[lang="de-DE"] .hauptmenu .wp-block-navigation-item.galeria a:after {
    content: "ANSICHTEN MEINER WELT";
}
[lang="de-DE"] .hauptmenu .wp-block-navigation-item.contacto a:after {
    content: "KONTAKTIEREN SIE MICH";
}
[lang="de-DE"] .hauptmenu .wp-block-navigation-item.cv a:after {
    content: "MEINE LEBENSREISE";
}

/* NAVIGATION-OVERLAY MOBILE */
/* .navi-overlay hr.content-line {
    margin-top: 1em !important;
} */
.navi-overlay hr.content-line:before {
    width: 200px !important;
}

/* .wp-block-group.has-background.has-link-color.is-layout-flow.wp-block-group-is-layout-flow, */
.wp-block-group.has-background {
    background-size: 200px auto !important;
    background-position: 25px 450px !important;
    background-repeat: no-repeat;
}
.wp-block-site-title a {
    text-decoration: none !important;
}
.wp-block-site-title a:before {
    display: none !important;
}

/* ---------------------------- */
/* CONTENT: HOME */
/* ---------------------------- */
.home .wp-block-post-title {
    display: none;
}

.h3-with-quote {
    position: relative;
    margin-top: 2em !important;
    font-weight: 300 !important;
}
.h3-with-quote:before {
    content: "”";
    position: absolute;
    left: calc(50% - 0.5em) !important; /* 35%; */
    top: -1em;
    display: block;
    font-size: 2.5em;
    font-family: "Times New Roman", Times, serif;
}
@media (min-width: 768px) {
    .h3-with-quote:before {
        top: -1em;
        font-size: 3.5em;
    }
}

.home-unterschrift {
    margin-top: -0.5em !important;
}

/* ---------------------------- */
/* PAGE-TITLE */
/* ---------------------------- */
h1.wp-block-post-title {
    font-weight: 200;
    text-transform: uppercase;
    transform: scale(0.7);
    transform-origin: bottom left;
}
.subtitle {
    font-weight: 300;
    margin-top: 0.6em;
    text-transform: uppercase;
    color: #8f8f8f;
}

/* ---------------------------- */
/* GALLERY */
/* ---------------------------- */
.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-grow: 0 !important;
}

/* IMAGES THUMBNSAILS */
/* .wp-block-gallery.has-nested-images figure.wp-block-image:last-child {
    max-width: calc(100% / var(--wp--style--unstable-gallery-columns, 3) - 16px) !important;
    margin-right: auto !important;
} */

/* CAPTION */
/* .wp-block-gallery figure.wp-block-image {
    position: relative;
} */

.wp-block-gallery .wp-element-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff;
    padding: 8px;
    margin: 0;
}

/* ---------------------------- */
/* FOOTER & ICON-LINKS */
/* ---------------------------- */
footer hr.content-line:before {
    height: 2px !important; /* 4px; */
}

/* ICONS LINKS */
.icon-social,
.follow-icons,
.follow-icons .wp-social-link {
    display: inline-block !important;
    vertical-align: middle;
}

.footer-icon:before,
.kontakt-icon:before {
    content: "";
    display: inline-block;
    width: 1.25em; /* Skaliert perfekt mit der Schriftgröße mit */
    height: 1.25em;
    margin-right: 0.5em; /* Flexibler Textabstand */
    vertical-align: -0.2em; /* Schiebt das SVG auf die optische Grundlinie */
    background-repeat: no-repeat;
    background-size: contain;
}

/* E-Mail SVG via content-url (Briefumschlag im feinen Linienstil) */
.icon-mail:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m16.484 11.976l6.151-5.344v10.627zm-7.926.905l2.16 1.875c.339.288.781.462 1.264.462h.017h-.001h.014c.484 0 .926-.175 1.269-.465l-.003.002l2.16-1.875l6.566 5.639H1.995zM1.986 5.365h20.03l-9.621 8.356a.6.6 0 0 1-.38.132h-.014h.001h-.014a.6.6 0 0 1-.381-.133l.001.001zm-.621 1.266l6.15 5.344l-6.15 5.28zm21.6-2.441c-.24-.12-.522-.19-.821-.19H1.859a1.9 1.9 0 0 0-.835.197l.011-.005A1.86 1.86 0 0 0 0 5.855v12.172a1.86 1.86 0 0 0 1.858 1.858h20.283a1.86 1.86 0 0 0 1.858-1.858V5.855c0-.727-.419-1.357-1.029-1.66l-.011-.005z'/%3E%3C/svg%3E");
}

/* Telefon SVG via content-url (Hörer im feinen Linienstil) */
.icon-mobil:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m-3 19h-2v-1h2zm3-2H8V5h8z'/%3E%3C/svg%3E");
}

/* Ergänzung: Modernes Social Link Icon (Kettensymbol) */
.icon-social:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M384 336a63.78 63.78 0 0 0-46.12 19.7l-148-83.27a63.85 63.85 0 0 0 0-32.86l148-83.27a63.8 63.8 0 1 0-15.73-27.87l-148 83.27a64 64 0 1 0 0 88.6l148 83.27A64 64 0 1 0 384 336'/%3E%3C/svg%3E");
}

.icon-mail,
.icon-mobil {
    position: relative;
    margin-bottom: 1.5em;
    cursor: pointer;
    /* text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px; */
}
.kontakt-icon.icon-mail {
    padding-bottom: 1em;
}
.icon-mail:hover,
.icon-mobil:hover {
    text-decoration: none;
}

/* SPAM SCHUTZ NOTICE */
.icon-mail:after,
.icon-mobil:after {
    position: absolute;
    left: 2.5em;
    bottom: -2em;
    width: 100%;
    height: 100%;
    font-size: 0.7em;
    color: #5f5f5f;
    display: inline-block;
}

[lang="es-ES"] .icon-mail:after {
    content: "Protección contra spam: Haga clic aquí para revelar la dirección de correo electrónico.";
}
[lang="en-GB"] .icon-mail:after {
    content: "Spam protection: Please click here to reveal the email address.";
}
[lang="de-DE"] .icon-mail:after {
    content: "Spamschutz: Bitte klicken Sie hier, um die E-Mail-Adresse anzuzeigen.";
}

[lang="es-ES"] .icon-mobil:after {
    content: "Protección contra spam: Haga clic aquí para ver el número de teléfono.";
}
[lang="en-GB"] .icon-mobil:after {
    content: "Spam protection: Click here to reveal the phone number.";
}
[lang="de-DE"] .icon-mobil:after {
    content: "Spamschutz: Bitte klicken Sie hier, um die Telefonnummer anzuzeigen.";
}

.datenschutz-mail {
    display: inline !important;
}
.datenschutz-mail.icon-mail:after {
    display: none;
}

footer hr.content-line {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}
footer hr.content-line:before {
    width: 60%;
    height: 3px;
}

/* ICONS RECHTS */
/* .wp-social-link-x a span {
    display: none;
} */
@media (min-width: 768px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* ---------------------------- */
/* TYPO */
/* ---------------------------- */
.wp-block-polylang-navigation-language-switcher,
.hauptmenu,
.h3-with-quote,
.wp-block-post-title,
.hero-heading-one,
.hero-heading-two,
.hero-heading-three,
.subtitle,
summary,
footer .wp-block-site-tagline {
    letter-spacing: 1px !important;
}

/* ---------------------------- */
/* KONTAKT FORM */
/* ---------------------------- */
/* Form styles that match Twenty Twenty-Five default form styling */
form {
    font-family: "Manrope", sans-serif !important;
    color: #111111;
}

input,
input[type="text"],
input[type="email"],
textarea {
    font-family: "Manrope", sans-serif !important;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
    color: #111111;
    transition: border-color 0.2s ease-in-out;
}

/* Set focus */
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #111111;
    outline: 2px solid #111111;
    outline-offset: -2px;
}

/* Submission button */
input[type="submit"] {
    display: inline-block;
    background-color: #111111 !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 100px !important;
    border: none !important;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        opacity 0.2s ease;
}
input[type="submit"]:hover {
    background-color: #222222 !important;
    opacity: 0.95;
}

@media (min-width: 768px) {
    input[type="submit"] {
        font-size: 18px !important;
    }
}

form label {
    font-size: 16px;
    font-weight: 400;
}

form .wpcf7-response-output {
    border-radius: 4px;
    border-color: green !important;
    background: green;
    color: #fff;
    margin-top: 0 !important;
}

form.invalid .wpcf7-response-output {
    border-color: red !important;
    background: red;
}

/* ---------------------------- */
/* CURRICULUM */
/* ---------------------------- */
summary {
    padding: 0.5em;
    border-radius: 4px;
    border: 1px solid;
    transition: background 0.3s ease-in-out;
}

details > summary {
    list-style-type: none;
    transition: all 0.3s ease-in-out !important;
}
details > summary:before {
    content: "›";
    display: inline-block;
    margin-right: 0.2em;
    transition: all 0.3s ease-in-out;
}

details[open] > summary {
    background: #e5e5e5;
    /* font-weight: 400; */
    /* Mimics font-weight transition */
    text-shadow:
        0 0.5px 0 #222,
        0 0.5px 0 #222,
        0 0.5px 0 #222,
        0 0.5px 0 #222;
}
details[open] > summary:before {
    transform: rotate(90deg);
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    ::details-content {
        transition:
            height 0.5s ease,
            content-visibility 0.5s ease allow-discrete;
        height: 0;
        overflow: clip;
    }
    [open]::details-content {
        height: auto;
    }
}

details[open] > ul {
    animation: animateDown 0.2s linear forwards;
}

@keyframes animateDown {
    0% {
        opacity: 0;
        transform: translatey(-15px);
    }
    100% {
        opacity: 1;
        transform: translatey(0);
    }
}

/* .wp-block-cover img {
    height: 100% !important;
    object-fit: cover !important;
} */