/*
 * site-theme.css: csshole's own values and rules for the Shioh style. Loaded AFTER shioh-style.css, which is the
 * skill's base stylesheet copied unchanged (update the look by replacing that one file).
 */

:root {
	/* the Shioh pastels and navy (the base defaults), on csshole's own background */
	--ss-bg: #0e0b18;                                   /* near-black with a hint of purple */
	--ss-pattern: url('../img/csshole-pattern.svg');    /* the site's gears, lilac and faint */
	--ss-pattern-size: 360px 360px;
}

/* Section colours */
.site-home { --ss-section: var(--ss-p1); }
.site-docs { --ss-section: var(--ss-p4); }

/* The logo is an image (textlogo.png), a little wider than the base allows. */
.ss-logo img { max-width: 210px; }

/* csshole is a no-JavaScript site, so it doesn't load shioh.js and the phone menu button never shows: the nav stays
   open. On phones its links wrap into rows of chips instead of a tall list, so the page starts near the top. */
@media (max-width: 860px) {
	.ss-navcell .ss-logo { text-align: center; }
	.ss-navcell .ss-logo img { max-width: 170px; }
	.ss-nav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem;
	}
	.ss-nav a { background: var(--ss-panel); }
	.ss-nav hr { display: none; }
}

/* A warning inside a cell (e.g. pages that don't work on phones). */
.site-warn {
	background: var(--ss-panel-strong);
	border: 1px solid var(--ss-red);
	border-left-width: 4px;
	border-radius: var(--ss-radius-sm);
	padding: 0.45rem 0.7rem;
	margin: 0 0 0.8rem;
	font-size: 0.92rem;
}
.site-warn b { color: var(--ss-red); }

/* footer: a white label under the cells */
footer.site-footer { text-align: center; padding: 0 var(--ss-gap) 1.5rem; }
footer.site-footer span { display: inline-block; background: rgb(255 255 255 / 0.85); border-radius: var(--ss-radius-sm); padding: 0.3rem 0.8rem; font-size: 0.85rem; }