/*
 * Site-wide reset + typographic defaults + reading column + focus ring.
 * Consumed by every page via <link>. Component styles live in
 * component-scoped CSS files (Plan 04 adds header/footer).
 */

/* ---------- Modern reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ---------- Headings (DESIGN.md §2) ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p  { text-wrap: pretty; }

/* ---------- Links (DESIGN.md §6.1 ghost pattern) ---------- */
a { color: var(--color-accent-text); text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--gold-600); }
a:hover { color: var(--ink-900); text-decoration-thickness: 2.5px; }

/* ---------- Skip link (DESIGN.md §11.1) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-800);
  color: var(--cream-50);
  padding: var(--space-3) var(--space-4);
  z-index: var(--z-toast);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Global focus ring ---------- */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ---------- Reading column (DESIGN.md §7.4) ---------- */
.prose { max-width: 68ch; margin-inline: auto; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.prose > * + * { margin-top: var(--space-6); }
.prose h2 { margin-top: var(--space-12); color: var(--color-text); }
.prose h3 { margin-top: var(--space-8); color: var(--color-text); }

/* ---------- Container widths (DESIGN.md §7.2) ---------- */
.container-sm { max-width: var(--container-sm); margin-inline: auto; padding-inline: var(--space-6); }
.container-md { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--space-6); }
.container-lg { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-6); }
.container-xl { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-6); }

/* ---------- Reduced motion (DESIGN.md §10.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Section rhythm (DESIGN.md §3) ---------- */
section { padding-block: var(--space-16); }
@media (min-width: 768px) { section { padding-block: var(--space-20); } }
@media (min-width: 1024px) { section { padding-block: var(--space-24); } }

/* -------------------------------------------------------------------------
   FULL-BLEED PAGE HERO
   Shared by section landing pages (Practice Areas hub, Blog hub).
   Full-width photo band with navy tint + white serif headline, matching the
   home hero. Breadcrumb + eyebrow + H1 + lead sit over the darker left side.
   ------------------------------------------------------------------------- */

.page-hero-full {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
  min-height: 320px;
  padding-block: 0; /* neutralize global section rhythm */
}

.page-hero-full__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero-full__bg picture,
.page-hero-full__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* skyline sits in the upper third of the crop — bias the visible slice up
     so cover-cropping on wide/short viewports never clips it */
  object-position: center 25%;
}

.page-hero-full__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(18, 41, 74, 0.92) 0%,
    rgba(18, 41, 74, 0.80) 42%,
    rgba(18, 41, 74, 0.58) 72%,
    rgba(18, 41, 74, 0.45) 100%
  );
}

.page-hero-full__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  padding-block: var(--space-8) var(--space-10);
  color: var(--cream-50);
}

@media (min-width: 768px) {
  .page-hero-full { min-height: 420px; }
  .page-hero-full__inner {
    min-height: 420px;
    padding-block: var(--space-10) var(--space-12);
  }
}

.page-hero-full__breadcrumb {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  margin-bottom: var(--space-5);
  color: rgba(251, 248, 243, 0.75);
}

.page-hero-full__breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-hero-full__breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-2);
  color: rgba(251, 248, 243, 0.5);
}

.page-hero-full__breadcrumb a {
  color: rgba(251, 248, 243, 0.85);
  text-decoration: none;
}

.page-hero-full__breadcrumb a:hover,
.page-hero-full__breadcrumb a:focus-visible {
  color: var(--gold-500);
  text-decoration: underline;
}

.page-hero-full__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 var(--space-4) 0;
}

.page-hero-full h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--cream-50);
  margin: 0 0 var(--space-5) 0;
  text-wrap: balance;
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.page-hero-full__lead {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(251, 248, 243, 0.92);
  max-width: 60ch;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.page-hero-full__byline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(251, 248, 243, 0.78);
  margin: var(--space-5) 0 0 0;
}

.page-hero-full__byline a {
  color: var(--gold-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}