/* huntervsaddiction.com: shared styles for the Privacy Policy (/privacy) and Terms of Use (/terms).
   Palette and type follow the home page design. Fonts are self hosted in /fonts, so these pages
   make no third party requests and load no scripts. Contrast ratios below are WCAG 2.1 AA checks. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/fraunces-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --black: #0b0b0c;     /* header and footer background */
  --ink: #151517;       /* text on paper (16.3:1) and on white */
  --paper: #f4f2ee;     /* page body background */
  --white: #ffffff;     /* cards on paper */
  --hot: #ff5a36;       /* brand orange: only on black, or as the crisis box fill (black text 6.3:1) */
  --hot-ink: #b8360f;   /* orange for small text on paper (5.26:1) and on white (5.88:1) */
  --muted: #8d8d93;     /* footer text on black (6.0:1) */
  --soft: #c8c8cd;      /* footer links on black (11.8:1) */
  --line: #26262a;      /* dividers on black */
  --card-line: #e2ded6; /* card borders and dividers on paper */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--black); /* dark overscroll above the header and below the footer */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }
main:focus { outline: none; } /* focus target of the skip link only */
b, strong { font-weight: 600; } /* only 400 and 600 are loaded, so never ask for a synthetic 700 */

.wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
.narrow { width: min(760px, 100% - 40px); margin: 0 auto; }

/* Visible keyboard focus everywhere. Orange ink on paper (5.26:1), bright orange on black. */
:focus-visible { outline: 3px solid var(--hot-ink); outline-offset: 3px; }
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--hot); }

/* Skip link: hidden above the page until it receives keyboard focus. */
.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--hot);
  color: var(--black);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.skip:focus { top: 14px; }
.skip:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* Header bar with the wordmark */
.site-header {
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 12px 0;
}
.brand {
  font: 600 15px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.brand span { color: var(--hot); }
.brand:hover {
  text-decoration: underline;
  text-decoration-color: var(--hot);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Page body */
.legal { padding: 56px 0 96px; }
.updated {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--hot-ink);
}
.legal h1,
.legal h2,
.legal h3 { color: var(--ink); overflow-wrap: break-word; }
.legal h1 {
  margin: 0 0 16px;
  font: 600 clamp(38px, 6.4vw, 58px)/1.05 var(--serif);
  letter-spacing: -.02em;
}
.lead { margin: 0; font-size: 19px; line-height: 1.6; }
.legal h2 {
  margin: 52px 0 14px;
  padding-top: 36px;
  border-top: 1px solid var(--card-line);
  font: 600 clamp(25px, 3.2vw, 31px)/1.2 var(--serif);
  letter-spacing: -.01em;
}
.legal h3 { margin: 28px 0 8px; font: 600 18px/1.4 var(--sans); }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-left: 24px; }
.legal li { margin: 0 0 8px; padding-left: 4px; }
.legal li::marker { color: var(--hot-ink); }
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hot-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  word-break: break-word;   /* older Safari fallback for the line below */
  overflow-wrap: anywhere;  /* long email addresses wrap at 320px instead of scrolling sideways */
}
.legal a:hover { color: var(--hot-ink); }

/* Crisis box, same treatment as the home page: black text on brand orange (6.3:1). */
.crisis {
  margin: 28px 0 0;
  padding: 16px 20px;
  border: 2px solid transparent; /* shows as a real border in Windows high contrast mode */
  border-radius: 16px;
  background: var(--hot);
  color: var(--black);
}
.crisis p { margin: 0; font-weight: 600; line-height: 1.9; }
.crisis a {
  display: inline-block;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--black);
  color: var(--hot);
  line-height: 1.75;
  text-decoration: none;
  white-space: nowrap;
}
.crisis a:hover { color: var(--white); }
.crisis a:focus-visible { outline-color: var(--black); }

/* The carrier required text message wording, set apart so it is easy to find. */
.promise {
  margin: 20px 0;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-left: 4px solid var(--hot-ink);
  border-radius: 12px;
}
.promise .label {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hot-ink);
}
.promise p:last-child { margin-bottom: 0; }

/* Text message terms on /terms: label and answer side by side, stacked on phones. */
.sms {
  display: grid;
  grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr);
  gap: 12px 24px;
  margin: 20px 0;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 14px;
}
.sms dt { font-weight: 600; }
.sms dd { margin: 0; }
.sms dd p { margin: 0 0 10px; }
.sms dd p:last-child { margin-bottom: 0; }

/* Contact card at the end of both pages */
.contact {
  margin-top: 52px;
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 16px;
}
.legal .contact h2 { margin: 0 0 10px; padding: 0; border: 0; }
.contact p:last-child { margin-bottom: 0; }

/* Footer */
.site-footer {
  padding: 40px 0 48px;
  background: var(--black);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.site-footer .wrap { display: grid; gap: 12px; }
.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  display: inline-block;
  padding: 4px 0; /* keeps each link at least 24px tall */
  color: var(--soft);
  text-underline-offset: 3px;
}
.site-footer a:hover { color: var(--white); }
.site-footer a[aria-current="page"] { color: var(--white); text-decoration-color: var(--hot); }
.site-footer p { margin: 0; max-width: 680px; }

/* Phones */
@media (max-width: 620px) {
  .legal { padding: 40px 0 72px; }
  .lead { font-size: 18px; }
  .legal h2 { margin-top: 40px; padding-top: 28px; }
  .crisis { padding: 14px 16px; }
  .promise { padding: 16px 18px; }
  .sms { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 18px 16px; }
  .sms dd { margin-bottom: 14px; }
  .sms dd:last-of-type { margin-bottom: 0; }
  .contact { margin-top: 44px; padding: 22px 16px; }
}
/* Small phones: 16px side gutters, so the email address (about 245px in Inter) fits a card line
   whole at 320px. If it ever cannot fit (big zoom), overflow-wrap on links breaks it instead of
   scrolling sideways. */
@media (max-width: 360px) {
  .wrap, .narrow { width: calc(100% - 32px); }
}

/* Print: plain black on white, since browsers drop background colors by default. */
@media print {
  html, body { background: #fff; color: #000; }
  .skip { display: none; }
  .site-header, .site-footer { background: #fff; color: #000; border-color: #999; }
  .brand, .brand span, .site-footer a { color: #000; }
  .legal { padding: 24px 0; }
  .crisis { background: #fff; border-color: #000; }
  .crisis a { padding: 0; background: none; color: #000; }
  .legal a { color: #000; }
  .promise, .sms, .contact { break-inside: avoid; }
}