/* ============================================================
   eDariba Blog — styles that cannot live in template utilities

   Layout, spacing, typography, controls, cards, and pagination are
   expressed with Tailwind in the blog PHP templates. Keep this file
   limited to generated WordPress content, counters, and category art.
   All values come from the centralized tokens in brand.css.
   ============================================================ */

/* Accessible fallback for links and controls rendered from post content. */
.page-blog :where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* JS/server state that is added after Tailwind has generated its classes. */
.masthead-cat-link.active {
  color: var(--teal);
}

/* Category artwork ------------------------------------------------------- */
:where(.blog-card-media, .article-hero-media, .related-card-media).tile-teal {
  --blog-tile-bg: var(--tile-teal-bg);
  --blog-tile-fg: var(--tile-teal-fg);
}

:where(.blog-card-media, .article-hero-media, .related-card-media).tile-navy {
  --blog-tile-bg: var(--tile-navy-bg);
  --blog-tile-fg: var(--tile-navy-fg);
}

:where(.blog-card-media, .article-hero-media, .related-card-media).tile-gold {
  --blog-tile-bg: var(--tile-gold-bg);
  --blog-tile-fg: var(--tile-gold-fg);
}

:where(.blog-card-media, .article-hero-media, .related-card-media).tile-clay {
  --blog-tile-bg: var(--tile-clay-bg);
  --blog-tile-fg: var(--tile-clay-fg);
}

:where(.blog-card-media, .article-hero-media, .related-card-media).tile-moss {
  --blog-tile-bg: var(--tile-moss-bg);
  --blog-tile-fg: var(--tile-moss-fg);
}

:where(.blog-card-media, .article-hero-media, .related-card-media).tile-sand {
  --blog-tile-bg: var(--tile-sand-bg);
  --blog-tile-fg: var(--tile-sand-fg);
}

:where(.blog-card-media, .article-hero-media, .related-card-media).tile-plum {
  --blog-tile-bg: var(--tile-plum-bg);
  --blog-tile-fg: var(--tile-plum-fg);
}

:where(.blog-card-media, .article-hero-media, .related-card-media).tile-slate {
  --blog-tile-bg: var(--tile-slate-bg);
  --blog-tile-fg: var(--tile-slate-fg);
}

:where(.blog-card-media-placeholder, .article-hero-media-placeholder),
.related-card-media {
  color: var(--blog-tile-fg, var(--teal));
  background: var(--blog-tile-bg, var(--teal-muted));
}

.blog-card-media-placeholder svg {
  width: 38%;
  height: 38%;
}

.article-hero-media-placeholder {
  min-height: clamp(220px, 42vw, 360px);
}

.article-hero-media-placeholder svg {
  width: 30%;
  height: 30%;
}

.related-card-media svg {
  width: 36%;
  height: 36%;
}

.related-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Generated table of contents ------------------------------------------ */
.article-toc a::before {
  content: counter(toc) ". ";
  color: var(--teal);
  font-weight: 700;
}

/* WordPress/Gutenberg article content ---------------------------------- */
.article-body > p,
.article-section p {
  margin-bottom: var(--space-5);
  color: var(--fg);
  font-size: var(--text-body-lg);
  line-height: 1.9;
}

.article-body > p:first-of-type {
  color: var(--muted);
  font-size: 20px;
}

.article-section {
  margin-top: var(--space-8);
  padding-top: var(--space-2);
  scroll-margin-top: 110px;
}

.article-section h2,
.article-body > h2 {
  margin: var(--space-8) 0 var(--space-5);
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--accent);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: 700;
  line-height: 1.35;
  scroll-margin-top: 110px;
}

.article-section h2:first-child,
.article-body > h2:first-child,
.article-body > h2:first-of-type {
  margin-top: 0;
}

.article-section h3,
.article-body > h3 {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}

.article-body :where(p, li) a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body strong {
  color: var(--fg);
  font-weight: 700;
}

.article-list,
.article-body > :where(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.article-list li,
.article-body > :where(ul, ol) > li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--fg);
  font-size: var(--text-body-lg);
  line-height: 1.75;
  list-style: none;
}

.article-list li::before,
.article-body > ul > li::before {
  position: absolute;
  inset-inline-start: 0;
  content: "—";
  color: var(--accent);
  font-weight: 700;
}

ol.article-list,
.article-body > ol {
  counter-reset: article-list;
}

ol.article-list > li,
.article-body > ol > li {
  counter-increment: article-list;
}

ol.article-list > li::before,
.article-body > ol > li::before {
  position: absolute;
  inset-inline-start: 0;
  content: counter(article-list) ".";
  color: var(--teal);
  font-weight: 700;
}

.article-body :where(blockquote, .wp-block-quote) {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  color: var(--fg);
  background: var(--surface);
}

.article-body :where(figure, .wp-block-image) {
  margin: var(--space-6) 0;
}

.article-body figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-caption);
  text-align: center;
}

.article-body :where(table, .wp-block-table table) {
  width: 100%;
  margin: var(--space-6) 0;
  border-collapse: collapse;
  background: var(--surface);
}

.article-body :where(th, td) {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  text-align: start;
}

.article-body th {
  color: var(--fg-dark);
  background: var(--teal);
  font-weight: 700;
}

/* Optional FAQ markup authored inside a post --------------------------- */
.article-body .faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.article-body .faq-item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.article-body .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.article-body .faq-item summary::-webkit-details-marker {
  display: none;
}

.article-body .faq-icon {
  display: grid;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  place-items: center;
  color: var(--teal);
  background: var(--teal-muted);
  transition: transform var(--transition-fast);
}

.article-body .faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.article-body .faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.8;
}

.article-body .faq-answer p {
  margin-bottom: var(--space-3);
}