/*
 * Weinforum Franken: KI-Hinweis (Hausstandard Muster A).
 * Pill im Header, Hinweisblock im Footer. Alle Klassen tragen das Präfix wf-ki-.
 * Gehört zu mu-plugins/wf-ki-hinweis.php. Farben und Schriften aus dem Theme
 * (Primary #7A1B2D, Secondary #F5F0E8, Text Light #666666, Dark #1A1A1A).
 */

/* Nur für Screenreader */
.wf-ki-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Pill im Header
   Sie steht in der Zeile mit der Telefonnummer, direkt links davor:
   am Desktop als eigener Listenpunkt der Navigation oben rechts,
   mobil im Absatz mit der Telefonnummer. Die Schrift erbt sie von
   dieser Zeile (Familie, Größe, Gewicht, Laufweite, Versalien, Farbe),
   eigen sind nur Rahmen, Rundung und Icon.
   Selektor mit Attribut, damit Link-Regeln von Theme und Blöcken
   die Form nicht überschreiben.
   ------------------------------------------------------------ */

a.wf-ki-pill[data-wf-ki-pill] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    box-sizing: border-box;
    margin: 0;
    padding: 0.3em 0.85em 0.3em 0.65em;
    /* Rahmen aus der Textfarbe der Zeile, mit festem Wert davor für ältere Browser.
       Wechselt der Header die Schriftfarbe, zieht der Rahmen mit. */
    border: 1px solid rgba(42, 42, 42, 0.38);
    border-color: color-mix(in srgb, currentColor 38%, transparent);
    border-radius: 999px;
    background-color: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.15;
    letter-spacing: inherit;
    text-decoration: none;
    text-transform: inherit;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

/* Tipp-Ziel mindestens 44 px hoch, ohne die sichtbare Pill zu vergrößern */
a.wf-ki-pill[data-wf-ki-pill]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    left: -4px;
    height: 44px;
    transform: translateY(-50%);
}

.wf-ki-pill__icon {
    flex: 0 0 auto;
    display: block;
    width: 0.95em;
    height: 0.95em;
}

