/*
 * Copyright © 2023–2026 HoopFrog Inc. All rights reserved. DateSteady is a brand of HoopFrog Inc.
 *
 * touch-targets.css: one touch-target policy for every public DateSteady page (UX refresh
 * 2026-10-16, DS-P1-02: the older-adult interaction standard). 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.
 *
 * Section 9 (2026-10-18) rides on the same one-place load: the public type policy (Inter for
 * text and headings, the heading scale). It lives here because this is the only stylesheet every
 * public page loads, including the SEO city/province pages and the homepage.
 */
/*
 * DateSteady (50+): primary form and navigation actions are 48px (--tt-primary), body text is
 * at least 16px, and focus rings are Bronze #5E340F on light (10.6:1 on white) and Gold
 * #D9A94F on dark (8.6:1 on Deep Brown #17120D), both well above the 3:1 non-text minimum.
 */
:root { --tt-min: 44px; --tt-primary: 48px; --tt-ring: #5E340F; }
html.dark-mode { --tt-ring: #D9A94F; }

/* ---------- 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: 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;
}

/* ---------- 8. DateSteady: body text at least 16px ---------- */
html body :is(main td, main th, main .byline, main .post-excerpt, main .page-meta, main .meta, main p.meta,
              .signup-card label, .signup-card__subtitle, .dob-note, .field-hint, .privacy-notice-line,
              #lc-shared-footer p, #lc-shared-footer .lc-ft-tagline, #lc-shared-footer .lc-ft-copy, #lc-shared-footer li,
              #lc-footer nav p, .faq-item p, .facts-note, .city-card p, body > .container > p, .date-field label,
              .hub-city-links, .post-card p, .no-comments, .page-meta,
              :is(.content-box, .content, article) :is(p, li, td, dd):not([class])) {
    font-size: max(1rem, 16px) !important;
}
/* the focus ring gets a white halo on light and a Deep Brown halo on dark, so it reads on any fill */
html body :is(a, button, summary, input, select, textarea, [role=button]):focus-visible { box-shadow: 0 0 0 5px #FFFFFF; }
html.dark-mode body :is(a, button, summary, input, select, textarea, [role=button]):focus-visible { box-shadow: 0 0 0 5px #17120D; }

/* 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; }

/* ---------- 9. Type: Inter on every public page (owner 2026-10-18) ---------- */
/* "Inter everywhere, both brands": the signed-in dashboard already uses Inter (css/lc-type-b.css);
   public pages used Outfit, mostly from page-local inline <style> blocks (font-family: 'Outfit', ...),
   so the family is set here once, with !important, instead of in ~45 files. Brand wordmarks (.logo),
   SVG and code keep their own treatment. The dashboard (body.dashboard-page) does not load this file;
   the :not() is a guard in case it ever does.
   Headings: one scale in the dashboard family, no 46-53px display headlines. */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-4.1-var-latin-57871c21.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* DateSteady profile: the dashboard's larger DS scale (lc-type-b.css 7.2); the 17px root stays in tokens.css */
:root {
    --pub-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pub-h1: 36px; --pub-h1-lh: 1.18; --pub-h1-ls: -0.01em;
    --pub-h2: 29px; --pub-h2-lh: 1.22;
}
@media (max-width: 768px) { :root { --pub-h1: 32px; --pub-h1-lh: 1.2; --pub-h2: 26px; } }
html body:not(.dashboard-page),
html body:not(.dashboard-page) :where(*:not(svg):not(svg *):not(.logo):not(.logo *):not(code):not(pre):not(kbd):not(samp)) {
    font-family: var(--pub-font) !important;
}
html body:not(.dashboard-page) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html body:not(.dashboard-page) h1 {
    font-size: var(--pub-h1) !important;
    line-height: var(--pub-h1-lh) !important;
    letter-spacing: var(--pub-h1-ls) !important;
    font-weight: 700 !important;
}
/* the section titles that were bigger than the new h1 (homepage, SEO city/province closing call) */
html body:not(.dashboard-page) :is(.hf-sec-title, .bottom-cta h2) {
    font-size: var(--pub-h2) !important;
    line-height: var(--pub-h2-lh) !important;
    letter-spacing: -0.01em !important;
}