/* ─────────────────────────────────────────────────────────────
   Inverse Paradox × Ollie bridge (hand-written; not generated).
   Makes Ollie / core blocks follow the IP rules where theme.json
   cannot: accent layers, the 45° top-right cut, square forms,
   and flush full-width sections.
   Loaded after ip-site.css. Ollie's own style.css sits in the
   low "ollie" cascade layer (see functions.php), so these
   unlayered rules win without !important.
   ───────────────────────────────────────────────────────────── */

/* 1. Colour layers. A page accent (template main group) or brand
   accent (.ip-accent-<key>) also retints Ollie's "Brand" slot, so
   Ollie patterns on the WooCommerce page turn Woo purple. The
   header and footer never carry an accent class, so they stay IP red. */
[class*="ip-accent-"] {
	--wp--preset--color--primary: var(--ip-red);
	--wp--preset--color--primary-accent: color-mix(in srgb, var(--ip-red) 10%, #fff);
	--wp--preset--color--red-on-dark: var(--ip-red-on-dark);
	--wp--preset--color--red-press: var(--ip-red-press);
}

/* 2. Core buttons get the IP accent corner: a 45° cut top-right.
   Outline buttons keep square corners (a clipped border would
   lose its diagonal). The cut is removed while focused so the
   focus ring is never clipped (WCAG 2.4.7 / 2.4.11). */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-element-button:not(.wp-block-button__link) {
	clip-path: polygon(0 0, calc(100% - var(--ip-cut-sm, 0.75rem)) 0, 100% var(--ip-cut-sm, 0.75rem), 100% 100%, 0 100%);
	border-radius: 0;
}
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	clip-path: none;
	outline: 3px solid var(--ip-focus, #ffb000);
	outline-offset: 3px;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-radius: 0;
	border-width: 1px;
}

/* 3. Square form fields and IP focus colour (Ollie ships 5px radius). */
:where(input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]), select, textarea) {
	border-radius: 0;
}
:where(input, select, textarea):focus-visible {
	outline: 3px solid var(--ip-focus, #ffb000);
	outline-offset: 2px;
}

/* 4. Images, embeds and cards stay square even when a pattern
   sets an explicit radius. Logos are images too, and are never cut. */
:where(.wp-block-image, .wp-block-cover, .wp-block-media-text, .wp-block-post-featured-image) img,
.wp-block-cover,
.wp-block-group.has-background {
	border-radius: 0;
}

/* 5. Full-width IP sections sit flush: no block-gap between the
   header, main and footer, or between sections inside main. */
:root :where(.wp-site-blocks) > *,
:root :where(main#main) > * {
	margin-block-start: 0;
}

/* 6. Title band used by the child templates (page, single, index). */
.ip-title-band {
	position: relative;
	overflow: hidden;
}
.ip-title-band::after {
	/* thin accent bar along the bottom edge, in the page accent */
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--ip-red);
}
.ip-title-band .wp-block-post-title,
.ip-title-band h1 {
	color: var(--ip-white, #fff);
	max-width: 22ch;
}
.ip-title-band .ip-eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* 7. Post content uses the IP prose rhythm; keep Ollie's list indent. */
.ip-prose :where(ul, ol) {
	padding-inline-start: 1.25em;
}

/* 8. Query loop cards: square, IP hover streak colour. */
.ip-post-card {
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding-top: 1.5rem;
}
.ip-post-card .wp-block-post-title a {
	color: var(--ip-text, #121928);
	text-decoration: none;
}
.ip-post-card .wp-block-post-title a:hover,
.ip-post-card .wp-block-post-title a:focus-visible {
	color: var(--ip-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}