/*
Theme Name: HWK Reutlingen Bildungsakademien
Theme URI: https://example.com
Author: Dein Name
Author URI: https://example.com
Description: Ein modernes Block Theme.
Requires at least: 6.8
Tested up to: 6.9
Requires PHP: 8.1
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uni-rt-ba
Tags: full-site-editing, block-patterns, custom-logo
*/

/*
 * html:root statt :root: Im Editor wird diese Datei vor den Global Styles geladen, die
 * --wp--preset--spacing--64 ebenfalls auf :root setzen -- bei gleicher Spezifitaet gewann
 * dort der Desktop-Wert, mobil waren Editor und Frontend dann unterschiedlich.
 */
@media (max-width: 600px) {
    html:root {
        --wp--preset--spacing--64: var(--wp--preset--spacing--16);
    }
}

:root {
    --uni-hover-transition: 220ms ease-in-out;
}

main.is-layout-constrained > .wp-block-post-content {
    max-width: none;
}

.wp-block-post-content > :where(:not(.wp-block-uniplus-rt-ba-container, .wp-block-uniplus-rt-ba-footer-container, .alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
}

.block-editor-block-list__layout.is-root-container > .wp-block-uniplus-rt-ba-container,
.block-editor-block-list__layout.is-root-container > .wp-block-uniplus-rt-ba-footer-container {
    max-width: none;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --uni-hover-transition: 0s;
    }
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--wp--preset--font-family--author), serif !important;
    font-weight: 700 !important;
}

h1 {
    font-size: var(--wp--preset--font-size--h-1);
    line-height: 1 !important;
}

h2 {
    font-size: var(--wp--preset--font-size--h-2);
    line-height: 1 !important;
}

h3 {
    font-size: var(--wp--preset--font-size--h-3);
    line-height: 1.1 !important;
}

h4 {
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1.15 !important;
}

h5 {
    font-size: var(--wp--preset--font-size--h-5);
    line-height: 1.3 !important;
}

h6 {
    font-size: var(--wp--preset--font-size--text-large);
    line-height: 1.3 !important;
}

a {
    transition: color var(--uni-hover-transition, 220ms ease-in-out);
}

a:hover {
    color: var(--wp--preset--color--karbon-dark);
}

.wp-block-paragraph {
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
}

.wp-block-heading.is-style-hero-headline {
    font-size: clamp(3rem, 1.59rem + 6.01vw, 7rem) !important;
    line-height: 100% !important;
    letter-spacing: 0;
    text-align: center;
}

.wp-block-heading.is-style-heading-huge {
    font-size: clamp(2.25rem, 1.46rem + 3.38vw, 4.5rem) !important;
    line-height: 100% !important;
}

/*
 * Hero-Titel mit festen Stufen (96/64/40px) statt clamp() wie bei
 * "hero-headline" -- so, wie ihn die Kurssuche in ihrem eigenen Stylesheet
 * als .kurssuche-hero__title mitbringt; die Merkliste nutzt inzwischen diese
 * Block-Variante hier. Im Unterschied zu hero-headline linksbuendig und ohne
 * Aussenabstand, damit der Hero-Flex-Container den Abstand bestimmt.
 * font-family und font-weight sind mit !important gesetzt, weil die globale
 * h1-h6-Regel oben ebenfalls !important verwendet.
 */
.wp-block-heading.is-style-hero-title {
    margin: 0;
    font-family: var(--wp--preset--font-family--author), serif !important;
    font-weight: 700 !important;
    font-size: 96px;
    line-height: 1 !important;
}

@media (max-width: 1024px) {
    .wp-block-heading.is-style-hero-title {
        font-size: 64px;
    }
}

@media (max-width: 600px) {
    .wp-block-heading.is-style-hero-title {
        font-size: 40px;
    }
}

.wp-block-paragraph.is-style-tagline {
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: var(--wp--preset--color--feuer-500);
}

@media (max-width: 600px) {
    .wp-block-paragraph.is-style-tagline {
        font-size: 16px;
    }
}

