/**
 * QUEST Frontend Layout & Styling.
 *
 * Theme-adaptiver, cleaner Stil fuer alle [quest_*]-Shortcodes. Tokens
 * basieren auf color-mix(currentColor, transparent) — Cards/Inputs
 * adaptieren sich automatisch an die Section-Schriftfarbe (helle Schrift
 * auf dunkler Section -> leicht aufgehellte Surfaces; umgekehrt analog).
 *
 * BEM-Prefix idf-quest__. Avada/Theme kann jeden Token ueberschreiben:
 *   .idf-quest { --quest-color-primary: #ff5d3b; }
 */

/* ----------------------------------------------------------------
   1. DESIGN-TOKENS
---------------------------------------------------------------- */

.idf-quest,
[class*="idf-quest__"] {
    /* Theme-neutral, color-mix auf currentColor — funktioniert dark wie light */
    --quest-color-text:          currentColor;
    --quest-color-muted:         color-mix(in srgb, currentColor 65%, transparent);
    --quest-color-faint:         color-mix(in srgb, currentColor 40%, transparent);
    --quest-color-surface:       color-mix(in srgb, currentColor  4%, transparent);
    --quest-color-surface-alt:   color-mix(in srgb, currentColor  9%, transparent);
    --quest-color-border:        color-mix(in srgb, currentColor 18%, transparent);
    --quest-color-border-strong: color-mix(in srgb, currentColor 32%, transparent);

    /* Brand-Akzent: QUEST-Limegruen */
    --quest-color-primary:       #b6f23a;
    --quest-color-primary-strong:#9ee61f;
    --quest-color-primary-ink:   #0a1808;
    --quest-color-focus:         #b6f23a;

    /* Status-Farben — Tints per color-mix, lesbar auf hell und dunkel */
    --quest-status-draft-c:        currentColor;
    --quest-status-pending-c:      #fbbf24;
    --quest-status-publish-c:      #60a5fa;
    --quest-status-in-rotation-c:  #c084fc;
    --quest-status-hyped-c:        #f472b6;
    --quest-status-scheduled-c:    #22d3ee;
    --quest-status-active-c:       #34d399;
    --quest-status-completed-c:    currentColor;
    --quest-status-archived-c:     currentColor;

    /* Badge-Rarities */
    --quest-badge-bronze:    #d97706;
    --quest-badge-silber:    #cbd5e1;
    --quest-badge-silver:    #cbd5e1;
    --quest-badge-gold:      #facc15;
    --quest-badge-legendaer: #c084fc;
    --quest-badge-legendary: #c084fc;

    --quest-radius-sm:   6px;
    --quest-radius-md:   12px;
    --quest-radius-lg:   18px;
    --quest-radius-pill: 999px;

    --quest-space-2xs: .25rem;
    --quest-space-xs:  .5rem;
    --quest-space-sm:  .75rem;
    --quest-space-md:  1rem;
    --quest-space-lg:  1.5rem;
    --quest-space-xl:  2rem;
    --quest-space-2xl: 3rem;

    --quest-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--quest-color-primary) 45%, transparent);

    /* Schrift — generell einen Tick groesser als WP-Defaults */
    --quest-font-size-xs: .9rem;
    --quest-font-size-sm: .9375rem;
    --quest-font-size-md: 1.0625rem;
    --quest-font-size-lg: 1.25rem;
    --quest-font-size-xl: 1.5rem;

    color: var(--quest-color-text);
    font-size: var(--quest-font-size-md);
    line-height: 1.55;
}

/* ----------------------------------------------------------------
   2. LISTEN-RESETS
---------------------------------------------------------------- */

.idf-quest__board,
.idf-quest__rotation,
.idf-quest__archive,
.idf-quest__leaderboard,
.idf-quest__sponsors,
.idf-quest__badges,
.idf-quest__invite-list,
.idf-quest__calendar,
.idf-quest__result-gallery,
.idf-quest__my-sessions {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------------
   3. BOARD (Session-Grid) + CARD
---------------------------------------------------------------- */

.idf-quest__board,
.idf-quest__archive,
.idf-quest__my-sessions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--quest-space-lg);
    width: 100%;
}

