/* =====================================================================
   Loop Forms — G2 (giro-2-parent) INLINE FORM STRUCTURE
   =====================================================================

   FLEET-WIDE CAUTION — read before editing. loop-forms ships to every
   G2 / G2X / G2Lux site from ONE plugin build. This file loads ONLY on
   sites whose PARENT theme is `giro-2-parent` (see the per-theme
   enqueue seam in loop-forms.php — it loads assets/css/themes/
   {get_template()}.css when the file exists). It can never load on
   G2X (giro-2x-parent) or Lux (giro-2lux-parent), so nothing here can
   affect those estates. There is deliberately NO giro-2x-parent.css
   yet — G2X keeps its theme-owned form styles until its own transfer
   phase (its forms are due a redesign that will diverge from G2).

   WHAT THIS FILE IS
   Structure + neutral chrome for Loop Forms rendered INLINE on a page
   (the `section.module` context — shortcodes dropped into modules,
   e.g. the valuation form inside `.shortcode` on an image-text
   module). Extracted verbatim from the g2 theme's
   assets/scss/below/_module-forms.scss (2026-07-13) so ownership of
   form STRUCTURE moves into the plugin, matching the division of
   labour already used on Lux:

       PLUGIN owns structure + neutral monochrome defaults.
       THEME (parent/child) owns colours unique to the client.

   Every colour below is the g2 parent's own neutral chrome (white /
   #fafafa / #d1d5db greys / #282828 / #212427 near-blacks / rgba
   blacks) — identical across every g2 client site, i.e. NOT client
   branding. Client-unique paint (accents, button colours) comes from
   the theme's button system + ACF-driven custom properties and is
   untouched by this file. A child theme that wants to repaint any of
   these neutrals simply overrides at its own (later-loading) layer.

   SCOPE — INLINE FORMS ONLY. The slide-out modal/drawer forms (the
   sidebar popouts) are deliberately NOT covered: those remain fully
   theme-owned on g2/g2x for now (Kane: don't touch what's working).
   The drawer's own structure lives in the plugin base loop-forms.css.

   ROLLOUT / THEME-SIDE FOLLOW-UP
   While the g2 theme still ships _module-forms.scss, these rules load
   twice with IDENTICAL values — harmless. Once this file is live
   fleet-wide, the theme can delete _module-forms.scss outright (no
   colour-only remainder needed — this file is self-sufficient).
   Note: the theme's _forms-defaults.scss is already fully commented
   out in source and contributes nothing; no migration needed from it.

   SCSS variables resolved at extraction (from the theme's
   _variables.scss): $space-xxs=24px, $type-body-small=13px,
   $body-text=#212427. Deliberately NOT carried over:
   - $font-family-body — typography is brand; inputs inherit the theme's
     font.
   - $button-radius — border-radius is an ACF THEME SETTING compiled per
     site; baking one site's value into this fleet-wide file would
     override the setting everywhere (Kane, 2026-07-14: "loop forms is
     structural, not cosmetic"). The theme's cosmetic layer applies
     radius to the inputs, checkboxes and card panels in this file.
   (The source's `.loop-forms { max-width: auto }` was dropped: `auto`
   is not a valid max-width value and browsers discard it.)
   ===================================================================== */

/* --- Inline context: neutralise the plugin base's DRAWER layout ------
   The base loop-forms.css rules (.loop-forms { height:100% } +
   .fields { flex:1; overflow-y:auto } + .submit-area { margin-top:auto;
   margin-bottom:50px; border-top:… }) exist for the slide-out modal,
   where the fields area scrolls and the submit pins to the panel foot.
   Inline on a page they misbehave: overflow-y:auto computes overflow-x
   to auto too, so any 1px of horizontal overflow paints a stray
   scrollbar strip above the submit button (Kane's report), and the
   drawer margins add phantom space. Same reset the contact-note form
   uses in the base file — here scoped to g2's inline module context. */
/* SELECTOR NOTE: .loop-forms IS the <form> element itself (the templates
   render <form class="loop-forms …">), so these must be form.loop-forms —
   NOT `form .loop-forms` (descendant), which matches nothing. The theme's
   own legacy `section.module form .loop-forms { max-width:auto }` had the
   same never-matching shape; it went unnoticed only because its value was
   invalid anyway. */
section.module form.loop-forms {
    height: auto;
}

section.module form.loop-forms .fields {
    flex: none;
    overflow: visible;
    padding-bottom: 0;
}

section.module form.loop-forms .submit-area {
    margin-top: 24px;
    margin-bottom: 0;
    padding-top: 0;
    border-top: 0;
}

/* --- Labels: visually hidden (screen-reader pattern) ----------------
   Inline-form labels wrap their inputs; the label TEXT is collapsed
   (font-size:0 + transparent) while the input inside is restored to
   full size below. Checkbox rows opt back into visible text via
   .checkbox-text. This is the g2 "placeholder-driven" form look. */
section.module form label {
    display: block;
    margin-bottom: 24px;
    position: relative;
    font-size: 0;
    color: transparent;
}

