/* =============================================================================
   CHAPTERWRIGHT — theme integration overrides
   Enqueued by alok_jain_enqueue_books_overrides() in functions.php, after
   the plugin's own assets/css/chapterwright.css, and only on Chapterwright
   pages (book/chapter pages, the /books/ archive, or pages using the
   [hsrtech_books] shortcode).

   The plugin ships sensible, theme-agnostic defaults so it looks reasonable
   on any theme out of the box: its own --hsrtech-* color variables, its own
   card radius/shadow choices, its own button styling. This file does NOT
   change the plugin's structural CSS (layout, type scale, spacing) — it
   only re-points colors, radius, shadow, and buttons at this theme's own
   design tokens, so a book page reads as part of this site rather than a
   themed reading app bolted on top of it.

   Renamed throughout (2.5.x's plugin rename to Chapterwright/hsrtech_ from
   Make a Book/mab_) after being found still entirely on the old names —
   functions.php's enqueue function guarded on a plugin function
   (mab_get_settings()) that no longer existed at all, so it returned
   immediately and this stylesheet never actually loaded on any page,
   regardless of what's written below. Every selector and variable here is
   equally load-bearing; fixing the enqueue guard alone would have made all
   of this active again exactly as broken as it now was invisible.
   ========================================================================== */

/* -----------------------------------------------------------------------
   Color — remap the plugin's --hsrtech-* variables to this theme's own
   --wp--preset--color--* variables (defined in theme.json, overridden for
   light mode in bento.css). Because those are the SAME variables the site
   header's toggle already flips via html[data-theme], the reader's colors
   now track that one toggle automatically — no separate color system.
   ----------------------------------------------------------------------- */
