/**
 * Fixes a parent-theme bug (can't edit duravant-oc directly):
 * resources/css/marketo.css's `.form-embed` utility styles every plain
 * `<input>` inside an embedded Marketo form as a full-width, h-12,
 * padded text field (`input, select { @apply w-full! ... h-12! ... }`,
 * marketo.css:14-23) — with NO exception for `type="checkbox"` or
 * `type="radio"`. There IS already a checkbox-specific override in that
 * same file (`.mktoFormRow:has(#LblmarketingOptinTrigger) ...
 * #marketingOptinTrigger { @apply size-5! p-0! }`, marketo.css:76-92),
 * but it's hardcoded to that ONE Marketo field id/label — a brand- and
 * form-specific name assigned inside Marketo's own form editor, not a
 * stable HTML attribute. Mespack's own contact form (Marketo form 2333)
 * names its opt-in checkbox `subscribedtoMespack` /
 * `LblsubscribedtoMespack` instead, so that carve-out never matches
 * here and the checkbox falls through to the generic text-input rule:
 * a ~48px-tall, full-width, rounded, padded box instead of a normal
 * small checkbox — confirmed via the live rendered DOM (the input
 * itself has no size override, only its wrapper
 * `.mktoLogicalField.mktoCheckboxList` gets `width: 25px` from
 * Marketo's own inline style).
 *
 * Fixed generally here by attribute selector (type="checkbox", not a
 * specific field id) so it keeps working regardless of what a given
 * Marketo form happens to name its checkbox field — every brand on this
 * parent theme assigns its own field names in its own Marketo instance.
 * `type="radio"` included defensively for the same root cause, in case
 * any embedded form ever uses one; harmless if none currently do.
 * `size-5` (1.25rem/20px) matches the parent's own existing
 * `#marketingOptinTrigger` carve-out exactly, for visual consistency
 * with how a correctly-sized Marketo checkbox already looks elsewhere
 * on this same parent theme.
 *
 * `.form-embed input[type="checkbox"]` has higher specificity than the
 * parent's plain `.form-embed input`, but that alone isn't enough here:
 * the parent's rule compiles inside Tailwind v4's own `@layer utilities`
 * (confirmed: dist/assets/style-*.css opens with
 * `@layer theme, base, components, utilities`). Per the CSS Cascade
 * Layers spec, `!important` INVERTS normal layer priority — and
 * UNLAYERED styles count as the LAST layer for that inverted order,
 * i.e. the LOWEST priority among any `!important` declaration, layered
 * or not. A plain unlayered `!important` rule (what this file originally
 * was) therefore always loses to the parent's layered `!important` rule,
 * confirmed empirically: computed style stayed 42x48px with 12px/20px
 * padding — the parent's exact h-12/px-5/py-3 values — even though this
 * selector was the only one a plain DOM/CSSOM scan matched.
 *
 * Fixed by explicitly declaring this rule inside its OWN named layer,
 * `@layer oc-overrides` — since this stylesheet is enqueued (and so
 * appears in `<head>`) BEFORE the parent's compiled bundle, this is the
 * FIRST layer declared in the document, and for `!important` purposes
 * the first-declared layer wins over every later one, Tailwind's
 * `utilities` included. Reusing the name `utilities` instead would NOT
 * work: same-named layers merge into one, ordered by normal (not
 * reversed) source order internally, so the parent's later-appearing
 * rule inside that merged layer would still win.
 *
 * Row layout (added same session, same root cause): the parent's
 * `#LblmarketingOptinTrigger` carve-out doesn't just resize the
 * checkbox, it also reflows its WHOLE `.mktoFormRow` from the default
 * grid (one column per field, same as First Name/Last Name etc.) to a
 * row-reversed flex row so the checkbox sits directly beside its own
 * label instead of in its own separate grid column/track, far from the
 * label text. That part is ALSO hardcoded to `#LblmarketingOptinTrigger`
 * (marketo.css:76-102) and so never applied to Mespack's
 * `subscribedtoMespack` field either — replicated below with
 * `:has(input[type="checkbox"])` instead of the field-specific id, same
 * generalization as the sizing fix above. Exact values (column-gap,
 * flex/grid toggles) copied from the parent's own compiled output for
 * that block (`var(--spacing)` = Tailwind's `gap-x-1` token) so this
 * matches the parent's own intended look exactly, just reachable by any
 * brand's differently-named checkbox field.
 *
 * Fine-tuning (2026-10-14, client request): the checkbox's own
 * explanatory text isn't `.mktoLabel` (that one's empty here, just the
 * `*` required-marker — confirmed via the live DOM) but a sibling
 * `.mktoHtmlText` field in the same row ("By clicking this box, I
 * understand..."). `column-gap` raised from `var(--spacing)` (4px) to
 * `var(--spacing) + 2px` (6px) between checkbox and text, and the text
 * gets `padding-top: 4px` to visually center it against the 20px
 * checkbox instead of sitting flush with its top edge.
 *
 * Person Notes field hidden (2026-10-14, client request): the parent's
 * marketo.css hardcodes `.mktoFormRow:has(#MktoPersonNotes) { hidden! }`
 * TWICE (once inside `.form-embed`, once again inside a separate
 * `.quote-form` utility) — a blanket, site-wide rule hiding this one
 * specific Marketo field's row on every embedded form, regardless of
 * brand or form. Mespack's "Master Machine Form" (Marketo form 1500,
 * munchkin 803-FRB-652 — used on Product pages, Measure Your Impact,
 * etc.) has this field configured as "Explain your project" and the
 * client wants it visible; confirmed live on Kinsta via a headless DOM
 * check that `#MktoPersonNotes` renders correctly inside the form but
 * its `.mktoFormRow` computed to `display: none`, matching the parent
 * rule exactly. No other property of this row is touched by the parent
 * (only `display`), and it's a plain single-field row (one
 * `.mktoFormCol`, like First Name/Company), so restoring `display: grid`
 * alone is enough to recreate the row exactly like any other full-width
 * field — the base `.mktoFormRow` rule's other properties (gap,
 * grid-template-columns) are untouched by the hide rule and still apply.
 */
@layer oc-overrides {
  .form-embed input[type="checkbox"],
  .form-embed input[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    padding: 0 !important;
  }

  .form-embed .mktoFormRow:has(input[type="checkbox"]) {
    display: flex !important;
    column-gap: calc(var(--spacing) + 2px) !important;
  }

  .form-embed .mktoFormRow:has(input[type="checkbox"]) .mktoFormCol {
    display: flex !important;
    width: auto !important;
    min-height: auto !important;
  }

  .form-embed .mktoFormRow:has(input[type="checkbox"]) .mktoFieldWrap {
    display: flex !important;
    flex-direction: row-reverse !important;
  }

  .form-embed .mktoFormRow:has(input[type="checkbox"]) .mktoHtmlText {
    padding-top: 4px !important;
  }

  .form-embed .mktoFormRow:has(#MktoPersonNotes) {
    display: grid !important;
  }
}