/* =============================================================================
   UnitedStates65.com — additions on top of the shared MSIS Inc. design system.
   assets/css/styles.css is copied from msis.us at build time (scripts/
   build-us65.py), so both sites share one set of colors, type and components;
   this file only adds what US65 needs of its own.
   ============================================================================= */

/* Preview builds only: a banner so nobody mistakes the preview for the live site */
.us65-preview { background: var(--amber); color: #2a1d00; font-weight: 700; text-align: center; padding: .55rem 1rem; font-size: .95rem; }

/* ---- Top bar: phone on the left; language + text size on the right -------- */
.topbar__right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar__lang { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .2rem; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---- Wordmark --------------------------------------------------------------- */
.us65-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; }
.us65-brand__badge {
  width: 48px; height: 48px; border-radius: 50%; background: var(--amber); color: #2a1d00;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  box-shadow: 0 0 0 4px var(--amber-wash), 0 0 0 5px rgba(217,144,0,.35); flex-shrink: 0;
}
.us65-brand__text { display: flex; flex-direction: column; line-height: 1; }
.us65-brand__word { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--blue-ink); letter-spacing: -.01em; }
.us65-brand__word em { font-style: normal; color: var(--blue); }
.us65-brand__by { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-top: .35rem; }

/* ---- Navigation: two links and the call-me button (no slide-out menu) ------- */
.us65-nav { display: flex; align-items: center; gap: .2rem; }
.us65-nav a:not(.btn) {
  font-weight: 600; color: var(--blue-ink); text-decoration: none; padding: .6rem .85rem;
  border-radius: 100px; font-size: 1.02rem; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.us65-nav a:not(.btn):hover { background: var(--paper-2); color: var(--blue-deep); }
.us65-nav a[aria-current="page"] { background: var(--amber-wash); box-shadow: inset 0 0 0 1.5px var(--amber); }
.us65-nav .nav__cta { margin: 0 0 0 .5rem; }   /* styles.css gives .nav__cta a top margin on tablets */
@media (max-width: 900px) { .us65-nav a:not(.btn) { display: none; } }
@media (max-width: 640px) {
  .masthead .container { min-height: 74px; gap: .8rem; }
  .us65-brand__by { display: none; }
  .us65-brand__word { font-size: 1.35rem; }
  .us65-brand__badge { width: 40px; height: 40px; font-size: 1.1rem; }
  .us65-nav .nav__cta { padding: .6rem .8rem; min-height: 48px; font-size: .95rem; margin: 0; }
}
.us65-nav .cta-short { display: none; }
@media (max-width: 640px) { .us65-nav .cta-long { display: none; } .us65-nav .cta-short { display: inline; } }
@media (max-width: 420px) {
  .us65-brand { gap: .55rem; }
  .us65-brand__word { font-size: 1.12rem; }
  .us65-brand__badge { width: 34px; height: 34px; font-size: .95rem; box-shadow: 0 0 0 3px var(--amber-wash); }
}
@media (max-width: 350px) { .us65-brand__text { display: none; } }   /* badge + button on the very smallest phones */

/* ---- Hero: words on the left, the form on the right ------------------------- */
.us65-hero .container { grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); align-items: start; }
.us65-hero h1 { font-size: var(--step-4); }
.us65-hero h1 em { white-space: normal; }       /* styles.css keeps it on one line; beside the form it must wrap */
@media (max-width: 1100px) and (min-width: 901px) { .us65-hero .container { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); } }
.us65-hero .hero__lede { max-width: 40ch; }
.us65-chips { list-style: none; padding: 0; margin-top: 1.2rem; }
.us65-chips li { margin: 0; }
.us65-hero__call { margin-top: 1.6rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .us65-hero .container { grid-template-columns: 1fr; }
  .us65-hero h1 { font-size: var(--step-3); }
}

