/*
 * Affiliate Portal — Roundup styling
 * ----------------------------------
 * Styles every class the roundup-article-html skill emits. The skill stopped
 * shipping inline <style> blocks (WordPress strips them anyway), so this
 * file is the only source of truth for how a roundup actually looks.
 *
 * Class inventory (canonical — keep in sync with the skill prompt):
 *
 *   Layout / hero
 *     .eyebrow, .badge, .sub, .hero-meta, .section-intro
 *
 *   Trust / verdict
 *     .trust-box, .verdict-card, .vc-icon
 *
 *   Filter + sort UI
 *     .filter-bar, .fbtn, .fbtn.active
 *     .sort-bar, #sort-sel
 *
 *   Cards grid
 *     #cards-container, .cards-grid
 *     .pcard, .pcard[hidden], .affp-hidden
 *     .ci-wrap, .cbody, .ctitle, .cfeature, .cprice, .cverdict, .cbestfor
 *     .cbadge, .cb-best, .cb-personal, .cb-power, .cb-budget, .cb-default
 *     .stars
 *
 *   Tables
 *     .ctable, .fstable, .tbl
 *
 *   Accordions
 *     .acc-toggle, .acc-icon, .acc-open
 *
 * Design goals:
 *  - Editorial, calm, mobile-first.
 *  - No external font dependencies — inherit the theme's system stack.
 *  - High specificity only where WP themes are known to fight us
 *    (Astra, GeneratePress both ship aggressive .entry-content table styles).
 *  - All custom selectors are prefixed with their owner class so we don't
 *    leak into theme content.
 */

/* ──────────────────────────────────────────────────────────────────
 * CSS variables — themable via :root override in a child theme.
 * ────────────────────────────────────────────────────────────────── */
:root {
  --affp-fg: #1a1a1a;
  --affp-muted: #5a5a5a;
  --affp-soft: #f7f7f7;
  --affp-border: #e3e3e3;
  --affp-accent: #0b6efd;
  --affp-accent-soft: #e7f0ff;
  --affp-good: #1f8a4c;
  --affp-good-soft: #e6f6ec;
  --affp-warn: #c46a00;
  --affp-warn-soft: #fff1de;
  --affp-bad: #b32d2d;
  --affp-radius: 12px;
  --affp-radius-sm: 6px;
  --affp-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --affp-shadow-soft: 0 1px 2px rgba(0,0,0,.04);
}

/* ──────────────────────────────────────────────────────────────────
 * Hero / intro elements
 * ────────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--affp-muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--affp-accent-soft);
  color: var(--affp-accent);
  letter-spacing: 0.02em;
}

.sub {
  font-size: 1.1rem;
  color: var(--affp-muted);
  margin: 0.5rem 0 1rem;
  line-height: 1.5;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--affp-muted);
  margin: 1rem 0;
}

.hero-meta > * + *::before {
  /* visually separate inline meta items where the skill emits flat text */
  content: "·";
  margin-right: 1.25rem;
  color: var(--affp-border);
}

.section-intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--affp-fg);
  margin-bottom: 1.25rem;
}

/* ──────────────────────────────────────────────────────────────────
 * Trust + verdict cards
 * ────────────────────────────────────────────────────────────────── */
.trust-box,
.verdict-card {
  background: var(--affp-soft);
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--affp-shadow-soft);
}

.verdict-card {
  background: var(--affp-good-soft);
  border-color: #cdebda;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.vc-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
}

.trust-box h2,
.trust-box h3,
.verdict-card h2,
.verdict-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* ──────────────────────────────────────────────────────────────────
 * Filter bar + sort
 * ────────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  align-items: center;
}

.fbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--affp-border);
  background: #fff;
  color: var(--affp-fg);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
  line-height: 1.2;
}

.fbtn:hover {
  border-color: var(--affp-accent);
  color: var(--affp-accent);
}

.fbtn:focus-visible {
  outline: 2px solid var(--affp-accent);
  outline-offset: 2px;
}

.fbtn.active {
  background: var(--affp-accent);
  border-color: var(--affp-accent);
  color: #fff;
}

.sort-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.875rem;
  color: var(--affp-muted);
}

#sort-sel,
.sort-bar select {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius-sm);
  background: #fff;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--affp-fg);
  cursor: pointer;
}

#sort-sel:focus-visible,
.sort-bar select:focus-visible {
  outline: 2px solid var(--affp-accent);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────
 * Cards grid
 * ────────────────────────────────────────────────────────────────── */
#cards-container,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
  list-style: none;
  padding: 0;
}

.pcard {
  background: #fff;
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--affp-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}

.pcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}

.pcard[hidden],
.pcard.affp-hidden {
  display: none !important;
}

.ci-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--affp-soft);
  overflow: hidden;
}

.ci-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cbody {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.ctitle {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--affp-fg);
}

.cfeature {
  font-size: 0.875rem;
  color: var(--affp-muted);
  margin: 0;
  line-height: 1.45;
}

