/*
 * Samariter Schweiz Portal - Komponenten-Styles
 * Re-Implementation der Tocco-spezifischen Klassen, die in den
 * cleaned Page-HTMLs vorkommen. Bezieht Tokens aus design_tokens.css.
 *
 * Ziel: Wenn diese CSS-Datei + design_tokens.css ins WP-Theme eingebunden
 * werden, sehen alle migrierten Pages identisch zum Original aus.
 */

/* ===========================================================
   Breadcrumb
   ===========================================================
   Tocco-Pattern: <li>...</li> mit Bullet-Trenner
*/
.breadcrumb {
    padding: 8px 0;
    margin-bottom: var(--space-lg);
    list-style: none;
    background-color: transparent;
    font-size: var(--fs-small);
}
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li::before {
    content: var(--breadcrumb-sep) "\00a0";
    padding: 0 5px;
    color: var(--color-text);
}
.breadcrumb a { color: var(--ssb-red); }

/* ===========================================================
   Box-Wrapper (Tile-Boxen wie auf der Tocco-Home)
   ===========================================================
   Layout: 192x192, padding 13px, Title oben links, Pfeil unten links.
*/
.box-wrapper {
    width: 100%;
    aspect-ratio: var(--tile-aspect);
    padding: var(--tile-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    text-decoration: none;
    color: inherit;
}
.box-wrapper .box-title,
.box-wrapper p.box-title,
.box-wrapper h1, .box-wrapper h2, .box-wrapper h3,
.box-wrapper h4, .box-wrapper h5 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}
.box-wrapper p.box-title:nth-of-type(n+2) {
    font-weight: 300;
    font-size: 13px;
    margin-top: 8px;
    color: var(--color-text);
}
.box-wrapper .box-bottom,
.box-wrapper a.box-arrow-link {
    margin-top: auto;
    align-self: flex-start;
    text-align: left;
}
.box-arrow { width: 36px; height: 14px; }

/* Box-Farben + Title-Farben pro Variant (1:1 zum Original) */
.box-wrapper.red.light    { background-color: var(--box-red-light); }
.box-wrapper.red.light .box-title:first-of-type strong,
.box-wrapper.red.light h1, .box-wrapper.red.light h2, .box-wrapper.red.light h3 { color: var(--box-red-title); }

.box-wrapper.violet.light { background-color: var(--box-violet-light); }
.box-wrapper.violet.light .box-title:first-of-type strong,
.box-wrapper.violet.light h1, .box-wrapper.violet.light h2, .box-wrapper.violet.light h3 { color: var(--box-violet-title); }

.box-wrapper.violet.dark  { background-color: var(--box-violet-dark); color: #fff; }
.box-wrapper.violet.dark * { color: #fff; }

.box-wrapper.green.light  { background-color: var(--box-green-light); }
.box-wrapper.green.light .box-title:first-of-type strong,
.box-wrapper.green.light h1, .box-wrapper.green.light h2, .box-wrapper.green.light h3 { color: var(--box-green-title); }

.box-wrapper.blue.light   { background-color: var(--box-blue-light); }
.box-wrapper.blue.light .box-title:first-of-type strong,
.box-wrapper.blue.light h1, .box-wrapper.blue.light h2, .box-wrapper.blue.light h3 { color: var(--box-blue-title); }

.box-wrapper.black        { background-color: transparent; border: 2px solid var(--box-black-border); }
.box-wrapper.black .box-title:first-of-type strong { color: var(--color-text); }
.box-wrapper.black .box-title:first-of-type strong font[color="red"] { color: var(--ssb-red) !important; }

/* ===========================================================
   Person-Wrapper (Mitarbeiter-Foto + Info)
   ===========================================================
   Tocco-Pattern: Geschaeftsstelle-Page hat 25+ dieser Bloecke
*/
.person-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}
.person-wrapper .person-img,
.person-wrapper > img:first-child {
    width: var(--person-img-w);
    height: auto;
    margin-right: var(--person-img-margin);
    margin-bottom: var(--person-img-margin);
}
.person-wrapper p { margin-top: 0; margin-bottom: 0; }
.person-wrapper .person-info {
    flex: 1;
    min-width: 200px;
}
.person-wrapper .person-name { font-weight: var(--fw-bold); }
.person-wrapper .person-function { color: var(--color-text-muted); }

/* ===========================================================
   Tocco-Collapse (Akkordeon, ersetzt Tocco-Bootstrap-Variante)
   ===========================================================
   Aufgeloest als <details><summary>, vom 05_clean_html.py.
   Style angelehnt an Tocco panel-group/accordion.
*/
.tocco-collapse-group {
    margin-bottom: var(--space-lg);
}
/* Apply same accordion-style to legacy tocco-collapse-item AND wp:details-Block */
.tocco-collapse-item,
.wp-block-details {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 8px;
    background: var(--color-bg);
    padding: 0;
}
.tocco-collapse-item > summary,
.wp-block-details > summary {
    padding: 14px 44px 14px 18px;
    cursor: pointer;
    list-style: none;
    position: relative;
    font-weight: var(--fw-regular);
    margin: 0;
    user-select: none;
}
.tocco-collapse-item > summary::-webkit-details-marker,
.wp-block-details > summary::-webkit-details-marker {
    display: none;
}
.tocco-collapse-item > summary::after,
.wp-block-details > summary::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}
.tocco-collapse-item[open] > summary::after,
.wp-block-details[open] > summary::after {
    transform: translateY(-30%) rotate(225deg);
}
.tocco-collapse-item[open] > summary,
.wp-block-details[open] > summary {
    border-bottom: 1px solid var(--color-border);
}
.tocco-collapse-body {
    padding: 14px 18px;
}
.tocco-collapse-body ul {
    margin: 0;
    padding-left: 22px;
}
/* wp:details: nested blocks (paragraph, list) brauchen padding */
.wp-block-details > *:not(summary) {
    padding-left: 18px;
    padding-right: 18px;
}
.wp-block-details > *:not(summary):first-of-type {
    padding-top: 14px;
}
.wp-block-details > *:not(summary):last-of-type {
    padding-bottom: 14px;
}
.wp-block-details ul,
.wp-block-details ol {
    margin: 0;
    padding-left: 22px;
}
.tocco-collapse-body a,
.wp-block-details a {
    color: var(--ssb-red-text, var(--ssb-red));
}

