/**
 * Only what theme.json cannot express.
 *
 * Every value here is a token. Nothing in this file introduces a new colour,
 * size or spacing value. If a rule needs one, the token is missing from
 * theme.json and belongs there instead.
 */

/* The focus ring, one definition for the whole theme.
   :focus-visible only, so it appears for keyboard users and not on mouse clicks. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Remove the ring for pointer users without removing it for keyboards. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* Skip link. Visible only once focused. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--label);
	text-decoration: underline;
	transform: translateY(-100%);
}

.skip-link:focus-visible {
	transform: translateY(0);
}

/* Links carry an underline that sits below the letterforms rather than through them.
   Scoped to the link itself rather than to a content wrapper: the editor canvas does
   not wrap blocks in .entry-content, so a wrapper scope would style the front end
   and not the editor, and the two would drift. */
a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content)) {
	text-underline-position: from-font;
	text-underline-offset: 0.12em;
	/* theme.json has no textDecorationThickness property, so the thickness has to
	   live here. Only the underline changes between rest and hover: the colour
	   stays put so a link reads the same in either colour mode. */
	text-decoration-thickness: var(--wp--custom--underline--rest);
	transition: text-decoration-thickness var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content)):hover {
	text-decoration-thickness: var(--wp--custom--underline--hover);
	text-underline-offset: 0.1em;
}

/* Buttons and interactive colour changes share one timing. */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--enter),
		color var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.98);
}

/* A disabled control reads as unavailable without introducing a grey that is not
   in the palette: the quiet fill and the muted ink already exist for this. */
.wp-element-button:disabled,
.wp-block-button__link:disabled,
.wp-element-button[aria-disabled="true"],
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
	background-color: var(--wp--preset--color--line-subtle);
	border-color: var(--wp--preset--color--line-subtle);
	color: var(--wp--preset--color--contrast-muted);
	cursor: not-allowed;
}

.wp-element-button:disabled:active,
.wp-block-button__link:disabled:active {
	transform: none;
}

/* The outline button keeps its shape when disabled, only quieter. */
.is-style-outline .wp-block-button__link:disabled {
	background-color: transparent;
}

/* A visited link looks exactly like an unvisited one. The rule is stated rather
   than left out, so nobody later adds a colour and calls it a fix. Buttons are
   left out of it: inheriting the text around them would put dark words on a
   filled button once its page had been visited. */
a:where(:not(.wp-element-button)):visited {
	color: inherit;
}

/* Unordered lists use a square marker in the drawing colour, not a disc.
   Scoped to ul: an ordered list keeps its numerals. */
:where(ul.wp-block-list):not([style*="list-style-type"]) {
	list-style: none;
	padding-left: 0;
}

:where(ul.wp-block-list):not([style*="list-style-type"]) > li {
	position: relative;
	padding-left: var(--wp--preset--spacing--24);
}

:where(ul.wp-block-list):not([style*="list-style-type"]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	/* Optically centred on the first line of body text. */
	top: 0.62em;
	width: var(--wp--custom--marker--square);
	height: var(--wp--custom--marker--square);
	background-color: var(--wp--preset--color--line);
}

/* Ordered lists keep their numerals, set in the label weight. */
:where(ol.wp-block-list) > li::marker {
	font-weight: 500;
}

/* Pull quote: rules above and below only, text left aligned at the large
   heading size. Core centres it and sets its own size, so both are reset. */
.wp-block-pullquote {
	text-align: start;
}

.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: start;
}

.wp-block-pullquote cite {
	font-size: var(--wp--preset--font-size--body-s);
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}

/* Table: horizontal rules only, no fills, no vertical lines, no outer frame.
   Core draws a full grid at .wp-block-table td specificity, so these selectors
   are deliberately specific enough to win rather than relying on :where(). */
.wp-block-table table {
	border-collapse: collapse;
	border: 0;
}

.wp-block-table table :is(th, td) {
	border: 0;
	padding: var(--wp--preset--spacing--12) 0;
}

.wp-block-table table :is(thead, tbody, tfoot, tr) {
	border: 0;
}

.wp-block-table table th {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.005em;
	text-align: start;
	border-bottom: var(--wp--custom--stroke--line) solid var(--wp--preset--color--line);
}

.wp-block-table table td {
	border-bottom: var(--wp--custom--stroke--construction) solid var(--wp--preset--color--line-subtle);
}

