/* =============================================================
   far_connect plugin stylesheet
   Presentation → Styles → far_connect

   Styles are applied automatically. No editing required.

   Theme is controlled by data-far-theme="light|dark" on the form
   element, set by the <txp:far_connect> wrapper tag.
   When theme is "auto" no attribute is set and the @media
   (prefers-color-scheme) rules below handle both modes.

   To override a value add your own rule with higher specificity
   after this stylesheet, e.g.:
       form[data-far-theme="dark"] .far-com-required { color: red; }
   ============================================================= */


/* -------------------------------------------------------------
   .far-com-sr-only
   Visually hidden text for screen readers.
   Required for accessibility. Do not remove or modify.
   ------------------------------------------------------------- */
.far-com-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* -------------------------------------------------------------
   Theme tokens
   Set on the form element by the <txp:far_connect> wrapper.
   data-far-theme="light"  — always light
   data-far-theme="dark"   — always dark
   no attribute            — follows OS prefers-color-scheme (auto)
   ------------------------------------------------------------- */
form[data-far-theme="light"] {
    --far-legend-color: rgba(0, 0, 0, 0.5);
    --far-disabled-opacity: 0.4;
}

form[data-far-theme="dark"] {
    --far-legend-color: rgba(255, 255, 255, 0.6);
    --far-disabled-opacity: 0.3;
}

@media (prefers-color-scheme: light) {
    form:not([data-far-theme]) {
        --far-legend-color: rgba(0, 0, 0, 0.5);
        --far-disabled-opacity: 0.4;
    }
}

@media (prefers-color-scheme: dark) {
    form:not([data-far-theme]) {
        --far-legend-color: rgba(255, 255, 255, 0.6);
        --far-disabled-opacity: 0.3;
    }
}


/* -------------------------------------------------------------
   .far-com-required-legend
   Legend shown at the top of the form explaining * and †.
   ------------------------------------------------------------- */
.far-com-required-legend {
    font-size: 0.875em;
    color: var(--far-legend-color, rgba(0, 0, 0, 0.5));
    margin-bottom: 1em;
}


/* -------------------------------------------------------------
   .far-com-required  /  .far-com-dagger
   The * and † markers appended to field labels.
   They inherit colour from the label by default.
   Uncomment the blocks below to colour them explicitly.
   ------------------------------------------------------------- */
.far-com-required,
.far-com-dagger {
    font-weight: bold;
    margin-left: 2px;
}

/* Optional: colour * and † explicitly:
form[data-far-theme="light"] .far-com-required { color: #cc0000; }
form[data-far-theme="light"] .far-com-dagger   { color: #0066cc; }
form[data-far-theme="dark"]  .far-com-required { color: #ff6b6b; }
form[data-far-theme="dark"]  .far-com-dagger   { color: #66aaff; }
*/


/* -------------------------------------------------------------
   .far-com-captcha-group
   Wrapper div around the captcha widget.
   ------------------------------------------------------------- */
.far-com-captcha-group {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}


/* -------------------------------------------------------------
   Disabled submit button
   Shown while captcha is unsolved or either/or fields are empty.
   ------------------------------------------------------------- */
[type="submit"][disabled],
[type="submit"][disabled]:hover,
[type="submit"][disabled]:focus,
[type="submit"][aria-disabled="true"],
[type="submit"][aria-disabled="true"]:hover,
[type="submit"][aria-disabled="true"]:focus {
    opacity: var(--far-disabled-opacity, 0.4) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}