/**
 * Core Forms — Poll frontend styles (4.3.0 polish).
 *
 * Loads in two places via the same handle (`core-forms-poll`):
 *   - PollFrontend::enqueue_assets on any page rendering the shortcode
 *   - PollBlock register_block_type `style` + `editor_style` so the
 *     block editor's ServerSideRender preview looks identical to the
 *     public page
 *
 * Variables make per-poll theming opt-in: override --cf-poll-accent on
 * a wrapping element to retint everything.
 */
.cf-poll {
    --cf-poll-accent: #2271b1;
    --cf-poll-accent-soft: rgba(34, 113, 177, 0.10);
    --cf-poll-accent-strong: rgba(34, 113, 177, 0.22);
    --cf-poll-bg: #fff;
    --cf-poll-border: #e1e2e6;
    --cf-poll-border-hover: #c7c9cf;
    --cf-poll-track: #f0f0f1;
    --cf-poll-text: #1d2327;
    --cf-poll-muted: #646970;
    --cf-poll-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);

    /* Adapts to its container. By default fills the parent — themes that
     * embed the poll in a narrow column get a narrow poll, full-width
     * placements get a full-width poll. Container queries below tune
     * padding / type scale to the actual container width, not the
     * viewport, so a sidebar poll stays compact even on a 4K screen. */
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
    container-name: cf-poll;

    margin: 1.5em 0;
    padding: clamp(1em, 2.4cqi + 0.6em, 1.75em);
    background: var(--cf-poll-bg);
    border: 1px solid var(--cf-poll-border);
    border-radius: clamp(8px, 1.2cqi + 6px, 14px);
    box-shadow: var(--cf-poll-shadow);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: clamp(14px, 0.6cqi + 13px, 17px);
    line-height: 1.45;
    color: var(--cf-poll-text);
    box-sizing: border-box;
}

.cf-poll *, .cf-poll *::before, .cf-poll *::after { box-sizing: inherit; }

.cf-poll-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1em;
    min-width: 0; /* fixes legend overflow in some browsers */
}

.cf-poll-question {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 0 0.85em;
    padding: 0;
    color: var(--cf-poll-text);
    line-height: 1.35;
    /* Reset legend's default browser appearance so the heading reads
     * as plain text inside the card, not a bordered fieldset legend. */
    float: none;
    width: auto;
}

.cf-poll-question:focus {
    outline: 2px solid var(--cf-poll-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Options auto-flow into a responsive grid: stacks single-column on
 * narrow embeds, sits side-by-side when there's room. The minmax
 * floor uses min(240px, 100%) so single-option-per-row stays valid
 * even in containers narrower than 240px. */
.cf-poll-options {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 0.4em;
}

/* When the poll is showing inline result bars, force single-column so
 * each bar gets the full row width — otherwise a narrow 2-col grid
 * would clip the percentage label or render unreadably tiny bars. */
.cf-poll-with-results .cf-poll-options {
    grid-template-columns: 1fr;
}

/* The label is the clickable surface. Flex so the radio sits inline
 * with the option text instead of dropping the text to a second line
 * (which the previous `display: block` + flex-child combination did). */
.cf-poll-option {
    display: flex;
    align-items: center;
    gap: 0.7em;
    position: relative;
    padding: 0.7em 0.9em;
    margin: 0;
    background: #fbfbfc;
    border: 1px solid var(--cf-poll-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    overflow: hidden;
}

.cf-poll-option:hover {
    background: #fff;
    border-color: var(--cf-poll-border-hover);
    box-shadow: 0 1px 3px rgba(15, 17, 21, 0.06);
}

.cf-poll-option input[type="radio"],
.cf-poll-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cf-poll-accent);
    cursor: pointer;
}

.cf-poll-option:has(input:checked) {
    border-color: var(--cf-poll-accent);
    background: var(--cf-poll-accent-soft);
    box-shadow: inset 0 0 0 1px var(--cf-poll-accent-soft);
}

.cf-poll-option:focus-within {
    outline: 2px solid var(--cf-poll-accent);
    outline-offset: 2px;
}

.cf-option-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    min-width: 0;
}

.cf-option-text {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--cf-poll-text);
}

.cf-option-stats {
    font-size: 0.85em;
    color: var(--cf-poll-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cf-option-pct { font-weight: 600; color: var(--cf-poll-accent); }

.cf-poll-with-results .cf-option-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--cf-poll-accent-soft);
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cf-poll-option,
    .cf-poll-with-results .cf-option-bar,
    .cf-poll-results .cf-result-bar { transition: none !important; }
}

/* "Other" write-in: keep the radio + label inline, drop the text input
 * to a second row below so it has room to breathe. */
.cf-poll-option-other { flex-wrap: wrap; }
.cf-poll-option-other .cf-option-content { flex-wrap: wrap; }
.cf-poll-option-other .cf-poll-other-input {
    flex: 1 0 100%;
    margin-top: 0.5em;
    padding: 0.5em 0.7em;
    font-size: 0.95em;
    border: 1px solid var(--cf-poll-border);
    border-radius: 6px;
    background: #fff;
}
.cf-poll-option-other .cf-poll-other-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Submit + footer -------------------------------------------------- */

