/* RodGreen child theme — supplementary polish (theme.json does the heavy lifting) */

:root {
	--rg-transition: 120ms ease;
}

/* Keep light-on-dark body text crisp rather than smeared/heavy */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Smooth, accessible link interactions */
a {
	transition: color var(--rg-transition), text-decoration-color var(--rg-transition);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

/* Clear keyboard focus for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Tinted text selection (dark theme: light accent, dark text) */
::selection {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Keep long code samples from breaking the layout */
.wp-block-code,
pre {
	overflow-x: auto;
	max-width: 100%;
}

/* Inline code gets a subtle chip */
:not(pre) > code {
	background: var(--wp--preset--color--accent-5);
	padding: 0.12em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

/* Rounded, framed images for a tidier portfolio feel */
.wp-block-post-content img,
.entry-content img {
	border-radius: 8px;
}

/* Visible brand cue: a thin coral→purple bar across the very top of every page */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2));
	z-index: 1000;
	pointer-events: none;
}

/* Coral-themed depth with a surreal purple counter-bloom: two faint,
   offset glows over the charcoal base (falls back to base if unsupported). */
body {
	background-color: var(--wp--preset--color--base);
	background-image:
		radial-gradient(1200px 520px at 24% -150px, rgba(255, 122, 102, 0.12), transparent 66%),
		radial-gradient(1050px 620px at 86% -40px, rgba(109, 75, 212, 0.30), transparent 60%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Homepage hero: coral wash from the left, purple bloom from the right —
   the two meet as a soft surreal duotone behind the intro. */
.rg-hero {
	background-image:
		radial-gradient(120% 140% at 0% 0%, rgba(255, 122, 102, 0.13), transparent 58%),
		radial-gradient(125% 140% at 100% 8%, rgba(109, 75, 212, 0.32), transparent 58%);
	border-radius: 12px;
}

/* Give section headings inside posts a small coral accent underline */
.wp-block-post-content h2,
.entry-content h2 {
	padding-bottom: 0.18em;
	border-bottom: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 45%, transparent);
}

/* Buttons: a surreal coral gradient with a purple hint bleeding in at the
   far corner. Hover just lifts brightness — no colour flip. */
.wp-block-button__link {
	background-image: linear-gradient(120deg,
		var(--wp--preset--color--accent-1) 0%,
		var(--wp--preset--color--accent-3) 45%,
		var(--wp--preset--color--accent-2) 100%);
	transition: filter var(--rg-transition);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	filter: brightness(1.08) saturate(1.04);
}
/* Outline button (e.g. Resumé): coral text/border, faint coral fill on hover */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-image: none;
	color: var(--wp--preset--color--accent-1);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 60%, transparent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-image: none;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, transparent);
	color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

/* Post-title links: colour only on hover, not at rest (cleaner index pages) */
.wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}