/* 2base base layer — reset, typography, accessibility and layout primitives. */
/* ----------------------------------------------------------------------------
   WCAG 2.3.3 (Animation from Interactions) — respect user's OS-level setting
   to reduce motion. Collapses animations and transitions to ~0 for users who
   are sensitive to motion (vestibular disorders, migraines, etc.). Applied
   globally via *, *::before, *::after so every transition/animation defined
   later in this file or in Tailwind utilities is automatically covered.
   ---------------------------------------------------------------------------- */
@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;
  }
}

/* ----------------------------------------------------------------------------
   Display headings share the same tracking as body text.
   .app-page-title is the only page H1 size: --text-xl (32px), weight 600.
   ---------------------------------------------------------------------------- */
.app-h-large,
.app-page-title {
  letter-spacing: var(--letter-spacing);
  line-height: 1.15;
  text-wrap: balance;
  font-weight: var(--font-weight-strong);
}

.app-page-title {
  font-size: var(--text-xl);
}

html {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-body);
  letter-spacing: var(--letter-spacing);
  color: var(--ink);
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-weight: var(--font-weight-body);
  letter-spacing: var(--letter-spacing);
  background: var(--paper);
  color: var(--ink);
}

.font-thin, .font-light, .font-normal, .font-medium {
  font-weight: var(--font-weight-body);
}

.font-semibold, .font-bold, .font-extrabold, .font-black {
  font-weight: var(--font-weight-strong);
}

.text-2xl {
  font-size: var(--text-lg);
}

.text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl {
  font-size: var(--text-xl);
}

.app-mono,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.app-mono {
  font-family: var(--font-mono);
}

/* Canonical public layout. Component CSS is deliberately used here instead of
   a Tailwind @apply layer: app.css is not purged and remains safe around Go
   template interpolation on the Tailwind 3 Windows toolchain. */
.app-container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Reading column inside the page shell — articles, legal, FAQ. */
.app-prose {
  max-width: var(--container-prose);
}

/* Centered card inside the same shell — login, 404, unsubscribe. */
.app-center {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
}

.app-section {
  padding-block: var(--page-space-top) var(--page-space-bottom);
}

/* Canonical 12-column page geometry.
   Templates choose a semantic page mode through the child span classes;
   column math and responsive collapse stay here instead of being rebuilt in
   every page with local grid utilities. */
.app-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: start;
}

.app-layout--compact { gap: var(--space-6); }
.app-layout--footer { gap: var(--space-10); }
.app-layout__wide { grid-column: 1 / -1; min-width: 0; }
.app-layout__nine { grid-column: span 9 / span 9; min-width: 0; }
.app-layout__main { grid-column: span 8 / span 8; min-width: 0; }
.app-layout__aside { grid-column: span 4 / span 4; min-width: 0; }
.app-layout__seven { grid-column: span 7 / span 7; min-width: 0; }
.app-layout__six { grid-column: span 6 / span 6; min-width: 0; }
.app-layout__five { grid-column: span 5 / span 5; min-width: 0; }
.app-layout__three { grid-column: span 3 / span 3; min-width: 0; }
.app-layout__prose { grid-column: span 8 / span 8; min-width: 0; }
.app-layout__center {
  grid-column: 4 / span 6;
  min-width: 0;
}

@media (max-width: 1023px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .app-layout > :where(.app-layout__wide, .app-layout__nine, .app-layout__main, .app-layout__aside, .app-layout__seven, .app-layout__six, .app-layout__five, .app-layout__three, .app-layout__prose, .app-layout__center) {
    grid-column: 1;
  }
}

@media (min-width: 1024px) {
  .app-layout--footer { gap: var(--space-8); }
}

/* Breadcrumbs are one page-shell row, not local typography assembled in
   every template. The markup can carry schema.org data while geometry stays
   identical across catalog, data, editorial and account pages. */
.app-breadcrumb {
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  margin: 0 0 var(--space-5);
  overflow-x: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  scrollbar-width: none;
}

.app-breadcrumb::-webkit-scrollbar { display: none; }
.app-breadcrumb ol { min-width: max-content; }
.app-breadcrumb a { color: var(--color-text-muted); }
.app-breadcrumb a:hover { color: var(--ink); }
.app-breadcrumb a:focus-visible {
  border-radius: var(--radius-xs);
  outline: none;
  box-shadow: var(--ring-focus);
}

.app-page-header {
  max-width: var(--container-prose);
  margin-bottom: 2rem;
}

.app-page-header > :where(p) {
  margin-top: 0.75rem;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: 1.6;
}

.app-eyebrow {
  margin-bottom: 0.75rem;
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  line-height: 1rem;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}

.app-kicker {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing);
}

.app-index-link {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.app-index-link:hover {
  border-color: var(--brand-300);
  color: var(--brand-800);
  transform: translateX(2px);
}

.app-index-link__meta {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.app-result-row {
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1rem 1.125rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.app-result-row:hover {
  border-color: var(--color-border-hover);
  background: var(--tint);
  transform: translateY(-1px);
}

.app-result-row__name {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-result-row--exact {
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  padding: 1.125rem;
}

/* Editorial content. The project intentionally has no Tailwind Typography
   plugin, so the historical `prose` classes previously provided no spacing
   after Preflight reset margins. Keep the familiar class contract and define
   the readable rhythm here. */
.prose {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: 1.75;
}

.prose-sm {
  font-size: var(--text-sm);
}

.prose-lg {
  font-size: var(--text-md);
}

.prose :where(h2, h3, h4) {
  color: var(--gray-900);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing);
}

.prose :where(h2) {
  margin-top: 2.25em;
  margin-bottom: 0.75em;
  font-size: 1.5em;
  line-height: 1.25;
}

.prose :where(h3) {
  margin-top: 1.75em;
  margin-bottom: 0.6em;
  font-size: 1.15em;
  line-height: 1.35;
}

.prose :where(p, ul, ol, blockquote, table) {
  margin-block: 1em;
}

.prose :where(ul, ol) {
  padding-left: 1.4em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose a {
  color: var(--brand-700);
  font-weight: var(--font-weight-body);
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-underline-offset: 0.18em;
}

.prose a:hover {
  color: var(--brand-800);
  text-decoration-color: currentColor;
}

.prose strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
}

.prose blockquote {
  border-left: 3px solid var(--brand-300);
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
}

.prose code {
  border-radius: var(--radius-xs);
  background: var(--gray-100);
  padding: 0.1em 0.35em;
  color: var(--gray-800);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Contact blur effect on company pages */
.blur-contact {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
}

/* Alpine.js cloak: hide elements until Alpine initializes */
[x-cloak] {
  display: none !important;
}

/* Smooth collapse transition for Alpine x-collapse */
[x-collapse] {
  overflow: hidden;
}

/* Focus visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
html.app-scroll-locked,
html.app-scroll-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

.app-skip-link:focus,
.app-skip-link:focus-visible {
  z-index: var(--z-modal);
  box-shadow: var(--shadow-mega);
}

.app-cookie-banner {
  z-index: var(--z-overlay);
  border: 1px solid color-mix(in srgb, var(--surface) 12%, transparent);
  box-shadow: var(--shadow-mega);
}

.app-z-overlay { z-index: var(--z-overlay); }

.app-danger { color: var(--color-danger); }
.app-overlay {
  background: var(--overlay);
}