/* ============================================================
   BACKWOODS — Global Styles  (Revision 2)
   Light base, dark anchors.
   Mobile-first: base = mobile, min-width queries scale up.
   ============================================================ */

/* ----------------------------------------------------------
   1. Semantic CSS custom properties
   ---------------------------------------------------------- */
:root {
	/* Palette */
	--bw-paper : var(--wp--preset--color--paper);
	--bw-card  : var(--wp--preset--color--card);
	--bw-pitch : var(--wp--preset--color--pitch);
	--bw-bark  : var(--wp--preset--color--bark);
	--bw-kraft : var(--wp--preset--color--kraft);
	--bw-ash   : var(--wp--preset--color--ash);
	--bw-brass : var(--wp--preset--color--brass);

	/* Typography stacks */
	--bw-display : var(--wp--preset--font-family--archivo);
	--bw-body    : var(--wp--preset--font-family--newsreader);
	--bw-mono    : var(--wp--preset--font-family--ibm-plex-mono);

	/* Spacing — mobile defaults */
	--bw-section-pad : 96px;
	--bw-gutter      : 20px;
	--bw-max-width   : 1240px;
}

@media (min-width: 769px) {
	:root {
		--bw-section-pad : 160px;
		--bw-gutter      : 32px;
	}
}

/* ----------------------------------------------------------
   2. Box model
   ---------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------
   3. Body — light base
   ---------------------------------------------------------- */
body {
	background-color        : var(--bw-paper);
	color                   : var(--bw-pitch);
	font-family             : var(--bw-body);
	font-size               : 1.0625rem;
	line-height             : 1.6;
	-webkit-font-smoothing  : antialiased;
	-moz-osx-font-smoothing : grayscale;
}

/* ----------------------------------------------------------
   4. Headings — fluid type, Archivo expanded
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title {
	font-family   : var(--bw-display);
	font-weight   : 600;
	font-stretch  : 125%;
	line-height   : 1.05;
	letter-spacing: -0.02em;
	text-transform: none;
	color         : var(--bw-pitch);
}

/* Inverted heading colour inside dark bands */
.bw-dark h1, .bw-dark h2, .bw-dark h3,
.bw-dark h4, .bw-dark h5, .bw-dark h6 {
	color: var(--bw-card);
}

h1 { font-size: clamp(2rem,    7vw, 4.5rem);   }
h2 { font-size: clamp(1.75rem, 5vw, 3rem);     }
h3 { font-size: clamp(1.375rem,4vw, 2rem);     }
h4 { font-size: clamp(1.125rem,3vw, 1.375rem); }
h5 { font-size: 1.0625rem; }
h6 { font-size: 0.875rem;  }

/* ----------------------------------------------------------
   5. Body copy
   ---------------------------------------------------------- */
p, li, blockquote, td, th {
	font-family: var(--bw-body);
	line-height: 1.6;
}

/* ----------------------------------------------------------
   6. Mono utility — spec strips, labels, meta
   ---------------------------------------------------------- */
.bw-mono,
.bw-spec-strip {
	font-family   : var(--bw-mono);
	font-weight   : 500;
	font-size     : 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color         : var(--bw-ash);
}

/* Lighter variant for use on dark bands */
.bw-dark .bw-mono,
.bw-dark .bw-spec-strip {
	color: var(--bw-kraft);
}

/* ----------------------------------------------------------
   7. Links — brass on light, kraft on dark
   ---------------------------------------------------------- */
a {
	color                : var(--bw-brass);
	text-decoration      : underline;
	text-underline-offset: 3px;
	transition           : color 150ms ease;
}

a:hover {
	color: var(--bw-kraft);
}

.bw-dark a {
	color: var(--bw-kraft);
}

.bw-dark a:hover {
	color: var(--bw-card);
}

/* ----------------------------------------------------------
   8. Focus rings
   On light: 2px brass.  On dark: 2px kraft.
   ---------------------------------------------------------- */
:focus-visible {
	outline       : 2px solid var(--bw-brass);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: none;
}

.bw-dark :focus-visible {
	outline-color: var(--bw-kraft);
}

/* ----------------------------------------------------------
   9. Horizontal rules
   ---------------------------------------------------------- */
hr, .bw-rule {
	border      : none;
	border-top  : 1px solid var(--bw-ash);
	margin-block: 1.5rem;
	opacity     : 0.3;
}

.bw-dark hr,
.bw-dark .bw-rule {
	border-top-color: var(--bw-kraft);
	opacity         : 0.35;
}

/* ----------------------------------------------------------
   10. Section layout
   ---------------------------------------------------------- */
.bw-section {
	padding-block : var(--bw-section-pad);
	padding-inline: var(--bw-gutter);
}

.bw-container {
	max-width    : var(--bw-max-width);
	margin-inline: auto;
	padding-inline: var(--bw-gutter);
}

/* ----------------------------------------------------------
   11. Surface tokens
   ---------------------------------------------------------- */
.bw-surface-paper { background-color: var(--bw-paper); color: var(--bw-pitch); }
.bw-surface-card  { background-color: var(--bw-card);  color: var(--bw-pitch); }
.bw-surface-pitch { background-color: var(--bw-pitch); color: var(--bw-card);  }
.bw-surface-bark  { background-color: var(--bw-bark);  color: var(--bw-card);  }

/* Dark band helper — applied to any pitch/bark section */
.bw-surface-pitch,
.bw-surface-bark {
	--is-dark: 1; /* can be read by child rules if needed */
}

/* ----------------------------------------------------------
   12. Text colour utilities
   ---------------------------------------------------------- */
.bw-text-ash   { color: var(--bw-ash);   }
.bw-text-kraft { color: var(--bw-kraft); }
.bw-text-card  { color: var(--bw-card);  }
.bw-text-pitch { color: var(--bw-pitch); }
.bw-text-brass { color: var(--bw-brass); }

/* ----------------------------------------------------------
   13. Text selection
   ---------------------------------------------------------- */
::selection {
	background-color: var(--bw-pitch);
	color           : var(--bw-card);
}

/* ----------------------------------------------------------
   14. Skip-to-content link
   ---------------------------------------------------------- */
.bw-skip-link {
	position    : absolute;
	top         : -100%;
	left        : var(--bw-gutter);
	z-index     : 9999;
	background  : var(--bw-pitch);
	color       : var(--bw-card);
	font-family : var(--bw-mono);
	font-size   : 0.75rem;
	font-weight : 500;
	text-transform : uppercase;
	letter-spacing : 0.08em;
	padding     : 10px 20px;
	text-decoration: none;
	white-space : nowrap;
}

.bw-skip-link:focus,
.bw-skip-link:focus-visible {
	top         : var(--bw-gutter);
	outline     : 2px solid var(--bw-kraft);
	outline-offset: 3px;
}

/* ----------------------------------------------------------
   15. Scroll reveal
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.bw-reveal {
		opacity   : 0;
		transform : translateY(10px);
		transition: opacity 200ms ease, transform 200ms ease;
	}

	.bw-reveal.is-visible {
		opacity  : 1;
		transform: none;
	}
}

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