/**
 * thus-core component styles.
 *
 * Styles ONLY markup this plugin generates — the partials in partials/.
 * Page layout around them belongs to the theme, and so does anything
 * overriding a third-party plugin's markup.
 *
 * Enqueued on demand, not site-wide: the components register this
 * stylesheet and enqueue it when they actually render. See docs/TOOLS.md.
 */

/* ---------------------------------------------------------------------------
   Tools — podcast embed and PDF download
   ---------------------------------------------------------------------------
   Markup comes from thus-core (partials/tools-single.php), so the class names
   are fixed there. Styling lives here because appearance belongs to the theme
   — see docs/DEVELOPMENT.md §2.

   The spacing matters more than it looks: the embed lands directly under
   whatever the editor content ends with, which on a real post is often a
   video. Without a gap the two players read as one broken element.
   --------------------------------------------------------------------------- */

.thus-tool-extras {
	margin-top: 26px;
}

.thus-tool-podcast {
	margin-bottom: 32px;
}

/* Spotify's iframe has its own rounded corners; this keeps anything we put
   behind it from poking out at the edges. */
.thus-tool-podcast iframe {
	display: block;
	border: 0;
	border-radius: 12px;
}

.thus-tool-welcome {
	margin: 0 0 16px;
	padding: 12px 18px;
	border-left: 3px solid #fddd49;
	background: rgba(253, 221, 73, 0.14);
	font-weight: 600;
}

.thus-tool-download {
	margin: 0;
	padding-top: 8px;
}

.thus-tool-download__link {
	display: inline-block;
	padding: 12px 22px;
	background: #fddd49;
	color: #1a1a1a;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.2s ease;
}

.thus-tool-download__link:hover,
.thus-tool-download__link:focus {
	background: #f5cf1f;
	color: #1a1a1a;
	text-decoration: none;
}

/* Inside the button now, so it reads as one control rather than a button
   with a stray fragment of text beside it. */
.thus-tool-download__size {
	font-size: 0.86em;
	font-weight: 400;
	opacity: 0.65;
}

.thus-tool-download__size::before {
	content: '· ';
}

.thus-tool-download__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.thus-tool-download__icon {
	width: 17px;
	height: 17px;
	fill: currentColor;
	flex: 0 0 auto;
}