.cf-poll-submit {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65em 1.5em;
    background: var(--cf-poll-accent);
    color: #fff;
    border: 1px solid var(--cf-poll-accent);
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.06s ease, box-shadow 0.16s ease;
    box-shadow: 0 1px 2px rgba(15, 17, 21, 0.10);
}
.cf-poll-submit:hover   { background: #135e96; border-color: #135e96; }
.cf-poll-submit:active  { transform: translateY(1px); box-shadow: none; }
.cf-poll-submit:focus-visible {
    outline: 2px solid var(--cf-poll-accent);
    outline-offset: 2px;
}
.cf-poll-submit:disabled { background: #a7aaad; border-color: #a7aaad; cursor: not-allowed; box-shadow: none; }

.cf-poll-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-top: 1.2em;
}

.cf-poll-total {
    font-size: 0.88em;
    color: var(--cf-poll-muted);
    font-variant-numeric: tabular-nums;
}

.cf-poll-message {
    margin-top: 1em;
    padding: 0.65em 0.9em;
    border-radius: 6px;
    font-size: 0.9em;
    display: none;
}
.cf-poll-message.cf-poll-success { background: #ecf9ee; color: #1e6d2e; border: 1px solid #c3e6cb; }
.cf-poll-message.cf-poll-error   { background: #fdecec; color: #a8252b; border: 1px solid #f5c6cb; }
.cf-poll-message.cf-poll-info    { background: #eef4fb; color: #1d2327; border: 1px solid #c3d4e6; }

.cf-poll-closed-notice,
.cf-poll-scheduled-notice {
    padding: 0.65em 0.9em;
    margin-bottom: 1em;
    background: #f4f6fa;
    border: 1px solid var(--cf-poll-border);
    border-radius: 6px;
    color: var(--cf-poll-muted);
    font-size: 0.9em;
}

.cf-poll-redirect-link {
    margin-left: 0.5em;
    color: var(--cf-poll-accent);
    font-weight: 600;
    text-decoration: none;
}
.cf-poll-redirect-link:hover { text-decoration: underline; }

/* ---- Results-only render --------------------------------------------- */

.cf-poll-results .cf-poll-question { font-size: 1.05em; margin-bottom: 1em; }

.cf-poll-results .cf-result-item {
    margin-bottom: 0.85em;
}
.cf-poll-results .cf-result-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3em;
    gap: 0.5em;
}
.cf-poll-results .cf-result-option     { font-weight: 500; color: var(--cf-poll-text); }
.cf-poll-results .cf-result-percentage { font-weight: 600; color: var(--cf-poll-accent); font-variant-numeric: tabular-nums; }
.cf-poll-results .cf-result-bar-container {
    height: 10px;
    background: var(--cf-poll-track);
    border-radius: 999px;
    overflow: hidden;
}
.cf-poll-results .cf-result-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cf-poll-accent) 0%, #72aee6 100%);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
    min-width: 2px;
}
.cf-poll-results .cf-result-votes {
    font-size: 0.82em;
    color: var(--cf-poll-muted);
    margin-top: 0.3em;
    font-variant-numeric: tabular-nums;
}

.cf-poll-total-votes {
    margin-top: 1.1em;
    padding-top: 0.85em;
    border-top: 1px solid var(--cf-poll-border);
    font-size: 0.88em;
    color: var(--cf-poll-muted);
    font-variant-numeric: tabular-nums;
}
.cf-poll-voter-count { font-weight: 400; }

/* ---- Style variants -------------------------------------------------- */

/* Columns: vertical bars, stacked side by side. */
.cf-poll-style-columns .cf-poll-results-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 0.6em;
    align-items: end;
    min-height: 180px;
}
.cf-poll-style-columns .cf-result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    text-align: center;
}
.cf-poll-style-columns .cf-result-bar-container {
    width: 36px;
    height: 160px;
    display: flex;
    align-items: flex-end;
    border-radius: 6px 6px 0 0;
}
.cf-poll-style-columns .cf-result-bar {
    width: 100%;
    transition: height 0.5s cubic-bezier(.4,0,.2,1);
}
.cf-poll-style-columns .cf-result-header {
    flex-direction: column-reverse;
    margin-top: 0.5em;
    text-align: center;
}

/* Percent only: hide bars, keep numbers. */
.cf-poll-style-percent .cf-result-bar-container { display: none; }
.cf-poll-style-percent .cf-result-item {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1em;
    padding: 0.55em 0;
    border-bottom: 1px solid var(--cf-poll-border);
}
.cf-poll-style-percent .cf-result-header { display: contents; }
.cf-poll-style-percent .cf-result-votes  { grid-column: 1 / -1; }

/* ---- Loading + small screens ---------------------------------------- */

.cf-poll.cf-poll-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Container-driven layout: switches to the compact/stacked footer when
 * the poll itself is narrow, regardless of viewport. A sidebar poll on
 * a wide screen gets the same treatment as a mobile-viewport poll. */
@container cf-poll (max-width: 380px) {
    .cf-poll-footer    { flex-direction: column-reverse; align-items: stretch; gap: 0.6em; }
    .cf-poll-submit    { width: 100%; padding: 0.8em 1.2em; }
    .cf-poll-option    { padding: 0.65em 0.75em; }
    .cf-poll-question  { font-size: 1em; }
}

/* Roomy embeds (wide content columns, full-width blocks). Adds a touch
 * more vertical breathing room and reserves an extra max-width so the
 * card doesn't run edge-to-edge in 1200px+ columns where line lengths
 * would otherwise hurt readability. */
@container cf-poll (min-width: 700px) {
    .cf-poll           { margin-inline: auto; max-width: 720px; }
    .cf-poll-question  { font-size: 1.15em; margin-bottom: 1em; }
    .cf-poll-options   { gap: 0.5em; }
}

/* Without container query support (Safari <16, older Firefox), fall
 * back to a viewport check so phones still get the compact layout. */
@supports not (container-type: inline-size) {
    @media (max-width: 480px) {
        .cf-poll-footer { flex-direction: column-reverse; align-items: stretch; gap: 0.6em; }
        .cf-poll-submit { width: 100%; padding: 0.8em 1.2em; }
        .cf-poll-question { font-size: 1em; }
    }
}