/*
Theme Name: stygian-labyrinth-generatepress-child
Template: generatepress
Text Domain: stygian-labyrinth-generatepress-child
Description: A custom GeneratePress child theme for Stygian Labyrinth, built around an atmospheric editorial system and future structured RPG resources.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* This file holds the WordPress theme header (above) plus truly global
 * rules only. Tailwind handles everything else.
 *
 * - Design tokens live in theme.css's @theme block.
 * - Prose + form styles live in presets.css.
 * - Layout, color, typography utilities come from Tailwind v4.
 *
 * Do NOT add component classes here (.btn-primary, .card, etc.). Use
 * Tailwind utilities in templates instead.
 */


:root {
	--sl-navy: #171D3B;
	--sl-deep: #0F172A;
	--sl-ivory: #F7F2E8;
	--sl-gold: #D6A84F;
	--sl-red: #E84C3D;
	--sl-slate: #CBD5E1;
	--sl-charcoal: #252525;
}

html { scroll-behavior: smooth; }
body,
button,
input,
select,
textarea {
	font-family: Verdana, Arial, sans-serif !important;
}
body {
	background: var(--sl-ivory) !important;
	color: var(--sl-charcoal) !important;
	font-size: 17px;
	line-height: 1.65;
}
h1, h2, h3, h4, h5, h6,
.font-serif {
	font-family: Georgia, "Times New Roman", serif !important;
	font-weight: 700;
	letter-spacing: -0.015em;
}
a { color: var(--sl-navy); }
a:hover, a:focus { color: var(--sl-red); }
:focus-visible { outline: 3px solid var(--sl-gold); outline-offset: 4px; }

