/**
 * Mara Wonder widgets.
 *
 * Every value here comes from the theme's design system. Nothing is
 * hardcoded, so a brand change still propagates from one file — and the
 * contrast rules measured there hold automatically: text is ink, the action
 * is tan with an ink label, the focus ring is ink.
 */

.mwc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Filters ------------------------------------------------------------ */

.mwc-filters {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-block-end: var(--space-m);
}

.mwc-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
}

.mwc-filters__label {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--step-small);
	color: var(--color-text-muted);
	margin-inline-end: var(--space-2xs);
}

/* Two classes deep on purpose. Elementor's kit carries
   `.elementor-kit-N button { background-color: … }`, which is more specific
   than a single class and was painting every filter with the primary colour —
   selected and unselected alike, so nothing showed which one was active. */
.mwc-filters .mwc-chip {
	min-height: var(--tap-target);
	padding: var(--space-3xs) var(--space-s);
	background-color: var(--numo-paper);
	color: var(--numo-ink);
	font-size: var(--step-small);
	border: 2px solid var(--color-hairline);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--duration-quick) var(--ease-soft),
		border-color var(--duration-quick) var(--ease-soft);
}

.mwc-filters .mwc-chip:hover {
	border-color: var(--numo-ink);
}

/* The chosen filter is marked by its edge and its weight, not by a fill. A
   row of eight tan pills outshouted the covers, which are the thing to look
   at; and paper on paper keeps the whole row quiet. */
.mwc-filters .mwc-chip.is-active {
	background-color: var(--numo-paper);
	border-color: var(--numo-ink);
	color: var(--numo-ink);
	font-weight: var(--weight-body-bold);
}

.mwc-books__count {
	font-size: var(--step-small);
	color: var(--color-text-muted);
	min-height: 1.5em;
	margin-block: 0 var(--space-2xs);
}

.mwc-books__empty {
	padding: var(--space-m);
	text-align: center;
	color: var(--color-text-muted);
	border: 2px dashed var(--color-hairline);
	border-radius: var(--radius-m);
	max-width: none;
}

/* --- Grid --------------------------------------------------------------- */

.mwc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mwc-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	max-width: none;
}

.mwc-card[hidden] {
	display: none;
}

.mwc-card__cover img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-soft);
}

.mwc-card__title {
	font-size: var(--step-1);
	margin: 0;
}

.mwc-card__meta {
	font-size: var(--step-small);
	color: var(--color-text-muted);
	margin: 0;
	max-width: none;
}

.mwc-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-target);
	margin-block-start: auto;
	padding: var(--space-3xs) var(--space-s);
	background-color: var(--color-action-bg);
	color: var(--color-action-text);
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--step-small);
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius-pill);
	transition: background-color var(--duration-quick) var(--ease-soft);
}

.mwc-card__link:hover,
.mwc-card__link:focus-visible {
	background-color: var(--color-action-bg-hover);
}

/* --- Two ways to get the same title -------------------------------------
   Paper and printable sit side by side rather than one above the other, so
   neither reads as the afterthought. The filled button is the paperback,
   because that is what most people came looking for; the outlined one is the
   printable. Swapping them is a one-line change if the balance shifts.
   ---------------------------------------------------------------------- */

.mwc-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-block-start: auto;
}

.mwc-card__links .mwc-card__link {
	margin-block-start: 0;
	flex: 1 1 auto;
}

.mwc-card__link--ghost {
	background-color: transparent;
	color: var(--numo-ink);
	box-shadow: inset 0 0 0 2px var(--numo-tan);
}

.mwc-card__link--ghost:hover,
.mwc-card__link--ghost:focus-visible {
	background-color: var(--numo-tan);
	color: var(--numo-ink);
}

/* --- The carousel --------------------------------------------------------
   No slider library: a scroll-snapping row. Touch swiping and momentum come
   free from the browser, it works with the keyboard, and it still works with
   JavaScript off — the arrows are the only part that needs it.

   The point of the layout is the peek. Cards are sized a little narrower
   than an even division, so the next cover is always half-showing. That half
   cover is what tells a visitor the collection continues; without it, four
   books look like the whole catalogue.
   ---------------------------------------------------------------------- */