@media (max-width: 480px) {
	.thus-tool-download__link {
		display: block;
		text-align: center;
	}

	.thus-tool-download__size {
		display: block;
		margin: 8px 0 0;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
   Quick registration form
   ---------------------------------------------------------------------------
   Markup from thus-core (partials/register-form.php). Four fields, nothing
   else: this is the step between wanting a PDF and having one, so every
   element that is not a field is a reason to leave.
   --------------------------------------------------------------------------- */

.thus-register {
	max-width: 460px;
	margin: 0 auto;
	padding: 40px 0 72px;
}

.thus-register__errors {
	margin-bottom: 24px;
	padding: 14px 18px;
	border-left: 3px solid #c0392b;
	background: rgba(192, 57, 43, 0.06);
}

.thus-register__errors p {
	margin: 0 0 6px;
}

.thus-register__errors p:last-child {
	margin-bottom: 0;
}

.thus-register__field {
	margin: 0 0 20px;
}

.thus-register__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.86em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.thus-register__field input {
	display: block;
	width: 100%;
	/* Without this, width:100% plus 14px padding and a 1px border makes the
	   input 30px WIDER than its container — it overflowed the right edge of
	   the modal while the labels and button sat correctly inside it, so the
	   padding looked broken on one side only. The theme does not set
	   border-box for these. */
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	background: #fff;
	font-size: 1em;
	line-height: 1.4;
}

.thus-register__field input:focus {
	outline: none;
	border-color: #1a1a1a;
	box-shadow: 0 0 0 3px rgba(253, 221, 73, 0.45);
}

.thus-register__hint {
	display: block;
	margin-top: 6px;
	font-size: 0.82em;
	opacity: 0.65;
}

.thus-register__notice {
	margin: 0 0 24px;
	font-size: 0.88em;
	line-height: 1.5;
	opacity: 0.75;
}

.thus-register__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
}

.thus-register__submit {
	display: inline-block;
	padding: 13px 28px;
	border: 0;
	border-radius: 4px;
	background: #fddd49;
	color: #1a1a1a;
	font-size: 1em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.thus-register__submit:hover,
.thus-register__submit:focus {
	background: #f5cf1f;
	color: #1a1a1a;
}

.thus-register__login {
	font-size: 0.9em;
}

/* The gate shown on a Tool when the visitor is not logged in. */
.thus-tool-gate {
	/* Sized to its contents rather than the column: a one-line prompt and
	   a button in a full-width panel reads as an empty box with something
	   in the corner. */
	display: inline-block;
	max-width: 100%;
	margin-top: 0;
	padding: 18px 20px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
}

.thus-tool-gate__text {
	margin: 0 0 12px;
	font-size: 0.95em;
	font-weight: 600;
}

.thus-tool-gate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
}

.thus-tool-gate__login {
	font-size: 0.9em;
}

@media (max-width: 600px) {
	.thus-register__actions,
	.thus-tool-gate__actions {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* --- modal dialogs (generic) ----------------------------------------------
   Markup from thus-core Support\Modal, so these rules serve EVERY modal on
   the site, not just registration. Presentation only: the browser handles
   focus, ESC and the backdrop, and without JavaScript no dialog is ever
   opened — the trigger is a real link that navigates instead.
   -------------------------------------------------------------------------- */

.thus-dialog {
	width: min(92vw, 440px);
	/* Never taller than the viewport: the form is five fields plus a notice,
	   which overflows a laptop screen once the browser chrome is counted. */
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}

.thus-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.thus-dialog__inner {
	position: relative;
	max-height: 88vh;
	/* Even on all four sides. The earlier values were uneven and the theme's
	   own margins on the last child made the bottom look tighter still. */
	padding: 30px;
	overflow-y: auto;
}

.thus-dialog__title {
	/* Right margin clears the close button rather than sitting under it. */
	margin: 0 44px 18px 0;
	font-size: 1.3em;
	line-height: 1.2;
}

.thus-dialog__close {
	position: absolute;
	top: 14px;
	right: 16px;
	padding: 4px 8px;
	border: 0;
	background: none;
	font-size: 1.7em;
	line-height: 1;
	cursor: pointer;
	opacity: 0.45;
}

.thus-dialog__close:hover,
.thus-dialog__close:focus {
	opacity: 1;
}

/* The form is laid out for a full page; inside a dialog it needs less of
   everything. Uppercase labels and 20px gaps are fine on a page with room
   to breathe and cramped in a 440px box. */
.thus-dialog .thus-register {
	max-width: none;
	margin: 0;
	padding: 0;
}

.thus-dialog .thus-register__field {
	margin-bottom: 14px;
}

.thus-dialog .thus-register__field label {
	margin-bottom: 4px;
	font-size: 0.78em;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.8;
}

.thus-dialog .thus-register__field input {
	padding: 9px 12px;
}

.thus-dialog .thus-register__hint {
	margin-top: 4px;
	font-size: 0.78em;
}

.thus-dialog .thus-register__notice {
	margin-bottom: 20px;
	font-size: 0.82em;
}

/* The theme puts a bottom margin on every <p>, including the one holding
   the button — which pushed the panel's bottom padding out of balance with
   the other three sides. Zero it and let the padding do the spacing. */
.thus-dialog .thus-register__actions,
.thus-dialog .thus-register__form > p:last-child {
	margin-bottom: 0;
}

.thus-dialog .thus-register__form {
	margin-bottom: 0;
}

/* Stop the focus ring being clipped by the panel's overflow. */
.thus-dialog .thus-register__field input:focus {
	position: relative;
	z-index: 1;
}

.thus-dialog .thus-register__errors {
	margin-bottom: 16px;
	padding: 10px 14px;
}

/* --- listing cards --------------------------------------------------------
   Markup: partials/tools-card.php
   -------------------------------------------------------------------------- */

.thus-tool-card__media {
	position: relative;
	margin-bottom: 14px;
}

.thus-tool-card__cover {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 16 / 10;
	background: #f2f2f2;
}

.thus-tool-card__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.thus-tool-card__cover:hover img {
	transform: scale(1.04);
}

.thus-tool-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #ececec 10px, #ececec 20px);
}

/* The type marker, over the image. For a guide it is also the download. */
/* Small, as Mara asked — a marker saying what the card is, not a play
   button competing with the cover image for attention. */
.thus-tool-card__icon {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.thus-tool-card__icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.thus-tool-card__icon--video {
	background: #e02f2f;
	border-radius: 6px;
}

.thus-tool-card__icon--resources {
	background: #fddd49;
	color: #1a1a1a;
}

a.thus-tool-card__icon:hover,
a.thus-tool-card__icon:focus {
	transform: scale(1.08);
}

a.thus-tool-card__icon--resources:hover,
a.thus-tool-card__icon--resources:focus {
	background: #f5cf1f;
}

.thus-tool-card__meta {
	margin: 0 0 6px;
	font-size: 0.8em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.6;
}

.thus-tool-card__sep {
	margin: 0 4px;
}

.thus-tool-card__title {
	margin: 0 0 8px;
	font-size: 1.1em;
	line-height: 1.3;
}

.thus-tool-card__title a {
	color: inherit;
	text-decoration: none;
}

.thus-tool-card__excerpt {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.5;
	opacity: 0.72;
}

/* --- archive filters ------------------------------------------------------ */

.thus-tools-filters {
	margin: 14px 0 28px;
}

.thus-tools-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	/* The theme gives <a> a tall line-height; without this the pills sit in
	   far more vertical space than they occupy. */
	line-height: 1;
}

.thus-tools-filter--cats {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.thus-tools-filter__item {
	padding: 7px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	color: inherit;
	font-size: 0.82em;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.thus-tools-filter__item:hover,
.thus-tools-filter__item:focus {
	border-color: #1a1a1a;
	color: inherit;
}

.thus-tools-filter__item.is-active {
	background: #fddd49;
	border-color: #fddd49;
	color: #1a1a1a;
	font-weight: 600;
}

.thus-tools-header__type {
	opacity: 0.45;
	font-weight: 400;
}

/* --- embedded document reader ---------------------------------------------
   The browser's own PDF viewer, pointed at our gated endpoint. Not a
   third-party embed: Issuu and similar serve the file from a public URL,
   which would make the registration gate pointless.
   -------------------------------------------------------------------------- */

.thus-tool-reader {
	margin: 0 0 18px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	overflow: hidden;
	background: #f4f4f4;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

.thus-tool-reader__frame {
	display: block;
	width: 100%;
	/* Tall enough to read a page without scrolling the page itself, capped
	   so it never exceeds the viewport on a laptop. */
	height: min(78vh, 820px);
	border: 0;
}

@media (max-width: 600px) {
	.thus-tool-reader__frame {
		/* Mobile browsers render PDFs inconsistently in an iframe; keep it
		   short so the "Open full screen" link stays reachable. */
		height: 60vh;
	}
}

/* --- PDF.js reader --------------------------------------------------------
   Our toolbar, our thumbnails. The <iframe> inside is the fallback and is
   only removed once PDF.js has rendered a page, so .thus-reader__stage and
   the bar stay hidden until then.
   -------------------------------------------------------------------------- */

.thus-reader__stage,
.thus-reader__bar,
.thus-reader__thumbs {
	display: none;
}

.thus-reader.is-ready .thus-reader__stage {
	display: block;
	padding: 12px;
	background: #3a3a3a;
	text-align: center;
	overflow: auto;
}

.thus-reader.is-ready .thus-reader__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: #262626;
	color: #fff;
}

.thus-reader.is-ready .thus-reader__thumbs {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: #1c1c1c;
	overflow-x: auto;
}

.thus-reader__canvas {
	display: inline-block;
	max-width: 100%;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
	background: #fff;
}

.thus-reader__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 9px;
	border: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	font-size: 1em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.thus-reader__btn:hover:not(:disabled),
.thus-reader__btn:focus-visible {
	background: #fddd49;
	color: #1a1a1a;
}

.thus-reader__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.thus-reader__count {
	min-width: 62px;
	font-size: 0.82em;
	text-align: center;
	letter-spacing: 0.03em;
}

.thus-reader__spacer {
	flex: 1;
}

.thus-reader__thumb {
	flex: 0 0 auto;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.thus-reader__thumb canvas {
	display: block;
	width: 62px;
	height: auto;
	background: #fff;
}

.thus-reader__thumb.is-current {
	border-color: #fddd49;
}

.thus-reader:focus-visible {
	outline: 2px solid #fddd49;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.thus-reader.is-ready .thus-reader__thumbs {
		display: none;
	}
}


/* --- newsletter banner ----------------------------------------------------
   Markup: partials/newsletter-banner.php. Not a modal: it slides up from the
   bottom edge and the page stays usable behind it.
   The background colour is inline, per banner, chosen in the admin.
   -------------------------------------------------------------------------- */

.thus-banner {
	position: fixed;
	z-index: 99990;
	left: 50%;
	bottom: var(--thus-banner-lift, 0px);
	width: min(94vw, 680px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--thus-banner-bg, #dfe8ea);
	border-radius: 6px 6px 0 0;
	box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.22);
	overflow: hidden;

	/* The body decides the height; the image follows. See __media below —
	   a fixed cap here was cutting the Subscribe button off, because it
	   depended on my guessing how tall the theme renders the text, and the
	   guess was wrong. This cannot clip the form at any font size.
	   The cap that remains is only a backstop against very long copy. */
	min-height: min(300px, 55vh);
	max-height: 80vh;

	/* Parked below the fold until .is-open. translate on top of the -50%
	   centring, so both axes live in the one transform. The lift has to be
	   added here too: with bottom pushed up by the cookie bar, a plain
	   100% leaves the panel sitting over the bar rather than off-screen. */
	transform: translate(-50%, calc(100% + var(--thus-banner-lift, 0px)));
	transition: transform 0.42s cubic-bezier(0.22, 0.8, 0.3, 1),
	            bottom 0.25s ease;
}

.thus-banner.is-open {
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.thus-banner { transition: none; }
}

.thus-banner--image-left .thus-banner__media  { order: 1; }
.thus-banner--image-left .thus-banner__body   { order: 2; }
.thus-banner--image-right .thus-banner__body  { order: 1; }
.thus-banner--image-right .thus-banner__media { order: 2; }

/* A white disc, because the button sits over a photograph as often as over
   the flat background and a bare glyph disappears into both. */
.thus-banner__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	background: #fff;
	color: #111;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	transition: background 0.15s, color 0.15s;
}

.thus-banner__close:hover,
.thus-banner__close:focus-visible {
	background: #111;
	color: #fff;
}

/* The image is taken out of flow, so it contributes NOTHING to the row
   height and cannot push the form out of the panel. It fills whatever
   height the text column ends up needing, cropping as it goes. */
.thus-banner__media {
	position: relative;
	line-height: 0;
	min-height: 0;
	overflow: hidden;
}

.thus-banner__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thus-banner__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 26px 26px;
	/* Long copy scrolls rather than bursting through the cap. */
	min-height: 0;
	overflow-y: auto;
}

.thus-banner__title {
	margin: 0 0 10px;
	font-size: 1.45em;
	line-height: 1.15;
}

.thus-banner__text {
	font-size: 0.95em;
	line-height: 1.5;
}

.thus-banner__text p:last-child {
	margin-bottom: 0;
}

/* --- the signup form ------------------------------------------------------
   Markup: partials/newsletter-form.php. Used by the banner and by
   [thus_newsletter_form] in the footer, so nothing here may assume a
   panel around it — the banner adds what it needs from outside.
   -------------------------------------------------------------------------- */

.thus-subscribe {
	display: grid;
	gap: 9px;
	position: relative;   /* the honeypot is positioned against this */
}

.thus-subscribe__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* box-sizing on both controls: without it the padding is added to a 100%
   width and the field overflows whatever contains it. */
.thus-subscribe__input,
.thus-subscribe__submit {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
}

.thus-subscribe__input {
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.28);
	border-radius: 2px;
	background: #fff;
	color: #111;
}

.thus-subscribe__input:focus {
	outline: 2px solid #111;
	outline-offset: -2px;
}

.thus-subscribe__submit {
	padding: 13px 18px;
	border: 0;
	border-radius: 2px;
	background: #111;
	color: #fff;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.thus-subscribe__submit:hover:not(:disabled) { background: #333; }
.thus-subscribe__submit:disabled { opacity: 0.55; cursor: default; }

.thus-subscribe__note:empty { display: none; }

.thus-subscribe__note {
	margin: 2px 0 0;
	font-size: 0.86em;
	line-height: 1.4;
	color: #1f4d2b;
}

.thus-subscribe__note.is-error { color: #a8492a; }

/* The honeypot. Off-screen rather than display:none — some bots skip
   fields they can tell are hidden. */
.thus-subscribe__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* In the banner it sits under the copy; on its own it does not. */
.thus-banner .thus-subscribe { margin-top: 16px; }

/* No image: one column, text only. */
.thus-banner:not(:has(.thus-banner__media)) {
	grid-template-columns: 1fr;
}

@media (max-width: 640px) {
	.thus-banner {
		grid-template-columns: 1fr;
		width: 100%;
		border-radius: 0;
		min-height: 0;
		max-height: 85vh;
	}
	/* Image first whichever side it sits on, so the picture is what
	   arrives from the bottom edge first. */
	.thus-banner__media { order: 1 !important; height: 130px; }

	/* Without a picture cut for this shape, show none. A square image in a
	   600x130 strip survives as its middle 22% — usually the wrong 22%. */
	.thus-banner--no-phone-image .thus-banner__media { display: none; }

	/* Everything a size down. On a phone the banner covers the article
	   rather than sitting beside it, so it should ask for as little of the
	   screen as it can and still be legible. Less bottom padding than top:
	   the button already carries its own visual weight down there. */
	.thus-banner__body {
		order: 2 !important;
		padding: 18px 18px 14px;
	}

	.thus-banner__title  { font-size: 1.2em; margin-bottom: 7px; }
	.thus-banner__text   { font-size: 0.85em; line-height: 1.45; }
	.thus-banner .thus-subscribe          { margin-top: 12px; gap: 7px; }
	.thus-banner .thus-subscribe__input   { padding: 7px 10px; font-size: 0.85em; }
	.thus-banner .thus-subscribe__submit  { padding: 8px 14px; font-size: 0.72em; }
	.thus-banner .thus-subscribe__note    { font-size: 0.8em; }
	.thus-banner__close  { top: 8px; right: 8px; width: 28px; height: 28px; }
}

/* Short viewports: the picture is the first thing to go. */
@media (max-height: 520px) {
	.thus-banner__media { display: none; }
	.thus-banner { grid-template-columns: 1fr; min-height: 0; max-height: 90vh; }
}