/* Heinrichs Online — Colors & Type
 * Load Lora + Poppins from Google Fonts in the host HTML:
 *   <link rel="preconnect" href="https://fonts.googleapis.com" />
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 *   <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
 */

:root {
  /* ---------- Brand colors ---------- */
  --color-plum:   #3D1730;  /* Primary backgrounds, headings, logo */
  --color-berry:  #8C2F4B;  /* Links, CTAs, hover, active states */
  --color-brass:  #B8875A;  /* Decorative labels, dividers, minor accents */
  --color-blush:  #EDDCE0;  /* Card bgs, tag fills, soft sections */
  --color-ivory:  #F8F2EC;  /* Page bg, light section fills */
  --color-ink:    #33222B;  /* Body text */
  --color-muted:  #8F7A82;  /* Captions, secondary copy */
  --color-border: #DDD0D2;  /* Hairline borders */
  --color-white:  #FFFFFF;

  /* Tints used for hover / pressed states */
  --color-plum-hover:   #2E1024;
  --color-berry-hover:  #74263F;
  --color-brass-hover:  #A5744A;
  --color-blush-hover:  #E4CCD2;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--color-plum);   /* Headings */
  --fg-2: var(--color-ink);    /* Body */
  --fg-3: var(--color-muted);  /* Secondary / caption */
  --fg-on-dark: #FFFFFF;

  /* ---------- Semantic background ---------- */
  --bg-page: var(--color-ivory);
  --bg-surface: #FFFFFF;
  --bg-soft: var(--color-blush);
  --bg-inverse: var(--color-plum);

  /* ---------- Type families ---------- */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* ---------- Type scale (size / line-height / weight) ---------- */
  --h1-size: 32px;  --h1-lh: 1.2;  --h1-weight: 400;
  --h2-size: 20px;  --h2-lh: 1.3;  --h2-weight: 400;
  --body-size: 16px; --body-lh: 1.7; --body-weight: 300;
  --ui-size: 14px;  --ui-lh: 1.4;  --ui-weight: 500;
  --caption-size: 12px; --caption-lh: 1.5; --caption-weight: 400;

  /* ---------- Radii ---------- */
  --radius-card: 10px;
  --radius-pill: 40px;
  --radius-tag: 20px;

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- Shadows (very restrained — brand is grounded) ---------- */
  --shadow-card: 0 1px 2px rgba(61, 23, 48, 0.04), 0 4px 12px rgba(61, 23, 48, 0.05);
  --shadow-lift: 0 2px 4px rgba(61, 23, 48, 0.06), 0 12px 28px rgba(61, 23, 48, 0.08);
  --shadow-accent: 0 2px 4px rgba(61, 23, 48, 0.18), 0 10px 22px rgba(140, 47, 75, 0.28);
  --shadow-primary: 0 2px 4px rgba(61, 23, 48, 0.16), 0 10px 22px rgba(61, 23, 48, 0.22);

  /* ---------- Borders ---------- */
  --border-hairline: 0.5px solid var(--color-border);
  --border-thin: 1px solid var(--color-border);
  --border-thick: 1.5px solid var(--color-plum);

  /* ---------- Transitions ---------- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration: 220ms;
}

/* ---------- Element defaults ---------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Full-bleed dividers (WaveDivider) use width:100vw with a -50vw margin.
     On mobile browsers 100vw overshoots the layout width and shoves a sliver
     of every page off the right edge — the "squished off the right" bug.
     `overflow-x: clip` contains that overflow WITHOUT creating a scroll
     container, so it does not break the sticky table-of-contents on the
     legal pages the way `overflow-x: hidden` on an ancestor would. */
  overflow-x: clip;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--h2-weight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.eyebrow {
  /* Eyebrow / section label is not used in this brand.
     Class kept as a no-op to avoid breaking any pre-existing references. */
  display: none;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  font-weight: var(--caption-weight);
  color: var(--fg-3);
}

.ui-label {
  font-family: var(--font-body);
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  font-weight: var(--ui-weight);
  color: var(--fg-1);
}

a {
  color: var(--color-berry);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration) var(--ease-soft), border-color var(--duration) var(--ease-soft);
}
a:hover {
  color: var(--color-berry-hover);
  border-bottom-color: currentColor;
}

/* Italic display — Lora italic is used sparingly for emphasis in headings */
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
}

/* ---------- Mobile stacking for homepage grid sections ---------- */
/* These grids are set inline (multi-column at desktop width); on narrow
   viewports they need to collapse to a single column instead of squeezing
   every column down to a sliver. !important is required here because an
   inline style can only be overridden by an !important rule. */
@media (max-width: 768px) {
  /* Fallback for browsers without overflow-x: clip (older mobile Safari).
     Safe here because the sticky TOC is already forced static below, so
     hidden's scroll-container side effect can't break anything. */
  html, body { overflow-x: hidden; }

  /* NOTE: section/footer padding (both axes) is fluid via clamp() in the
     JSX, so it tightens on mobile on its own — no override needed here. */

  .hero-grid,
  .services-grid,
  .process-grid,
  .cta-grid,
  .about-grid,
  .legal-grid,
  .services-page-grid,
  .contact-grid,
  .field-row {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* A sticky table-of-contents nav makes sense beside a column of content,
     but once everything stacks to one column it just floats oddly at the
     top while scrolling past the content below it. */
  .page-toc-nav {
    position: static !important;
  }
}

/* On small phones the inline header nav (About / Services / Portfolio /
   Contact) plus the full wordmark overflows off the right edge. Drop the
   "Heinrichs Online" wordmark and keep just the H• mark so all four nav
   links fit; tablets and up keep the full logo. */
@media (max-width: 480px) {
  .ho-wordmark { display: none; }
}