/*
Theme Name: PIXIMIXI
Theme URI: https://piximixi.example/theme
Author: PIXIMIXI
Author URI: https://piximixi.example
Description: The PIXIMIXI brand theme — a toy circulation network for families. White first, with red and yellow as the only two interface hues. Ships the PIXI and MIXI characters as scalable SVG, a Toy Journey timeline, a role-swap loop, and block patterns for every homepage section. Fully bilingual: English and Persian with true RTL, using the theme's own translation files and no plugin. Built to sit in front of the PIXIMIXI application, which it links to from the header, hero and footer.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piximixi
Tags: blog, two-columns, right-sidebar, custom-logo, custom-menu, custom-colors, featured-images, translation-ready, rtl-language-support, block-patterns, threaded-comments, full-width-template, editor-style

PIXIMIXI is distributed under the terms of the GNU GPL v2 or later.

Normalising rules are adapted from normalize.css v8.0.1,
(c) Nicolas Gallagher and Jonathan Neal, MIT licensed.
*/

/* ==========================================================================
   Table of contents
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset and normalise
   3.  Base typography
   4.  Accessibility helpers
   5.  Layout primitives
   6.  Buttons
   7.  Cards and surfaces
   8.  Forms
   9.  Tables
   10. WordPress core classes
   11. Block editor output
   ========================================================================== */

/* ==========================================================================
   1. Design tokens

   The palette is the PIXIMIXI identity: white first, then red and yellow.
   Nothing else is chrome. The `leaf`/`sky`/`grape`/`peach`/`mint` hues exist
   only as data colours for category chips and charts.

   Every step of `--ink-*` clears WCAG AA (4.5:1) on white and on the tinted
   surfaces used across the theme. `--red` at #FF3B30 reads 3.55:1 against
   white text, which clears AA only at large sizes, so any filled surface
   carrying white body text uses `--red-solid` (4.78:1) instead. Same family,
   same impression, legible.
   ========================================================================== */

