/* ─── FLIP BOOK (JÓLAGJAFAHANDBÓK) ────────────────────
   [saelk_jolabok] (inc/flipbook.php, assets/js/flipbook.js). Loaded only
   on pages that use the shortcode. Each image is one landscape spread;
   a page shows one half of it through background-position. */

.saelk-book {
	--saelk-book-paper: #f1ece3;
	position: relative;
	max-width: 1120px;
	margin: 48px auto 0;
}

.saelk-book [hidden] {
	display: none !important;
}

.saelk-book__stage {
	position: relative;
	aspect-ratio: 16 / 9;
}

/* ─── CLOSED: THE COVER ───────────────────────────────
   The paper block shows on the right and bottom edges, with a fold
   line just inside the spine. */

.saelk-book__cover {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 2px 5px 5px 2px;
	background: var(--saelk-book-paper);
	cursor: pointer;
	box-shadow:
		2px 1px 0 #e9e3d8,
		4px 2px 0 #cfc6b6,
		6px 3px 0 #e9e3d8,
		8px 4px 0 #cfc6b6,
		0 26px 50px -18px rgba(0, 0, 0, 0.75);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.saelk-book__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.saelk-book__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.12) 0.7%, rgba(0, 0, 0, 0.2) 1.6%, rgba(0, 0, 0, 0) 3.5%);
	pointer-events: none;
}

.saelk-book__cover:hover,
.saelk-book__cover:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		2px 1px 0 #e9e3d8,
		4px 2px 0 #cfc6b6,
		6px 3px 0 #e9e3d8,
		8px 4px 0 #cfc6b6,
		0 34px 60px -18px rgba(0, 0, 0, 0.8);
}

.saelk-book__cover:focus-visible {
	outline: 2px solid var(--wp--preset--color--caramel);
	outline-offset: 10px;
}

.saelk-book.is-open .saelk-book__cover {
	visibility: hidden;
}

/* ─── OPEN: PAGES, SPINE, TURNING LEAF ────────────────── */

.saelk-book__spread {
	position: absolute;
	inset: 0;
	display: none;
	border-radius: 4px;
	background-color: var(--saelk-book-paper);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	perspective: 2400px;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.saelk-book.is-open .saelk-book__spread {
	display: block;
}

.saelk-book__spread:focus {
	outline: none;
}

.saelk-book__spread:focus-visible {
	outline: 2px solid var(--wp--preset--color--caramel);
	outline-offset: 10px;
}

.saelk-book__page,
.saelk-book__face,
.saelk-book__door {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: var(--saelk-book-paper);
	background-repeat: no-repeat;
	background-size: 200% 100%;
}

.saelk-book__page {
	width: 50%;
}

.saelk-book__page.is-left {
	left: 0;
	border-radius: 4px 0 0 4px;
}

.saelk-book__page.is-right {
	left: 50%;
	border-radius: 0 4px 4px 0;
}

.saelk-book.is-single .saelk-book__page.is-left {
	display: none;
}

.saelk-book.is-single .saelk-book__page.is-right {
	left: 0;
	width: 100%;
	border-radius: 2px 4px 4px 2px;
}

/* Shadows animated by flipbook.js while a page turns. */
.saelk-book__shade {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}

.saelk-book__page.is-left > .saelk-book__shade {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
}

.saelk-book__page.is-right > .saelk-book__shade {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
}

.saelk-book__face > .saelk-book__shade,
.saelk-book__door > .saelk-book__shade {
	background: rgba(18, 12, 6, 0.6);
}

/* No fold between the two pages of a spread: it would cut through text
   that runs across the middle. One page at a time gets a soft spine on
   its left edge. */
.saelk-book__gutter {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	pointer-events: none;
}

.saelk-book.is-single .saelk-book__gutter {
	display: block;
	border-radius: 2px 4px 4px 2px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 5%);
}

.saelk-book__leaf {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 3;
	width: 50%;
	transform-origin: 0 50%;
	transform-style: preserve-3d;
	will-change: transform;
}

.saelk-book__leaf.is-backward {
	left: 0;
	transform-origin: 100% 50%;
}

.saelk-book__leaf.is-single {
	left: 0;
	width: 100%;
}

.saelk-book__face {
	left: 0;
	width: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
}

.saelk-book__face.is-back {
	transform: rotateY(180deg);
}

.saelk-book__leaf.is-forward .saelk-book__face.is-front,
.saelk-book__leaf.is-backward .saelk-book__face.is-back {
	border-radius: 0 4px 4px 0;
}

.saelk-book__leaf.is-forward .saelk-book__face.is-back,
.saelk-book__leaf.is-backward .saelk-book__face.is-front {
	border-radius: 4px 0 0 4px;
}