.mwc-rail {
	position: relative;
}

.mwc-grid--carousel {
	--mwc-card-width: 46%;

	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block-end: var(--space-2xs);
	scrollbar-width: thin;
}

@media (min-width: 48em) {
	.mwc-grid--carousel { --mwc-card-width: 27%; }
}

@media (min-width: 64em) {
	.mwc-grid--carousel { --mwc-card-width: 21%; }
}

.mwc-grid--carousel .mwc-card {
	flex: 0 0 var(--mwc-card-width);
	scroll-snap-align: start;
}

.mwc-grid--carousel:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.mwc-grid--carousel { scroll-behavior: auto; }
}

/* The arrows are an extra, not the way in: the row scrolls without them. */
.mwc-rail__nav {
	position: absolute;
	top: 38%;
	z-index: 2;
	display: none;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	font-size: var(--step-1);
	line-height: 1;
	color: var(--numo-ink);
	background-color: var(--numo-paper);
	border: 0;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-soft);
	cursor: pointer;
}

.mwc-rail__nav:hover { background-color: var(--numo-tan); }

.mwc-rail__nav--prev { left: calc(-1 * var(--space-s)); }
.mwc-rail__nav--next { right: calc(-1 * var(--space-s)); }

.mwc-rail__nav[hidden] { display: none; }

/* Shown only where there is a pointer to use them; on a phone you swipe. */
@media (min-width: 48em) and (hover: hover) {
	.mwc-rail__nav { display: block; }
}

/* --- The button to the rest ---------------------------------------------- */

.mwc-books__all {
	margin-block-start: var(--space-m);
	text-align: center;
	max-width: none;
}

.mwc-books__all-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-target);
	padding: var(--space-2xs) var(--space-xl);
	background-color: var(--color-action-bg);
	color: var(--color-action-text);
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	text-decoration: none;
	border-radius: var(--radius-pill);
	transition: background-color var(--duration-quick) var(--ease-soft);
}

.mwc-books__all-link:hover,
.mwc-books__all-link:focus-visible {
	background-color: var(--color-action-bg-hover);
}

/* --- Amazon button styles ------------------------------------------------
   The covers are saturated and busy, and they are already the call to
   action. Five solid pills under them made a heavy band that competed with
   the artwork, and tan beside those reds and blues read as a muddy brown.
   These lighter options let the covers lead. Every one measures AA:
     outline and solid ink   12.89:1
     ink hover #54443B        9.11:1
     text link #6B5A50        6.44:1
   ---------------------------------------------------------------------- */

.mwc-card__cover a {
	display: block;
	border-radius: var(--radius-s);
}

.mwc-card__cover a img {
	transition: transform var(--duration-quick) var(--ease-soft);
}

.mwc-card__cover a:hover img {
	transform: translateY(-3px);
}

/* Outline — the default. */
.mwc-card__links--outline .mwc-card__link {
	min-height: 2.5rem;
	background-color: transparent;
	color: var(--numo-ink);
	box-shadow: inset 0 0 0 1.5px var(--numo-ink);
	font-family: var(--font-body);
	font-weight: var(--weight-body-bold);
}

.mwc-card__links--outline .mwc-card__link:hover,
.mwc-card__links--outline .mwc-card__link:focus-visible {
	background-color: var(--numo-ink);
	color: var(--numo-paper);
}

/* Solid ink. */
.mwc-card__links--ink .mwc-card__link {
	min-height: 2.5rem;
	background-color: var(--numo-ink);
	color: var(--numo-paper);
	font-family: var(--font-body);
	font-weight: var(--weight-body-bold);
}

.mwc-card__links--ink .mwc-card__link:hover,
.mwc-card__links--ink .mwc-card__link:focus-visible {
	background-color: #54443b;
	color: var(--numo-paper);
}

/* Text link. Still a 44px target: small text is fine, a small target is not. */
.mwc-card__links--text .mwc-card__link {
	justify-content: flex-start;
	flex: 0 0 auto;
	min-height: var(--tap-target);
	padding: 0;
	background-color: transparent;
	color: var(--color-text-muted);
	box-shadow: none;
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	border-radius: 0;
}

