/*
 * Matchday programme viewer.
 *
 * Standalone: the programme takes the whole viewport, on a phone at the ground
 * and on a desktop alike, with the club chrome reduced to a bar that gets out of
 * the way when you tap the page.
 */

:root {
	--pv-red: #C8102E;
	--pv-ink: #1a1714;
	--pv-head: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
	--pv-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.pv {
	height: 100dvh;
	background: var(--pv-ink);
	color: #fff;
	font-family: var(--pv-body);
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

.pv-bar {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .6rem 1rem;
	padding-top: max(.6rem, env(safe-area-inset-top));
	background: rgba(26, 23, 20, .92);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	transition: opacity .25s ease, transform .25s ease;
}

.pv-bar__back {
	width: 44px; height: 44px; flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
}
.pv-bar__back:active { background: var(--pv-red); }

.pv-bar__crest { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }

.pv-bar__title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.pv-bar__title strong {
	font-family: var(--pv-head);
	font-weight: 800;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-bar__title span { font-size: .72rem; color: rgba(255, 255, 255, .55); }

.pv-bar__tools { display: flex; gap: .4rem; flex-shrink: 0; }

.pv-tool {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff; cursor: pointer;
	font-size: .95rem;
}
.pv-tool:active { background: var(--pv-red); }

.pv-stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: .6rem;
	min-height: 0;
	overflow: hidden;
}

.pv-loading { text-align: center; display: grid; gap: .8rem; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.pv-loading i { font-size: 2.2rem; color: var(--pv-red); }

.pv-btn {
	display: inline-block;
	font-family: var(--pv-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--pv-red);
	color: #fff;
	padding: 12px 26px;
	border-radius: 50px;
}

.pv-book { margin-inline: auto; }
.pv-page-el { background: #fff; }
.pv-page-el canvas { display: block; width: 100%; height: 100%; }

.pv-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff; cursor: pointer;
	display: grid; place-items: center;
	z-index: 3;
	transition: background .15s ease, opacity .25s ease;
}
.pv-arrow:active { background: var(--pv-red); }
.pv-arrow--prev { left: .4rem; }
.pv-arrow--next { right: .4rem; }

.pv-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 1rem;
	padding-bottom: max(.7rem, env(safe-area-inset-bottom));
	background: rgba(26, 23, 20, .92);
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .85rem;
	transition: opacity .25s ease, transform .25s ease;
}
.pv-page { color: rgba(255, 255, 255, .75); font-weight: 600; }
.pv-foot__link {
	font-family: var(--pv-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .8rem;
	color: var(--pv-red);
}

/* Tap the page to strip everything back to the programme itself. */
body.pv.is-bare .pv-bar,
body.pv.is-bare .pv-foot { opacity: 0; pointer-events: none; }
body.pv.is-bare .pv-bar { transform: translateY(-100%); }
body.pv.is-bare .pv-foot { transform: translateY(100%); }
body.pv.is-bare .pv-arrow { opacity: .25; }

.pv-fallback { color: rgba(255, 255, 255, .8); text-align: center; font-size: .9rem; }
.pv-fallback a { color: var(--pv-red); text-decoration: underline; }

@media (min-width: 820px) {
	.pv-stage { padding: 1rem; }
	.pv-arrow { width: 56px; height: 56px; }
	.pv-arrow--prev { left: 1.2rem; }
	.pv-arrow--next { right: 1.2rem; }
	.pv-bar__title strong { font-size: 1.25rem; }
}

/*
 * A `display` rule beats the `hidden` attribute, so every element in the viewer
 * that sets display must opt back out when hidden — otherwise the loading state
 * never disappears and its space pushes the book off centre.
 */
body.pv [hidden] { display: none !important; }