/* ==========================================================================
   Filthy Casual Exile — component library (Session 3 fills this out fully)
   Tokens come from theme.json as --wp--preset--* custom properties.
   Every component: responsive, visible focus, reduced-motion respected.
   ========================================================================== */

:root {
  --fce-stamp-angle: -3deg;
  --fce-radius-s: 4px;
  --fce-radius-m: 8px;
}

/* --------------------------------------------------------------------------
   1. Answer Box — the one-sentence plain-English answer. Parchment on leather.
   -------------------------------------------------------------------------- */
.fce-answer-box {
  background: color-mix(in srgb, var(--wp--preset--color--tarnish) 14%, var(--wp--preset--color--leather));
  border-left: 4px solid var(--wp--preset--color--tarnish);
  border-radius: var(--fce-radius-s);
  padding: 1.25rem 1.5rem;
}
.fce-answer-box::before {
  content: "PLAIN ENGLISH ANSWER";
  display: block;
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.6875rem;
  letter-spacing: 3px;
  color: var(--wp--preset--color--tarnish);
  margin-bottom: 0.375rem;
}

/* --------------------------------------------------------------------------
   2. Verdict Stamp — the signature. One per page, maximum.
   Modifier classes: .is-ember (skip/sell/spreadsheet) .is-verdigris (buy/controller/starter)
   -------------------------------------------------------------------------- */
.fce-verdict-stamp {
  display: inline-block;
  transform: rotate(var(--fce-stamp-angle));
  font-family: var(--wp--preset--font-family--utility);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0.625rem 1.5rem;
  border: 4px solid currentColor;
  border-radius: var(--fce-radius-s);
  /* chipped-border + ink-bleed treatment via SVG mask: Session 3 */
}
.fce-verdict-stamp.is-ember { color: var(--wp--preset--color--ember); }
.fce-verdict-stamp.is-verdigris { color: var(--wp--preset--color--verdigris); }

/* --------------------------------------------------------------------------
   3. Controller Note
   -------------------------------------------------------------------------- */
.fce-controller-note {
  background: var(--wp--preset--color--leather-raised);
  border-left: 4px solid var(--wp--preset--color--ember);
  border-radius: var(--fce-radius-s);
  padding: 1rem 1.375rem;
}
.fce-controller-note > .fce-label {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.8125rem;
  letter-spacing: 2px;
  color: var(--wp--preset--color--ember);
}

/* --------------------------------------------------------------------------
   4. Patch Stamp — freshness signal on every reference page
   -------------------------------------------------------------------------- */
.fce-patch-stamp {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.875rem;
  color: var(--wp--preset--color--ember);
}

/* --------------------------------------------------------------------------
   5. Item Card / Build Summary Table — skeletons; full styling in Session 3
   -------------------------------------------------------------------------- */
.fce-item-card,
.fce-build-summary {
  background: var(--wp--preset--color--leather-raised);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--tarnish) 30%, transparent);
  border-radius: var(--fce-radius-m);
  padding: 1.25rem;
}
.fce-item-card .fce-stat-block {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   6. Ad slots — dormant, height reserved so activation causes zero CLS
   -------------------------------------------------------------------------- */
.fce-ad-slot {
  min-height: 280px; /* reserve typical med-rect; tune per network at Session 6 */
  display: none;     /* flipped on at Mediavine Journey */
}
body.fce-ads-active .fce-ad-slot { display: block; }

/* --------------------------------------------------------------------------
   7. Homepage: hero + hub cards
   -------------------------------------------------------------------------- */
.fce-hero-search { max-width: 560px; margin-left: auto; margin-right: auto; }
.fce-hero-search .wp-block-search__input {
  background: var(--wp--preset--color--leather-raised);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--tarnish) 45%, transparent);
  color: var(--wp--preset--color--bone);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.125rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--fce-radius-s) 0 0 var(--fce-radius-s);
}
.fce-hero-search .wp-block-search__button {
  background: var(--wp--preset--color--tarnish);
  color: var(--wp--preset--color--leather);
  border: none;
  border-radius: 0 var(--fce-radius-s) var(--fce-radius-s) 0;
}
.fce-hero-popular { color: color-mix(in srgb, var(--wp--preset--color--bone) 60%, transparent); }

