/* ==========================================================================
   BR Theme - Books custom post type
   Archive/single cards + popup 3D flipbook reader.
   Palette matches the theme's existing brand colors (blue / navy accents).
   ========================================================================== */

:root {
	--brbook-primary: #0f74ba;
	--brbook-primary-dark: #0a5688;
	--brbook-navy: #242f3d;
	--brbook-accent: #16a085;
	--brbook-text: #33383d;
	--brbook-muted: #74808c;
	--brbook-border: #e4e8ec;
	--brbook-bg: #f8fafb;
	--brbook-radius: 14px;
	--brbook-shadow: 0 10px 30px rgba(15, 30, 50, 0.09);
	--brbook-shadow-hover: 0 20px 45px rgba(15, 30, 50, 0.18);
}

.books-archive-page .content,
.single-book-page .content {
	box-sizing: border-box;
}
.books-archive-page *,
.single-book-page *,
.brtheme-flipbook-modal * {
	box-sizing: border-box;
}

.books-archive-header {
	text-align: center;
	margin: 10px 0 40px;
}
.books-archive-header .heading {
	margin-bottom: 8px;
}

/* Reusable icon + text row, used for author/editor lines and meta-list items
   so the icon always lines up with the text baseline regardless of the
   icon glyph's own metrics. */
.book-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	line-height: 1.4;
}
.book-meta-item i {
	flex: 0 0 auto;
	width: 1em;
	text-align: center;
	color: var(--brbook-accent);
}

/* ---------------------------------------------------------------------- */
/* Grid - 2 columns by design                                             */
/* ---------------------------------------------------------------------- */
.books-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin: 0 0 40px;
}

.book-card {
	display: flex;
	background: #fff;
	border: 1px solid var(--brbook-border);
	border-radius: var(--brbook-radius);
	overflow: hidden;
	box-shadow: var(--brbook-shadow);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
	opacity: 0;
	transform: translateY(18px);
	animation: brbookFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.books-grid .book-card:nth-child(2) { animation-delay: 0.06s; }
.books-grid .book-card:nth-child(3) { animation-delay: 0.12s; }
.books-grid .book-card:nth-child(4) { animation-delay: 0.18s; }
.books-grid .book-card:nth-child(5) { animation-delay: 0.24s; }
.books-grid .book-card:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes brbookFadeUp {
	to { opacity: 1; transform: translateY(0); }
}

.book-card:hover,
.book-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--brbook-shadow-hover);
	border-color: var(--brbook-primary);
}

/* ---- Left: cover -------------------------------------------------------*/
.book-card-cover {
	position: relative;
	flex: 0 0 40%;
	max-width: 40%;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--brbook-navy), #384556);
	overflow: hidden;
	padding: 14px;
}

/* "Show full cover/feature image" - contain (not crop) the artwork. */
.book-cover-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.book-card:hover .book-cover-img {
	transform: scale(1.04);
}

.book-cover-placeholder {
	width: 100%;
	height: 100%;
	min-height: 230px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.35);
	font-size: 54px;
}

/*
 * IMPORTANT: ".book-read-trigger" is shared by every element that should
 * open the flipbook (the cover overlay button AND the plain "Read
 * More"/"Read Book" buttons in the details column) purely so books-flipbook.js
 * has one class to delegate click events on. It must NOT carry any layout
 * styling itself - the "floating overlay on the cover" look below is scoped
 * to ".book-card-cover"/".book-single-cover" specifically, otherwise the
 * Read More/Read Book buttons inherit position:absolute and end up
 * full-width and overlapping other cards.
 */
.book-card-cover .book-read-trigger,
.book-single-cover .book-read-trigger {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 10px;
	border: 0;
	cursor: pointer;
	background: linear-gradient(0deg, rgba(15, 25, 40, 0.92), rgba(15, 25, 40, 0.4) 90%, transparent);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.3px;
	transform: translateY(65%);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, background-color 0.25s ease;
}
.book-card:hover .book-card-cover .book-read-trigger,
.book-card:focus-within .book-card-cover .book-read-trigger,
.book-single-cover .book-read-trigger {
	transform: translateY(0);
	opacity: 1;
}
.book-card-cover .book-read-trigger:hover,
.book-card-cover .book-read-trigger:focus-visible,
.book-single-cover .book-read-trigger:hover,
.book-single-cover .book-read-trigger:focus-visible {
	background: linear-gradient(0deg, var(--brbook-primary-dark), var(--brbook-primary) 90%, transparent);
	outline: none;
}
.book-card-cover .book-read-trigger i,
.book-single-cover .book-read-trigger i {
	font-size: 15px;
}