.cprice {
  font-weight: 600;
  color: var(--affp-fg);
  font-size: 0.95rem;
}

.cverdict {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--affp-fg);
  margin: 0;
}

.cbestfor {
  font-size: 0.8125rem;
  color: var(--affp-muted);
  font-style: italic;
  margin-top: auto;
}

/* ──────────────────────────────────────────────────────────────────
 * Badges (best / personal pick / power / budget)
 * ────────────────────────────────────────────────────────────────── */
.cbadge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--affp-fg);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.cbadge.cb-best { background: var(--affp-good); }
.cbadge.cb-personal { background: var(--affp-accent); }
.cbadge.cb-power { background: #6b3fb5; }
.cbadge.cb-budget { background: var(--affp-warn); }
.cbadge.cb-default { background: var(--affp-muted); }

/* ──────────────────────────────────────────────────────────────────
 * Star rating
 * ────────────────────────────────────────────────────────────────── */
.stars {
  color: #e5a300;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────
 * Tables — .ctable (comparison grid), .fstable (full spec table),
 * .tbl (generic). Themes love to butcher tables, so we ramp specificity.
 * ────────────────────────────────────────────────────────────────── */
.ctable,
.fstable,
.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius-sm);
  overflow: hidden;
}

.ctable th,
.ctable td,
.fstable th,
.fstable td,
.tbl th,
.tbl td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--affp-border);
  vertical-align: top;
  line-height: 1.5;
}

.ctable thead th,
.fstable thead th,
.tbl thead th {
  background: var(--affp-soft);
  font-weight: 600;
  color: var(--affp-fg);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ctable tbody tr:last-child td,
.fstable tbody tr:last-child td,
.tbl tbody tr:last-child td {
  border-bottom: none;
}

.ctable tbody tr:nth-child(even),
.fstable tbody tr:nth-child(even),
.tbl tbody tr:nth-child(even) {
  background: #fbfbfb;
}

/* Horizontal scroll wrapper for narrow viewports.
 * Skill is told to wrap tables in .table-scroll where mobile width matters,
 * but we also handle the un-wrapped case gracefully. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem -1rem;
  padding: 0 1rem;
}

@media (max-width: 640px) {
  .ctable,
  .fstable,
  .tbl {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Accordions
 * ────────────────────────────────────────────────────────────────── */
.acc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--affp-soft);
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--affp-fg);
  margin: 0.5rem 0;
  transition: background-color .15s ease, border-color .15s ease;
}

.acc-toggle:hover {
  background: #efefef;
  border-color: #d0d0d0;
}

.acc-toggle:focus-visible {
  outline: 2px solid var(--affp-accent);
  outline-offset: 2px;
}

.acc-icon {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1;
  transition: transform .2s ease;
  color: var(--affp-muted);
}

.acc-toggle.acc-open .acc-icon {
  transform: rotate(180deg);
  color: var(--affp-accent);
}

/* The element the accordion controls is whatever id="acc-foo" points at.
 * We rely on the [hidden] attribute the JS toggles; this just adds a touch
 * of breathing room when it's visible. */
[id^="acc-"]:not([hidden]) {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius-sm);
}

/* ──────────────────────────────────────────────────────────────────
 * Decision flow / quiz block — skill emits this near the end as a
 * `.decision-flow` block with `.df-step`, `.df-question`, `.df-choice`.
 * We don't have JS for it yet (planned), but we still want it to look
 * intentional rather than naked.
 * ────────────────────────────────────────────────────────────────── */
.decision-flow {
  background: var(--affp-soft);
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.df-step + .df-step {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--affp-border);
}

.df-question {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--affp-fg);
}

.df-choice {
  display: inline-block;
  margin: 0.25rem 0.4rem 0.25rem 0;
  padding: 0.35rem 0.75rem;
  background: #fff;
  border: 1px solid var(--affp-border);
  border-radius: var(--affp-radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--affp-fg);
  text-decoration: none;
}

.df-choice:hover {
  border-color: var(--affp-accent);
  color: var(--affp-accent);
}

/* ──────────────────────────────────────────────────────────────────
 * YouTube embeds — skill emits raw <iframe>; make them responsive.
 * ────────────────────────────────────────────────────────────────── */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"],
.entry-content iframe[src*="youtu.be"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--affp-radius-sm);
  margin: 1rem 0;
}

/* ──────────────────────────────────────────────────────────────────
 * Print — strip interactivity and decoration.
 * ────────────────────────────────────────────────────────────────── */
@media print {
  .filter-bar,
  .sort-bar,
  .acc-toggle {
    display: none !important;
  }
  [id^="acc-"] {
    display: block !important;
  }
  .pcard {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #999;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Reduced motion
 * ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pcard,
  .fbtn,
  .acc-toggle,
  .acc-icon {
    transition: none;
  }
  .pcard:hover {
    transform: none;
  }
}