/* =========================================================================
   Alexiou — CSS overrides (the ONLY stylesheet, guideline §5)
   All overrides live here. theme.json holds tokens; this file wins the cascade.
   Bump ALEXIOU_VERSION in functions.php on every change to this file.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Type role utilities (map to Figma type scale)
   Manrope for everything except tags/captions/eyebrows → JetBrains Mono.
   ------------------------------------------------------------------------- */
:root {
	--alexiou-mono: var(--wp--preset--font-family--jetbrains-mono);
	--alexiou-sans: var(--wp--preset--font-family--manrope);
}

.is-style-display {
	font-family: var(--alexiou-sans);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -2px;
}

.is-style-lead {
	font-family: var(--alexiou-sans);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -1px;
}

/* Tags / captions / eyebrows / item labels — JetBrains Mono, uppercase */
.is-style-eyebrow,
.is-style-caption,
.is-style-items {
	font-family: var(--alexiou-mono);
	font-weight: 400;
}
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--caption); /* 12 */
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.is-style-items {
	font-size: var(--wp--preset--font-size--body); /* 16 */
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.is-style-caption {
	font-size: var(--wp--preset--font-size--caption); /* 12 */
}

/* Small body text */
.is-style-small {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: -0.6px;
}

/* -------------------------------------------------------------------------
   2. Full-bleed section pattern (MANDATORY, guideline §5)
   Apply .alexiou-fullbleed to an outer wrapper; inner content caps at 1760.
   NEVER use margin-inline: calc(50% - 50vw) — it breaks WP alignfull.
   ------------------------------------------------------------------------- */
.alexiou-fullbleed {
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
}
.alexiou-fullbleed > .alexiou-fullbleed__inner {
	max-width: var(--wp--style--global--wide-size); /* 1760 */
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/* -------------------------------------------------------------------------
   3. Content container guard (guideline §5)
   Keep the project's fixed 1760 max-width; Gutenberg sometimes reverts to
   1200 — this re-asserts the correct value. Verify on 1920 desktop.
   ------------------------------------------------------------------------- */
.wp-site-blocks .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--custom--content-width, 1760px);
}

/* -------------------------------------------------------------------------
   4. Base element polish
   ------------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Buttons: square, Manrope semibold (matches theme.json button element) */
.wp-block-button__link {
	border-radius: 0;
	font-family: var(--alexiou-sans);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   5. Responsive / mobile overrides (guideline §5 — also live HERE)
   Design mobile artboard = 390px; regression-test also at 375px.
   ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.is-style-display { font-size: 44px; letter-spacing: -1px; }
	:root :where(h1) { font-size: 40px; letter-spacing: -1px; }
	:root :where(h2) { font-size: 32px; }
	:root :where(h3) { font-size: 26px; }
}