/**
 * FRAU NETZWERKT Theme — Layout-Kleber (FN-19).
 * Nur var(--fn-…) aus tokens.css (Plugin), keine eigenen Farb- oder Größenwerte.
 * Eigene Maße des Themes stehen in rem: ohne Astra ist html wieder 100 %
 * (1rem = 16 px). Die px-Werte in tokens.css bleiben, bis Astra gelöscht ist.
 */

/* ---------- Grundregeln (hatte Astra global gesetzt, das Plugin-CSS rechnet damit) ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video {
    max-width: 100%;
}

img {
    height: auto;
}

/* ---------- Seitengerüst ---------- */

/*
 * Mindestens fensterhoch, der Inhalt (<main>) füllt auf: Auf kurzen Seiten
 * schließt der Footer unten bündig ab statt mit weißem Streifen darunter
 * (Julio, 14.10., „Mitglied werden" auf großem Bildschirm). svh: auf dem Handy
 * die Höhe mit eingeblendeter Adressleiste, sonst scrollt eine kurze Seite.
 */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
    flex: 1 0 auto;
}

/* WordPress setzt zwischen Header, Inhalt und Footer einen Abstand — die Bänder bringen ihren eigenen */
.wp-site-blocks > * {
    margin-block: 0;
}

/*
 * Header und Footer stecken in einem Vorlagen-Teil (<div>). display: contents
 * nimmt diese Hülle aus dem Layout — sonst klebt der Sticky-Header nur
 * innerhalb seiner eigenen, gleich hohen Hülle und scrollt mit weg.
 */
.wp-site-blocks > .fn-theme-kopf,
.wp-site-blocks > .fn-theme-fuss {
    display: contents;
}

/* Seiten ohne Module (Rechtstexte, alte Seiten, Archiv): Luft oben und unten */
.fn-theme-main {
    padding-block: var(--fn-section-space);
}

/* Seiten, die mit Modulen beginnen: die Bänder bringen den Abstand selbst */
.fn-mit-modulen .fn-theme-main,
.fn-theme-main--baender {
    padding-block: 0;
}

/* Magazin-Artikel: unten endet das Weiterlesen-Band selbst */
.fn-theme-main--artikel {
    padding-bottom: 0;
}

.fn-theme-titel {
    margin-bottom: var(--fn-space-6);
}

.fn-theme-titel > * + * {
    margin-top: var(--fn-space-3);
}

.wp-block-post-title,
.wp-block-query-title {
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.fn-theme-eyebrow {
    margin: 0;
    font-size: var(--fn-size-small);
    font-weight: var(--fn-weight-medium);
    letter-spacing: var(--fn-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fn-muted);
}

.fn-theme-artikelbild {
    margin-bottom: var(--fn-space-6);
}

/* ---------- fn-Module im Inhalt ---------- */

/*
 * Bänder und Hero randlos: WordPress zieht alignfull-Blöcke über den
 * Innenabstand der Seite hinaus (useRootPaddingAwareAlignments). Die Blöcke
 * setzen width: 100 % und margin: 0 — hier zurück auf die WordPress-Werte.
 */
.wp-block-post-content > .alignfull:is(.fn-section, .wp-block-fn-hero) {
    width: auto;
    max-width: none;
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
}

/* Zwischen zwei Bändern kein weißer Spalt (WordPress setzt sonst den Block-Abstand) */
.wp-block-post-content > :is(.fn-section, .wp-block-fn-hero) {
    margin-block: 0;
}

/* Normaler Text direkt nach einem Band: Abstand wie zwischen Sektionen */
.wp-block-post-content > :is(.fn-section, .wp-block-fn-hero) + :not(.fn-section, .wp-block-fn-hero) {
    margin-block-start: var(--fn-section-space);
}

/*
 * Dasselbe im Editor: Dort sind die Module in Block-Hüllen (div[data-type="fn/…"])
 * statt direkt .fn-section, die Regeln oben greifen nicht. Sonst bleibt der
 * Block-Abstand (24 px) als weißer Spalt zwischen den Bändern (Daisy, 19.10.).
 */
.editor-styles-wrapper :is(.is-root-container, .wp-block-post-content) > .wp-block[data-type^="fn/"] {
    margin-block: 0;
}

.editor-styles-wrapper :is(.is-root-container, .wp-block-post-content) > .wp-block[data-type^="fn/"] + .wp-block:not([data-type^="fn/"]) {
    margin-block-start: var(--fn-section-space);
}

/* ---------- Textbreiten (Julio, 2026-10-11) ---------- */

/*
 * Fließtext läuft auf --fn-measure (640 px, theme.json contentSize). Kästen
 * im Text dürfen breiter sein (--fn-measure-wide): Erklär-Kästen der
 * Master-Seite und die Event-Eckdaten. Die Breite des Seiten-Innenabstands
 * steckt schon in der Seite — die Kästen brauchen keinen eigenen Rand mehr.
 */
.wp-block-post-content > :is(.fn-erklaerung, .fn-event-eckdaten) {
    width: auto;
    max-width: var(--fn-measure-wide);
}

/* ---------- Text aus nativen Blöcken (Rechtstexte, Artikel, alte Seiten) ---------- */

/* Gilt nicht in fn-Modulen — die gestalten ihre Links selbst */
.wp-block-post-content a:where(:not(.fn-section a, .wp-block-fn-hero a, .wp-element-button, .fn-btn)) {
    text-decoration-color: var(--fn-color-honey-melon);
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 0.1875rem;
}

.wp-block-post-content a:where(:not(.fn-section a, .wp-block-fn-hero a, .wp-element-button, .fn-btn)):hover {
    text-decoration-color: currentColor;
}

.wp-block-post-content > :where(h2, h3, h4) {
    margin-block-start: var(--fn-space-6);
}

.wp-block-post-content :where(strong, b) {
    font-weight: var(--fn-weight-medium);
}

/* ---------- Magazin-Artikel (FN-17, Gestaltungs-Review 2026-10-11) ---------- */

/*
 * Erster Absatz als Lead: Jost Light, groß — wirkt nach Heft, ohne dass die
 * Redaktion etwas tun muss (A2). Nicht, wenn ein Vorspann (Auszug) im Kopf
 * steht: Body-Klasse aus dem Plugin (inc/magazin.php).
 */
body:not(.fn-artikel--mit-vorspann) .fn-theme-main--artikel .wp-block-post-content > p:first-child {
    font-size: var(--fn-size-zitat);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-h3);
}