.bg-soot, .bg-secondary-900 { background-color: var(--sl-deep) !important; }
.bg-paper, .bg-background { background-color: var(--sl-ivory) !important; }
.text-paper { color: var(--sl-ivory) !important; }
.text-neutral { color: var(--sl-charcoal) !important; }
.text-primary { color: var(--sl-red) !important; }
.text-ash { color: #667085 !important; }
.border-primary\/60 { border-color: rgba(214,168,79,.6) !important; }
.border-line { border-color: rgba(214,168,79,.7) !important; }

.sl-shell { width: min(calc(100% - 3rem), 78rem); margin-inline: auto; }
.sl-kicker {
	color: var(--sl-red) !important;
	font-family: Verdana, Arial, sans-serif !important;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sl-text-link {
	color: var(--sl-gold) !important;
	font-family: Verdana, Arial, sans-serif;
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.sl-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: .72rem 1.15rem;
	background: var(--sl-red) !important;
	border: 1px solid var(--sl-red) !important;
	color: #fff !important;
	font-family: Verdana, Arial, sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
}
.sl-button:hover, .sl-button:focus { background: #c8392d !important; color: #fff !important; }
.sl-card { border-top: 1px solid var(--sl-gold); padding-block: 1.35rem; }

/* Parent masthead */
body > header {
	background: var(--sl-navy) !important;
	border-bottom: 2px solid var(--sl-gold) !important;
}
body > header > .sl-shell { min-height: 96px; }
body > header > .sl-shell > a {
	color: var(--sl-ivory) !important;
	text-decoration: none !important;
}
body > header > .sl-shell > a span:first-child {
	color: var(--sl-ivory) !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: clamp(1.35rem, 2.5vw, 2rem) !important;
	font-weight: 700;
	letter-spacing: .055em;
	line-height: 1.05;
	text-decoration: none !important;
	text-transform: uppercase;
}
body > header > .sl-shell > a span:last-child {
	color: var(--sl-gold) !important;
	font-family: Verdana, Arial, sans-serif !important;
	font-size: .66rem !important;
	letter-spacing: .16em;
	text-decoration: none !important;
}


/* Header structural rules must not depend on utility compilation. */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.sr-only:focus,
.sr-only:focus-visible {
	position: fixed !important;
	z-index: 9999;
	top: 1rem;
	left: 1rem;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: .75rem 1rem !important;
	clip: auto !important;
	overflow: visible !important;
	white-space: normal !important;
}
body > header { position: relative; }
body > header > .sl-shell {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 2rem;
	padding-block: 1.25rem;
}
body > header > .sl-shell > a {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
body > header button[aria-controls="primary-navigation"] {
	display: none;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(247,242,232,.35);
	color: var(--sl-ivory);
}
body > header button[aria-controls="primary-navigation"] svg,
#primary-navigation > a svg {
	display: block;
	width: 1.25rem !important;
	height: 1.25rem !important;
	max-width: 1.25rem !important;
	max-height: 1.25rem !important;
}
#primary-navigation {
	display: flex !important;
	align-items: center;
	gap: 1.5rem;
}
#primary-navigation > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--sl-ivory) !important;
}

/* Native navigation */
.sl-menu {
	display: flex;
	align-items: center;
	gap: 1.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: Verdana, Arial, sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
}
.sl-menu li { margin: 0; }
.sl-menu a { color: var(--sl-ivory) !important; text-decoration: none !important; }
.sl-menu a:hover, .sl-menu a:focus-visible { color: var(--sl-gold) !important; }
.sl-menu > .menu-item { position: relative; }
.sl-menu .sub-menu {
	position: absolute;
	z-index: 80;
	top: calc(100% + 1rem);
	left: -.8rem;
	width: 18rem;
	margin: 0;
	padding: .6rem;
	list-style: none;
	background: var(--sl-navy);
	border: 1px solid var(--sl-gold);
	box-shadow: 0 1rem 2rem rgba(15,23,42,.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.35rem);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.sl-menu .sub-menu::before { content: ""; position: absolute; inset: -1rem 0 auto; height: 1rem; }
.sl-menu .menu-item-has-children:hover > .sub-menu,
.sl-menu .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sl-menu .sub-menu li { border-bottom: 1px solid rgba(214,168,79,.25); }
.sl-menu .sub-menu li:last-child { border-bottom: 0; }
.sl-menu .sub-menu a { display: block; padding: .65rem .7rem; line-height: 1.3; }
.sl-menu .sub-menu .sub-menu { top: -.6rem; left: calc(100% + .7rem); }


/* Editorial and page templates */
.sl-reading { width: min(calc(100% - 2rem), 48rem); margin-inline: auto; }
.sl-article-header,
.sl-page-header {
	padding: clamp(4rem, 8vw, 7rem) 0 2.5rem;
	background: var(--sl-ivory);
}
.sl-article-header h1,
.sl-page-header h1 {
	margin: .75rem 0 1.2rem;
	color: var(--sl-navy) !important;
	font-size: clamp(2.35rem, 6vw, 4.6rem);
	line-height: 1.02;
}
.sl-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	color: #667085;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase;
}
.sl-featured-image {
	width: min(calc(100% - 2rem), 78rem);
	margin: 0 auto 3.5rem;
}
.sl-featured-image img {
	display: block;
	width: 100%;
	max-height: 42rem;
	object-fit: cover;
}
.sl-article-body { padding-bottom: 5rem; }
.sl-article-body > :first-child { margin-top: 0; }
.sl-article-body p,
.sl-article-body li {
	color: var(--sl-charcoal);
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.03rem;
	line-height: 1.72;
}
.sl-article-body p { margin: 0 0 1.35rem; }
.sl-article-body h2 {
	margin: 3.3rem 0 1rem;
	color: var(--sl-navy) !important;
	font-size: clamp(1.75rem, 4vw, 2.35rem);
}
.sl-article-body h3 {
	margin: 2.4rem 0 .8rem;
	color: var(--sl-navy) !important;
	font-size: clamp(1.35rem, 3vw, 1.7rem);
}
.sl-article-body a { color: var(--sl-navy); text-decoration-color: var(--sl-gold); text-decoration-thickness: 2px; }
.sl-article-body a:hover, .sl-article-body a:focus { color: var(--sl-red); }
.sl-article-body blockquote {
	margin: 2.5rem 0;
	padding: .25rem 0 .25rem 1.4rem;
	border-left: 4px solid var(--sl-gold);
	color: var(--sl-navy);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.45;
}
.sl-article-body blockquote p { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
.sl-article-body .wp-block-group.has-background {
	margin-block: 2.5rem;
	border: 1px solid var(--sl-gold);
}
.sl-article-body table { width: 100%; margin: 2rem 0; border-collapse: collapse; font-size: .92rem; }
.sl-article-body th { background: var(--sl-navy); color: var(--sl-ivory); text-align: left; }
.sl-article-body th, .sl-article-body td { padding: .7rem .75rem; border: 1px solid #d7dbe4; vertical-align: top; }
.sl-article-body figcaption { color: #667085; font-size: .8rem; line-height: 1.4; }
.sl-post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	padding: 2rem 0 5rem;
	border-top: 1px solid var(--sl-gold);
	font-size: .82rem;
	font-weight: 700;
}
.sl-post-navigation > div:last-child { text-align: right; }
.sl-post-navigation a { color: var(--sl-navy); text-decoration: none; }
.sl-post-navigation a:hover { color: var(--sl-red); }
.sl-comments { padding-bottom: 5rem; }
.sl-page-content--designed { width: 100%; }
.sl-page-content--designed > * { max-width: none; }


/* Resource libraries, archives, and search */
.sl-library-hero {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: var(--sl-navy);
	border-bottom: 2px solid var(--sl-gold);
	color: var(--sl-ivory);
}
.sl-library-hero h1 {
	max-width: 60rem;
	margin: .75rem 0 0;
	color: var(--sl-ivory) !important;
	font-size: clamp(2.5rem, 6vw, 4.8rem);
	line-height: 1.02;
}
.sl-library-description {
	max-width: 48rem;
	margin-top: 1.25rem;
	color: var(--sl-slate);
	font-size: 1rem;
	line-height: 1.65;
}
.sl-library-description p { margin: 0; }
.sl-library-search { max-width: 36rem; margin-top: 2rem; }
.sl-library-search form { display: flex; gap: .6rem; }
.sl-library-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: .75rem .9rem;
	background: var(--sl-ivory);
	border: 1px solid var(--sl-gold);
	color: var(--sl-charcoal);
}
.sl-library-search input[type="submit"],
.sl-library-search button {
	padding: .75rem 1rem;
	background: var(--sl-red);
	border: 1px solid var(--sl-red);
	color: #fff;
	font-weight: 700;
}
.sl-library-results { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--sl-ivory); }
.sl-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.sl-resource-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--sl-gold);
}
.sl-resource-card__image { display: block; background: var(--sl-navy); }
.sl-resource-card__image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sl-resource-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.6rem; }
.sl-resource-card h2 { margin: .55rem 0 .75rem; color: var(--sl-navy); font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.14; }
.sl-resource-card h2 a { color: inherit !important; text-decoration: none !important; }
.sl-resource-card h2 a:hover, .sl-resource-card h2 a:focus { color: var(--sl-red) !important; }
.sl-resource-card__excerpt { color: var(--sl-charcoal); font-size: .94rem; line-height: 1.62; }
.sl-resource-card__excerpt p { margin: 0 0 1rem; }
.sl-resource-card__excerpt .read-more { display: none; }
.sl-resource-card__meta {
	margin: auto 0 .9rem;
	padding-top: .8rem;
	color: #667085;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.sl-resource-card__link {
	align-self: flex-start;
	color: var(--sl-navy) !important;
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none !important;
	border-bottom: 2px solid var(--sl-gold);
}
.sl-resource-card__link:hover, .sl-resource-card__link:focus { color: var(--sl-red) !important; border-color: var(--sl-red); }
.navigation.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: .4rem .7rem;
	border: 1px solid var(--sl-gold);
	color: var(--sl-navy);
	font-weight: 700;
	text-decoration: none;
}
.nav-links .current, .nav-links a:hover { background: var(--sl-navy); color: var(--sl-ivory); }
.sl-empty-state {
	max-width: 48rem;
	padding: 2.5rem;
	background: #fff;
	border: 1px solid var(--sl-gold);
}
.sl-empty-state h2 { color: var(--sl-navy); font-size: 2rem; }

