/* ══════════════════════════════════════════════════════════════════════════════════════
 HAYSVOTES OVERRIDES — loaded LAST, on purpose.

 Everything here modifies Design's lifted markup. It sits in its own file because it used to
 live inside the <style> blocks that a re-pull replaces wholesale, and it kept getting wiped:
 Gina's hook-1 bounds were lost twice that way. Re-lifting design/*.html can no longer reach
 this file.

 Rule when editing: the moment Design fixes one of these AT SOURCE, delete it here. An
 override that duplicates the source is how the two silently drift apart.
 ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── page background (Gina, Aug 17) ───────────────────────────────────────────────
   styles.css paints <body> with a gradient. Design's landing is a fixed 800px frame, so on
   a tall window the gradient shows below the footer as a stray blue band. Match the footer
   instead, so any leftover height reads as part of it. */
html, body { background: #0d1f39; }

/* The off-screen print sheet is position:absolute and ~1850px tall, so it extended the
   document and put a scrollbar on a page that otherwise fits. Fixed positioning keeps it
   renderable for html2canvas without contributing to scroll height. */
#ballot-print-sheet { position: fixed !important; }

/* Page shell (Design's shape, Aug 17). The hero is a fixed 800px block, so on a tall window
   everything under it was body background -- roughly a screen of dead navy. Pin the shell to
   the viewport and let the HERO absorb the slack; the footer then sits on the bottom edge.
   100dvh not 100vh so mobile browser chrome is accounted for, and no hardcoded footer height
   -- an earlier version subtracted 51px, which would break the moment the footer wrapped. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > footer { flex: 0 0 auto; }
@media (min-width: 900px){ body > #hero-desktop { flex: 1 1 auto; } }
@media (max-width: 899px){ body > #hero-mobile  { flex: 1 1 auto; } }

@media (min-width: 900px){
  #hero-desktop { display:flex; align-items:center; }
  /* Design fixed the scaling at source in zip 13 -- #d-scene is flex:0 1 805px with a
     max-width, and the message column is flex:1 1 460px -- so the pin-and-flex override that
     lived here is gone. Only the full-width frame remains, which is a page decision. */
  #hero-desktop > div, #hero-desktop > div > div { width:100% !important; margin:0 !important; }
}

/* ── the only ballot override left (Gina, Aug 17) ─────────────────────────────────
   Everything else that lived here -- identity column width, hook padding, party palette,
   clickable header bar, Hide chip semantics -- Design fixed at source in zip 13. This one
   is hers: pull the Hide chip in off the right edge on desktop. Design's bar pads 14px. */
