/* ailh-captchahint (2026-08-01)
 * Zweck dieser Datei: Aussehen des Hinweiskastens, der auf /login und /register erscheint,
 * wenn die Sicherheitsabfrage nicht geladen oder nicht bestaetigt werden konnte.
 * (Markup: resources/views/default/panel/authentication/partials/ailh-captcha-hint.blade.php,
 *  Logik:  public/js/ailh-captcha-hint.js)
 *
 * Nicht ableitbar / bitte beachten:
 *  - Das Tailwind-Bundle dieses Projekts ist VORKOMPILIERT. Neue Utility-Klassen im Markup
 *    haetten keine Wirkung, deshalb steht hier ausschliesslich handgeschriebenes CSS mit
 *    eigenem Praefix "ailh-captcha-hint".
 *  - Der Dunkelmodus schaltet ueber die Klasse body.theme-dark (gesetzt in
 *    panel/layout/partials/mode-script.blade.php), NICHT ueber ein data-theme-Attribut.
 *    Ein [data-theme='dark']-Selektor waere hier wirkungslos.
 *  - Kontrastwerte (WCAG AA, gerechnet, nicht geschaetzt):
 *      hell   Text #5A3200 auf #FFF7E8 = 10,43:1 | Titel #4A2900 = 12,26:1
 *             Link/Summary #7A3D00 = 7,90:1 | Rahmen #C2600A auf Seiten-BG = 3,79:1
 *             Buttontext #FFFFFF auf #7A3D00 = 8,42:1 (Hover #632F00 = 10,74:1)
 *      dunkel Text #FBE3B8 auf #2B1D07 = 13,09:1 | Titel #FFF1D6 = 14,67:1
 *             Link/Summary #FFC46B = 10,43:1 | Rahmen #F0A029 = 7,62:1
 *             Buttontext #241701 auf #F0A029 = 8,15:1 (Hover #FFB74D = 10,10:1)
 */

.ailh-captcha-hint {
    display: block;
    margin-top: 1rem;
    padding: 1rem 1.125rem;
    border: 2px solid #c2600a;
    border-radius: 0.75rem;
    background-color: #fff7e8;
    color: #5a3200;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: start;
}

/* Muss !important sein: das Panel-Bundle setzt an mehreren Stellen display auf
   Container zurueck; ohne das koennte der Kasten trotz hidden-Attribut sichtbar bleiben. */
.ailh-captcha-hint[hidden],
.ailh-captcha-hint [hidden] {
    display: none !important;
}

.ailh-captcha-hint:focus {
    outline: 2px solid #c2600a;
    outline-offset: 2px;
}

.ailh-captcha-hint__title {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0 0 0.5rem;
    color: #4a2900;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

.ailh-captcha-hint__icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    color: #c2600a;
}

.ailh-captcha-hint__text {
    margin: 0 0 0.75rem;
}

.ailh-captcha-hint__details {
    margin: 0 0 0.875rem;
}

.ailh-captcha-hint__details > summary {
    cursor: pointer;
    color: #7a3d00;
    font-weight: 600;
    text-decoration: underline;
    list-style: none;
}

.ailh-captcha-hint__details > summary::-webkit-details-marker {
    display: none;
}

.ailh-captcha-hint__details > summary::before {
    content: "\25B8\00A0";
}

.ailh-captcha-hint__details[open] > summary::before {
    content: "\25BE\00A0";
}

.ailh-captcha-hint__details > summary:focus-visible {
    outline: 2px solid #c2600a;
    outline-offset: 2px;
}

.ailh-captcha-hint__steps {
    margin: 0.625rem 0 0;
    padding-inline-start: 1.25rem;
    list-style: decimal;
}

.ailh-captcha-hint__steps > li {
    margin-bottom: 0.4375rem;
}

.ailh-captcha-hint__steps a {
    color: #7a3d00;
    text-decoration: underline;
}

.ailh-captcha-hint__btn {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-radius: 0.5rem;
    background-color: #7a3d00;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.ailh-captcha-hint__btn:hover {
    background-color: #632f00;
}

.ailh-captcha-hint__btn:focus-visible {
    outline: 2px solid #4a2900;
    outline-offset: 2px;
}

/* --- Dunkelmodus: body.theme-dark, NICHT data-theme --- */

body.theme-dark .ailh-captcha-hint {
    border-color: #f0a029;
    background-color: #2b1d07;
    color: #fbe3b8;
}

body.theme-dark .ailh-captcha-hint:focus {
    outline-color: #f0a029;
}

body.theme-dark .ailh-captcha-hint__title {
    color: #fff1d6;
}

body.theme-dark .ailh-captcha-hint__icon {
    color: #f0a029;
}

body.theme-dark .ailh-captcha-hint__details > summary,
body.theme-dark .ailh-captcha-hint__steps a {
    color: #ffc46b;
}

body.theme-dark .ailh-captcha-hint__details > summary:focus-visible {
    outline-color: #f0a029;
}

body.theme-dark .ailh-captcha-hint__btn {
    background-color: #f0a029;
    color: #241701;
}

body.theme-dark .ailh-captcha-hint__btn:hover {
    background-color: #ffb74d;
}

body.theme-dark .ailh-captcha-hint__btn:focus-visible {
    outline-color: #fff1d6;
}