/* ==========================================================================
   EkoBuild - ease-of-use layer
   Added 2026-09-07. Brief: "make it simple as possible, some of the clients
   are old and need ease of use."

   Every rule here answers a MEASURED failure from
   /root/clients/ekobuild/ui-audit/raw-375.json, taken in a real browser at
   375px. Nothing here is a guess.

   This file is loaded last so it wins. It is additive and fully reversible:
   delete the <link> and the site returns to exactly how it was.

   The brand green #7AB82E is NOT changed. Where white sat on it (2.41:1) the
   TEXT is darkened instead, which gives 7.23:1 and keeps the brand intact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FORM FIELDS
   Every field on the site measured 14.7px. Anything under 16px makes iOS
   zoom in when it is tapped, which throws older users out of the form.
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  font-size: 16px !important;
  min-height: 48px !important;
}

textarea { min-height: 96px !important; }

/* Labels were 13.1px */
label { font-size: 16px !important; }

/* --------------------------------------------------------------------------
   2. TEXT SIZE FLOOR
   Measured body text was 13.8px, with spec keys at 11.8px and trust badges
   at 10.6px. 16px is the floor for anything a customer has to read.
   -------------------------------------------------------------------------- */
body { font-size: 16px; }

p, li, td, th, dd, dt,
.faq-a-content,
.comp-feat-name,
.proof-item,
.trust-badge-title,
.trust-badge-sub,
.obs-item,
.obs-size-hint,
.eko-testimonial-location,
.k, .v,
.meta,
.prt {
  font-size: 16px !important;
}

/* h4 measured 14.1px - smaller than body text, which reads as an error */
h4 { font-size: 18px !important; }

/* Footer links measured 13.8px (.86rem) */
.eko-footer-col a { font-size: 16px !important; }

/* Social links measured 12.5px (.78rem) */
.eko-social-link { font-size: 15px !important; }

/* --------------------------------------------------------------------------
   3. TAP TARGETS
   44x44 CSS px is the WCAG 2.5.5 / Apple HIG minimum. Measured failures
   below, with the size they came in at.
   -------------------------------------------------------------------------- */

/* Footer link columns - measured 61x18, the single biggest cluster (39 of them) */
.eko-footer-col a {
  display: inline-block;
  padding: 10px 0 !important;
  line-height: 1.5 !important;
  min-height: 44px;
  box-sizing: border-box;
}

/* Social links - measured 71x34 */
.eko-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  padding: 10px 16px !important;
}

/* Cookie banner buttons - measured 86x30 and 75x30.
   NOTE: this makes the banner taller. The cart sits at z-index 6999/7000
   above the banner's 5000 since the 6 Sept fix, so it cannot re-block
   checkout, but re-verify the mobile cart after changing anything here. */
.eko-cookie-btn {
  min-height: 44px !important;
  font-size: 15px !important;
  padding: 10px 18px !important;
}

/* Cart controls - cart-x measured 35x35, cart-btn 67x40.5 */
.cart-x,
.rd-nav-cart,
.cart-btn {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Sticky CTA bar - phone 87x43.5, orange button 111x37 */
.scta-btn { min-height: 44px !important; }

/* Quick-shop buttons - measured 142x40.5 */
.qshop-btn { min-height: 44px !important; }

/* Guided tour controls - banner CTA 125x26, skip 79x25, close 24.9x22,
   tour buttons 73x36 and 57x36, tour-skip 29x30 */
.tour-banner-cta,
.tour-banner-skip,
.tour-banner-close,
.tour-btn,
.tour-skip {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Contact + CTA links - phone/email 39.8px tall, a.big 34.5, where-cta 43.5 */
.eko-phone-link,
.eko-email-link,
.where-cta,
a.big {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
}

/* --------------------------------------------------------------------------
   4. CONTRAST
   Measured ratios are in the comments. AA needs 4.5:1 for normal text.
   -------------------------------------------------------------------------- */

/* Greys: #999 was 2.85:1, #888 was 3.54:1. #666 is 5.74:1 */
.k,
.eko-testimonial-location,
.muted,
.sub,
.note {
  color: #666666 !important;
}

/* Brand green as TEXT on white was 2.41:1. #578321 is 4.51:1 and is the
   same hue, only darker. The brand green itself is untouched. */
.price,
.price-now,
#p05, #p1, #p15, #p2, #p25, #p3,
.meta,
.eko-green-text {
  color: #578321 !important;
}

/* Orange text on white was 1.97:1 - the worst on the site. #A46A00 is 4.51:1 */
.prt { color: #A46A00 !important; }

/* Footer small print was white at 40% opacity on near-black = 3.77:1.
   75% gives 11.1:1 and is still visibly secondary. */
.eko-footer-bottom,
.eko-footer-bottom p,
.eko-footer-legal,
.eko-footer-legal p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* White text sitting on the brand green or the orange was 2.41:1 / 2.84:1.
   Darkening the TEXT keeps the brand colour and gives 7.23:1 / 6.14:1. */
.btn-primary,
.checkout-btn,
.dos-donts-download,
.scta-btn-orange,
.scta-btn-phone,
.tour-banner-cta,
.add-to-cart,
.buy-btn {
  color: #1A1A1A !important;
}

/* --------------------------------------------------------------------------
   5. GENERAL LEGIBILITY
   -------------------------------------------------------------------------- */
p, li { line-height: 1.65 !important; }

/* A visible focus ring matters for anyone using a keyboard or a magnifier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1A1A1A !important;
  outline-offset: 2px !important;
}