/*
Theme Name: Circuit
Theme URI: https://mikewilliams.club
Author: Mike Williams
Description: A colorful, tech-flavored dark block theme for the blog. Ships with a Light style variation.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: circuit
*/

html { scroll-behavior: smooth; }
::selection { background: var(--wp--preset--color--violet); color: #fff; }

/* A hint of a circuit board behind everything: the SVG is a mask over a fixed gradient layer,
   so the traces pick up the theme colors (and adapt to the Light variation). Cards, header and
   footer have solid backgrounds, so text never sits on the traces. */
body::before {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background: var(--wp--preset--gradient--aurora);
	opacity: .06;
	-webkit-mask: url("assets/circuit-bg.svg") center top / 800px 800px repeat;
	mask: url("assets/circuit-bg.svg") center top / 800px 800px repeat;
}
@media (max-width: 700px) {
	body::before { -webkit-mask-size: 560px 560px; mask-size: 560px 560px; opacity: .05; }
}

/* Sticky, blurred header with a gradient hairline underneath */
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky; top: 0; z-index: 50;
}
.admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: var(--wp-admin--admin-bar--height, 32px); }
/* The blur lives on a background layer: backdrop-filter on the header itself would trap the
   mobile menu overlay (position: fixed) inside the header box. */
.circuit-header {
	position: relative; isolation: isolate;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.circuit-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	backdrop-filter: blur(14px);
}
.circuit-header::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
	background: var(--wp--preset--gradient--aurora); opacity: .7;
}

/* Terminal-style site title: ~/blog */
.circuit-logo a { text-decoration: none; }
.circuit-logo a::before { content: "~/"; color: var(--wp--preset--color--cyan); margin-right: .05em; }

/* Gradient text helper (add class "is-gradient-text" to any heading) */
.is-gradient-text {
	background: var(--wp--preset--gradient--aurora);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* Mono eyebrow label */
.circuit-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
}

/* Hero glow */
.circuit-hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(60% 80% at 15% 0%, color-mix(in srgb, var(--wp--preset--color--violet) 35%, transparent), transparent 70%),
		radial-gradient(50% 70% at 90% 10%, color-mix(in srgb, var(--wp--preset--color--cyan) 25%, transparent), transparent 70%),
		transparent;
}

/* Post cards */
.circuit-card {
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.circuit-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--violet);
	box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--wp--preset--color--violet) 60%, transparent);
}
.circuit-card .wp-block-post-featured-image { margin: 0; }
.circuit-card .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.circuit-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.circuit-card .wp-block-post-title a:hover { color: var(--wp--preset--color--cyan); }

/* Category pills (each pill cycles through the accent colors) */
.circuit-pills a {
	display: inline-block; text-decoration: none;
	font-family: var(--wp--preset--font-family--mono); font-size: .75rem;
	padding: .15em .7em; border-radius: 999px;
	border: 1px solid currentColor; margin-right: .35em;
	color: var(--wp--preset--color--cyan);
}
.circuit-pills a:nth-of-type(3n+2) { color: var(--wp--preset--color--pink); }
.circuit-pills a:nth-of-type(3n+3) { color: var(--wp--preset--color--lime); }
.circuit-pills .wp-block-post-terms__separator { display: none; }

/* Dates and meta in mono */
.circuit-meta, .circuit-meta a { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); text-decoration: none; }

/* Code blocks */
.wp-block-code { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius); }
:not(pre) > code {
	background: var(--wp--preset--color--surface-2); border-radius: 6px; padding: .1em .4em;
	font-size: .9em; color: var(--wp--preset--color--pink);
}

/* Buttons: gradient fill, subtle lift */
.wp-block-button__link { background-image: var(--wp--preset--gradient--aurora); transition: transform .15s ease, filter .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.1); }
.is-style-outline > .wp-block-button__link { background-image: none; }

/* Footer top accent */
.circuit-footer { border-top: 3px solid transparent; border-image: var(--wp--preset--gradient--rainbow) 1; }

/* Top-level sections manage their own spacing */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Single post: featured image capped and letterboxed so logos and screenshots show in full */
.single .wp-block-post-featured-image {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
}
.single .wp-block-post-featured-image img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 2 / 1; max-height: 420px;
	object-fit: contain !important; border-radius: 0 !important;
}

