/* Styling for the Privacy Policy, Terms of Use and trust pages (about,
   contact, methodology, data-removal).
   Loaded under both the legacy sheet and common.css, so every token has a
   literal fallback and every form rule out-specifies the legacy element
   selectors (form / input[type="text"] / label p / h1 / h2). */

.legal {
    max-width: 780px;
    margin: 0 auto;
    padding: 24px 20px 64px;
    color: var(--text, #2f3b46);
    font-size: 16px;
    line-height: 1.65;
}

.legal h1 {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 4px;
    color: var(--brand-blue, #2D5B8D);
}

.legal h2 {
    font-size: 20px;
    line-height: 1.3;
    margin: 32px 0 8px;
    color: var(--brand-blue, #2D5B8D);
}

.legal p {
    margin: 0 0 14px;
}

.legal ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.legal li {
    margin-bottom: 6px;
}

.legal a {
    color: var(--brand-blue, #2D5B8D);
    text-decoration: underline;
}

.legal a:hover {
    color: var(--red, #F60610);
}

.legal-updated {
    color: var(--navy-2, #516f90);
    font-size: 14px;
    margin-bottom: 24px !important;
}

.legal-callout-heading {
    margin-bottom: 0 !important;
}

.legal-callout {
    border: 1px solid var(--red-line, #f3b8b8);
    border-left: 3px solid var(--red, #F60610);
    background: var(--red-bg, #fdf5f5);
    padding: 16px 18px 4px;
    border-radius: var(--radius, 0);
    margin: 12px 0 14px;
}

.legal-callout ul {
    margin-bottom: 12px;
}

/* --- Trust pages (/about /contact /methodology /data-removal) ------------- */
/* same measure and typography as .legal; headings bold and left-aligned
   (the legacy sheet centres h1/h2 and paints h2 with a gradient) */

.trust-page {
    display: block;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 24px 20px 64px;
    color: var(--text, #2f3b46);
    font-family: "Scrubber-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-align: left;
}

.trust-page h1,
.trust-page h2,
.trust-page h3 {
    font-family: "Scrubber-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-align: left;
    color: var(--brand-blue, #2D5B8D);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

.trust-page h1 {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 4px;
}

.trust-page h2 {
    font-size: 20px;
    line-height: 1.3;
    margin: 32px 0 8px;
}

.trust-page h3 {
    font-size: 17px;
    line-height: 1.35;
    margin: 24px 0 6px;
}

.trust-page p {
    margin: 0 0 14px;
}

.trust-page ul,
.trust-page ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.trust-page li {
    margin-bottom: 6px;
}

.trust-page a {
    color: var(--brand-blue, #2D5B8D);
    text-decoration: underline;
}

.trust-page a:hover {
    color: var(--red, #F60610);
}

/* --- Data-removal form set ------------------------------------------------ */
/* Square controls, 44px tall, 1px hairline, navy focus ring. Selectors are
   compounded (.form-stack .form-input etc.) so they beat the legacy sheet's
   `form { display:flex; flex-direction:row; padding:20px 0 }`,
   `input[type="text"] { font-size:26px; max-width:280px; border:none }`,
   `input[type="text"]:focus { border:none; outline:none }` and `label p`. */

form.form-stack,
.form-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 0;
    background: none;
    box-shadow: none;
}

.form-stack .form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px 16px;
    width: 100%;
}

.form-stack .form-row > .form-field {
    flex: 1 1 240px;
}

.form-stack .form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.form-stack .form-label,
.form-stack label.form-label {
    display: block;
    margin: 0;
    padding: 0;
    font-family: "Scrubber-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.01em;
    color: var(--navy-dark, #425b74);
    text-align: left;
    cursor: pointer;
}

.form-stack .form-label .req,
.form-stack .form-label abbr {
    color: var(--red-mid, #d9363e);
    text-decoration: none;
    border: 0;
    margin-left: 2px;
}

.form-stack .form-input,
.form-stack .form-select,
.form-stack .form-textarea,
.form-stack input.form-input,
.form-stack select.form-select,
.form-stack textarea.form-textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    font-family: "Scrubber-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: var(--text, #2f3b46);
    background-color: var(--surface, #ffffff);
    background-image: none;
    border: 1px solid var(--line-strong, #c5cfd9);
    border-radius: 0;
    outline: none;
    box-shadow: none;
    caret-color: var(--navy, #436280);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-stack .form-textarea,
.form-stack textarea.form-textarea {
    height: auto;
    min-height: 132px;
    padding: 11px 14px;
    resize: vertical;
}

.form-stack .form-select,
.form-stack select.form-select {
    padding-right: 40px;
    background-image: url(/icon/drop-down-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 12px;
    cursor: pointer;
}

.form-stack .form-input::placeholder,
.form-stack .form-textarea::placeholder {
    color: var(--muted-2, #8b98a5);
    opacity: 1;
}

.form-stack .form-input:focus,
.form-stack .form-select:focus,
.form-stack .form-textarea:focus,
.form-stack input.form-input:focus,
.form-stack select.form-select:focus,
.form-stack textarea.form-textarea:focus {
    border: 1px solid var(--navy, #436280);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--navy, #436280);
}

.form-stack .form-input[aria-invalid="true"],
.form-stack .form-select[aria-invalid="true"],
.form-stack .form-textarea[aria-invalid="true"],
.form-stack .form-input.invalid,
.form-stack .form-select.invalid,
.form-stack .form-textarea.invalid {
    border: 1px solid var(--red-mid, #d9363e) !important;
    box-shadow: inset 0 0 0 1px var(--red-mid, #d9363e) !important;
}

.form-stack .form-input:disabled,
.form-stack .form-select:disabled,
.form-stack .form-textarea:disabled {
    background-color: var(--tint-2, #f7f9fb);
    color: var(--muted, #6b7a89);
    cursor: not-allowed;
}

.form-stack .form-help,
.form-stack p.form-help,
.form-field .form-help {
    display: block;
    position: static;
    margin: 0;
    padding: 0;
    font-family: "Scrubber-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    color: var(--muted, #6b7a89);
    text-align: left;
    white-space: normal;
    visibility: visible;
}

/* checkbox / consent rows: control beside the label text */
.form-stack .form-field.form-check,
.form-stack .form-check {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.form-stack .form-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--navy, #436280);
}

.form-stack .form-check .form-label {
    font-family: "Scrubber-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 22px;
    color: var(--text, #2f3b46);
}

.form-stack .form-actions,
.form-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
}

/* honeypot: off-canvas, never display:none (bots skip display:none fields) */
.form-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* --- Buttons -------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
button.btn-primary,
button.btn-secondary,
a.btn-primary,
a.btn-secondary,
input.btn-primary,
input.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 140px;
    height: 44px;
    margin: 0;
    padding: 0 22px;
    font-family: "Scrubber-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary {
    color: #ffffff;
    background: var(--navy, #436280);
    border: 1px solid var(--navy, #436280);
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
input.btn-primary:hover {
    color: #ffffff;
    background: var(--navy-dark, #425b74);
    border-color: var(--navy-dark, #425b74);
}

.btn-secondary,
button.btn-secondary,
a.btn-secondary,
input.btn-secondary {
    color: var(--navy, #436280);
    background: var(--surface, #ffffff);
    border: 1px solid var(--navy, #436280);
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover,
input.btn-secondary:hover {
    color: var(--navy-dark, #425b74);
    background: var(--tint, #eef2f6);
    border-color: var(--navy-dark, #425b74);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--navy-4, #849bb4);
    outline-offset: 2px;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Notices -------------------------------------------------------------- */

.notice-ok,
.notice-error {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 18px;
    padding: 12px 16px;
    font-family: "Scrubber-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 22px;
    text-align: left;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: 0;
    overflow-wrap: anywhere;
}

.notice-ok {
    color: var(--green, #158a3c);
    background: var(--green-bg, #e6f4ea);
    border-color: var(--green-line, #bfe3c9);
    border-left-color: var(--green, #158a3c);
}

.notice-error {
    color: var(--red-dark, #c62828);
    background: var(--red-bg, #fdecec);
    border-color: var(--red-line, #f3b8b8);
    border-left-color: var(--red-mid, #d9363e);
}

.notice-ok strong,
.notice-error strong {
    font-family: "Scrubber-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.notice-ok p:last-child,
.notice-error p:last-child {
    margin-bottom: 0;
}

.notice-ok[hidden],
.notice-error[hidden] {
    display: none;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 600px) {
    .legal,
    .trust-page {
        padding: 16px 16px 48px;
        font-size: 15px;
    }
    .legal h1,
    .trust-page h1 { font-size: 25px; }
    .legal h2,
    .trust-page h2 { font-size: 18px; }

    .form-stack .form-row {
        flex-direction: column;
        gap: 18px;
    }

    .form-stack .form-row > .form-field {
        flex: 1 1 auto;
    }

    .form-stack .form-actions,
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary,
    button.btn-primary,
    button.btn-secondary,
    a.btn-primary,
    a.btn-secondary,
    input.btn-primary,
    input.btn-secondary {
        width: 100%;
    }
}

/* tuning pass 2026-09-26: headings on the declared bold weight (no synthesis), body one step up */
.legal, .trust-page { font-size: 17px; line-height: 1.45; font-weight: 500; }
.legal h1, .legal h2, .trust-page h1, .trust-page h2, .form-label, .btn-primary, .btn-secondary {
    font-family: "Scrubber-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600;
}
.legal h1, .trust-page h1 { font-size: 30px; line-height: 34px; }
.legal h2, .trust-page h2 { font-size: 21px; line-height: 25px; }
.form-label { font-size: 15px; } .form-help { font-size: 14px; }