/* ============================================
 * base.css — global reset + typography defaults
 *
 * Site-wide rules that apply regardless of which
 * module is on the page. Loaded once per page, before
 * any module CSS.
 *
 * Owns: reset, body, type defaults, text-wrap, utility
 * classes that are intentionally page-global (not BEM-
 * scoped).
 *
 * Does NOT own: layout / container / section padding
 * (see layout.css) or button styles (see buttons.css).
 * ============================================ */

/* ----- Reset ----- */

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

html,
body {
  margin: 0;
  padding: 0;
}

/* Never allow horizontal scroll. `clip` (not `hidden`) stops sideways
   scrolling without creating a scroll container, so position:sticky and
   anchor scroll-margin still work. Applied to BOTH html and body — on
   iOS Safari the body can be the scroller, so clipping html alone isn't
   enough. width:100% + max-width pins the body to the viewport. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  width: 100%;
}

/* Smooth-scroll for anchor jumps (TOC clicks, footer-link in-page jumps).
   Pairs with each section's `scroll-margin-top` so the destination
   heading clears the fixed navbar. Respects prefers-reduced-motion. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ----- Body defaults ----- */

body {
  background-color: var(--color-bg-soft);
  font-family: var(--font-sans);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----- Typography defaults ----- */

/* Line-height baseline (added 2026-06-04, spacing-type audit).
   body inherits --leading-relaxed (1.6) for prose; headings default to
   --leading-tight (1.25). Modules should only declare line-height when
   they need to OVERRIDE this baseline (e.g. --leading-none for numeric
   displays), not to restate it. This is what stops Figma's 1.4 default
   leaking back in: there's now a correct value to inherit. */

/* Headings balance line lengths so multi-line titles look even.
   Paragraphs use `pretty` instead — it avoids orphans/widows without
   compressing visible line widths the way `balance` does. Using
   `balance` on body paragraphs caused right edges to look short of
   their container, which broke section right-edge alignment.
   Modern CSS (Chrome 117+, Safari 17.5+, Firefox 121+); older
   browsers ignore gracefully. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;                          /* Kill the UA default 1em top/bottom margin. Without this every heading carries an invisible 1em (= its own font-size) on both sides, so spacing set by modules stacks ON TOP of it and never matches the value you write. All heading gaps now come ONLY from explicit module rules or a flex/grid parent gap. */
  text-wrap: balance;
  line-height: var(--leading-tight);
}

p {
  text-wrap: pretty;
}

/* ----- Hyperlink defaults -----
   Canonical link style applied to all <a> elements that don't opt
   out via a more specific selector (BEM modules typically override
   to inherit colour, e.g. nav links, footer links).
   - Resting: navy, no underline (clean prose flow).
   - Hover: navy-muted (--color-navy-muted, 80%) + underline.
   - Focus: visible navy outline for keyboard nav.
   Locked 2026-05-20 alongside blog-single build. */
a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color 180ms ease;
}

/* Hover applies to prose links only. Button-shaped anchors, nav
   items, breadcrumbs, share/contact icon buttons, and card-wrapping
   links opt out via the :not() list below. :where() keeps specificity
   at 0 so module rules can override freely.
   When a new "button-shaped" anchor class lands, add it here. */
@media (hover: hover) {
  a:not(:where(
    .tlm-button,
    .tlm-navbar__link,
    .tlm-navbar__cta,
    .tlm-navbar__logo-link,
    .tlm-navbar__drawer-link,
    .tlm-navbar__drawer-subitem,
    .tlm-navbar__drawer-cta,
    .tlm-mega-menu__item,
    .tlm-mega-menu__cta-button,
    .tlm-footer__breadcrumb-link,
    .tlm-footer__cta,
    .tlm-footer__social-link,
    .tlm-service-page-subnav__link,
    .blog-single-rail__toc-link,
    .blog-single-rail__share-link,
    .blog-single-author-bio__contact,
    .blog-single-related__card-link,
    .blog-single-sheet__link,
    .tlm-insights-hero__category-link,
    .tlm-insights-hero__more-link,
    .tlm-insights-featured__link,
    .tlm-insights-feed__card-link,
    .tlm-service-page-portfolio__card-link-info,
    .tlm-services-index-engagements__link,
    .tlm-services-index-capabilities__card-link,
    .tlm-subscribe-feed__link,
    .tlm-book-amazon
  )):hover {
    /* Subtle darken on the same navy + underline. Prose links only.
       Uses the navy-opacity scale token (--color-navy-muted, 80%). */
    color: var(--color-navy-muted);
    text-decoration: underline;
  }
}

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

/* Halant webfont fallback chain — tokens.css declares the token
   but Halant needs Google Fonts (loaded in the page template). */
:root {
  --font-serif: 'Halant', Georgia, serif;
}

/* ----- Utility classes (intentionally global, not BEM-scoped) ----- */

/* Gradient-filled accent span inside any heading. Wrap only the words
   that should pick up the pink → orange gradient.
   First used in referral-journey h2 ("misses the mark"). */
.tlm-heading-accent {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}