/*
Theme Name: OddClick
Theme URI: https://oddclick.net/
Author: Leo
Description: Coming-soon site for OddClick, an odd-time-signature click track plugin. Block theme; palette and type lifted from the plugin's own Source/Theme.h (warm scheme) so the site and the plugin read as the same object.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oddclick
Tags: full-site-editing, block-theme, one-column, dark-mode
*/

/* ---------------------------------------------------------------------------
   Everything colour- and type-related lives in theme.json. This file is for
   the things theme.json can't express: the beat-grid graphic, the signup
   form, and a few layout details.
   --------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* WordPress gives .alignwide negative margins so it can reach the full wide
   width. Below that width it therefore runs into the screen edge, so put the
   page gutter back on as padding. */
main .alignwide {
	padding-left: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--20);
}

/* --- Small caps mono label, used as a section eyebrow --------------------- */
.oc-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-dim);
	margin: 0 0 0.9rem;
}

/* --- The beat grid -------------------------------------------------------
   The product in one graphic. Each bar is a beat standing on a shared
   baseline; its colour and height encode the accent role the engine assigns
   (Source/TimeSignaturePattern.cpp): the bar's first beat is Strong, the first
   beat of every later group is Medium, the rest are Weak. A bracket under each
   group carries its beat count.
   ------------------------------------------------------------------------- */
.oc-grid {
	--oc-beat-h: 5.5rem;
	--oc-beat-gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
}

/* Capped so the beats stay taller than they are wide on a big screen -- they
   should read as accents, not as tiles. */
.oc-grid--hero {
	--oc-beat-h: 7.5rem;
	max-width: 34rem;
}

.oc-grid__group {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}

/* the beats themselves, standing on a common baseline */
.oc-grid__beats {
	display: flex;
	gap: var(--oc-beat-gap);
	align-items: flex-end;
	height: var(--oc-beat-h);
}

.oc-grid__beat {
	flex: 1 1 0;
	min-width: 0;
	border-radius: 3px;
	background: var(--oc-beat-color, var(--wp--preset--color--teal));
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 0.35rem;
}

.oc-grid__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(27, 21, 18, 0.75);
	line-height: 1;
}

/* Height carries the same information as colour, so the graphic still reads
   for anyone who can't separate the hues. */
.oc-grid__beat--strong { --oc-beat-color: var(--wp--preset--color--coral); height: 100%; }
.oc-grid__beat--medium { --oc-beat-color: var(--wp--preset--color--amber); height: 78%; }
.oc-grid__beat--weak   { --oc-beat-color: var(--wp--preset--color--teal);  height: 52%; }
.oc-grid__beat--flat   { --oc-beat-color: var(--wp--preset--color--sub);   height: 52%; }
.oc-grid__beat--flat .oc-grid__num { color: rgba(239, 228, 207, 0.55); }

/* group bracket + count */
.oc-grid__bracket {
	height: 0.45rem;
	margin-top: 0.45rem;
	border: 1px solid var(--wp--preset--color--outline);
	border-top: none;
	border-radius: 0 0 3px 3px;
}

.oc-grid__count {
	display: block;
	text-align: center;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	color: var(--wp--preset--color--text-dim);
	line-height: 1;
}

/* an ungrouped bar has nothing to bracket */
.oc-grid--flat .oc-grid__bracket {
	border-color: transparent;
	border-bottom-color: var(--wp--preset--color--outline);
	border-radius: 0;
}

/* --- Side-by-side comparison --------------------------------------------- */
.oc-compare {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.oc-compare { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); }
}
.oc-compare__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-dim);
	margin: 0.9rem 0 0;
}
.oc-compare__label strong {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* --- Cards ---------------------------------------------------------------- */
.oc-cards {
	display: grid;
	gap: 1px;
	background: var(--wp--preset--color--outline);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 10px;
	overflow: hidden;
	grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
	.oc-cards { grid-template-columns: 1fr 1fr; }
}
.oc-card {
	background: var(--wp--preset--color--panel-bg);
	padding: var(--wp--preset--spacing--30);
}
.oc-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--text);
}
.oc-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--text-dim);
}
.oc-card code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
	color: var(--wp--preset--color--teal-bright);
	background: none;
	padding: 0;
}

/* --- Screenshot grid ------------------------------------------------------
   The first shot is the hero and gets the full width; the detail shots share
   the row beneath it. Six columns so both splits land on the same gutters.
   ------------------------------------------------------------------------- */
.oc-shots {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: 1fr;
}
/* The first two are the detailed captures and get the full width -- squeezed
   into a third of the row they were unreadable. The last two are small
   fixed-size panels the plug-in won't scale, so they share a row. */
@media (min-width: 40rem) {
	.oc-shots { grid-template-columns: repeat(6, 1fr); }
	.oc-shots > * { grid-column: span 3; }
	.oc-shots > :nth-child(-n+2) { grid-column: span 6; }
}

/* --- Screenshot frame ----------------------------------------------------- */
.oc-shot {
	margin: 0;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 10px;
	background: var(--wp--preset--color--panel-bg);
	overflow: hidden;
}
.oc-shot img { display: block; width: 100%; height: auto; }

