/* =========================================================================
   Reading page — cosmetic modernization
   Madara child theme

   SCOPE — read before editing:
   This file styles ONLY the chrome around the chapter: the heading, the
   prev/next navigation bars, and the reading frame. It deliberately does NOT
   touch, and must never touch:

     .reading-content            the OCR overlay's offset parent
     #ocr-global-overlay-container
     .manga-ocr-button-overlay   the positioned translated-text boxes
     .wp-manga-chapter-img       the pages the overlay is measured against
     .semantic-chapter-transcript the hidden SEO transcript

   The OCR script measures those elements with getBoundingClientRect and
   positions text over them. Changing their box model, position, transform,
   padding or size would move the translated text off the artwork. Everything
   below stays clear of them.

   Colours use two-class selectors where they'd otherwise collide with the
   child theme's `body:not(.dark) … { color:#000 !important }` rule.
   ========================================================================= */

:root {
	--mrm-r-accent: #8b5cf6;
	--mrm-r-ink: #16181d;
	--mrm-r-muted: #6d7480;
	--mrm-r-line: #e6e7ea;
	--mrm-r-panel: #ffffff;
	--mrm-r-chip: #f4f4f6;
}

body.dark,
body.dark-mode,
body.madara-dark-mode {
	--mrm-r-ink: #e9ecf2;
	--mrm-r-muted: #99a1ae;
	--mrm-r-line: #2b303a;
	--mrm-r-panel: #1b1f26;
	--mrm-r-chip: #232830;
}

/* -------------------------------------------------------------------------
   Reading column width — the theme already caps at 1000px; keep that but
   give it breathing room and centre it.
   ---------------------------------------------------------------------- */

.reading-content-wrap .main-col-inner {
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   Chapter heading
   ---------------------------------------------------------------------- */

.reading-content-wrap #chapter-heading {
	margin: 6px auto 16px;
	font-size: 19px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--mrm-r-ink) !important;
	text-align: center;
}

@media (min-width: 768px) {
	.reading-content-wrap #chapter-heading {
		font-size: 22px;
	}
}

/* -------------------------------------------------------------------------
   Navigation bars (top and bottom).

   The plugin renders the chapter chooser as a CUSTOM picker
   (.c-selectpicker .selectpicker), NOT a plain <select>. The theme styles the
   inner select with a light-grey background and puts the label text on the
   <option>s, and it draws the caret with a Font Awesome glyph that isn't
   loading here. So the earlier generic `select` styling produced empty white
   boxes. This version themes the picker properly and dark-aware.
   ---------------------------------------------------------------------- */

.reading-content-wrap .entry-header.header,
.reading-content-wrap .entry-header.footer {
	background: var(--mrm-r-panel);
	border: 1px solid var(--mrm-r-line);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 auto 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.reading-content-wrap .entry-header.footer {
	margin: 20px auto 0;
}

/* The plugin's own flex/float layout inside .wp-manga-nav is left intact —
   we only theme the controls, not the arrangement. */

/* Chapter + reading-style pickers */
.reading-content-wrap .wp-manga-nav .c-selectpicker select.selectpicker,
.reading-content-wrap .wp-manga-nav select.selectpicker,
.reading-content-wrap .wp-manga-nav #single-pager {
	padding: 0 34px 0 14px !important;
	min-height: 42px;
	border: 1px solid var(--mrm-r-line) !important;
	border-radius: 9px !important;
	background-color: var(--mrm-r-chip) !important;
	color: var(--mrm-r-ink) !important;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	/* CSS caret, since the theme's Font Awesome glyph isn't loading */
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
	background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
}

.reading-content-wrap .wp-manga-nav .c-selectpicker select.selectpicker:hover {
	background-color: var(--mrm-r-line) !important;
}

/* The theme's Font Awesome caret on the picker label — hide it, we draw our own */
.reading-content-wrap .wp-manga-nav .c-selectpicker label::after {
	content: none !important;
}