:root {
	color-scheme: light;

	/* Brand */
	--red: #ff3b30;
	--red-solid: #dc2a21;
	--red-bright: #ff4d4d;
	--red-ink: #b3261e;
	--sun: #ffd93d;
	--sun-soft: #fff1a8;
	--sun-ink: #7a681d;

	/* Data hues — categories and charts only, never chrome. */
	--leaf: #6bcb77;
	--leaf-ink: #2a7733;
	--sky: #4d96ff;
	--sky-ink: #2d68be;
	--grape: #845ec2;
	--grape-ink: #6b4ba0;
	--peach: #ff9671;
	--peach-ink: #ae4b29;
	--mint: #00c9a7;
	--mint-ink: #1c7666;

	/* Semantic. Deliberately outside the brand hues: on a red-branded page,
	   hue alone can no longer carry "error", so every danger surface also
	   carries an icon and an explicit verb. */
	--danger: #e5544b;
	--danger-ink: #a8241c;
	--success: #4caf50;
	--success-ink: #1b6b20;
	--caution: #ffb300;
	--caution-ink: #8a5a00;

	/* Ink */
	--ink: #202020;
	--ink-soft: #4a4a4a;
	--ink-muted: #5f5f5f;
	--ink-faint: #666063;

	/* Surfaces. Warm white, not grey: the page should read as paper, and
	   white is the brand's dominant colour rather than the absence of one. */
	--surface: #ffffff;
	--surface-raised: #ffffff;
	--surface-sunken: #fffdf7;
	--border-color: #f0ece3;
	--ring-color: #dc2a21;
	--hairline: rgba(0, 0, 0, 0.06);

	/* Gradients. The brand gradient *is* the brand idea: PIXI's red passing
	   to MIXI's yellow. It stops short of the pale end of the yellow so white
	   text stays readable across the whole sweep. */
	--cta-gradient: linear-gradient(115deg, #dc2a21 0%, #ff3b30 45%, #e0a100 100%);
	--warm-gradient: linear-gradient(115deg, #ff4d4d 0%, #ff9671 50%, #ffd93d 100%);
	--pixi-glow: linear-gradient(150deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 150, 113, 0.1) 100%);
	--mixi-glow: linear-gradient(150deg, rgba(255, 217, 61, 0.2) 0%, rgba(255, 241, 168, 0.28) 100%);
	--mesh:
		radial-gradient(at 10% 14%, rgba(255, 59, 48, 0.1) 0, transparent 48%),
		radial-gradient(at 88% 12%, rgba(255, 217, 61, 0.16) 0, transparent 46%),
		radial-gradient(at 80% 86%, rgba(255, 77, 77, 0.08) 0, transparent 48%),
		radial-gradient(at 16% 88%, rgba(255, 241, 168, 0.3) 0, transparent 50%);

	/* Type */
	--font-latin: "Baloo 2", "Trebuchet MS", system-ui, -apple-system, sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-fa: "Vazirmatn", "Tahoma", system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* A type scale, stated once so nothing drifts off it. */
	--step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
	--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
	--step-1: clamp(1.17rem, 1.11rem + 0.3vw, 1.35rem);
	--step-2: clamp(1.38rem, 1.27rem + 0.55vw, 1.75rem);
	--step-3: clamp(1.62rem, 1.42rem + 1vw, 2.3rem);
	--step-4: clamp(1.95rem, 1.6rem + 1.75vw, 3.1rem);
	--step-5: clamp(2.3rem, 1.7rem + 3vw, 4.2rem);

	/* Space */
	--gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
	--section-y: clamp(3.25rem, 2rem + 5vw, 5.5rem);
	--measure: 65ch;
	--content-width: 1200px;
	--header-height: 4.5rem;

	/* Radii — generous, because the audience is families, not enterprises. */
	--radius-sm: 0.625rem;
	--radius: 1rem;
	--radius-lg: 1.25rem;
	--radius-xl: 1.75rem;
	--radius-2xl: 2rem;
	--radius-pill: 999px;
	--radius-blob: 42% 58% 63% 37% / 41% 44% 56% 59%;

	/* Shadow. Soft and warm-neutral rather than grey-black. */
	--shadow-soft: 0 2px 8px -2px rgba(32, 32, 32, 0.07), 0 12px 32px -12px rgba(32, 32, 32, 0.12);
	--shadow-lift: 0 4px 12px -4px rgba(32, 32, 32, 0.09), 0 24px 48px -20px rgba(32, 32, 32, 0.18);
	--shadow-glow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 18px 40px -18px rgba(255, 59, 48, 0.45);

	/* The off-screen edge for the mobile drawer. Kept in a custom property so
	   one set of keyframes serves both writing directions. */
	--drawer-from: 100%;
}

[dir="rtl"] {
	--drawer-from: -100%;
}

/* ==========================================================================
   2. Reset and normalise
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 1rem);
	-moz-tab-size: 4;
	tab-size: 4;
}

body {
	margin: 0;
	min-height: 100dvh;
	background-color: var(--surface-sunken);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

/* Persian sets a little looser: the script carries more vertical detail and
   crowds at the line heights that suit Latin text. */
html[lang="fa"] body,
html[lang^="fa-"] body,
[dir="rtl"] body {
	font-family: var(--font-fa);
	line-height: 1.85;
}

main {
	display: block;
}

hr {
	height: 0;
	margin-block: 2.5rem;
	border: 0;
	border-top: 1px solid var(--border-color);
	color: inherit;
	overflow: visible;
}

pre,
code,
kbd,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

pre {
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background: var(--surface);
	overflow-x: auto;
	line-height: 1.55;
}

code:not(pre code) {
	padding: 0.15em 0.45em;
	border-radius: 0.375rem;
	background: rgba(255, 59, 48, 0.08);
	color: var(--red-ink);
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

b,
strong {
	font-weight: 800;
}

small {
	font-size: var(--step--1);
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

svg {
	fill: currentColor;
}

/* A safety net, and one worth understanding: an inline SVG that has a `viewBox`
   but no `width` or `height` resolves to 100% of its container, not to its
   drawn size. So a 20px icon whose sizing rule fails to load — or which is
   rendered somewhere that rule does not reach — becomes as wide as the page and
   as tall as its aspect ratio demands. Every icon in this theme ships explicit
   dimensions for that reason; this catches any that does not.

   `:where()` is doing real work here. Written as `svg:not([width])`, this rule
   would have a specificity of (0,2,1) and beat every class that sizes an SVG —
   which is not a safety net but a trap: it shrank the hero's handover arc to
   20px the first time it was written that way. Inside `:where()` the whole
   selector counts as (0,0,1), so any class at all overrides it, and it only
   applies where nothing else has an opinion. */
svg:where(:not([width]):not([height])) {
	inline-size: 1.25em;
	block-size: 1.25em;
}

iframe {
	border: 0;
}

figure {
	margin: 0;
}

ul,
ol {
	padding-inline-start: 1.25rem;
}

/* ==========================================================================
   3. Base typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.6em;
	font-family: var(--font-latin);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--ink);
}

/* The display face is a Latin one. In Persian the body face carries the
   headings too, so the page does not fall back mid-sentence. */
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
	font-family: var(--font-fa);
	letter-spacing: 0;
	line-height: 1.45;
}

h1 {
	font-size: var(--step-4);
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-2);
}

h4 {
	font-size: var(--step-1);
}

h5,
h6 {
	font-size: var(--step-0);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-muted);
}