/* --- Text inputs / textarea / select --------------------------------- */
section.module form label input[type="text"],
section.module form label input[type="email"],
section.module form label input[type="tel"],
section.module form label input[type="date"],
section.module form label input[type="number"],
section.module form label input[type="url"],
section.module form label input[type="password"],
section.module form label textarea,
section.module form label select {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 12px 16px;
    border: 1px solid transparent;
    /* NO border-radius here — deliberately. Radius is an ACF THEME
       SETTING ($button-radius, compiled per site); baking one site's
       value into this fleet-wide file was wrong (Kane, 2026-07-14:
       "loop forms is structural, not cosmetic"). The theme's cosmetic
       layer applies radius to these controls. Same applies to every
       control/card in this file. */
    font-size: 13px;
    background: #ffffff;
    color: #212427;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

section.module form label input[type="text"]::placeholder,
section.module form label input[type="email"]::placeholder,
section.module form label input[type="tel"]::placeholder,
section.module form label input[type="date"]::placeholder,
section.module form label input[type="number"]::placeholder,
section.module form label input[type="url"]::placeholder,
section.module form label input[type="password"]::placeholder,
section.module form label textarea::placeholder,
section.module form label select::placeholder {
    color: #282828;
}

section.module form label input[type="text"]:focus,
section.module form label input[type="email"]:focus,
section.module form label input[type="tel"]:focus,
section.module form label input[type="date"]:focus,
section.module form label input[type="number"]:focus,
section.module form label input[type="url"]:focus,
section.module form label input[type="password"]:focus,
section.module form label textarea:focus,
section.module form label select:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

section.module form label textarea {
    resize: vertical;
    min-height: 80px;
}

/* --- Checkbox rows (custom-drawn checkbox + tick) ---------------------
   appearance:none replaces the native box with an 18px custom one; the
   tick is a rotated ::before border fragment revealed on :checked. The
   INPUT remains the real clickable element (native change events fire
   normally). Monochrome by design — black checked-state is the g2
   neutral, not client brand. */
/* DELIBERATE DEVIATION from theme parity: the theme shipped margin:0,
   which stacked the service checkboxes with no breathing room (Kane,
   2026-07: "make this better"). 10px matches the base drawer rhythm.
   The consent row's own rule below (higher specificity) still applies
   its larger 24px gap. */
section.module form .checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0 0 10px;
    /* Undo the base label's `color: transparent` (which hides the
       placeholder-style labels) — checkbox rows have VISIBLE content, and
       the box border reads this colour via currentColor (below). `inherit`
       pulls the module/form text colour, so it's legible on the module's
       own ground by default; card contexts pin it explicitly to match the
       card (see the .media--shortcode rule). */
    color: inherit;
}

/* DELIBERATE MODERNISATION (Kane, 2026-07-14: "less 90's") — deviates
   from the theme's legacy 18px / 3px-radius / grey-wash box on purpose.
   Still neutral monochrome per the doctrine; themes/children repaint via
   the inherited colour (below).

   BORDER = currentColor (Kane, 2026-07-14: "make the border the same as
   the content — then you can't go wrong"). The box inherits the checkbox
   LABEL's colour (see `.checkbox { color: inherit }` above + the
   per-context colour a card pins), so the ring ALWAYS matches the legible
   text beside it: dark on a white card, light on a dark surface. It can
   never be white-on-white or vanish. Transparent fill so the interior
   adapts to any ground too.

   The `form.loop-forms` bump to (0,4,3) is deliberate: it beats the
   theme's accent-border rule (`.loop-form--accent-* input[type=checkbox]`,
   0,4,1) which was painting the box its accent colour — #ffffff for
   `accent-secondary` — and vanishing it on the white card. Checkbox
   VISIBILITY is structural, so the plugin wins this one specifically;
   the theme still owns every other colour. radius stays a theme setting. */
section.module form.loop-forms .checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* !important mirrors the theme source — these dimensions must beat
       the generic input sizing above. */
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 12px 0 0;
    margin-top: 1px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

/* Tick — border-fragment check, sized/centred for the 20px box. */
section.module form .checkbox input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.15s ease-in-out;
}

section.module form .checkbox input[type="checkbox"]:checked {
    background-color: #000000;
    border-color: #000000;
}

section.module form .checkbox input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}

/* Soft ring instead of the hard 90s outline; :focus-visible keeps it
   keyboard-only so mouse clicks don't flash a ring. */
section.module form .checkbox input[type="checkbox"]:focus {
    outline: none;
}

section.module form .checkbox input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
}

/* Checkbox label text opts back out of the hidden-label collapse. */
section.module form .checkbox .checkbox-text {
    line-height: 1.4;
    font-size: 13px;
    color: #282828;
    flex: 1;
}

section.module form .checkbox .checkbox-text a {
    color: #000000;
    text-decoration: none;
}

section.module form .checkbox .checkbox-text a:hover {
    text-decoration: underline;
}

section.module form .checkbox.consent-checkbox {
    margin: 0 0 24px 0;
}

/* !important mirrors the theme source (modal colour override escape). */
section.module form .checkbox.consent-checkbox.disable-modal-color .checkbox-text {
    color: #212427 !important;
}

