/*
Theme Name: Clarity
Theme URI: https://github.com/clarity-theme
Author: Clarity Theme
Description: A professional FSE starter theme for service businesses and consultants. Swap colour palettes in one click. Insert pre-built section patterns. No code required.
Version: 0.1.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clarity
*/

/* =============================================================================
   SECTION 1 - TYPOGRAPHY & SPACING TOKENS
   ============================================================================= */

:root {
	--clarity-h1-margin-top: 0rem;
	--clarity-h1-margin-bottom: 1rem;
	--clarity-h2-margin-top: 2rem;
	--clarity-h2-margin-bottom: 0.75rem;
	--clarity-h3-margin-top: 1.5rem;
	--clarity-h3-margin-bottom: 0.5rem;
	--clarity-h4-margin-top: 1.25rem;
	--clarity-h4-margin-bottom: 0.5rem;
	--clarity-h5-margin-top: 1rem;
	--clarity-h5-margin-bottom: 0.375rem;
	--clarity-h6-margin-top: 1rem;
	--clarity-h6-margin-bottom: 0.375rem;
	--clarity-p-margin-bottom: 1rem;
	--clarity-list-margin-top: 0.5rem;
	--clarity-list-margin-bottom: 1rem;
	--clarity-list-padding-left: 1.5em;
	--clarity-list-item-gap: 0.3rem;

	/* Border-radius scale */
	--wp--custom--radius--none: 0;
	--wp--custom--radius--sm:   4px;
	--wp--custom--radius--md:   8px;
	--wp--custom--radius--lg:   12px;
	--wp--custom--radius--xl:   16px;
	--wp--custom--radius--2xl:  24px;
	--wp--custom--radius--full: 9999px;

	/* Shadow scale */
	--wp--custom--shadow--sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--wp--custom--shadow--md: 0 2px 12px rgba(0, 0, 0, 0.07);
	--wp--custom--shadow--lg: 0 8px 24px rgba(0, 0, 0, 0.10);
	--wp--custom--shadow--xl: 0 16px 48px rgba(0, 0, 0, 0.14);
}

/* =============================================================================
   SECTION 2 - ELEMENT DEFAULTS
   ============================================================================= */

:where(h1) {
	margin-top: var(--clarity-h1-margin-top);
	margin-bottom: var(--clarity-h1-margin-bottom);
}

:where(h2) {
	margin-top: var(--clarity-h2-margin-top);
	margin-bottom: var(--clarity-h2-margin-bottom);
}

:where(h3) {
	margin-top: var(--clarity-h3-margin-top);
	margin-bottom: var(--clarity-h3-margin-bottom);
}

:where(h4) {
	margin-top: var(--clarity-h4-margin-top);
	margin-bottom: var(--clarity-h4-margin-bottom);
}

:where(h5) {
	margin-top: var(--clarity-h5-margin-top);
	margin-bottom: var(--clarity-h5-margin-bottom);
}

:where(h6) {
	margin-top: var(--clarity-h6-margin-top);
	margin-bottom: var(--clarity-h6-margin-bottom);
}

