/* ==========================================================================
   QDL-78 — WCAG 2.2 accessibility corrections for qdl2.com
   Theme: noxfolio 1.0.5 (no child theme installed) + Elementor 4.3.6 + Metform 4.3.4
   Delivery: mu-plugin `qdl2-a11y` enqueues this file after the theme and
   Elementor stylesheets. No parent-theme, plugin or core file is modified.

   `!important` is used deliberately: the declarations being corrected come
   from Elementor per-widget rules (specificity 0,4,0) and from a Metform
   plugin rule that is itself `!important`. A plain override cannot win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A1 (Level A, 2.1.1 Keyboard) — Metform renders every checkbox as
   `display:none !important` and draws the visible box with `input + span::before`.
   The real control is therefore not focusable, so the mandatory DSGVO consent
   box on the contact form cannot be ticked without a mouse and the form cannot
   be submitted at all by keyboard. Make the input focusable and invisible
   instead of removed, overlaying the drawn box.
   -------------------------------------------------------------------------- */
.mf-checkbox-option label,
.mf-radio-option label { position: relative; }

.mf-checkbox-option input[type="checkbox"],
.mf-radio-option input[type="radio"] {
  display: inline-block !important;
  position: absolute !important;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 25px !important;
  height: 25px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  appearance: none !important;
  cursor: pointer;
  z-index: 1;
}
/* the ring belongs on the box Metform actually draws, not on the transparent input */
.mf-checkbox-option input[type="checkbox"]:focus-visible,
.mf-radio-option input[type="radio"]:focus-visible { outline: none !important; }
.mf-checkbox-option input[type="checkbox"]:focus-visible + span::before,
.mf-radio-option input[type="radio"]:focus-visible + span::before {
  outline: 3px solid #fe7796 !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   A2 (AA, 2.4.7 Focus Visible / 2.2 2.4.11 Focus Appearance) — the theme ships
   `*:focus { outline: none }`, which strips the focus indicator from every
   focusable element on every page, not just form fields. Restore it for
   keyboard users only, so mouse behaviour is unchanged.
   -------------------------------------------------------------------------- */
*:focus-visible {
  outline: 3px solid #fe7796 !important;   /* 7.34:1 on #131313, 7.96:1 on #070707, 6.51:1 on #1f1f1f */
  outline-offset: 2px !important;
}
.mf-input:focus-visible,
.metform-form-main-wrapper .mf-input-wrapper .mf-input:focus-visible {
  outline-offset: 0 !important;            /* fields already carry a 10px radius */
}
*:focus:not(:focus-visible) { outline: none !important; }

/* the theme sets `transition: .3s` on form controls, which makes the focus ring
   fade in over 300ms. A focus indicator must be immediate; keep the other
   transitions and drop outline from the animated set. */
input, button, select, optgroup, textarea {
  transition-property: color, background-color, border-color;
}

/* --------------------------------------------------------------------------
   A3 (AA, 1.4.3 Contrast) — contact-form field text is set to #FFFFFF33 by the
   Elementor widget, i.e. 20% white, which composites to #4C4C4C on the #1F1F1F
   field background = 1.92:1. Separate the typed value from the placeholder.
   -------------------------------------------------------------------------- */
.metform-form-main-wrapper .mf-input-wrapper .mf-input,
.metform-form-main-wrapper .mf-input-wrapper .mf-textarea {
  color: #ffffff !important;               /* 1.92:1 -> 16.48:1 on #1f1f1f */
}
.metform-form-main-wrapper .mf-input-wrapper .mf-input::placeholder,
.metform-form-main-wrapper .mf-input-wrapper .mf-textarea::placeholder {
  color: #949494 !important;               /* 5.43:1 on #1f1f1f */
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   A4 (AA, 1.4.11 Non-text Contrast) — field borders are #353535 on #1F1F1F
   = 1.34:1, so the boundary of every input is not perceivable.
   -------------------------------------------------------------------------- */
input, button, select, optgroup, textarea { border-color: #707070; }
.metform-form-main-wrapper .mf-input-wrapper .mf-input,
.metform-form-main-wrapper .mf-input-wrapper .mf-textarea {
  border-color: #707070 !important;        /* 1.34:1 -> 3.33:1 on #1f1f1f */
}

/* --------------------------------------------------------------------------
   A5 (AA, 1.4.3 Contrast) — the submit button renders #1F1F1F text on the
   #DB0133 brand red at 16px/600 = 3.19:1. Normal-size text needs 4.5:1.
   -------------------------------------------------------------------------- */
.metform-form-main-wrapper .metform-btn.metform-submit-btn {
  color: #ffffff !important;               /* 3.19:1 -> 5.17:1 on #db0133 */
}

/* --------------------------------------------------------------------------
   A6 (AA, 1.4.3 Contrast) — the required-field asterisk in each label is brand
   red #DB0133 at 18px/500, which is not "large text", so it needs 4.5:1.
   Measured in-browser it sits on #131313 (not #1F1F1F as QDL-78 assumed):
   3.60:1. Still a fail; the QDL-78 figure of 3.19:1 was the right verdict from
   the wrong background.

   QDL-85: the original rule targeted `.required`, a class Metform 4.3.4 does
   not render. Metform emits `<span class="mf-input-required-indicator">*</span>`,
   so the old selector matched 0 elements and the asterisk never changed.
   The indicator is targeted directly rather than via `.mf-input-label`, so the
   rule also covers any indicator Metform renders outside a label — the
   mf-checkbox widget carries an Elementor `#f00` rule (4.12:1, also a fail)
   that would otherwise be exposed the moment that widget renders one.
   `!important` is required: Elementor's per-widget rule is specificity 0,4,0.
   -------------------------------------------------------------------------- */
.mf-input-required-indicator { color: #ff6b8b !important; }   /* 3.60:1 -> 6.84:1 */

/* --------------------------------------------------------------------------
   A7 (AA, 1.4.3 Contrast) — the muted brand grey exposed to the theme and to
   Elementor as "custom color 1" is #757575, which is 4.03:1 on the #131313
   section background. Raise it once, at the variable.
   -------------------------------------------------------------------------- */
:root {
  --noxfolio-custom-color-1: #949494;                 /* 4.03:1 -> 6.13:1 on #131313 */
  --e-global-color-noxfolio_custom_color_1: #949494;
}