.wp-block-button__link {
    box-sizing: border-box;
    padding: 18px 22px;
    background: var(--wp--preset--color--feuer-500) !important;
    border: 2px solid var(--wp--preset--color--feuer-500) !important;
    color: var(--wp--preset--color--schnee-base) !important;
    border-radius: 0;
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    transition:
        background-color var(--uni-hover-transition, 220ms ease-in-out),
        border-color var(--uni-hover-transition, 220ms ease-in-out),
        color var(--uni-hover-transition, 220ms ease-in-out);
}

.wp-block-button__link:hover {
    color: var(--wp--preset--color--schnee-base) !important;
    background: var(--wp--preset--color--feuer-700) !important;
    border: 2px solid var(--wp--preset--color--feuer-700) !important;
}

.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--karbon) !important;
    outline-offset: 2px;
}
.wp-block-button__link:active {
    color: var(--wp--preset--color--schnee-base) !important;
    background: var(--wp--preset--color--feuer-800) !important;
    border: 2px solid var(--wp--preset--color--feuer-800) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--feuer-500) !important;
    color: var(--wp--preset--color--karbon) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--feuer-700) !important;
    color: var(--wp--preset--color--karbon) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:active {
    background: var(--wp--preset--color--feuer-500-10) !important;
    border: 2px solid var(--wp--preset--color--feuer-800) !important;
    color: var(--wp--preset--color--karbon) !important;
}

.wp-block-button.is-style-dark .wp-block-button__link {
    background: var(--wp--preset--color--saphir-500) !important;
    border: 2px solid var(--wp--preset--color--saphir-500) !important;
    color: var(--wp--preset--color--schnee-base) !important;
}

.wp-block-button.is-style-dark .wp-block-button__link:hover {
    background: var(--wp--preset--color--saphir-700) !important;
    border: 2px solid var(--wp--preset--color--saphir-700) !important;
    color: var(--wp--preset--color--schnee-base) !important;
}

.wp-block-button.is-style-dark .wp-block-button__link:active {
    background: var(--wp--preset--color--saphir-800) !important;
    border: 2px solid var(--wp--preset--color--saphir-800) !important;
    color: var(--wp--preset--color--schnee-base) !important;
}

.wp-block-button.is-style-light .wp-block-button__link {
    background: var(--wp--preset--color--schnee-base) !important;
    border: 2px solid var(--wp--preset--color--schnee-base) !important;
    color: var(--wp--preset--color--karbon) !important;
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
    background: #e5e5e5 !important;
    border: 2px solid #e5e5e5 !important;
    color: var(--wp--preset--color--karbon) !important;
}

.wp-block-button.is-style-light .wp-block-button__link:active {
    background: var(--wp--preset--color--schnee-dark) !important;
    border: 2px solid var(--wp--preset--color--schnee-dark) !important;
    color: var(--wp--preset--color--karbon) !important;
}

/*
 * Groesse "Klein" (uniplus-gutenberg, UniplusCoreButtonIcon): 44px hoch. Figma 10px/20px
 * Innenabstand inkl. des 2px-Rahmens, der dort innen liegt. "Dezent" ist ohne Rahmen schon
 * 44px hoch, "Link" und "Icon-Link" haben keinen Innenabstand.
 */
.wp-block-button.is-size-small:not(.is-style-subtle):not(.is-style-link):not(.is-style-icon-link) .wp-block-button__link {
    padding: 8px 18px;
}

/*
 * Flacher, halbtransparenter Karbon-Button ohne Hover-Wechsel -- Vorbild war
 * der "Alle Kurse"-Link der Merkliste (.merkliste-kurse__link), den diese
 * Variante inzwischen ersetzt hat.
 * Rahmenlos, deshalb border: none statt der 2px des Basis-Buttons; der Hover
 * bleibt absichtlich gleich, das Original aendert dort nur die Farbe auf
 * denselben Wert. Die Ausrichtung (im Original float: right) gehoert nicht
 * in die Variante --
 * dafuer gibt es die Ausrichtungs-Option des Buttons-Containers; ein float
 * greift im Flex-Container .wp-block-buttons ohnehin nicht.
 */
