/* Flashcard Block */
.wp-block-fca-blocks-flashcard {
    /* Face accents. Overridable per-site without touching the rest of the block. */
    --flashcard-front-accent: var(--fcom-primary-button, #1877F2);
    --flashcard-back-accent: #10b981;
    --flashcard-radius: 14px;

    margin-bottom: var(--fcom-block-spacing, 20px);
    perspective: 1400px;
}

/* ========== EDITOR STYLES ========== */
.flashcard-editor-wrapper {
    background: var(--fcom-card-bg, var(--fcom-primary-bg, #fff));
    border: 1px solid var(--fcom-primary-border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.flashcard-tabs {
    display: flex;
    border-bottom: 1px solid var(--fcom-primary-border, #e5e7eb);
    background: var(--fcom-light-bg, #f8f9fa);
}

.flashcard-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--fcom-secondary-text, #6b7280);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.flashcard-tab:first-child {
    border-right: 1px solid var(--fcom-primary-border, #e5e7eb);
}

.flashcard-tab:hover {
    background: var(--fcom-primary-bg, #fff);
    color: var(--fcom-primary-text, #19283a);
}

.flashcard-tab.is-active {
    background: var(--fcom-primary-bg, #fff);
    color: var(--fcom-primary-button, #1877F2);
}

.flashcard-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--fcom-primary-button, #1877F2);
}

.flashcard-editor-content {
    padding: 24px;
    background: var(--fcom-primary-bg, #fff);
}

/* Show/hide front and back based on active tab */
.flashcard-editor-content .wp-block-group.flashcard-front-content,
.flashcard-editor-content .wp-block-group.flashcard-back-content {
    display: none;
}

.flashcard-editor-content[data-active-tab="front"] .wp-block-group.flashcard-front-content {
    display: block;
}

.flashcard-editor-content[data-active-tab="back"] .wp-block-group.flashcard-back-content {
    display: block;
}

/* Ensure good text visibility in editor */
.flashcard-editor-content p,
.flashcard-editor-content h1,
.flashcard-editor-content h2,
.flashcard-editor-content h3,
.flashcard-editor-content h4,
.flashcard-editor-content h5,
.flashcard-editor-content h6,
.flashcard-editor-content li {
    color: var(--fcom-primary-text, #19283a) !important;
}

.flashcard-editor-content [data-rich-text-placeholder]::before {
    color: var(--fcom-text-off, #9ca3af) !important;
}

/* ========== FRONTEND STYLES ========== */
.wp-block-fca-blocks-flashcard .flashcard-container {
    width: 100%;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    border-radius: var(--flashcard-radius);
    transition: transform 0.25s ease;
}

.wp-block-fca-blocks-flashcard .flashcard-container:hover {
    transform: translateY(-3px);
}

.wp-block-fca-blocks-flashcard .flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* The two group blocks become the front and back faces */
.wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--fcom-card-bg, var(--fcom-primary-bg, #fff));
    border: 1px solid var(--fcom-primary-border, #e5e7eb);
    border-radius: var(--flashcard-radius);
    /* Room for the badge above and the flip hint below the content. */
    padding: 52px 32px 46px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -12px rgba(16, 24, 40, 0.28);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-fca-blocks-flashcard .flashcard-container:hover .flashcard-inner > .wp-block-group {
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08), 0 18px 36px -14px rgba(16, 24, 40, 0.38);
}

/*
 * A 3px bar across the top of each face, in that face's accent colour. This replaces
 * a border-left accent, which the 180° rotation mirrored onto the right-hand edge of
 * the back face — the two sides never lined up.
 */
.wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--flashcard-radius) var(--flashcard-radius) 0 0;
    background: var(--flashcard-face-accent, var(--flashcard-front-accent));
}

.wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group:first-child {
    --flashcard-face-accent: var(--flashcard-front-accent);
}

.wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group:last-child {
    --flashcard-face-accent: var(--flashcard-back-accent);
}

.wp-block-fca-blocks-flashcard .flashcard-container:hover .flashcard-inner > .wp-block-group {
    border-color: var(--flashcard-face-accent, var(--flashcard-front-accent));
}

/*
 * Face label pill. The text comes from a custom property so a site can relabel or
 * translate the card without editing this stylesheet:
 *   .wp-block-fca-blocks-flashcard { --flashcard-front-label: "Frage"; }
 */
.wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group::after {
    content: var(--flashcard-face-label, var(--flashcard-front-label, "Question"));
    position: absolute;
    top: 16px;
    left: 20px;
    /* Explicit resets: the fca-blocks fork ships a same-named ::after rule that pins
       left/right/bottom to stretch a full-width "Tap to flip" caption. Without these
       the pill inherits its right/bottom and blows up into a giant rounded slab. */
    right: auto;
    bottom: auto;
    width: auto;
    text-align: left;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--flashcard-face-accent, var(--flashcard-front-accent));
    background: color-mix(in srgb, var(--flashcard-face-accent, var(--flashcard-front-accent)) 14%, transparent);
    line-height: 1.5;
}

.wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group:first-child {
    --flashcard-face-label: var(--flashcard-front-label, "Question");
}

.wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group:last-child {
    --flashcard-face-label: var(--flashcard-back-label, "Answer");
}

/* Flip hint, injected by frontend.js so its wording can follow the current side. */
.wp-block-fca-blocks-flashcard .flashcard-hint {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fcom-secondary-text, #6b7280);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.wp-block-fca-blocks-flashcard .flashcard-container:hover .flashcard-hint {
    opacity: 1;
    color: var(--flashcard-face-accent, var(--flashcard-front-accent));
}

.wp-block-fca-blocks-flashcard .flashcard-hint svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Horizontal flip */
.wp-block-fca-blocks-flashcard.flip-horizontal .flashcard-inner > .wp-block-group:last-child {
    transform: rotateY(180deg);
}

.wp-block-fca-blocks-flashcard.flip-horizontal .flashcard-container.is-flipped .flashcard-inner {
    transform: rotateY(180deg);
}

/* Vertical flip */
.wp-block-fca-blocks-flashcard.flip-vertical .flashcard-inner > .wp-block-group:last-child {
    transform: rotateX(180deg);
}

.wp-block-fca-blocks-flashcard.flip-vertical .flashcard-container.is-flipped .flashcard-inner {
    transform: rotateX(180deg);
}

/* Content styling */
.wp-block-fca-blocks-flashcard .flashcard-inner p {
    font-size: 19px;
    line-height: 1.55;
    margin: 0;
    color: var(--fcom-primary-text, #19283a);
    text-wrap: balance;
}

.wp-block-fca-blocks-flashcard .flashcard-inner p + p {
    margin-top: 12px;
}

.wp-block-fca-blocks-flashcard .flashcard-inner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Focus styles for accessibility */
.wp-block-fca-blocks-flashcard .flashcard-container:focus {
    outline: none;
}

.wp-block-fca-blocks-flashcard .flashcard-container:focus-visible {
    outline: 2px solid var(--fcom-primary-button, #1877F2);
    outline-offset: 3px;
    border-radius: var(--flashcard-radius);
}

/*
 * Respect a reduced-motion preference: swap the faces instantly instead of spinning
 * the card, and drop the hover lift.
 */
@media (prefers-reduced-motion: reduce) {
    .wp-block-fca-blocks-flashcard .flashcard-container,
    .wp-block-fca-blocks-flashcard .flashcard-inner,
    .wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group {
        transition: none;
    }

    .wp-block-fca-blocks-flashcard .flashcard-container:hover {
        transform: none;
    }

    .wp-block-fca-blocks-flashcard.flip-horizontal .flashcard-inner > .wp-block-group:last-child,
    .wp-block-fca-blocks-flashcard.flip-vertical .flashcard-inner > .wp-block-group:last-child {
        transform: none;
        backface-visibility: visible;
        visibility: hidden;
    }

    .wp-block-fca-blocks-flashcard.flip-horizontal .flashcard-container.is-flipped .flashcard-inner,
    .wp-block-fca-blocks-flashcard.flip-vertical .flashcard-container.is-flipped .flashcard-inner {
        transform: none;
    }

    .wp-block-fca-blocks-flashcard .flashcard-container.is-flipped .flashcard-inner > .wp-block-group:first-child {
        visibility: hidden;
    }

    .wp-block-fca-blocks-flashcard .flashcard-container.is-flipped .flashcard-inner > .wp-block-group:last-child {
        visibility: visible;
    }
}

/* Block alignment support */
.wp-block-fca-blocks-flashcard.alignwide {
    max-width: var(--wp--style--global--wide-size, 1000px);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-fca-blocks-flashcard.alignfull {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .wp-block-fca-blocks-flashcard .flashcard-inner p {
        font-size: 17px;
    }

    .wp-block-fca-blocks-flashcard .flashcard-inner > .wp-block-group {
        padding: 48px 20px 42px;
    }
}