/* ==========================================================================
   CLOUDWRAITH - BASE
   Element-level styling. Everything resolves to a token from tokens.css.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--cw-void);
	color: var(--cw-text);
	font-family: var(--cw-font-body);
	font-size: var(--cw-text-size);
	line-height: var(--cw-leading);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* --- Headings ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
	font-family: var(--cw-font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: var(--cw-tracking-tight);
	color: var(--cw-text-strong);
	margin: 0 0 var(--cw-space-m);
	text-wrap: balance;
}

h1 { font-size: var(--cw-step-4); }
h2 { font-size: var(--cw-step-3); }
h3 { font-size: var(--cw-step-2); }
h4 { font-size: var(--cw-step-1); }
h5, h6 {
	font-size: 1rem;
	font-family: var(--cw-font-mono);
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
}

p { margin: 0 0 var(--cw-space-m); }

/* --- Links -------------------------------------------------------------- */

a {
	color: var(--cw-teal);
	text-decoration-color: var(--cw-hairline-strong);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--cw-dur-fast) var(--cw-ease),
	            text-decoration-color var(--cw-dur-fast) var(--cw-ease);
}

a:hover,
a:focus-visible {
	color: var(--cw-teal-bright);
	text-decoration-color: currentColor;
}

/* A visible focus ring is non-negotiable for keyboard users. */
:focus-visible {
	outline: 2px solid var(--cw-teal-bright);
	outline-offset: 3px;
	border-radius: var(--cw-radius-s);
}

:focus:not(:focus-visible) { outline: none; }

::selection {
	background: var(--cw-teal);
	color: var(--cw-void);
}

/* --- Body copy measure --------------------------------------------------- */

.entry-content > *,
.cw-prose > * {
	max-width: var(--cw-measure);
	margin-inline: auto;
}

.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > pre,
.entry-content > .wp-block-gallery,
.cw-prose > figure,
.cw-prose > pre {
	max-width: min(100%, 980px);
}

/* --- Media -------------------------------------------------------------- */

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

.entry-content img,
.cw-prose img {
	border-radius: var(--cw-radius-m);
	box-shadow: var(--cw-glow-soft);
}

figcaption {
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--cw-text-muted);
	margin-top: var(--cw-space-xs);
	text-align: center;
}

/* --- Quotes ------------------------------------------------------------- */

blockquote {
	margin: var(--cw-space-l) auto;
	padding: var(--cw-space-xs) 0 var(--cw-space-xs) var(--cw-space-m);
	border-left: 2px solid var(--cw-teal);
	color: var(--cw-text);
	font-size: var(--cw-step-1);
	line-height: 1.5;
	font-style: normal;
}

blockquote p:last-child { margin-bottom: 0; }

blockquote cite {
	display: block;
	margin-top: var(--cw-space-s);
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	font-style: normal;
	letter-spacing: var(--cw-tracking-mono);
	color: var(--cw-text-muted);
}

/* --- Code --------------------------------------------------------------- */

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

code {
	background: var(--cw-panel);
	color: var(--cw-green);
	padding: 0.15em 0.4em;
	border-radius: var(--cw-radius-s);
	border: 1px solid var(--cw-hairline);
}

pre {
	background: var(--cw-panel);
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-m);
	padding: var(--cw-space-m);
	overflow-x: auto;
	line-height: 1.6;
	margin: var(--cw-space-l) auto;
	box-shadow: var(--cw-glow-inset);
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: var(--cw-text);
}

/* --- Rules and tables ---------------------------------------------------- */

hr {
	border: 0;
	height: 1px;
	background: var(--cw-hairline);
	margin: var(--cw-space-xl) auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--cw-space-l) 0;
	font-size: 0.9375rem;
}

th, td {
	padding: var(--cw-space-s) var(--cw-space-m);
	border-bottom: 1px solid var(--cw-hairline);
	text-align: left;
}

th {
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
	font-weight: 500;
}

/* --- Forms -------------------------------------------------------------- */

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

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
	width: 100%;
	background: var(--cw-panel);
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-s);
	padding: var(--cw-space-s) var(--cw-space-m);
	color: var(--cw-text);
	transition: border-color var(--cw-dur-fast) var(--cw-ease),
	            box-shadow var(--cw-dur-fast) var(--cw-ease);
}

input::placeholder,
textarea::placeholder { color: var(--cw-text-muted); }

input:focus,
textarea:focus,
select:focus {
	border-color: var(--cw-teal);
	box-shadow: var(--cw-glow);
	outline: none;
}

/* --- Scrollbar ----------------------------------------------------------- */

* {
	scrollbar-width: thin;
	scrollbar-color: var(--cw-hairline-strong) var(--cw-void);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cw-void); }
::-webkit-scrollbar-thumb {
	background: var(--cw-hairline-strong);
	border-radius: 99px;
	border: 2px solid var(--cw-void);
}
::-webkit-scrollbar-thumb:hover { background: var(--cw-teal); }

/* --- Screen-reader helpers ------------------------------------------------ */

.screen-reader-text,
.cw-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cw-skip-link:focus {
	position: fixed;
	top: var(--cw-space-m);
	left: var(--cw-space-m);
	z-index: 999;
	width: auto; height: auto;
	clip: auto;
	background: var(--cw-panel-raised);
	border: 1px solid var(--cw-teal);
	padding: var(--cw-space-s) var(--cw-space-m);
	border-radius: var(--cw-radius-s);
}

/* ==========================================================================
   ASTRA NEUTRALISATION
   Astra's blog and sidebar defaults fight this layout. Turned off here so any
   page we have not explicitly templated still looks deliberate.
   ========================================================================== */

.ast-container,
.ast-container-fluid {
	max-width: var(--cw-container);
	padding-inline: var(--cw-space-m);
}

#primary,
.ast-separate-container #primary { margin: 0; padding: 0; }

.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container .ast-article-single {
	background: transparent;
	padding: 0;
	border: 0;
	box-shadow: none;
}

#secondary,
.ast-separate-container #secondary { display: none; }

.ast-left-sidebar #primary,
.ast-right-sidebar #primary { width: 100%; border: 0; }

.ast-single-post .ast-archive-description { display: none; }

.ast-separate-container { background-color: var(--cw-void); }

/* ==========================================================================
   MOTION
   Every transition, transform and animation stops here when the visitor has
   asked for reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	html { scroll-behavior: auto; }

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

	/* Reveal-on-scroll elements must land visible, not stuck mid-fade. */
	[data-cw-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	/* The hero rain canvas is removed entirely rather than frozen. */
	.cw-hero__rain { display: none !important; }
}