/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
h
*/

/* ==========================================================================
   Vosyn ATS skin (WO-03) — presentation only. Overrides the .vosyn-* CSS
   variables the ATS plugin ships (assets/css/vosyn.css); structure and
   behavior live in the plugin and are untouched. Accent derives from the
   Vosyn brand magenta already used in this child theme (#d326c5).
   ========================================================================== */

/* CB-THEME (full dark): the plugin's .vosyn-* variables now map onto the
   extracted vosyn.ai tokens (vosyn-tokens.css). Contrast: all pairs AA on
   their surfaces — table in evidence/cbtheme/. */
:root {
    --vosyn-accent: var(--vt-magenta);
    --vosyn-accent-dark: var(--vt-magenta-bright);
    --vosyn-ink: var(--vt-off-white);       /* body text on dark */
    --vosyn-muted: var(--vt-muted);         /* 6.3:1+ on elevated */
    --vosyn-surface: var(--vt-elevated);    /* raised panels */
    --vosyn-border: var(--vt-border);
    --vosyn-star: #ffd37a;                  /* Featured badge, 11.3:1 on elevated */
    --vosyn-ok: #2fdca0;                    /* success on dark (from --vt-green family) */
    --vosyn-warn: #ff8f88;                  /* error tint readable on dark */
}

/* ---- Canvas: one continuous navy from header through footer ---- */
body,
#boxed-wrapper,
#wrapper,
#main {
    background: var(--vt-canvas) !important;
    font-family: var(--vt-font);
}

#main .post-content,
.fusion-page-title-bar {
    color: var(--vt-off-white);
}

#main h1, #main h2, #main h3, #main h4,
.post-content h1, .post-content h2, .post-content h3, .post-content h4,
.fusion-body .post-content h2, .fusion-body .post-content h3 {
    color: var(--vt-white);
}

.post-content p,
.post-content li {
    color: var(--vt-off-white);
}

/* Header band on the canvas; green active/hover per live-site accent use */
.fusion-header,
.fusion-header-wrapper .fusion-header {
    background: var(--vt-canvas) !important;
}

/* CB-COLOR D1: nav link color pinned for EVERY header state — normal,
   sticky/scrolled (Avada's sticky typography is an independent set), hover,
   active, and mobile. Never dark-on-dark. CSS-only (no Avada option relied
   on); !important beats both compiled typography sets. */
.fusion-main-menu > ul > li > a,
.fusion-header .fusion-main-menu > ul > li > a,
.fusion-is-sticky .fusion-main-menu > ul > li > a,
.fusion-header-sticky .fusion-main-menu > ul > li > a,
.fusion-sticky-header .fusion-main-menu > ul > li > a {
    color: var(--vt-off-white) !important;
}

.fusion-main-menu > ul > li > a:hover,
.fusion-main-menu > ul > li.current-menu-item > a,
.fusion-main-menu > ul > li.current_page_item > a,
.fusion-is-sticky .fusion-main-menu > ul > li > a:hover,
.fusion-is-sticky .fusion-main-menu > ul > li.current-menu-item > a,
.fusion-header-sticky .fusion-main-menu > ul > li > a:hover,
.fusion-header-sticky .fusion-main-menu > ul > li.current-menu-item > a {
    color: var(--vt-green) !important;
}

.fusion-mobile-menu-icons a,
.fusion-mobile-nav-holder .fusion-mobile-nav-item a,
.fusion-main-menu .fusion-main-menu-icon::before {
    color: var(--vt-off-white) !important;
}

.fusion-mobile-nav-holder .fusion-mobile-nav-item a:hover {
    color: var(--vt-green) !important;
}

/* CB-COLOR D2: field visibility on dark — input text near-white, placeholder
   muted-light (6.3:1 on elevated), icons match placeholder tone. Applied to
   every .vosyn-* input site-wide (hero, apply, questionnaires, NSF, messaging). */
.vosyn-careers input::placeholder,
.vosyn-application input::placeholder,
.vosyn-application textarea::placeholder,
.vosyn-questionnaire textarea::placeholder,
.vosyn-questionnaire input::placeholder,
.vosyn-nsf input::placeholder,
.vosyn-register-form input::placeholder,
.vosyn-dashboard textarea::placeholder,
.vosyn-hero-search input::placeholder {
    color: var(--vt-muted) !important;
    opacity: 1;
}

.vosyn-hero-search .vosyn-hs-field input,
.vosyn-hero-search .vosyn-hs-field input[type="text"],
.vosyn-hero-search .vosyn-hs-field input[type="search"] {
    color: var(--vt-white) !important;
}

.vosyn-hs-field .vosyn-icon {
    color: var(--vt-muted);
}