/* A cell beside another needs breathing room now that no rule divides them. */
.wp-block-table table :is(th, td) + :is(th, td) {
	padding-left: var(--wp--preset--spacing--24);
}

/* The current page marker: a turmeric triangle pointing up, centred under the
   label. One shape, reused by the navigation, list rows and the contents list,
   so "current" looks the same everywhere on the site.
   Hover shows it at four tenths; the current page shows it in full. */
.wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(100% + var(--wp--preset--spacing--4));
	width: var(--wp--custom--marker--triangle-width);
	height: var(--wp--custom--marker--triangle-height);
	transform: translateX(-50%);
	background-color: var(--wp--preset--color--accent);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	opacity: 0;
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

.wp-block-navigation-item__content:hover::after {
	opacity: 0.4;
}

.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
.wp-block-navigation-item__content[aria-current="page"]::after {
	opacity: 1;
}

/* Inside an open submenu the items stack, so the marker would sit on the row
   below. There it slides in beside the text instead, pointing the way. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	left: calc(var(--wp--preset--spacing--12) * -1);
	top: 50%;
	width: var(--wp--custom--marker--triangle-height);
	height: var(--wp--custom--marker--triangle-width);
	transform: translateY(-50%);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Form labels, help text and error messages. Core has no form block that emits
   these, so they are styled on the elements themselves and on two named classes
   the theme and its plugins can both use. */
:where(form) label,
.resha-field-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.429;
}

/* Help sits under the field, quieter than the field itself. */
.resha-field-help {
	display: block;
	margin-top: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5625;
}

/* An error message is full ink, not red, so it reads louder than help without
   relying on colour to carry the meaning. */
.resha-field-error {
	display: block;
	margin-top: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5625;
}

/* Inline text. Emphasis is weight, never italic: Anek Latin has no true italic
   and a synthesised one is a slant, not a typeface. */
:where(strong, b) {
	font-weight: 500;
}

:where(em, i) {
	font-style: normal;
	font-weight: 500;
}

mark {
	padding: 1px var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

kbd {
	padding: 1px var(--wp--preset--spacing--8) 3px;
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--code);
	line-height: 1;
}

/* Inline code takes the size of the sentence it sits in, which is why it has no
   style of its own in the type scale. */
:not(pre) > code {
	padding: 2px var(--wp--preset--spacing--4);
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line-subtle);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
}

/* Form fields. Square corners, a drawn border, and a focus state that thickens
   the border in the accent colour rather than adding a separate ring. */
:where(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) {
	min-height: var(--wp--custom--field--height);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--square);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: 1.611;
	transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

:where(input, select, textarea)::placeholder {
	color: var(--wp--preset--color--contrast-muted);
	opacity: 1;
}

/* The focus state replaces the border rather than adding an outline beside it. */
:where(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):focus-visible {
	border-color: var(--wp--preset--color--accent);
	border-width: var(--wp--custom--focus--width);
	outline: none;
}

/* An invalid field thickens its border in the same ink. No red, no shaking. */
:where(input, select, textarea)[aria-invalid="true"] {
	border-width: var(--wp--custom--stroke--error);
}

/* Block rules that have to beat core.
   WordPress wraps theme.json block CSS in :root :where(...), which strips its
   specificity to almost nothing, so anything that overrides a core block style
   loses from there. These live here instead, where they carry real weight.
   This file loads in the editor canvas as well, so both surfaces agree. */

/* Captions sit below their figure, left aligned, in muted ink. */
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption {
	margin-top: var(--wp--preset--spacing--8);
	margin-bottom: 0;
	text-align: start;
}

/* Square corners on everything you look at. */
.wp-block-image img,
.wp-block-gallery .wp-block-image img,
.wp-block-embed iframe,
.wp-block-video video,
.wp-block-cover {
	border-radius: var(--wp--custom--radius--square);
}

.wp-block-image img,
.wp-block-video video {
	display: block;
}

/* Details: the turmeric triangle replaces the browser marker and turns to point
   down when the section opens. */
.wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.005em;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::before {
	content: "";
	flex: none;
	width: var(--wp--custom--marker--triangle-height);
	height: var(--wp--custom--marker--triangle-width);
	background-color: var(--wp--preset--color--accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: transform var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

.wp-block-details[open] > summary::before {
	transform: rotate(90deg);
}

.wp-block-details[open] > summary {
	margin-bottom: var(--wp--preset--spacing--12);
}

/* File: the download is a secondary button, with the type and size in the label
   so nobody downloads blind. */
.wp-block-file {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	flex-wrap: wrap;
}

.wp-block-file .wp-block-file__button {
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.005em;
}

.wp-block-file .wp-block-file__button:hover {
	background-color: var(--wp--preset--color--line-subtle);
	color: var(--wp--preset--color--contrast);
}

/* Social links are words, not logos. The set survives a rebrand and reads
   properly to a screen reader. Core paints each service its brand colour and
   hides the label, so both are undone here. */
.wp-block-social-links .wp-social-link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	padding: 0;
}

.wp-block-social-links .wp-social-link svg {
	display: none;
}

.wp-block-social-links .wp-social-link a {
	display: inline-flex;
	padding: 0;
	color: var(--wp--preset--color--contrast);
}

/* Core sizes the label at .65em of its 24px icon size, from a selector that
   includes .has-visible-labels. Matching that selector is the only way to set
   the size, so it is repeated here rather than reached for with !important. */
.wp-block-social-links .wp-social-link .wp-block-social-link-label,
.wp-block-social-links.has-visible-labels .wp-social-link .wp-block-social-link-label {
	position: static;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: 1.611;
	text-decoration: underline;
	text-underline-position: from-font;
	text-underline-offset: 0.12em;
	text-decoration-thickness: var(--wp--custom--underline--rest);
}

.wp-block-social-links .wp-social-link a:hover .wp-block-social-link-label {
	text-decoration-thickness: var(--wp--custom--underline--hover);
}

/* Comments. This site keeps them closed, but Resha ships publicly and a theme
   with no comment styling looks broken the moment someone enables them.
   A thread, not a card stack: a reply is indented with a quiet rule down its
   left edge, so depth reads without boxes. */
.wp-block-comment-template li {
	padding-block: var(--wp--preset--spacing--24);
	border-top: var(--wp--custom--stroke--construction) solid var(--wp--preset--color--line-subtle);
	list-style: none;
}

.wp-block-comment-template li ol {
	margin-left: var(--wp--preset--spacing--32);
	padding-left: var(--wp--preset--spacing--24);
	border-left: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line-subtle);
	list-style: none;
}

.wp-block-comment-author-name a {
	text-decoration: none;
}

/* A comment awaiting approval says so rather than simply not appearing. */
.comment-awaiting-moderation {
	display: block;
	margin-top: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--body-s);
}

/* The reply form uses the same field anatomy as every other form. */
.wp-block-post-comments-form .comment-form textarea,
.wp-block-post-comments-form .comment-form input:not([type="submit"]):not([type="checkbox"]) {
	width: 100%;
}

.wp-block-post-comments-form .comment-reply-title {
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 600;
	line-height: 1.25;
}

.wp-block-post-comments-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
}

.wp-block-post-comments-form .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 400;
	letter-spacing: 0;
}

/* Pagination: the current page is stated, not merely coloured. */
.wp-block-query-pagination-numbers .page-numbers.current {
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--underline--hover);
	text-underline-offset: 0.12em;
}

/* Media and text: the words sit clear of the picture. */
.wp-block-media-text .wp-block-media-text__content {
	padding: 0 0 0 var(--wp--preset--spacing--32);
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding: 0 var(--wp--preset--spacing--32) 0 0;
}

.wp-block-media-text img {
	border-radius: var(--wp--custom--radius--square);
}

/* Media and text stacks below 834, where the design puts the break. Core stacks
   it at 600 using !important on the grid columns, so the only way to move the
   breakpoint is to match that specificity. This is the one !important in the
   theme and it exists solely to answer core's own. */
@media ( max-width: 833px ) {
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
	}

	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
		padding: var(--wp--preset--spacing--24) 0 0 0;
	}

	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}
}

/* Nothing moves for a reader who asked for stillness. */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* The outline button is drawn in the surrounding ink (theme.json), so it is
   already right on both surfaces. Only its hover fill differs: fog on paper,
   the inverse fog on blue. theme.json cannot say this, because WordPress does
   not emit block variations nested inside a section style. */
.is-style-inverse .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--inverse-line-subtle);
}

/* The scrollbar, in the theme's own inks: a thin muted thumb on the page's
   paper. Browsers that ignore these keep their own scrollbar. */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--contrast-muted) var(--wp--preset--color--base);
}