.idf-quest__card {
    display: flex;
    flex-direction: column;
    gap: var(--quest-space-sm);
    padding: var(--quest-space-lg);
    background: var(--quest-color-surface);
    border: 1px solid var(--quest-color-border);
    border-radius: var(--quest-radius-md);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.idf-quest__card:hover {
    background: var(--quest-color-surface-alt);
    border-color: var(--quest-color-border-strong);
    transform: translateY(-2px);
}

.idf-quest__card-title {
    margin: 0;
    font-size: var(--quest-font-size-lg);
    font-weight: 700;
    line-height: 1.3;
}

.idf-quest__card-title a {
    color: inherit;
    text-decoration: none;
}

.idf-quest__card-title a:hover,
.idf-quest__card-title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.idf-quest__card-excerpt {
    margin: 0;
    color: var(--quest-color-muted);
    font-size: var(--quest-font-size-sm);
}

/* ----------------------------------------------------------------
   4. STATUS-PILLS — theme-adaptiv ueber color-mix
---------------------------------------------------------------- */

.idf-quest__status {
    display: inline-flex;
    align-items: center;
    gap: var(--quest-space-2xs);
    width: max-content;
    padding: .25em .75em;
    border-radius: var(--quest-radius-pill);
    font-size: var(--quest-font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
    background: color-mix(in srgb, var(--quest-color-text) 8%, transparent);
    color: var(--quest-color-text);
}

.idf-quest__status::before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
}

.idf-quest__status--draft         { color: var(--quest-status-draft-c);
                                    background: color-mix(in srgb, var(--quest-status-draft-c) 12%, transparent); }
.idf-quest__status--pending       { color: var(--quest-status-pending-c);
                                    background: color-mix(in srgb, var(--quest-status-pending-c) 18%, transparent); }
.idf-quest__status--publish       { color: var(--quest-status-publish-c);
                                    background: color-mix(in srgb, var(--quest-status-publish-c) 18%, transparent); }
.idf-quest__status--qs_in_rotation{ color: var(--quest-status-in-rotation-c);
                                    background: color-mix(in srgb, var(--quest-status-in-rotation-c) 18%, transparent); }
.idf-quest__status--qs_hyped      { color: var(--quest-status-hyped-c);
                                    background: color-mix(in srgb, var(--quest-status-hyped-c) 18%, transparent); }
.idf-quest__status--qs_scheduled  { color: var(--quest-status-scheduled-c);
                                    background: color-mix(in srgb, var(--quest-status-scheduled-c) 18%, transparent); }
.idf-quest__status--qs_active     { color: var(--quest-status-active-c);
                                    background: color-mix(in srgb, var(--quest-status-active-c) 18%, transparent); }
.idf-quest__status--qs_completed  { color: var(--quest-color-muted); }
.idf-quest__status--qs_archived   { color: var(--quest-color-faint); }

/* ----------------------------------------------------------------
   5. ROTATION & LEADERBOARD
---------------------------------------------------------------- */

.idf-quest__rotation {
    display: flex;
    flex-direction: column;
    gap: var(--quest-space-xs);
    width: 100%;
}

.idf-quest__rotation-item {
    display: flex;
    align-items: center;
    gap: var(--quest-space-md);
    padding: var(--quest-space-sm) var(--quest-space-md);
    background: var(--quest-color-surface);
    border: 1px solid var(--quest-color-border);
    border-left: 3px solid var(--quest-color-primary);
    border-radius: var(--quest-radius-sm);
}

.idf-quest__rotation-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25em;
    height: 2.25em;
    padding: 0 .5em;
    background: var(--quest-color-primary);
    color: var(--quest-color-primary-ink);
    border-radius: var(--quest-radius-pill);
    font-weight: 700;
    font-size: var(--quest-font-size-sm);
}

