/* ==========================================================================
   theme-additions.css
   Rules the static build carried inline and the two states the WordPress
   theme adds. Appended to main.css at enqueue time — keep it short; anything
   structural belongs in main.css itself.
   ========================================================================== */

/* Active state for the homepage before/after category tabs (ba-tabs.js). */
.btn--outline-dark.is-active {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

/* On phones the hero's secondary button becomes the filled WhatsApp primary,
   matching main.css §19 behaviour for .btn-row but scoped to the homepage
   hero, where the order is reversed. */
@media (max-width: 640px) {
  .hero--home .btn--whatsapp-mobile {
    background: var(--green-bright);
    color: var(--green-ink);
    border-color: var(--green-bright);
  }
}

/* WordPress core classes the theme does not otherwise style. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto;
  padding: 14px 20px;
  background: var(--ivory);
  color: var(--ink);
}

.alignleft  { float: left; margin: 0 24px 20px 0; }
.alignright { float: right; margin: 0 0 20px 24px; }
.aligncenter { display: block; margin: 0 auto 20px; }
.wp-caption-text { font-size: 13px; color: var(--ink-muted); margin-top: 8px; }

/* Editor / page content — pages written in the block editor inherit the
   design's type without needing block styles per element. */
.entry-content h2 { font-size: var(--fs-h2-sm); margin: 48px 0 18px; }
.entry-content h3 { font-size: var(--fs-h3); margin: 32px 0 12px; }
.entry-content p,
.entry-content li { font-size: var(--fs-body); line-height: 1.78; color: var(--ink-soft); }
.entry-content ul,
.entry-content ol { padding-left: 22px; margin: 0 0 20px; }
.entry-content li { margin-bottom: 8px; }
.entry-content img { margin: 28px 0; }
.entry-content blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 1px solid var(--stone);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--ink);
}

/* Pagination on the blog index. */
.dm-pagination {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(32px, 4vw, 56px);
}
.dm-pagination .page-numbers {
  min-width: 46px; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(26, 26, 24, 0.18);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.dm-pagination .page-numbers.current,
.dm-pagination .page-numbers:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}