p,
ul,
ol,
dl,
blockquote,
figure,
table,
pre {
	margin-block: 0 1.15em;
}

:is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: 0;
}

a {
	color: var(--red-ink);
	text-decoration-color: rgba(179, 38, 30, 0.35);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--red-solid);
	text-decoration-color: currentColor;
}

blockquote {
	margin-inline: 0;
	padding: 1.15rem 1.5rem;
	border-inline-start: 4px solid var(--sun);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--sun-soft);
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.55;
}

[dir="rtl"] blockquote {
	border-radius: var(--radius) 0 0 var(--radius);
}

blockquote > :last-child {
	margin-block-end: 0;
}

blockquote cite {
	display: block;
	margin-block-start: 0.65rem;
	font-size: var(--step--1);
	font-style: normal;
	font-weight: 700;
	color: var(--sun-ink);
}

address {
	font-style: normal;
}

::selection {
	background: rgba(255, 217, 61, 0.45);
	color: var(--ink);
}

/* Reading measure for prose. Wide things opt out in section 11. */
.entry-content > *,
.comment-content > * {
	max-inline-size: var(--measure);
	margin-inline: auto;
}

/* ==========================================================================
   4. Accessibility helpers
   ========================================================================== */

/* Required by the WordPress theme guidelines and used by every "read more"
   and icon-only control in the theme. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	display: block;
	top: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.9rem 1.4rem;
	clip: auto !important;
	clip-path: none;
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: var(--shadow-lift);
	color: var(--red-ink);
	font-size: var(--step-0);
	font-weight: 800;
	line-height: normal;
	text-decoration: none;
}

*:focus-visible {
	outline: 3px solid var(--ring-color);
	outline-offset: 2px;
	border-radius: 0.5rem;
}

/* Kept as a separate rule so a browser without :focus-visible support still
   shows a ring rather than nothing. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   5. Layout primitives
   ========================================================================== */

