/* Reusable component styles */

/* Buttons */

.btn {
  --btn-edge: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85em 1.5em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  border: 2px solid var(--btn-edge);
  box-shadow: 3px 3px 0 0 var(--btn-edge);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast);
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--btn-edge);
}
.btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--btn-edge);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn--primary:hover { background: #000; }

.btn--signal {
  background: var(--color-signal);
  color: var(--color-signal-ink);
}

.btn--outline {
  background: var(--color-paper-raised);
  color: var(--color-ink);
}

/* For outline buttons on dark/is-inverse sections — transparent instead of
   the solid paper background .btn--outline uses, with a paper-colored edge
   so the border/shadow reads against a dark background instead of an
   ink-colored one disappearing into it. */
.btn--outline-inverse {
  --btn-edge: rgba(244, 241, 232, 0.4);
  background: transparent;
  color: var(--color-paper);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cards */

.card {
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card__body { color: var(--color-text-muted); flex: 1; }
.card__footer { margin-top: var(--space-5); }

.service-card {
  border: 1px solid var(--color-line);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.service-card .card__meta {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.7em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  margin-bottom: var(--space-4);
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.service-card__icon {
  display: inline-flex;
  color: var(--color-cobalt);
  margin-bottom: var(--space-3);
  transition: color var(--duration-base) var(--ease-out);
}
.service-card__icon .search-system__icon-svg { width: 28px; height: 28px; }

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .service-card:focus-within {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-paper);
    transform: translateY(-4px);
    box-shadow: 6px 6px 0 0 var(--color-signal);
  }
  .service-card:hover .card__body,
  .service-card:focus-within .card__body { color: rgba(244, 241, 232, 0.7); }
  .service-card:hover .card__meta,
  .service-card:focus-within .card__meta {
    background: var(--color-signal);
    color: var(--color-signal-ink);
    border-color: var(--color-signal);
  }
  .service-card:hover .service-card__icon,
  .service-card:focus-within .service-card__icon { color: var(--color-signal); }
  .service-card:hover .link,
  .service-card:focus-within .link { color: var(--color-signal); }
}

.highlight-tile {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid rgba(244, 241, 232, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(244, 241, 232, 0.03);
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.highlight-tile:hover {
  border-color: var(--color-signal);
  background: rgba(216, 240, 0, 0.06);
}
.highlight-tile__index {
  font-family: var(--font-mono);
  color: var(--color-signal);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.highlight-tile__text { color: rgba(244, 241, 232, 0.85); }

.case-study-card__metric {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  margin-top: var(--space-4);
}

.article-card__image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: var(--space-4); background: var(--color-line); }
.article-card__image img { width: 100%; height: 100%; object-fit: cover; }

.testimonial-card { border-left: 3px solid var(--color-cobalt); }
.testimonial-card__quote { font-size: var(--text-lg); font-style: italic; }
.testimonial-card__author { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); }

.pricing-card { text-align: left; border: 1px solid var(--color-line-strong); }
.pricing-card__price { font-family: var(--font-display); font-size: var(--text-display-sm); margin-block: var(--space-3); }
.pricing-card__price small { font-family: var(--font-mono); font-size: var(--text-sm); text-transform: none; color: var(--color-muted); }

/* Badges */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  border: 1px solid var(--color-line-strong);
}
.badge--signal { background: var(--color-signal); color: var(--color-signal-ink); border-color: transparent; }
.badge--muted { color: var(--color-muted); }

/* Breadcrumb */

.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--color-ink); }
.breadcrumb__sep { opacity: 0.5; }

/* FAQ */

.faq-item {
  border-bottom: 1px solid var(--color-line);
}
.faq-item summary {
  padding-block: var(--space-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-mono); color: var(--color-muted); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding-bottom: var(--space-4); color: var(--color-text-muted); }

/* Forms */

.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper-raised);
  font-size: var(--text-base);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-cobalt);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field-error { color: #b3261e; font-size: var(--text-xs); margin-top: var(--space-1); }
.field-hint { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-1); }

/* Honeypot field must be visually and programmatically hidden without
   display:none, which some bots skip when auto-filling. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Alerts */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}
.alert--success { border-color: var(--color-cobalt); background: color-mix(in srgb, var(--color-cobalt) 8%, var(--color-paper)); }
.alert--error { border-color: #b3261e; background: color-mix(in srgb, #b3261e 8%, var(--color-paper)); }

/* Empty state */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-muted);
}
.empty-state h3 { font-size: var(--text-xl); color: var(--color-ink); margin-bottom: var(--space-2); }

/* Cookie consent */

.cookie-consent {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: 480px;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  z-index: 60;
  font-size: var(--text-sm);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent .cluster { margin-top: var(--space-3); }

/* Pagination */

.pagination { display: flex; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); }
.pagination a, .pagination span {
  padding: 0.5em 0.9em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.pagination a:hover { border-color: var(--color-ink); }
.pagination .is-current { background: var(--color-ink); color: var(--color-paper); }

/* Filters (work index) */

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filter-bar a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  padding: 0.5em 1em;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
}
.filter-bar a[aria-current="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* Table of contents (long articles) */

.toc {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: var(--text-sm);
}
.toc__title { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.06em; margin-bottom: var(--space-3); color: var(--color-muted); }
.toc ol { display: flex; flex-direction: column; gap: var(--space-2); }
.toc li {
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
  margin-left: calc(-1 * var(--space-3));
  transition: border-color var(--duration-base) var(--ease-out);
}
.toc a.is-active { color: var(--color-ink); font-weight: 700; }
.toc li:has(a.is-active) { border-left-color: var(--color-signal); }

.sidebar-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: var(--text-sm);
}
.sidebar-card ul { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.sidebar-card--inverse {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: rgba(244, 241, 232, 0.85);
}
.sidebar-card--inverse .toc__title { color: rgba(244, 241, 232, 0.5); }

/* Article prose */

.prose h2, .prose h3, .prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table {
  max-width: 42rem;
  margin-inline: auto;
}
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); margin-bottom: var(--space-3); font-family: var(--font-body); font-weight: 700; }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-6); margin-bottom: var(--space-2); font-family: var(--font-body); font-weight: 700; }
.prose p, .prose ul, .prose ol { margin-bottom: var(--space-4); }
.prose blockquote { border-left: 3px solid var(--color-signal); padding-left: var(--space-4); color: var(--color-text-muted); font-style: italic; margin-block: var(--space-6); }
.prose code { background: var(--color-line); padding: 0.15em 0.4em; border-radius: 3px; }
.prose pre {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  word-break: break-word;
}
.prose pre code { background: none; padding: 0; }
.prose img, .prose svg.hero__banner { border-radius: var(--radius-md); margin-block: var(--space-5); max-width: 100%; }
.prose th, .prose td { border: 1px solid var(--color-line); padding: var(--space-2) var(--space-3); text-align: left; }