/* CB-COLOR D3: primary CTAs use the sampled vosyn.ai brand gradient; hover is
   a brightness step (same treatment, no saturation jump). Hot magenta demoted
   to highlights only. */
.vosyn-btn:not(.vosyn-btn-ghost),
.vosyn-hero-search button,
.vosyn-application button[type="submit"],
.vosyn-questionnaire button[type="submit"],
.vosyn-sjt button[type="submit"],
.vosyn-nsf button[type="submit"],
.vosyn-dashboard button[type="submit"] {
    background: var(--vt-cta-grad) !important;
    border: 0 !important;
}

.vosyn-btn:not(.vosyn-btn-ghost):hover,
.vosyn-btn:not(.vosyn-btn-ghost):focus,
.vosyn-hero-search button:hover,
.vosyn-application button[type="submit"]:hover,
.vosyn-questionnaire button[type="submit"]:hover,
.vosyn-sjt button[type="submit"]:hover,
.vosyn-nsf button[type="submit"]:hover,
.vosyn-dashboard button[type="submit"]:hover {
    background: var(--vt-cta-grad) !important;
    filter: brightness(1.12);
}

.vosyn-hero .vosyn-open-roles strong {
    color: var(--vt-magenta); /* the "71" keeps the hot highlight */
}

.vosyn-cat-card .vosyn-icon,
.vosyn-row-icon {
    color: var(--vt-orchid);
}

.vosyn-row-icon {
    background: rgba(229, 125, 220, 0.13);
}

.vosyn-row-dept {
    color: var(--vt-orchid);
}

/* ---- Board: hero on canvas, elevated cards ---- */
.vosyn-careers-tagline {
    color: var(--vt-off-white);
}

.vosyn-open-roles strong {
    color: var(--vt-magenta-tint);
}

.vosyn-careers-search input[type="search"] {
    background: var(--vt-elevated);
    border: 1px solid var(--vt-border);
    color: var(--vt-white);
}

.vosyn-careers-search input[type="search"]::placeholder {
    color: var(--vt-muted);
}

.vosyn-dept-card {
    background: var(--vt-elevated);
    border-color: var(--vt-border);
    color: var(--vt-white);
}

.vosyn-dept-card:hover,
.vosyn-dept-card:focus {
    border-color: var(--vt-green);
    box-shadow: var(--vt-shadow);
}

.vosyn-job-card {
    background: var(--vt-elevated) !important; /* plugin css hardcodes #fff */
    border-color: var(--vt-border);
    border-radius: var(--vt-radius);
}

.vosyn-job-title {
    color: var(--vt-white);
}

.vosyn-job-title:hover,
.vosyn-job-title:focus {
    color: var(--vt-magenta-tint);
}

.vosyn-btn {
    font-weight: 700; /* CTA labels bold → large-text contrast context */
}

.vosyn-btn-ghost {
    color: var(--vt-magenta-tint) !important;
    border-color: var(--vt-magenta-tint);
}

.vosyn-btn-ghost:hover,
.vosyn-btn-ghost:focus {
    background: rgba(229, 125, 220, 0.12);
    color: #f2b9ec !important;
}

.vosyn-badge {
    background: rgba(255, 211, 122, 0.16);
    color: var(--vosyn-star);
}

.vosyn-featured {
    background: var(--vt-surface-2);
    border-color: rgba(255, 211, 122, 0.35);
}

.vosyn-dept-section h3 {
    color: var(--vt-white);
    border-bottom-color: var(--vt-border);
}

.vosyn-board-empty {
    color: var(--vt-muted);
    border-color: var(--vt-border);
}

/* ---- Role detail (CB-01) — elevated panels, sidebar unchanged in behavior */
.vosyn-jd-header,
.vosyn-jd-body,
.vosyn-jd-sidebar > div,
.vosyn-jd-sidebar-card {
    background: var(--vt-elevated);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    color: var(--vt-off-white);
}

.vosyn-jd-body {
    line-height: 1.75; /* long-form JD readability on dark */
}

.vosyn-jd-header .vosyn-jd-label {
    color: var(--vt-muted);
}

.vosyn-breadcrumb a {
    color: var(--vt-muted);
}

.vosyn-breadcrumb a:hover {
    color: var(--vt-white);
}

/* ---- Forms (apply, questionnaires, SJT, NSF, dashboard composer) ---- */
.vosyn-application input:not([type="file"]),
.vosyn-application textarea,
.vosyn-application select,
.vosyn-questionnaire textarea,
.vosyn-questionnaire select,
.vosyn-questionnaire input,
.vosyn-nsf input,
.vosyn-nsf select,
.vosyn-sjt input[name="captcha_answer"],
/* 2026-07-31: the account sign-up form joined the plugin's shared themed-input
   rule (P1-44), which pairs a hard-coded white field with `color:
   var(--vosyn-ink)` — and this theme redefines that token to near-white for
   body text on dark. Every other candidate form is listed here and gets a dark
   field, so the near-white ink reads; sign-up was not, so it drew near-white
   text on white and the candidate could not see what they typed. Same fix as
   R2.4 applied to the whole form. */
