/*
 * site.css — rules authored FOR OpenWorkerAI.
 *
 * Everything else in wwwroot/css is a straight port of an existing design
 * system (see D:\Code\Scripts\claude\owai-public-theme-port.sh). Keeping our own
 * rules here means the ported sheets stay pristine and can be re-ported from
 * source at any time without losing local work.
 *
 * Load order: LAST, after tokens.css and every ported sheet.
 */

/* ---------------------------------------------------------------------------
   1. Form-control contrast.

   WCAG 1.4.11 requires >= 3:1 for the boundary of a user-interface component.
   The inherited theme binds Bootstrap's --bs-border-color to the decorative
   keyline colour, which is ~1.5:1 on white — an input whose edge you cannot
   see. Controls are bound to --owai-border-strong (4.8:1) instead.
   --------------------------------------------------------------------------- */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--owai-border-strong);
}

.form-control::placeholder {
    /* Placeholders are still text and still need AA. */
    color: var(--owai-muted);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   2. Capability pillar grid.

   The ported catalogue grid is 5-up (it was built for a five-item taxonomy).
   We have four pillars, so: 4 -> 2x2 -> 1x4 down the theme's own breakpoints
   (74.99rem / 47.99rem), which keeps the responsive behaviour consistent with
   every other grid on the site.
   --------------------------------------------------------------------------- */
.owai-home__catalogue-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--owai-space-4);
}

@media (max-width: 74.99rem) {
    .owai-home__catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
    .owai-home__catalogue-grid { grid-template-columns: 1fr; }
}

/* The pillar cards carry prose rather than link lists, so they do not need the
   inherited fixed height that kept five ranking cards aligned. */
.owai-home__benchmark-card { min-height: 0; }

.owai-home__benchmark-card p {
    margin: 0;
    color: var(--owai-muted);
    font-size: var(--owai-text-14);
    line-height: var(--owai-leading-body);
}

.owai-home__benchmark-card h3 {
    margin: 0;
    font-family: var(--owai-font-display);
    font-size: var(--owai-text-18);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------------------
   3. Proof strip: word values, not numbers.

   The metric component sizes its value slot for a figure ("208M"). Ours carry a
   word ("Owned", "In production"), which at 2.5rem wraps and dwarfs its own
   label. Tighter, and no tabular-nums (there are no numerals to align).
   --------------------------------------------------------------------------- */
.owai-proof .owai-metric__value {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-variant-numeric: normal;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* ---------------------------------------------------------------------------
   4. Contact form.
   --------------------------------------------------------------------------- */

/* Honeypot. Deliberately NOT display:none or hidden — both are trivially
   detected and skipped by form bots. Positioned off-canvas, removed from the
   tab order and from the accessibility tree, so a human never meets it. */
.owai-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.owai-form {
    display: grid;
    gap: var(--owai-space-5);
    max-width: 40rem;
}

.owai-form__field { display: grid; gap: var(--owai-space-2); }

.owai-form__label {
    color: var(--owai-ink-strong);
    font-size: var(--owai-text-14);
    font-weight: 700;
}

.owai-form__hint {
    color: var(--owai-muted);
    font-size: var(--owai-text-12);
    line-height: 1.45;
}

.owai-form__error {
    color: var(--owai-critical);
    font-size: var(--owai-text-12);
    font-weight: 600;
}

/* Error summary. Takes focus on a failed submit so a screen-reader user is told
   what went wrong instead of being silently returned to the top of the page. */
.owai-form__summary {
    padding: var(--owai-space-4) var(--owai-space-5);
    color: var(--owai-critical);
    background: var(--owai-critical-tint);
    border: 1px solid color-mix(in srgb, var(--owai-critical) 34%, var(--owai-border));
    border-radius: var(--owai-radius-panel);
}

.owai-form__summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--owai-critical) 48%, transparent);
    outline-offset: 3px;
}

.owai-form__summary h2 {
    margin: 0 0 var(--owai-space-2);
    font-size: var(--owai-text-16);
    font-weight: 800;
}

.owai-form__summary ul { margin: 0; padding-left: 1.1rem; }
.owai-form__summary a { color: var(--owai-critical); font-weight: 600; }

/* The privacy link must sit AT THE POINT OF COLLECTION — beside the submit
   button — not only in the footer. */
.owai-form__consent {
    color: var(--owai-muted);
    font-size: var(--owai-text-12);
    line-height: var(--owai-leading-body);
}

.owai-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--owai-space-4);
    align-items: center;
}

/* ---------------------------------------------------------------------------
   5. Prose blocks (legal pages, About).
   --------------------------------------------------------------------------- */
.owai-prose { max-width: var(--owai-content-max); }
.owai-prose h2 {
    margin: var(--owai-space-8) 0 var(--owai-space-3);
    font-family: var(--owai-font-display);
    font-size: var(--owai-text-20);
    font-weight: 700;
}
.owai-prose h3 {
    margin: var(--owai-space-6) 0 var(--owai-space-2);
    font-size: var(--owai-text-16);
    font-weight: 700;
}
.owai-prose p,
.owai-prose li {
    color: var(--owai-muted);
    line-height: var(--owai-leading-body);
}
.owai-prose > p:first-of-type { color: var(--owai-ink); font-size: var(--owai-text-18); }

/* ---------------------------------------------------------------------------
   6. Footer legal identity block (statutory trading disclosures).
   --------------------------------------------------------------------------- */
.owai-legal-identity {
    margin: var(--owai-space-3) 0 0;
    color: var(--owai-muted-subtle);
    font-size: var(--owai-text-12);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   7. Utility.
   --------------------------------------------------------------------------- */
.owai-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}