/* ══════════════════════════════════════════════════════════════════════════════════════
 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; }
  /* Widen the message column so "Oct 19-30" stays on one line at narrow desktop widths.
     Design's 460 loses its share to the 805px scene at ~900-1100px windows and the 30px
     date wraps. 560 keeps a single line at those widths without visibly squeezing the
     card/pocket scene. */
  #hero-desktop [style*="flex:1 1 460px"] { flex-basis: 560px !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: message column 600 + scene 805 = 1405,
     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; }
  #hero-desktop [style*="flex:1 1 460px"]{ padding-left:42px !important; }
}

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