/*
 * MooLabyte — site-level CSS.
 *
 * Kept intentionally small. Prefer theme.json (settings.custom, styles)
 * for anything that maps to a design token; use this file only for
 * rules theme.json genuinely can't express (e.g. :has(), container
 * queries, third-party widget overrides).
 */

/*
 * Self-hosted variable fonts. Both ship as a single woff2 covering the
 * whole 400-700 weight range (`font-weight: 400 700`), which is why
 * there are only 2 font files total for the whole site — one request
 * per family, not one per weight. Licensed SIL OFL 1.1 (see
 * assets/fonts/OFL.txt); fetched from Google Fonts' CSS2 API rather
 * than linked from fonts.googleapis.com so nothing renders until a
 * request leaves the visitor's browser for our own origin only.
 */
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/source-serif-4-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * theme.json color/font-size bridge — Kadence injects its own
 * settings.color.palette and settings.typography.fontSizes at runtime
 * (from its Global Palette / Font Size Customizer panels) and that
 * replaces our child theme.json's palette and fontSizes arrays
 * wholesale, so WordPress never emits --wp--preset--color--moola-* or
 * --wp--preset--font-size--{slug} for our tokens (confirmed: fontFamilies
 * and spacingSizes merge from the child fine — only these two don't).
 * Defining them here, once, keeps every other reference in this repo
 * (theme.json's styles section, the Kadence bridge below) working
 * against the intended variable names without duplicating hex values
 * anywhere else. If a future Kadence update stops overriding these two
 * settings, this block becomes redundant and can be deleted.
 */
:root {
	--wp--preset--color--moola-ink: #14110f;
	--wp--preset--color--moola-cream: #faf8f4;
	--wp--preset--color--moola-green: #0f7a4a;
	--wp--preset--color--moola-indigo: #5b5a72;
	--wp--preset--color--moola-border: #e4dfd6;
	--wp--preset--color--moola-surface: #f1ede4;

	--wp--preset--font-size--small: clamp(0.875rem, 0.8594rem + 0.0781vw, 0.9375rem);
	--wp--preset--font-size--medium: clamp(1rem, 0.9688rem + 0.1563vw, 1.125rem);
	--wp--preset--font-size--large: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.5rem);
	--wp--preset--font-size--x-large: clamp(1.5rem, 1.4063rem + 0.4688vw, 1.875rem);
	--wp--preset--font-size--xx-large: clamp(1.875rem, 1.7188rem + 0.7813vw, 2.5rem);
	--wp--preset--font-size--huge: clamp(2.5rem, 2.25rem + 1.25vw, 3.5rem);
}

/*
 * Kadence bridge — Kadence ships its own design-token system
 * (--global-palette1..15, --global-body-font-family,
 * --global-heading-font-family) that its base CSS reads for body
 * background, text, headings, and nav-link color. It's independent of
 * theme.json's --wp--preset--* vars, and Assets::enqueue() lists
 * kadence-global as a dependency so this file prints after it and wins
 * the cascade.
 *
 * theme.json (plus the bridge block above) stays the single source of
 * truth: every value below is a var() pointing at a moola-* token,
 * never a duplicated hex. Only the palette slots Kadence's base CSS
 * visibly reads are remapped; the auto-derived slot (10) and the
 * status colors (11-15, success/info/danger/warning) are left as
 * Kadence's defaults on purpose.
 */
:root {
	--global-palette1: var(--wp--preset--color--moola-green); /* accent (buttons, current-nav-item) */
	--global-palette2: var(--wp--preset--color--moola-ink); /* accent hover/darker */
	--global-palette3: var(--wp--preset--color--moola-ink); /* headings */
	--global-palette4: var(--wp--preset--color--moola-ink); /* body text */
	--global-palette5: var(--wp--preset--color--moola-indigo); /* nav links, secondary text */
	--global-palette6: var(--wp--preset--color--moola-border); /* borders/dividers */
	--global-palette7: var(--wp--preset--color--moola-surface); /* alt section background */
	--global-palette8: var(--wp--preset--color--moola-cream); /* site background */
	--global-palette9: var(--wp--preset--color--moola-cream); /* card/header background */
	--global-body-font-family: var(--wp--preset--font-family--body);
	--global-heading-font-family: var(--wp--preset--font-family--heading);
}

/*
 * Kadence's h1-h6 font-size rules are hardcoded px (no var()), so they
 * can't be bridged like the custom properties above. `body h1` has
 * higher specificity than Kadence's bare `h1` selector, which is
 * enough to win without `!important`.
 */
body h1 {
	font-size: var(--wp--preset--font-size--huge);
}

body h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

body h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

body h4,
body h5,
body h6 {
	font-size: var(--wp--preset--font-size--large);
}

/*
 * text-wrap has no theme.json equivalent. `balance` keeps a wrapped
 * headline from stranding one word on its own line (browsers cap it at
 * ~6 lines automatically, so it's safe on long H1/H2s); `pretty` avoids
 * orphans in body copy. Scoped to .entry-content, not `body`, so it only
 * touches article copy — not nav labels or other chrome. Unsupported
 * browsers (Firefox, older Safari) just keep normal wrapping; no
 * fallback needed for a property that degrades to its initial value.
 */
body h1,
body h2 {
	text-wrap: balance;
}

.entry-content :is(p, li) {
	text-wrap: pretty;
}

.moolabyte-toc {
	border: 1px solid var(--wp--preset--color--moola-border, #e4dfd6);
	background: var(--wp--preset--color--moola-surface, #f1ede4);
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin-block: 2rem;
}

.moolabyte-toc__title {
	font-weight: 600;
	margin-block-end: 0.5rem;
}

/*
 * Block styles registered in Setup/Blocks.php — `register_block_style()`
 * only creates the `is-style-*` class and the entry in the block
 * toolbar; the actual look still has to live here.
 */

/* core/table "Zebra" style — used by patterns/comparison-table.php,
 * but available on any table from the block toolbar. `:nth-child()`
 * has no theme.json equivalent. */
.is-style-moola-zebra table th {
	background: var(--wp--preset--color--moola-ink, #14110f);
	color: var(--wp--preset--color--moola-cream, #faf8f4);
	text-align: left;
}

.is-style-moola-zebra table tbody tr:nth-child(even) {
	background: var(--wp--preset--color--moola-surface, #f1ede4);
}

/* core/quote "Pull Quote" style — large editorial pull-quote. */
.is-style-moola-pullquote {
	border-inline-start: 3px solid var(--wp--preset--color--moola-green, #0f7a4a);
	padding-inline-start: var(--wp--preset--spacing--medium, 1.5rem);
	margin-inline-start: 0;
}

.is-style-moola-pullquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large, 1.875rem);
	line-height: 1.3;
}

.is-style-moola-pullquote cite {
	color: var(--wp--preset--color--moola-indigo, #5b5a72);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/* core/button "Ghost" style — transparent, inverts on hover. Core
 * already ships an "Outline" style; this is a deliberately different
 * name/treatment, not a duplicate of it. */
.wp-block-button__link.is-style-moola-ghost {
	background: transparent;
	color: var(--wp--preset--color--moola-green, #0f7a4a);
	border: 2px solid var(--wp--preset--color--moola-green, #0f7a4a);
}

.wp-block-button__link.is-style-moola-ghost:hover {
	background: var(--wp--preset--color--moola-green, #0f7a4a);
	color: var(--wp--preset--color--moola-cream, #faf8f4);
}

/*
 * Focus visibility — theme.json has no equivalent, and Kadence's default
 * outline is too faint against the cream background above. Keep this in
 * sync with the moola-green token if the palette ever changes.
 */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--moola-green, #0f7a4a);
	outline-offset: 2px;
}

/* Respect reduced-motion preference for any future transitions/animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}