/*
 * Frontend-Styles für das Plugin „Öffnungszeiten".
 *
 * Klassen-Namen 1:1 aus dem Sielemann-Hot-Fix übernommen, damit das
 * bestehende Theme ohne weitere Anpassung weiter rendert.
 *
 * Accessibility (WCAG 2.1 AA, Sprint v0.4 Task #14):
 *  - Akzentfarben über CSS-Variablen, damit User-Themes ohne Plugin-Patch
 *    überschreiben können.
 *  - Farbwerte WCAG-AA gegen weißen Hintergrund geprüft (>= 4.5:1):
 *      #1a6b1a (Grün, „offen"/„öffnet bald")     ~6.0:1 vs. #fff
 *      #b35900 (Orange, „schließt bald")         ~4.7:1 vs. #fff
 *      #555    (Dunkelgrau, „geschlossen")       ~7.5:1 vs. #fff
 *      #666    (Grau, anormal-zu)                ~5.7:1 vs. #fff
 *    Vorher war #228B22 (~3.4:1 vs. #fff) — nicht AA-tauglich für Body-Text.
 *  - Focus-Visible-Pattern für alle interaktiven Elemente.
 *  - prefers-reduced-motion → siehe status-client.js (Tickdown-Drosselung).
 */

:root {
    --oeff-color-open: #1a6b1a;
    --oeff-color-closing-soon: #b35900;
    --oeff-color-opening-soon: #1a6b1a;
    --oeff-color-closed: #555;
    --oeff-color-anormal-zu: #666;
}

.betriebsferien-hinweis {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 4px;
    color: #856404;
}

.betriebsferien-hinweis strong {
    color: #664d03;
}

.oeffnungsstatus {
    display: inline-block;
    font-weight: 500;
}

.oeffnungsstatus--offen {
    color: var(--oeff-color-open);
}

.oeffnungsstatus--schliesst-bald {
    color: var(--oeff-color-closing-soon);
    font-weight: 500;
}

.oeffnungsstatus--oeffnet-bald {
    color: var(--oeff-color-opening-soon);
    font-weight: 500;
}

.oeffnungsstatus--geschlossen {
    color: var(--oeff-color-closed);
}

.oeffnungsstatus--ferien {
    color: var(--oeff-color-closed);
}

.oeffnungszeiten-uebersicht {
    border-collapse: collapse;
}

.oeffnungszeiten-uebersicht th,
.oeffnungszeiten-uebersicht td {
    padding: 4px 12px 4px 0;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

/*
 * „Anormaler Schließtag" — ein Wochentag (Mo–Fr), an dem die Praxis
 * regelmäßig zu hat (z. B. „freitags geschlossen"). Dezenter Stil,
 * damit klar ist: das ist kein Wochenende, sondern eine Information,
 * die Patient:innen aktiv lesen sollen.
 */
.oeffnungszeiten-uebersicht__row--regelmaessig-zu th,
.oeffnungszeiten-uebersicht__row--regelmaessig-zu td {
    color: var(--oeff-color-anormal-zu);
    font-style: italic;
}

/* === Öffnungszeiten Widget-Styles (Drop-in für altes wp-opening-hours-CSS) === */
.op-list-overview {
    margin: 0;
    padding: 0;
}
.op-list-overview .op-cell {
    display: block;
}
.op-list-overview .op-cell-heading {
    font-weight: bold;
    margin-top: 0.5em;
}
.op-list-overview .op-cell-heading:first-child {
    margin-top: 0;
}
span.op-period-time {
    display: block;
}
/* Highlight für aktuellen Tag (grün, Akzent-Variable) */
.op-list-overview .highlighted,
.op-list-overview .op-cell-heading.highlighted,
.op-list-overview .op-cell-periods.highlighted {
    color: var(--oeff-color-open);
}
span.op-period-time.highlighted {
    color: var(--oeff-color-open);
}
span.op-open {
    color: var(--oeff-color-open);
}
span.op-closed {
    color: var(--oeff-color-closed);
}
span.op-next-period,
span.op-today {
    display: block;
}

/*
 * Geschlossene Tage (show_closed_days=true).
 *
 * User-Feedback v0.4 Task #14: Schließtage werden NICHT mehr durch eine
 * Sonder-Farbe oder italic markiert. Der reine Text („Praxis geschlossen"
 * / „geschlossen") trägt die Information; Sonderstyling lenkte zu stark
 * vom restlichen Tabellen-Look ab. Wer Hervorhebung will, kann sie via
 * Theme-CSS gezielt auf `.op-cell-closed` bzw. `.op-cell-abnormal-closure`
 * hinzufügen — die Klassen bleiben im Markup erhalten als Hook.
 */
.op-list-overview .op-cell-closed {
    /* keine Sonderfarbe — wie offene Tage */
}
.op-list-overview .op-cell-abnormal-closure {
    /* keine italic, keine Sonderfarbe — wie offene Tage */
}
span.op-period-time.op-period-closed {
    font-weight: normal;
}

/* === Notfall-Card für [oeffnungszeiten_notfall] === */
.oeff-notfall {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 4px;
    color: #664d03;
}

.oeff-notfall p {
    margin: 0 0 6px 0;
}

.oeff-notfall p:last-child {
    margin-bottom: 0;
}

.oeff-notfall__name {
    font-size: 1.05em;
}

.oeff-notfall__telefon a {
    font-weight: 600;
    text-decoration: none;
}

.oeff-notfall__hinweis {
    color: #856404;
}

/* === Accessibility Helpers === */

/*
 * Screenreader-only-Text — Standard-Pattern (WordPress-Konvention),
 * versteckt visuell, aber bleibt für Assistive-Technologien lesbar.
 */
.oeff-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;
}

/*
 * Sichtbarer Focus-Indikator für alle interaktiven Elemente in den
 * Plugin-Frontend-Templates. Nutzt `currentColor`, damit der Outline-Ton
 * sich an den umgebenden Text anpasst (gut sichtbar in Light- wie
 * Dark-Themes).
 *
 * `:focus-visible` greift nur bei Tastatur-Fokus, nicht bei Maus-Klick —
 * keine störenden Outlines beim Anklicken.
 */
.oeff-notfall a:focus-visible,
.oeffnungszeiten-uebersicht a:focus-visible,
.betriebsferien-hinweis a:focus-visible,
.oeffnungsstatus a:focus-visible,
.op-list-overview a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}