/*
Theme Name: NightDevils
Template: fahrenwalde
Description: Dark clan theme in the NightDevils colours: black and steel, blood-red title, a metal menu bar, Vollkorn small caps. Built on Fahrenwalde (templates, guestbook, section navigation); only the look differs.
Author: fahrenwal.de
Text Domain: nightdevils
Version: 1.0
*/

/* Palette and fonts are in theme.json; this file carries what block
   settings cannot express. Dark only, like the site always was. */
:root {
	color-scheme: dark;
}

/* The old grey-to-black backdrop under the header, with a faint ember glow. */
body {
	background:
		radial-gradient(ellipse 60rem 28rem at 15% 0, rgb(143 16 5 / 0.22), transparent 70%),
		linear-gradient(#262628, var(--wp--preset--color--base) 28rem) no-repeat;
	background-color: var(--wp--preset--color--base);
}

/* Header: black band with the title on the right (as on the old site), then
   the metal menu bar. Sticky on wide screens only; on a phone it would eat
   a third of the screen. */
/* The banner (assets/banner.jpg) is built from the clan's own screenshots
   (_Media/nwn0012a, nwn0006c, nwn0004a on the old site): moonless night
   clouds, generated ground fog and the council's burning pentagram,
   graded to black and blood red, fading into the header's black under the
   title. It is exactly as tall
   as the title row, so the menu bar never covers it. */
.nd-header {
	--nd-brand-height: 10rem;
	position: static;
	background:
		/* Fades the whole scene to pitch black under the title, at a slight
		   angle rather than a straight vertical wipe. Percentage-based, so a
		   wider window shows more of what's behind before the fade starts,
		   but the right edge is always solid black. */
		linear-gradient(100deg, transparent 40%, #050505 78%),
		/* A scattering of stars across the part banner.jpg doesn't reach. */
		radial-gradient(1px 1px at 6% 18%, #fff, transparent 60%),
		radial-gradient(1px 1px at 16% 42%, #fff9, transparent 60%),
		radial-gradient(1.5px 1.5px at 27% 12%, #fffc, transparent 60%),
		radial-gradient(1px 1px at 38% 33%, #fff7, transparent 60%),
		radial-gradient(1px 1px at 47% 20%, #fffa, transparent 60%),
		radial-gradient(1.5px 1.5px at 58% 46%, #fffb, transparent 60%),
		radial-gradient(1px 1px at 67% 15%, #fff8, transparent 60%),
		radial-gradient(1px 1px at 76% 38%, #fff6, transparent 60%),
		radial-gradient(1.5px 1.5px at 85% 22%, #fffc, transparent 60%),
		radial-gradient(1px 1px at 93% 48%, #fff8, transparent 60%),
		/* Drifting ember and cloud fog, in the banner's own palette, so the
		   image reads as continuing past its right edge instead of stopping. */
		radial-gradient(ellipse 42rem 16rem at 62% 95%, rgb(143 16 5 / 0.25), transparent 70%),
		radial-gradient(ellipse 46rem 22rem at 85% 5%, rgb(70 70 75 / 0.32), transparent 70%),
		radial-gradient(ellipse 30rem 18rem at 45% 60%, rgb(40 40 44 / 0.4), transparent 70%),
		url(assets/banner.jpg) left top / auto var(--nd-brand-height) no-repeat,
		#050505;
	backdrop-filter: none;
	border-bottom: 0;
}
@media (min-width: 782px) {
	.wp-site-blocks > header.wp-block-template-part:has(.nd-header) {
		position: sticky;
		top: 0;
		z-index: 20;
	}
}
.nd-brand {
	box-sizing: border-box;
	min-height: var(--nd-brand-height);
	justify-content: center;
	text-align: right;
}
@media (max-width: 600px) {
	.nd-header {
		--nd-brand-height: 7.5rem;
	}
	.nd-brand.nd-brand {
		align-items: center;
		text-align: center;
	}
}
.nd-header .wp-block-site-title {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.1;
}
.nd-header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-weight: 700;
	color: #c8230f;
	text-shadow: 0 0 18px rgb(200 35 15 / 0.55), 0 3px 8px #000;
}
.nd-header .wp-block-site-title a:hover,
.nd-header .wp-block-site-title a:focus-visible {
	color: #fff2d8;
	text-decoration: none;
	/* Fallback for browsers without keyframe animations (or that ask for
	   reduced motion): a static ember glow, no flicker. */
	text-shadow: 0 0 12px #ff6a00, 0 0 28px rgb(200 30 0 / 0.6);
}
/* Flame licking up off the letters: layered blurred shadows shifted
   upward, cycling between two frames for a flicker. Two sizes, one for
   the large title, one scaled down for the menu bar's small caps. */
@keyframes nd-burn {
	from {
		text-shadow:
			0 -1px 2px #fff2c4,
			0 -3px 8px #ffb020,
			0 -8px 18px #ff4d00,
			0 -16px 30px #c81e00,
			0 -24px 42px rgb(200 30 0 / 0.6);
	}
	to {
		text-shadow:
			0 -1px 2px #fff2c4,
			0 -4px 10px #ffa000,
			0 -10px 22px #ff3d00,
			0 -19px 34px #b31800,
			0 -28px 48px rgb(179 24 0 / 0.55);
	}
}
@keyframes nd-burn-sm {
	from {
		text-shadow:
			0 -1px 1px #fff2c4,
			0 -2px 5px #ffb020,
			0 -4px 9px #ff4d00,
			0 -8px 15px #c81e00,
			0 -12px 21px rgb(200 30 0 / 0.6);
	}
	to {
		text-shadow:
			0 -1px 1px #fff2c4,
			0 -2px 6px #ffa000,
			0 -5px 11px #ff3d00,
			0 -10px 17px #b31800,
			0 -14px 24px rgb(179 24 0 / 0.55);
	}
}
/* Older browsers (no @supports, e.g. IE) skip this block entirely and
   keep the static glow above; prefers-reduced-motion skips it too. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-name: nd-burn) {
		.nd-header .wp-block-site-title a:hover,
		.nd-header .wp-block-site-title a:focus-visible {
			animation: nd-burn 0.45s infinite alternate;
		}
		.fw-header.nd-header .wp-block-navigation a:hover,
		.fw-header.nd-header .wp-block-navigation a:focus-visible {
			animation: nd-burn-sm 0.45s infinite alternate;
		}
	}
}
.nd-tagline {
	margin: 0;
	color: var(--wp--preset--color--accent-4);
	font-family: var(--wp--preset--font-family--vollkorn);
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.03em;
}

.nd-menubar {
	background: linear-gradient(#3a3a3d, #1d1d1f 55%, #141415);
	border-top: 1px solid rgb(255 255 255 / 0.12);
	border-bottom: 1px solid #000;
	box-shadow: 0 1px 0 var(--wp--preset--color--accent-1), 0 6px 18px rgb(0 0 0 / 0.6);
}
.nd-menubar > .wp-block-group {
	padding-block: 0.45rem;
}
.nd-menubar .wp-block-navigation {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-variant-caps: small-caps;
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	gap: 0.3rem 1.4rem;
}
.nd-menubar .wp-block-navigation a {
	color: #e4e4e4;
	text-shadow: 0 1px 1px #000;
}
.fw-header.nd-header .wp-block-navigation a:hover,
.fw-header.nd-header .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--accent-3);
	text-decoration: none;
	/* Fallback for browsers without keyframe animations, and the base
	   state the @supports block below animates from. */
	text-shadow: 0 0 10px rgb(236 90 69 / 0.5);
}
/* The current page's nav item: the same ember highlight, but steady —
   only :hover/:focus-visible catch fire. */
.nd-menubar .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent-3);
	text-decoration: none;
	text-shadow: 0 0 10px rgb(236 90 69 / 0.5);
}
.nd-header .wp-block-navigation__submenu-container {
	background: #1d1d1f !important;
	color: #e4e4e4 !important;
}

/* Discord button and login button: pinned to the same explicit height so
   they share a row instead of drifting apart with each one's own
   padding/line-height. */
.nd-menubar-right {
	align-items: center;
	gap: 0.7rem;
}
.nd-menubar-right .nd-discord,
.nd-menubar-right .fw-login a {
	height: 2.1rem;
	box-sizing: border-box;
}
.nd-discord {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	border-radius: 999px;
	background: #5865f2;
	color: #fff !important;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}
.nd-discord:hover,
.nd-discord:focus-visible {
	background: #4752c4;
}

/* Login button: same circle-badge treatment as Discord, a padlock instead
   of a wordmark. The "Log in"/"Log out" text stays for screen readers
   (font-size: 0 collapses it visually without display: none). */
.nd-header .fw-login a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	padding: 0;
	font-size: 0;
	border-color: rgb(236 90 69 / 0.6);
	color: #e4e4e4;
}
.nd-header .fw-login a::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm-3 8V7a3 3 0 0 1 6 0v3Zm3 4a2 2 0 0 1 1 3.73V19a1 1 0 0 1-2 0v-1.27A2 2 0 0 1 12 14Z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm-3 8V7a3 3 0 0 1 6 0v3Zm3 4a2 2 0 0 1 1 3.73V19a1 1 0 0 1-2 0v-1.27A2 2 0 0 1 12 14Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nd-header .fw-login a:hover,
.nd-header .fw-login a:focus-visible {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	color: #fff;
}

/* Links in running text: steel with an ember underline. */
.wp-block-post-content a,
.fw-footer a {
	text-decoration-color: rgb(236 90 69 / 0.55);
	text-underline-offset: 0.18em;
}

/* Headings: small caps. Content h2/h3 carry the old site's grey bar,
   thinned to a steel rule that fades out. */
h1,
h2,
h3,
.wp-block-post-title {
	font-variant-caps: small-caps;
}
.wp-block-post-content :is(h2, h3) {
	padding-bottom: 0.25em;
	border-bottom: 1px solid;
	border-image: linear-gradient(90deg, #8e8e8e, transparent 80%) 1;
}
h1.wp-block-post-title {
	text-shadow: 0 2px 12px #000;
}

/* Separator as a rune: a line with a blood-red diamond. */
.wp-block-separator:not(.is-style-dots) {
	position: relative;
	overflow: visible;
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, #8e8e8e 30%, #8e8e8e 70%, transparent);
}
.wp-block-separator:not(.is-style-dots)::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	background: var(--wp--preset--color--accent-1);
	border: 1px solid #8e8e8e;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Screenshots: a dark frame like an in-game window. */
.wp-block-post-content img:not(.wp-block-cover__image-background) {
	border: 1px solid #2e2e2e;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.7);
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 4px;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-3), 0 10px 28px rgb(0 0 0 / 0.8);
}

/* Quotes: a blood-red rule. */
.wp-block-quote,
.wp-block-pullquote {
	border-color: var(--wp--preset--color--accent-1);
}

/* Buttons: blood red with a hint of bevel. */
.wp-element-button,
.wp-block-button__link {
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.15), 0 4px 14px rgb(0 0 0 / 0.5);
}

/* Footer: the old bottom bar, a darker take on the metal menu. */
.fw-footer {
	background: linear-gradient(#1d1d1f, #0a0a0b);
	border-top: 1px solid #000;
	box-shadow: 0 -1px 0 rgb(255 255 255 / 0.06);
	color: var(--wp--preset--color--accent-4);
}

/* Section navigation and notices keep their structure, in stone and ember. */
.fw-section-nav .fw-section-root {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-variant-caps: small-caps;
}
.fw-section-nav a[aria-current="page"] {
	box-shadow: inset 2px 0 0 var(--wp--preset--color--accent-3);
}

/* News (templates/home.html): full posts, a steel rule between them. */
.nd-news {
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid;
	border-image: linear-gradient(90deg, transparent, #8e8e8e 30%, #8e8e8e 70%, transparent) 1;
}
.nd-news .wp-block-post-title {
	margin-block-start: 0.2rem;
}
.nd-news .wp-block-post-title a {
	text-decoration: none;
}

/* Friendslist: a dense table, rows in alternating stone. */
.nd-friends table {
	font-size: var(--wp--preset--font-size--small);
	border-collapse: collapse;
}
.nd-friends :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding: 0.45rem 0.7rem;
	text-align: left;
	vertical-align: top;
}
.nd-friends th {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-variant-caps: small-caps;
	border-bottom: 1px solid var(--wp--preset--color--accent-1);
}
.nd-friends tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--accent-5);
}
.nd-friends td:first-child {
	font-weight: 600;
	white-space: nowrap;
}
.nd-friends td:last-child {
	min-width: 14rem;
}