/* Single template's cover trigger is always visible, stacked under the
   image (not overlaid) rather than hover-revealed. */
.book-read-trigger-large {
	position: static;
	transform: none;
	opacity: 1;
	width: auto;
	margin-top: 14px;
	border-radius: 999px;
	background: var(--brbook-primary);
	padding: 12px 26px;
}
.book-single-cover .book-read-trigger-large:hover,
.book-single-cover .book-read-trigger-large:focus-visible {
	background: var(--brbook-primary-dark);
}

/* ---- Right: details ------------------------------------------------------*/
.book-card-details {
	flex: 1 1 60%;
	display: flex;
	flex-direction: column;
	padding: 20px 22px 18px;
	min-width: 0;
}

.book-title {
	font-size: 17px;
	line-height: 1.35;
	margin: 0 0 8px;
}
.book-title a {
	color: var(--brbook-navy);
	text-decoration: none;
	transition: color 0.2s ease;
}
.book-title a:hover,
.book-title a:focus-visible {
	color: var(--brbook-primary);
}

.book-author {
	margin: 0 0 10px;
	color: var(--brbook-primary);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.book-excerpt {
	margin: 0 0 12px;
	color: var(--brbook-text);
	font-size: 13px;
	line-height: 1.6;
}

/* Stacked - "pages" on its own line, "publish date" on its own line. */
.book-meta-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-size: 12.5px;
	color: var(--brbook-muted);
}

