/* -----------------------------
Root Variables (Light Mode)
-------------------------------- */

:root {
	/* Core colors */
	--bg-main: #f0f0f0;
	--bg-secondary: #f8f8f8;
	--text-main: #2b2b2b;
	--heading-color: #1a1a1a;

	/* Brand */
	--cobalt: #003366;
	--gold: #ffcc00;

	/* UI */
	--border-subtle: #d6d6d6;

	/* Typography */
	--font-heading: "Cinzel", serif;
	--font-body: "Junicode", serif;

	/* Metrics */
	--site-max: 1100px;
	--wrap-max: 56rem;
	--gutter: 1rem;	
}

/* -----------------------------
Dark Mode Overrides
-------------------------------- */

[data-theme="dark"] {
	--bg-main: #2b2b2b;
	--bg-secondary: #1f1f1f;
	--text-main: #f0f0f0;
	--heading-color: #e6e6e6;

	--border-subtle: #3a3a3a;
}

/* -----------------------------
Global Reset (Minimal)
-------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-variant-numeric: lining-nums proportional-nums;
	color: var(--text-main);
	background-color: var(--bg-main);
	line-height: 1.6;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

/* -----------------------------
Typography
-------------------------------- */

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--heading-color);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
	color: var(--heading-color);
}

p {
	max-width: 65ch;
}

/* -----------------------------
Layout Utilities
-------------------------------- */

.wrap {
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap--wide {
  max-width: var(--site-max);
}

/* -----------------------------
Layout
-------------------------------- */

/* Header palette */
.site-header { background: var(--cobalt); }
.site-header a { color: var(--gold); }

/* Make SVG follow the link color */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.brand svg {
	display: block;
	width: 168px;	/* pick a sane default for desktop */
	height:48px;
	transform: translateY(2px);
}

.brand svg path {
	fill: currentColor;
}

/* Optional: tasteful hover (don’t do neon) */
.brand:hover { text-decoration: none; filter: brightness(1.05); }

.header-inner {
	max-width: var(--site-max);
	margin: 0 auto;
	padding: 1rem;

	display: flex;
	align-items: center;
	gap: 2rem;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
}

.site-logo {
	height: 50px;
	/* width: auto; */
	color: var(--gold);
}

.primary-nav {
	display: flex;
	gap: 1.5rem;
	margin-left: auto;
}

.primary-nav a {
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
}

.primary-nav a:hover {
	text-decoration: underline;
}

/* -----------------------------
Theme Toggle
-------------------------------- */

#theme-toggle {
	background: none;
	border: none;
	color: var(--gold);
	cursor: pointer;
	font-size: 1.25rem;
	margin-left: 1rem;
}

/* -----------------------------
Main Content
-------------------------------- */

.content {
	max-width: var(--site-max);
	margin: 2rem auto;
	padding: 0 1.5rem;
}

/* -----------------------------
Footer
-------------------------------- */

.site-footer {
  padding: 1.75rem 1rem 2.25rem;
  border-top: 1px solid var(--border-subtle);
}


.site-footer .footer-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer p {
  margin: 0;
}

.site-footer .footer-legal {
  margin-bottom: 0.9rem;
}

.site-footer .footer-brand {
  margin-bottom: 0.6rem;
}

.site-footer .footer-brand strong {
  font-weight: 600;
  letter-spacing: 0.1em;
}

.site-footer .footer-tm {
  margin-bottom: 0.9rem;
}

/* Footer nav: pull it closer + make it feel intentional */
.site-footer .footer-nav {
  margin-top: 1.1rem;
}

/* Links: make visited not go purple/blue, keep your gold accent */
.site-footer a,
.site-footer a:visited {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.55);
  padding-bottom: 1px;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(212, 175, 55, 0.95);
}

/* -----------------------------
Accessibility Focus Styles
-------------------------------- */

.brand:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 4px;
	border-radius: 6px;
}