/*
Theme Name: Nightwatcher
Theme URI: https://nightwatcher.online/
Author: Nightwatcher
Description: Scores the next seven nights for astrophotography at your location by cloud cover, moonlight, sky steadiness, and rain, plus a second page covering the seven other planets.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nightwatcher
*/

/* ---------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------- */

:root {
	--nw-bg: #0b1026;
	--nw-panel: #141b3c;
	--nw-panel-alt: #1b2350;
	--nw-border: #2a3468;
	--nw-border-soft: #232c58;
	--nw-text: #e8e6f5;
	--nw-text-muted: #9098c4;
	--nw-text-faint: #5c6494;
	--nw-gold: #e8b84b;
	--nw-teal: #4fd1c5;
	--nw-violet: #7a6ff0;
	--nw-pink: #ff7a9c;
	--nw-orange: #f0975a;

	--nw-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--nw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------
   Base document (applies wherever style.css loads; ordinary WordPress
   chrome like admin bar styling is left completely untouched)
   -------------------------------------------------------------------- */

body.nightwatcher-body {
	margin: 0;
	background: var(--nw-bg);
	color: var(--nw-text);
	font-family: var(--nw-font-body);
}

/* ---------------------------------------------------------------------
   The Nightwatcher app: everything below this point that is not part of
   the plain site chrome is scoped under .nightwatcher-app, so none of it
   can ever leak onto an ordinary post or page.
   -------------------------------------------------------------------- */

.nightwatcher-app {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 20px 80px;
	color: var(--nw-text);
	font-family: var(--nw-font-body);
	line-height: 1.5;
	isolation: isolate;
}

.nightwatcher-app::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: var(--nw-bg);
	background-image:
		radial-gradient(1.5px 1.5px at 10% 15%, rgba(232, 230, 245, 0.9), transparent),
		radial-gradient(1px 1px at 25% 45%, rgba(232, 230, 245, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 40% 10%, rgba(232, 230, 245, 0.6), transparent),
		radial-gradient(1px 1px at 55% 60%, rgba(232, 230, 245, 0.8), transparent),
		radial-gradient(1.5px 1.5px at 70% 30%, rgba(232, 230, 245, 0.5), transparent),
		radial-gradient(1px 1px at 85% 75%, rgba(232, 230, 245, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 95% 20%, rgba(232, 230, 245, 0.6), transparent),
		radial-gradient(1px 1px at 15% 85%, rgba(232, 230, 245, 0.6), transparent),
		radial-gradient(1.5px 1.5px at 60% 90%, rgba(232, 230, 245, 0.5), transparent),
		radial-gradient(1px 1px at 35% 70%, rgba(232, 230, 245, 0.6), transparent);
	background-repeat: repeat;
	background-size: 340px 340px;
	pointer-events: none;
}

.nightwatcher-app * {
	box-sizing: border-box;
}

.nightwatcher-app a {
	color: var(--nw-teal);
}

.nightwatcher-app a:hover,
.nightwatcher-app a:focus-visible {
	color: var(--nw-gold);
}

.nightwatcher-app :focus-visible {
	outline: 2px solid var(--nw-gold);
	outline-offset: 2px;
}

/* Brand mark: two overlapping circles forming a crescent, drawn as an
   inline SVG data URI. The SVG's own attributes use single quotes since
   the whole data URI already sits inside a double quoted url() value;
   nesting double quotes inside double quotes here would truncate the
   attribute at the SVG's first quote and dump the remainder as text. */
.nw-logo {
	display: inline-block;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='8' y='8' width='496' height='496' rx='96' fill='%230b1026'/%3E%3Ccircle cx='256' cy='256' r='136' fill='%23e8b84b'/%3E%3Ccircle cx='302' cy='214' r='94' fill='%230b1026'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* ---- Header ---- */

.nw-header {
	margin-bottom: 8px;
}

.nw-brand-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nw-brand {
	font-family: var(--nw-font-display);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
}

.nw-tagline {
	font-size: 14px;
	color: var(--nw-text-muted);
	margin-top: 2px;
}

.nw-crosslink {
	margin: 10px 0 0;
	font-size: 14px;
}

.nw-intro {
	font-size: 15px;
	color: var(--nw-text-muted);
	max-width: 62ch;
	margin: 18px 0 28px;
}

.nw-section-title {
	font-family: var(--nw-font-display);
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 14px;
}

.nw-subtitle {
	font-family: var(--nw-font-display);
	font-size: 15.5px;
	font-weight: 600;
	margin: 0 0 10px;
}

/* ---- Location bar ---- */

.nw-location {
	position: relative;
	margin-bottom: 28px;
}

.nw-location-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.nw-location-input {
	flex: 1 1 220px;
	min-width: 0;
	background: var(--nw-panel);
	border: 1px solid var(--nw-border);
	color: var(--nw-text);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: var(--nw-font-body);
}

.nw-location-status {
	font-size: 13px;
	color: var(--nw-text-muted);
}

.nw-location-results {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	position: relative;
	z-index: 2;
	background: var(--nw-panel);
	border: 1px solid var(--nw-border);
	border-radius: 8px;
	overflow: hidden;
}

.nw-location-results:empty {
	display: none;
	border: none;
}

.nw-location-option {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	color: var(--nw-text);
	padding: 10px 12px;
	font-size: 14px;
	font-family: var(--nw-font-body);
	cursor: pointer;
	border-bottom: 1px solid var(--nw-border-soft);
}

.nw-location-option:last-child {
	border-bottom: none;
}

.nw-location-option:hover,
.nw-location-option:focus-visible {
	background: var(--nw-panel-alt);
	color: var(--nw-gold);
}

/* ---- Buttons ---- */

.nw-btn {
	font-family: var(--nw-font-body);
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	padding: 10px 16px;
	cursor: pointer;
	border: 1px solid var(--nw-border);
}

.nw-btn-secondary {
	background: var(--nw-panel);
	color: var(--nw-text);
}

.nw-btn-secondary:hover,
.nw-btn-secondary:focus-visible {
	border-color: var(--nw-gold);
	color: var(--nw-gold);
}

.nw-btn-small {
	padding: 6px 12px;
	font-size: 13px;
}

/* ---- One week outlook ---- */

.nw-outlook-wrap {
	margin-bottom: 8px;
}

.nw-week-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 24px;
}

.nw-night-cell {
	flex: 1 1 0;
	min-width: 76px;
	background: var(--nw-panel);
	border: 1px solid var(--nw-border);
	border-radius: 10px;
	padding: 12px 8px;
	text-align: center;
	color: var(--nw-text);
	cursor: pointer;
	position: relative;
	font-family: var(--nw-font-body);
}

.nw-night-cell.is-selected {
	border-color: var(--nw-gold);
	background: var(--nw-panel-alt);
}

.nw-night-day {
	font-size: 12px;
	color: var(--nw-text-muted);
	margin-bottom: 6px;
}

.nw-night-score {
	font-family: var(--nw-font-display);
	font-size: 22px;
	font-weight: 600;
}

.nw-badge-best {
	position: absolute;
	top: -9px;
	right: -6px;
	background: var(--nw-gold);
	color: var(--nw-bg);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 999px;
}

/* ---- Card ---- */

.nw-card {
	background: var(--nw-panel);
	border: 1px solid var(--nw-border);
	border-radius: 14px;
	padding: 24px;
}

.nw-card-top {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

@supports not (gap: 1px) {
	.nw-card-top > .nw-score-ring {
		margin-right: 20px;
	}
}

.nw-card-title {
	font-family: var(--nw-font-display);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 4px;
}

.nw-card-sub {
	font-size: 14px;
	color: var(--nw-text-muted);
	margin: 0;
}

.nw-score-ring {
	position: relative;
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Plain fallback color if conic-gradient() is not understood; the
	   inline style with the real conic-gradient takes over wherever it
	   is supported, since inline styles win on specificity. */
	background: var(--nw-border);
}

.nw-score-ring::before {
	content: '';
	position: absolute;
	top: 9px;
	left: 9px;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--nw-panel);
}

.nw-score-number {
	position: relative;
	z-index: 1;
	font-family: var(--nw-font-display);
	font-size: 22px;
	font-weight: 600;
}

/* ---- Stat row ---- */

.nw-stat-row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 14px 0;
	margin-bottom: 8px;
	border-top: 1px solid var(--nw-border-soft);
	border-bottom: 1px solid var(--nw-border-soft);
}

.nw-stat {
	flex: 1 1 100px;
	min-width: 100px;
}

.nw-stat-label {
	font-size: 12px;
	color: var(--nw-text-muted);
	margin-bottom: 2px;
}

.nw-stat-value {
	font-size: 16px;
	font-weight: 500;
}

.nw-tooltip {
	position: relative;
	border-bottom: 1px dotted var(--nw-text-faint);
	cursor: help;
}

.nw-tooltip-bubble {
	display: none;
	position: absolute;
	bottom: 130%;
	left: 0;
	width: 220px;
	background: var(--nw-panel-alt);
	border: 1px solid var(--nw-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	color: var(--nw-text);
	z-index: 3;
	font-weight: 400;
}

.nw-tooltip:hover .nw-tooltip-bubble,
.nw-tooltip:focus-visible .nw-tooltip-bubble {
	display: block;
}

/* ---- Subsections ---- */

.nw-subsection {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--nw-border-soft);
}

.nw-subsection:first-of-type {
	border-top: none;
	padding-top: 0;
}

.nw-callout {
	background: var(--nw-panel-alt);
	border-radius: 10px;
	padding: 16px;
	border-top: none;
}

/* ---- Timeline ---- */

.nw-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nw-timeline li {
	display: flex;
	gap: 12px;
	font-size: 14px;
}

.nw-timeline-time {
	font-family: var(--nw-font-display);
	color: var(--nw-gold);
	min-width: 72px;
}

/* ---- Clarity chart ---- */

.nw-clarity-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 90px;
	overflow-x: auto;
	padding-bottom: 2px;
}

