/* ==========================================================================
   theme.css — brand layer for the TDD voter registration page.

   This is the ONLY file you need to edit to recolor the page. Every brand
   color lives in :root below; all shades, hovers, shadows and the decorative
   trail rail are derived from those variables with color-mix().

   Loaded AFTER vendor-tailwind.css. The vendored utilities live inside
   @layer utilities, so the unlayered rules here always win.
   ========================================================================== */

:root {
  --tdd-navy:            #182147;  /* hero + footer bg, headings, dark cards */
  --tdd-navy-hover:      #263778;  /* navy button hover */
  --tdd-blue:            #42adfb;  /* primary actions, accents, icon tiles */
  --tdd-blue-hover:      #88d2ff;  /* hero + CTA button hover */
  --tdd-blue-hover-soft: #7ac8ff;  /* in-card blue button hover */
  --tdd-red:             #961928;  /* step pills, numerals 2-3, CTA line 2 */
  --tdd-cream:           #f7f0df;  /* page bg, inset cards, chips */
  --tdd-paper:           #fffdf6;  /* header bar, raised cards */
  --tdd-sky:             #e9f6ff;  /* Step 02 section bg */
}

/* --- base ---------------------------------------------------------------- */
body {
  background-color: var(--tdd-cream);
  color: var(--tdd-navy);
  font-family: "Source Sans 3", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: "Barlow Condensed", sans-serif; }