.mwc-card__links--text .mwc-card__link::after {
	content: "\2009\2192";
}

.mwc-card__links--text .mwc-card__link:hover,
.mwc-card__links--text .mwc-card__link:focus-visible {
	background-color: transparent;
	color: var(--numo-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Tan keeps its original rule; nothing to add. */

@media (prefers-reduced-motion: reduce) {
	.mwc-card__cover a:hover img { transform: none; }
}

/* ==========================================================================
   Numo Antennae
   ==========================================================================
   Two dots sit on top of the drawing at measured positions. The positions are
   percentages so the scene scales without them drifting: the widget exposes
   them as controls, because the moment the artwork is redrawn they will be
   wrong and nobody should need a developer to move them.
   ========================================================================== */

.mwc-ant {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mwc-ant__scene {
	position: relative;
	width: min(100%, 19rem);

	/* Overridden by the widget's controls. */
	--mwc-ant-lx: 45.8%;
	--mwc-ant-ly: 4.3%;
	--mwc-ant-rx: 66.9%;
	--mwc-ant-ry: 5.5%;
	--mwc-ant-size: 7.8%;
}

.mwc-ant__scene img {
	display: block;
	width: 100%;
	height: auto;
}

.mwc-ant__dot {
	position: absolute;
	width: var(--mwc-ant-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--mwc-ant-c, #f2ede1);
	transform: translate(-50%, -50%);

	/* The watercolour has a highlight and a shadow on every round shape;
	   a flat disc would read as a sticker pasted on the painting. */
	box-shadow:
		inset -1px -2px 3px rgba(0, 0, 0, 0.18),
		inset 2px 2px 4px rgba(255, 255, 255, 0.55);
	transition: background var(--duration-calm, 320ms) var(--ease-soft, ease);
}

.mwc-ant__dot--l {
	left: var(--mwc-ant-lx);
	top: var(--mwc-ant-ly);
}

.mwc-ant__dot--r {
	left: var(--mwc-ant-rx);
	top: var(--mwc-ant-ry);
}

.mwc-ant__states {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, 0.5rem);
	justify-content: center;
	margin-block: var(--space-m, 1.5rem) var(--space-s, 1rem);
}

.mwc-ant__state {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap-target, 2.75rem);
	padding: 0.3rem 1rem;
	font: inherit;
	font-size: var(--step-small, 0.9375rem);
	color: var(--color-text, #3a2e28);
	background: transparent;
	cursor: pointer;

	/* Two pixels, not one: the ring has to survive being the only thing that
	   marks the chosen state for someone who cannot tell the colours apart. */
	border: 2px solid var(--color-hairline, #e8ded0);
	border-radius: var(--radius-pill, 999px);
	transition:
		border-color var(--duration-quick, 160ms),
		background var(--duration-quick, 160ms);
}

.mwc-ant__state:hover {
	border-color: var(--color-text, #3a2e28);
}

.mwc-ant__state[aria-pressed="true"] {
	border-color: var(--color-text, #3a2e28);
	background: #f7f0e4;
	font-weight: var(--weight-body-bold, 700);
}

/* Listening is the adult's colour, not one of Numo's, so it gets a row of
   its own rather than a gap. A margin would only tilt it out of line once
   the row wrapped, which is what happens on a phone. */
.mwc-ant__break {
	flex-basis: 100%;
	height: 0;
}

.mwc-ant__state.is-apart {
	margin-block-start: var(--space-2xs, 0.5rem);
}

.mwc-ant__chip {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(58, 46, 40, 0.35);
}

.mwc-ant__line {
	max-width: var(--measure, 34rem);
	margin: 0;
	font-size: var(--step-1, 1.25rem);
	line-height: var(--leading-snug, 1.35);
}

.mwc-ant__note {
	max-width: var(--measure, 34rem);
	margin-block-start: var(--space-s, 1rem);
	font-size: var(--step-small, 0.9375rem);
	color: var(--color-text-muted, #6b5a50);
}

@media (prefers-reduced-motion: reduce) {
	.mwc-ant__dot,
	.mwc-ant__state {
		transition: none;
	}
}