.nw-clarity-bar {
	flex: 1 1 8px;
	min-width: 6px;
	background: var(--nw-teal);
	border-radius: 3px 3px 0 0;
	opacity: 0.85;
}

.nw-clarity-readout {
	font-size: 13px;
	color: var(--nw-text-muted);
	margin: 10px 0 0;
}

/* ---- Catalog and meteor lists ---- */

.nw-catalog-list,
.nw-meteor-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.nw-catalog-list strong,
.nw-meteor-list strong {
	font-family: var(--nw-font-display);
	font-weight: 600;
}

/* ---- Sky brightness / Bortle ---- */

.nw-bortle-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}

.nw-bortle-slider {
	flex: 1 1 auto;
	accent-color: var(--nw-gold);
}

.nw-bortle-current {
	margin-top: 8px;
}

/* ---- Solar system planet grid ---- */

.nw-planet-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.nw-planet-card {
	padding: 20px;
}

.nw-planet-status {
	font-weight: 500;
	color: var(--nw-gold);
	margin-bottom: 0;
}

.nw-brightest-banner {
	margin-bottom: 24px;
	border-color: var(--nw-gold);
}

/* ---- Utility text states ---- */

.nw-muted {
	color: var(--nw-text-muted);
	font-size: 14px;
}

.nw-loading,
.nw-error {
	font-size: 15px;
	color: var(--nw-text-muted);
}

