/*
 * PCM Accessibility — statement and requests.
 *
 * The accessibility statement link (footer, mobile menu) and the request form
 * on the statement page. Linked by the module whenever the statement is on,
 * separately from pcm_accessibility.css: the statement with contact details is
 * required by law (regulation 35ה), the form is its request channel, and both
 * stay when the accessibility layer is switched off. Direction-neutral
 * properties only, like the layer.
 */

/*
 * Accessibility statement link: after the footer copyright (its own element:
 * the copyright is drawn at 40% opacity) and at the end of the mobile menu.
 */
.pcm-a11y-statement {
    margin: 0 0 2rem;
    font-size: 1.4rem;
    line-height: 1.3;
}

.pcm-a11y-statement-link,
.pcm-a11y-statement-link:hover,
.pcm-a11y-statement-link:visited {
    color: inherit !important;
    text-decoration: underline !important;
}

/*
 * Links on the statement page itself - in its text (phone, e-mail, WhatsApp,
 * contacts page) and in the form's list of errors: the theme gives article
 * links #4791FF, 3.1:1 on white, and 0.7 opacity on hover - below the 4.5:1
 * of SI 5568. The statement page is the text block that holds the request
 * form. A browser without :has() keeps the theme's colour.
 */
.ui-wysiwyg:has(> .pcm-a11y-request) a:not([class]),
.ui-wysiwyg:has(> .pcm-a11y-request) a:not([class]):visited,
.ui-wysiwyg:has(> .pcm-a11y-request) a:not([class]):hover {
    color: #1d4ed8 !important;
    opacity: 1 !important;
    text-decoration: underline !important;
}

/*
 * Visible keyboard focus without the layer: the theme removes every outline
 * (`* { outline: none }` and its button resets), and with the accessibility
 * layer switched off nothing gives it back. The statement link and every
 * control of the request form get the layer's ring of their own.
 */
.pcm-a11y-statement-link:focus-visible,
.pcm-a11y-request a:focus-visible,
.pcm-a11y-request input:focus-visible,
.pcm-a11y-request textarea:focus-visible,
.pcm-a11y-request select:focus-visible,
.pcm-a11y-request button:focus-visible {
    outline: 3px solid var(--pcm-a11y-focus, #1a237e) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--pcm-a11y-focus-halo, #fff) !important;
}

.pcm-a11y-statement--menu {
    margin: 2rem 0;
}

@media (min-width: 1200px) {
    .footer__bottom .pcm-a11y-statement {
        flex: 0 0 auto;
        margin: 0;
        margin-inline-end: 2rem;
    }
}

/* Request form on the statement page. */
.pcm-a11y-request {
    max-width: 64rem;
    margin: 4rem 0 0;
}

.pcm-a11y-request__note,
.pcm-a11y-request__help {
    display: block;
    margin: 0.75rem 0 0;
    font-size: 1.4rem;
}

.pcm-a11y-request__note {
    margin: 0 0 2rem;
}

.pcm-a11y-request .ui-field,
.pcm-a11y-request__methods {
    margin: 0 0 2rem;
}

.pcm-a11y-request__methods {
    border: 0;
    padding: 0;
    min-width: 0;
}

.pcm-a11y-request__method {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.4rem;
    margin-inline-end: 2.5rem;
    font-size: 1.5rem;
}

.pcm-a11y-request__result {
    margin: 0 0 3rem;
    padding: 1.5rem 2rem;
    border: 3px solid;
    border-radius: 0.8rem;
}

.pcm-a11y-request__result--success {
    border-color: #1b5e20;
}

.pcm-a11y-request__result--error {
    border-color: #b71c1c;
}

.pcm-a11y-request__result p {
    margin: 0 0 1rem;
}

/* Own class: the statement text's list style (ul:not([class])) draws its
   bullets at the far left of right-to-left pages. */
.pcm-a11y-request__errors {
    margin: 0;
    padding-inline-start: 2rem;
    list-style: disc;
}

.pcm-a11y-request__errors li {
    margin: 0 0 0.5rem;
}

.pcm-a11y-request__result:focus {
    outline: 3px solid var(--pcm-a11y-focus, #1a237e) !important;
    outline-offset: 2px !important;
}

/* Privacy notice, right before the send button (it describes the button). */
.pcm-a11y-request__privacy {
    margin: 0 0 2rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

/* Honeypot: out of sight and out of the Tab order; people leave it empty. */
.pcm-a11y-request__trap {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The types of request are longer: one per line. */
.pcm-a11y-request__type {
    display: flex;
    margin-block-end: 0.75rem;
}
