/* The website pages (hunting, fishing, privacy, money, 404): what they need beyond styles.css.
   Loaded after styles.css. The colour tokens, the fonts and the charcoal header come from
   styles.css, so light and dark follow the phone the same way the app does. Not loaded by the app. */

/* styles.css is written for an app that fills the screen: a full-height body, a short-page
   fix for iOS and a header that sticks. A plain page needs none of that. */
html{min-height:0}
html,body{height:auto}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
header.bar{position:static;height:auto}
/* the wordmark lines up with the reading column instead of the window edge */
.bar .bar-in{max-width:760px;margin:0 auto}
.bar .brand{display:block;line-height:0;border-radius:2px}
.bar .brand img{height:24px;width:auto;display:block}
.bar .brand:focus-visible{outline:2px solid #fff;outline-offset:6px}
main{flex:1;padding:6px 0 40px}

/* reading column: .wrap already gives max-width 760 and 16px gutters */
.page{overflow-wrap:break-word}
.page>h1{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.01em;margin:28px 0 14px}
.page .lead{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 6px}
.page section h2{font-size:22px;line-height:1.2;font-weight:700;margin:34px 0 8px}
.page section h3{font-size:17px;line-height:1.3;font-weight:700;margin:22px 0 4px}
.page section p{font-size:16px;line-height:1.6;color:var(--body);margin:0 0 12px}
.page section p:last-child{margin-bottom:0}
.page .faq h3+p{margin-top:0}
.page ul.sources,.page ul.links{margin:4px 0 0;padding-left:20px;font-size:16px;line-height:1.5}
.page ul.sources li,.page ul.links li{margin:0 0 8px}
.page a{text-underline-offset:2px}

/* the screens from site.js: draw them as the app does, under the h1 */
.page.embed>h1{margin-bottom:6px}
.page.embed .sec-title{margin-top:26px}
.page.embed .card-b p.note:first-child{margin-top:0}

/* the button to the app. Light: white on #15709A (5.5:1). Dark: --accent is #4DB3E0, which white
   text fails on (2.4:1), so the text is the dark ground colour on it (7.9:1). */
.page{--btn-bg:var(--accent);--btn-ink:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page{--btn-bg:var(--accent);--btn-ink:#10130F}}
:root[data-theme="dark"] .page{--btn-bg:var(--accent);--btn-ink:#10130F}
.cta{margin:34px 0 0}
.btn{display:inline-block;min-height:44px;padding:12px 22px;border-radius:4px;background:var(--btn-bg);color:var(--btn-ink);
  font-weight:700;font-size:16px;line-height:1.3;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* footer: muted and small, on the surface colour (muted on surface is 4.9:1 light, 5.6:1 dark) */
footer{background:var(--surface);border-top:1px solid var(--line);padding:20px 0 30px;color:var(--muted);font-size:12.5px;line-height:1.55}
footer p{margin:0 0 12px}
footer p:last-child{margin-bottom:0}
footer ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{color:var(--accent);display:inline-block;padding:4px 0}
footer a[aria-current="page"]{font-weight:700}

@media (min-width:720px){
  .page>h1{font-size:38px;margin-top:44px}
  .page .lead{font-size:19px}
  .page section h2{font-size:25px}
}