.pm-container {
	inline-size: 100%;
	max-inline-size: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.pm-container--narrow {
	max-inline-size: 820px;
}

.pm-section {
	padding-block: var(--section-y);
}

.pm-section--sunken {
	background: var(--surface-sunken);
}

.pm-section--paper {
	background: var(--surface);
}

.pm-stack > * + * {
	margin-block-start: var(--stack-space, 1rem);
}

/* Sibling groups are laid out with gap, never with per-element margins that
   collapse or double. */
.pm-grid {
	display: grid;
	gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
}

.pm-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.pm-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.pm-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.pm-section-heading {
	max-inline-size: 46rem;
	margin-inline: auto;
	text-align: center;
}

.pm-section-heading--start {
	margin-inline: 0;
	text-align: start;
}

.pm-eyebrow {
	display: block;
	margin-block-end: 0.6rem;
	color: var(--red-ink);
	font-family: var(--font-latin);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

[dir="rtl"] .pm-eyebrow {
	font-family: var(--font-fa);
	letter-spacing: 0;
}

.pm-section-heading p {
	margin-block-end: 0;
	color: var(--ink-soft);
	font-size: var(--step-1);
	line-height: 1.55;
}

.pm-lead {
	font-size: var(--step-1);
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}

.tabular {
	font-variant-numeric: tabular-nums;
}

/* Mirror-safe directional icon: flips automatically in RTL, so an arrow that
   means "onward" keeps meaning onward when the text runs the other way. */
[dir="rtl"] .pm-icon-directional {
	transform: scaleX(-1);
}

/* Reveal-on-scroll. The hidden state is only ever applied by JavaScript, so
   every word is visible without it — and the first frame of the page is the
   finished page, not a stack of empty boxes waiting on an observer. */
[data-reveal="pending"] {
	opacity: 0;
	transform: translateY(16px);
}

[data-reveal="shown"] {
	animation: pm-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

@keyframes pm-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

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

@keyframes pm-float {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-14px) rotate(3deg);
	}
}

@keyframes pm-blob-morph {
	0%,
	100% {
		border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	}

	50% {
		border-radius: 61% 39% 35% 65% / 58% 36% 64% 42%;
	}
}

@keyframes pm-drawer-in {
	from {
		transform: translateX(var(--drawer-from));
	}

	to {
		transform: translateX(0);
	}
}

@keyframes pm-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.pm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-block-size: 3rem;
	padding: 0.7rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--step-0);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease,
		border-color 0.15s ease, color 0.15s ease;
}

.pm-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.pm-btn:active {
	transform: translateY(0);
}

.pm-btn svg {
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
}

/* The primary button carries the handover gradient — PIXI's red passing to
   MIXI's yellow. It is the one place the brand idea is stated as colour. */
.pm-btn--primary {
	background-image: var(--cta-gradient);
	box-shadow: var(--shadow-glow);
	color: #fff;
}

.pm-btn--primary:hover,
.pm-btn--primary:focus {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 22px 46px -18px rgba(255, 59, 48, 0.55);
	color: #fff;
}

.pm-btn--secondary {
	border-color: var(--sun);
	background: var(--sun-soft);
	color: var(--sun-ink);
}

.pm-btn--secondary:hover,
.pm-btn--secondary:focus {
	background: var(--sun);
	color: #4a3a05;
}

.pm-btn--outline {
	border-color: rgba(179, 38, 30, 0.3);
	background: var(--surface);
	color: var(--red-ink);
}

.pm-btn--outline:hover,
.pm-btn--outline:focus {
	border-color: var(--red-solid);
	background: rgba(255, 59, 48, 0.06);
	color: var(--red-solid);
}

.pm-btn--ghost {
	background: transparent;
	color: var(--ink-soft);
}

.pm-btn--ghost:hover,
.pm-btn--ghost:focus {
	background: rgba(0, 0, 0, 0.04);
	color: var(--ink);
}

.pm-btn--lg {
	min-block-size: 3.5rem;
	padding: 0.85rem 2rem;
	font-size: var(--step-1);
}

.pm-btn--sm {
	min-block-size: 2.4rem;
	padding: 0.4rem 1rem;
	font-size: var(--step--1);
}