a.wf-ki-pill[data-wf-ki-pill]:hover,
a.wf-ki-pill[data-wf-ki-pill]:focus-visible {
    border-color: var(--color-primary, #7A1B2D);
    background-color: var(--color-secondary, #F5F0E8);
    color: var(--color-primary, #7A1B2D);
}

a.wf-ki-pill[data-wf-ki-pill]:focus-visible {
    outline: 2px solid var(--color-primary, #7A1B2D);
    outline-offset: 2px;
}

/* Desktop: Listenpunkt vor dem Eintrag mit der Telefonnummer.
   Der Punkt selbst ist null Pixel breit und hebt die Lücke der Zeile wieder auf.
   Die Pill hängt links daran und liegt außerhalb des Flusses: Die Zeile wird
   durch sie weder breiter noch höher, sie kann also auch bei schmalen Fenstern
   nicht umbrechen. Abstand zur Telefonnummer wie zwischen den anderen Punkten. */
.wf-ki-eintrag {
    position: relative;
    flex: 0 0 0;
    align-self: stretch;
    width: 0;
    margin: 0 -1.5rem 0 0;
    padding: 0;
    list-style: none;
}

a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--nav {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    /* 0.09em nach oben: Dann stehen Pill-Text und Ziffern auf derselben Grundlinie */
    transform: translateY(calc(-50% - 0.09em));
    /* Gemischte Schreibweise statt der Versalien der Zeile: Die Kleinbuchstaben sind
       so hoch wie die Mediävalziffern der Telefonnummer. In Versalien wirkte die Pill
       größer als die Nummer. Familie, Größe, Gewicht und Farbe bleiben geerbt. */
    gap: 0.35em;
    padding: 0.2em 0.7em 0.2em 0.55em;
    letter-spacing: normal;
    text-transform: none;
}

/* Icon so hoch wie die Versalien des Pill-Texts */
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--nav .wf-ki-pill__icon {
    width: 0.66em;
    height: 0.66em;
}

/* Mobil, breite Ansicht (ab 481 px): im Absatz direkt links vor der Telefonnummer,
   auf deren Mittellinie */
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--zeile {
    top: -0.11em;
    margin-right: 0.6em;
    padding-top: 0.12em;
    padding-bottom: 0.12em;
    vertical-align: middle;
}

/* Handy: direkt vor der Telefonnummer läge die Pill über der Spitze des Logos.
   Sie steht deshalb in derselben Zeile links außen, bündig mit dem Logo,
   etwas kleiner und auf der Mittellinie der Telefonnummer (Bezug: der Absatz). */
@media (max-width: 480px) {
    .wf-ki-zeile {
        position: relative;
    }

    a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--zeile {
        position: absolute;
        top: 50%;
        left: 20px;
        /* über der Logo-Gruppe, sonst ginge ein Tipp auf den unteren Rand an das Logo */
        z-index: 2;
        height: 22px;
        margin: 0;
        padding: 0 0.42em 0 0.32em;
        gap: 0.25em;
        font-size: 0.875rem;
        line-height: 1;
        transform: translateY(-50%);
    }

    /* das Tipp-Ziel hängt an der Pill, die Verschiebung ist dort schon enthalten */
    a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--zeile::after {
        top: 50%;
    }
}

/* Ersatz 1: im Header gibt es keine Telefonnummer. Dann sitzt die Pill
   hinter dem Logo (Desktop rechts daneben in der oberen Zeile, mobil darüber). */
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--logo,
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--fallback {
    height: 28px;
    padding: 0 11px 0 9px;
    gap: 6px;
    border-color: rgba(42, 42, 42, 0.38);
    border-color: color-mix(in srgb, currentColor 60%, transparent);
    background-color: #fff;
    color: var(--color-text-light, #666666);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;
}

a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--logo:hover,
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--logo:focus-visible,
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--fallback:hover,
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--fallback:focus-visible {
    background-color: var(--color-secondary, #F5F0E8);
    color: var(--color-primary, #7A1B2D);
}

a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--logo {
    position: absolute;
    top: 24px;
    margin: 0 0 0 18px;
    z-index: 2;
}

@media (max-width: 768px) {
    .wf-ki-logo {
        position: relative;
    }

    a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--logo {
        top: -29px;
        left: 0;
        height: 24px;
        margin-left: 0;
        font-size: 0.75rem;
    }
}

/* Ersatz 2: weder Telefonnummer noch Logo gefunden. Die Pill steht klein
   und fixiert links unten, damit der Hinweis nie fehlt. */
a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--fallback {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 998;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Fehlt die Pill nur in einer der beiden Ansichten, erscheint der Ersatz nur dort */
@media (max-width: 768px) {
    a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--nur-desktop {
        display: none;
    }
}

@media (min-width: 769px) {
    a.wf-ki-pill[data-wf-ki-pill].wf-ki-pill--nur-mobil {
        display: none;
    }
}

/* ------------------------------------------------------------
   Hinweisblock im Footer (zwischen Spaltenraster und Copyright-Zeile)
   ------------------------------------------------------------ */

/* section.: eine Stufe über der Abstandsregel des Block-Layouts
   (:root :where(.is-layout-constrained) > *), unabhängig von der Reihenfolge der Stylesheets */
section.wf-ki-hinweis {
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 28px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.875rem;
    line-height: 1.65;
    outline: 2px solid transparent;
    outline-offset: 10px;
    scroll-margin-top: calc(var(--header-height, 140px) + 24px);
    transition: outline-color 0.3s ease;
}

.wf-ki-hinweis__innen {
    max-width: 780px;
}

.wf-ki-hinweis .wf-ki-hinweis__titel {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: none;
}

.wf-ki-hinweis .wf-ki-hinweis__text {
    margin: 0 0 6px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.wf-ki-hinweis .wf-ki-hinweis__text:last-child {
    margin-bottom: 0;
}

.wf-ki-hinweis a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.wf-ki-hinweis a:hover,
.wf-ki-hinweis a:focus-visible {
    color: #fff;
}

.wf-ki-hinweis a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wf-ki-hinweis__link {
    white-space: nowrap;
}

/* Hervorhebung: nach Klick auf die Pill (Klasse per JS), beim Ankersprung ohne JS (:target)
   und solange der Block den Fokus hat */
.wf-ki-hinweis:target,
.wf-ki-hinweis:focus-visible,
.wf-ki-hinweis.is-highlight {
    outline-color: rgba(245, 240, 232, 0.85);
}

/* Fallback: es gab keinen Footer, in den der Block eingesetzt werden konnte */
section.wf-ki-hinweis.wf-ki-hinweis--frei {
    margin: 0;
    padding: 28px 24px;
    border-top: 0;
    background-color: var(--color-dark, #1A1A1A);
    outline-offset: -8px;
}

.wf-ki-hinweis--frei .wf-ki-hinweis__innen {
    margin: 0 auto;
    max-width: 1200px;
}

@media (max-width: 768px) {
    section.wf-ki-hinweis {
        margin-bottom: 24px;
        padding-top: 20px;
    }

    .wf-ki-hinweis .wf-ki-hinweis__titel {
        font-size: 1.125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.wf-ki-pill[data-wf-ki-pill],
    .wf-ki-hinweis,
    .wf-ki-hinweis a {
        transition: none;
    }
}

@media print {
    a.wf-ki-pill[data-wf-ki-pill] {
        display: none;
    }
}