/* The detail shots are captures of different panels, so their aspect ratios
   don't match. Give those tiles one shape and letterbox each shot inside it,
   otherwise the row is a staircase and the captions never line up. The hero
   shot keeps its own proportions -- it's wide, and it should stay that way. */
.oc-shots > :nth-child(n+3) img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--window-bg);
	padding: 0.75rem;
	box-sizing: border-box;
}
.oc-shot figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--text-dim);
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--wp--preset--color--outline);
	letter-spacing: 0.04em;
}

/* placeholder slot, shown until a real capture is dropped in */
.oc-shot--placeholder .oc-shot__slot {
	aspect-ratio: 16 / 11;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0 10px,
			rgba(168, 155, 136, 0.05) 10px 20px
		),
		var(--wp--preset--color--panel-bg);
	color: var(--wp--preset--color--text-dim);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	padding: 1.5rem;
}
.oc-shot--placeholder .oc-shot__slot span:first-child {
	color: var(--wp--preset--color--coral);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--tiny);
}

/* --- The beat bulb --------------------------------------------------------
   The display frames are studio renders on a pale backdrop, so on this dark
   page they need to read as a photographed object rather than as a screenshot
   that has lost its background. A frame and a little inset does that.
   ------------------------------------------------------------------------- */
.oc-bulb {
	margin: var(--wp--preset--spacing--40) 0 0;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--panel-bg);
	line-height: 0;
}
.oc-bulb img {
	display: block;
	width: 100%;
	height: auto;
}

.oc-bulb-notes {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
	margin-top: var(--wp--preset--spacing--30);
}
@media (min-width: 40rem) {
	.oc-bulb-notes { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); }
}
.oc-bulb-notes h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--text);
}
.oc-bulb-notes p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--text-dim);
}
.oc-bulb-notes strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* --- Tempo Equivalents ----------------------------------------------------
   That window doesn't inherit the editor's zoom preference, so the capture is
   only 560px wide. Cap it there and centre it -- stretched to the column it
   would be visibly softer than every other shot on the page.
   ------------------------------------------------------------------------- */
.oc-tempo {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 560px;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--panel-bg);
}
.oc-tempo img {
	display: block;
	width: 100%;
	height: auto;
}
.oc-tempo figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--text-dim);
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--wp--preset--color--outline);
	letter-spacing: 0.04em;
	line-height: 1.5;
}

/* --- Spec table ----------------------------------------------------------- */
.oc-specs {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}
.oc-specs th,
.oc-specs td {
	text-align: left;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--outline);
	vertical-align: baseline;
}
.oc-specs th {
	font-weight: 500;
	color: var(--wp--preset--color--text-dim);
	width: 9.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--tiny);
	padding-right: 1.5rem;
}
.oc-specs td { color: var(--wp--preset--color--text); }
.oc-specs tr:last-child th,
.oc-specs tr:last-child td { border-bottom: none; }

/* --- Signup form ---------------------------------------------------------- */
.oc-signup { margin: 0; }
.oc-signup__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
}
/* The plugin's --outline (#4a423e) only reaches 1.6:1 against the page, which
   is fine for a decorative rule but not for the edge of a control the visitor
   has to find. This is the same warm grey lifted to 3:1, and it is the only
   colour on the site that isn't straight out of Theme.h. */
.oc-signup__row input[type="email"] {
	flex: 1 1 16rem;
	min-width: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--panel-bg);
	border: 1px solid #767066;
	border-radius: 6px;
	padding: 0.7rem 0.9rem;
	line-height: 1.4;
}
/* --sub would be 2.2:1 here; placeholder text has to clear 4.5:1 like any
   other text, so this uses --text-dim. */
.oc-signup__row input[type="email"]::placeholder {
	color: var(--wp--preset--color--text-dim);
	opacity: 1;
}
.oc-signup__row input[type="email"]:focus {
	outline: 2px solid var(--wp--preset--color--teal-bright);
	outline-offset: 1px;
	border-color: transparent;
}
.oc-signup__row button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: #2a1c17;
	background: var(--wp--preset--color--coral);
	border: none;
	border-radius: 6px;
	padding: 0.7rem 1.35rem;
	cursor: pointer;
	flex: 0 0 auto;
}
.oc-signup__row button:hover { background: #f08a72; }
.oc-signup__row button:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-bright);
	outline-offset: 2px;
}
.oc-signup__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-dim);
	margin: 0.75rem 0 0;
	line-height: 1.5;
}
/* honeypot: off-screen, not display:none, so bots still fill it in */
.oc-signup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.oc-notice {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--medium);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--panel-bg);
}
.oc-notice--ok    { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal-bright); }
.oc-notice--error { border-color: #9e4a3c; color: #e8a091; }

/* --- Header / footer ------------------------------------------------------ */
.oc-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.oc-wordmark:hover { color: var(--wp--preset--color--text); }

.oc-version {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--text-dim);
	letter-spacing: 0.05em;
}

/* --- Accessibility -------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--coral);
	color: #2a1c17;
	z-index: 100000;
	top: 0;
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}