@media (min-width:900px){ #ballot-desktop [data-hide][role="button"] { margin-right:7px; } }  /* right edge flush with the MORE pill (Gina, Aug 18) */

/* Hook 1 bounds: Design fixed at source (ballot-screen.html, last zip) and it is lifted into
   index.html. The unconditional .hv-opp override that lived here is GONE -- loading last with
   no width scope, it beat Design's narrow-width container query and squeezed the phone's
   opponent cards into desktop columns (Gina, Aug 18: "mobile is way broken"). */





/* ── mobile card: let auto-fit do the scaling (Gina, Aug 18) ─────────────────────────────
   Design ships two nested scale layers on mobile:
     1. --cardk (pre-scale, authored 0.58) shrinks the card wrapper up front
     2. #m-face auto-fit (JS in design/landing-hero.html) measures the natural height and
        scales just enough to fit the band between the subline and the CTA
   Stacked, the two shrink the card to ~5.8px text.

   With #m-face now emitted from app.js's heroSheetHtml, the auto-fit works. Setting cardk
   to 1 skips the pre-scale entirely; the card starts at authored size and only shrinks if
   it doesn't fit, and only as much as needed. This also normalises the margin-left formula
   `calc(--sw * --cardk / -2)` back to `-sw/2`, which centres the card in the viewport.

   The block of #m-sheet font-size overrides that lived here was a band-aid for the missing
   auto-fit and is gone — the authored sizes are correct once auto-fit is doing its job. */
@media (max-width: 899px){
  /* Sized to Gina's reference (Aug 18), measured as ratios of screen width:
       card   78%  -> --sw
       pocket 83%  -> --pw, a hair wider than the card, as in the reference
     --cardk 1: no pre-shrink. The card renders at authored size and only #m-face's
     auto-fit may trim it, floored at 0.9 in index.html. */
  #hero-mobile { --cardk: 1; --sw: min(300px, 78vw); --pw: min(320px, 83vw); }
}

/* Mobile header, a notch tighter (Gina, Aug 18: "we can decrease the font a little on
   Get ready to vote"). On a real iPhone -- ~660px after Safari's toolbars -- the header at
   Design's sizes pushed the polling rows behind the pocket lip. This buys ~40px:
   headline 47 -> 40, lockup 37 -> 33, subline 16 -> 15, and the gaps between them a
   little smaller. Nothing else in the hero moves. */
@media (max-width: 899px){
  #m-head { padding-top: 14px !important; }
  #m-head [style*="font-size:47px"] { font-size: 37px !important; }   /* 'GET YOUR DEMOCRATIC' must fit a 375 phone */
  #m-head [style*="font-size:37px"] { font-size: 27px !important; }   /* lockup wordmark, smaller (Gina, Aug 18) */
  #m-head [style*="font-size:16px"] { font-size: 15px !important; }   /* subline */
  #m-head [style*="letter-spacing:5px"] { font-size: 13px !important; } /* .ORG under the wordmark */
  #m-head img[alt="Hays County"] { width: 32px !important; height: 35px !important; }
  #m-head [style*="margin-top:12px"] { margin-top: 8px !important; }
  #m-head [data-mhead] { margin-top: 8px !important; }
}

/* Pocket is a tap/click target on both breakpoints -- say so with the cursor (Gina, Aug 18). */
#hero-mobile a[aria-label="Build my Pocket Poll"],
#hero-desktop a[aria-label="Build my Pocket Poll"] { cursor: pointer; }

/* County mark: Design's navy filter stays everywhere (Gina, Aug 18 -- "we need to be
   consistent"; the ballot header is navy-on-gold, so the landing lockup is too). The blue
   override that lived here is gone. */

/* ── mobile in-page PDF viewer (Gina, Aug 18) ────────────────────────────────────────────
   Phones tap Print/Save and get this instead of a new tab: both pages stacked, pinch-zoom,
   the phone's own Share sheet, and a Back that returns to the ballot untouched. */
#hv-pdfview { position: fixed; inset: 0; z-index: 9999; background: #0d1f39; display: flex; flex-direction: column; font-family: Archivo, sans-serif; }
#hv-pdfview [data-hv="pdfview-bar"] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); background: #122a4c; border-bottom: 3px solid #f5c145; }
#hv-pdfview [data-hv="pdfview-title"] { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
#hv-pdfview [data-hv="pdfview-close"] { background: none; border: none; color: #c9d5e6; font-size: 15px; font-weight: 700; padding: 8px 6px; cursor: pointer; }
#hv-pdfview [data-hv="pdfview-share"] { background: #f5c145; color: #122a4c; border: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; }
#hv-pdfview [data-hv="pdfview-pages"] { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px max(24px, env(safe-area-inset-bottom)); }

/* ── desktop opponent row: room for the longer hooks (Aug 19, overnight; Gina flagged the
   hook-1 column as too narrow). Design's 96 / 231 / 0.85fr / 1.15fr split was tuned for
   one-sentence hooks; the rewritten hooks run 2–3 sentences and hook-1 was wrapping to 6–8
   lines in 13 races at 1366 wide. Identity column 231 -> 205 (it had dead space), hooks split
   evenly, hook-1 type 19 -> 17.5. Mobile untouched (its own container query). REVIEW. */
@media (min-width:900px){
  #ballot-desktop .hv-opp{grid-template-columns:96px 205px minmax(0,1fr) minmax(0,1fr);}
  #ballot-desktop .hv-opp > :nth-child(3) > div{font-size:17.5px !important;line-height:1.25 !important;max-width:none !important;}
  #ballot-desktop .hv-opp > :nth-child(4) > div{max-width:none !important;}
}

/* ── short desktop windows (Aug 19, overnight): fit the 800px scene above the footer.
   index.html sets --dk (scale) and --dkw (compensating width) on #hero-desktop. At 1366x768
   the scene lands at ~0.9 and nothing hides below the fold. On tall windows --dk is 1. */
@media (min-width:900px){
  /* align-items:flex-start, not center: the frame's layout box is still 800px before the
     transform, so centering it in the shorter hero shifted it UP by (800-h)/2 and clipped the
     card header (iPad landscape 1024x768, Gina, Aug 19). */
  #hero-desktop { overflow: hidden; height: calc(800px * var(--dk, 1)); flex: 0 0 auto; align-items: flex-start; }
  #hero-desktop > div { transform: scale(var(--dk, 1)); transform-origin: top left; width: var(--dkw, 100%) !important; flex: 0 0 auto !important; max-width: none !important; }
}

/* ── wide desktop (Gina's 16" MacBook Pro, 1728 wide, Aug 19): the message column grows to
   ~920px and its text hugs the far left while the 805px scene sits at the right -- 500px of
   nothing between "GET YOUR DEMOCRATIC POCKET POLL" and the card. Push the text block toward
   the card: keep the rightmost ~600px of the column for content. Guarded at 1400 so 1280/1366
   are untouched (there the calc is below 42 and max() keeps Design's 42). */
@media (min-width:1400px){
  /* Centre the whole frame instead of stretching it: doorway column 825 + scene 580 = 1405 (Sep 24),
     equal bands either side. The band colour is the gradient's start so the left edge is
     seamless; on the right it sits against the denim's edge. (Gina: "doesn't look centred.") */
  #hero-desktop { background:#0b1c33; }
  #hero-desktop > div { max-width:1405px !important; margin:0 auto !important; }
}

/* ── ballot screen, same wide-desktop fix as the hero above (Sep 7): #ballot-desktop is a
   fixed 1280px frame with no centering rule of its own, so on anything wider than 1280 it sat
   flush left against the stretched #ballot-screen with a bare navy gap on the right -- and
   because the hero WAS centered here (>=1400) while the ballot wasn't, switching from landing
   to ballot on a wide screen visibly jumped. Same margin:0 auto trick, no !important needed
   since #ballot-desktop's 1280px width is a plain inline style, not something else overriding it. */
@media (min-width:1400px){
  #ballot-desktop { margin: 0 auto; }
}

/* Mobile ballot fills the phone (Gina, Aug 19, live on her iPhone): Design authored it at a
   fixed 390px, which left a navy strip down the right on wider phones (430). */
@media (max-width:899px){
  #ballot-mobile { width:100% !important; max-width:100vw; }
}

#hv-pdfview [data-hv="pdfview-strip"] { flex: 0 0 auto; padding: 8px 14px; background: #0e2340; color: #c9d5e6; font-size: 13.5px; font-weight: 600; text-align: center; border-bottom: 1px solid rgba(245,193,69,.3); }
#hv-pdfview [data-hv="pdfview-strip"] button { background: none; border: none; padding: 0; color: #f5c145; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Empty-Find prompt (desktop hero): asks for an address or offers the test address */
.hv-askaddr{position:fixed;inset:0;z-index:1000;background:rgba(6,15,30,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.hv-askaddr-card{background:#122a4c;color:#fff;border-top:5px solid #f5c145;border-radius:8px;max-width:460px;width:100%;padding:26px 26px 22px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.hv-askaddr-card h2{margin:0 0 8px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:32px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.hv-askaddr-card p{margin:0 0 10px;font-size:18px;line-height:1.45;color:#dbe4f0}
.hv-askaddr-card .hv-askaddr-addr{font-weight:700;color:#fff;background:rgba(255,255,255,.08);border-radius:8px;padding:10px 12px}
.hv-askaddr-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hv-askaddr-test{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:#122a4c;background:#f5c145;border:0;border-radius:8px;padding:12px 20px;cursor:pointer}
.hv-askaddr-own{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:#f5c145;background:transparent;border:2px solid rgba(245,193,69,.6);border-radius:8px;padding:10px 18px;cursor:pointer}
.hv-askaddr-test:focus-visible,.hv-askaddr-own:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Search with an address already in hand: keep the step (desktop panel, mobile sheet and its
   blurred backdrop) invisible while it runs -- app.js quietStep() lifts this on an error. */
html.hv-quietstep #d-step, html.hv-quietstep #m-step, html.hv-quietstep #m-sheetstep{visibility:hidden !important}

/* print sheet: county races that spill from page 1 continue at the top of page 2 */
.pp-section-cont{margin-top:14px}
.pp-cont{font-weight:600;letter-spacing:.06em;text-transform:none;opacity:.75}
/* a county with a long local ballot (Travis: 25 races) prints four across so page 1 fits */
.pp-section-dense .pp-grid{grid-template-columns:repeat(4,1fr);gap:4px 10px}
.pp-section-dense .pp-cell{margin-bottom:5px}
.pp-section-dense .pp-office{font-size:8.5px}
/* a hair tighter between races so a long ballot fits both printed pages */
.pp-cell{margin-bottom:5px}
.pp-grid{row-gap:4px}

/* outside-county popup: VoteTexasValues logo on top, centered */
.hv-outside{text-align:center}
.hv-outside-logo{background:#fff;border-radius:8px;padding:14px 18px;margin:0 0 16px}
.hv-outside-logo img{display:block;width:100%;max-width:280px;height:auto;margin:0 auto}
.hv-outside .hv-askaddr-btns{justify-content:center}
a.hv-askaddr-test{text-decoration:none;display:inline-block}
