/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility & usability layer
   ───────────────────────────────────────────────────────────────────────────
   Loaded after every other stylesheet (inc/accessibility.php), so these rules
   win over the component files without specificity tricks. Fixes from the
   QA review of 2026-10-02.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Visible keyboard focus ──────────────────────────────────────────────── */

/* reset.css removed every focus ring; keyboard users could not see where
   they were. Mouse clicks still show nothing (:focus-visible only). */
:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 3px;
}

/* On the dark header, footer and photo heroes the ring is yellow. */
.nav :focus-visible,
.footer :focus-visible,
.section-hero :focus-visible,
.single-hero :focus-visible,
.nav__mobile-menu :focus-visible {
    outline-color: var(--accent);
}

/* Dialog headings take focus programmatically when a modal opens. */
.popup-card__title:focus {
    outline: none;
}

/* ─── Buttons that used to be <div>s ──────────────────────────────────────── */

button.nav__cta,
button#leave-review-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

button.nav__cta .nav__cta-piece,
button#leave-review-btn .btn-accent__left,
button#leave-review-btn .btn-accent__rotate,
button#leave-review-btn .btn-accent__right {
    display: block;
}

/* ─── Mobile menu out of the Tab order while closed ───────────────────────── */

.nav__mobile-menu {
    visibility: hidden;
    transition: max-height 0.35s ease, visibility 0s linear 0.35s;
}

.nav__mobile-menu--open {
    visibility: visible;
    transition: max-height 0.35s ease, visibility 0s linear 0s;
}

/* ─── Modals: reachable submit button, tappable close ─────────────────────── */

/* A dialog taller than the phone screen could not scroll, so the submit
   button stayed off-screen. */
body .modal {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* The card's slanted top mask sat over the close button. */
body .modal .popup-close {
    z-index: 3;
}

/* ─── Contrast ────────────────────────────────────────────────────────────── */

/* Secondary text on the yellow accent: black-70 gave 3.9:1, black-85 gives
   5.5:1. On white the same change only adds contrast. */
.section-emergency .section-tag span,
.section-emergency__privacy,
.projects-cta__tag,
.get-started__tag span,
.get-started__privacy,
.prefooter .section-tag,
.prefooter .section-tag span,
.prefooter p,
.prefooter .contact-list,
.prefooter small,
.prefooter .form small,
.pre-grid > div:last-child > .intro-copy,
.prefooter__desc,
.prefooter__form-subtitle,
.prefooter__privacy,
.prefooter__privacy-link,
.section-faq-cta__tag-text,
.section-faq-cta__privacy,
.project-cta__tag,
.project-cta__privacy,
.section-cta__wrap--yellow .section-cta__tag span,
.section-cta__wrap--yellow .section-cta__privacy {
    color: var(--black-85);
}

/* What visitors type was black-30 (1.8:1) in several forms. */
.section-emergency__field,
.get-started__input,
.get-started__textarea,
.prefooter__input,
.section-cta__input-field,
.section-cta__textarea {
    color: var(--black);
}

/* Placeholders double as the only field labels, so they must be readable:
   black-70 on white (4.7:1), black-80 on yellow (4.9:1). */
.section-emergency__field::placeholder,
.section-emergency .wpcf7 input::placeholder,
.section-emergency .wpcf7 textarea::placeholder,
.get-started__input::placeholder,
.get-started__textarea::placeholder,
.prefooter .form input::placeholder,
.prefooter .form textarea::placeholder,
.prefooter__input::placeholder,
.projects-cta__field input::placeholder,
.projects-cta__field textarea::placeholder,
.section-get-started .wpcf7 input::placeholder,
.section-get-started .wpcf7 textarea::placeholder,
.section-cta__input-field::placeholder,
.section-cta__textarea::placeholder,
.cta-form__field input::placeholder,
.cta-form__field textarea::placeholder,
.section-faq-cta__input-field::placeholder,
.section-faq-cta__textarea::placeholder {
    color: var(--black-70);
    opacity: 1;
}

.section-emergency .wpcf7 input::placeholder,
.section-emergency .wpcf7 textarea::placeholder,
.section-emergency__field::placeholder,
.prefooter .form input::placeholder,
.prefooter .form textarea::placeholder,
.prefooter__input::placeholder,
.projects-cta__field input::placeholder,
.projects-cta__field textarea::placeholder,
.section-faq-cta__input-field::placeholder,
.section-faq-cta__textarea::placeholder,
.section-cta__wrap--yellow .section-cta__input-field::placeholder,
.section-cta__wrap--yellow .section-cta__textarea::placeholder {
    color: rgba(51, 54, 57, 0.8);
}