/* The cover's two halves, swinging open onto the first spread. */
.saelk-book__door {
	z-index: 4;
	width: 50%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.saelk-book__door.is-left {
	left: 0;
	border-radius: 2px 0 0 2px;
	background-position: 0 0;
	transform-origin: 0 50%;
}

.saelk-book__door.is-right {
	left: 50%;
	border-radius: 0 5px 5px 0;
	background-position: 100% 0;
	transform-origin: 100% 50%;
}

/* ─── CONTROLS ────────────────────────────────────────
   Space is kept for the bar from the start, so opening the book does not
   move the rest of the page. */

.saelk-book__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 32px;
}

.saelk-book__open {
	padding: 12px 4px;
	border: 0;
	border-bottom: 1px solid rgba(198, 134, 66, 0.6);
	background: none;
	color: var(--wp--preset--color--caramel);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.saelk-book__open:hover {
	border-color: var(--wp--preset--color--caramel);
	color: var(--wp--preset--color--white);
}

.saelk-book__open:focus-visible {
	outline: 2px solid var(--wp--preset--color--caramel);
	outline-offset: 4px;
}

.saelk-book__controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.saelk-book__ctrl {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(198, 134, 66, 0.55);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--caramel);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.saelk-book__ctrl:hover:not(:disabled) {
	border-color: var(--wp--preset--color--caramel);
	background-color: rgba(198, 134, 66, 0.12);
}

.saelk-book__ctrl:focus-visible {
	outline: 2px solid var(--wp--preset--color--caramel);
	outline-offset: 3px;
}

.saelk-book__ctrl:disabled {
	opacity: 0.3;
	cursor: default;
}

.saelk-book__ctrl svg {
	width: 18px;
	height: 18px;
}

.saelk-book__count {
	min-width: 6em;
	color: var(--wp--preset--color--gray-300);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2em;
	text-align: center;
}

.saelk-book__sep {
	width: 1px;
	height: 24px;
	margin: 0 4px;
	background: rgba(198, 134, 66, 0.35);
}

.saelk-book__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ─── ENLARGED (DIALOG) ───────────────────────────────── */

.saelk-book-dialog {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 24px;
	border: 0;
	background: rgba(14, 11, 8, 0.97);
}

.saelk-book-dialog[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.saelk-book-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.saelk-book.is-expanded {
	width: min(100%, calc((100vh - 150px) * 16 / 9));
	width: min(100%, calc((100dvh - 150px) * 16 / 9));
	max-width: none;
	margin: 0 auto;
}

html.saelk-book-lock {
	overflow: hidden;
}

/* ─── ZOOM VIEW (PHONES) ──────────────────────────────
   One slide full-screen to read; flipbook.js handles pinch, pan, double
   tap and swipe, so the browser's own gestures are off inside it. */

.saelk-book-zoom {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #0e0b08;
	overflow: hidden;
}

.saelk-book-zoom::backdrop {
	background: #0e0b08;
}

.saelk-book-zoom__view {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
}

.saelk-book-zoom__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	transform-origin: 50% 50%;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.saelk-book-zoom__img.is-easing {
	transition: transform 0.25s ease;
}

.saelk-book-zoom__close {
	position: absolute;
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	background: rgba(14, 11, 8, 0.7);
}

.saelk-book-zoom__count,
.saelk-book-zoom__hint {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	font-family: var(--wp--preset--font-family--oswald);
	letter-spacing: 0.2em;
	white-space: nowrap;
}

.saelk-book-zoom__count {
	bottom: max(16px, env(safe-area-inset-bottom));
	color: var(--wp--preset--color--gray-300);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.saelk-book-zoom__hint {
	top: max(24px, env(safe-area-inset-top));
	padding: 8px 16px;
	border: 1px solid rgba(198, 134, 66, 0.55);
	border-radius: 999px;
	background: rgba(14, 11, 8, 0.7);
	color: var(--wp--preset--color--caramel);
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	transition: opacity 0.6s ease;
}

.saelk-book-zoom__hint.is-hidden {
	opacity: 0;
}

@media (max-width: 600px) {
	/* A little wider than the section text on phones: every pixel helps a
	   landscape page. The section has 24px side padding. */
	.saelk-book {
		left: -12px;
		width: calc(100% + 24px);
		max-width: none;
		margin-top: 32px;
	}

	.saelk-book__bar {
		margin-top: 24px;
	}

	.saelk-book__controls {
		gap: 8px;
	}

	.saelk-book__count {
		min-width: 4.5em;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.saelk-book__cover,
	.saelk-book__open,
	.saelk-book__ctrl {
		transition: none;
	}

	.saelk-book__cover:hover,
	.saelk-book__cover:focus-visible {
		transform: none;
	}
}