/*
 * Copyright © 2023–2026 HoopFrog Inc. All rights reserved.
 *
 * touch-targets.css: one touch-target policy for every public HoopFrog page (UX refresh
 * 2026-10-16, HF-P1-02). Loaded from ONE place: the head block that
 * ~/ops-scripts/sync-site-header.py stamps on every listed page and that the SEO plugin
 * prints (partials/site-header-head*.html); the two pages the tool exempts (index.html,
 * signup.html) link it by hand at the end of their <head>.
 *
 * Rule: every control and every link that stands on its own (not inside a sentence) gets a
 * hit area of at least 44 x 44 CSS px, made with min-height / padding on the clickable element
 * itself (never a bigger glyph, never a pseudo-element). Links inside running text are exempt.
 * Checked by /tmp/targets26/target-test.js at 320 and 390 px over every sitemap URL.
 *
 * The page styles this file meets are duplicated per page (inline <style> after this file),
 * so selectors carry "html body" to outrank them; !important only where a page or footer.js
 * already uses it.
 */
:root { --tt-min: 44px; --tt-primary: 44px; --tt-ring: #047857; }
html.dark-mode { --tt-ring: #34D399; }

/* ---------- 1. Disclosure rows: the whole <summary> row is the target ---------- */
html body details > summary {
    min-height: var(--tt-min);
    box-sizing: border-box;
    align-content: center;          /* centres the text in a block/list-item row (no display change, the marker stays) */
    cursor: pointer;
}

/* ---------- 2. Header on the pages with their own (homepage) ---------- */
html body #navbar .navbar__brand { min-height: var(--tt-min); display: flex; align-items: center; }
html body #navbar .navbar__actions .btn--ghost,
html body #navbar .navbar__actions .btn--primary,
html body #navbar .navbar__actions .lang-toggle,
html body #navbar .navbar__actions .lang-toggle-nav { height: var(--tt-min) !important; min-width: var(--tt-min); }
html body #navbar .navbar__actions .theme-dd-trigger { width: var(--tt-min) !important; height: var(--tt-min) !important; min-width: var(--tt-min) !important; min-height: var(--tt-min) !important; }
/* phones: the homepage's own 420px rule wants a 6px gap, but its later 600px rule (8px) wins;
   6px keeps Log In, Get Started and Appearance on one row at 360px with the 44px controls */
@media (max-width: 420px) { html body #navbar .navbar__actions { gap: 6px; } }
html body #navbar .lang-option,
html body #navbar .theme-dd-item { min-height: var(--tt-min); box-sizing: border-box; }
/* signup's own header: the Log in link */
html body .signup-header__login a { display: inline-flex; align-items: center; min-height: var(--tt-min); }

/* ---------- 3. Standalone content links: padded inline-flex anchors ---------- */
html body :is(.other-cmp a, .related > a, .hf-callout-link, .hf-faq-more a, .back-btn, .back-link, .breadcrumb a,
              nav.toc a, .toc li > a, .nearby-cities a, .hub-city-links a, .post-card > a, th + td > a:only-child, .num > a, .official-store-link, .boilerplate a, .hp-links a,
              .hp-more a, .hf-proof > a) {
    display: inline-flex;
    align-items: center;
    min-height: var(--tt-min);
    box-sizing: border-box;
}
/* links with no class hook that stand on their own (marked by /js/touch-targets.js) */
html body a[data-lc-standalone] { display: inline-flex; align-items: center; min-height: var(--tt-min); min-width: var(--tt-min); box-sizing: border-box; }
html body .breadcrumb { line-height: 1.4; }
html body .hub-city-links a { min-width: var(--tt-min); justify-content: center; }
/* the official store badge link wraps an image: keep the badge, grow the box */
html body .official-store-link { justify-content: flex-start; }

/* ---------- 4. Buttons and form controls in content ---------- */
html body :is(.qx, .date-chip, button.filter-control, .geo-update-btn, .geo-map-btn, .search-bar button, #scam-quiz-cta button, .share-btn, main button.btn) {
    min-height: var(--tt-min);
    box-sizing: border-box;
}
/* primary actions: 44px here, 48px on DateSteady (--tt-primary) */
html body :is(.cta-box a.btn, .cta-box .btn, .callout .btn, a.btn-primary, .btn.btn-primary, .map-btn, .signup-btn,
              main .btn--primary, main .hf-btn-primary, main [class*="cta"] > a.btn) {
    min-height: var(--tt-primary);
    box-sizing: border-box;
}
html body :is(.cta-box a.btn, a.btn-primary, .map-btn, .geo-update-btn, .geo-map-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body .map-btn { padding-block: 0; }
html body :is(main, .page, .signup-card, .filters, .search-bar) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea) {
    min-height: var(--tt-min);
    box-sizing: border-box;
}
/* filter rows (events): on phones the page lets the controls shrink to share a row (min-width 0);
   a control never gets narrower than a readable 7.5rem, the row wraps instead */
html body .filter-row > :is(select, input).filter-control { min-width: 7.5rem; }
/* a switch or checkbox counts its whole label row */
html body :is(label.toggle-switch, .unit-switch-wrap label, label:has(> input[type=checkbox]), label:has(> input[type=radio])) {
    min-height: var(--tt-min);
    min-width: var(--tt-min);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}
/* range sliders: the track stays thin, the input box (the hit area) is 44px */
html body input[type=range] { min-height: var(--tt-min); }

/* ---------- 5. Footers ---------- */
/* shared footer (footer.js): its own rules use ids and !important */
html body #lc-shared-footer a.lc-ft-link,
html body #lc-shared-footer a.lc-ft-link:not(.lc-ft-help) {
    display: inline-flex !important;
    align-items: center;
    min-height: var(--tt-min);
    min-width: var(--tt-min);       /* short labels ("Blog") get the full width too */
    padding-block: 0 !important;
    box-sizing: border-box;
}
html body #lc-shared-footer a.lc-ft-help { min-height: var(--tt-primary); }
html body #lc-shared-footer :is(a.lc-ft-seal, a.lc-ft-chamber, .lc-ft-disclosure > a, a.lc-social-icon) {
    display: inline-flex !important;
    align-items: center;
    min-height: var(--tt-min);
    min-width: var(--tt-min);
    box-sizing: border-box;
}
html body #lc-shared-footer li { margin-block: 0 !important; }
/* static footer (signup, legal pages): its links carry inline styles without display */
html body #lc-footer nav > div > a,
html body #lc-footer > nav > a { display: inline-flex; align-items: center; min-height: var(--tt-min); min-width: var(--tt-min); }
html body #lc-footer > nav[style*="flex"] { row-gap: 0 !important; }
html body #lc-footer nav > div[style*="flex"] { row-gap: 0 !important; }

/* ---------- 6. Cookie strip / consent buttons ---------- */
html body :is(#lc-cookie-strip, .lc-consent) button { min-height: var(--tt-min); min-width: var(--tt-min); box-sizing: border-box; }

/* ---------- 7. Focus: a clear ring on every target ---------- */
html body :is(a, button, summary, input, select, textarea, [role=button]):focus-visible {
    outline: 3px solid var(--tt-ring);
    outline-offset: 2px;
}

/* 2026-10-16: a link that sits on its own directly inside <main> (e.g. Get Help "FAQ") is a standalone target: 44px both ways. */
main > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.gh-links a { min-width: 44px; justify-content: center; }