/**
 * Touch-target and minimum-text-size floor - traveltour-child/assets/css/epl-a11y.css
 *
 * Enqueued last on every front-end response (see inc/epl-assets.php).
 *
 * Scoped to <=1024px on purpose: these are corrections for finger input.
 * On a desktop pointer the tighter original sizing is the intended design
 * and nothing in this file applies.
 *
 * WHY !important, given this sheet already loads last:
 *   1. The template sheets namespace their rules (`.eph-home .eph-kicker`,
 *      `.ept-page .ept-main`), which outranks a single class selector here
 *      no matter what order the files load in.
 *   2. single-tour.php still carries its CSS in a <style> block in the BODY,
 *      which comes after this <link> in document order and would otherwise
 *      win every tie on the tour pages.
 * Matching those selector-for-selector would mean restating another sheet's
 * structure in this one and re-breaking it whenever that structure moves.
 * This file only ever raises a value to a documented minimum, so a blanket
 * !important is the contained option rather than the lazy one.
 *
 * Added 2026-08-27.
 */

@media (max-width:1024px){

/* ---- 1. touch targets - WCAG 2.5.5 asks for 44x44 CSS px ------------- */

/* Header. The 68px bar has 12px padding top and bottom, so 44 is exactly
   the room available; the glyph grows with the disc to keep its ratio. */
.ept-hdr-wa-ic{ width:44px !important; height:44px !important; }
.ept-hdr-wa-ic svg{ width:22px !important; height:22px !important; }
.ept-hdr-logo{ display:flex !important; align-items:center; min-height:44px !important; }
.ept-hdr-panel-close{ width:44px !important; height:44px !important; }

/* Footer: links sit on their own rows, so height is free to grow. */
.ept-ftr-more,
.ept-ftr-phone,
.ept-ftr-email{ display:inline-flex !important; align-items:center; min-height:44px !important; }
.ept-ftr-social a{ width:44px !important; height:44px !important; }

/* Standalone links and toggles that were 19-30px tall. */
.eh-more,
.epbl-intro-toggle,
.eps-cat,
.eph-playbook-sig-text a{ display:inline-flex !important; align-items:center; min-height:44px !important; }

/* Buttons, filter chips and card CTAs that were 25-43px tall. */
.eph-btn,
.ept-itin-toggle,
.ept-allphotos,
.ept-mbar .ept-btn,
.eplx-chip,
.epca-chip,
.epbl-topic,
.eplx-card-cta,
.epca-card-cta,
.eps-toc a,
.ftwp-icon-collapse{ min-height:44px !important; }
.ftwp-icon-collapse{ min-width:44px !important; }

/* Links sitting inline in a line of meta text or a breadcrumb trail: grow
   the hit area with padding and take it straight back with margin, so the
   surrounding row keeps its original rhythm instead of gaining 20px. */
.eps-byline,
.eps-author-name,
.eph-playbook-meta a,
.eplx-byline-name a,
.epca-byline-name a,
.ept-rate a,
.ept-crumb-yoast a,
.ept-ftr-bottom-links a,
.ept-ftr-credit a,
.ept-enq-consent span a{ display:inline-block !important; padding:12px 8px !important; margin:-12px -8px !important; }

/* The floating WhatsApp bubble is fixed at bottom-left (15px inset, 44px
   disc) and z-index 9999, so at the very bottom of the page it sits on
   top of the footer's legal row -- "Terms" was not clickable on a phone.
   Reserve the bubble's height plus its inset so the row clears it. */
.ept-ftr-bottom-in{ padding-bottom:calc(76px + env(safe-area-inset-bottom)) !important; }

/* A 13px checkbox is a hard target even with the label wrapping it. */
.ept-enq-consent{ min-height:44px !important; }
.ept-enq-consent input[type=checkbox]{ width:20px !important; height:20px !important; }

/* The minimum-text-size floor that used to live here was applied at source
   instead on 2026-08-27: 238 font-size declarations below 12px across 39
   template stylesheets were raised to 12px / 0.75rem. Fixing the values
   where they are authored avoids an !important war with the page-scoped
   rules, and applies on desktop too, where 10px was no more readable. */


/* ---- 3. the same controls across the per-page class prefixes ---------
   Every commercial template namespaces its own components (epk-, eth-,
   epcl-, epbg-, epct-, epnc-, etp-, epn-, epst-, w-, x-, f-, epit-,
   epni- ...) but builds the same handful of parts. Matching on the shared
   suffix covers all of them, including templates added later, and these
   declarations only ever raise a height. The three groups differ because
   the elements differ: forcing flex onto an inline-flex pill would stretch
   it to full width, and min-height does nothing at all to an inline link. */

/* Already flex or inline-flex: height alone is enough. */
button[class*="-chip"],
button[class*="-intro-toggle"],
button.close,
a[class*="-card-cta"],
a[class*="-tour-book"],
a[class*="-region-cta"],
a[class*="-tier-more"],
a[class*="-card-go"]{ min-height:44px !important; align-items:center; }
button.close{ width:44px !important; height:44px !important; min-width:44px !important; }

/* Block-level links and tabs: give them a centred box at 44px. */
button[class*="-tab"],
a.view-link,
a[class*="-step-l"],
[class*="-jump-scroll"] > a,
[class*="-card-links"] > a,
[class*="-q-links"] > a,
[class*="-sights"] > a{ display:flex !important; align-items:center; min-height:44px !important; }

/* Inline links: pad the hit area, take it back with margin. */
[class*="-card-title"] > a,
[class*="-card-name"] > a,
[class*="-card-b"] h3 > a,
[class*="-byline-name"] > a,
[class*="-founder-sig"] > a,
[class*="-intro-byline"] a,
[class*="-faq-answer"] > a,
a[class*="-land-link"],
div.meta > a{ display:inline-block !important; padding:13px 6px !important; margin:-13px -6px !important; }

}