/*
 * ShopDPA — Base typography + element resets
 * --------------------------------------------------------------
 * Sets sensible defaults that all Bricks elements inherit. Every
 * value here references a token. No hardcoded literals.
 *
 * Loaded after tokens.css.
 */

/* -------------------------------------------------- */
/* Document defaults                                  */
/* -------------------------------------------------- */
html {
  font-size: 100%; /* respects user font-size preference; 1rem = 16px default */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);          /* 18px desktop default per visual brief */
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (max-width: 768px) {
  body { font-size: var(--fs-base); } /* 16px mobile per visual brief */
}

/* -------------------------------------------------- */
/* Headings — Fraunces                                */
/* -------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);     /* Fraunces 500 per visual brief */
  color: var(--c-ink);
  line-height: var(--lh-snug);
  margin-block-start: 0;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

@media (min-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
}

h2 {
  font-size: var(--fs-2xl);
  letter-spacing: var(--tr-snug);
}

h3 {
  font-size: var(--fs-xl);
  letter-spacing: var(--tr-snug);
}

h4 {
  font-size: var(--fs-lg);
}

h5 {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

h6 {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* H1 italic-amber tail — applied via .has-tail class on the trailing span */
/* Pattern: <h1>Texas DPA, <span class="h1-tail">made simple.</span></h1> */
.h1-tail {
  font-style: italic;
  color: var(--c-accent);
  font-weight: var(--fw-regular);
}

/* -------------------------------------------------- */
/* Body text + inline elements                        */
/* -------------------------------------------------- */
p {
  margin-block-start: 0;
  margin-block-end: var(--sp-2);
  max-width: var(--max-w-content);
}

/* Centered paragraphs auto-center the paragraph block itself, not just the text inside */
p[style*="text-align: center"],
p.is-centered,
.is-centered {
  margin-inline: auto;
}

a {
  color: var(--c-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--t-base) var(--ease);
}

a:hover { color: var(--c-primary-hover); }

a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

strong, b { font-weight: var(--fw-semibold); }

small { font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* -------------------------------------------------- */
/* Eyebrow label — solid amber pill (locked 2026-05-18)*/
/* -------------------------------------------------- */
/*
 * Every section eyebrow on the site carries the pill chrome (matches the
 * homepage hero eyebrow). One uniform style across light, alt, and dark
 * zones — amber bg + navy ink contrasts cleanly on every underlying surface.
 * Replaces the prior eyebrow-color-by-zone rule (navy on light, amber on dark)
 * with a single pill style that works everywhere.
 */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-accent);
  padding: 8px 16px;
  border-radius: 999px;
  margin-block-end: var(--sp-2);
}

/* -------------------------------------------------- */
/* Lists                                              */
/* -------------------------------------------------- */
ul, ol {
  margin-block-start: 0;
  margin-block-end: var(--sp-2);
  padding-inline-start: var(--sp-3);
  max-width: var(--max-w-content);
}

li { margin-block-end: var(--sp-half); }

/* -------------------------------------------------- */
/* Buttons (semantic — Bricks button class hooks)     */
/* -------------------------------------------------- */
.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tr-snug);
  text-decoration: none;
  border: 1px solid transparent;
  /* v1.5.5 — pill radius for design consistency with form pill options.
   * Earlier --r-sm (4px) created visual mismatch: site CTAs were rounded
   * rectangles while form pills were full pills → user flagged it. */
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease);
  min-height: 44px; /* WCAG 2.5.8 target size minimum */
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.btn--primary {
  /* v1.20.0 — text color flipped from --c-ink-inverse (cream) to
   * --c-primary-deep (deep navy). Cream-on-amber rendered too bright;
   * deep navy on amber gives stronger contrast and a calmer CTA pop. */
  background-color: var(--c-accent);
  color: var(--c-primary-deep);
}
.btn--primary:hover {
  background-color: var(--c-accent-hover);
  color: var(--c-primary-deep);
}

.btn--secondary {
  /* Navy bg keeps cream text — navy-on-navy would be invisible. */
  background-color: var(--c-primary);
  color: var(--c-ink-inverse);
}
.btn--secondary:hover {
  background-color: var(--c-primary-hover);
  color: var(--c-ink-inverse);
}

.btn--ghost {
  background-color: transparent;
  color: var(--c-primary);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover {
  background-color: var(--c-primary-soft);
  border-color: var(--c-primary);
}

.btn--inverse {
  /* Used on navy zones (final-CTA panel). v1.20.0 — text color
   * flipped from --c-ink-inverse (cream) to --c-primary-deep (deep
   * navy) to match the global cream→navy button-text shift.       */
  background-color: var(--c-accent);
  color: var(--c-primary-deep);
}
.btn--inverse:hover {
  background-color: var(--c-accent-hover);
  color: var(--c-primary-deep);
}

.btn--lg { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-md); }
.btn--sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); min-height: 36px; }

/* -------------------------------------------------- */
/* Containers                                         */
/* -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--sp-4); }
}

.container--content { max-width: var(--max-w-content); }
.container--wide    { max-width: var(--max-w-wide); }

/* -------------------------------------------------- */
/* Hide WordPress page title on shortcode-driven pages */
/* (homepage, where each zone provides its own H1/H2)  */
/* -------------------------------------------------- */
body.home .entry-title,
body.home .page-title,
body.home .post-title,
body.home h1.wp-block-post-title,
body.home article > header,
body.home .entry-header,
body.home article > h1,
body.home article > h1.wordpress-block-post-title,
body.home article > h1:first-child { display: none !important; }

/* -------------------------------------------------- */
/* Full-width breakout for homepage / shortcode pages */
/* The default WP/Bricks template wraps content in an */
/* <article> with margins — this lets section bgs go  */
/* edge-to-edge on the homepage.                      */
/* -------------------------------------------------- */
body.home article,
body.home article.page,
body.home article.post,
body.home main > article,
body.page-id-10 article {
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}

body.home main,
body.home #main,
body.home #content,
body.home .bricks-content,
body.home .brxe-container,
body.home .container.brxe-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

/* When article has the .entry-content child, that may also constrain */
body.home .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

/* -------------------------------------------------- */
/* Zone backgrounds (alternating bg shift pattern)    */
/* -------------------------------------------------- */
.zone           { padding-block: var(--sp-6); background-color: var(--c-bg); }
.zone--alt      { padding-block: var(--sp-6); background-color: var(--c-bg-alt); }
.zone--dark     { padding-block: var(--sp-6); background-color: var(--c-primary); color: var(--c-ink-inverse); }
.zone--dark h1,
.zone--dark h2,
.zone--dark h3,
.zone--dark h4 { color: var(--c-ink-inverse); }
/* .eyebrow pill works uniformly on light + alt + dark zones — no per-zone override needed */

/* -------------------------------------------------- */
/* Visually hidden (a11y)                             */
/* -------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------- */
/* Skip link (a11y — first focusable element)         */
/* -------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-primary);
  color: var(--c-ink-inverse);
  padding: var(--sp-1) var(--sp-2);
  z-index: var(--z-toast);
  transition: top var(--t-base) var(--ease);
}

.skip-link:focus { top: 0; }