/*
Theme Name: Fictioneer ESV
Description: Child theme van Fictioneer voor erotische-sexverhalen.nl — Nederlandse vertaling, eigen permalinks (/verhaal/ en /serie/), gerelateerde verhalen en SEO-aanpassingen.
Author: erotische-sexverhalen.nl
Template: fictioneer
Version: 1.1.0
Text Domain: fictioneer-esv
*/

/* =============================================================================
   1. KLEUREN & LAYOUT
   html:root wint van de :root in customize.css (die ná dit bestand laadt).
   De grijzen krijgen via --hue-offset een warme wijn/plum-ondertoon en het
   gele accent wordt vervangen door een rosé-accent.
============================================================================= */

html:root {
  --site-width: 1040px;

  /* Warme tint over alle grijzen (222deg blauwgrijs -> ~340deg wijnrood-grijs) */
  --hue-offset: 118deg;
  --saturation-offset: 0.12;

  /* Rosé accent i.p.v. geel */
  --primary-400: #ff92ab;
  --primary-500: #f77897;
  --primary-600: #dd5c80;

  /* Compactere header: de standaard reserveert 380px lege ruimte */
  --header-height: calc(clamp(150px, 9vw + 100px, 230px) - var(--page-inset-top, 0px));
  --site-title-font-size: clamp(30px, 3vw + 16px, 46px);

  --layout-border-radius-large: 12px;
  --layout-border-radius-small: 8px;
}

html:root[data-mode=light] {
  /* In lichte modus donkerder rosé voor voldoende contrast */
  --primary-400: #e8688d;
  --primary-500: #cc4570;
  --primary-600: #a83359;
}

::selection {
  background-color: hsl(345deg 70% 60% / 35%);
}

/* =============================================================================
   2. HEADER — gloed achter de titel, titel met verloop
============================================================================= */

.header-background._no-image .header-background__wrapper {
  background:
    radial-gradient(ellipse 75% 130% at 50% -25%, hsl(345deg 60% 55% / 16%), transparent 65%),
    linear-gradient(180deg, hsl(var(--bg-950-free) / 35%), transparent 70%);
}

.header__title-heading a {
  background: linear-gradient(100deg, hsl(348deg 100% 96%) 10%, #f7a3b8 55%, var(--primary-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: -0.01em;
}

:root[data-mode=light] .header__title-heading a {
  background-image: linear-gradient(100deg, #59182e 10%, #96305a 60%, #cc4570 100%);
}

:root[data-mode=light] .header-background._no-image .header-background__wrapper {
  background: radial-gradient(ellipse 75% 130% at 50% -25%, hsl(345deg 60% 55% / 12%), transparent 65%);
}

.header__title-tagline {
  color: var(--fg-600);
}

/* =============================================================================
   3. KAARTEN — zichtbaar oppervlak, rand en hover-lift
============================================================================= */

.card {
  border: 1px solid hsl(var(--bg-100-free) / 8%);
  border-radius: var(--layout-border-radius-large);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: hsl(345deg 70% 65% / 35%);
  box-shadow: 0 12px 28px -14px hsl(var(--bg-950-free) / 90%);
}

.card__title a:hover {
  color: var(--primary-400);
}

/* =============================================================================
   4. KOPPEN — klein rosé onderstreepje geeft secties leven
============================================================================= */

.singular__content h2,
.archive__heading,
.chapter__related h2,
.fictioneer-comments__title {
  padding-bottom: 0.4rem;
  background: linear-gradient(90deg, var(--primary-500), hsl(345deg 70% 60% / 0%)) left bottom / 56px 3px no-repeat;
}

/* =============================================================================
   5. CATEGORIE-WOLK OP ARCHIEFPAGINA'S — chips i.p.v. losse tekstlinks
   (!important: WordPress zet per link een inline font-size op de cloud)
============================================================================= */

.archive__tax-cloud .tag-cloud-link {
  display: inline-block;
  height: auto;
  font-size: 13px !important;
  line-height: 1;
  padding: 0.5em 0.85em;
  margin: 0.15rem 0.08rem;
  background: hsl(var(--bg-100-free) / 5%);
  border: 1px solid hsl(var(--bg-100-free) / 10%);
  border-radius: 999px;
  color: var(--fg-500);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.archive__tax-cloud .tag-cloud-link:hover {
  color: var(--fg-200);
  border-color: hsl(345deg 70% 65% / 45%);
  background: hsl(345deg 70% 60% / 10%);
}

.archive__tax-cloud .tag-link-count {
  opacity: 0.55;
  font-size: 0.85em;
}

/* =============================================================================
   6. VERHAALPAGINA — leeservaring
============================================================================= */

/* Initiaal op de eerste alinea */
.chapter-formatting > p:first-of-type::first-letter {
  float: left;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  color: var(--primary-500);
}

.chapter__author {
  color: var(--fg-700);
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.08em;
}

/* Gerelateerde verhalen als kaartjes-grid */
.esv-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  list-style: none;
  padding: 0;
}

.esv-related__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 1rem;
  background: hsl(var(--bg-100-free) / 4%);
  border: 1px solid hsl(var(--bg-100-free) / 9%);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.esv-related__item:hover {
  border-color: hsl(345deg 70% 65% / 40%);
  background: hsl(345deg 70% 60% / 6%);
  transform: translateY(-1px);
}

.esv-related__title {
  font-weight: 600;
  color: var(--fg-300);
}

.esv-related__item:hover .esv-related__title {
  color: var(--primary-400);
}

.esv-related__meta {
  font-size: 12px;
  color: var(--fg-800);
}

/* =============================================================================
   7. SERIEPAGINA — hoofdstukkenlijst met hover
============================================================================= */

.chapter-group__list-item {
  border-radius: var(--layout-border-radius-small);
  transition: background 0.15s ease;
}

.chapter-group__list-item:hover {
  background: hsl(345deg 70% 60% / 7%);
}

/* =============================================================================
   8. FOOTER & DIVERSEN
============================================================================= */

.footer {
  border-top: 1px solid hsl(var(--bg-100-free) / 8%);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card,
  .esv-related__item,
  .archive__tax-cloud .tag-cloud-link,
  .chapter-group__list-item {
    transition: none;
  }

  .card:hover,
  .esv-related__item:hover {
    transform: none;
  }
}

/* Verberg de "fandom/character"-taxonomieën die wij niet gebruiken in kaarten */
.card__tag-list .tag-pill._fandom,
.card__tag-list .tag-pill._character {
  display: none;
}

/* Wij gebruiken categorieën i.p.v. genres/fandoms: placeholder verbergen */
.card__no-taxonomies {
  display: none;
}