.nw-error {
	color: var(--nw-pink);
}

.nw-footnote {
	margin-top: 28px;
	font-size: 13px;
	color: var(--nw-text-faint);
	max-width: 65ch;
}

/* ---------------------------------------------------------------------
   Plain site chrome for ordinary WordPress content (posts, pages other
   than the two app pages, search, archives, 404). Deliberately quieter
   than the app itself, and not scoped under .nightwatcher-app since it is
   a different, simpler part of the same site.
   -------------------------------------------------------------------- */

body.nightwatcher-site {
	margin: 0;
	background: var(--nw-bg);
	color: var(--nw-text);
	font-family: var(--nw-font-body);
}

.nw-site-header {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.nw-site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--nw-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--nw-text);
	text-decoration: none;
}

.nw-site-nav {
	display: flex;
	gap: 18px;
	font-size: 14px;
}

.nw-site-nav a {
	color: var(--nw-text-muted);
	text-decoration: none;
}

.nw-site-nav a:hover,
.nw-site-nav a:focus-visible {
	color: var(--nw-gold);
}

.nw-site-main {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 20px 80px;
}

.nw-plain-content h1 {
	font-family: var(--nw-font-display);
	font-size: 28px;
}

.nw-plain-card,
.nw-plain-article {
	background: var(--nw-panel);
	border: 1px solid var(--nw-border);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
}

.nw-plain-card h2 {
	font-family: var(--nw-font-display);
	font-size: 19px;
	margin-top: 0;
}

.nw-plain-card a,
.nw-plain-article a {
	color: var(--nw-teal);
}

.nw-site-footer {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	font-size: 13px;
	color: var(--nw-text-faint);
}

/* ---------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

@media (max-width: 640px) {
	.nw-brand {
		font-size: 28px;
	}

	.nw-card {
		padding: 18px;
	}

	.nw-card-top {
		gap: 14px;
	}

	.nw-planet-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   Reduced motion: nothing in this theme animates on its own, but any
   future hover or focus transition should also respect this.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nightwatcher-app *,
	.nightwatcher-site * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------
   Print: browsers drop background colors by default when printing, which
   would otherwise leave this dark theme as unreadable light text on a
   white page. Override the palette itself to a light, high contrast set
   rather than trying to force backgrounds to print.
   -------------------------------------------------------------------- */

@media print {
	:root {
		--nw-bg: #ffffff;
		--nw-panel: #f4f4f8;
		--nw-panel-alt: #eceef7;
		--nw-border: #c7cbdd;
		--nw-border-soft: #d8dbe8;
		--nw-text: #14162b;
		--nw-text-muted: #454a68;
		--nw-text-faint: #6b7094;
		--nw-gold: #8a6a12;
		--nw-teal: #0d6e66;
		--nw-violet: #4a3fc4;
		--nw-pink: #a13655;
		--nw-orange: #9a5220;
	}

	.nightwatcher-app::before {
		display: none;
	}

	.nw-logo {
		filter: invert(1) hue-rotate(180deg);
	}
}