.pm-btn--block {
	inline-size: 100%;
}

.pm-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.pm-btn-row--center {
	justify-content: center;
}

/* ==========================================================================
   7. Cards and surfaces
   ========================================================================== */

.pm-card {
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-soft);
}

/* Border, fill, radius and shadow each say "separate object", so they are
   spent by role. A flat panel is not a lesser card; it is a different one. */
.pm-panel {
	padding: clamp(1.25rem, 1rem + 1vw, 2.25rem);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-2xl);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(8px);
}

.pm-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.75rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 59, 48, 0.1);
	color: var(--red-ink);
	font-size: var(--step--1);
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
}

a.pm-chip:hover,
a.pm-chip:focus {
	background: rgba(255, 59, 48, 0.18);
	color: var(--red-solid);
}

.pm-chip--sun {
	background: rgba(255, 217, 61, 0.3);
	color: var(--sun-ink);
}

.pm-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: var(--step--1);
	font-weight: 800;
	color: var(--ink-soft);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	inline-size: 100%;
	min-block-size: 3rem;
	padding: 0.7rem 1rem;
	border: 2px solid var(--border-color);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--step-0);
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
	min-block-size: 9rem;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--red-solid);
	box-shadow: 0 0 0 4px rgba(220, 42, 33, 0.12);
	outline: none;
}

::placeholder {
	color: var(--ink-faint);
	opacity: 1;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	font-family: inherit;
	font-size: var(--step-0);
}

input[type="checkbox"],
input[type="radio"] {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-inline-end: 0.5rem;
	accent-color: var(--red-solid);
	vertical-align: middle;
}

fieldset {
	margin-block-end: 1.15rem;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
}

legend {
	padding-inline: 0.5rem;
	font-weight: 800;
}

/* Errors are never hue alone: every danger surface carries a symbol and an
   explicit verb, because on a red-branded page red no longer means "wrong". */
.pm-form-error {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(168, 36, 28, 0.25);
	border-radius: var(--radius);
	background: rgba(229, 84, 75, 0.08);
	color: var(--danger-ink);
	font-size: var(--step--1);
	font-weight: 700;
}

.pm-form-success {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(27, 107, 32, 0.25);
	border-radius: var(--radius);
	background: rgba(76, 175, 80, 0.1);
	color: var(--success-ink);
	font-size: var(--step--1);
	font-weight: 700;
}

.pm-search-form {
	display: flex;
	gap: 0.5rem;
}

.pm-search-form label {
	flex: 1 1 auto;
	margin: 0;
}

/* ==========================================================================
   9. Tables
   ========================================================================== */

/* Wide content gets its own scroll container so the page body never scrolls
   sideways. */
.pm-table-scroll,
.wp-block-table {
	overflow-x: auto;
}

