/* ============================================================
   ADU Journal — components.css
   Styles for search form, pagination, widgets, and misc components
   ============================================================ */

/* ── WordPress Search Form (reset & restyle) ── */
.search-form {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
.search-form label { margin: 0; }
.search-form .search-field {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  width: 160px;
  color: var(--color-ink);
  padding: 0;
}
.search-form .search-field::placeholder { color: var(--color-muted); }
.search-form .search-submit { display: none; }

/* ── Masthead search override ── */
.site-masthead .search-form .search-field {
  width: 180px;
}

/* ── Pagination ── */
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--color-rule);
  color: var(--color-ink);
  background: white;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.page-numbers:hover,
.nav-links a:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: white;
}
.page-numbers.current,
.nav-links .current {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: white;
}
.page-numbers.dots { border: none; background: transparent; }

/* ── Jurisdiction Autocomplete ── */
.jurisdiction-autocomplete::-webkit-scrollbar { width: 4px; }
.jurisdiction-autocomplete::-webkit-scrollbar-track { background: var(--color-cream); }
.jurisdiction-autocomplete::-webkit-scrollbar-thumb { background: var(--color-rule); }

/* ── Widget base styles ── */
.widget {
  margin-bottom: var(--space-5);
}
.widget__title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-ink);
}
.widget ul { list-style: none; }
.widget ul li {
  padding: 8px 0;
  border-bottom: var(--border-thin);
  font-size: 13px;
}
.widget ul li a {
  color: var(--color-ink);
  transition: color var(--transition-fast);
}
.widget ul li a:hover { color: var(--color-terracotta); }

/* ── Gutenberg Block Overrides ── */
.wp-block-image { margin: var(--space-5) 0; }
.wp-block-image figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: var(--space-1);
}
.wp-block-pullquote {
  border-top: 4px solid var(--color-terracotta);
  border-bottom: 4px solid var(--color-terracotta);
  padding: var(--space-4);
  text-align: center;
  margin: var(--space-5) 0;
}
.wp-block-pullquote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}
.wp-block-separator {
  border: none;
  border-top: 3px double var(--color-ink);
  margin: var(--space-5) 0;
}
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.wp-block-table th,
.wp-block-table td {
  padding: 10px 14px;
  border: var(--border-thin);
  text-align: left;
}
.wp-block-table th {
  background: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Archive / Category header ── */
.archive-header {
  background: var(--color-cream);
  border-bottom: var(--border-thick);
  padding: var(--space-5) var(--content-padding);
}
.archive-header .archive-title {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  font-weight: 900;
}
.archive-header .archive-description {
  font-size: var(--text-body-m);
  color: var(--color-muted);
  margin-top: var(--space-1);
  max-width: 600px;
}

/* ── 404 Page ── */
.error-404 {
  text-align: center;
  padding: var(--space-12) var(--content-padding);
}
.error-404 h1 {
  font-size: clamp(60px, 12vw, 120px);
  color: var(--color-terracotta);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.error-404 h2 {
  font-size: var(--text-display-m);
  margin-bottom: var(--space-3);
}
.error-404 p {
  font-size: var(--text-body-l);
  color: var(--color-muted);
  max-width: 480px;
  margin: 0 auto var(--space-5);
}

/* ── Reading progress bar placeholder ── */
/* (Created dynamically in JS) */

/* ── Builder / Project archive cards ── */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-6) 0;
}
@media (max-width: 1023px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .archive-grid { grid-template-columns: 1fr; } }

/* ── Utility classes ── */
.text-muted  { color: var(--color-muted); }
.text-center { text-align: center; }
.text-mono   { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}