/*
 * 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(280px, 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;
}

/* ──────────────────────────────────────────────────────────────────
 * AAWP product box inside a .pcard
 * --------------------------------------------------------------------
 * The roundup skill drops a full AAWP box — `[amazon box="ASIN"]`, which
 * renders as `.aawp-product--horizontal` (thumb-left / content-right) — into
 * each grid cell. AAWP's horizontal layout floats the thumb and gives the
 * content a ~160px left margin to clear it; crammed into a ~280px cell that
 * squeezes the long Amazon title into a sliver (one word per line) and pushes
 * it past the card edge where `.pcard{overflow:hidden}` clips it. Force the
 * box to behave like a vertical card: image on top, details stacked below.
 * (Keep in sync with src/lib/affiliate/roundupInlineCss.ts, which injects the
 *  same rules inline for sites where this plugin isn't deployed.)
 * ────────────────────────────────────────────────────────────────── */
.pcard .aawp,
.pcard .aawp-product { margin: 0; width: 100%; }
.cards-grid .pcard .aawp-product--horizontal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.cards-grid .pcard .aawp-product__thumb {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 1rem 1rem 0.5rem !important;
  text-align: center !important;
  box-sizing: border-box;
}
.cards-grid .pcard .aawp-product__thumb a { display: inline-block; }
.cards-grid .pcard .aawp-product__thumb img,
.cards-grid .pcard .aawp-product__image {
  width: auto !important;
  max-width: 100% !important;
  max-height: 190px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
.cards-grid .pcard .aawp-product__content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 1.1rem 1.1rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
}
.cards-grid .pcard .aawp-product__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
}
.cards-grid .pcard .aawp-product__description { display: none !important; }
.cards-grid .pcard .aawp-product__pricing,
.cards-grid .pcard .aawp-product__price { font-weight: 600; font-size: 0.95rem; margin-top: auto; }
.pcard .aawp-product__button,
.pcard .aawp-button { margin-top: 0.5rem; }

/* The AAWP buy button sets its own width and nowrap, so in a narrow grid
   column it overflowed the card and was clipped at the edge.
   
   Give it the FULL card width instead of letting it size itself. The first
   attempt merely allowed wrapping (overflow-wrap: anywhere), which stopped the
   clipping but broke mid-word — "Buy on Amazon" came out as "Buy on Am azo n"
   stacked over four lines, because the button was still only as wide as AAWP
   made it. Width is the actual fix; wrapping was treating the symptom.
   
   At full width a ~280px card fits the label and icon on one line, so nowrap
   is safe and keeps the button a normal height. */
.pcard { overflow: visible; }
.pcard .aawp-product__button,
.pcard .aawp-button-wrapper { width: 100%; }
.pcard .aawp-button,
.pcard .aawp-product__button > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
  /* Never break inside a word — that is what produced "Am azo n". */
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: center;
}

/* STANDALONE cards — the in-depth review blocks, which are .pcard but NOT
   inside .cards-grid. Full width, so the narrow-column rules above would
   shrink the image to a thumbnail in whitespace. Keep AAWP's horizontal
   layout and just tidy the spacing. */
.pcard:not(.cards-grid .pcard) .aawp-product__thumb img,
.pcard:not(.cards-grid .pcard) .aawp-product__image {
  max-height: 240px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.pcard:not(.cards-grid .pcard) .aawp-product { margin: 0 0 1.25rem !important; }
.pcard:not(.cards-grid .pcard) .aawp-product__content { padding: 0 0 0 1rem; }

/* ──────────────────────────────────────────────────────────────────
 * 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;
  }
}