/*
 * ITAU Layout v0.2.0 - docs.itau.uni-weimar.de
 *
 * Wird als Theme-Modul ausgeliefert. Alle Layout-Eigenschaften müssen hier
 * stehen: In Seiteninhalten filtert BookStack (APP_CONTENT_FILTERING Standard,
 * inkl. Allow-List) sowohl style-Blöcke als auch die meisten Inline-Styles
 * heraus. display:grid, display:flex, gap und position überleben im Seiteninhalt
 * nicht.
 *
 * Farbkonvention orientiert sich an den BookStack-Callouts:
 * border-inline-start 3px + Flächenfarbe + html.dark-mode Overrides.
 *
 * WICHTIG: In dieser Datei dürfen in den ersten 2000 Bytes keine Zeichen wie
 * spitze Klammern mit Tagnamen vorkommen. BookStack bestimmt den Content-Type
 * per finfo über die ersten 2000 Bytes; Markup-Beispiele führen zu text/html,
 * das auf text/plain reduziert wird und wegen nosniff nicht als CSS gilt.
 * Das verbindliche Markup steht in der Seite "Layout-Komponenten" der internen
 * Dokumentation.
 */

/* ==========================================================================
   1. Kartenraster
   Struktur: div.itau-cards -> a.itau-card
             a.itau-card -> span.itau-card-title + span.itau-card-text
   ========================================================================== */

.page-content .itau-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.page-content a.itau-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 12px 16px;
    border-inline-start: 3px solid var(--color-primary);
    border-radius: 3px;
    background-color: #f8f8f8;
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

html.dark-mode .page-content a.itau-card {
    background-color: #222;
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.4);
}

.page-content a.itau-card:hover,
.page-content a.itau-card:focus-visible {
    box-shadow: 0 3px 12px -2px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
    text-decoration: none;
}

.page-content a.itau-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/*
 * Das bestehende Custom-Head-CSS hängt an externe Links ein Pfeil-Glyph an:
 *   .page-content a[href^="http"]:not([href^="https://docs.itau.uni-weimar.de"])::after
 * Dessen Spezifität (0,3,1) liegt über der hier möglichen, daher !important.
 */
.page-content a.itau-card::after {
    content: none !important;
}

.page-content .itau-card-title {
    font-weight: 700;
    color: var(--color-link);
}

.page-content .itau-card-text {
    font-size: 0.95em;
    opacity: 0.85;
}

/* ==========================================================================
   2. Tabs
   Struktur: div.itau-tabs -> div.itau-tab (je Abschnitt, erste Überschrift
             dient als Tab-Label)

   Ohne JavaScript (auch im PDF-/HTML-Export, dort werden Scripts entfernt)
   bleiben alle Abschnitte samt Überschrift sichtbar untereinander stehen.
   Erst die Klasse .itau-tabs-ready aktiviert die Tab-Darstellung.
   ========================================================================== */

.page-content .itau-tabs {
    margin: 1.5rem 0;
}

.page-content .itau-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid #ddd;
}

html.dark-mode .page-content .itau-tablist {
    border-bottom-color: #444;
}

.page-content .itau-tab-btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0 0 -2px 0;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
}

.page-content .itau-tab-btn:hover {
    opacity: 1;
}

.page-content .itau-tab-btn[aria-selected="true"] {
    opacity: 1;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.page-content .itau-tab-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.page-content .itau-tabs-ready .itau-tab {
    padding-top: 1rem;
}

.page-content .itau-tabs-ready .itau-tab[hidden] {
    display: none;
}

/* Die als Tab-Label verwendete Überschrift wird nur bei aktiven Tabs versteckt. */
.page-content .itau-tabs-ready .itau-tab-label-source {
    display: none;
}

.page-content .itau-tabs-ready .itau-tab > :first-child {
    margin-top: 0;
}

.page-content .itau-tabs-ready .itau-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   3. kbd Dark-Mode-Korrektur
   Das bestehende Custom-Head-CSS setzt für kbd feste Hellwerte
   (color:#333 auf background-color:#f7f7f7), die im Dark Mode unlesbar sind.
   Hier wird nur der Dark-Mode-Fall ergänzt; die höhere Spezifität von
   html.dark-mode kbd gewinnt unabhängig von der Quellreihenfolge.
   ========================================================================== */

html.dark-mode kbd {
    color: #ddd;
    background-color: #2b2b2b;
    border-color: #555;
    box-shadow: 0 1px 0 #555;
}

/* ==========================================================================
   4. Druck-/Exportverhalten
   ========================================================================== */

@media print {
    .page-content .itau-tablist {
        display: none;
    }

    /* Im Druck alle Tab-Inhalte samt Überschrift ausgeben. */
    .page-content .itau-tabs-ready .itau-tab[hidden] {
        display: block;
    }

    .page-content .itau-tabs-ready .itau-tab-label-source {
        display: block;
    }

    .page-content a.itau-card {
        box-shadow: none;
        transform: none;
    }
}