.wp-block-button.is-style-subtle .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--wp--preset--color--karbon-40) !important;
    border: none !important;
    color: var(--wp--preset--color--schnee-base) !important;
    font-weight: 530;
    text-decoration: none;
}

.wp-block-button.is-style-subtle .wp-block-button__link:hover,
.wp-block-button.is-style-subtle .wp-block-button__link:active {
    background: var(--wp--preset--color--karbon-40) !important;
    border: none !important;
    color: var(--wp--preset--color--schnee-base) !important;
}

/*
 * Icons aus assets/icons als CSS-Maske, eingefaerbt ueber die Textfarbe.
 * vertical-align setzt die Icon-Mitte auf die halbe Versalhoehe (1cap) und
 * zentriert sie damit optisch zum Text; davor ein Fallback ohne cap-Einheit.
 *
 * Buttons: Icon links und/oder rechts, 18px, 8px Abstand. Die waehlbaren Icons setzt
 * uniplus-gutenberg (UniplusCoreButtonIcon) als --uni-button-icon(-left). Pfeil-Icon
 * per CSS statt als <i class="bi ..."> im RichText-Inhalt des Buttons:
 * eingebettetes HTML ueberlebt Gutenbergs Validierung nicht zuverlaessig
 * ("Block contains unexpected or invalid content").
 */
.wp-block-button.has-uni-icon .wp-block-button__link::after,
.wp-block-button.has-arrow-icon .wp-block-button__link::after,
.wp-block-button.is-style-link .wp-block-button__link::after,
.wp-block-button.has-uni-icon-left .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    background-color: currentColor;
    mask: var(--uni-button-icon, url("assets/icons/line-arrow-right-1.svg")) center / contain no-repeat;
    vertical-align: -0.25em;
    vertical-align: calc((1cap - 18px) / 2);
}

.wp-block-button.has-uni-icon-left .wp-block-button__link::before {
    margin-left: 0;
    margin-right: 8px;
    mask-image: var(--uni-button-icon-left);
}

/* Dezent ist bereits ein Flex-Container mit gap: 8px. */
.wp-block-button.is-style-subtle .wp-block-button__link::before,
.wp-block-button.is-style-subtle .wp-block-button__link::after {
    margin-left: 0;
    margin-right: 0;
}

.wp-block-button.is-style-link .wp-block-button__link {
    padding: 0;
    background: transparent !important;
    border: none !important;
    color: var(--wp--preset--color--primary) !important;
    text-decoration: none;
}

.wp-block-button.is-style-link .wp-block-button__link:hover,
.wp-block-button.is-style-link .wp-block-button__link:active {
    background: transparent !important;
    border: none !important;
    color: var(--wp--preset--color--feuer-700) !important;
}

/* Icon-Link: Optik wie der Link im Datei-Block, Icon links waehlbar (sonst Kette). */
.wp-block-button.is-style-icon-link .wp-block-button__link {
    padding: 0;
    background: transparent !important;
    border: none !important;
    color: var(--wp--preset--color--karbon) !important;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

.wp-block-button.is-style-icon-link .wp-block-button__link:hover,
.wp-block-button.is-style-icon-link .wp-block-button__link:active {
    background: transparent !important;
    border: none !important;
    color: var(--wp--preset--color--feuer-700) !important;
}

.wp-block-button.is-style-icon-link .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
    background-color: var(--wp--preset--color--feuer-500);
    mask: var(--uni-button-icon-left, url("assets/icons/link-chain.svg")) center / contain no-repeat;
    vertical-align: -0.25em;
    vertical-align: calc((1cap - 18px) / 2);
}

/* Tagline: Pfeil vor dem Text in Schriftgroesse. */
.wp-block-paragraph.is-style-tagline::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 8px;
    background-color: currentColor;
    mask: url("assets/icons/line-arrow-right-1.svg") center / contain no-repeat;
    vertical-align: -0.15em;
    vertical-align: calc((1cap - 1em) / 2);
}

