/* ========================================= */
/* aufZAQ Zertifizierungs-Check Frontend     */
/* ========================================= */

.azcheck-fragen,
.azcheck-radar-wrap,
.azcheck-message,
.azcheck-pdf-btn {
    --azcheck-blue: #003D84;
    --azcheck-green: #BCCF00;
    --azcheck-light-blue: #D9E3E8;
    --azcheck-red: #D1552A;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    color: var(--azcheck-blue);
}

/* ─── Kategorie Titel ─── */

.azcheck-kat-title {
    font-size: var(--lg-heading-h2);
    line-height: var(--lg-lh-heading-h2);
    font-weight: 500;
    margin-top: var(--lg-space-40);
    margin-bottom: 0;
    color: var(--azcheck-blue);
}

.azcheck-kategorie:first-child .azcheck-kat-title {
    margin-top: 0;
}

/* ─── Frage Row ─── */

.azcheck-frage {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding-top: var(--lg-space-40);
}

.azcheck-frage-text {
    flex: 1;
    font-size: var(--lg-fliesstext-1);
    line-height: var(--lg-lh-liesstext-1);
    color: var(--azcheck-blue);
    margin: 0;
    font-weight: 400;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
}

.azcheck-frage-text strong {
    font-weight: 700;
}

/* ─── Rating Circles ─── */

.azcheck-optionen {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    align-items: center;
    padding-top: 4px;
}

.azcheck-option {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    /* Eliminates 300ms tap delay on mobile Safari/Chrome without
       removing pinch-zoom. Prevents ghost-click jank on radio tap. */
    touch-action: manipulation;
}

/* Visually hidden but keyboard-accessible */
.azcheck-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    pointer-events: none;
}

/* WordPress screen-reader-text fallback */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


.azcheck-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .azcheck-circle {
        transition: transform 0.15s ease;
        /* Pre-promote to GPU compositing layer so the scale() on hover
           doesn't cause a first-frame stutter during layer creation */
        will-change: transform;
        transform-origin: center center;
    }
}

.azcheck-circle svg {
    display: block;
}

/* Colors */
.azcheck-option--rot { color: var(--azcheck-red); }
.azcheck-option--blau { color: var(--azcheck-blue); }
.azcheck-option--gruen { color: var(--azcheck-green); }

/* Hover — nur Desktop (verhindert Flackern auf Touch) */
@media (hover: hover) {
    .azcheck-option:hover .azcheck-circle {
        transform: scale(1.12);
    }
}

/* Häkchen default versteckt */
.azcheck-check {
    opacity: 0;
    /* translateZ(0) promotes this SVG child to its own GPU compositing layer.
       Without it, Safari repaints the entire SVG on every opacity transition
       frame, causing visible flicker/jank on mobile. */
    transform: translateZ(0);
    will-change: opacity;
}

@media (hover: hover) {
    .azcheck-check {
        /* Include transform in transition list — Safari requires it to
           recognise this element as GPU-composited during the animation */
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
}

/* Selected — Häkchen einblenden */
.azcheck-option input[type="radio"]:checked ~ .azcheck-circle .azcheck-check {
    opacity: 1;
}

/* Focus */
.azcheck-option input[type="radio"]:focus-visible ~ .azcheck-circle {
    outline: 2px solid var(--azcheck-blue);
    outline-offset: 4px;
    border-radius: 50%;
}

/* ─── Radar Chart ─── */

.azcheck-radar-wrap {
    max-width: 600px;
    margin: 0 auto;
}

.azcheck-radar-wrap canvas {
    /* Chart.js sets canvas width/height attributes directly via JS to
       handle device pixel ratio. CSS !important overrides desync the
       pixel buffer on HiDPI/retina mobile screens, causing blurry
       rendering and spurious ResizeObserver redraws. */
    max-width: 100%;
}

/* ─── Message ─── */

.azcheck-message {
    text-align: center;
    padding: 20px 24px;
    border-radius: 4px;
    font-size: var(--lg-fliesstext-1);
    line-height: var(--lg-lh-liesstext-1);
    font-weight: 500;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
}

.azcheck-message--success {
    background: rgba(188, 207, 0, 0.15);
    color: #4a5600;
    border: 1px solid var(--azcheck-green);
}

.azcheck-message--partial {
    background: rgba(0, 61, 132, 0.08);
    color: var(--azcheck-blue);
    border: 1px solid var(--azcheck-light-blue);
}

/* ─── PDF Button ─── */

.azcheck-pdf-btn {
    background: var(--azcheck-blue);
    color: #ffffff;
    border: 1px solid var(--azcheck-blue);
    padding: 13px 36px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    touch-action: manipulation;
    /* On mobile, only transition the GPU-composited transform property.
       background-color and box-shadow both trigger per-frame repaints —
       restrict those to hover-capable (desktop) devices only. */
    transition: transform 0.1s ease;
    will-change: transform;
}

@media (hover: hover) {
    .azcheck-pdf-btn {
        /* Safe to animate repainting properties on desktop where GPU budget
           and CPU headroom make the visual cost negligible */
        transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    }
}

.azcheck-pdf-btn:hover {
    background: transparent;
    color: var(--azcheck-blue);
}

.azcheck-pdf-btn:active {
    transform: translateY(1px);
}

.azcheck-pdf-btn:focus-visible {
    outline: 3px solid var(--azcheck-blue);
    outline-offset: 2px;
}

/* ─── Meta Fields (Organisation / Bildungsangebot) ─── */

.azcheck-meta-fields {
    margin-top: var(--lg-space-40, 32px);
    padding-top: var(--lg-space-40, 32px);
    border-top: 1px solid var(--azcheck-light-blue);
    display: flex;
    gap: 24px;
}

.azcheck-meta-field {
    flex: 1;
}

.azcheck-meta-field label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    color: var(--azcheck-blue);
    margin-bottom: 12px;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
}

.azcheck-optional {
    font-weight: 400;
    opacity: 0.6;
}

.azcheck-meta-field input[type="text"] {
    width: 100%;
    padding: 0 0 8px 0;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    color: var(--azcheck-blue);
    border: none;
    border-bottom: 1px solid var(--azcheck-blue);
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.azcheck-meta-field input[type="text"]:focus {
    outline: none;
    border: none;
    border-bottom: 1px solid var(--azcheck-blue);
    background: transparent;
}

.azcheck-meta-field input[type="text"]::placeholder {
    font-size: 20px;
    font-weight: 500;
    color: rgba(0, 61, 132, 0.6);
}

/* ─── CTA Visibility ─── */

/* "Einreichen" — hidden by default, shown on success */
.azcheck-show-success {
    display: none !important;
}
body[data-azcheck-result="success"] .azcheck-show-success {
    display: block !important;
}

/* "Beratung" — visible by default, hidden on success */
body[data-azcheck-result="success"] .azcheck-show-partial {
    display: none !important;
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .azcheck-frage {
        flex-direction: column;
        gap: 16px;
    }

    .azcheck-optionen {
        align-self: flex-start;
    }

    .azcheck-meta-fields {
        flex-direction: column;
        gap: 16px;
    }

    .azcheck-pdf-btn {
        width: 100%;
        padding: 14px 24px;
    }
}