/**
 * "Style Guide" page template — CSS-only assets
 * ---------------------------------------------------------------------------
 * Only loaded on pages using template-pages/template-style-guide.php.
 *
 * The one signature element on this page is the "ink chip" color swatch:
 * a Day/Night split block with a punched-paper (perforated) edge before
 * its label, like a printer's ink drawdown or a Pantone chip torn from a
 * specimen book — a nod to the newsroom identity the rest of the theme
 * already has, rather than a generic gradient card. Everything else on
 * the page intentionally stays quiet and reuses the theme's existing
 * utility classes so the boldness stays in one place.
 */

.openpress-sg-container {
	max-width: 1400px;
}

/* ---- Ink-chip color swatch -------------------------------------------- */

.sg-swatch-color {
	height: 5.5rem;
	display: flex;
	flex-direction: column;
}
.sg-swatch-half {
	flex: 1 1 50%;
}

/* Punched/perforated seam between the color block and its label — small
   semicircular "bites" cut through to the card background behind it. */
.sg-swatch-perf {
	height: 9px;
	background-image: radial-gradient( circle at 6px 0, hsl(var(--card)) 4.5px, transparent 5px );
	background-size: 12px 9px;
	background-repeat: repeat-x;
	background-position: 2px 0;
}

.sg-copy {
	color: hsl(var(--muted-foreground));
	transition: color 0.15s ease;
	line-height: 0;
}
.sg-copy:hover {
	color: hsl(var(--accent));
}
.sg-copy.is-copied {
	color: hsl(var(--accent));
}

/* ---- Icon tiles --------------------------------------------------------- */

.sg-icon-tile {
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
	cursor: pointer;
}
.sg-icon-tile:hover {
	border-color: hsl(var(--accent));
	color: hsl(var(--accent));
	background: hsl(var(--secondary) / 0.6);
}
.sg-icon-tile.is-copied {
	border-color: hsl(var(--accent));
	color: hsl(var(--accent));
	background: hsl(var(--accent) / 0.08);
}

/* ---- Radius specimens ---------------------------------------------------- */

.sg-radius-box {
	width: 4rem;
	height: 4rem;
	background: hsl(var(--accent));
}

/* ---- Tiny self-contained accordion demo for the Cards section ---------- */

.sg-demo-accordion > summary {
	list-style: none;
	cursor: pointer;
}
.sg-demo-accordion > summary::-webkit-details-marker {
	display: none;
}
.sg-demo-accordion-chevron {
	transition: transform 0.2s ease;
}
.sg-demo-accordion[open] .sg-demo-accordion-chevron {
	transform: rotate(180deg);
	color: hsl(var(--accent));
}

/* ---- Type specimen rules -------------------------------------------------- */

.sg-type-row {
	border-top: 1px solid hsl(var(--border));
}
.sg-type-row:first-child {
	border-top: none;
}