@media (max-width: 720px) {
	.sl-resource-grid { grid-template-columns: 1fr; }
	.sl-library-search form { align-items: stretch; flex-direction: column; }
}


/* Utility pages and resilient responsive elements */
.sl-utility-hero {
	min-height: 36rem;
	display: flex;
	align-items: center;
	padding: clamp(4rem, 10vw, 8rem) 0;
	background: var(--sl-navy);
	border-bottom: 2px solid var(--sl-gold);
	color: var(--sl-ivory);
}
.sl-utility-hero h1 {
	margin: .8rem 0 1.3rem;
	color: var(--sl-ivory) !important;
	font-size: clamp(2.4rem, 6vw, 4.7rem);
	line-height: 1.03;
}
.sl-utility-lead {
	max-width: 44rem;
	color: var(--sl-slate);
	font-size: 1.05rem;
	line-height: 1.7;
}
.sl-utility-search { max-width: 38rem; margin-top: 2rem; }
.sl-utility-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.search-form { display: flex; align-items: stretch; gap: .5rem; }
.search-form label { flex: 1; margin: 0; }
.search-form .search-field {
	width: 100%;
	min-height: 3rem;
	padding: .7rem .85rem;
	background: var(--sl-ivory);
	border: 1px solid var(--sl-gold);
	color: var(--sl-charcoal);
	font-family: Verdana, Arial, sans-serif;
}
.search-form .search-submit {
	min-height: 3rem;
	padding: .7rem 1rem;
	background: var(--sl-red);
	border: 1px solid var(--sl-red);
	color: #fff;
	font-family: Verdana, Arial, sans-serif;
	font-weight: 700;
}
.sl-article-body figure,
.sl-page-content figure { max-width: 100%; }
.sl-article-body img,
.sl-page-content img { max-width: 100%; height: auto; }
.sl-article-body .wp-block-table,
.sl-page-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sl-article-body pre,
.sl-page-content pre { max-width: 100%; overflow-x: auto; }