/* Listen-Stile "Haekchen" und "Pfeil": Icon 18px, 8px Abstand, Folgezeilen eingerueckt. */
.wp-block-list.is-style-check,
.wp-block-list.is-style-arrow {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-check > li,
.wp-block-list.is-style-arrow > li {
    padding-left: 26px;
}

/* Im Editor steht der Text in einem eigenen <div> im <li> -- das Icon gehoert dort an das <div>. */
.wp-block-list.is-style-check > li::before,
.wp-block-list.is-style-arrow > li::before,
.wp-block-list.is-style-check > li > .block-editor-rich-text__editable::before,
.wp-block-list.is-style-arrow > li > .block-editor-rich-text__editable::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: -26px;
    margin-right: 8px;
    background-color: var(--wp--preset--color--feuer-500);
    mask: url("assets/icons/check-circle-2.svg") center / contain no-repeat;
    vertical-align: -0.25em;
    vertical-align: calc((1cap - 18px) / 2);
}

.wp-block-list.is-style-arrow > li::before,
.wp-block-list.is-style-arrow > li > .block-editor-rich-text__editable::before {
    mask-image: url("assets/icons/button-play.svg");
}

.wp-block-list.is-style-check > li:has(> .block-editor-rich-text__editable)::before,
.wp-block-list.is-style-arrow > li:has(> .block-editor-rich-text__editable)::before {
    content: none;
}

/*
 * Datei-Block (Download): Icon links, 18px, 6px Abstand. Standard ist PDF, ein anderes
 * Dateityp-Icon setzt uniplus-gutenberg (UniplusCoreFileIcon) als --uni-file-icon.
 * Hängender Einzug (padding-left = -text-indent = Icon + Abstand): Folgezeilen beginnen
 * bündig mit dem Text, nicht unter dem Icon.
 */
.wp-block-file a:not(.wp-block-file__button) {
    display: inline-block;
    padding-left: 24px;
    text-indent: -24px;
    color: var(--wp--preset--color--karbon);
    font-family: var(--wp--preset--font-family--satoshi), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

.wp-block-file a:not(.wp-block-file__button):hover {
    color: var(--wp--preset--color--feuer-700);
}

.wp-block-file a:not(.wp-block-file__button)::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background-color: var(--wp--preset--color--feuer-500);
    mask: var(--uni-file-icon, url("assets/icons/file-pdf.svg")) center / contain no-repeat;
    vertical-align: -0.25em;
    vertical-align: calc((1cap - 18px) / 2);
}

/*
 * Setzt den WordPress-Standardabstand (24px) zwischen den Bloecken auf oberster Ebene
 * des Seiteninhalts auf 0, damit die Abschnitte (Container) buendig aneinanderstossen --
 * aber nur, wenn kein eigener Block-Abstand eingestellt ist. Container mit eigenem
 * Abstand tragen eine .wp-container-*-Klasse; deren Regel (.wp-container-... > * + *)
 * wuerde sonst von dieser Regel ueberschrieben.
 *
 * Bewusst nur auf oberster Ebene: Verschachtelte Flow-Container wie die Spalte behalten
 * die 24px -- so wie Gruppen (Layout "constrained"), die diese Regel nie erfasst hat.
 *
 * Spezifitaet (0,2,0) statt :root :where(...) mit (0,1,0): Im Editor wird diese Datei vor
 * den Global Styles geladen, bei gleicher Spezifitaet gewann dort deren 24px-Regel
 * (:root :where(.is-layout-flow) > *) -- Editor und Frontend zeigten andere Abstaende.
 */
.wp-block-post-content.is-layout-flow:where(:not([class*="wp-container-"])) > *,
:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}

/*
 * Listen: assets/css/style.css (nur im Frontend geladen) setzt alle ul/ol auf
 * list-style: none, margin: 0, padding: 0 -- fuer Navigationen. Derselbe Reset steht hier,
 * damit der Editor dieselben Standardwerte hat (dort laedt sonst Bootstrap Reboot mit
 * padding-left und margin-bottom). Der Listen-Block bekommt seine Aufzaehlungszeichen
 * und den Einzug zurueck; die Abstaende davor/danach regelt wie bei allen Bloecken das Layout.
 */
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.wp-block-list {
    list-style-type: disc;
    padding-left: 2rem;
}

ol.wp-block-list {
    list-style-type: decimal;
    padding-left: 2rem;
}