/*
Theme Name:        Color of the Sky
Theme URI:         https://paxana.org
Author:            Paxana Wiedeman
Author URI:        https://paxana.org
Description:       A clean, professional block theme for a night sky. Text sits at high contrast on near-black, while the full twilight gradient — indigo through violet, orchid, rose, and ember — runs as a rail down the edge of the page and glows faintly at the horizon. Designed to pair with the Starry Sky block, whose default sky color is this theme's page background.
Requires at least: 6.6
Tested up to:      6.8
Requires PHP:      7.4
Version:           1.0.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       color-of-the-sky
Tags:              one-column, block-patterns, full-site-editing, dark, portfolio, blog, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Everything color, type, and layout related lives in theme.json.
   This file holds only what theme.json cannot express: the gradient rail,
   the horizon glow, focus treatment, and print.
   ---------------------------------------------------------------------- */

:root {
	--cots-rail-width: 6px;
	--cots-twilight: linear-gradient(
		180deg,
		#05060a 0%,
		#1b2050 26%,
		#4b3a8c 48%,
		#9b5fa8 66%,
		#de6e8e 82%,
		#ffc98b 100%
	);
	--cots-horizon: linear-gradient(
		90deg,
		#1b2050 0%,
		#4b3a8c 26%,
		#9b5fa8 50%,
		#de6e8e 74%,
		#ffc98b 100%
	);
	/*
	 * The rail uses its own ramp. --cots-twilight opens on #05060a, which is
	 * the page background, so the top quarter of a full-height rail is
	 * invisible. This one starts at indigo and is legible end to end.
	 */
	--cots-rail: linear-gradient(
		180deg,
		#2a2f6b 0%,
		#4b3a8c 22%,
		#7a4f9e 44%,
		#9b5fa8 60%,
		#de6e8e 80%,
		#ffc98b 100%
	);
}

/* The sky rail ----------------------------------------------------------
   A full-height slice of the twilight gradient pinned to the left edge.
   Purely decorative: it never sits behind text, so it costs no contrast. */

.wp-site-blocks::before {
	content: "";
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 10;
	width: var(--cots-rail-width);
	background: var(--cots-rail);
	pointer-events: none;
}

/* The stars -------------------------------------------------------------
   A static star field painted with layered radial gradients: no images, no
   JavaScript, no animation. Three tile sizes at different scales overlap so
   the repeat is not readable as a grid.

   This is the theme's own sky. The Starry Sky block is a separate plugin and
   does something different and better — a live canvas that parallaxes with
   the pointer and throws shooting stars — but it only exists where you place
   the block. This makes every page a night sky without it.

   Stars sit above the page background and below all content, so they never
   reduce text contrast. */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: repeat;
	background-image:
		/* bright, sparse — 420px tile */
		radial-gradient( 1.6px 1.6px at 34px 58px, rgba( 255, 255, 255, 0.95 ), transparent 56% ),
		radial-gradient( 1.5px 1.5px at 291px 137px, rgba( 214, 228, 255, 0.9 ), transparent 56% ),
		radial-gradient( 1.4px 1.4px at 118px 289px, rgba( 255, 236, 214, 0.9 ), transparent 56% ),
		radial-gradient( 1.5px 1.5px at 377px 344px, rgba( 255, 255, 255, 0.85 ), transparent 56% ),
		/* mid — 300px tile */
		radial-gradient( 1.1px 1.1px at 76px 22px, rgba( 255, 255, 255, 0.72 ), transparent 58% ),
		radial-gradient( 1.1px 1.1px at 233px 91px, rgba( 226, 235, 255, 0.68 ), transparent 58% ),
		radial-gradient( 1px 1px at 149px 186px, rgba( 255, 246, 232, 0.68 ), transparent 58% ),
		radial-gradient( 1.1px 1.1px at 41px 254px, rgba( 255, 255, 255, 0.62 ), transparent 58% ),
		radial-gradient( 1px 1px at 274px 271px, rgba( 255, 218, 198, 0.6 ), transparent 58% ),
		/* faint dust — 190px tile */
		radial-gradient( 0.8px 0.8px at 18px 44px, rgba( 255, 255, 255, 0.45 ), transparent 60% ),
		radial-gradient( 0.8px 0.8px at 121px 17px, rgba( 214, 228, 255, 0.4 ), transparent 60% ),
		radial-gradient( 0.7px 0.7px at 88px 112px, rgba( 255, 255, 255, 0.38 ), transparent 60% ),
		radial-gradient( 0.8px 0.8px at 165px 148px, rgba( 255, 240, 224, 0.4 ), transparent 60% ),
		radial-gradient( 0.7px 0.7px at 52px 171px, rgba( 255, 255, 255, 0.34 ), transparent 60% );
	background-size:
		420px 420px, 420px 420px, 420px 420px, 420px 420px,
		300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
		190px 190px, 190px 190px, 190px 190px, 190px 190px, 190px 190px;
}

