/*
Theme Name: Fictioneer – Little Panda (Bamboo Panda)
Template: fictioneer
Description: Child theme for Little Panda Translations. Warm paper + bamboo green (Bamboo Panda) with panda-black ink, outlines and a pink pop (Soft Panda), tuned for long reading. Light and Night modes.
Version: 1.1.2
Text Domain: fictioneer-littlepanda
*/

/* =========================================================
   1. FONTS + SHAPE (both modes)
   Fraunces for headings, Nunito for everything else.
   ========================================================= */
:root {
  --ff-base: "Nunito", "Open Sans", var(--ff-system);
  --ff-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-note: "Nunito", var(--ff-system);
  --layout-border-radius-large: 14px;
  --layout-border-radius-small: 8px;
  --lpt-pink: #ff8fab;
}

/* =========================================================
   2. LIGHT: warm paper, near-black ink, bamboo green
   Paper is off-white (less glare than pure white) and text is
   dark warm grey for strong contrast.
   ========================================================= */
:root[data-mode=light] {
  --bg-50-free: 44 70% 99%;
  --bg-100-free: 42 62% 96%;
  --bg-200-free: 40 42% 92%;
  --bg-300-free: 40 30% 87%;
  --bg-400-free: 38 26% 82%;
  --bg-500-free: 38 22% 74%;
  --bg-600-free: 100 22% 38%;
  --bg-700-free: 100 26% 30%;
  --bg-800-free: 40 14% 16%;
  --bg-900-free: 40 16% 11%;
  --bg-950-free: 40 20% 7%;
  --primary-400: #5b8a45;
  --primary-500: #3f6b2f;
  --primary-600: #2f5223;

  /* Panda ink outlines + a soft bamboo offset */
  --ink: hsl(40 14% 18%);
  --page-box-shadow: 0 0 0 1.5px hsl(40 14% 18% / 85%), 0 12px 28px -14px rgb(60 50 20 / 30%);
  --card-box-shadow: 0 0 0 1.5px hsl(40 14% 18% / 85%), 3px 3px 0 hsl(100 26% 40% / 45%);

  /* Panda-black navigation bar (always visible, not only after scrolling) */
  --navigation-background-start-opacity: 1;
  --navigation-background: var(--bg-900);
  --navigation-submenu-background: var(--bg-800);
  --navigation-item-background-hover: hsl(40 12% 22%);
  --navigation-subitem-background-hover: hsl(40 12% 26%);
  --navigation-color: #e9e3d0;
  --navigation-color-hover: #fff;
  --navigation-subitem-divider: 1px solid #ffffff1f;

  /* Ink buttons, green on hover */
  --button-primary-background: hsl(40 16% 13%);
  --button-primary-background-hover: var(--bg-700);
  --button-primary-color: #fbf6ea;
  --button-primary-color-hover: #fff;
}

:root[data-mode=light],
:root[data-mode=light] .chapter-formatting {
  --fg-100: hsl(40 18% 8%);
  --fg-200: hsl(40 16% 11%);
  --fg-300: hsl(40 14% 15%);
  --fg-400: hsl(40 12% 19%);
  --fg-500: hsl(40 10% 23%);
  --fg-600: hsl(40 8% 32%);
  --fg-700: hsl(40 7% 40%);
  --fg-800: hsl(40 6% 46%);
  --fg-900: hsl(40 6% 54%);
  --fg-950: hsl(40 6% 62%);
  --fg-tinted: hsl(40 12% 20%);
  --fg-inverted: hsl(44 70% 99%);
}

/* =========================================================
   3. NIGHT: warm near-black (not pure black), soft off-white text
   ========================================================= */
