/* ================================================================
   KAGAN THEME — WordPress Block Theme Overrides
   Korrekturen für WP-spezifische Wrapper und Strukturunterschiede
   zum HTML-Prototyp. Nicht: Designänderungen (-> custom.css).
   ================================================================ */


/* ----------------------------------------------------------------
   1. STICKY HEADER FIX
   WordPress wickelt Template-Parts in .wp-block-template-part
   ein. Dieser Wrapper ist genauso hoch wie der Header selbst,
   was den Sticky-Range auf 0 reduziert — der Header "klebt" nie.
   display:contents entfernt die Box des Wrappers aus dem Layout,
   sodass der <header> direkt in .wp-site-blocks steckt (volle
   Seitenhöhe als Sticky-Range).
   ---------------------------------------------------------------- */
@supports selector(:has(*)) {
    .wp-block-template-part:has(> .site-header) {
        display: contents;
    }
}

/* Fallback für Browser ohne :has() — explizite sticky-Deklaration
   mit webkit-Prefix und erhöhtem Specificity. */
.wp-block-template-part > .site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}


/* ----------------------------------------------------------------
   2. WP-SITE-BLOCKS WRAPPER — Layout-Reset
   WordPress kann über theme.json / Global Styles padding oder
   margin auf .wp-site-blocks setzen. Im Prototyp gibt es diesen
   Wrapper nicht — zurücksetzen.
   ---------------------------------------------------------------- */
.wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------------
   3. CLUSTER-BAND LINK-PFEILE — CSS ::before statt HTML-Zeichen
   U+2197 (↗) liegt im Unicode-Emoji-Block. Windows Chrome lädt
   dafür "Segoe UI Emoji" (farbiges Quadrat) statt der Textschrift.
   Lösung: HTML-Spans sind leer (kein Zeichen mehr im Markup).
   Das ::before-Pseudo-Element erzeugt das Zeichen mit einem Font-
   Stack, der immer die Text-Variante liefert:
   - 'Segoe UI Symbol'  → Windows: Text-only Symbolschrift (kein Emoji)
   - 'Apple Symbols'    → macOS: Text-only Symbolschrift
   - 'IBM Plex Sans'    → wenn verfügbar (enthält U+2197)
   - system-ui/sans     → allgemeiner Fallback
   Zusätzlich: font-variant-emoji:text (CSS Fonts Level 4, Chromium
   101+, Firefox 108+, Safari 17.2+) als moderne Sicherheitsschicht.
   ---------------------------------------------------------------- */
.cluster-band__link-arrow {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    /* Unterdrückt HTML-Zeichen falls Span nicht leer ist (z.B. batch-importierte Seiten).
       ::before mit font-size:0.78rem (rem = root-relativ) bleibt davon unberührt. */
    font-size: 0;
    color: transparent;
}

.cluster-band__link-arrow::before {
    content: "\2197"; /* ↗ NORTH EAST ARROW */
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'IBM Plex Sans',
                 system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    font-style: normal;
    font-variant-emoji: text;      /* Erzwingt Text-Darstellung (modern) */
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    color: var(--brass);
    display: inline;
    line-height: 1;
}


/* ----------------------------------------------------------------
   4. MEGA-MENU TOP-OFFSET BEI GESCROLLTEM HEADER
   Wenn der Header auf is-scrolled schrumpft (72px → 56px),
   muss der fixed-positionierte Mega-Menu-Container mitziehen.
   ---------------------------------------------------------------- */
@media (min-width: 769px) {
    .site-header.is-scrolled ~ * .nav-mega.is-open,
    .site-header.is-scrolled + * .nav-mega.is-open {
        /* Deckt den Edge-Case ab, wird über JS mit top-Anpassung
           gehandhabt falls nötig — vorerst statisch bei 72px. */
    }
}


/* ----------------------------------------------------------------
   5. WP-BLOCK-TEMPLATE-PART — Generischer Reset
   Entfernt potenzielle Box-Model-Interferenz für Footer-Wrapper.
   ---------------------------------------------------------------- */
.wp-block-template-part {
    /* Standard-Defaults explizit erzwingen */
    position: static;
    overflow: visible;
}


/* ----------------------------------------------------------------
   6. WORDPRESS SKIP-LINK — Kein visueller Effekt auf Layout
   ---------------------------------------------------------------- */