.fce-hub-card {
  background: var(--wp--preset--color--leather-raised);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--tarnish) 25%, transparent);
  border-radius: var(--fce-radius-m);
  padding: 1.5rem 1.5rem 1.25rem;
  height: 100%;
  transition: border-color 0.15s ease;
}
.fce-hub-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--tarnish) 60%, transparent); }
.fce-hub-icon svg { width: 42px; height: 42px; display: block; }
.fce-hub-icon { margin-bottom: 0.25rem; }
.fce-hub-card h2 a { text-decoration: none; color: var(--wp--preset--color--bone); }
.fce-hub-card h2 a:hover { color: var(--wp--preset--color--tarnish); }
.fce-hub-card p { color: color-mix(in srgb, var(--wp--preset--color--bone) 70%, transparent); margin-top: 0.375rem; }
.fce-hub-grid { gap: 1.125rem; }
.fce-hub-grid + .fce-hub-grid { margin-top: 1.125rem; }
.fce-patch-ribbon a { color: var(--wp--preset--color--tarnish); }

/* --------------------------------------------------------------------------
   8. Verdict stamp refinements + wrapper
   -------------------------------------------------------------------------- */
.fce-stamp-wrap { margin: 1.75rem 0; }
.fce-verdict-stamp {
  position: relative;
  /* chipped border: layered dashed outlines approximate the worn seal */
  border-style: dashed;
  border-width: 4px;
}
.fce-verdict-stamp::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed currentColor;
  border-radius: 2px;
  opacity: 0.55;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Item card details
   -------------------------------------------------------------------------- */
.fce-item-card .fce-item-name { margin-top: 0; }
.fce-item-card .fce-item-art img {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--tarnish) 35%, transparent);
  border-radius: var(--fce-radius-s);
}
.fce-item-card .fce-item-value {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.875rem;
  color: var(--wp--preset--color--tarnish);
}

/* --------------------------------------------------------------------------
   10. Tables: build summary + tier list (mobile-first, no horizontal scroll)
   -------------------------------------------------------------------------- */
.fce-build-summary-table table,
.fce-tier-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}
.fce-build-summary-table th {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.8125rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--bone) 65%, transparent);
  text-align: left;
  width: 38%;
}
.fce-build-summary-table th, .fce-build-summary-table td,
.fce-tier-table th, .fce-tier-table td {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--tarnish) 20%, transparent);
  padding: 0.625rem 0.875rem;
}
.fce-tier-table thead th {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.8125rem;
  letter-spacing: 2px;
  background: var(--wp--preset--color--leather-raised);
}
.fce-tier {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.375rem;
  text-align: center;
  width: 3rem;
}
.fce-tier-s { color: var(--wp--preset--color--tarnish); }
.fce-tier-a { color: var(--wp--preset--color--verdigris); }
.fce-tier-b { color: color-mix(in srgb, var(--wp--preset--color--bone) 70%, transparent); }
@media (max-width: 480px) {
  .fce-build-summary-table th, .fce-build-summary-table td { display: block; width: 100%; }
  .fce-build-summary-table th { border-bottom: none; padding-bottom: 0.125rem; }
  .fce-build-summary-table td { border-top: none; padding-top: 0.125rem; }
}

/* --------------------------------------------------------------------------
   11. Step walkthrough — numbering is earned here
   -------------------------------------------------------------------------- */
.fce-steps { counter-reset: fce-step; }
.fce-step {
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.5rem;
}
.fce-step::before {
  counter-increment: fce-step;
  content: counter(fce-step);
  position: absolute;
  left: 0; top: 0;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  font-family: var(--wp--preset--font-family--utility);
  font-weight: 700;
  color: var(--wp--preset--color--leather);
  background: var(--wp--preset--color--tarnish);
  border-radius: 50%;
}
.fce-step .fce-step-shot img { border-radius: var(--fce-radius-s); margin-top: 0.625rem; }

/* --------------------------------------------------------------------------
   12. Author box
   -------------------------------------------------------------------------- */
.fce-author-box {
  background: var(--wp--preset--color--leather-raised);
  border-top: 2px solid var(--wp--preset--color--tarnish);
  border-radius: var(--fce-radius-s);
  padding: 1.125rem 1.375rem;
  gap: 1.125rem;
  margin-top: 2.5rem;
}
.fce-author-box .fce-author-avatar img { border-radius: 50%; }
.fce-author-box .fce-author-name { margin-bottom: 0.125rem; }
.fce-author-box p { margin-top: 0; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.fce-faq h3 {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  color: var(--wp--preset--color--tarnish);
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   14. Header brand lockup — mascot + wordmark
   -------------------------------------------------------------------------- */
.fce-brand-lockup { gap: 0.75rem; }
.fce-brand-lockup .wp-block-site-logo img {
  border-radius: var(--fce-radius-s);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--tarnish) 40%, transparent);
}
.fce-site-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.5px;
  max-width: 9ch;
}
.fce-site-title a { text-decoration: none; color: var(--wp--preset--color--bone); }
.fce-site-title a:hover { color: var(--wp--preset--color--tarnish); }
@media (max-width: 600px) {
  .fce-site-title { display: none; } /* mobile: mascot + hamburger only */
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--tarnish);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}