:root[data-mode=dark] {
  --bg-50-free: 44 24% 82%;
  --bg-100-free: 44 18% 70%;
  --bg-200-free: 40 12% 54%;
  --bg-300-free: 40 8% 36%;
  --bg-400-free: 40 9% 28%;
  --bg-500-free: 40 9% 23%;
  --bg-600-free: 40 10% 18%;
  --bg-700-free: 40 11% 14%;
  --bg-800-free: 40 12% 11%;
  --bg-900-free: 40 14% 8%;
  --bg-950-free: 40 18% 5%;
  --primary-400: #a8d28a;
  --primary-500: #8fbf6b;
  --primary-600: #77a857;
  --page-box-shadow: 0 0 0 1px hsl(44 14% 78% / 12%);
  --card-box-shadow: 0 0 0 1px hsl(44 14% 78% / 14%);
}

:root[data-mode=dark],
:root[data-mode=dark] .chapter-formatting {
  --fg-100: hsl(44 30% 94%);
  --fg-200: hsl(44 24% 90%);
  --fg-300: hsl(44 20% 86%);
  --fg-400: hsl(44 16% 82%);
  --fg-500: hsl(44 14% 78%);
  --fg-600: hsl(44 10% 68%);
  --fg-700: hsl(44 8% 60%);
  --fg-800: hsl(44 7% 54%);
  --fg-900: hsl(44 6% 48%);
  --fg-950: hsl(44 5% 42%);
  --fg-tinted: hsl(44 20% 78%);
  --fg-inverted: hsl(40 14% 8%);
}

/* Nunito is not loaded in weight 300, so use normal weights in dark mode too */
:root[data-mode=dark]:not([data-font-weight=thinner]) {
  --font-weight-normal: 400;
  --font-weight-strong: 700;
  --font-weight-semi-strong: 600;
  --font-weight-medium: 500;
  --font-weight-heading: 700;
  --font-weight-post-meta: 400;
  --font-weight-read-ribbon: 700;
  --font-letter-spacing-base: 0em;
}

/* =========================================================
   4. PANDA DETAILS (both modes) + READING COMFORT
   ========================================================= */
:root {
  --alert-highlight-color: var(--lpt-pink);
  --new-alert-icon-text-color: #2b1018;
  --bookmark-line: var(--lpt-pink);
}
::selection { background: rgb(255 143 171 / 40%); }

.tag-pill:not(._inline) {
  border-radius: 999px;
  padding: .3rem .65rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card { transition: transform .15s ease, box-shadow .15s ease; }
  .card:hover { transform: translate(-1px, -1px); }
  :root[data-mode=light] .card:hover {
    --card-box-shadow: 0 0 0 1.5px hsl(40 14% 18% / 90%), 5px 5px 0 hsl(100 26% 40% / 55%);
  }
  :root[data-mode=dark] .card:hover {
    --card-box-shadow: 0 0 0 1px hsl(44 14% 78% / 30%);
  }
}

/* Chapters: comfortable line length and line spacing.
   Readers can still change font and size in the reader settings. */
