/*
Theme Name: The Dice Bag — Adventurer's Ledger
Theme URI: https://www.thedicebag.com/
Author: The Dice Bag
Description: A fast, focused tabletop-RPG publishing theme built for ready-to-run adventures.
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dicebag
*/

:root {
	--ink: #18212a;
	--muted: #5e6770;
	--night: #101b24;
	--night-soft: #182a36;
	--parchment: #f7f0df;
	--paper: #fffdf7;
	--gold: #d9a441;
	--gold-light: #f1ce73;
	--ember: #b84632;
	--teal: #2c7b78;
	--line: rgba(24, 33, 42, .14);
	--shadow: 0 18px 50px rgba(6, 17, 24, .13);
	--radius: 18px;
	--content: 760px;
	--wide: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	color: var(--ink);
	background:
		radial-gradient(circle at 10% 0, rgba(217, 164, 65, .11), transparent 26rem),
		linear-gradient(180deg, #f8f3e8 0, #f2ead9 100%);
	font: 17px/1.72 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: .14;
	background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 57 20v20L40 50 23 40V20z' fill='none' stroke='%2382693d' stroke-width='.7'/%3E%3Ccircle cx='40' cy='30' r='2' fill='%2382693d'/%3E%3C/svg%3E");
}
a { color: var(--teal); text-underline-offset: .18em; }
a:hover { color: var(--ember); }
img { max-width: 100%; height: auto; }
button, input { font: inherit; }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	top: 12px;
	left: 12px;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: .7rem 1rem;
	clip: auto;
	background: white;
}

.site-header {
	position: relative;
	color: var(--ink);
	background:
		linear-gradient(90deg, rgba(255, 253, 247, .97), rgba(247, 240, 223, .97)),
		var(--paper);
	border-top: 5px solid var(--ember);
	border-bottom: 1px solid rgba(24, 33, 42, .12);
	box-shadow: 0 8px 28px rgba(10, 18, 24, .08);
}
.site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .2;
	background-image: radial-gradient(circle at 1px 1px, rgba(130, 105, 61, .24) 1px, transparent 0);
	background-size: 18px 18px;
}
.header-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	width: min(calc(100% - 2rem), var(--wide));
	min-height: 92px;
	margin: auto;
}
.site-logo img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
	filter: drop-shadow(0 5px 7px rgba(30, 25, 16, .14));
}
.site-identity {
	min-width: 0;
	padding-left: 1.25rem;
	border-left: 1px solid rgba(24, 33, 42, .15);
}
.site-title {
	display: block;
	color: var(--night);
	font: 850 clamp(1.35rem, 2.7vw, 1.95rem)/1.08 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-decoration: none;
	letter-spacing: -.035em;
	white-space: nowrap;
}
.site-tagline {
	max-width: 330px;
	margin: .38rem 0 0;
	color: var(--muted);
	font: 600 clamp(.82rem, 1.7vw, .96rem)/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0;
}
.main-nav ul {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: 0;
	margin: 0;
	list-style: none;
}
.main-nav a {
	display: block;
	padding: .65rem .85rem;
	color: var(--ink);
	font-size: .92rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
}
.main-nav a:hover,
.main-nav .current-menu-item > a {
	color: white;
	background: var(--ember);
}