.skip-link.screen-reader-text {
    position: absolute !important;
    overflow: hidden !important;
}


/* ----------------------------------------------------------------
   7. WP-BLOCK-POST-CONTENT — Layout-Reset für page-leistung
   wp:post-content fügt einen Wrapper-Div ein, der padding/max-width
   aus WP-Themes erhalten kann. Zurücksetzen, damit die Leistungs-
   seiten ohne zusätzliche Einrückung rendern.
   ---------------------------------------------------------------- */
.wp-block-post-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

.entry-content.wp-block-post-content {
    padding: 0 !important;
}


/* ----------------------------------------------------------------
   8. RELATED-CARD-ARROW — Gleicher Fix wie cluster-band (Schritt 3)
   U+2192 (→ RIGHTWARDS ARROW) liegt ebenfalls im Emoji-Block und
   wird auf Windows Chrome via "Segoe UI Emoji" als Emoji gerendert.
   HTML-Spans sind leer. CSS ::before liefert den Text-Pfeil.
   ---------------------------------------------------------------- */
.related-card-arrow {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--sp-xs);
}

.related-card-arrow::before {
    content: "\2192"; /* → RIGHTWARDS ARROW */
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'IBM Plex Sans',
                 system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    font-style: normal;
    font-variant-emoji: text;
    color: var(--c-brand);
    display: inline;
    line-height: 1;
}


/* ----------------------------------------------------------------
   9. AUTHOR-BOX BEM-KLASSEN
   Die HTML-Prototyp-Leistungsseiten nutzen BEM (__body, __name,
   __bio). Die styles.css kennt nur einfache Bindestrich-Namen
   (.author-box-name etc.). Minimale Stile für die BEM-Variante,
   damit der Block wie in der Vorlage aussieht.
   ---------------------------------------------------------------- */
.author-box__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.author-box__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
}

.author-box__bio {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--c-text-muted);
    margin: 0;
}


/* ----------------------------------------------------------------
   10. PAGE-DISCLAIMER
   Rechtlicher Hinweis am Seitenende — dezent, klein, kursiv.
   ---------------------------------------------------------------- */
.page-disclaimer {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--c-text-light);
    font-style: italic;
    margin-top: var(--sp-xl);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--c-border-light);
}


/* ----------------------------------------------------------------
   11. SUMMARY-BOX — Falls styles.css-Version abweicht
   Sicherheits-Überschreibung für die __eyebrow/__text BEM-Namen
   (styles.css kennt bereits summary-box__eyebrow und __text).
   ---------------------------------------------------------------- */
.summary-box {
    background-color: var(--c-surface);
    border-left: 3px solid var(--brass);
    padding: var(--sp-md) var(--sp-lg);
    margin-bottom: var(--sp-xl);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.summary-box__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 var(--sp-xs);
}

.summary-box__text {
    font-size: 0.9375rem;
    line-height: 1.72;
    color: var(--ink-600);
    margin: 0;
}


/* ----------------------------------------------------------------
   12. WISSEN-GRID ERGÄNZUNGEN
   .wissen-more-link  — dezenter "Alle … →" Link unter dem Grid
   .wissen-card-desc  — optionale Kurzbeschreibung in den Karten
   ---------------------------------------------------------------- */
.wissen-more-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-brand, var(--brass));
    text-decoration: none;
    letter-spacing: 0.01em;
}
.wissen-more-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wissen-card-desc {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--c-text-muted);
    margin-top: 0.4em;
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   13. SCROLL-TO-TOP BUTTON
   Erscheint nach 300px Scroll. Brass-Akzent, rund, halbtransparent.
   CSS-Transition übernimmt Ein-/Ausblenden via .is-visible Klasse.
   ---------------------------------------------------------------- */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(184, 136, 79, 0.14);
    border: 1.5px solid rgba(184, 136, 79, 0.32);
    color: var(--brass, #B8884F);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
    pointer-events: none;
}

.scroll-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-to-top:hover,
.scroll-to-top:focus-visible {
    background-color: rgba(184, 136, 79, 0.26);
    outline: 2px solid var(--brass, #B8884F);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .scroll-to-top {
        bottom: 1.25rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }
}