.vosyn-register-form input:not([type="submit"]):not([type="hidden"]),
.vosyn-dashboard textarea {
    background: var(--vt-canvas);
    border: 1px solid var(--vt-border);
    color: var(--vt-white);
}

.vosyn-application input:focus,
.vosyn-application textarea:focus,
.vosyn-application select:focus,
.vosyn-questionnaire textarea:focus,
.vosyn-questionnaire select:focus,
.vosyn-questionnaire input:focus,
.vosyn-nsf input:focus,
.vosyn-nsf select:focus,
.vosyn-register-form input:not([type="submit"]):not([type="hidden"]):focus,
.vosyn-dashboard textarea:focus {
    border-color: var(--vt-magenta-tint);
    box-shadow: 0 0 0 2px rgba(229, 125, 220, 0.35);
    outline: none;
}

.vosyn-application label,
.vosyn-questionnaire label,
.vosyn-nsf label,
.vosyn-sjt legend {
    color: var(--vt-off-white);
}

.vosyn-sjt fieldset {
    background: var(--vt-elevated);
    border-color: var(--vt-border);
}

.vosyn-notice {
    background: var(--vt-elevated);
    border-color: var(--vt-border);
    color: var(--vt-off-white);
}

/* ---- Dashboard ---- */
.vosyn-next-step {
    background: var(--vt-elevated);
    border-color: var(--vt-border);
    color: var(--vt-off-white);
}

.vosyn-funnel li {
    color: var(--vt-muted);
}

.vosyn-funnel li.is-complete,
.vosyn-funnel li.is-current {
    color: var(--vt-white);
}

.vosyn-funnel li::before {
    background: var(--vt-elevated);
    border-color: var(--vt-border);
    color: var(--vt-off-white);
}

.vosyn-msg {
    background: var(--vt-elevated);
    border-color: var(--vt-border);
    color: var(--vt-off-white);
}

.vosyn-msg-team,
.vosyn-msg-system {
    background: var(--vt-surface-2);
}

.vosyn-msg small {
    color: var(--vt-muted);
}

.vosyn-gds-session {
    background: var(--vt-elevated);
    border-color: var(--vt-border);
    color: var(--vt-off-white);
}

.vosyn-dashboard-links a {
    color: var(--vt-magenta-tint);
}

/* Board reads comfortably inside Avada's content container */
.vosyn-careers .vosyn-careers-tagline {
    font-size: 1.25em;
}

.vosyn-dept-card:hover,
.vosyn-dept-card:focus {
    box-shadow: 0 2px 10px rgba(211, 38, 197, 0.12);
}

.vosyn-job-card {
    transition: box-shadow 120ms ease;
}

.vosyn-job-card:hover {
    box-shadow: 0 2px 12px rgba(30, 26, 43, 0.08);
}

/* Login/out item on the Avada main menu */
.fusion-main-menu .vosyn-menu-loginout a {
    font-weight: 600;
}

/* ==========================================================================
   CB-05 — vosyn.ai footer replica. Navy gradient, four columns, inert
   newsletter (CB-05a), LinkedIn pill, left-aligned copyright under a thin
   divider. Widgets/options set by tools/setup-site.php §4c.
   ========================================================================== */

.fusion-footer {
    /* CB-THEME: starts at the shared canvas token → seamless page-to-footer blend */
    background: var(--vt-footer-grad);
}

.fusion-footer-widget-area,
.fusion-footer-copyright-area {
    background: transparent;
    border: 0;
}

.fusion-footer-widget-area {
    padding: 56px 0 28px;
    color: #aeb4d4;
}

.fusion-footer-widget-area .widget-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 22px;
}

.vosyn-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vosyn-footer-links li {
    margin: 0 0 16px;
}

.vosyn-footer-links a,
.fusion-footer-widget-area a {
    color: #aeb4d4;
    text-decoration: none;
}

.vosyn-footer-links a:hover,
.fusion-footer-widget-area a:hover {
    color: #ffffff;
}

.vosyn-footer-newsletter-heading {
    color: #e9ebf7;
    font-size: 1.1em;
    margin: 0 0 14px;
}