.idf-quest__rotation-votes {
    margin-left: auto;
    color: var(--quest-color-muted);
    font-size: var(--quest-font-size-sm);
    white-space: nowrap;
}

.idf-quest__leaderboard {
    counter-reset: idf-quest-rank;
    border-top: 1px solid var(--quest-color-border);
}

.idf-quest__leaderboard li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--quest-space-md);
    padding: var(--quest-space-sm) 0;
    border-bottom: 1px solid var(--quest-color-border);
}

.idf-quest__leaderboard li::before {
    counter-increment: idf-quest-rank;
    content: counter(idf-quest-rank);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75em;
    height: 1.75em;
    background: var(--quest-color-surface-alt);
    color: var(--quest-color-muted);
    border-radius: var(--quest-radius-pill);
    font-weight: 700;
    font-size: var(--quest-font-size-sm);
}

/* ----------------------------------------------------------------
   6. SPONSOREN
---------------------------------------------------------------- */

.idf-quest__sponsors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--quest-space-lg);
}

.idf-quest__sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: var(--quest-space-md);
    background: var(--quest-color-surface);
    border: 1px solid var(--quest-color-border);
    border-radius: var(--quest-radius-md);
}

.idf-quest__sponsor img {
    max-width: 100%;
    max-height: 80px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ----------------------------------------------------------------
   7. ABZEICHEN
---------------------------------------------------------------- */

.idf-quest__badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--quest-space-md);
}

.idf-quest__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quest-space-xs);
    padding: var(--quest-space-md);
    text-align: center;
    background: var(--quest-color-surface);
    border: 1px solid var(--quest-color-border);
    border-radius: var(--quest-radius-md);
    transition: transform .15s ease, background .15s ease;
}

.idf-quest__badge:hover {
    transform: translateY(-2px);
    background: var(--quest-color-surface-alt);
}

.idf-quest__badge img {
    max-width: 96px;
    height: auto;
}

.idf-quest__badge span {
    font-size: var(--quest-font-size-sm);
    font-weight: 600;
}

.idf-quest__badge--bronze    { border-top: 3px solid var(--quest-badge-bronze); }
.idf-quest__badge--silber,
.idf-quest__badge--silver    { border-top: 3px solid var(--quest-badge-silber); }
.idf-quest__badge--gold      { border-top: 3px solid var(--quest-badge-gold); }
.idf-quest__badge--legendaer,
.idf-quest__badge--legendary { border-top: 3px solid var(--quest-badge-legendaer); }

/* ----------------------------------------------------------------
   8. PROFIL
---------------------------------------------------------------- */

.idf-quest__profile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--quest-space-md) var(--quest-space-xl);
    align-items: start;
    width: 100%;
    padding: var(--quest-space-lg);
    background: var(--quest-color-surface);
    border: 1px solid var(--quest-color-border);
    border-radius: var(--quest-radius-lg);
}

.idf-quest__profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--quest-color-surface-alt);
    grid-row: span 3;
}

.idf-quest__profile-name {
    margin: 0;
    font-size: var(--quest-font-size-xl);
    font-weight: 700;
}

.idf-quest__profile-age {
    margin: 0;
    color: var(--quest-color-muted);
    font-size: var(--quest-font-size-sm);
}

.idf-quest__profile-bio {
    margin: 0;
}

/* ----------------------------------------------------------------
   9. EINLADUNGSCODES
---------------------------------------------------------------- */

.idf-quest__invite {
    display: flex;
    flex-direction: column;
    gap: var(--quest-space-md);
    width: 100%;
}

.idf-quest__invite-new {
    padding: var(--quest-space-md);
    background: var(--quest-color-surface-alt);
    border: 1px dashed var(--quest-color-border-strong);
    border-radius: var(--quest-radius-md);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--quest-font-size-md);
    word-break: break-all;
}

.idf-quest__invite-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--quest-color-border);
}

.idf-quest__invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--quest-space-md);
    padding: var(--quest-space-xs) 0;
    border-bottom: 1px solid var(--quest-color-border);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--quest-font-size-sm);
}