/* Dropdown options: readable in both modes */
.reading-content-wrap .wp-manga-nav select.selectpicker option {
	background-color: var(--mrm-r-panel);
	color: var(--mrm-r-ink);
}

/* Prev / next / info buttons — these ARE links/buttons, keep them punchy */
.reading-content-wrap .wp-manga-nav .select-pagination a,
.reading-content-wrap .wp-manga-nav .nav-links a,
.reading-content-wrap .wp-manga-nav a.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 16px;
	border-radius: 9px;
	border: 1px solid transparent;
	background: var(--mrm-r-accent);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .14s ease, transform .1s ease;
}

.reading-content-wrap .wp-manga-nav .select-pagination a:hover,
.reading-content-wrap .wp-manga-nav .nav-links a:hover,
.reading-content-wrap .wp-manga-nav a.c-btn:hover {
	background: #7c46e0;
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   Reading frame — style the OUTER wrapper only. .reading-content itself is the
   OCR offset parent and is left completely alone; we frame its parent instead.
   ---------------------------------------------------------------------- */

.reading-content-wrap .read-container {
	background: var(--mrm-r-panel);
	border-radius: 12px;
	overflow: visible; /* never clip: OCR overlays can extend past the image */
}

/* Chapter images: only cosmetic radius on the first/last, no box-model change
   that would alter the measurements the OCR script relies on. Width/height are
   left to the theme. */
.reading-content-wrap .reading-content .wp-manga-chapter-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   The "help us stay online" urgency bar — modernize to match, keep its intent
   and its paid-member gating (which is PHP-side and untouched).
   ---------------------------------------------------------------------- */

.reading-content-wrap .mrm-chapter-urgency {
	border-radius: 12px !important;
}

.reading-content-wrap .mrm-urgency-btn {
	border-radius: 8px !important;
}

/* -------------------------------------------------------------------------
   Comments / related below — light polish so they don't look bare against the
   new panels. Purely spacing.
   ---------------------------------------------------------------------- */

.reading-content-wrap .c-blog-post {
	margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   Breadcrumb inside the nav — theme it so it doesn't read as bare text
   ---------------------------------------------------------------------- */

.reading-content-wrap .wp-manga-nav .c-breadcrumb,
.reading-content-wrap .wp-manga-nav .breadcrumb {
	margin: 0;
	padding: 0;
	background: transparent;
}

.reading-content-wrap .wp-manga-nav .breadcrumb > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 7px;
	background: var(--mrm-r-chip);
	color: var(--mrm-r-ink) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background .12s ease, color .12s ease;
}

.reading-content-wrap .wp-manga-nav .breadcrumb > li > a:hover {
	background: var(--mrm-r-accent);
	color: #fff !important;
}

.reading-content-wrap .wp-manga-nav .breadcrumb > li.active,
.reading-content-wrap .wp-manga-nav .breadcrumb > li:last-child {
	color: var(--mrm-r-muted) !important;
	font-size: 13px;
	font-weight: 600;
	padding: 0 4px;
}

/* Tidy the float layout: let the two nav groups sit with even spacing rather
   than jammed to the edges with a hole in the middle. */
.reading-content-wrap .wp-manga-nav .entry-header_wrap::after {
	content: "";
	display: table;
	clear: both;
}

/* -------------------------------------------------------------------------
   Smooth, centered page images with a subtle divider between them so long
   chapters don't read as one endless strip. Cosmetic only — no box-model
   change that the OCR overlay measures.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Small screens
   ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.reading-content-wrap .entry-header.header,
	.reading-content-wrap .entry-header.footer {
		padding: 8px;
		border-radius: 10px;
	}

	.reading-content-wrap .wp-manga-nav a,
	.reading-content-wrap .wp-manga-nav .btn,
	.reading-content-wrap .wp-manga-nav select {
		min-height: 40px;
		font-size: 13px;
	}

	.reading-content-wrap #chapter-heading {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reading-content-wrap .wp-manga-nav a,
	.reading-content-wrap .wp-manga-nav .btn {
		transition: none !important;
	}
}