.vosyn-footer-newsletter {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.vosyn-footer-newsletter input[type="email"] {
    /* 220px is the preferred size, not a floor: a hard min-width blew the
       input 48px past a 375px viewport (footer column starts at x≈204).
       flex-basis keeps the desktop layout; min-width:0 lets it shrink. */
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
    background: transparent;
    border: 1px solid #d9dcef;
    border-radius: 6px;
    color: #ffffff;
    padding: 12px 16px;
}

.vosyn-footer-newsletter input[type="email"]::placeholder {
    color: #b9bfdd;
}

.vosyn-footer-newsletter button {
    background: #4a6cf7;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 12px 22px;
    font-weight: 700;
    cursor: pointer;
}

.vosyn-footer-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #16181d !important;
    border-radius: 999px;
    padding: 7px 16px 7px 10px;
    font-size: 0.88em;
    font-weight: 600;
    text-decoration: none;
}

.vosyn-footer-linkedin svg {
    background: #16181d;
    color: #ffffff;
    border-radius: 50%;
    padding: 4px;
    width: 26px;
    height: 26px;
}

.fusion-footer-copyright-area {
    padding: 22px 0 30px;
    border-top: 1px solid rgba(174, 180, 212, 0.25);
    text-align: left;
}

.fusion-copyright-notice {
    color: #aeb4d4;
    font-size: 0.9em;
    text-align: left;
    padding: 0;
}

/* Avada keeps the four footer columns as a floated 2x2 grid on phones
   (col-sm-3 = 50%), leaving each widget ~173px — the newsletter placeholder
   clipped to "Enter your ema" and the whole footer sat lopsided in the right
   half of a 375px screen. Below 640px the columns stack full-width instead.
   Scoped to the footer widget area only; page-body columns are untouched.
   !important is required: the compiled fusion-styles sheet loads AFTER this
   file and re-asserts the 50% col-sm width (its own stacking rule targets
   .footer-area, a class this footer markup does not carry). */
@media (max-width: 640px) {
    .fusion-footer-widget-area .fusion-columns .fusion-column {
        float: none !important;
        width: 100% !important;
        margin-bottom: 36px !important;
    }

    .fusion-footer-widget-area .fusion-columns .fusion-column.fusion-column-last {
        margin-bottom: 0 !important;
    }

    .fusion-footer-widget-area .fusion-footer-widget-column {
        margin-bottom: 0; /* the column carries the gap; avoid double spacing */
    }
}

/* Dark header to match vosyn.ai — the brand logo's wordmark is white (WO-05).
   Revert by removing this block. */
.fusion-header,
.fusion-secondary-header {
    background-color: #0d0b16;
}

.fusion-header .fusion-main-menu > ul > li > a,
.fusion-header .fusion-main-menu .fusion-main-menu-icon::before {
    color: #f4f2f8;
}

.fusion-header .fusion-main-menu > ul > li > a:hover,
.fusion-header .fusion-main-menu > ul > li.current-menu-item > a {
    color: #d326c5;
}

.fusion-logo img {
    max-height: 56px;
    width: auto;
}
/* ==========================================================================
   ADMIN-02 Part 2 — inline links on dark surfaces (defect: near-black links
   on navy, e.g. the zero-record notice). Every bare <a> in content on the
   dark canvas gets the --vt-link token; buttons, job-row links, category
   cards and reveal buttons keep their own component styling. Underline on
   hover/focus for a second non-color cue.
   ========================================================================== */
#main .post-content a:not([class*="vosyn-btn"]):not(.vosyn-row-link):not(.vosyn-cat-card):not(.button):not(.vosyn-adm-rail-item):not(.vosyn-adm-stat):not(.vosyn-err-link),
.vosyn-notice a,
.vosyn-board-empty a,
.vosyn-dash-card a:not([class*="vosyn-btn"]),
.vosyn-dashboard-links a,
.vosyn-adm-more a,
.vosyn-adm-switch,
.vosyn-dash-adminswitch a {
    color: var(--vt-link);
    text-decoration: none;
}

#main .post-content a:not([class*="vosyn-btn"]):not(.vosyn-row-link):not(.vosyn-cat-card):not(.button):not(.vosyn-adm-rail-item):not(.vosyn-adm-stat):not(.vosyn-err-link):hover,
#main .post-content a:not([class*="vosyn-btn"]):not(.vosyn-row-link):not(.vosyn-cat-card):not(.button):not(.vosyn-adm-rail-item):not(.vosyn-adm-stat):not(.vosyn-err-link):focus,
.vosyn-notice a:hover,
.vosyn-notice a:focus,
.vosyn-board-empty a:hover,
.vosyn-dash-card a:hover,
.vosyn-dashboard-links a:hover,
.vosyn-adm-more a:hover,
.vosyn-adm-switch:hover,
.vosyn-dash-adminswitch a:hover {
    color: var(--vt-link);
    text-decoration: underline;
}

