/* Core Forms - Frontend Styles */

/* ---------------------------------------------------------------------------
   Accessibility baseline.
   ---------------------------------------------------------------------------
   These rules apply whether the default theme (form-theme.css) is loaded or
   not. They guarantee a WCAG-compliant touch target (≥44×44 CSS px, AAA
   2.5.5) on every form control, plus a visible keyboard-focus indicator and
   Windows High Contrast Mode (HCM) fallback. Authors who load both
   stylesheets get a form that is accessible by default; authors who disable
   the theme still get the touch-target floor.
   --------------------------------------------------------------------------- */
.cf-form input[type=date],
.cf-form input[type=datetime-local],
.cf-form input[type=email],
.cf-form input[type=month],
.cf-form input[type=number],
.cf-form input[type=password],
.cf-form input[type=search],
.cf-form input[type=tel],
.cf-form input[type=text],
.cf-form input[type=time],
.cf-form input[type=url],
.cf-form input[type=week],
.cf-form input[type=file],
.cf-form input[type=submit],
.cf-form input[type=button],
.cf-form input[type=reset],
.cf-form select,
.cf-form textarea,
.cf-form button {
    min-height: 44px;
    box-sizing: border-box;
}

.cf-form input[type=submit],
.cf-form input[type=button],
.cf-form input[type=reset],
.cf-form button {
    min-width: 44px;
}

/* Keyboard focus — visible outline that survives Windows High Contrast Mode.
   `currentColor` ensures the ring reads in HCM where colors are forced. The
   form theme adds a coloured box-shadow on top; this outline is the floor. */
.cf-form input:focus-visible,
.cf-form select:focus-visible,
.cf-form textarea:focus-visible,
.cf-form button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Respect users who request less motion — turn off any transition the theme
   layer adds. Inputs feel instant rather than smooth, by design. */
