/*
Theme Name:  Partizipedia Child
Description: Child-Theme für Partizipedia – behutsames Redesign
Template:    partizipedia-theme
Version:     1.0
Author:      Andreas Paust
*/

/* ============================================================
   FARBEN (Referenz)
   Navy:   #1e3f6e
   Orange: #e5621a
   Weiß:   #ffffff
   Text:   #222222
   ============================================================ */


/* ----------------------------------------------------------
   1. LEAD-ABSATZ – orange Randlinie links
      Zielt auf den ersten fetten Absatz im Artikeltext.
      Falls nicht korrekt: im Browser → Rechtsklick auf Absatz
      → "Untersuchen" → Klasse ablesen und Selektor anpassen.
   ---------------------------------------------------------- */

.entry-content > p:first-of-type {
    border-left: 3px solid #e5621a;
    padding-left: 14px;
}


/* ----------------------------------------------------------
   2. LINKS IM ARTIKELTEXT – Hover auf Orange
   ---------------------------------------------------------- */

.entry-content a:hover,
.post-content a:hover {
    color: #e5621a;
    text-decoration-color: rgba(229, 98, 26, 0.4);
}


/* ----------------------------------------------------------
   3. INFOBOX
      Verwendung im Block-Editor:
      Block markieren → Erweitert → Zusätzliche CSS-Klasse
      → "pp-infobox" eingeben.
   ---------------------------------------------------------- */

.pp-infobox {
    background: #fef8f3;
    border: 1px solid #f0d0b0;
    border-left: 3px solid #e5621a;
    border-radius: 0 6px 6px 0;
    padding: 14px 18px;
    margin: 20px 0;
}

.pp-infobox-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #a04010;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}


/* ----------------------------------------------------------
   4. VERWANDTE BEGRIFFE – Chips am Artikelende
      Verwendung: Absatz oder Gruppe mit Klasse
      "pp-related-chips" versehen. Links darin → Chips.
   ---------------------------------------------------------- */

.pp-related-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.pp-related-chips a {
    display: inline-block;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 3px;
    background: #eef2f7;
    color: #1e3f6e !important;
    text-decoration: none !important;
    border: 1px solid #c8d8ec;
    transition: background 0.15s, color 0.15s;
}

.pp-related-chips a:hover {
    background: #1e3f6e !important;
    color: #fff !important;
    border-color: #1e3f6e;
}


/* ----------------------------------------------------------
   5. SIDEBAR – Widget-Titel mit orange Akzent
   ---------------------------------------------------------- */

.widget-title,
.sidebar .widget-title,
.widgettitle {
    font-size: 12px !important;
    font-weight: 700;
    color: #1e3f6e !important;
    border-left: 3px solid #e5621a;
    padding: 4px 8px !important;
    background: #eef2f7;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.sidebar a:hover,
.widget a:hover {
    color: #e5621a;
}


/* ----------------------------------------------------------
   6. BREADCRUMB – falls vorhanden
   ---------------------------------------------------------- */

.breadcrumb,
.breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.breadcrumb a,
.breadcrumbs a {
    color: #1e3f6e;
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: #e5621a;
}


/* ----------------------------------------------------------
   7. A-Z-GRID (optional, mit JavaScript-Snippet aktivieren)
      Anleitung: functions.php enthält ein JS-Snippet,
      das die Buchstabenliste automatisch in ein Grid umbaut.
   ---------------------------------------------------------- */

.pp-alpha-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 8px 0 12px;
}

.pp-alpha-grid a {
    font-size: 11px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #1e3f6e;
    background: #fff;
    border: 1px solid #c8d8ec;
    text-decoration: none !important;
}

.pp-alpha-grid a:hover,
.pp-alpha-grid a.pp-aktiv {
    background: #1e3f6e;
    color: #fff !important;
    border-color: #1e3f6e;
}

.pp-alpha-grid a.pp-leer {
    color: #ccc;
    border-color: #eee;
    pointer-events: none;
}


/* ----------------------------------------------------------
   8. MOBILE – kleine Verbesserungen
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    .entry-content > p:first-of-type {
        border-left: 3px solid #e5621a;
        padding-left: 12px;
    }

    .pp-related-chips {
        gap: 5px;
    }
}