/*
 * form.css — Smart Catering Child
 *
 * Shared WS Form skin for the single contact form (id 2).
 * Two context-adaptive variants:
 *   .sc-form--dark  → home dark section (line inputs, light text)
 *   .sc-form--cream → /contacto/ light section (boxed inputs, dark text)
 *
 * All selectors are scoped under .sc-form to prevent leakage between variants.
 *
 * REAL WS Form runtime DOM (ws-form framework, from plugin source):
 *   .wsf-form.wsf-form-canvas           — the <form> element
 *   .wsf-grid.wsf-sections              — sections wrapper (flex container)
 *   fieldset.wsf-tile.wsf-section       — each section (fieldset)
 *   .wsf-grid.wsf-fields                — fields row wrapper (flex container)
 *   .wsf-tile.wsf-field-wrapper         — per-field wrapper div
 *     [data-type="text|email|tel|...]   — field type attribute
 *   input.wsf-field / select.wsf-field  — the actual input element
 *   textarea.wsf-field                  — textarea
 *   label.wsf-label                     — label
 *   .wsf-invalid-feedback               — error message div (display:none → block on .wsf-validated)
 *   button.wsf-button                   — submit button
 *   [data-type="submit"]                — submit wrapper (.wsf-tile.wsf-field-wrapper)
 *
 * Column layout (Track B admin 6/6 columns):
 *   When WS Form admin sets 6/6 for paired fields, it adds
 *   wsf-large-6 (and wsf-extra-small-12 for mobile) to .wsf-tile.wsf-field-wrapper.
 *   Our CSS grid fallback handles pairing even before admin config is done.
 *
 * Batch 1 (PR1): base + .sc-form--dark minimal stub. DONE.
 * Batch 2 (PR2): full adaptive skin — layout, states, a11y, custom elements. THIS FILE.
 *
 * @package SmartCateringChild
 */