/* Previous / next post cards (the whole card is the link) */
.circuit-postnav {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
}
.circuit-postnav .wp-block-post-navigation-link:empty { display: none; }
.circuit-postnav .wp-block-post-navigation-link {
	position: relative; margin: 0;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	font-size: .9rem; line-height: 1.4;
	transition: border-color .18s ease, transform .18s ease;
}
.circuit-postnav .wp-block-post-navigation-link:hover { border-color: var(--wp--preset--color--violet); transform: translateY(-2px); }
.circuit-postnav .post-navigation-link-next { text-align: right; }
.circuit-postnav .post-navigation-link__label { display: block; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; color: var(--wp--preset--color--muted); margin-bottom: .25rem; }
.circuit-postnav a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.circuit-postnav a::after { content: ""; position: absolute; inset: 0; }
.circuit-postnav .wp-block-post-navigation-link:hover a { color: var(--wp--preset--color--cyan); }

/* "Now" panel: classic widgets (Currently Reading, Weather) restyled as Circuit cards */
.circuit-now-row {
	display: grid; gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	margin-top: var(--wp--preset--spacing--50);
}
.circuit-now-row:not(:has(.circuit-now)) { display: none; } /* nothing to show */
/* WordPress adds a block-gap margin above every sibling after the first; the cards must align */
.circuit-now-row > .circuit-now { display: flex; margin: 0; }
.circuit-now-row > .circuit-now > .circuit-widget { display: flex; width: 100%; }
.circuit-widget__title { display: none; } /* the card has its own label */

.circuit-now .acrw-card,
.circuit-now .lw-card {
	box-sizing: border-box; width: 100%; max-width: none; margin: 0;
	display: grid; grid-template-columns: 96px 1fr; column-gap: 1.25rem; align-content: start;
	padding: 1.25rem; text-align: left;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}
.circuit-now .acrw-card > .acrw-cover,
.circuit-now .acrw-card > .acrw-cover-link { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.circuit-now .acrw-cover { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }
.circuit-now .acrw-label,
.circuit-now .acrw-title,
.circuit-now .acrw-series,
.circuit-now .acrw-author { grid-column: 2; }
.circuit-now .acrw-label {
	margin: 0 0 .4rem; font-weight: 400;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small);
	letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--cyan);
}
.circuit-now .acrw-label::before { content: "// "; }
.circuit-now .acrw-title { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.circuit-now .acrw-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.circuit-now .acrw-title a:hover { color: var(--wp--preset--color--cyan); text-decoration: none; }
.circuit-now .acrw-series,
.circuit-now .acrw-author { margin: 0 0 .25rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.circuit-now .acrw-series strong,
.circuit-now .acrw-author strong { font-family: var(--wp--preset--font-family--mono); font-weight: 400; color: var(--wp--preset--color--pink); }

/* Weather card: emoji takes the cover's place */
.circuit-now .lw-card > .lw-emoji { grid-column: 1; grid-row: 1 / span 5; align-self: center; text-align: center; font-size: 3.5rem; line-height: 1; margin: 0; }
.circuit-now .lw-label,
.circuit-now .lw-temp,
.circuit-now .lw-condition,
.circuit-now .lw-feels-like,
.circuit-now .lw-location { grid-column: 2; margin: 0; opacity: 1; }
.circuit-now .lw-label {
	margin-bottom: .4rem; font-weight: 400;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small);
	letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--cyan);
}
.circuit-now .lw-label::before { content: "// "; }
.circuit-now .lw-temp { font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.circuit-now .lw-condition { font-size: 1.05rem; font-weight: 600; }
.circuit-now .lw-feels-like,
.circuit-now .lw-location { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.circuit-now .lw-location { font-family: var(--wp--preset--font-family--mono); margin-top: .25rem; }

/* Footer: the Meta widget (login and feed links) as a compact mono row */
.circuit-now--meta .circuit-widget__title {
	display: block; margin: 0 0 .5rem;
	font-family: var(--wp--preset--font-family--mono); font-size: .75rem; font-weight: 400;
	letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--cyan);
}
.circuit-now--meta .circuit-widget__title::before { content: "// "; }
.circuit-now--meta ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.circuit-now--meta li { margin: 0; }
.circuit-now--meta a {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted); text-decoration: none;
}
.circuit-now--meta a:hover { color: var(--wp--preset--color--cyan); }

/* Older (classic-editor) post content: fixed-size media must never overflow the viewport */
.wp-block-post-content img,
.wp-block-post-content video,
.wp-block-post-content iframe,
.wp-block-post-content embed,
.wp-block-post-content object { max-width: 100%; }
.wp-block-post-content img { height: auto; }
.wp-block-post-content iframe[src*="youtube"],
.wp-block-post-content iframe[src*="youtu.be"],
.wp-block-post-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wp-block-post-content table { display: block; max-width: 100%; overflow-x: auto; }
.wp-block-post-content pre { max-width: 100%; overflow-x: auto; }
.wp-block-post-content { overflow-wrap: break-word; }