/* ===========================================================
   Tocco-Downloadfolder (Datei-Liste aus Folder)
   ===========================================================
   Aufgeloest als <ul class="tocco-downloadfolder"> mit Datei-Links.
*/
.tocco-downloadfolder,
.tocco-downloads {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--space-lg);
}
.tocco-downloadfolder > li,
.tocco-downloads > li {
    padding: 4px 0 4px 24px;
    position: relative;
}
.tocco-downloadfolder > li::before,
.tocco-downloads > li::before {
    content: "\f1c1";  /* fa-file-pdf-o */
    font-family: var(--font-icon);
    color: var(--ssb-red);
    position: absolute;
    left: 0;
    top: 4px;
}
.tocco-downloadfolder a,
.tocco-downloads a {
    color: var(--ssb-red);
    text-decoration: none;
}
.tocco-downloadfolder a:hover,
.tocco-downloads a:hover { text-decoration: underline; }

/* ===========================================================
   Tocco-Gallery (Imagegallery-Widget)
   =========================================================== */
.tocco-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: var(--space-lg);
}
.tocco-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}

/* ===========================================================
   Tocco-Code (inline HTML-Snippet)
   =========================================================== */
.tocco-code {
    margin-bottom: var(--space-lg);
}

/* ===========================================================
   Funktionale Tocco-Widgets (Container vom WP-Plugin gerendert)
   ===========================================================
   Wird mit [tocco_widget name="..." key="..." config="..."] eingebettet.
*/
.tocco-widget-container {
    margin: var(--space-lg) 0;
    min-height: 200px;
    border: 1px dashed var(--color-border);
    padding: var(--space-md);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}
.tocco-widget-container[data-loaded="true"] {
    border: none;
    background: transparent;
    padding: 0;
}

/* ===========================================================
   Container-Section (Tocco-Block-Wrapper)
   =========================================================== */
.container-section {
    clear: both;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

/* ============================================
   EDITOR-UX-CSS für Gutenberg Block-Editor
   ============================================
   Issue #7: Listen-Bullets-Glyphs fix (Quadrat-Symbole vor Listen-Items)
   Issue #8: Akkordeon-Editor-Visualisierung (klare Sichtbarkeit)
   Issue #9: OL-Spacing
*/

/* Editor: Listen mit normalen Bullets, keine Squares mehr */
.editor-styles-wrapper ul.tocco-downloadfolder,
.editor-styles-wrapper ul.tocco-downloads,
.editor-styles-wrapper .wp-block-list ul.tocco-downloadfolder,
.editor-styles-wrapper .wp-block-list ul.tocco-downloads {
    list-style: none;
}
.editor-styles-wrapper ul.tocco-downloadfolder > li::before,
.editor-styles-wrapper ul.tocco-downloads > li::before {
    content: "📄 ";
    margin-right: 4px;
}

/* Editor: Akkordeon-Items klar sichtbar als "klickbar" */
.editor-styles-wrapper .wp-block-details {
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    background: #fafafa !important;
}
.editor-styles-wrapper .wp-block-details > summary {
    padding: 12px 18px !important;
    background: #f0f0f0;
    cursor: pointer;
    font-weight: 500;
    border-radius: 4px;
    list-style: revert;  /* Browser-default-Pfeil */
}
.editor-styles-wrapper .wp-block-details > summary::before {
    content: "▼ ";
    margin-right: 6px;
    color: #555;
    font-size: 0.85em;
}

/* Editor: OL-Spacing reduzieren */
.editor-styles-wrapper ol li,
.editor-styles-wrapper .wp-block-list[type="ordered"] li,
.editor-styles-wrapper ol.wp-block-list li {
    margin-bottom: 4px;
    line-height: 1.5;
}