/* --- surfaces ------------------------------------------------------------ */
.paper-grain {
  background-image:
    linear-gradient(135deg, #ffffff99, #00000000 52%),
    url(../img/paper-texture.webp);
  background-size: auto, 460px 460px;
}
.edge-grid {
  background-image:
    linear-gradient(#ffffff12 1px, #00000000 1px),
    linear-gradient(90deg, #ffffff12 1px, #00000000 1px);
  background-size: 30px 30px;
}

/* Dashed "field guide" rail down the left edge of each step section (lg+). */
.field-guide-trail { position: relative; }
@media (min-width: 1024px) {
  .field-guide-trail::before {
    content: "";
    position: absolute;
    top: 5.4rem;
    bottom: -5rem;
    left: clamp(1rem, 5vw, 5.7rem);
    width: 2px;
    opacity: .65;
    background: repeating-linear-gradient(var(--tdd-blue) 0 13px, transparent 13px 23px);
  }
  .field-guide-trail::after {
    content: "\2726";
    position: absolute;
    top: 4.15rem;
    left: calc(clamp(1rem, 5vw, 5.7rem) - .63rem);
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    font-size: .82rem;
    color: var(--tdd-red);
    background: var(--tdd-cream);
    border-radius: 999px;
    box-shadow: 0 0 0 4px var(--tdd-cream);
  }
}

/* --- focus --------------------------------------------------------------- */
.focus-ring:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--tdd-navy),
    0 0 0 6px color-mix(in srgb, var(--tdd-blue) 50%, transparent);
}

/* --- backgrounds --------------------------------------------------------- */
.bg-navy     { background-color: var(--tdd-navy); }
.bg-cream    { background-color: var(--tdd-cream); }
.bg-paper    { background-color: var(--tdd-paper); }
.bg-paper-95 { background-color: color-mix(in srgb, var(--tdd-paper) 95%, transparent); }
.bg-sky      { background-color: var(--tdd-sky); }
.bg-blue-20  { background-color: color-mix(in srgb, var(--tdd-blue) 20%, transparent); }
/* translucent pale red — Step 02 card 2 */
.bg-red-tint { background-color: color-mix(in srgb, var(--tdd-red) 13%, #ffffffcc); }

/* --- text ---------------------------------------------------------------- */
.text-navy    { color: var(--tdd-navy); }
.text-navy-75 { color: color-mix(in srgb, var(--tdd-navy) 75%, transparent); }
.text-navy-74 { color: color-mix(in srgb, var(--tdd-navy) 74%, transparent); }
.text-navy-72 { color: color-mix(in srgb, var(--tdd-navy) 72%, transparent); }
.text-navy-70 { color: color-mix(in srgb, var(--tdd-navy) 70%, transparent); }
.text-navy-65 { color: color-mix(in srgb, var(--tdd-navy) 65%, transparent); }
.text-blue    { color: var(--tdd-blue); }
.text-red     { color: var(--tdd-red); }
.text-paper   { color: var(--tdd-paper); }
.text-cream   { color: var(--tdd-cream); }
.text-cream-85 { color: color-mix(in srgb, var(--tdd-cream) 85%, transparent); }
.text-cream-65 { color: color-mix(in srgb, var(--tdd-cream) 65%, transparent); }
.hover-text-navy:hover { color: var(--tdd-navy); }

/* --- borders ------------------------------------------------------------- */
.border-navy-10 { border: 1px solid color-mix(in srgb, var(--tdd-navy) 10%, transparent); }
.border-navy-15 { border: 1px solid color-mix(in srgb, var(--tdd-navy) 15%, transparent); }
.border-b-navy-10 { border-bottom: 1px solid color-mix(in srgb, var(--tdd-navy) 10%, transparent); }
.border-t-navy-10 { border-top: 1px solid color-mix(in srgb, var(--tdd-navy) 10%, transparent); }
.border-y-navy-10 {
  border-top: 1px solid color-mix(in srgb, var(--tdd-navy) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--tdd-navy) 10%, transparent);
}
.border-blue-55 { border: 1px solid color-mix(in srgb, var(--tdd-blue) 55%, transparent); }
.hover-border-blue:hover { border-color: var(--tdd-blue); }

/* --- navy-tinted elevation ---------------------------------------------- */
.shadow-note      { box-shadow: 0 14px 35px color-mix(in srgb, var(--tdd-navy) 7%, transparent); }
.shadow-card      { box-shadow: 0 24px 60px color-mix(in srgb, var(--tdd-navy) 11%, transparent); }
.shadow-panel     { box-shadow: 0 22px 48px color-mix(in srgb, var(--tdd-navy) 18%, transparent); }
.shadow-tile      { box-shadow: 0 14px 32px color-mix(in srgb, var(--tdd-navy) 8%, transparent); }
.shadow-accordion { box-shadow: 0 18px 42px color-mix(in srgb, var(--tdd-navy) 8%, transparent); }

/* --- icon tiles ---------------------------------------------------------- */
.tile-blue { background-color: var(--tdd-blue); color: var(--tdd-navy); }
.tile-red  { background-color: var(--tdd-red);  color: #fff; }

/* --- pills (star + label) ------------------------------------------------ */
.pill-blue { background-color: var(--tdd-blue); color: var(--tdd-navy); }
.pill-red  { background-color: var(--tdd-red);  color: #fff; }

/* --- hero + CTA buttons -------------------------------------------------- */
.btn-primary {
  background-color: var(--tdd-blue);
  color: var(--tdd-navy);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--tdd-blue) 25%, transparent);
}
.btn-primary:hover { background-color: var(--tdd-blue-hover); }

.btn-cta {
  background-color: var(--tdd-blue);
  color: var(--tdd-navy);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--tdd-navy) 14%, transparent);
}
.btn-cta:hover { background-color: var(--tdd-blue-hover); }

/* --- full-width row buttons inside cards -------------------------------- */
.rowbtn-navy  { background-color: var(--tdd-navy); color: #fff; }
.rowbtn-navy:hover { background-color: var(--tdd-navy-hover); }

.rowbtn-blue  { background-color: var(--tdd-blue); color: var(--tdd-navy); }
.rowbtn-blue:hover { background-color: var(--tdd-blue-hover-soft); }

.rowbtn-cream {
  border: 1px solid color-mix(in srgb, var(--tdd-navy) 15%, transparent);
  background-color: var(--tdd-paper);
  color: var(--tdd-navy);
}
.rowbtn-cream:hover {
  border-color: color-mix(in srgb, var(--tdd-navy) 40%, transparent);
  background-color: #fff;
}

/* ==========================================================================
   Project additions — brand lockups, plus three utilities the vendored
   Tailwind sheet does not contain (it only holds classes the reference
   build used, so anything new has to be declared here).
   ========================================================================== */

/* header crest mark */
.brand-crest   { height: 56px; width: auto; }

/* footer wordmark lockup (sits on a paper chip so it reads on navy) */
.brand-wordmark { width: 200px; height: auto; }

/* Step 02 intro: content-width heading column, text column takes the rest */
@media (min-width: 768px) {
  .md-cols-auto-1fr { grid-template-columns: auto minmax(0, 1fr); }
}