/**
 * Haat — base layer.
 *
 * Reset, typography, focus, and the WordPress core classes every theme is
 * required to style. Reads tokens.css; defines no colours of its own.
 *
 * @package Haat
 */

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var( --haat-border );
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

/* A page-wide horizontal-scroll safety net. Individual sections still clip
 * their own decorations; anything that escapes one (an absolutely positioned
 * blob, an over-wide embed) is contained here so the whole document never gains
 * a horizontal scrollbar. `clip` rather than `hidden` because `overflow:hidden`
 * on the root silently kills position:sticky for every descendant, which would
 * take the sticky header with it. */
html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	background: var( --haat-background );
	color: var( --haat-foreground );
	font-family: var( --haat-font-body );
	font-size: var( --haat-text-base );
	line-height: 1.65;

	/*
	 * A word with no break opportunity in it must break anyway.
	 *
	 * `overflow-wrap` INHERITS, so setting it once here reaches every title,
	 * excerpt, comment and widget rather than needing a rule per surface -- and
	 * the next surface somebody adds is covered without anyone remembering.
	 *
	 * This pairs with the overflow-x: clip above, which is what made the
	 * default so damaging: without a break opportunity a long title overflowed
	 * its column, and the clip then ATE the overflow instead of letting it
	 * scroll, so the text was simply gone. Measured before the fix: a 2594px
	 * post title in a 358px column on mobile, and a 1945px product title.
	 * wordpress.org flagged it on ticket #2.
	 *
	 * `break-word`, not `word-break: break-all`: break-all chops ordinary prose
	 * mid-word at the end of every line. This one only breaks a word that would
	 * otherwise overflow, so normal titles are untouched.
	 */
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var( --haat-font-display );
	font-weight: var( --haat-weight-bold );
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var( --haat-foreground );
	text-wrap: balance;
}

h1 { font-size: var( --haat-text-5xl ); letter-spacing: -0.025em; }
h2 { font-size: var( --haat-text-4xl ); }
h3 { font-size: var( --haat-text-3xl ); }
h4 { font-size: var( --haat-text-2xl ); }
h5 { font-size: var( --haat-text-xl ); }
h6 { font-size: var( --haat-text-lg ); }

p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
	margin: 0 0 1.25rem;
}

a {
	color: var( --haat-primary );
	text-decoration: none;
	transition: color var( --haat-duration-fast ) var( --haat-ease-out );
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

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

/* Media inside prose keeps baseline alignment; media used as a layout box does
 * not. Restoring inline here rather than dropping `display:block` above avoids
 * the descender gap under every card image in the grid. */
.haat-entry__content img,
.haat-entry__content video {
	display: inline-block;
}

button,
input,
select,
textarea,
optgroup {
	font: inherit;
	color: inherit;
	margin: 0;
}

button:not( :disabled ),
[role="button"]:not( [aria-disabled="true"] ),
summary,
label[for] {
	cursor: pointer;
}

blockquote {
	padding-left: 1.25rem;
	border-left: 3px solid var( --haat-primary );
	font-size: var( --haat-text-lg );
	color: var( --haat-muted-foreground );
}

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

code {
	padding: 0.15em 0.4em;
	background: var( --haat-muted );
	border-radius: var( --haat-radius-sm );
}

pre {
	padding: 1rem 1.25rem;
	overflow-x: auto;
	background: var( --haat-muted );
	border-radius: var( --haat-radius-md );
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var( --haat-border );
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var( --haat-border );
}

th {
	font-weight: var( --haat-weight-semibold );
}

/* ── Focus ────────────────────────────────────────────────────────────────
 * :focus-visible only, so a mouse click never paints a ring, but every
 * keyboard tab does. The outline is offset rather than inset so it stays
 * visible against a card edge or an image. */
:focus-visible {
	outline: 2px solid var( --haat-ring );
	outline-offset: 2px;
	border-radius: var( --haat-radius-sm );
}

/* ── Accessibility helpers ───────────────────────────────────────────────*/
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: var( --haat-z-toast );
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: var( --haat-surface );
	color: var( --haat-foreground );
	border-radius: var( --haat-radius-md );
	box-shadow: var( --haat-shadow-pop );
}

/* A programmatically focused landmark must not draw a focus ring: the user
 * asked to jump here, they did not Tab to it, and an outline around the whole
 * page reads as a rendering fault. */
.haat-main:focus {
	outline: none;
}

.skip-link:focus {
	text-decoration: none;
	font-weight: var( --haat-weight-semibold );
}

/* ── WordPress core classes ──────────────────────────────────────────────*/
.alignleft {
	float: left;
	margin: 0.35rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: min( 100%, calc( var( --haat-page-width ) - 8rem ) );
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	/* Breaks out of the content column back to the viewport edge without
	 * needing a JS measurement or a negative margin tied to a fixed width. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5rem;
}

/* .gallery-caption is one of the core classes a theme is expected to style --
 * WordPress emits it for [gallery] shortcode captions, and Theme Check reports
 * its absence. It shares every value with the other caption types. */
.wp-caption-text,
.wp-element-caption,
.gallery-caption,
figcaption {
	margin-top: 0.5rem;
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
	text-align: center;
}

.sticky .haat-post-card__title::after {
	content: "\2605";
	margin-left: 0.4em;
	color: var( --haat-accent );
}

.bypostauthor > .comment-body .fn::after {
	content: "\2713";
	margin-left: 0.35em;
	color: var( --haat-success );
}

.gallery {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: 0.75rem;
}

.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 img {
	border-radius: var( --haat-radius-md );
}

/* ── Forms ───────────────────────────────────────────────────────────────*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	background: var( --haat-surface );
	color: var( --haat-foreground );
	border: 1px solid var( --haat-input );
	border-radius: var( --haat-radius-md );
	transition: border-color var( --haat-duration-fast ) var( --haat-ease-out ),
		box-shadow var( --haat-duration-fast ) var( --haat-ease-out );
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var( --haat-primary );
	box-shadow: 0 0 0 3px color-mix( in oklab, var( --haat-primary ) 18%, transparent );
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

::placeholder {
	color: var( --haat-muted-foreground );
	opacity: 0.75;
}

/* ── Motion ──────────────────────────────────────────────────────────────
 * One global stop for everyone who has asked their system to reduce motion.
 * Scoped to animation and transition rather than blanket-disabling transforms,
 * so layout that depends on a transform still renders. */
@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;
	}
}