/* Shared fixes on top of each page's inline styles (QA 2026-09-30) */
:root { --gold-text: #8a6a2b; }

/* Contrast: gold as text on light backgrounds needs a darker shade (WCAG AA) */
.section-label, .over-card .role, .spec-icon,
.over-features li::before, .spec-detail ul li::before { color: var(--gold-text); }

/* Contrast: navy text on gold buttons instead of white (5.8:1) */
.btn-primary, .form-submit, .mobile-cta a { color: var(--navy); }
.nav-cta { color: var(--navy) !important; }
.btn-primary:hover, .form-submit:hover { color: var(--navy); }

/* Long e-mail addresses must wrap on small screens */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.contact-item > div, .over-card { min-width: 0; }

/* Links without their own style: brand colour instead of browser blue */
:where(main) a { color: var(--blue); text-underline-offset: 2px; }

/* Contact page headings are h2 now (were h3) */
.contact-info h2, .contact-form h2 { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 20px; font-family: inherit; line-height: 1.3; }

/* Skip link for keyboard and screen-reader users */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 1000; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }

/* Phone button in the nav: keep its padding (generic nav-link padding overrode it) */
.nav-links a.nav-cta { padding: 10px 18px !important; white-space: nowrap; }

/* === Design review 2026-09-30 === */

/* FINDING-001: nav and top bar share the content grid (were 24px narrower on each side) */
.nav-inner, .topbar-inner { max-width: 1148px; }

/* FINDING-002: subpage text starts on the same left edge as the page title; readable line length */
.spec-detail-inner { max-width: 1100px; }
.spec-detail-inner > * { max-width: 680px; }

/* FINDING-003: body copy never below 16px */
.spec-card p, .step p, .step-card p, .kosten-card p, .over-card p, .over-text p,
.over-features li, .spec-detail ul li, .contact-item span, .contact-item a, .footer-inner { font-size: 1rem; }

/* FINDING-004: practice-area cards on the home page are links to their section */
a.spec-card { display: block; text-decoration: none; color: inherit; }
a.spec-card h3::after { content: " →"; color: var(--gold-text); font-weight: 400; }
.spec-detail h2[id] { scroll-margin-top: 96px; }

/* FINDING-005: line icons instead of emoji in the contact blocks */
.contact-icon { color: var(--navy); }
.contact-icon svg { display: block; }

/* FINDING-006: balanced headings, no motion for people who ask for less */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* FINDING-007: footer links are comfortable to tap on phones */
@media (max-width: 768px) {
  .footer-inner a { display: inline-block; padding: 10px 0; }
}

/* FINDING-008: tighter rhythm on text pages (sections were 160px apart for 4 bullets) */
.spec-detail { padding-top: 56px; padding-bottom: 56px; }

/* Portraits of the lawyers (replace the initials) */
img.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; background: var(--sand); }
.over-card img.avatar { margin-bottom: 20px; }
img.avatar.portrait { width: 120px; height: 120px; margin-bottom: 20px; }
.over-card img.avatar { width: 112px; height: 112px; }

/* Text pages: heading left, content right on wide screens (single column below 1024px) */
.sd-body > * { max-width: 680px; }
.sd-body > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .spec-detail-inner { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .spec-detail-inner > * { max-width: none; }
  .sd-head h2 { margin-bottom: 0; }
  .sd-head { position: sticky; top: 104px; }
}

/* Checklist items: text and links stay in one flow (flex split them into columns) */
.spec-detail ul li, .over-features li { display: block; position: relative; padding-left: 28px; }
.spec-detail ul li::before, .over-features li::before { position: absolute; left: 0; }