/*
 * Zwischenüberschriften im Artikel in normaler Schreibweise, Medium, H3-Größe —
 * Versal-H2 mitten im Fließtext wirkt laut (A3, Frage an Daisy). Zurück auf
 * Versal: diese Regel löschen.
 */
.fn-theme-main--artikel .wp-block-post-content :where(h2, h3, h4) {
    font-size: var(--fn-size-h3);
    line-height: var(--fn-leading-h3);
    letter-spacing: 0;
    text-transform: none;
}

/* Zitat: ein Satz, groß und leicht, mit Honey-Melon-Linie (A4; Linie und Einzug aus theme.json) */
.fn-theme-main--artikel .wp-block-post-content > .wp-block-quote {
    margin-block: var(--fn-space-6);
}

.fn-theme-main--artikel .wp-block-quote p {
    font-size: var(--fn-size-zitat);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-h3);
}

.fn-theme-main--artikel .wp-block-quote p strong {
    font-weight: var(--fn-weight-regular);
}

.fn-theme-main--artikel .wp-block-quote cite {
    display: block;
    margin-top: var(--fn-space-3);
    font-size: var(--fn-size-small);
    font-style: normal;
    letter-spacing: var(--fn-tracking-small);
    color: var(--fn-muted);
}

:where(a, button, input, .wp-element-button):focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 2px;
}

/* ---------- Listen (Archiv, Suche) ---------- */

.fn-theme-liste .wp-block-post-template {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fn-theme-liste .wp-block-post-template > li {
    padding-block: var(--fn-space-5);
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-theme-liste .wp-block-post-template > li > * + * {
    margin-top: var(--fn-space-2);
}

.fn-theme-liste .wp-block-post-title a {
    text-decoration: none;
}

.fn-theme-liste .wp-block-post-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--fn-color-honey-melon);
}

.fn-theme-liste .wp-block-query-pagination {
    margin-top: var(--fn-space-5);
}

/* ---------- Suche ---------- */

.wp-block-search__inside-wrapper {
    gap: var(--fn-space-2);
}

.wp-block-search__input {
    min-height: var(--fn-touch-target);
    padding: 0 var(--fn-space-3);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius);
    font: inherit;
    color: var(--fn-text);
    background: var(--fn-color-white);
}

.wp-block-search__input:focus {
    border-color: var(--fn-color-honey-melon);
    outline: 2px solid var(--fn-focus);
    outline-offset: 0;
}

/* ---------- Bildschirmleser-Text (Header, Footer und Blöcke nutzen die Klasse) ---------- */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Editor ---------- */

/* Header-Vorschau im Editor nicht über den Inhalt kleben lassen */
.editor-styles-wrapper .fn-header {
    position: relative;
}

/* Im Editor läuft header.js nicht — Leiste trotzdem einzeilig zeigen statt umzubrechen */
.editor-styles-wrapper .fn-header__inner,
.editor-styles-wrapper .fn-header__menu {
    flex-wrap: nowrap;
}

.editor-styles-wrapper .fn-header__inner {
    overflow: hidden;
}