/*
Theme Name: Statement GmbH - Child Theme
Theme URI: https://agentur-statement.de
Author: Statement GmbH
Author URI: https://agentur-statement.de/
Description: Statement-Themes werden mit dem fortschrittlichsten sicheren Code erstellt und für eine einfache Verwendung optimiert, um Ihnen die beste Erfahrung zu bieten.
Version: 1.0
Template: stmnt
License: Private (Not For Public Use)
Text Domain: stmnt-child
*/

/* Zugehörig zu Shortcode [file_download] (Code liegt in der functions.php des Child-Themes) */

/* Container: nimmt die volle verfügbare Breite ein, ordnet Titel / Info / Button in einer Zeile an */
.file-download {
    --download-btn-width: 40px;
    --download-meta-width: 100px;
    --download-gap: 16px;
    --download-title-width: calc(100% - var(--download-btn-width) - var(--download-meta-width) - 2 * var(--download-gap));
    display: flex;
    align-items: center;
    gap: var(--download-gap);
    width: 100%;
    box-sizing: border-box;
}

/* Titel: fett, normale Textgröße, nimmt den restlichen Platz der Zeile ein */
.file-download__title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--download-title-width);
    font-weight: 700;
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dateiinfo (z.B. "PDF / 0.5 MB"): normaler Text, feste Breite, rechtsbündig */
.file-download__meta {
    flex: 0 0 var(--download-meta-width);
    width: var(--download-meta-width);
    font-weight: 400;
    font-size: 1em;
    line-height: 1; /* verhindert optischen Versatz zur Button-Mitte durch zusätzlichen Zeilenabstand */
    opacity: 0.75;
    text-align: right;
    white-space: nowrap;
}

/* Download-Button: gleiche feste Breite wie .file-download__meta, damit beide Spalten sauber ausgerichtet sind */
.file-download__button {
    flex: 0 0 var(--download-btn-width);
    width: var(--download-btn-width);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #2271b1;
    color: #fff;
    padding: 8px 0;
    border-radius: 4px;
    border: 1px solid #2271b1;
}

/* Hover-/Fokuszustand des Buttons */
.file-download__button:hover,
.file-download__button:focus {
    background: #ffffff;
    border: 1px solid #2271b1;
    color: #135e96;
}

/* Sichtbarer Fokusring für Tastatur-/Screenreader-Nutzung (Barrierefreiheit) */
.file-download__button:focus-visible {
    outline: 2px solid #135e96;
    outline-offset: 2px;
}

/* Download-Icon im Button: eigenes SVG aus dem Child-Theme.
   Per CSS-mask statt <img> eingebunden, damit die Icon-Farbe wie bei einem
   Icon-Font über "currentColor" mitläuft (z.B. beim Hover-Farbwechsel). */
.file-download__icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url('/wp-content/themes/stmnt-child/assets/dist/images/ui-action-download.svg');
    mask-image: url('/wp-content/themes/stmnt-child/assets/dist/images/ui-action-download.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Fehlermeldung, falls die angegebene Datei nicht gefunden wird */
.file-download__error {
    color: #b32d2e;
    font-style: italic;
}

/* Ab 400px und schmäler: zweizeilig umbrechen.
   Zeile 1: Titel über die volle Breite.
   Zeile 2: Meta linksbündig, Button rechtsbündig (space-between verteilt
   die beiden verbleibenden Elemente auf die zweite Zeile). */
@media (max-width: 400px) {
    .file-download {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .file-download__title {
        flex: 1 1 100%;
        max-width: 100%;
        white-space: normal;
    }
    .file-download__meta {
        text-align: left;
    }
}