/* Keep the breadcrumb's quieter muted style (already AA at 7.7:1). */
#main .post-content .vosyn-breadcrumb a {
    color: var(--vt-muted);
}

#main .post-content .vosyn-breadcrumb a:hover {
    color: var(--vt-white);
}

/* ---- ADMIN-02 Part 3: admin dashboard theme accents on the dark canvas ---- */
.vosyn-adm-rowtrack {
    background: rgba(255, 255, 255, 0.07);
}

.vosyn-adm-col.is-issued,
.vosyn-adm-key.is-issued,
.vosyn-adm-col.is-low {
    background: var(--vt-surface-2);
    border: 1px solid var(--vt-border);
    border-bottom: 0;
}

.vosyn-adm-key.is-issued {
    border: 1px solid var(--vt-border);
}

.vosyn-adm-col.is-responded,
.vosyn-adm-key.is-responded {
    background: linear-gradient(180deg, #8E3DD6 0%, #5F6FD8 100%);
}

.vosyn-adm-col.is-warn { background: #ffd37a; }
.vosyn-adm-col.is-ok { background: #2fdca0; }
.vosyn-adm-rowbar { background: var(--vt-blue); }
.vosyn-adm-rowbar.is-ok { background: #2fdca0; }
.vosyn-adm-queue-why { color: #ffd37a; }

/* ==========================================================================
   MOBILE-DROPDOWN LEGIBILITY (operator report 2026-07-27, iPhone/Safari)
   --------------------------------------------------------------------------
   A <select> is two surfaces, not one. The CLOSED control is ours to style —
   dark navy field, near-white text, correct on this theme. The OPEN list is
   drawn by the operating system on its OWN panel, which is WHITE on iOS and
   Android, and it paints the choices using the inherited `color`. So every
   near-white select on this site rendered white-on-white the moment a phone
   user tapped it: the menu in the screenshot, plus the board's hero search,
   the application form, both interview questionnaires and the Next Step Form.

   Fixing this on `select` would flatten the dark field treatment everywhere.
   Styling `option` alone is what actually matters: the closed control keeps
   its design, and the OS list gets a colour pair that is legible on the white
   panel it is really drawn on. #16233b on #ffffff is 15.7:1 (WCAG AAA).

   The Avada mobile menu ("Go to…") is built in JavaScript at mobile widths
   and never exists in the server HTML, so it inherits the body's near-white
   text with no rule of its own — it is pinned explicitly below.
   ========================================================================== */
option,
optgroup {
    color: #16233b;
    background-color: #ffffff;
    /* iOS honours -webkit-text-fill-color over color on form controls. */
    -webkit-text-fill-color: #16233b;
}

/* Avada's JS-generated mobile nav select — inherits body text colour, so both
   the closed control and its options need pinning. */
.fusion-mobile-nav-holder select,
.fusion-mobile-nav-holder select option {
    color: #16233b;
    -webkit-text-fill-color: #16233b;
    background-color: #ffffff;
}

/* ==========================================================================
   ROUND 2 — mobile/OS-surface legibility (audit 2026-07-27)
   Same root cause as the <option> fix above: surfaces the OS paints itself,
   which our styling does not reach. Grouped here so the whole family of
   fixes stays together.
   ========================================================================== */

/* --- R2.1  Autofilled fields were invisible on iPhone -------------------
   No rule in this codebase touched :-webkit-autofill, and no candidate-facing
   surface declared color-scheme. Safari therefore treated the dark careers
   site as a light page and painted autofilled inputs with its own pale yellow
   (#FAFFBD); Chrome uses #E8F0FE. Our near-white text stayed — 1.01:1, blank
   to the eye. Author `background` cannot win here at any specificity, so the
   value is carried by an inset box-shadow and the text by -webkit-text-fill-
   color, which are the two properties WebKit does honour.
   Declaring color-scheme additionally makes Safari pick its DARK autofill
   treatment, which fixes the cause rather than only the symptom.
   This matters because every one of these fields carries an autocomplete
   token, so iOS Contact-card AutoFill is exactly the expected way to fill
   this form. */
.vosyn-application,
.vosyn-apply-wrap,
.vosyn-questionnaire,
.vosyn-nsf,
.vosyn-sjt,
.vosyn-dashboard,
.vosyn-careers {
    color-scheme: dark;
}

.vosyn-application input:-webkit-autofill,
.vosyn-application input:-webkit-autofill:hover,
.vosyn-application input:-webkit-autofill:focus,
.vosyn-apply-wrap input:-webkit-autofill,
.vosyn-apply-wrap input:-webkit-autofill:hover,
.vosyn-apply-wrap input:-webkit-autofill:focus,
.vosyn-questionnaire input:-webkit-autofill,
.vosyn-nsf input:-webkit-autofill,
.vosyn-sjt input:-webkit-autofill,
.vosyn-register-form input:-webkit-autofill,
.vosyn-register-form input:-webkit-autofill:hover,
.vosyn-register-form input:-webkit-autofill:focus,
.vosyn-dashboard input:-webkit-autofill,
.fusion-footer-widget-area input:-webkit-autofill {
    -webkit-text-fill-color: #f7f9ff;
    caret-color: #f7f9ff;
    -webkit-box-shadow: 0 0 0 1000px #0d1740 inset;
    box-shadow: 0 0 0 1000px #0d1740 inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* --- R2.2  Nine required fields showed a red error border on first paint --
   `:not(:placeholder-shown)` is TRUE for an input that has no placeholder
   attribute at all, so the apply form's required fields (legal_first_name,
   legal_last_name, captcha_answer, password …) matched :invalid while still
   untouched. The form read as already-failed before a keystroke, and the
   pre-emptive red was the same colour as the genuine post-submit error, so
   real errors were indistinguishable.
   Neutralised here, and the red re-applied via :user-invalid, which fires
   only after the candidate has actually interacted with the field. Browsers
   without :user-invalid simply show no premature red, which is the safe
   direction to fail in — the real .has-error signal is unaffected. */
.vosyn-apply-wrap .vosyn-application input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--va-hair) !important;
}
.vosyn-apply-wrap .vosyn-application input:user-invalid:not(:focus) {
    border-color: var(--va-danger, #ff6b7a) !important;
}

/* --- R2.3  Harden the <option> fix -------------------------------------
   The rules above are bare element selectors with no !important, while every
   other form-control colour rule in this codebase carries !important. A
   future plugin or theme update shipping any `select option { color: … }`
   would silently revert it — and this bug is invisible on desktop, so the
   regression would not be noticed. Pinned. */
option,
optgroup,
select option,
select optgroup {
    color: #16233b !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #16233b !important;
}

/* --- R2.4  Closed <select> on the candidate dashboard ------------------
   The fix above covers the OPEN list. `.vosyn-dash .vosyn-dash-card select`
   sets colour from --vosyn-ink — which the child theme redefines to near-
   white — while no rule gives that select a background, so the CLOSED control
   drew near-white text on the OS's default light chrome. Give it the same
   dark field treatment the other candidate inputs get. */
.vosyn-dash .vosyn-dash-card select,
.vosyn-dashboard select {
    background: var(--vt-canvas) !important;
    color: var(--vt-white) !important;
    -webkit-text-fill-color: var(--vt-white);
    border: 1px solid var(--vt-border);
}

/* --- R2.5  E-signature placeholder was 3.18:1 --------------------------
   This placeholder is the instruction telling the candidate what to type into
   the legally binding signature field, and it sat below the 4.5:1 minimum on
   its white control. #616a7d on #ffffff is 5.5:1. */
.vosyn-dash-esign input[type="text"]::placeholder {
    color: #616a7d !important;
    -webkit-text-fill-color: #616a7d;
    opacity: 1;
}

/* ==========================================================================
   ROUND 3 — measured on a real 390x844 render, not inferred from CSS
   (audit 2026-07-27). Findings ranked by how often a candidate hits them.
   ========================================================================== */

/* --- R3.1  iOS zoomed the whole page every time a field was tapped ------
   Safari force-zooms when a focused text control is under 16px. The apply
   form had EIGHTEEN controls at 15px and the captcha at 13.33px, so a
   candidate filling this form on an iPhone got a zoom-in on every single
   field and had to pinch back out to see the next one — eleven times to
   complete one application. This is not a contrast bug; it is the single
   most irritating mobile defect on the site.
   16px is the exact threshold, so nothing gets visually bigger than it
   must. Scoped to touch widths, so desktop keeps its 15px density. */
@media (max-width: 820px) {
    .vosyn-application input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .vosyn-application select,
    .vosyn-application textarea,
    .vosyn-apply-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .vosyn-apply-wrap select,
    .vosyn-apply-wrap textarea,
    .vosyn-questionnaire input:not([type="checkbox"]):not([type="radio"]),
    .vosyn-questionnaire select,
    .vosyn-questionnaire textarea,
    .vosyn-nsf input:not([type="checkbox"]):not([type="radio"]),
    .vosyn-nsf select,
    .vosyn-nsf textarea,
    .vosyn-sjt input:not([type="checkbox"]):not([type="radio"]),
    .vosyn-sjt textarea,
    .vosyn-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .vosyn-dashboard select,
    .vosyn-dashboard textarea,
    .vosyn-hero-search input,
    .vosyn-hero-search select,
    body.login input[type="text"],
    body.login input[type="password"],
    body.login input[type="email"] {
        font-size: 16px !important;
    }
}

/* --- R3.2  Captcha refresh was a 71x15px target ------------------------
   Measured at 71 x 15 on the apply form, the account form and the login
   screen. Fifteen pixels tall is roughly a third of a fingertip, and it sits
   directly above the captcha input — a miss lands in the text field instead.
   Given it is the recovery control for an unreadable captcha, it has to be
   reliably hittable. Padding carries the height so the visual weight of the
   link is unchanged. */
.vosyn-captcha-refresh,
.vosyn-quiz-human-refresh {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-left: -10px; /* keep the label optically aligned with the field */
}

/* --- R3.3  Newsletter button: white on #4a6cf7 was 4.39:1 --------------
   Just under the 4.5:1 minimum for its 13.3px label. #4361e8 is the smallest
   step that clears it (5.10:1) while staying the same blue. */
.vosyn-footer-newsletter button {
    background: #4361e8;
}

/* --- R3.4  "Optional" field markers rendered at 10.66px ----------------
   Below the 12px floor for legible body text on a phone. These mark which
   fields a candidate may skip, so they are worth reading. */
.vosyn-apply-opt {
    font-size: 12px;
}

/* --- R3.5  The account-creation form was missed by R3.1 ----------------
   It uses .vosyn-register-form, not the .vosyn-application wrapper the other
   candidate forms share, so the 16px floor and the control sizing did not
   reach it. Measured there: captcha input at 13.33px (page zooms on tap),
   the "Create my account" submit at 128 x 21px, and the inline links under
   the WCAG target minimum. This is the first form a candidate ever touches. */
@media (max-width: 820px) {
    .vosyn-register-form input:not([type="checkbox"]):not([type="radio"]),
    .vosyn-register-form select,
    .vosyn-register-form textarea {
        font-size: 16px !important;
    }
}

.vosyn-register-form button[type="submit"],
.vosyn-register-form input[type="submit"] {
    min-height: 44px;
    padding: 11px 22px;
}

.vosyn-register-form a {
    display: inline-block;
    padding: 6px 2px; /* height only — no horizontal shift to the text */
}

/* --- R3.6  Last of the undersized controls, measured ------------------
   captcha_answer on the account form: 195 x 26px. It is a required field on
   the first form a candidate ever fills in, and at 26px tall it is easy to
   miss and awkward to focus. The other two are chrome sitting a couple of
   pixels under the 44px minimum — cheap to correct, no layout consequence. */
.vosyn-register-form input[name="captcha_answer"] {
    min-height: 44px;
    padding: 10px 12px;
}

.fusion-mobile-selector { min-height: 44px; }
.vosyn-footer-newsletter button { min-height: 44px; }

/* ==========================================================================
   R4 — the ACTUAL mobile menu bug (measured 2026-07-28)
   ==========================================================================
   The earlier `option { }` rules were aimed at the wrong element. Avada's
   mobile menu here is not a native <select> at all: "Go to..." is a
   <button class="fusion-mobile-selector"> that expands a <ul> of ordinary
   <a> links. No <option> exists on the page, so nothing above ever applied
   to it — which is why the text stayed white on a phone.

   Measured on the open menu at 390px:
       colour  rgb(247,249,255)   (line 87-91 forces --vt-off-white)
       behind  rgb(255,255,255)   (Avada paints the open row white)
       ratio   1.05:1

   Two rules from opposite directions met on the same element: ours made the
   link near-white for the dark header bar, Avada made the expanded row white.
   Fixed by giving the expanded panel the dark canvas it was always designed
   for, so the existing light link colour is correct again — rather than
   flipping the text dark, which would then break the collapsed bar.
   ========================================================================== */
.fusion-mobile-nav-holder,
.fusion-mobile-nav-holder ul,
.fusion-mobile-nav-holder li,
.fusion-mobile-nav-holder .fusion-mobile-nav-item,
.fusion-mobile-nav-holder .fusion-mobile-nav-item a,
.fusion-mobile-nav-holder .fusion-mobile-nav-item a.fusion-bar-highlight,
.fusion-mobile-navigation,
.fusion-mobile-navigation ul,
.fusion-mobile-navigation li,
.fusion-mobile-navigation a {
    background-color: var(--vt-canvas, #030b26) !important;
    background-image: none !important;
}

.fusion-mobile-nav-holder .fusion-mobile-nav-item a,
.fusion-mobile-navigation a {
    color: var(--vt-off-white, #f7f9ff) !important;
    border-bottom: 1px solid var(--vt-border, #232e56);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.fusion-mobile-nav-holder .fusion-mobile-nav-item a:hover,
.fusion-mobile-nav-holder .fusion-mobile-nav-item a:focus,
.fusion-mobile-navigation a:hover,
.fusion-mobile-navigation a:focus {
    color: var(--vt-green, #34d399) !important;
    background-color: var(--vt-elevated, #161f44) !important;
}

/* The "Go to..." control itself sits on the same dark bar. */
.fusion-mobile-selector {
    background-color: var(--vt-canvas, #030b26) !important;
    color: var(--vt-off-white, #f7f9ff) !important;
    border: 1px solid var(--vt-border, #232e56) !important;
}

/* ============================================================
   P1-38 (Vosyn ATS Pass 1, 2026-07-31) — mobile menu restyle.
   C6 screenshots 23/28/30/32: Avada's classic mobile selector
   rendered as a bare white "Go to..." bar, and its caret div
   (.fusion-selector-down) draws via the awb-icons font — which
   showed a tofu box (▯) when the glyph failed on phones. The
   bar now matches the dark brand shell, and the caret is pure
   CSS (a border chevron), so no icon font can ever tofu it.
   Verified against the REAL rendered element:
   button.fusion-mobile-selector inside nav.fusion-mobile-nav-holder
   (it is a BUTTON, not a select — see the project memory).
   ============================================================ */
.fusion-mobile-nav-holder .fusion-mobile-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: #0b1026;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
}
.fusion-mobile-nav-holder .fusion-mobile-selector span {
    color: #fff;
}
/* Pure-CSS caret — replaces the icon-font glyph entirely. */
.fusion-mobile-nav-holder .fusion-selector-down {
    width: 10px;
    height: 10px;
    border-right: 2px solid #e57ddc;
    border-bottom: 2px solid #e57ddc;
    transform: rotate(45deg);
    transition: transform 140ms ease;
}
.fusion-mobile-nav-holder .fusion-selector-down::before,
.fusion-mobile-nav-holder .fusion-selector-down::after {
    content: none !important; /* kill any icon-font glyph Avada injects */
}
.fusion-mobile-nav-holder .fusion-mobile-selector[aria-expanded="true"] .fusion-selector-down {
    transform: rotate(-135deg);
}
/* The opened menu list matches the same shell. */
.fusion-mobile-nav-holder .fusion-mobile-menu {
    background: #0b1026;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
.fusion-mobile-nav-holder .fusion-mobile-menu li a {
    color: #fff;
    padding: 12px 16px;
}
.fusion-mobile-nav-holder .fusion-mobile-menu li a:hover,
.fusion-mobile-nav-holder .fusion-mobile-menu .fusion-mobile-current-nav-item > a {
    color: #e57ddc;
}

/* ==========================================================================
   P1-61 follow-ups (2026-07-31, both raised by verification of the sign-up
   contrast fix). The governing principle, learned the hard way: whichever
   rule supplies a field's INK must supply its BACKGROUND in the same
   declaration. When the two come from rules of different strength, a later
   cascade change flips one without the other and the text disappears.
   ========================================================================== */

/* --- 1. Dashboard textarea: ink and background now travel together --------
   vosyn.css:2552-2554 sets this textarea's ink from --vosyn-ink (near-white)
   at (0,2,1), while the dark background that makes it readable came from
   .vosyn-dashboard textarea at only (0,1,1) — one step above Avada's own
   `textarea{background:var(--form_bg_color)}`. Readable today at 18.48:1,
   but the protection was asymmetric. This sets both, at (0,2,1), so they
   cannot separate. */
.vosyn-dash .vosyn-dash-card textarea,
.vosyn-dashboard textarea {
    background: var(--vt-canvas);
    color: var(--vt-white);
    -webkit-text-fill-color: var(--vt-white);
    border: 1px solid var(--vt-border);
}

/* --- 2. Questionnaire "Please explain" field -----------------------------
   This field rendered as a WHITE box: Avada's `input[type="text"]` ties on
   specificity with `.vosyn-questionnaire input` and loads last, so neither
   the plugin's nor this theme's dark-field treatment ever reached it. The
   placeholder — which is the instruction telling the candidate what to write
   — inherited the dark-field tone and sat at 2.54:1 on white, below the 4.5:1
   minimum. Raising specificity to (0,2,1) makes it a dark field like every
   other candidate input, which fixes the placeholder as a consequence rather
   than by patching its colour. */
.vosyn-questionnaire input.vosyn-quiz-otherinput,
.vosyn-questionnaire input.vosyn-quiz-otherinput:focus {
    background: var(--vt-canvas);
    color: var(--vt-white);
    -webkit-text-fill-color: var(--vt-white);
}
.vosyn-questionnaire input.vosyn-quiz-otherinput::placeholder {
    color: var(--vt-muted) !important;
    -webkit-text-fill-color: var(--vt-muted);
    opacity: 1;
}