.site-main { min-height: 65vh; }
.hero {
	position: relative;
	overflow: hidden;
	padding: clamp(3.5rem, 7vw, 6.5rem) 1rem;
	color: white;
	background:
		linear-gradient(90deg, rgba(10, 21, 29, .96) 0%, rgba(10, 21, 29, .82) 48%, rgba(10, 21, 29, .38) 100%),
		var(--hero-image, linear-gradient(135deg, #243d4b, #101b24)) center/cover;
}
.hero-inner {
	position: relative;
	width: min(100%, var(--wide));
	margin: auto;
}
.eyebrow {
	margin: 0 0 .7rem;
	color: var(--gold-light);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.hero h1 {
	max-width: 760px;
	margin: 0;
	font: 800 clamp(2.4rem, 6vw, 5rem)/.98 Georgia, serif;
	text-wrap: balance;
}
.hero-copy {
	max-width: 660px;
	margin: 1.25rem 0 1.7rem;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(1rem, 2vw, 1.18rem);
}
.button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .78rem 1.1rem;
	color: var(--night);
	font-weight: 800;
	text-decoration: none;
	background: var(--gold-light);
	border: 1px solid var(--gold);
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.button:hover { color: white; background: var(--ember); border-color: var(--ember); }

.section {
	width: min(calc(100% - 2rem), var(--wide));
	margin: clamp(2.8rem, 6vw, 5.5rem) auto;
}
.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}
.section-heading h2,
.archive-header h1 {
	margin: 0;
	font: 800 clamp(1.8rem, 4vw, 2.8rem)/1.05 Georgia, serif;
}
.section-heading p { max-width: 560px; margin: 0; color: var(--muted); }
.category-section { scroll-margin-top: 1rem; }
.category-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .9rem;
}
.category-card {
	display: flex;
	flex-direction: column;
	min-height: 240px;
	padding: 1.25rem;
	color: var(--ink);
	text-decoration: none;
	background:
		linear-gradient(150deg, rgba(255, 253, 247, .98), rgba(247, 240, 223, .92));
	border: 1px solid var(--line);
	border-top: 4px solid var(--gold);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(21, 32, 39, .07);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.category-card:hover {
	color: var(--ink);
	border-color: var(--ember);
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.category-card__mark {
	display: grid;
	place-items: center;
	width: 2.7rem;
	height: 2.7rem;
	margin-bottom: 1.1rem;
	color: var(--gold-light);
	font: 800 1.35rem/1 Georgia, serif;
	background: var(--night-soft);
	border-radius: 50%;
}
.category-card__content { display: flex; flex: 1; flex-direction: column; }
.category-card__title { font: 800 1.2rem/1.12 Georgia, serif; }
.category-card__description { margin-top: .55rem; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.category-card__count {
	margin-top: auto;
	padding-top: 1rem;
	color: var(--ember);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.adventure-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}
.adventure-card {
	position: relative;
	overflow: hidden;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 8px 28px rgba(21, 32, 39, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}
.adventure-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.adventure-card__image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--night-soft), var(--teal));
	text-decoration: none;
}
.adventure-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.adventure-card:hover .adventure-card__image img { transform: scale(1.035); }
.adventure-card__overlay {
	position: absolute;
	inset: auto 0 0;
	display: block;
	padding: 3.5rem 1.25rem 1.1rem;
	color: white;
	background: linear-gradient(transparent, rgba(10, 19, 26, .92));
}
.adventure-card__overlay .post-meta { color: var(--gold-light); }
.adventure-card__title {
	display: block;
	margin-top: .25rem;
	color: white;
	font: 800 clamp(1.2rem, 2.5vw, 1.55rem)/1.12 Georgia, serif;
	text-wrap: balance;
}
.adventure-card__image:hover .adventure-card__title { color: var(--gold-light); }
.adventure-card__body { padding: 1.25rem; }
.adventure-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.adventure-card__read {
	display: inline-block;
	margin-top: 1rem;
	font-size: .88rem;
	font-weight: 800;
	text-decoration: none;
}
.post-meta { color: var(--muted); font-size: .79rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.article-shell {
	display: grid;
	grid-template-columns: minmax(0, var(--content)) 260px;
	gap: 2.5rem;
	align-items: start;
	width: min(calc(100% - 2rem), 1060px);
	margin: clamp(2rem, 5vw, 4.5rem) auto;
}
.article {
	overflow: hidden;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.article-header { padding: clamp(1.5rem, 5vw, 3.25rem) clamp(1.4rem, 5vw, 3.5rem) 1.5rem; }
.article-header h1 { margin: .4rem 0 1rem; font: 800 clamp(2.2rem, 6vw, 4.1rem)/1.02 Georgia, serif; text-wrap: balance; }
.article-featured img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.article-content { padding: clamp(1.5rem, 5vw, 3.5rem); }
.article-content > *:first-child { margin-top: 0; }
.article-content h2 {
	margin: 2.3rem 0 .8rem;
	padding-bottom: .45rem;
	font: 800 1.8rem/1.15 Georgia, serif;
	border-bottom: 2px solid rgba(217, 164, 65, .55);
}
.article-content h3 { margin: 1.8rem 0 .6rem; color: var(--ember); font: 800 1.3rem/1.2 Georgia, serif; }
.article-content blockquote {
	margin: 1.8rem 0;
	padding: 1rem 1.25rem;
	background: var(--parchment);
	border-left: 5px solid var(--gold);
	border-radius: 0 12px 12px 0;
}
.article-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.article-content th, .article-content td { padding: .7rem; border: 1px solid var(--line); }
.article-content th { color: white; background: var(--night-soft); text-align: left; }
.article-content img { border-radius: 12px; }
.article-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding: 0 clamp(1.4rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
}
.article-nav a { display: block; padding: 1rem; color: var(--ink); text-decoration: none; background: var(--parchment); border-radius: 12px; }
.article-nav a:hover { color: var(--ember); }
.adventure-index {
	position: sticky;
	top: 1.5rem;
	padding: 1.25rem;
	background: rgba(255, 253, 247, .88);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 8px 25px rgba(21, 32, 39, .07);
	backdrop-filter: blur(12px);
}
.adventure-index h2 { margin: 0 0 .8rem; font: 800 1.1rem/1.1 Georgia, serif; }
.adventure-index ul { padding-left: 1.2rem; margin: 0; list-style: disc; }
.adventure-index a { color: var(--muted); font-size: .87rem; text-decoration: none; }
.adventure-index a:hover { color: var(--ember); }
.adventure-index.is-empty { display: none; }

.archive-header {
	padding: 3rem 1rem;
	color: white;
	text-align: center;
	background: var(--night-soft);
	border-bottom: 3px solid var(--gold);
}
.archive-description { max-width: 680px; margin: .8rem auto 0; color: rgba(255, 255, 255, .78); }
.archive-description p { margin: 0; }
.pagination { margin-top: 2rem; text-align: center; }
.pagination .page-numbers { display: inline-block; padding: .5rem .8rem; margin: .15rem; background: var(--paper); border-radius: 8px; text-decoration: none; }
.pagination .current { color: white; background: var(--ember); }
.empty-state { padding: 3rem; text-align: center; background: var(--paper); border-radius: var(--radius); }

.site-footer {
	margin-top: 5rem;
	color: rgba(255,255,255,.76);
	background: var(--night);
	border-top: 3px solid var(--gold);
}
.footer-inner {
	display: grid;
	grid-template-columns: auto minmax(220px, 1fr) minmax(280px, auto);
	align-items: center;
	gap: 1.2rem;
	width: min(calc(100% - 2rem), var(--wide));
	padding: 2rem 0;
	margin: auto;
}
.footer-logo { width: 80px; height: 80px; object-fit: contain; }
.footer-tagline { margin: .25rem 0 0; }
.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .35rem 1rem;
	padding: 0;
	margin: 0;
	list-style: none;
}
.footer-nav a {
	color: rgba(255, 255, 255, .72);
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
}
.footer-nav a:hover { color: var(--gold-light); }

.search-form { display: flex; gap: .5rem; }
.search-field { min-width: 0; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 9px; }
.search-submit { padding: .7rem 1rem; color: white; background: var(--teal); border: 0; border-radius: 9px; cursor: pointer; }

@media (max-width: 900px) {
	.header-inner { grid-template-columns: auto 1fr; }
	.main-nav { grid-column: 1 / -1; padding-bottom: 1rem; }
	.adventure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.category-card { min-height: 210px; }
	.article-shell { grid-template-columns: 1fr; }
	.adventure-index { position: static; grid-row: 1; }
}
@media (max-width: 620px) {
	body { font-size: 16px; }
	.header-inner { gap: .75rem; min-height: 82px; }
	.site-logo img { width: 78px; height: 78px; }
	.site-identity { padding-left: .8rem; }
	.site-title { font-size: 1.2rem; }
	.site-tagline { max-width: 210px; font-size: .76rem; }
	.main-nav ul { flex-wrap: wrap; }
	.hero { padding-top: 3rem; padding-bottom: 3rem; }
	.section-heading { display: block; }
	.section-heading p { margin-top: .65rem; }
	.adventure-grid { grid-template-columns: 1fr; }
	.category-grid { grid-template-columns: 1fr; }
	.category-card { min-height: 0; }
	.article-shell { width: min(calc(100% - 1rem), 1060px); }
	.article { border-radius: 12px; }
	.article-nav { grid-template-columns: 1fr; }
	.footer-inner { grid-template-columns: auto 1fr; }
	.footer-nav { grid-column: 1 / -1; }
	.footer-nav ul { justify-content: flex-start; }
}