/* --- Section headings + legends inside inline forms ------------------
   Neither the theme's legacy partial nor the plugin base sized these, so
   the conditional section's "Address Details" <h4> inherited the theme's
   GLOBAL heading scale and rendered enormous inside the form (it was
   never visible before the reveal fix, which is why nobody noticed).
   1.1rem/600 mirrors the sizing the old loop-forms defaults intended for
   form-section headings. Neutral chrome — a theme/child can repaint. */
section.module form.loop-forms .section-title,
section.module form.loop-forms h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

section.module form.loop-forms fieldset legend {
    font-weight: 600;
    margin-bottom: 12px;
    padding: 0;
}

/* --- Valuation service choices layout ---------------------------------
   "What would you like us to value?" (Kane, 2026-07-14): when BOTH
   Property to Sell and Property to Rent render (lettings enabled), they
   sit side by side on the first row; with lettings disabled the first
   row has a single checkbox, which takes the full row via the
   :only-child branch. The optional extras (Financial Advice / already
   on the Market) live in .service-checkboxes-remaining, whose labels
   are block-level flex rows — one per line — already. Mirrors the
   drawer's arrangement in the base file (.modal-type-generic-valuation
   block), rebuilt here because those base rules are modal-scoped and
   never reach inline forms. */
section.module form.loop-forms .service-checkboxes-first-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

/* Only one option rendered (lettings disabled) → full-width row. */
section.module form.loop-forms .service-checkboxes-first-row:has(.checkbox:only-child) {
    grid-template-columns: 1fr;
}

/* Mobile: the pair stacks — side-by-side labels get cramped. */
@media (max-width: 600px) {
    section.module form.loop-forms .service-checkboxes-first-row {
        grid-template-columns: 1fr;
    }
}

/* --- Forms inside media columns (.media--shortcode) -------------------
   INTENTIONALLY NOT STYLED HERE (Kane, 2026-07-14). The white-card look
   (background + padding + shadow) that used to live here is PER-CLIENT
   presentation, not form structure — some clients want the card, others
   (e.g. Cadley Cauldwell) want the form plain on the page. Forcing it
   from the shared plugin imposed it on everyone. It now lives in the
   THEME as an opt-in (a modifier class / ACF toggle on the module), so a
   client enables the card only if they want it. The supporting bits that
   moved with it — off-white input fills and the dark checkbox pin — only
   ever made sense ON the white card, so they went too: a plain form
   keeps the base field styling and the currentColor checkbox, which read
   on whatever ground the form actually sits on.
   `.media--shortcode` is a theme wrapper class; the plugin deliberately
   references it nowhere now. */

/* --- Property Matching form in a .shortcode wrapper: white card ------ */
section.module .shortcode .loop-form--loop-forms-property-matching {
    background: #ffffff;
    padding: 24px;
    /* radius: theme setting — see the note on the inputs block above. */
    margin: 0 auto;
}

section.module .shortcode .loop-form--loop-forms-property-matching .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    section.module .shortcode .loop-form--loop-forms-property-matching .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

section.module .shortcode .loop-form--loop-forms-property-matching .form-section {
    margin-bottom: 2rem;
}

section.module .shortcode .loop-form--loop-forms-property-matching .form-section h4 {
    margin-bottom: 1.5rem;
    color: #282828;
}

section.module .shortcode .loop-form--loop-forms-property-matching label input[type="text"],
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="email"],
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="tel"],
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="date"],
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="number"],
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="url"],
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="password"],
section.module .shortcode .loop-form--loop-forms-property-matching label textarea,
section.module .shortcode .loop-form--loop-forms-property-matching label select {
    background-color: #fafafa;
    color: #282828;
    border-color: transparent;
}

/* Typed list — same checkbox-protection reasoning as the media--shortcode
   context above. */
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="text"]:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="email"]:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="tel"]:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="date"]:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="number"]:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="url"]:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label input[type="password"]:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label textarea:focus,
section.module .shortcode .loop-form--loop-forms-property-matching label select:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Same softened focus ring as the media--shortcode card context above. */
section.module .shortcode .loop-form--loop-forms-property-matching .checkbox input[type="checkbox"]:focus {
    outline: none;
}

section.module .shortcode .loop-form--loop-forms-property-matching .checkbox input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

section.module .shortcode .loop-form--loop-forms-property-matching .checkbox .checkbox-text {
    color: #282828;
}

section.module .shortcode .loop-form--loop-forms-property-matching .checkbox.consent-checkbox {
    margin-bottom: 15px;
}

section.module .shortcode .loop-form--loop-forms-property-matching .consent-section {
    font-size: 14px;
}

section.module .shortcode .loop-form--loop-forms-property-matching .consent-section .consent-title {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: #282828;
}

section.module .shortcode .loop-form--loop-forms-property-matching .consent-section .consent-info p {
    color: #282828;
    opacity: 0.8;
}

section.module .shortcode .loop-form--loop-forms-property-matching .consent-section .privacy-notice p {
    color: #282828;
    opacity: 1;
}