/* ==========================================================================
   DFW Immigrant Law Center — Base
   Reset, typography, colour bands, paper texture, dawn-wash dividers.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: calc(var(--header-h-stuck) + 24px);
  }
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The sticky call bar is fixed to the bottom edge on phones, so the footer
   needs matching clearance or the bar covers its last row. The padding goes on
   the footer, not body: body padding would show as a cream strip under the
   dark footer instead of extending the footer's own background. */
@media (max-width: 767px) {
  .footer-bottom {
    padding-bottom: calc(32px + 65px + env(safe-area-inset-bottom));
  }
}

body.menu-open {
  overflow: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

/* <picture> is a wrapper only. Removing it from layout lets the inner <img>
   size against the real container (needed for object-fit and height: 100%). */
picture {
  display: contents;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--bridge);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--bridge-dark);
}

strong,
b {
  font-weight: 600;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

/* ---------- Utilities ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 860px;
}

.container--wide {
  max-width: 1360px;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(40px, 5vw, 64px);
}

.band-cream {
  background-color: var(--cream);
}

.band-white {
  background-color: var(--white);
}

.band-sprout {
  background-color: var(--sprout-wash);
}

.band-ink {
  background-color: var(--ink);
  color: var(--cream);
}

.band-gold {
  background-color: var(--gold-wash);
}

/* Paper-fibre texture — 3.5% warm grain over cream bands */
.has-grain {
  position: relative;
  isolation: isolate;
}

.has-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/texture_paper_cream.webp");
  background-size: 480px 480px;
  background-repeat: repeat;
  opacity: 0.035;
  pointer-events: none;
}

/* Dawn wash: soft gradient joins between colour bands */
.dawn-wash {
  height: 60px;
  width: 100%;
  pointer-events: none;
}

.dawn-wash--cream-to-ink {
  background: linear-gradient(to bottom, var(--cream), #4a4438 55%, var(--ink));
}

.dawn-wash--ink-to-cream {
  background: linear-gradient(to bottom, var(--ink), #4a4438 45%, var(--cream));
}

.dawn-wash--cream-to-sprout {
  background: linear-gradient(to bottom, var(--cream), var(--sprout-wash));
}

.dawn-wash--sprout-to-cream {
  background: linear-gradient(to bottom, var(--sprout-wash), var(--cream));
}

/* Screen-reader only */
.sr-only {
  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 {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-soft);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--cream);
  outline: var(--focus);
  outline-offset: 2px;
}

/* ---------- Shared type helpers ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bridge);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.band-ink .eyebrow {
  color: var(--gold);
}

.eyebrow--on-dark {
  color: var(--gold);
}

.lede {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-70);
  max-width: 62ch;
}

.band-ink .lede {
  color: rgba(251, 247, 240, 0.82);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .lede {
  margin-inline: auto;
}

.section-head h2 + .lede {
  margin-top: var(--sp-4);
}

.italic {
  font-style: italic;
}

/* Hand-drawn gold underline (draws in via JS/CSS) */
.hl {
  position: relative;
  white-space: nowrap;
  color: inherit;
}

.hl::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -0.12em;
  height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.2C38 3.4 74 9.6 110 6.2c30-2.8 58-1.2 88-2.6' fill='none' stroke='%23E9A83E' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease-out) 0.15s;
  pointer-events: none;
}

.hl.is-drawn::after,
.no-js .hl::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hl::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* Decorative bilingual ghost word */
.ghost-word {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 11vw, 9.5rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
}

@media (max-width: 767px) {
  .ghost-word {
    display: none;
  }
}

/* Sunburst rays (decorative) */
.sunburst {
  position: absolute;
  pointer-events: none;
  color: var(--gold);
  opacity: 0.05;
}

/* Scroll-reveal base states — only applied when JS is running */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.72s var(--ease-soft), transform 0.72s var(--ease-out);
  will-change: opacity, transform;
}

.js .reveal--image {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.js .reveal--left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s var(--ease-soft), transform 0.8s var(--ease-out);
}

.js .reveal--quote {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-out);
}

.js .reveal.is-visible,
.js .reveal--image.is-visible,
.js .reveal--left.is-visible,
.js .reveal--quote.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal--image,
  .js .reveal--left,
  .js .reveal--quote {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Print */
@media print {
  .site-header,
  .mobile-callbar,
  .esperanza-card,
  .skip-link {
    display: none !important;
  }
}