.idf-quest__invite-item--used,
.idf-quest__invite-item--expired {
    color: var(--quest-color-muted);
    text-decoration: line-through;
}

/* ----------------------------------------------------------------
   10. KALENDER + RESULT-GALERIE
---------------------------------------------------------------- */

.idf-quest__calendar {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--quest-color-border);
    width: 100%;
}

.idf-quest__calendar-item {
    display: flex;
    gap: var(--quest-space-md);
    padding: var(--quest-space-sm) 0;
    border-bottom: 1px solid var(--quest-color-border);
}

.idf-quest__calendar-date {
    flex: 0 0 auto;
    min-width: 12em;
    color: var(--quest-color-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.idf-quest__result-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--quest-space-xs);
    margin-top: var(--quest-space-md);
}

.idf-quest__result-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--quest-radius-sm);
    display: block;
}

/* ----------------------------------------------------------------
   11. FORMS — transparent in Theme-Section integriert, volle Breite
---------------------------------------------------------------- */

.idf-quest__form {
    display: flex;
    flex-direction: column;
    gap: var(--quest-space-lg);
    width: 100%;
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
}

.idf-quest__field {
    display: flex;
    flex-direction: column;
    gap: var(--quest-space-xs);
}

.idf-quest__field > label,
.idf-quest__field > span:first-child {
    font-size: var(--quest-font-size-md);
    font-weight: 600;
    color: var(--quest-color-text);
}

/* Inputs: dezent transparent, hohe Spezifitaet damit Avada nicht ueberschreibt */
.idf-quest .idf-quest__field input:not([type="checkbox"]):not([type="radio"]),
.idf-quest__form .idf-quest__field input:not([type="checkbox"]):not([type="radio"]),
.idf-quest__field input:not([type="checkbox"]):not([type="radio"]),
.idf-quest__field textarea,
.idf-quest__field select {
    width: 100%;
    padding: .85rem 1rem;
    background: var(--quest-color-surface);
    color: var(--quest-color-text);
    border: 1px solid var(--quest-color-border-strong);
    border-radius: var(--quest-radius-sm);
    font: inherit;
    font-size: var(--quest-font-size-md);
    line-height: 1.5;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: none;
}

.idf-quest__field input:focus,
.idf-quest__field textarea:focus,
.idf-quest__field select:focus {
    outline: none;
    border-color: var(--quest-color-focus);
    background: var(--quest-color-surface-alt);
    box-shadow: var(--quest-shadow-focus);
}

.idf-quest__field input::placeholder,
.idf-quest__field textarea::placeholder {
    color: var(--quest-color-faint);
    opacity: 1;
}

.idf-quest__field textarea {
    min-height: 9em;
    resize: vertical;
}

.idf-quest__field input[type="checkbox"],
.idf-quest__field input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    accent-color: var(--quest-color-primary);
}

/* Checkbox-/Radio-Felder bekommen ein horizontales Label-Layout */
.idf-quest__field:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: var(--quest-space-sm);
}

.idf-quest__field:has(input[type="checkbox"]) > label,
.idf-quest__field:has(input[type="checkbox"]) > span:first-child {
    order: 2;
}

/* ----------------------------------------------------------------
   12. BUTTONS — Lime-Gruen als Primaer-Akzent
---------------------------------------------------------------- */