:where(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

:where(h1, h2, h3, h4, h5, h6):last-child {
	margin-bottom: 0;
}

:where(p) {
	margin-bottom: var(--clarity-p-margin-bottom);
}

:where(p):last-child {
	margin-bottom: 0;
}

:where(ul, ol) {
	margin-top: var(--clarity-list-margin-top);
	margin-bottom: var(--clarity-list-margin-bottom);
	padding-left: var(--clarity-list-padding-left);
}

:where(ul, ol):first-child {
	margin-top: 0;
}

:where(ul, ol):last-child {
	margin-bottom: 0;
}

:where(li) {
	margin-bottom: var(--clarity-list-item-gap);
}

:where(li):last-child {
	margin-bottom: 0;
}

/* =============================================================================
   SECTION 3 - EQUAL-HEIGHT COLUMNS
   ============================================================================= */

.wp-block-columns {
	align-items: stretch;
}

.wp-block-column {
	display: flex;
	flex-direction: column;
	min-width: 0; /* prevents flex children from overflowing their column */
}

.clarity-card {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.clarity-card .clarity-card__body {
	flex: 1;
}

/* Card variants */
.clarity-card--bordered {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

.clarity-card--shadow {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	border-radius: 8px;
}

.clarity-card--padded {
	padding: var(--wp--preset--spacing--6);
}

.clarity-card--padded-sm {
	padding: var(--wp--preset--spacing--5);
}

/* =============================================================================
   SECTION 3b - CARD PRICE ROW FIX
   Prices sit as the last child in a flex space-between row (title left,
   price right). :last-child prevents matching subtitles or other
   primary-colour paragraphs that have siblings after them.
   ============================================================================= */

.is-layout-flex > p.has-primary-color:last-child {
	white-space: nowrap;
	flex-shrink: 0;
}

/* =============================================================================
   SECTION 4 - UTILITY CLASSES
   ============================================================================= */

.no-margin {
	margin: 0 !important;
}

.no-margin-top {
	margin-top: 0 !important;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.no-padding {
	padding: 0 !important;
}

/* Tight spacing scope */
.tight-spacing :where(h2) {
	margin-top: 1.25rem;
}

.tight-spacing :where(h3) {
	margin-top: 1rem;
}

.tight-spacing :where(h4) {
	margin-top: 0.75rem;
}

.tight-spacing :where(p) {
	margin-bottom: 0.625rem;
}

/* Loose spacing scope */
.loose-spacing :where(h2) {
	margin-top: 3rem;
}

.loose-spacing :where(h3) {
	margin-top: 2.25rem;
}

.loose-spacing :where(h4) {
	margin-top: 1.75rem;
}

.loose-spacing :where(p) {
	margin-bottom: 1.5rem;
}

.align-left {
	text-align: left !important;
}

.align-center {
	text-align: center !important;
}

.align-right {
	text-align: right !important;
}

.text-muted {
	color: var(--wp--preset--color--muted);
}

.text-small {
	font-size: var(--wp--preset--font-size--sm);
}

.text-large {
	font-size: var(--wp--preset--font-size--lg);
}

.section-light {
	background-color: var(--wp--preset--color--surface);
}

.section-dark {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--surface);
}

.section-accent {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* =============================================================================
   SECTION 5 - RESPONSIVE SPACING
   ============================================================================= */

@media (max-width: 1024px) {
	:root {
		--wp--preset--spacing--12: 6rem;
		--wp--preset--spacing--11: 5rem;
		--wp--preset--spacing--10: 4rem;
		--wp--preset--spacing--9: 2.5rem;
	}
}

@media (max-width: 600px) {
	:root {
		--wp--preset--spacing--12: 4rem;
		--wp--preset--spacing--11: 3rem;
		--wp--preset--spacing--10: 2.5rem;
		--wp--preset--spacing--9: 2rem;
		--wp--preset--spacing--8: 1.75rem;
		--wp--preset--spacing--7: 1.25rem;
	}
}

/* =============================================================================
   SECTION 6 - SITE HEADER
   ============================================================================= */

/* Remove WordPress's automatic block-gap between top-level site blocks
   (header template-part → content → footer). Each section owns its spacing. */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

.site-header {
	z-index: 100;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
}

.site-header .wp-block-site-logo img {
	height: auto;
	max-height: 48px;
	width: auto;
	display: block;
}

@media (max-width: 600px) {
	.site-header .wp-block-site-logo img {
		max-height: 36px;
	}
}

/* =============================================================================
   SECTION 7 - NAVIGATION
   ============================================================================= */

/* Mobile overlay uses theme colours */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

/* Column stacking belt-and-braces */
@media (max-width: 600px) {
	.wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =============================================================================
   SECTION 8 - INTERACTIVE
   ============================================================================= */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* =============================================================================
   SECTION 9 - STEP NUMBER CIRCLES
   Fixed 80×80 circle centred within its card column.
   Class .clarity-step-number is applied to the inner wp:group bubble block.
   ============================================================================= */

.clarity-step-number {
	width: 80px !important;
	height: 80px !important;
	min-height: unset !important;
	padding: 0 !important;
	align-self: flex-start;
	flex-shrink: 0;
}

/* Centre the step bubble horizontally inside a vertical-flex card */
.wp-block-column > .wp-block-group > .clarity-step-number {
	align-self: center;
}

/* =============================================================================
   SECTION 10 - BLOG POST CARDS
   ============================================================================= */

.clarity-post-card {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	overflow: hidden;
}

.clarity-post-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	transform: translateY(-2px);
}

.clarity-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

/* =============================================================================
   SECTION 11 - PROSE
   ============================================================================= */

.wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--6);
}

.wp-block-post-content p,
.wp-block-post-content li {
	max-width: 68ch;
}


/* =============================================================================
   SECTION 12 - SIDEBAR LAYOUT
   ============================================================================= */

/* Stack sidebar below content on narrow screens */
@media (max-width: 767px) {
	.clarity-sidebar {
		flex-basis: 100% !important;
		width:      100% !important;
	}
}

/* =============================================================================
   SECTION 13 - BLOG / NEWS ARCHIVE LAYOUT
   Most recent 3 posts: full-width horizontal card (image left, text right).
   Posts 4 and later: standard 2-column card grid.
   ============================================================================= */

/* Pull first 3 items to full width inside the 2-col grid */
.news-archive .wp-block-post-template > li:nth-child(-n+3) {
	grid-column: 1 / -1 !important;
}

/* Switch card from vertical to horizontal flex */
.news-archive .wp-block-post-template > li:nth-child(-n+3) .clarity-post-card {
	flex-direction: row;
	align-items: stretch;
	padding-bottom: 0 !important;
}

/* Image occupies 40% of the card width */
.news-archive .wp-block-post-template > li:nth-child(-n+3) .wp-block-post-featured-image {
	width: 40%;
	flex-shrink: 0;
	margin-bottom: 0 !important;
}

.news-archive .wp-block-post-template > li:nth-child(-n+3) .wp-block-post-featured-image img {
	height: 100% !important;
	min-height: 220px;
	border-radius: 8px 0 0 8px;
}

/* Body fills the remaining width, vertically centred */
.news-archive .wp-block-post-template > li:nth-child(-n+3) .clarity-card__body {
	flex: 1;
	padding: var(--wp--preset--spacing--7) !important;
	justify-content: center;
}

/* Slightly larger title on featured posts */
.news-archive .wp-block-post-template > li:nth-child(-n+3) .wp-block-post-title a {
	font-size: var(--wp--preset--font-size--lg);
}

/* ── Section defaults ─────────────────────────────────────────────────────
   Full-width section groups with a background colour get vertical breathing
   room automatically. Inline padding styles on individual blocks override
   this via higher CSS specificity — so explicit padding always wins.
   ────────────────────────────────────────────────────────────────────── */
.wp-block-group.alignfull.has-background {
	padding-top: var(--wp--preset--spacing--11);
	padding-bottom: var(--wp--preset--spacing--11);
}

/* Override for sections that intentionally run edge-to-edge (e.g. hero images) */
.wp-block-group.alignfull.no-section-padding {
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Layout utilities ─────────────────────────────────────────────────────
   Apply via Additional CSS class in the block inspector.
   ────────────────────────────────────────────────────────────────────── */

/* Centre a block horizontally within its container */
.is-centered {
	margin-left: auto;
	margin-right: auto;
}

/* Constrain block to a readable column width and centre it */
.is-narrow {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* Constrain to medium column width */
.is-medium {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* Remove top padding from a section (e.g. when a previous section's colour continues) */
.no-padding-top {
	padding-top: 0 !important;
}

/* Remove bottom padding from a section */
.no-padding-bottom {
	padding-bottom: 0 !important;
}

/* Transparent background utility for overlay blocks */
.bg-transparent {
	background: transparent !important;
}

/* ── Mobile: collapse to single column, stack image above text */
@media (max-width: 767px) {
	.news-archive .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.news-archive .wp-block-post-template > li:nth-child(-n+3) .clarity-post-card {
		flex-direction: column !important;
		padding-bottom: var(--wp--preset--spacing--6) !important;
	}

	.news-archive .wp-block-post-template > li:nth-child(-n+3) .wp-block-post-featured-image {
		width: 100% !important;
	}

	.news-archive .wp-block-post-template > li:nth-child(-n+3) .wp-block-post-featured-image img {
		height: 220px !important;
		border-radius: 8px 8px 0 0;
	}
}

/* =============================================================================
   SECTION 14 - REGISTERED BLOCK STYLES
   CSS for styles registered via register_block_style() in functions.php.
   Applied automatically when an editor picks a style in the block inspector's
   "Styles" tab — the class applied is always is-style-{name}.
   Existing .clarity-* and .section-* class names are unchanged for patterns.
   ============================================================================= */

/* ── Group: card variants ─────────────────────────────────────────────────── */

/* All card variants include the flex-column base so they work without
   the .clarity-card helper class when applied through the Styles panel. */
.wp-block-group.is-style-card-bordered,
.wp-block-group.is-style-card-shadow,
.wp-block-group.is-style-card-padded,
.wp-block-group.is-style-card-padded-sm {
	display: flex;
	flex-direction: column;
}

.wp-block-group.is-style-card-bordered {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-group.is-style-card-shadow {
	box-shadow: var(--wp--custom--shadow--md);
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-group.is-style-card-padded {
	padding: var(--wp--preset--spacing--6) !important;
}

.wp-block-group.is-style-card-padded-sm {
	padding: var(--wp--preset--spacing--5) !important;
}

/* ── Group: section background variants ──────────────────────────────────── */

.wp-block-group.is-style-section-light {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-group.is-style-section-dark {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--surface);
}

.wp-block-group.is-style-section-accent {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* ── Group: width constraints ─────────────────────────────────────────────── */

.wp-block-group.is-style-width-narrow {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-group.is-style-width-medium {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Paragraph: typography variants ─────────────────────────────────────── */

.wp-block-paragraph.is-style-text-muted {
	color: var(--wp--preset--color--muted);
}

.wp-block-paragraph.is-style-text-small {
	font-size: var(--wp--preset--font-size--sm) !important;
}

.wp-block-paragraph.is-style-text-large {
	font-size: var(--wp--preset--font-size--lg) !important;
}

/* ── Heading: typography variants ────────────────────────────────────────── */

.wp-block-heading.is-style-text-muted {
	color: var(--wp--preset--color--muted);
}

/* ── Icons ───────────────────────────────────────────────────────────────── */

.clarity-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.clarity-icon--primary { color: var(--wp--preset--color--primary); }
.clarity-icon--muted   { color: var(--wp--preset--color--muted); }
.clarity-icon--white   { color: #ffffff; }

.clarity-icon--sm { width: 16px; height: 16px; }
.clarity-icon--md { width: 24px; height: 24px; }
.clarity-icon--lg { width: 32px; height: 32px; }
.clarity-icon--xl { width: 48px; height: 48px; }

/* Icon inside a coloured circle badge */
.clarity-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.clarity-icon-badge--lg {
	width: 80px;
	height: 80px;
}

.clarity-icon-badge--surface {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--border);
}

/* ── Entrance animations ─────────────────────────────────────────────────── */
/*
 * Apply via block inspector Styles tab: Animate — Fade Up, Fade In, etc.
 * JS (assets/js/animations.js) adds .clarity-animated when element enters
 * the viewport. Respects prefers-reduced-motion automatically (JS bails out).
 */

.is-style-animate-fade-up,
.is-style-animate-fade-in,
.is-style-animate-slide-left,
.is-style-animate-slide-right,
.is-style-animate-scale-up {
	transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Initial (hidden) states */
.is-style-animate-fade-up    { opacity: 0; transform: translateY(28px); }
.is-style-animate-fade-in    { opacity: 0; transform: none; }
.is-style-animate-slide-left { opacity: 0; transform: translateX(-32px); }
.is-style-animate-slide-right{ opacity: 0; transform: translateX(32px); }
.is-style-animate-scale-up   { opacity: 0; transform: scale(0.94); }

/* Animated (visible) state — added by JS */
.is-style-animate-fade-up.clarity-animated,
.is-style-animate-fade-in.clarity-animated,
.is-style-animate-slide-left.clarity-animated,
.is-style-animate-slide-right.clarity-animated,
.is-style-animate-scale-up.clarity-animated {
	opacity: 1;
	transform: none;
}

/* Keep editor canvas fully visible — never hide in the editor */
.block-editor-block-list__layout .is-style-animate-fade-up,
.block-editor-block-list__layout .is-style-animate-fade-in,
.block-editor-block-list__layout .is-style-animate-slide-left,
.block-editor-block-list__layout .is-style-animate-slide-right,
.block-editor-block-list__layout .is-style-animate-scale-up {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}