.book-card-footer {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

.book-readmore-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 20px;
	border: 2px solid var(--brbook-primary);
	border-radius: 999px;
	background: transparent;
	color: var(--brbook-primary);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.3px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.book-readmore-btn i {
	transition: transform 0.25s ease;
}
.book-readmore-btn:hover,
.book-readmore-btn:focus-visible {
	background: var(--brbook-primary);
	color: #fff;
	transform: translateX(2px);
	outline: none;
}
.book-readmore-btn:hover i,
.book-readmore-btn:focus-visible i {
	transform: translateX(3px);
}

.no-books-found {
	text-align: center;
	color: var(--brbook-muted);
	padding: 60px 0;
}

/* ---------------------------------------------------------------------- */
/* Single book layout                                                     */
/* ---------------------------------------------------------------------- */
.book-single {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	background: #fff;
	border: 1px solid var(--brbook-border);
	border-radius: var(--brbook-radius);
	box-shadow: var(--brbook-shadow);
	padding: 30px;
	margin: 20px 0 50px;
}
.book-single-cover {
	position: relative;
	flex: 0 0 320px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: var(--brbook-radius);
	overflow: hidden;
	background: linear-gradient(160deg, var(--brbook-navy), #384556);
	box-shadow: var(--brbook-shadow);
	padding: 18px;
}
.book-single-cover .book-cover-img {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	display: block;
}
.book-single-details { flex: 1 1 380px; min-width: 0; }
.book-single-details .book-title { font-size: 26px; margin-bottom: 14px; }
.book-single-details .book-content { margin: 18px 0; color: var(--brbook-text); line-height: 1.8; }
.book-single-details .book-excerpt { font-size: 15px; }
.book-single-details .book-meta-list { gap: 8px; font-size: 14px; margin-bottom: 18px; }

/* Editors block (single page) */
.book-editors-list {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.book-editor {
	margin: 0;
	padding: 10px 14px;
	background: var(--brbook-bg);
	border-left: 3px solid var(--brbook-primary);
	border-radius: 0 8px 8px 0;
	font-size: 13.5px;
}
.book-editor-name {
	color: var(--brbook-navy);
	font-weight: 600;
	display: flex;
}
.book-editor-institute {
	display: block;
	margin-top: 2px;
	margin-left: calc(1em + 7px);
	color: var(--brbook-muted);
	font-size: 12.5px;
}

.book-single-footer {
	margin-top: 24px;
	justify-content: flex-start;
}
.book-read-cta {
	padding: 14px 32px;
	font-size: 15px;
	border-radius: 10px;
	box-shadow: var(--brbook-shadow);
}
.book-read-cta i {
	font-size: 18px;
}

/* ---------------------------------------------------------------------- */
/* Popup 3D flipbook reader                                               */
/* ---------------------------------------------------------------------- */
.brtheme-flipbook-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}
.brtheme-flipbook-modal.is-open {
	display: flex;
}
html.brtheme-flipbook-open,
html.brtheme-flipbook-open body {
	overflow: hidden;
}

.brtheme-flipbook-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 20, 0.86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: brbookFadeIn 0.25s ease both;
}
@keyframes brbookFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.brtheme-flipbook-dialog {
	position: relative;
	z-index: 1;
	width: min(1100px, 96vw);
	height: min(760px, 92vh);
	display: flex;
	flex-direction: column;
	background: #10151d;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
	animation: brbookScaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes brbookScaleIn {
	from { opacity: 0; transform: scale(0.94) translateY(10px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.brtheme-flipbook-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	background: #161d29;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
}
.brtheme-flipbook-title {
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.brtheme-flipbook-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.brtheme-flipbook-page-indicator {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	margin-right: 8px;
	white-space: nowrap;
}
.brtheme-flipbook-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.brtheme-flipbook-btn:hover,
.brtheme-flipbook-btn:focus-visible {
	background: var(--brbook-primary);
	outline: none;
	transform: translateY(-1px);
}

.brtheme-flipbook-stage {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(ellipse at center, #1b2330 0%, #0b0f15 100%);
	overflow: hidden;
	padding: 20px;
}

.brtheme-flipbook-loading,
.brtheme-flipbook-error {
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
}
.brtheme-flipbook-spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--brbook-primary);
	border-radius: 50%;
	animation: brbookSpin 0.8s linear infinite;
	margin-bottom: 12px;
}
@keyframes brbookSpin {
	to { transform: rotate(360deg); }
}

/* The book element is centered as a unit inside the stage; books-flipbook.js
   gives it an explicit, aspect-correct pixel width/height (see
   computeBookSize()) rather than letting page-flip "stretch" to the full
   stage width, which is what previously pushed page 1 off to one side. */
.brtheme-flipbook-book {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/*
 * The book element is always sized to hold a full two-page spread so
 * page-flip renders real left/right pages (see computeBookLayout() in
 * books-flipbook.js). A solo front/back cover only fills half of that
 * box, so it's nudged sideways here to land dead-center in the stage
 * instead of pinned to one edge - books-flipbook.js toggles these classes
 * based on which page is currently showing.
 */
.brtheme-flipbook-book.is-solo-first {
	transform: translateX(-25%);
}
.brtheme-flipbook-book.is-solo-last {
	transform: translateX(25%);
}
.flipbook-page {
	background: #fff;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.06);
}
.flipbook-page canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.brtheme-flipbook-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.brtheme-flipbook-nav:hover,
.brtheme-flipbook-nav:focus-visible {
	background: var(--brbook-primary);
	outline: none;
}
.brtheme-flipbook-prev { left: 14px; }
.brtheme-flipbook-next { right: 14px; }
.brtheme-flipbook-nav:hover { transform: translateY(-50%) scale(1.06); }

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 960px) {
	.books-grid { grid-template-columns: 1fr; }
	.book-card-cover { min-height: 260px; }
}

@media (max-width: 782px) {
	.book-card { flex-direction: column; }
	.book-card-cover { max-width: 100%; flex-basis: auto; height: 260px; min-height: 0; }
	.book-card-cover .book-read-trigger { transform: translateY(0); opacity: 1; }
	.book-card-footer { justify-content: flex-start; }
	.book-single { flex-direction: column; padding: 20px; }
	.book-single-cover { max-width: 100%; flex-basis: auto; }
	.book-single-details .book-meta-list { flex-direction: column; }
	.brtheme-flipbook-dialog { width: 100vw; height: 100vh; border-radius: 0; }
	.brtheme-flipbook-nav { width: 38px; height: 38px; font-size: 15px; }
}

@media (max-width: 480px) {
	.brtheme-flipbook-title { max-width: 45vw; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.book-card,
	.book-cover-img,
	.book-read-trigger,
	.brtheme-flipbook-backdrop,
	.brtheme-flipbook-dialog {
		animation: none !important;
		transition: none !important;
	}
}