@media (max-width: 720px) {
	body { font-size: 16px; }
	body > header > .sl-shell { gap: 1rem; }
	body > header > .sl-shell > a span:first-child { font-size: 1.12rem !important; letter-spacing: .035em; }
	body > header > .sl-shell > a span:last-child { font-size: .58rem !important; }
	.sl-path-mark { min-height: 34rem !important; }
	.sl-path-mark::after { width: 16rem; right: -8rem; border-width: 2.8rem; }
	.sl-path-mark h1 { font-size: clamp(2.65rem, 14vw, 4rem) !important; }
	.sl-path-mark p:not(.sl-kicker) { font-size: 1.05rem !important; line-height: 1.65 !important; }
	.sl-article-header, .sl-page-header { padding-top: 3.5rem; }
	.sl-article-header h1, .sl-page-header h1, .sl-library-hero h1, .sl-utility-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
	.sl-featured-image { width: 100%; margin-bottom: 2.5rem; }
	.sl-article-body p, .sl-article-body li { font-size: 1rem; }
	.sl-post-navigation { grid-template-columns: 1fr; }
	.sl-post-navigation > div:last-child { text-align: left; }
	.sl-empty-state { padding: 1.5rem; }
	.sl-utility-actions { align-items: flex-start; flex-direction: column; }
	.search-form { flex-direction: column; }
}

/* Homepage links behave as editorial cards, not inline links. */
#choose-a-path a,
#choose-a-path a * { text-decoration: none !important; }
#choose-a-path a:hover h3,
#choose-a-path a:focus-visible h3 { color: var(--sl-red) !important; }
main > section.bg-secondary-900 a { text-decoration: none; }
main > section.bg-secondary-900 a:hover h3,
main > section.bg-secondary-900 a:focus-visible h3 { color: var(--sl-gold) !important; }
main > section.bg-secondary-900 p { color: var(--sl-slate); }

/* Homepage */
.sl-path-mark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--sl-navy) !important;
}
.sl-path-mark::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 24rem;
	aspect-ratio: 1;
	right: -7rem;
	top: 50%;
	border: 4rem solid rgba(214,168,79,.11);
	transform: translateY(-50%) rotate(45deg);
}
.sl-path-mark h1 { color: var(--sl-ivory) !important; }
.sl-path-mark h1 em { color: var(--sl-gold) !important; }
.sl-path-mark p:not(.sl-kicker) { color: var(--sl-slate) !important; }
.sl-path-mark .sl-kicker { color: var(--sl-red) !important; }

@media (max-width: 960px) {
	.sl-shell { width: min(calc(100% - 2rem), 78rem); }
	body > header button[aria-controls="primary-navigation"] { display: inline-flex; }
	#primary-navigation {
		display: none !important;
		position: absolute;
		z-index: 70;
		top: 100%;
		left: 0;
		right: 0;
		align-items: stretch;
		flex-direction: column;
		padding: 1rem;
		background: var(--sl-navy) !important;
		border-top: 1px solid var(--sl-gold);
	}
	#primary-navigation.\!flex { display: flex !important; }
	.sl-primary-nav { width: 100%; }
	.sl-menu { align-items: stretch; flex-direction: column; gap: 0; width: 100%; }
	.sl-menu > .menu-item { border-bottom: 1px solid rgba(214,168,79,.3); }
	.sl-menu a { display: block; padding: .8rem 0; }
	.sl-menu .sub-menu,
	.sl-menu .sub-menu .sub-menu {
		position: static;
		width: auto;
		margin: 0 0 .5rem 1rem;
		padding: 0 0 0 1rem;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--sl-gold);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.sl-menu .sub-menu::before { display: none; }
}