.hsrtech-page {
	--hsrtech-ink: var(--wp--preset--color--foreground, #ffffff);
	--hsrtech-paper: var(--wp--preset--color--surface, #121214);
	--hsrtech-surface: var(--wp--preset--color--background, #000000);
	--hsrtech-muted: rgba(255, 255, 255, 0.6);
	--hsrtech-line: rgba(255, 255, 255, 0.14);
	--hsrtech-code: #0b0b0c;
	--hsrtech-code-ink: var(--wp--preset--color--foreground, #ffffff);
	--hsrtech-accent: var(--wp--preset--color--accent, #53a187);
}

html[data-theme="light"] .hsrtech-page {
	/* --hsrtech-ink/--hsrtech-paper/--hsrtech-surface must be pinned to fixed
	   light values here too, not left tracking var(--wp--preset--color--*)
	   the way the base .hsrtech-page rule above does. chapterwright.css's own
	   @media (prefers-color-scheme: dark) fallback — meant for sites with no
	   reader toggle at all, so the reader still gets to follow their OS's own
	   preference — sets these same custom properties on :root with HIGHER
	   specificity (0,2,0: :root:not([data-hsrtech-mode="light"])) than this
	   theme's un-scoped .hsrtech-page rule (0,1,0). On a visitor whose OS
	   prefers dark mode, that plugin rule wins regardless of source order,
	   even while this site is explicitly in light mode (html[data-theme=
	   "light"]) — the page background correctly went white (--hsrtech-surface
	   isn't even painted, see the base rule's comment), but heading/body ink
	   stayed pinned to the plugin's dark cream (#f5f2ea) since nothing here
	   outranked that media query for --hsrtech-ink specifically. Scoping the
	   override to html[data-theme="light"] .hsrtech-page (also 0,2,0) lets
	   this theme's rule win the tie via source order (this file loads after
	   chapterwright.css) regardless of the visitor's OS preference. Values
	   match the [data-hsrtech-mode="light"] block further down. */
	--hsrtech-ink: #16181b;
	--hsrtech-paper: #f2f2f3;
	--hsrtech-surface: #ffffff;
	--hsrtech-muted: rgba(22, 24, 27, 0.6);
	--hsrtech-line: rgba(22, 24, 27, 0.14);
	--hsrtech-code: #16181b;
	/* --hsrtech-code-ink must be pinned to a fixed light value here, same as
	   the data-hsrtech-mode="light"/"dark" blocks further down already do —
	   it can't be left tracking --wp--preset--color--foreground the way the
	   base .hsrtech-page rule above does, because that variable is dark in
	   light theme (correct for body text on a light page) but code's own
	   background (--hsrtech-code, just above) stays dark in every theme
	   state. Without this line, code text/icons silently inherited
	   dark-on-dark and vanished — the exact "code block goes blank in light
	   mode" bug. */
	--hsrtech-code-ink: #ffffff;
}

/* If a site owner turns on the plugin's OWN reader toggle (Chapterwright ->
   Settings -> "Show the light/dark reading mode button" — off by default)
   alongside this theme's header toggle, keep its output tied to the same
   palette instead of the plugin's own default colors — literal values here
   (not var() indirection) since these need to apply regardless of the
   theme's current html[data-theme] state. Values mirror bento.css's own
   light/dark split for --wp--preset--color-- so both toggles always agree. */
[data-hsrtech-mode="dark"] .hsrtech-page {
	--hsrtech-ink: #ffffff;
	--hsrtech-paper: #121214;
	--hsrtech-surface: #000000;
	--hsrtech-muted: rgba(255, 255, 255, 0.6);
	--hsrtech-line: rgba(255, 255, 255, 0.14);
	--hsrtech-code: #0b0b0c;
	--hsrtech-code-ink: #ffffff;
}

[data-hsrtech-mode="light"] .hsrtech-page {
	--hsrtech-ink: #16181b;
	--hsrtech-paper: #f2f2f3;
	--hsrtech-surface: #ffffff;
	--hsrtech-muted: rgba(22, 24, 27, 0.6);
	--hsrtech-line: rgba(22, 24, 27, 0.14);
	--hsrtech-code: #16181b;
	--hsrtech-code-ink: #ffffff;
}

/* -----------------------------------------------------------------------
   Shape — match the site's own bento card radius instead of the plugin's
   larger default, and drop the plugin's offset "sticker" shadow + slight
   rotation on cover art, which reads as playful/editorial and doesn't
   match this theme's flatter, soft-shadow cards.
   ----------------------------------------------------------------------- */
.hsrtech-toc,
.hsrtech-book-hero__cover img,
.hsrtech-book-card__cover {
	border-radius: var(--bento-radius-card, 20px);
}

.hsrtech-book-hero__cover img {
	box-shadow: none;
	transform: none;
}

.hsrtech-book-card__cover {
	box-shadow: var(--bento-card-shadow, inset 0 0 2px 0 rgba(255, 255, 255, 0.15));
}

/* -----------------------------------------------------------------------
   Buttons — use this theme's own button treatment (accent background,
   ink text, 10px radius, Poppins bold — see theme.json's
   styles.elements.button) instead of the plugin's black pill button.
   ----------------------------------------------------------------------- */
.hsrtech-button {
	background: var(--wp--preset--color--accent, #53a187);
	border-radius: 10px;
	color: var(--wp--preset--color--ink, #121214) !important;
	font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif);
	font-weight: var(--bento-fw-bold, 700);
}

/* The plugin's own .hsrtech-button--outline (transparent fill, ink-colored
   border/text) is themed to the plugin's own light/dark "ink" tokens, which
   this theme never defines — so on its own it would just inherit the solid
   accent fill above like any other .hsrtech-button. Re-skin it here, same as
   the base button just above, using this theme's foreground/accent tokens
   instead so "Table of contents" reads as the secondary action next to the
   solid "Start reading" pill. */
.hsrtech-button--outline {
	background: transparent;
	border-color: var(--wp--preset--color--foreground, #ffffff);
	color: var(--wp--preset--color--foreground, #ffffff) !important;
}

.hsrtech-button--outline:hover {
	border-color: var(--wp--preset--color--accent, #53a187);
	color: var(--wp--preset--color--accent, #53a187) !important;
}

.hsrtech-text-link {
	border-bottom-color: var(--wp--preset--color--accent, #53a187);
}