/* The horizon ------------------------------------------------------------
   A faint warm glow along the bottom of the viewport, as though the sun
   went down just past the edge of the page. Kept under 12% opacity so body
   text over it stays comfortably above WCAG AA. It paints after the stars,
   washing them out near the bottom the way a real horizon does. */

.wp-site-blocks::after {
	content: "";
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 0;
	height: 22vh;
	background: radial-gradient(
		130% 100% at 50% 100%,
		rgba( 255, 201, 139, 0.11 ) 0%,
		rgba( 222, 110, 142, 0.07 ) 34%,
		rgba( 91, 75, 158, 0.04 ) 56%,
		transparent 72%
	);
	pointer-events: none;
}

/* Keep real content above the glow. */
.wp-site-blocks > * {
	position: relative;
	z-index: 1;
}

/* Give the rail room so it never crowds the text on small screens. */
body {
	padding-inline-start: var(--cots-rail-width);
}

@media ( max-width: 600px ) {
	:root {
		--cots-rail-width: 4px;
	}
}

/* Headings --------------------------------------------------------------
   A short slice of horizon above each h2 — enough to carry the palette
   into the body of a page without decorating the text itself. */

.wp-site-blocks h2:not(.wp-block-site-title):not(.wp-block-post-title)::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-block-end: 0.75rem;
	border-radius: 2px;
	background: var(--cots-horizon);
}

/* Navigation ------------------------------------------------------------
   Normalise every item to one line box, so no single item can drift out of
   line with its siblings.

   Note: this is belt and braces, not the fix. The actual cause of "Home"
   sitting above the rest of the menu was this theme's own list-spacing rule
   leaking into the page list — see the list section further down. These
   rules stay because pinning shared font metrics and centre alignment is
   cheap insurance against the same class of bug. */

.wp-block-navigation .wp-block-navigation__container {
	align-items: center;
}

.wp-block-navigation .wp-block-navigation-item {
	display: flex;
	align-items: center;
	line-height: 1.4;
}

.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.4;
	padding-block: 0;
	margin-block: 0;
	border-block: 0;
	vertical-align: middle;
}

/* Mark the current page without moving it. */
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: #f3f5fc;
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 #9b5fa8;
}

/* Header and footer rules ------------------------------------------------ */

.wp-block-template-part.site-header {
	border-block-end: 1px solid #141a38;
}

.wp-block-template-part.site-footer {
	border-block-start: 1px solid #141a38;
}

/* Focus ------------------------------------------------------------------
   A visible, high-contrast ring on every focusable thing. */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid #ffc98b;
	outline-offset: 3px;
	border-radius: 3px;
}

/* Selection -------------------------------------------------------------- */

::selection {
	background: #5b4b9e;
	color: #f3f5fc;
}

/* Separators sit quietly on a dark page. */
.wp-block-separator {
	border: 0;
	height: 1px;
	background: #141a38;
	opacity: 1;
}