.chapter-formatting {
  max-width: min(100%, 46rem);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* No header image: remove the blank gap instead of keeping the banner height */
:root:has(.header-background._no-image) {
  --page-inset-top: 0px;
  --header-height: auto;
}
.header:has(.header-background._no-image) {
  height: auto;
  contain: style;
}
.header:has(.header-background._no-image) .header-background { display: none; }
.header:has(.header-background._no-image) .header__title {
  position: static;
  transform: none;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
body.header-style-none .header { display: none; }


/* Header style "None": no inset either */
:root:has(body.header-style-none) { --page-inset-top: 0px; }
/* =========================================================
   5. YOUR EXISTING CSS SNIPPETS (moved from Customizer)
   ========================================================= */

/* Allow novel card titles to wrap fully */
.card__title,
.card__title a {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Consistent featured image sizes for story and chapter cards */
.card__image,
.card__image a,
.card__image img,
.card .story-card__image,
.card .chapter-card__image {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
  flex-shrink: 0 !important;
}

.card__image img,
.card .story-card__image img,
.card .chapter-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.chapter-content,
.chapter-content p,
.chapter-content *,
#chapter-content,
#chapter-content p,
#chapter-content * {
  word-break: normal !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
}

/* Chapter index titles may wrap (numbering is now done in functions.php) */
.chapter-index li a .truncate._1-1,
.chapter-group__list-item-link.truncate._1-1 {
  display: block;
  white-space: normal;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  word-break: normal;
}

/* Login / Logout menu links */
.menu-login-link { display: none; }
.menu-logout-link { display: none; }
body.logged-in .menu-logout-link { display: list-item; }
body:not(.logged-in) .menu-login-link { display: list-item; }

/* =========================================================
   6. PLUGIN MATCHING
   Fictioneer Content Calendar, Announcements and Membership Cards
   read the theme variables above, so they follow the palette.
   The two plugins below ship their own pink palette, so remap it.
   "html:root" raises specificity so the plugins' inline <style> can't win.
   ========================================================= */

/* ----- Content Calendar (light mode) -----
   The plugin reads --card-bg and --layout-border-color, which Fictioneer
   does not define, so in light mode it fell back to a dark box with dark text. */
:root[data-mode=light] {
  --card-bg: var(--bg-50);
  --layout-border-color: hsl(40 14% 18% / 35%);
}
:root[data-mode=light] .fcc-dashboard {
  box-shadow: 0 0 0 1.5px hsl(40 14% 18% / 85%), 3px 3px 0 hsl(100 26% 40% / 45%);
}

/* ----- Membership Cards: follow the theme in both modes ----- */
html:root .fmc-card,
html:root[data-mode=dark] .fmc-card {
  --fmc-accent: var(--primary-500);
  --fmc-bg: var(--bg-50);
  --fmc-bg-2: var(--bg-100);
  --fmc-border: var(--bg-300);
  --fmc-divider: var(--bg-300);
  --fmc-text: var(--fg-200);
  --fmc-muted: var(--fg-600);
  --fmc-subtle: var(--fg-800);
  font-family: var(--ff-base);
  border-radius: var(--layout-border-radius-large);
}
html:root[data-mode=dark] .fmc-card {
  --fmc-bg: var(--bg-600);
  --fmc-bg-2: var(--bg-700);
  --fmc-border: var(--bg-400);
  --fmc-divider: var(--bg-400);
}

/* ----- Suggestion Box (GL): rose -> bamboo ----- */
html:root,
html:root[data-mode=light] {
  --cream: #fbf6ea;
  --white: #fffdf6;
  --warm: #efe6cf;
  --rose: #6f8f5a;
  --rose-f: rgba(111, 143, 90, .14);
  --rose-g: rgba(111, 143, 90, .30);
  --dusty: #6f8f5a;
  --dusty-text: #4f6e3c;
  --text: #3b3a33;
  --muted: #6b6856;
  --accent: #e9c46a;
  --border: #e2d8bf;
  --btn-a: #7a9c64;
  --btn-b: #5f7f4b;
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html:root.dark,
html:root[data-mode=dark] {
  --cream: #100f0b;
  --white: #1c1b14;
  --warm: #24231a;
  --rose: #9cc47c;
  --rose-f: rgba(156, 196, 124, .14);
  --rose-g: rgba(156, 196, 124, .30);
  --dusty: #9cc47c;
  --dusty-text: #b7d99a;
  --text: #ece6d4;
  --muted: #a8a58f;
  --accent: #e9c46a;
  --border: rgba(255, 255, 255, .09);
  --btn-a: #6f8f5a;
  --btn-b: #58764a;
}

/* ----- Novel Ranking Poll (NRP): rose -> bamboo ----- */
html:root,
html:root.light,
html:root[data-mode=light] {
  --rose2: #4f6e3c;
  --rose-r: rgba(111, 143, 90, .55);
  --s0: #fbf6ea;
  --s1: #fffdf6;
  --s2: #f6efdc;
  --s3: #efe6cf;
  --s4: #e2d8bf;
  --t1: #3b3a33;
  --t2: #5f5c4b;
  --t3: #7d7a68;
  --sh1: 0 1px 4px rgba(80, 60, 20, .06);
  --sh2: 0 4px 18px rgba(80, 60, 20, .09);
  --sh3: 0 12px 40px rgba(80, 60, 20, .13);
  --serif: "Fraunces", Georgia, serif;
}
html:root[data-mode=dark] {
  --rose2: #86b068;
  --rose-r: rgba(156, 196, 124, .55);
  --s0: #100f0b;
  --s1: #16150f;
  --s2: #1c1b14;
  --s3: #24231a;
  --s4: #34322a;
  --t1: #ece6d4;
  --t2: #b3b09a;
  --t3: #8f8c78;
  --sh1: 0 1px 4px rgba(0, 0, 0, .4);
  --sh2: 0 4px 18px rgba(0, 0, 0, .5);
  --sh3: 0 12px 40px rgba(0, 0, 0, .65);
}

/* ----- Announcements: soft paper bars with a colored edge -----
   Replaces the heavy dark blue/brown bars. Type colors:
   info = sage, success = green, warning = gold, danger = panda pink.
   "html:root" outranks the plugin's own inline styles. */
html:root .fca-bar {
  background: var(--fca-bg);
  color: var(--fca-fg);
  border-bottom: 1px solid var(--fca-line);
  box-shadow: inset 5px 0 0 var(--fca-accent);
  font-family: var(--ff-base);
}
html:root .fca-bar-inner { padding: 8px 20px 8px 24px; }
html:root .fca-bar-message { font-size: .85rem; }
html:root .fca-bar-btn {
  border-radius: 999px;
  padding: 3px 12px;
  opacity: 1;
}
html:root .fca-bar-btn:hover {
  background: var(--fca-fg);
  color: var(--fca-bg);
}

html:root .fca-bar--info    { --fca-bg: #eef2e3; --fca-fg: hsl(40 14% 18%); --fca-accent: #6f8f5a; --fca-line: rgba(111, 143, 90, .30); }
html:root .fca-bar--success { --fca-bg: #e4f1dc; --fca-fg: hsl(40 14% 18%); --fca-accent: #4f9a3f; --fca-line: rgba(79, 154, 63, .30); }
html:root .fca-bar--warning { --fca-bg: #fbf0d2; --fca-fg: hsl(40 14% 18%); --fca-accent: #d9a21f; --fca-line: rgba(217, 162, 31, .35); }
html:root .fca-bar--danger  { --fca-bg: #fde6ec; --fca-fg: hsl(40 14% 18%); --fca-accent: #e0607e; --fca-line: rgba(224, 96, 126, .35); }

html:root[data-mode=dark] .fca-bar--info    { --fca-bg: #1c2117; --fca-fg: #e6e1cf; --fca-accent: #8fbf6b; --fca-line: rgba(143, 191, 107, .25); }
html:root[data-mode=dark] .fca-bar--success { --fca-bg: #1a2515; --fca-fg: #e6e1cf; --fca-accent: #6fbf5a; --fca-line: rgba(111, 191, 90, .25); }
html:root[data-mode=dark] .fca-bar--warning { --fca-bg: #2a2512; --fca-fg: #e6e1cf; --fca-accent: #e9c46a; --fca-line: rgba(233, 196, 106, .25); }
html:root[data-mode=dark] .fca-bar--danger  { --fca-bg: #2d1a20; --fca-fg: #e6e1cf; --fca-accent: #ff8fab; --fca-line: rgba(255, 143, 171, .25); }

/* A bamboo line on top of the black menu, so it reads as its own band
   under the announcements */
:root[data-mode=light] .main-navigation__background {
  box-shadow: inset 0 3px 0 var(--bg-600);
}

/* =========================================================
   7. ADS (Mediavine Journey)
   Nothing here on purpose: the ad script injects and sizes its own
   boxes. Do not add overflow:hidden or fixed heights to the content
   or sidebar containers.
   ========================================================= */