table {
	inline-size: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th,
td {
	padding: 0.7rem 0.9rem;
	border-block-end: 1px solid var(--border-color);
	text-align: start;
}

th {
	font-family: var(--font-latin);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

[dir="rtl"] th {
	font-family: var(--font-fa);
	letter-spacing: 0;
}

tbody tr:hover {
	background: var(--surface-sunken);
}

caption {
	padding-block-end: 0.6rem;
	color: var(--ink-muted);
	font-size: var(--step--1);
	text-align: start;
}

/* ==========================================================================
   10. WordPress core classes

   These are the classes WordPress itself emits — from the editor, from
   `wp_list_comments`, from galleries and captions. A theme that omits them
   looks broken the first time an author centres an image.
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0.4rem 1.5rem 1.15rem 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1.15rem 1.5rem;
}

[dir="rtl"] .alignleft {
	margin: 0.4rem 0 1.15rem 1.5rem;
}

[dir="rtl"] .alignright {
	margin: 0.4rem 1.5rem 1.15rem 0;
}

.aligncenter {
	display: block;
	margin-inline: auto;
	margin-block-end: 1.15rem;
	clear: both;
}

.alignnone {
	margin-block-end: 1.15rem;
}

@media (max-width: 40rem) {
	.alignleft,
	.alignright {
		float: none;
		margin-inline: auto;
	}
}

.wp-caption {
	max-inline-size: 100%;
	margin-block-end: 1.15rem;
}

.wp-caption img {
	border-radius: var(--radius);
}

.wp-caption-text,
figcaption,
.wp-element-caption {
	margin-block-start: 0.6rem;
	color: var(--ink-muted);
	font-size: var(--step--1);
	line-height: 1.5;
	text-align: center;
}

.gallery {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	margin-block-end: 1.15rem;
}

.gallery-columns-1 {
	grid-template-columns: 1fr;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-item {
	margin: 0;
	text-align: center;
}

.gallery-item img {
	inline-size: 100%;
	border-radius: var(--radius-sm);
}

.gallery-caption {
	font-size: var(--step--1);
	color: var(--ink-muted);
}

/* `sticky` and `bypostauthor` are required by the theme guidelines; both are
   given a real visual meaning rather than an empty declaration. */
.sticky > .pm-entry-inner::before {
	content: "★";
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1.25rem;
	color: var(--sun-ink);
	font-size: 1.15rem;
	line-height: 1;
}

.bypostauthor > .pm-comment-body {
	border-color: rgba(255, 59, 48, 0.3);
	background: rgba(255, 59, 48, 0.04);
}

.pm-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-block: 2rem;
	font-weight: 800;
}

.pm-page-links a,
.pm-page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--surface);
	text-decoration: none;
}

.pm-page-links .post-page-numbers.current {
	border-color: var(--red-solid);
	background: var(--red-solid);
	color: #fff;
}

/* ==========================================================================
   11. Block editor output

   Enough to keep the block editor's own markup coherent with the theme.
   `theme.json` carries the palette, type scale and spacing the editor offers;
   these rules style what it emits.
   ========================================================================== */

/* Wide and full blocks step outside the reading measure set in section 3. */
.entry-content > .alignwide {
	max-inline-size: min(1100px, 100%);
}

.entry-content > .alignfull {
	max-inline-size: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--gutter);
}

.entry-content > .wp-block-table,
.entry-content > .wp-block-code,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-image,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-cover {
	max-inline-size: min(1100px, 100%);
}

.wp-block-image img {
	border-radius: var(--radius);
}

.wp-block-quote {
	margin-inline: 0;
	padding: 1.15rem 1.5rem;
	border-inline-start: 4px solid var(--sun);
	background: var(--sun-soft);
}

.wp-block-pullquote {
	padding: 1.75rem;
	border-block: 3px solid var(--red);
	background: none;
	text-align: center;
}

.wp-block-separator {
	max-inline-size: 6rem;
	margin-inline: auto;
	border: 0;
	border-top: 3px solid var(--sun);
	opacity: 1;
}

.wp-block-separator.is-style-wide {
	max-inline-size: 100%;
}

.wp-block-button__link {
	padding: 0.7rem 1.5rem;
	border-radius: var(--radius-pill);
	background-image: var(--cta-gradient);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: none;
	border: 2px solid var(--red-solid);
	color: var(--red-ink);
}

.wp-block-calendar table caption,
.wp-block-calendar table th {
	color: var(--ink-muted);
}

.wp-block-code {
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background: var(--surface);
}

.wp-block-file,
.wp-block-media-text {
	border-radius: var(--radius);
}

.wp-block-group.has-background {
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	border-radius: var(--radius-xl);
}

/* The editor lays these out itself; the theme only needs to keep list markers
   from being clipped inside a narrow column. */
.wp-block-latest-posts,
.wp-block-categories,
.wp-block-archives,
.wp-block-page-list {
	padding-inline-start: 1.1rem;
}