/*
Theme Name: lucidIT Blocks
Theme URI: https://lucidit.io
Author: lucidIT LLC
Author URI: https://lucidit.io
Description: The lucidIT reference block theme. Bauhaus-derived geometry, a disciplined red budget, and a reverse palette that is structural rather than advisory. Section styles, block styles and a full pattern library. Built for WordPress 7.1 and theme.json v3.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.3.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lucidit-blocks
Tags: block-theme, full-site-editing, block-patterns, style-variations, wide-blocks, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   theme.json handles palette, type, spacing and element styles. What lives here
   is only what theme.json cannot express: pseudo-elements and generated shapes.
   Every rule below belongs to a registered block style.
   --------------------------------------------------------------------------- */

/* Separator: three Bauhaus beats instead of a line ------------------------- */
.wp-block-separator.is-style-dot-rule {
	border: none;
	height: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: none;
}
.wp-block-separator.is-style-dot-rule::before {
	content: "";
	width: 48px;
	height: 6px;
	background: var(--wp--preset--color--accent);
}
.wp-block-separator.is-style-dot-rule::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	box-shadow: 22px 0 0 -2px var(--wp--preset--color--ink);
}

.wp-block-separator.is-style-short-rule {
	border: none;
	height: 4px;
	width: 64px;
	margin-left: 0;
	background: var(--wp--preset--color--accent);
}

/* Heading: a red underscore that sits under the text, not the column ------- */
.wp-block-heading.is-style-underscored {
	/* Underline the text, do not shrink the box.
	   display:inline-block was the previous mechanism and it is a layout trap:
	   WordPress constrained layout centres children with `margin-inline: auto
	   !important`, and auto margins compute to 0 on an inline-block. Above the
	   84rem content size every block sibling centred and this heading did not,
	   so it broke out to the left by (container - 84rem) / 2. text-decoration
	   hugs the glyphs without taking the element out of block flow. */
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 4px;
	text-underline-offset: 0.3em;
	text-decoration-skip-ink: none;
}

/* Heading: display scale that breaks the type ramp on purpose -------------- */
.wp-block-heading.is-style-oversized {
	font-size: clamp(2.25rem, 4.4vw, 4.25rem);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
	/* never fracture a word to fit — shrink or wrap, but stay readable */
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

/* Image: a square corner accent, the card treatment from the brand guide --- */
.wp-block-image.is-style-corner-mark {
	position: relative;
}
.wp-block-image.is-style-corner-mark::after {
	content: "";
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: 48px;
	height: 48px;
	background: var(--wp--preset--color--accent);
	z-index: -1;
}

/* List: red geometric marker instead of a bullet --------------------------- */
.wp-block-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.6rem;
}
.wp-block-list.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 4px;
	background: var(--wp--preset--color--accent);
}

/* Card: the left-border treatment, as a selectable style ------------------- */
.wp-block-group.is-style-card,
.wp-block-column.is-style-card {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper);
}

/* Quote: display scale, no quotation marks, rule above -------------------- */
.wp-block-quote.is-style-display {
	border: none;
	padding-left: 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 4px solid var(--wp--preset--color--accent);
}
.wp-block-quote.is-style-display p {
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 700;
}
.wp-block-quote.is-style-display cite {
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Geometry section style: keep the art clear of the text on narrow screens - */
@media (max-width: 781px) {
	.lucidit-hero .lucidit-hero-art { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-geometry { transition: background-position .4s ease; }
}


/* Hero: text column must never be starved by the art column. */
/* Hero art is decorative; below the tablet breakpoint it steals the text column. */
@media (max-width: 781px) {
	.lucidit-hero .lucidit-hero-art { display: none; }
}

/* ---------------------------------------------------------------------------
   Responsive. WordPress 7.1 can express these in theme.json under @tablet and
   @mobile, but those keys are not yet in the published theme.json schema, so
   they are written as media queries here where they are guaranteed to apply.
   Move them into theme.json once the schema catches up.
   --------------------------------------------------------------------------- */
@media (max-width: 781px) {
	body { --wp--style--root--padding-left: 2rem; --wp--style--root--padding-right: 2rem; }
}
@media (max-width: 479px) {
	body { --wp--style--root--padding-left: 1.25rem; --wp--style--root--padding-right: 1.25rem; line-height: 1.55; }
	.wp-block-heading { letter-spacing: -0.015em; }
}

/* ---------------------------------------------------------------------------
   Dark grounds inside a light document.
   The Reverse style variation applies to a whole document, so a single ink
   band or ink card inside a normal page still has the LIGHT palette in scope.
   Measured on #1A1A1A: muted #4A4A4A is 1.9:1 and accent #E53935 is 4.12:1 —
   both fail AA. styles/reverse.json already holds the corrected values for
   exactly this ground, so scope them to the ground rather than hand-coding
   them into a pattern.
     muted  #4A4A4A -> #9A9A9A   7.00:1  AAA
     accent #E53935 -> #FF4B47   5.26:1  AA
   --------------------------------------------------------------------------- */
.has-ink-background-color .has-muted-color,
.has-ink-background-color .has-muted-color a,
.is-style-ink-band .has-muted-color,
.is-style-ink-band .has-muted-color a {
	color: #9A9A9A;
}

.has-ink-background-color .has-accent-color,
.is-style-ink-band .has-accent-color {
	color: #FF4B47;
}

.has-ink-background-color a:where(:not(.wp-element-button)),
.is-style-ink-band a:where(:not(.wp-element-button)) {
	color: #FF4B47;
}

.has-ink-background-color .has-accent-background-color,
.is-style-ink-band .has-accent-background-color {
	background-color: #FF4B47;
}

/* Image: diagram. An SVG drawn to a viewBox keeps its intrinsic width and so
   sits narrower than its column. WordPress strips inline width styles from
   img on save, so this belongs in the stylesheet as a registered style. ----- */
.wp-block-image.is-style-diagram img {
	width: 100%;
	height: auto;
}