@layer components {

  /* ─── Motion token (scoped) ─── */
  .sc-form {
    --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* ─── Reduced-motion skeleton ─── */
  @media (prefers-reduced-motion: reduce) {
    .sc-form *,
    .sc-form *::before,
    .sc-form *::after {
      transition-duration:  0.01ms !important;
      animation-duration:   0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }


  /* ================================================================
   * SHARED BASE — applies to BOTH variants
   * ================================================================ */

  .sc-form {
    width: 100%;
  }

  /* ─── Layout: REAL WS Form DOM structure (confirmed via hydrated DOM inspection) ─── */
  /*
   * WS Form renders: .wsf-form > .wsf-grid.wsf-sections > fieldset.wsf-section
   *   > .wsf-grid.wsf-fields > .wsf-tile.wsf-field-wrapper
   *
   * WS Form uses display:flex + flex-wrap on .wsf-grid and percentage widths on
   * .wsf-tile children via breakpoint classes:
   *   wsf-extra-small-6  → width: 50% (half-width, used for paired fields)
   *   wsf-extra-small-12 → width: 100% (full-width fields)
   *
   * The admin has ALREADY set 6/6 for Nombre|Apellidos (wsf-extra-small-6 on each).
   * When Track B adds Fecha|Invitados, those will also be wsf-extra-small-6.
   *
   * We work WITH WS Form's flex system — just add proper gap and padding.
   * Do NOT switch .wsf-grid to CSS Grid (that breaks the % width tile system).
   */
  /*
   * WS Form's gutter system uses negative margins on .wsf-grid + padding on .wsf-tile.
   * Adding CSS gap on top of this causes the two 50%-width tiles to overflow and wrap.
   * We leave gap to WS Form's own --wsf-form-grid-gap mechanism and only set row spacing.
   */
  .sc-form .wsf-grid.wsf-fields {
    /* Let WS Form's padding-based column gutter work — no column-gap override */
    row-gap: var(--space-6); /* 1.5rem between field rows */
  }

  /*
   * WS Form .wsf-tile has position:relative; width:100%; box-sizing:border-box.
   * The breakpoint classes (wsf-extra-small-6/12) set explicit widths.
   * We don't override tile widths — admin configuration handles this correctly.
   */

  /* Gap between sections */
  .sc-form .wsf-grid.wsf-sections {
    gap: 0;
  }

  .sc-form .wsf-section {
    width: 100%;
  }


  /* ─── Shared label base ─── */
  .sc-form label.wsf-label {
    display:        block;
    font-family:    var(--font-sans);
    font-size:      0.65rem;
    font-weight:    var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider); /* 0.15em */
    margin-bottom:  0.2rem;
    line-height:    1.4;
    user-select:    none;
    /* transition for focus-group visual feedback */
    transition:     color 180ms var(--sc-ease-out);
  }

  /* Required asterisk — gold on dark, gold-ink on cream; only on required fields.
   * WS Form renders: <strong class="wsf-text-danger">*</strong>.
   * The color is overridden per variant below with !important. */
  .sc-form .wsf-form label.wsf-label strong.wsf-text-danger {
    font-style:  normal;
    font-weight: var(--fw-medium);
    margin-left: 0.2em;
  }


  /* ─── Shared input / select / textarea base ─── */
  .sc-form input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .sc-form select.wsf-field,
  .sc-form textarea.wsf-field {
    font-family: var(--font-sans);
    font-size:   0.875rem;
    width:       100%;
    display:     block;
    /* Override WS Form's default transition to our own */
    transition:
      border-color  180ms var(--sc-ease-out),
      box-shadow    180ms var(--sc-ease-out),
      background-color 180ms var(--sc-ease-out),
      color         180ms var(--sc-ease-out);
  }

  .sc-form textarea.wsf-field {
    resize:     vertical;
    min-height: 6rem;
  }


  /* ─── Submit button base — matches .sc-button--gold pill system ─── */
  .sc-form button.wsf-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.6rem;
    font-family:     var(--font-sans);
    font-size:       0.9rem;
    font-weight:     500;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    border-radius:   var(--radius-full, 9999px);
    padding:         0.85rem 1.6rem;
    width:           100%;        /* full-width both variants */
    cursor:          pointer;
    border:          none;
    line-height:     1.2;
    transition:
      background-color 300ms ease,
      color            300ms ease,
      transform        300ms ease;
  }

  /* Arrow glyph — mirrors .sc-button__arrow nudge on hover */
  .sc-form button.wsf-button::after {
    content:    '→';
    display:    inline-block;
    transition: transform 300ms ease;
  }

  .sc-form button.wsf-button:active {
    transform: scale(0.97);
  }

  /* Focus-visible on submit — keyboard users (fallback when no variant class present) */
  .sc-form button.wsf-button:focus-visible {
    outline:        2px solid var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on cream/white (PASS). Variants override for dark/cream contexts. */
    outline-offset: 3px;
  }


  /* ─── Error message base ─── */
  /*
   * WS Form shows .wsf-invalid-feedback as display:none by default.
   * On .wsf-validated, it toggles to display:block (from its layout CSS).
   * We add an entry animation via @starting-style for browsers that support it.
   * Fallback: just appears (opacity transition still works without @starting-style).
   */
  .sc-form .wsf-invalid-feedback {
    font-family:  var(--font-sans);
    font-size:    0.78rem;
    font-weight:  var(--fw-regular);
    margin-top:   0.35rem;
    line-height:  1.4;
    /* Slide-in on visibility */
    opacity:      1;
    transform:    translateY(0);
    transition:
      opacity   160ms var(--sc-ease-out),
      transform 160ms var(--sc-ease-out);
  }

  /* Entry animation via @starting-style (progressive enhancement) */
  @starting-style {
    .sc-form .wsf-validated .wsf-invalid-feedback {
      opacity:   0;
      transform: translateY(4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sc-form .wsf-invalid-feedback {
      transition: none;
    }
  }


  /* ─── Disabled state ─── */
  .sc-form input.wsf-field:disabled,
  .sc-form select.wsf-field:disabled,
  .sc-form textarea.wsf-field:disabled {
    opacity:        0.5;
    cursor:         not-allowed;
  }


  /* ─── Mobile: single column ─── */
  @media (max-width: 767px) {

    .sc-form .wsf-grid.wsf-fields {
      row-gap: var(--space-5); /* 1.25rem between rows on mobile */
    }

    /* Collapse all columns to full-width on mobile */
    .sc-form .wsf-grid.wsf-fields .wsf-extra-small-6 {
      flex:      0 0 100% !important;
      max-width: 100% !important;
      width:     100%;
    }

    /* Prevent iOS zoom on focus — font-size must be ≥ 16px */
    .sc-form input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    .sc-form select.wsf-field,
    .sc-form textarea.wsf-field {
      font-size: 1rem;
    }
  }


  /* ================================================================
   * DARK VARIANT — home dark section
   * Line/underline inputs, gold labels, light text on near-black.
   * ================================================================ */

  /* ─── Dark form: tighter vertical rhythm ─── */
  /*
   * The base .sc-form row-gap is 1.5rem (--space-6). On the dark line-input
   * style that feels too open; tighten to 1.25rem so the form reads dense/premium.
   */
  .sc-form--dark .wsf-grid.wsf-fields {
    row-gap: var(--space-5, 1.25rem);
  }

  /* ─── Labels ─── */
  /*
   * Specificity note: WS Form's base CSS is unlayered (.wsf-form label.wsf-label
   * = spec 0,2,0) and beats our @layer components rules.
   * We include .wsf-form in our selector to match WS Form's specificity at the
   * same unlayered vs. layered level, ensuring our override wins.
   */
  .sc-form--dark .wsf-form label.wsf-label {
    color:         var(--color-gold) !important;
    font-size:     0.65rem;   /* slightly tighter than the shared 0.7rem — more refined on dark */
    margin-bottom: 0.2rem;    /* pull label closer to its input underline */
  }

  .sc-form--dark .wsf-form label.wsf-label strong.wsf-text-danger {
    color: var(--color-gold) !important;
  }

  /* ─── Inputs / select / textarea: LINE style ─── */
  /*
   * !important required: WS Form's unlayered base CSS (.wsf-form input.wsf-field)
   * has higher cascade priority than our @layer components selectors.
   *
   * Polish pass (FIX 2): underline raised to 2px + rgba(255,255,255,0.35) for
   * more presence against the near-black bg. Padding trimmed from 0.85rem to
   * 0.65rem bottom so the row rhythm feels tight/intentional, not airy.
   */
  .sc-form--dark input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .sc-form--dark select.wsf-field,
  .sc-form--dark textarea.wsf-field {
    background-color: transparent !important;
    background:       transparent !important;
    border:           none !important;
    border-bottom:    2px solid rgba(255, 255, 255, 0.35) !important;
    border-radius:    0 !important;
    color:            var(--color-cream) !important;
    padding:          0.65rem 0 !important;
    outline:          none;
  }

  /* Force light text color for date/number native controls */
  .sc-form--dark input[type="date"].wsf-field,
  .sc-form--dark input[type="number"].wsf-field {
    color-scheme: dark;
  }

  /* Select: recolor native arrow to cream */
  .sc-form--dark select.wsf-field {
    color-scheme:       dark;
    appearance:         none;
    -webkit-appearance: none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F8F7F2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 0 center;
    background-size:    12px 8px;
    padding-right:      1.5rem;
  }

  /* Dropdown option list: always dark text on white so it stays readable when
   * open. The closed select inherits the variant's text colour (white on the
   * dark variant), and <option>s inherit it too — but the native popup is
   * light, so without this rule the dark variant renders white-on-white. */
  .sc-form select.wsf-field option {
    color:            #1a1a1a !important;
    background-color: #ffffff !important;
  }

  /* Spinners on number inputs — remove if noisy */
  .sc-form--dark input[type="number"].wsf-field::-webkit-inner-spin-button,
  .sc-form--dark input[type="number"].wsf-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance:         none;
  }

  /* Placeholder */
  .sc-form--dark input.wsf-field::placeholder,
  .sc-form--dark textarea.wsf-field::placeholder {
    color: rgba(248, 247, 242, 0.6); /* cream @ 60% — passes 4.5:1 on near-black */
  }

  /* Focus: gold underline + clear gold ring — visible for keyboard users on dark bg */
  .sc-form--dark input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus-visible,
  .sc-form--dark select.wsf-field:focus-visible,
  .sc-form--dark textarea.wsf-field:focus-visible {
    outline:             none;
    border-bottom-color: var(--color-gold) !important; /* gold on dark bg = passes AA */
    box-shadow:          0 0 0 2px var(--color-gold, #D99E39); /* a11y: solid 2px ring replaces 25%-opacity underline that was too faint */
  }

  /* Hover: stronger lift so the line reads active/interactive */
  @media (hover: hover) and (pointer: fine) {
    .sc-form--dark input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):hover:not(:focus):not(:disabled),
    .sc-form--dark select.wsf-field:hover:not(:focus):not(:disabled),
    .sc-form--dark textarea.wsf-field:hover:not(:focus):not(:disabled) {
      border-bottom-color: rgba(255, 255, 255, 0.6) !important;
    }
  }

  /* Error state on dark */
  .sc-form--dark .wsf-field-wrapper.wsf-validated input.wsf-field:invalid,
  .sc-form--dark input.wsf-field.wsf-invalid,
  .sc-form--dark .wsf-validated input.wsf-field:invalid {
    border-bottom-color: #ff8a80; /* light red — passes on near-black */
  }

  .sc-form--dark .wsf-invalid-feedback {
    color: #ffb4ab; /* ~7:1 on near-black — WCAG AA pass */
  }

  /* ─── Custom checkbox (dark) ─── */
  /*
   * WS Form renders consent checkbox as:
   * .wsf-field-wrapper[data-type="checkbox"] > .wsf-fieldset >
   *   .wsf-grid.wsf-fields > .wsf-tile > input[type="checkbox"].wsf-field + label.wsf-label
   */
  .sc-form--dark input[type="checkbox"].wsf-field {
    /* Override WS Form's absolute positioning for custom look */
    position:         relative;
    width:            18px;
    min-height:       18px;
    height:           18px;
    border:           1px solid rgba(255, 255, 255, 0.4);
    border-radius:    3px;
    background-color: transparent;
    cursor:           pointer;
    flex-shrink:      0;
    /* Ensure 24px tap target via the label */
    margin-top:       3px; /* vertical alignment with label text */
  }

  .sc-form--dark input[type="checkbox"].wsf-field:checked {
    background-color: var(--color-gold);
    border-color:     var(--color-gold);
  }

  /* Focus ring on checkbox */
  .sc-form--dark input[type="checkbox"].wsf-field:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 2px;
  }

  .sc-form--dark input[type="checkbox"].wsf-field + label.wsf-label {
    color:       rgba(255, 255, 255, 0.8);
    font-size:   0.78rem;
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: normal;
    cursor:      pointer;
    min-height:  24px; /* tap target */
    display:     inline-flex;
    align-items: flex-start;
    gap:         0;
  }

  .sc-form--dark input[type="checkbox"].wsf-field + label.wsf-label a {
    color:           var(--color-cream);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .sc-form--dark input[type="checkbox"].wsf-field + label.wsf-label a:hover {
      color: var(--color-gold);
    }
  }

  /* ─── Submit button (dark) — gold pill, black text, lightens on hover ─── */
  .sc-form--dark button.wsf-button {
    background-color: var(--color-gold) !important;
    color:            #000 !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .sc-form--dark button.wsf-button:hover:not(:disabled) {
      background-color: #E4B255 !important; /* lighter gold — stays readable on near-black bg */
      color:            #000 !important;
      transform:        translateY(-2px);
    }
    .sc-form--dark button.wsf-button:hover:not(:disabled)::after {
      transform: translateX(4px);
    }
  }

  .sc-form--dark button.wsf-button:active {
    transform: scale(0.97);
  }

  /* Focus ring — keyboard */
  .sc-form--dark button.wsf-button:focus-visible {
    outline:        2px solid var(--color-cream);
    outline-offset: 3px;
  }


  /* ================================================================
   * CREAM VARIANT — /contacto/ light section
   * Boxed inputs, dark text, gold focus ring.
   * ================================================================ */

  /* ─── Labels ─── */
  .sc-form--cream .wsf-form label.wsf-label {
    color: rgba(0, 0, 0, 0.65) !important; /* #000 @65% on cream = ~5.4:1 — WCAG AA pass at small text */
  }

  /* Required asterisk on cream — use gold-ink (AA on light backgrounds) */
  .sc-form--cream .wsf-form label.wsf-label strong.wsf-text-danger {
    color: var(--color-gold-ink) !important; /* #a87410 on #fff = 4.61:1 — WCAG AA */
  }

  /* ─── Inputs / select / textarea: BOXED style ─── */
  .sc-form--cream input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .sc-form--cream select.wsf-field,
  .sc-form--cream textarea.wsf-field {
    background-color: #ffffff !important;
    border:           1px solid rgba(5, 4, 24, 0.16) !important;
    border-radius:    6px !important;
    color:            var(--color-dark) !important;
    padding:          0.7rem 0.9rem !important;
    outline:          none;
  }

  /* Select: recolor native arrow to dark */
  .sc-form--cream select.wsf-field {
    appearance:         none;
    -webkit-appearance: none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 0.9rem center;
    background-size:    12px 8px;
    padding-right:      2.5rem;
  }

  /* Spinners on number inputs */
  .sc-form--cream input[type="number"].wsf-field::-webkit-inner-spin-button,
  .sc-form--cream input[type="number"].wsf-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance:         none;
  }

  /* Placeholder */
  .sc-form--cream input.wsf-field::placeholder,
  .sc-form--cream textarea.wsf-field::placeholder {
    color: rgba(0, 0, 0, 0.45); /* passes 4.5:1 on white for decorative hint */
  }

  /* Focus: gold-ink border + clear 2px ring — passes WCAG AA on white bg */
  .sc-form--cream input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus-visible,
  .sc-form--cream select.wsf-field:focus-visible,
  .sc-form--cream textarea.wsf-field:focus-visible {
    outline:      none;
    border-color: var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on #fff (PASS). --color-gold = 2.36:1 (FAIL). */
    box-shadow:   0 0 0 2px var(--color-gold-ink, #a87410); /* a11y: solid 2px replaces 1px faint ring */
    /* No wide shadow — impeccable bans 1px border + ≥16px blur on same element */
  }

  /* Hover: subtle darkening of border */
  @media (hover: hover) and (pointer: fine) {
    .sc-form--cream input.wsf-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):hover:not(:focus):not(:disabled),
    .sc-form--cream select.wsf-field:hover:not(:focus):not(:disabled),
    .sc-form--cream textarea.wsf-field:hover:not(:focus):not(:disabled) {
      border-color: rgba(0, 0, 0, 0.3);
    }
  }

  /* Error state on cream */
  .sc-form--cream input.wsf-field.wsf-invalid,
  .sc-form--cream .wsf-validated input.wsf-field:invalid {
    border-color: var(--color-error); /* #c0392b — passes on white */
    box-shadow:   0 0 0 1px var(--color-error);
  }

  .sc-form--cream .wsf-invalid-feedback {
    color: var(--color-error); /* #c0392b on #fff = ~5.1:1 — WCAG AA */
  }

  /* ─── Custom checkbox (cream) ─── */
  .sc-form--cream input[type="checkbox"].wsf-field {
    position:         relative;
    width:            18px;
    min-height:       18px;
    height:           18px;
    border:           1px solid rgba(0, 0, 0, 0.3);
    border-radius:    3px;
    background-color: #ffffff;
    cursor:           pointer;
    flex-shrink:      0;
    margin-top:       3px;
  }

  .sc-form--cream input[type="checkbox"].wsf-field:checked {
    background-color: var(--color-gold);
    border-color:     var(--color-gold);
  }

  .sc-form--cream input[type="checkbox"].wsf-field:focus-visible {
    outline:        2px solid var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on #fff (PASS). */
    outline-offset: 2px;
    border-color:   var(--color-gold-ink, #a87410);
  }

  .sc-form--cream input[type="checkbox"].wsf-field + label.wsf-label {
    color:          rgba(0, 0, 0, 0.7); /* passes 4.5:1 on cream */
    font-size:      0.78rem;
    font-weight:    var(--fw-regular);
    text-transform: none;
    letter-spacing: normal;
    cursor:         pointer;
    min-height:     24px; /* tap target */
    display:        inline-flex;
    align-items:    flex-start;
  }

  .sc-form--cream input[type="checkbox"].wsf-field + label.wsf-label a {
    color:                 var(--color-dark);
    text-decoration:       underline;
    text-underline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .sc-form--cream input[type="checkbox"].wsf-field + label.wsf-label a:hover {
      color: var(--color-gold-ink);
    }
  }

  /* ─── Submit button (cream) — gold pill, black text, inverts on hover ─── */
  .sc-form--cream button.wsf-button {
    background-color: var(--color-gold) !important;
    color:            #000 !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .sc-form--cream button.wsf-button:hover:not(:disabled) {
      background-color: #000 !important;
      color:            #fff !important;
      transform:        translateY(-2px);
    }
    .sc-form--cream button.wsf-button:hover:not(:disabled)::after {
      transform: translateX(4px);
    }
  }

  .sc-form--cream button.wsf-button:active {
    transform: scale(0.97);
  }

  .sc-form--cream button.wsf-button:focus-visible {
    outline:        2px solid var(--color-dark);
    outline-offset: 3px;
  }


  /* ================================================================
   * WS FORM INTERNAL OVERRIDES
   * Override WS Form default styles that conflict with our skin.
   * ================================================================ */

  /* WS Form adds its own focus box-shadow via --wsf-field-box-shadow.
   * We neutralize it and let our own transitions take over.
   * a11y: use :focus:not(:focus-visible) so mouse users see no ring but keyboard
   * users still get the :focus-visible ring from the variant rules below. */
  .sc-form input.wsf-field:focus:not(:focus-visible),
  .sc-form select.wsf-field:focus:not(:focus-visible),
  .sc-form textarea.wsf-field:focus:not(:focus-visible) {
    outline: none;
  }

  /* WS Form sets .wsf-field-wrapper margin-bottom from --wsf-form-grid-gap.
   * Our flex gap on .wsf-grid.wsf-fields already handles row spacing.
   * Zero out the margin to avoid double-spacing. */
  .sc-form .wsf-grid.wsf-fields .wsf-field-wrapper {
    margin-bottom: 0;
  }

  /* WS Form sets width via breakpoint classes with !important.
   * We don't need to override these — they work correctly with WS Form's
   * padding-based gutter system (no column-gap override). */

  /* WS Form's .wsf-validated shows .wsf-invalid-feedback via display:block.
   * Ensure it also shows when WS Form adds wsf-invalid to the field wrapper. */
  .sc-form .wsf-field-wrapper.wsf-invalid .wsf-invalid-feedback {
    display: block;
  }

  /* WS Form's required marker renders as <strong class="wsf-text-danger">*</strong>.
   * WS Form CSS normally colors this via --wsf-form-color-danger.
   * We override per-variant above; here we just ensure it's inline. */
  .sc-form label.wsf-label .wsf-text-danger {
    display: inline;
  }

  /* Ensure form fills wrapper — WS Form may set padding via styler */
  .sc-form .wsf-form {
    padding: 0;
    background: none;
    border:     none;
  }

} /* end @layer components */