/* =============================================================================
   MARITSA - ACCESSIBILITY FIXES, PART TWO
   12 August 2026. Audit items 4, 5, 8, 9 and 11.

   Part one is appended at the foot of site.css (items 1, 2, 6, 7) and covers
   the trade form privacy notice, the form labels and placeholders, and the
   underlining of the legal links.

   This file is loaded after site.css on index.html only. It is kept separate
   so the whole accessibility pass can be reviewed, or reverted, in one place.
   Ratios below are measured before -> after, against WCAG 2.2 AA.
   ========================================================================== */


/* ---- Item 4. Input font size on mobile -------------------------------------
   iOS Safari zooms the viewport whenever a focused input is under 16px. The
   page jumps about 1.2x and reflows mid-tap, which is what makes labels look
   as though they have burst out of their fields. 16px stops it dead.        */

@media (max-width: 780px) {
    .ff input,
    .ff select,
    .ff textarea,
    .ec-form input { font-size: 16px; }
}


/* ---- Item 8. Footer contrast -----------------------------------------------
   Everything in the footer sat between 1.77 and 4.35 against the ink panel.
   The sales email address and the phone number were both in the 3.21 group,
   which are conversion elements, not decoration.

   column links   3.21 -> 5.70      headings      4.35 -> 5.98
   bio            2.92 -> 5.33      bottom bar    1.77 -> 4.63
   bottom links   2.32 -> 5.70      bottom copy   3.99 -> 5.33               */

.footer-bio            { color: rgba(242, 236, 216, .55); }
.footer-col h5         { color: #A89272; }
.footer-col ul li a    { color: rgba(242, 236, 216, .58); }
.footer-bottom         { color: rgba(242, 236, 216, .50); }
.footer-bottom a       { color: rgba(242, 236, 216, .58); }
.footer-bottom p       { color: rgba(242, 236, 216, .55); }


/* ---- Item 5. The Oil section at 320px --------------------------------------
   .oil-claim-grid already collapses to one column at 780px, so the columns
   were never the problem. The two-up stats block has a min-content width of
   258px (two 128px cells plus the gap), and grid items default to
   min-width:auto, so that 258px forced the track wider than its own column
   and pushed the acidity figure 8px off the right of a 320px screen, clipped
   rather than scrollable.                                                   */

@media (max-width: 460px) {
    .oil-claim-grid > * { min-width: 0; }
    .oil-stats          { grid-template-columns: 1fr; }
    .oil-stat-cell      { padding-left: 1.1rem; padding-right: 1.1rem; }
}


/* ---- Item 9. Tap targets ---------------------------------------------------
   The mobile menu button was 30x23. It is the only way to navigate on a
   phone. The sign-up popup close was 35x35 and sits in the top right corner
   where thumb accuracy is worst. 44px is the WCAG 2.2 AA target size.
   The close control was also at 50% opacity, which fails the 3:1 minimum for
   non-text contrast.                                                        */

.nav-toggle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.mn-x {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
}


/* ---- Item 11. Focus styles -------------------------------------------------
   Seven focus rules existed across the whole site and six of them belonged to
   the consent banner, which was built properly. Everything else fell back to
   the browser default, which is close to invisible on the dark green panels.
   Keyboard users could not see where they were.                             */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--harvest);
    outline-offset: 3px;
}