@media (prefers-reduced-motion: reduce) {
    .cf-form *,
    .cf-form *::before,
    .cf-form *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

.cf-form label {
    clear: both;
    display: block;
    float: none;
    font-weight: 700;
    margin-bottom: 1px;
}

.cf-form label+label {
    font-weight: 400;
}

.cf-form input[type=date],
.cf-form input[type=email],
.cf-form input[type=number],
.cf-form input[type=text],
.cf-form input[type=url],
.cf-form select,
.cf-form textarea {
    clear: both;
    float: none;
    padding: 4px 8px;
}

/* 5 lines tall by default. Overrides the 44px floor above for textareas
   only — fields meant for paragraph answers benefit from a roomier start.
   Skipped when an explicit `rows` is set in the builder so that the author's
   chosen height wins instead of being floored to 5 lines. */
.cf-form textarea:not([rows]) {
    min-height: 140px;
    min-height: calc(5lh + 16px);
}

.cf-message {
    border: 1px solid transparent;
    margin-bottom: 1rem;
    padding: 0.75rem 1.25rem;
}

.cf-message-success {
    background-color: #dff0d8;
    border-color: #d0e9c6;
    color: #3c763d;
}

.cf-message-warning {
    background-color: #fcf8e3;
    border-color: #faf2cc;
    color: #8a6d3b;
}

.cf-message-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Hidden fields wrap */
.cf-fields-wrap {
    /* Container for form fields */
}
/* ---------------------------------------------------------------------------
   Columns layout helper (.cf-row)
   ---------------------------------------------------------------------------
   The visual builder's "Columns" container emits a wrapper div carrying
   inline CSS variables so column counts travel with the markup — no extra
   stylesheet, no per-form CSS to maintain.

   Inline style on the wrapper:
     style="--cf-cols:3; --cf-cols-t:2; --cf-cols-m:1; --cf-gap:1rem;"

   --cf-cols   : desktop column count   (>1024px)   default 1
   --cf-cols-t : tablet column count    (641–1024)  defaults to --cf-cols
   --cf-cols-m : mobile column count    (≤640px)    defaults to --cf-cols-t
   --cf-gap    : gap between columns                default 1rem

   The cascade chains the variables so a 3-col desktop row that only sets
   --cf-cols falls back to 3 across, while a row that overrides --cf-cols-t
   to 2 and leaves mobile blank inherits the tablet count on small screens.
   --------------------------------------------------------------------------- */
.cf-row {
    display: grid;
    gap: var(--cf-gap, 1rem);
    grid-template-columns: repeat( var(--cf-cols, 1), minmax(0, 1fr) );
    /* Items inside the grid track their own paragraph margins, so the
       row's own .cf-row > p reset prevents the wpautop <p> wrapper from
       breaking the layout when an author writes the wrapper in code mode. */
}

.cf-row > p,
.cf-row > div,
.cf-row > fieldset {
    margin: 0;
    min-width: 0;
}

@media ( max-width: 1024px ) {
    .cf-row {
        grid-template-columns: repeat( var(--cf-cols-t, var(--cf-cols, 1)), minmax(0, 1fr) );
    }
}

@media ( max-width: 640px ) {
    .cf-row {
        grid-template-columns: repeat( var(--cf-cols-m, var(--cf-cols-t, var(--cf-cols, 1))), minmax(0, 1fr) );
    }
}

/* ---------------------------------------------------------------------------
   Star rating (.cf-rating)
   ---------------------------------------------------------------------------
   Mark up as a fieldset with `class="cf-rating"` containing N radio inputs
   in reverse order (5, 4, 3, 2, 1), each followed by its <label>. The
   reverse order + adjacent-sibling selector means hovering or selecting
   a star fills every star to its left.

   <fieldset class="cf-rating" data-max="5">
     <legend>Your rating</legend>
     <input type="radio" name="rating" value="5" id="r5"><label for="r5">5 stars</label>
     <input type="radio" name="rating" value="4" id="r4"><label for="r4">4 stars</label>
     ...
   </fieldset>

   Stars themselves are CSS-only (mask-image), so the plugin SVGs only
   need to be discoverable for the editor preview — the runtime form
   doesn't fetch them.
   --------------------------------------------------------------------------- */
.cf-rating {
    border: 0;
    padding: 0;
    margin: 0 0 1em;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.cf-rating legend {
    float: left;
    width: 100%;
    margin-bottom: 6px;
    font-weight: 600;
}

.cf-rating input[type="radio"] {
    /* Visually hidden but keyboard-reachable. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.cf-rating label {
    display: inline-block;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background: #d1d5db;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M316.7 17.8l65.4 132.4 146.1 21.2c11.3 1.6 20.5 9.5 24 20.4s.7 22.8-7.4 30.7L439.1 325.9l25 145.5c1.9 11.2-2.7 22.6-11.9 29.3s-21.5 7.5-31.5 2.2L288 433.6l-130.7 68.7c-10 5.3-22.3 4.4-31.5-2.2s-13.8-18.1-11.9-29.3l25-145.5L33.2 222.5c-8.2-8-11-19.9-7.4-30.7s12.7-18.8 24-20.4l146.1-21.2L259.3 17.8c5.1-10.2 15.5-16.7 26.9-16.7s21.9 6.4 26.9 16.7zM288 79.4L237.3 182.1c-4.3 8.8-12.7 14.9-22.4 16.3L101.8 214.9l81.7 79.6c7 6.8 10.2 16.7 8.5 26.4L172.7 433.6 273.8 380.4c8.7-4.6 19.1-4.6 27.8 0l101.1 53.1L383.7 320.9c-1.7-9.6 1.5-19.5 8.5-26.4l81.7-79.6L361 198.4c-9.7-1.4-18-7.5-22.4-16.3L288 79.4z"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M316.7 17.8l65.4 132.4 146.1 21.2c11.3 1.6 20.5 9.5 24 20.4s.7 22.8-7.4 30.7L439.1 325.9l25 145.5c1.9 11.2-2.7 22.6-11.9 29.3s-21.5 7.5-31.5 2.2L288 433.6l-130.7 68.7c-10 5.3-22.3 4.4-31.5-2.2s-13.8-18.1-11.9-29.3l25-145.5L33.2 222.5c-8.2-8-11-19.9-7.4-30.7s12.7-18.8 24-20.4l146.1-21.2L259.3 17.8c5.1-10.2 15.5-16.7 26.9-16.7s21.9 6.4 26.9 16.7zM288 79.4L237.3 182.1c-4.3 8.8-12.7 14.9-22.4 16.3L101.8 214.9l81.7 79.6c7 6.8 10.2 16.7 8.5 26.4L172.7 433.6 273.8 380.4c8.7-4.6 19.1-4.6 27.8 0l101.1 53.1L383.7 320.9c-1.7-9.6 1.5-19.5 8.5-26.4l81.7-79.6L361 198.4c-9.7-1.4-18-7.5-22.4-16.3L288 79.4z"/></svg>') center/contain no-repeat;
    transition: background-color 120ms ease;
}

/* Solid star for hovered + selected states. The amber matches the
   "Premium / standout" colour used elsewhere in the admin chrome so
   the rating reads as the same product. */
.cf-rating label:hover,
.cf-rating label:hover ~ label,
.cf-rating input[type="radio"]:checked ~ label {
    background: #f59e0b;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>') center/contain no-repeat;
}

/* Keyboard focus — ring around the focused star without losing the colour. */
.cf-rating input[type="radio"]:focus-visible + label {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Show the selected value as visible text next to the stars (rendered by
   the optional .cf-rating-value <output> element). Authors can hide it
   with .cf-rating-value { display: none; }. */
.cf-rating-value {
    margin-inline-start: 8px;
    font-variant-numeric: tabular-nums;
    color: #50575e;
    font-size: 0.9em;
}