/* Prose lists get a little breathing room at this line height.
   Scoped to the core List block on purpose. An unscoped `:where(ul, ol) li +
   li` also matches the navigation's page list, and a top margin on every item
   except the first drops them all below the current-page item — which is what
   made "Home" appear to float above the rest of the menu. */
.wp-site-blocks :where(ul, ol).wp-block-list li + li {
	margin-block-start: 0.4rem;
}

/* Navigation lists never take list spacing, whatever else is on the page. */
.wp-block-navigation li + li,
.wp-block-page-list li + li {
	margin-block-start: 0;
}

/* Full-bleed blocks -----------------------------------------------------
   page.html leaves the main group unconstrained so post-content spans the
   viewport and carries the 46rem text measure itself. This negates the
   content wrapper's global padding so an alignfull block — the Starry Sky
   hero — reaches the window edges instead of stopping at the text column. */

.wp-block-post-content > .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(var(--wp--preset--spacing--40) * -1);
}

/* Starry Sky block ------------------------------------------------------
   The block's default sky is #05060a, the same as this theme's page
   background, so a full-width Starry Sky block reads as the page opening
   up rather than as a box dropped onto it. */

.wp-block-starry-sky {
	border-radius: 0;
}

.wp-block-starry-sky .starry-sky__inner {
	max-width: 46rem;
	margin-inline: auto;
}

/* Skills matrix ---------------------------------------------------------
   The interactive matrix on the Skills page is theme-agnostic — it builds
   its own colors out of currentColor. These rules only trade its neutral
   borders for the sky palette; remove this section and it still works. */

.pw-stage {
	border-inline-start: 3px solid transparent;
	border-image: var(--cots-twilight) 1;
}

.pw-chip {
	border-color: #2a2f6b;
	color: #f3f5fc;
}

.pw-chip:hover {
	background: rgba( 91, 75, 158, 0.28 );
	border-color: #5b4b9e;
}

.pw-r:checked + .pw-chip {
	background: rgba( 155, 95, 168, 0.3 );
	border-color: #9b5fa8;
}

.pw-grp__l {
	color: #a9b0c7;
	opacity: 1;
}

.pw-job__m,
.pw-note,
.pw-sk__hint {
	color: #a9b0c7;
	opacity: 1;
}

/* Motion and contrast preferences --------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media ( prefers-contrast: more ) {
	.wp-site-blocks::after,
	body::before {
		display: none;
	}

	.pw-chip {
		border-color: #a9b0c7;
	}
}

/* Print -----------------------------------------------------------------
   This is a resume. People print resumes, and a near-black page wastes a
   cartridge. Print inverts to black on white, drops the decoration, and
   expands every skill panel so nothing is lost on paper. */

@media print {
	.wp-site-blocks::before,
	.wp-site-blocks::after,
	body::before {
		display: none !important;
	}

	body {
		padding-inline-start: 0;
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}

	.wp-site-blocks,
	.wp-site-blocks *,
	.wp-site-blocks :where(h1, h2, h3, h4, h5, h6) {
		background: transparent !important;
		color: #000 !important;
		text-shadow: none !important;
		box-shadow: none !important;
	}

	.wp-site-blocks a {
		color: #000 !important;
		text-decoration: underline;
	}

	.wp-site-blocks a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.wp-site-blocks h2::before,
	.wp-block-navigation,
	.wp-block-template-part.site-footer {
		display: none !important;
	}

	/* Expand the whole skills matrix onto the page. */
	.pw-stage > .pw-p,
	.pw-sk:has(.pw-r:checked) .pw-stage > .pw-p0 {
		display: block !important;
	}

	.pw-stage {
		border-image: none;
		border-inline-start: 2px solid #000;
	}

	.pw-chips,
	.pw-sk__hint,
	.pw-note {
		display: none !important;
	}

	.pw-p__t {
		page-break-after: avoid;
	}

	.wp-site-blocks :where(h1, h2, h3) {
		page-break-after: avoid;
	}

	.pw-job,
	.wp-block-list li {
		page-break-inside: avoid;
	}
}