/**
 * Zelda Fan Content – design tokens (v2.5.0)
 *
 * The plugin adapts to the active theme instead of shipping its own palette.
 * Every token resolves, in order, to:
 *   1. the theme's theme.json preset (--wp--preset--color--{slug},
 *      --wp--preset--font-family--{slug}) – the stable, public theme API;
 *   2. a neutral fallback so the plugin still looks sane on any theme.
 *
 * Slugs expected in theme.json: green, green-raised, paper, ink, muted, gold,
 * gold-light (colors); heading, body (font families). Change the theme's
 * palette and every plugin surface follows – no plugin edits required.
 *
 * The legacy --main-* / --text-* / --zfc-game-* names are kept because the
 * plugin's stylesheets reference them; they are aliases of the tokens above.
 */
:root {
  /* ---- Theme-derived primitives ------------------------------------- */
  --zfc-c-bg-dark: var(--wp--preset--color--green, #1f2a24);
  --zfc-c-bg-dark-2: var(--wp--preset--color--green-raised, #2e3d34);
  --zfc-c-paper: var(--wp--preset--color--paper, #f7f3ea);
  --zfc-c-ink: var(--wp--preset--color--ink, #1f2320);
  --zfc-c-muted: var(--wp--preset--color--muted, #5e5b52);
  --zfc-c-accent: var(--wp--preset--color--gold, #9b7b3a);
  --zfc-c-accent-light: var(--wp--preset--color--gold-light, #e6cf8a);
  --zfc-c-danger: #8b3a2f;

  --zfc-font-body: var(--wp--preset--font-family--body, Georgia, serif);
  --zfc-font-heading: var(--wp--preset--font-family--heading, Georgia, serif);

  /* Derived surfaces (relative-color so they track the palette) */
  --zfc-c-paper-raised: color-mix(in srgb, var(--zfc-c-paper) 70%, white);
  --zfc-c-paper-well: color-mix(in srgb, var(--zfc-c-paper) 80%, var(--zfc-c-accent) 20%);
  --zfc-c-mat: color-mix(in srgb, var(--zfc-c-paper) 75%, var(--zfc-c-accent) 25%);
  --zfc-c-rule: color-mix(in srgb, var(--zfc-c-accent) 40%, transparent);
  --zfc-c-frame: color-mix(in srgb, var(--zfc-c-ink) 55%, var(--zfc-c-accent) 45%);
  --zfc-c-on-dark: color-mix(in srgb, var(--zfc-c-paper) 85%, white);
  --zfc-c-shadow: color-mix(in srgb, var(--zfc-c-ink) 14%, transparent);
  --zfc-c-accent-tint: color-mix(in srgb, var(--zfc-c-accent) 12%, transparent);

  /* ---- Legacy aliases used throughout the plugin CSS ------------------ */
  --main-bg: var(--zfc-c-bg-dark);
  --main-dark: var(--zfc-c-bg-dark);
  --menu-bg: var(--zfc-c-bg-dark);
  --pattern-header-bg: var(--zfc-c-bg-dark);
  --zfc-game-bg: var(--zfc-c-bg-dark);
  --zfc-game-dark: var(--zfc-c-bg-dark);

  --main-light: var(--zfc-c-paper-raised);
  --subpage-bg: var(--zfc-c-paper);
  --pattern-bg: var(--zfc-c-paper);
  --zfc-game-light: var(--zfc-c-paper-well);
  --zfc-game-card-bg: var(--zfc-c-paper-raised);

  --main-gold: var(--zfc-c-accent);
  --highlight-color: var(--zfc-c-accent);
  --zfc-game-gold: var(--zfc-c-accent);
  --glow-color: color-mix(in srgb, var(--zfc-c-accent-light) 75%, transparent);

  --main-accent: var(--zfc-c-accent-light);
  --menu-text: var(--zfc-c-accent-light);
  --main-green: var(--zfc-c-bg-dark-2);
  --zfc-game-green: var(--zfc-c-bg-dark-2);
  --zfc-game-blue: var(--zfc-c-bg-dark-2);
  --zfc-game-purple: #5b4a6b;

  --subpage-highlight: var(--zfc-c-danger);
  --pattern-accent: var(--zfc-c-danger);
  --zfc-game-red: var(--zfc-c-danger);
  --text-link-hover: color-mix(in srgb, var(--zfc-c-accent) 70%, var(--zfc-c-ink));

  --text-primary: var(--zfc-c-ink);
  --text-secondary: color-mix(in srgb, var(--zfc-c-ink) 80%, var(--zfc-c-paper));
  --subpage-text: var(--zfc-c-ink);
  --pattern-text: var(--zfc-c-ink);
  --zfc-game-text: var(--zfc-c-ink);
  --text-muted: var(--zfc-c-muted);
  --text-link: var(--zfc-c-bg-dark-2);
  --text-light: var(--zfc-c-on-dark);
  --pattern-header-text: var(--zfc-c-on-dark);
  --main-brown: var(--zfc-c-ink);
  --text-color: var(--zfc-c-ink);

  --light-brown: var(--zfc-c-frame);
  --zfc-game-border: var(--zfc-c-rule);
  --main-shadow: var(--zfc-c-shadow);
  --border-radius: 0;
  --border-radius-lg: 0;

  --font-family-primary: var(--zfc-font-body);
  --font-family-accent: var(--zfc-font-heading);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;
  --line-height-normal: 1.55;
  --line-height-tight: 1.25;
  --line-height-loose: 1.8;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  --transition-speed: 0.2s;
  --transition-easing: ease;

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* Browsers without color-mix(): flat fallbacks in the same hue family. */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --zfc-c-paper-raised: #fff8e7;
    --zfc-c-paper-well: #e9ddb6;
    --zfc-c-mat: #e5d4a7;
    --zfc-c-rule: #bba16b66;
    --zfc-c-frame: #6b613e;
    --zfc-c-on-dark: #fff1cb;
    --zfc-c-shadow: #37291424;
    --zfc-c-accent-tint: #bc9b3f1e;
    --glow-color: #edcf81bf;
    --text-link-hover: #775c15;
    --text-secondary: #3f3a2a;
  }
}

/* =========================================================================
   Page sheet – the theme decides the wrapper classes via the
   `zfc_page_wrapper_classes` filter; these rules only touch layout.
   ======================================================================= */
.zfc-page-sheet {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
}
.zfc-page-sheet > main,
.zfc-page-sheet > .container,
.zfc-page-sheet > div {
  max-width: none;
}
.zfc-page-sheet .container {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}
/* Legacy Bootstrap-style grid used by the dashboard templates */
.zfc-page-sheet .row {
  display: block;
  margin: 0;
}
.zfc-page-sheet [class^="col-"],
.zfc-page-sheet [class*=" col-"] {
  width: 100%;
  padding: 0;
}
/* Themes cap children of .entry-content to a reading width; dashboards,
   forms and galleries are application UI and need the full sheet. */
.zfc-page-sheet .entry-content,
.zfc-page-sheet .entry-content > *,
.zfc-page-sheet .zfc-dashboard-content,
.zfc-page-sheet .zfc-dashboard-content > * {
  max-width: none;
}
.zfc-page-sheet article.game-subpage {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* =========================================================================
   Shared component treatments – expressed only in tokens
   ======================================================================= */
:where(.zfc-page-sheet) :where(h1, h2, h3, h4):where(:not(.zfc-hero-title)) {
  font-family: var(--font-family-accent);
  font-weight: var(--font-weight-bold);
  color: var(--main-bg);
  line-height: var(--line-height-tight);
}

/* Hero: dark band framed in accent */
.zfc-page-sheet .zfc-hero-banner {
  background-color: var(--main-bg);
  border: 2px solid var(--main-gold);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main-accent) 35%, transparent);
}
.zfc-page-sheet .zfc-hero-overlay {
  background: linear-gradient(135deg, color-mix(in srgb, var(--main-bg) 88%, transparent), color-mix(in srgb, var(--main-bg) 72%, transparent));
}
.zfc-page-sheet .zfc-hero-title {
  color: var(--text-light);
  font-family: var(--font-family-accent);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  text-shadow: none;
}
.zfc-page-sheet .zfc-hero-subtitle {
  color: var(--main-accent);
}

/* Cards */
.zfc-page-sheet :is(.zfc-artwork-card, .zfc-game-card, .zfc-profile-card, .zfc-fiction-card, .zfc-comic-card, .zfc-story-card, .zfc-card) {
  background: var(--main-light);
  border: 1px solid var(--zfc-game-border);
  box-shadow: 0 6px 14px var(--main-shadow);
}
.zfc-page-sheet :is(.zfc-artwork-card, .zfc-game-card, .zfc-profile-card, .zfc-fiction-card, .zfc-comic-card, .zfc-story-card, .zfc-card):hover {
  border-color: var(--main-gold);
  box-shadow: 0 10px 20px var(--main-shadow);
}

/* Buttons */
.zfc-page-sheet :is(.zfc-cta-button, .zfc-cta-btn, .zfc-view-btn, .zfc-submit-btn, .zfc-btn-primary, button.zfc-primary) {
  background: var(--main-bg) !important;
  color: var(--text-light) !important;
  border: 2px solid var(--main-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-family-primary);
  text-decoration: none;
}
.zfc-page-sheet :is(.zfc-cta-button, .zfc-cta-btn, .zfc-view-btn, .zfc-submit-btn, .zfc-btn-primary, button.zfc-primary):hover {
  background: var(--main-green) !important;
  color: var(--main-accent) !important;
  transform: none;
}
.zfc-page-sheet :is(.zfc-sort-btn, .zfc-genre-btn, .zfc-filter-btn, .zfc-tab-btn, .zfc-btn-secondary) {
  background: var(--main-light);
  color: var(--text-primary);
  border: 1px solid var(--zfc-game-border);
  border-radius: 0;
  font-family: var(--font-family-primary);
}
.zfc-page-sheet :is(.zfc-sort-btn, .zfc-genre-btn, .zfc-filter-btn, .zfc-tab-btn, .zfc-btn-secondary):hover {
  border-color: var(--main-gold);
  background: var(--zfc-c-accent-tint);
  color: var(--text-primary);
}
.zfc-page-sheet :is(.zfc-sort-btn, .zfc-genre-btn, .zfc-filter-btn, .zfc-tab-btn):is(.active, .is-active, [aria-pressed="true"]) {
  background: var(--main-bg);
  color: var(--text-light);
  border-color: var(--main-gold);
}

/* Badges */
.zfc-page-sheet :is(.zfc-theme-badge, .zfc-type-badge, .zfc-platform-badge, .zfc-fan-type, .zfc-genre-tag, .zfc-badge) {
  border-radius: 0;
  font-family: var(--font-family-primary);
  font-size: 0.7rem;
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Section headers / filter titles */
:where(.zfc-page-sheet) :where(.zfc-section-header, .zfc-filter-title) {
  border-bottom: 1px solid var(--zfc-game-border);
  padding-bottom: 10px;
}

/* Forms */
.zfc-page-sheet :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], select, textarea) {
  background: var(--main-light);
  border: 1px solid var(--main-gold);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-family-primary);
}
.zfc-page-sheet :is(input, select, textarea):focus {
  outline: 2px solid var(--main-accent);
  outline-offset: 1px;
}

/* Framed media */
.zfc-page-sheet :is(.zfc-card-image, .zfc-card-thumbnail, .zfc-artwork-image, .zfc-comic-cover, .zfc-game-cover) img {
  border-bottom: 1px solid var(--light-brown);
}

/* Pagination */
.zfc-page-sheet .zfc-pagination :is(a, span) {
  border: 1px solid var(--zfc-game-border);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
}
.zfc-page-sheet .zfc-pagination :is(.current, [aria-current]) {
  background: var(--main-bg);
  color: var(--text-light);
  border-color: var(--main-gold);
}

:where(.zfc-page-sheet) :where(p a:not([class])) {
  text-decoration: underline;
  text-decoration-color: var(--main-gold);
}

/* Dark containers: never let generic heading/text colours turn dark-on-dark. */
.zfc-page-sheet :is(.download-box, .rom-hack-box, .zfc-hero-banner, .zfc-dark-box) :is(h1, h2, h3, h4, h5, p, li, span, .label, .value) {
  color: inherit;
}
.zfc-page-sheet :is(.download-box, .rom-hack-box, .zfc-hero-banner, .zfc-dark-box) {
  color: var(--text-light);
}
.zfc-page-sheet .zfc-hero-banner .zfc-hero-title {
  color: var(--text-light);
}
.zfc-page-sheet .zfc-hero-banner .zfc-hero-subtitle {
  color: var(--main-accent);
}
.zfc-page-sheet :is(.download-box, .rom-hack-box) h3 {
  color: var(--main-accent);
  border-bottom-color: var(--main-gold);
}
/* Capped text blocks (max-width in px) inside a sheet stay centred – several
   legacy rules set a max-width then zero the margins, pinning them left. */
.zfc-page-sheet :is(.zfc-archive-intro, .zfc-about-section, .zfc-archive-about, .zfc-archive-cta, .zfc-themes-intro, .zfc-hero-overlay) > :is(p, h2, h3, ul) {
  margin-left: auto;
  margin-right: auto;
}
.zfc-page-sheet :is(.zfc-archive-intro, .zfc-about-section, .zfc-archive-about, .zfc-archive-cta) {
  text-align: center;
}