/* ---- The lead form ------------------------------------------------------------ */
.us65-form-card__title { font-size: var(--step-2); }
.form-promise {
  display: flex; gap: .6rem; align-items: flex-start; margin: .9rem 0 1.2rem;
  background: var(--blue-mist); border: 1px solid #cfe0ea; border-radius: var(--radius);
  padding: .75rem 1rem; font-size: .98rem; color: var(--blue-ink); font-weight: 600;
}
.form-promise::before { content: "🔒"; content: "🔒" / ""; font-size: 1rem; line-height: 1.5; }   /* decorative: nothing spoken */
.us65-form .step { border: 0; padding: 0; margin: 0 0 .4rem; min-width: 0; }
.us65-form .step[hidden] { display: none; }
.us65-form .step legend { padding: 0; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.us65-form .step-count {
  align-self: flex-start; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #5c4100; background: var(--amber-wash); border: 1px solid var(--amber); padding: .2rem .7rem; border-radius: 100px;
}
.us65-form .step-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--blue-ink); line-height: 1.2; }
.us65-form.is-stepped [data-step="2"] { margin-top: 0; }
.us65-form:not(.is-stepped) [data-step="2"] { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.us65-form .step-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.us65-form .step-actions--back { justify-content: center; margin-top: .6rem; }
.btn-back {
  background: transparent; border: 0; color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 700; cursor: pointer; min-height: 48px; padding: .5rem .8rem; font-size: 1.02rem; font-family: var(--font-body);
}
.btn-back[hidden], .js-next[hidden] { display: none; }
.us65-form .consent label { font-size: .95rem; line-height: 1.5; }
.us65-form .consent { margin-top: .4rem; }
.zip-county { font-size: .95rem; color: var(--green); font-weight: 600; margin: .35rem 0 0; min-height: 1.45em; }
.zip-county.is-unknown { color: var(--ink-faint); font-weight: 400; }
.form-alert {
  background: var(--red-bg); border: 1px solid var(--red); color: var(--red); padding: .9rem 1.1rem;
  border-radius: var(--radius); font-weight: 600; margin-bottom: 1.1rem;
}
.form-alert:empty { display: none; }
.us65-form .form-note { margin-top: 1.1rem; line-height: 1.55; }
.us65-form .form-note a { color: var(--blue-deep); font-weight: 600; }
.us65-form .form-note strong { color: var(--blue-ink); }
.form-fallback { background: var(--white); border: 2px solid var(--amber); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.form-fallback .btn { margin: .4rem .5rem 0 0; }

/* ---- How it works ------------------------------------------------------------ */
.us65-steps { list-style: none; padding: 0; }
.us65-steps li { margin: 0; }
.us65-steps__num { display: block; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--blue); margin-bottom: .6rem; }

/* ---- Cards on the dark band ----------------------------------------------------- */
.us65-card-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); box-shadow: none; }
.us65-card-dark h3 { color: #fff; }
.us65-card-dark p { color: #ecdfc3; }

/* ---- Thank-you page ------------------------------------------------------------ */
.us65-thanks { text-align: left; border-top-color: var(--green); }
.us65-thanks__tick {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--green-bg); color: var(--green); font-size: 1.7rem; font-weight: 700; margin-bottom: 1rem;
}
.us65-thanks h1 { font-size: var(--step-3); }
.us65-thanks h2 { font-size: var(--step-1); }
.us65-next { padding-left: 1.2em; }
.us65-next li + li { margin-top: .7em; }

/* ---- Legal page --------------------------------------------------------------- */
.us65-legal h3 { margin-bottom: .35rem; }

/* ---- Keyboard users: whatever gets focus (or is jumped to) stays clear of the sticky header */
html { scroll-padding-top: 6.5rem; }
[id] { scroll-margin-top: 0; }          /* styles.css adds 110px per target; the padding above covers it */
.form-req { font-size: .95rem; color: var(--ink-soft); margin: -.4rem 0 1rem; }

/* ---- The "High contrast" button (top bar, beside text size) ---------------------------- */
.contrast-toggle {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .3rem .7rem;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
  font: 600 .92rem/1 var(--font-body); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.contrast-toggle svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.contrast-toggle:hover { border-color: #fff; }
.contrast-toggle[aria-pressed="true"] { background: var(--amber); color: #2a1d00; border-color: var(--amber); }

/* =============================================================================
   High contrast. Set on <html data-contrast="high"> by the button above, and by
   the <head> before the page draws (the visitor's saved choice; until they choose,
   the device's "increase contrast" setting). Black on white with solid black
   borders; no tints, textures or shadows; the dark bands turn black with white
   text; links are always underlined; focus is a thick black ring (yellow on black).
   Every text color pair here is at least 7:1 (WCAG AAA).
   ============================================================================= */
html[data-contrast="high"] {
  --blue: #003d73; --blue-deep: #002d5c; --blue-ink: #000; --blue-wash: #fff; --blue-mist: #fff;
  --amber: #ffcc00; --amber-deep: #000; --amber-wash: #fff;
  --paper: #fff; --paper-2: #fff; --paper-3: #fff; --white: #fff; --pure-white: #fff;
  --ink: #000; --ink-soft: #000; --ink-faint: #000; --footer-ink: #000;
  --line: #000; --line-strong: #000;
  --red: #9b0000; --red-bg: #fff; --green: #0b5323; --green-bg: #fff;
  --shadow-sm: none; --shadow: none; --shadow-lg: none;
}
html[data-contrast="high"] body { background: #fff; color: #000; }
html[data-contrast="high"] ::selection { background: #000; color: #fff; }
html[data-contrast="high"] a { color: var(--blue-deep); text-decoration: underline; }
html[data-contrast="high"] a:hover { color: #000; text-decoration-thickness: 3px; }
html[data-contrast="high"] :focus-visible,
html[data-contrast="high"] input:focus, html[data-contrast="high"] select:focus, html[data-contrast="high"] textarea:focus {
  outline: 3px solid #000; outline-offset: 3px;
}
html[data-contrast="high"] .topbar :focus-visible, html[data-contrast="high"] .section--blue :focus-visible,
html[data-contrast="high"] .pagehead :focus-visible, html[data-contrast="high"] .site-footer :focus-visible,
html[data-contrast="high"] .skip-link:focus-visible { outline-color: #ffcc00; }
html[data-contrast="high"] .skip-link { background: #000; color: #fff; border: 2px solid #ffcc00; }

/* Buttons */
html[data-contrast="high"] .btn { border: 2px solid #000; box-shadow: none; text-decoration: none; }
html[data-contrast="high"] .btn:hover { transform: none; text-decoration: underline; }
html[data-contrast="high"] .btn--accent, html[data-contrast="high"] .btn--accent:hover { background: #ffcc00; color: #000; }
html[data-contrast="high"] .btn--primary, html[data-contrast="high"] .btn--primary:hover { background: #000; color: #fff; }
html[data-contrast="high"] .btn--ghost, html[data-contrast="high"] .btn--ghost:hover { background: #fff; color: #000; }
html[data-contrast="high"] .btn-back { color: #000; }
html[data-contrast="high"] .textlink { color: #000; border-bottom-color: #000; }

/* Top bar and header */
html[data-contrast="high"] .topbar { background: #000; color: #fff; }
html[data-contrast="high"] .topbar a { color: #fff; }
html[data-contrast="high"] .topbar span[style] { opacity: 1 !important; }
html[data-contrast="high"] .textsize button, html[data-contrast="high"] .contrast-toggle { background: #000; color: #fff; border: 2px solid #fff; }
html[data-contrast="high"] .textsize button[aria-pressed="true"],
html[data-contrast="high"] .contrast-toggle[aria-pressed="true"] { background: #ffcc00; color: #000; border-color: #ffcc00; }
html[data-contrast="high"] .masthead { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid #000; box-shadow: none; }
html[data-contrast="high"] .us65-brand { text-decoration: none; }
html[data-contrast="high"] .us65-brand__badge { background: #ffcc00; color: #000; border: 2px solid #000; box-shadow: none; }
html[data-contrast="high"] .us65-nav a:not(.btn) { color: #000; text-decoration: underline; }
html[data-contrast="high"] .us65-nav a:not(.btn):hover { background: #000; color: #fff; }
html[data-contrast="high"] .us65-nav a[aria-current="page"] { background: #fff; box-shadow: inset 0 0 0 2px #000; }

/* Hero, chips, sections */
html[data-contrast="high"] .hero { border-bottom: 2px solid #000; }
html[data-contrast="high"] .hero::before { display: none; }
html[data-contrast="high"] .hero__kicker { color: #000; }
html[data-contrast="high"] .hero__kicker .dot { background: #000; box-shadow: none; }
html[data-contrast="high"] .hero h1 em { background: none; padding-bottom: 0; }
html[data-contrast="high"] .chip { background: #fff; color: #000; border: 2px solid #000; }
html[data-contrast="high"] .section--paper2 { background: #fff; box-shadow: none; border-block: 2px solid #000; }
html[data-contrast="high"] .section--blue, html[data-contrast="high"] .pagehead { background: #000; color: #fff; }
html[data-contrast="high"] .section--blue::before, html[data-contrast="high"] .pagehead::before,
html[data-contrast="high"] .pagehead::after { display: none; }
html[data-contrast="high"] .section--blue h2, html[data-contrast="high"] .section--blue h3, html[data-contrast="high"] .pagehead h1,
html[data-contrast="high"] .section--blue .lede, html[data-contrast="high"] .pagehead .lede,
html[data-contrast="high"] .section--blue a:not(.btn), html[data-contrast="high"] .pagehead a { color: #fff; }
html[data-contrast="high"] .section--blue .eyebrow, html[data-contrast="high"] .pagehead .eyebrow { color: #ffcc00; }
html[data-contrast="high"] .card { border: 2px solid #000; }
html[data-contrast="high"] .card--accent { border-top: 6px solid #000; }
html[data-contrast="high"] .us65-card-dark { background: #000; border: 2px solid #fff; }
html[data-contrast="high"] .us65-card-dark p { color: #fff; }
html[data-contrast="high"] .btn--ghost-light, html[data-contrast="high"] .btn--ghost-light:hover { background: #000; color: #fff; border-color: #fff; }
html[data-contrast="high"] .crumbs { color: #000; }
html[data-contrast="high"] .crumbs a { text-decoration: underline; }

/* The form */
html[data-contrast="high"] .form-card { border: 2px solid #000; border-top: 6px solid #000; }
html[data-contrast="high"] .form-promise { background: #fff; border: 2px solid #000; color: #000; }
html[data-contrast="high"] .us65-form .step-count { background: #fff; color: #000; border: 2px solid #000; }
html[data-contrast="high"] input, html[data-contrast="high"] select, html[data-contrast="high"] textarea { background-color: #fff; color: #000; border: 2px solid #000; }
html[data-contrast="high"] input::placeholder { color: #404040; }
html[data-contrast="high"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
html[data-contrast="high"] .checkrow input[type="checkbox"] { accent-color: #000; }
html[data-contrast="high"] .field.has-error input, html[data-contrast="high"] .field.has-error select { border: 3px solid var(--red); }
html[data-contrast="high"] .field-error { font-weight: 700; }
html[data-contrast="high"] .form-alert { background: #fff; border: 3px solid var(--red); }
html[data-contrast="high"] .form-fallback { border: 3px solid #000; }

/* Questions, the Medicare notice, the footer, the thank-you page */
html[data-contrast="high"] .accordion { border: 2px solid #000; }
html[data-contrast="high"] .accordion details { border-bottom: 2px solid #000; }
html[data-contrast="high"] .accordion details:last-child { border-bottom: 0; }
html[data-contrast="high"] .accordion summary:hover, html[data-contrast="high"] .accordion details[open] summary { background: #fff; text-decoration: underline; }
html[data-contrast="high"] .accordion summary::after { background: #fff; color: #000; border: 2px solid #000; }
html[data-contrast="high"] .accordion details[open] summary::after { background: #000; color: #fff; }
html[data-contrast="high"] .disclaimer { background: #fff; color: #000; border-top: 4px solid #000; }
html[data-contrast="high"] .site-footer { background: #000; color: #fff; }
html[data-contrast="high"] .site-footer::before { display: none; }
html[data-contrast="high"] .site-footer a, html[data-contrast="high"] .footer-mission, html[data-contrast="high"] .footer-bottom { color: #fff; }
html[data-contrast="high"] .footer-links a { text-decoration: underline; }
html[data-contrast="high"] .footer-grid h2 { color: #ffcc00; }
html[data-contrast="high"] .footer-bottom { border-top: 1px solid #fff; }
html[data-contrast="high"] .us65-thanks__tick { background: #fff; color: #000; border: 2px solid #000; }

/* Windows "contrast themes" (forced colors): colors come from the system, so show the
   pressed buttons and the badge with system colors and borders instead */
@media (forced-colors: active) {
  .us65-brand__badge { border: 2px solid CanvasText; }
  .textsize button[aria-pressed="true"], .contrast-toggle[aria-pressed="true"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
}