.idf-quest__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--quest-space-xs);
    padding: .85rem 1.5rem;
    background: transparent;
    color: var(--quest-color-text);
    border: 1px solid var(--quest-color-border-strong);
    border-radius: var(--quest-radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: var(--quest-font-size-md);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.idf-quest__btn:hover {
    background: var(--quest-color-surface-alt);
    border-color: var(--quest-color-text);
}

.idf-quest__btn:focus-visible {
    outline: none;
    box-shadow: var(--quest-shadow-focus);
}

.idf-quest__btn:active {
    transform: translateY(1px);
}

.idf-quest__btn[disabled],
.idf-quest__btn--disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.idf-quest__btn--primary {
    background: var(--quest-color-primary);
    color: var(--quest-color-primary-ink);
    border-color: var(--quest-color-primary);
    font-weight: 700;
}

.idf-quest__btn--primary:hover {
    background: var(--quest-color-primary-strong);
    border-color: var(--quest-color-primary-strong);
    color: var(--quest-color-primary-ink);
}

.idf-quest__btn--vote {
    align-self: flex-start;
    padding: .4rem 1rem;
    font-size: var(--quest-font-size-sm);
}

.idf-quest__btn--report {
    background: transparent;
    color: var(--quest-color-muted);
    border-color: var(--quest-color-border);
    font-size: var(--quest-font-size-xs);
    font-weight: 500;
    padding: .4rem .8rem;
}

.idf-quest__btn--report:hover {
    color: var(--quest-status-pending-c);
    border-color: var(--quest-status-pending-c);
    background: transparent;
}

/* ----------------------------------------------------------------
   13. NOTICES & EMPTY-STATES
---------------------------------------------------------------- */

.idf-quest__notice {
    padding: var(--quest-space-sm) var(--quest-space-md);
    background: var(--quest-color-surface);
    border-left: 3px solid var(--quest-color-primary);
    border-radius: var(--quest-radius-sm);
    color: var(--quest-color-text);
    font-size: var(--quest-font-size-sm);
}

.idf-quest__empty {
    padding: var(--quest-space-xl) var(--quest-space-lg);
    text-align: center;
    color: var(--quest-color-muted);
    background: var(--quest-color-surface);
    border: 1px dashed var(--quest-color-border);
    border-radius: var(--quest-radius-md);
    font-size: var(--quest-font-size-sm);
}

.idf-quest__feedback-msg {
    padding: var(--quest-space-xs) var(--quest-space-sm);
    color: var(--quest-color-primary);
    font-size: var(--quest-font-size-sm);
    font-weight: 600;
}

/* ----------------------------------------------------------------
   14. MODAL
---------------------------------------------------------------- */

.idf-quest__modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--quest-space-md);
    background: rgba(10, 10, 10, .75);
    backdrop-filter: blur(4px);
    z-index: 9999;
}

.idf-quest__modal[aria-hidden="false"] {
    display: flex;
}

.idf-quest__modal-content {
    width: min(100%, 520px);
    padding: var(--quest-space-lg);
    background: #15171c;
    color: #f5f5f5;
    border: 1px solid color-mix(in srgb, #f5f5f5 18%, transparent);
    border-radius: var(--quest-radius-lg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}

/* ----------------------------------------------------------------
   15. RESPONSIVE
---------------------------------------------------------------- */

@media (max-width: 720px) {
    .idf-quest,
    [class*="idf-quest__"] {
        --quest-font-size-md: 1rem;
        --quest-font-size-lg: 1.125rem;
    }

    .idf-quest__board,
    .idf-quest__archive,
    .idf-quest__my-sessions {
        grid-template-columns: 1fr;
        gap: var(--quest-space-md);
    }

    .idf-quest__profile {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--quest-space-sm);
    }

    .idf-quest__profile-avatar {
        justify-self: center;
        grid-row: auto;
    }

    .idf-quest__calendar-item {
        flex-direction: column;
        gap: var(--quest-space-2xs);
    }

    .idf-quest__calendar-date {
        min-width: 0;
    }

    .idf-quest__rotation-item {
        flex-wrap: wrap;
    }

    .idf-quest__rotation-votes {
        margin-left: 0;
        width: 100%;
    }
}

/* ----------------------------------------------------------------
   16. ACCESSIBILITY
---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .idf-quest__card,
    .idf-quest__badge,
    .idf-quest__btn,
    .idf-quest__field input,
    .idf-quest__field textarea,
    .idf-quest__field select {
        transition: none;
    }
    .idf-quest__card:hover,
    .idf-quest__badge:hover {
        transform: none;
    }
}