/*

	Shared page layout: banner, nav bar, sections and footer.
	Load after base.css on any page that uses the site header.

*/


/*

	Banner: the sky, with the 3D logo in front: the logo, its Japanese text and its green X are separate images,
	each with copies of its silhouette stacked behind it for depth, so banner.js can tilt and turn them

*/
.banner {
	/* Scales with the window above 1920px, holds 250px tall and crops the sides below that,
	   then scales down again once the crop reaches the logo (~890px wide) */
	--banner-height: min(28vw, max(250px, 13.02vw));
	--logo-width: calc(var(--banner-height) * 3.256);
	--logo-depth: calc(var(--logo-width) * 0.06); /* how far back the logo's sides go */
	--cross-depth: calc(var(--logo-width) * 0.035); /* and how far the X stands out from it */
	--text-depth: calc(var(--logo-width) * 0.004); /* and the Japanese text, just raised off the bar */
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	perspective: calc(var(--logo-width) * 1.4); /* close enough that the tilt shows off the depth */
}

/* On the mods list, the banner (a link home) is also the page's heading */
.bannerHeading {
	margin: 0;
}

.bannerImg {
	display: block;
	width: 100%;
	height: var(--banner-height);
	object-fit: cover;
}

/* Centred, and 814px wide on the 250px-tall banner, as in the original 1920x250 artwork. build.py sets
   --logo-aspect and the X's --cross-x, --cross-y and --cross-width from the SVGs, so a new logo export needs
   no changes here */
.bannerLogo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--logo-width);
	aspect-ratio: var(--logo-aspect);
	translate: -50% -50%;
	transform-style: preserve-3d;
	will-change: transform; /* keeps its layers at one resolution as it tilts, rather than redrawing them sharper */
	--side-depth: var(--logo-depth);
}

.bannerLogoImg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The X stands out from the logo's face like a raised badge, its own sides reaching back to the face */
.bannerCross {
	position: absolute;
	left: var(--cross-x);
	top: var(--cross-y);
	width: var(--cross-width);
	aspect-ratio: 1;
	translate: -50% -50% var(--cross-depth);
	transform-style: preserve-3d;
	will-change: transform, rotate; /* likewise as it spins */
	--side-depth: var(--cross-depth);
}

.bannerCrossImg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The Japanese text, raised slightly off the bar with its own thin sides: an image per character, each framed
   the same as the logo, so they simply cover it */
.bannerText {
	position: absolute;
	inset: 0;
	translate: 0 0 var(--text-depth);
	transform-style: preserve-3d;
	--side-depth: var(--text-depth);
}

.bannerGlyph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Hidden until banner.js has every layer of it loaded, so it appears whole rather than flat and then 3D */
html.js .banner[data-depth]:not(.depthReady) .bannerLogo {
	visibility: hidden;
}

/* 3D depth: copies of the logo's, text's and X's silhouettes stacked behind them (side_layers() in build.py),
   each a little further back, from --z 0 at the face to 1 at the back. Each is also a
   little darker, but that's in the image (a shade picked from the silhouette file), not a CSS filter: a filter
   on each of a hundred-odd layers would be redrawn by the graphics card on every frame */
.bannerSide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: translateZ(calc(var(--z) * var(--side-depth) * -1));
	pointer-events: none;
}


/*

	Navigation Bar

*/
.navBar {
	position: sticky;
	top: 0;
	z-index: 2; /* above the page scrollbar, and anything placed over the page as it scrolls under (like the gallery's chevrons) */
}

.navBar ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style-type: none;
	margin: 0;
	/* The bar runs the full width, but its items line up with the page's content (main, below) */
	padding: 0 max(1.25rem, (100% - var(--content-width)) / 2);
	background-color: var(--color-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	font-size: 1.15rem;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.navBar li a {
	display: block;
	color: var(--color-text-bright);
	padding: 0.7rem 1rem;
	text-decoration: none;
}

.navBar li a:hover {
	background-color: var(--color-accent-light);
}

/* The page you're on (build.py marks it; so far just "Mods" on the page listing them): darkened, to show it's selected */
.navBar li a.navCurrent,
.navBar li a.navCurrent:hover {
	background-color: rgba(0, 0, 0, 0.22);
}

/* Small wordmark: hidden while the banner is on screen, slides in once it scrolls away */
.navBar .navLogo a {
	padding-block: 0.35rem;
}

.navBar .navLogo img {
	display: block;
	height: 2rem;
	width: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.navBar .navLogo {
	max-width: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: max-width 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.navBar.scrolled .navLogo {
	max-width: 10rem;
	opacity: 1;
	visibility: visible;
}

/* Wide screens: there's room for it in the margin left of the links (lined up with the page's content), so it
   fades in there instead of pushing them along: its right edge where the links start (the bar's side padding,
   above). Placed rather than shifted there, as a shift by part of a pixel would stop it lining up with the screen's
   pixels and blur it; it only slides in from a little way off */
@media (min-width: 1500px) {
	.navBar .navLogo {
		position: absolute;
		right: calc(100% - max(1.25rem, (100% - var(--content-width)) / 2));
		max-width: none;
		translate: 0.75rem 0;
		transition: translate 0.3s ease, opacity 0.3s ease, visibility 0.3s;
	}

	.navBar.scrolled .navLogo {
		translate: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.navBar .navLogo {
		transition: none;
	}
}

/* Not enough room for the wordmark beside the links on phones */
@media (max-width: 560px) {
	.navBar .navLogo {
		display: none;
	}

	.navBar li a {
		padding-inline: 0.6rem;
	}
}


/*

	Page scrollbar
	nav.js hides the browser's own and draws this one in a strip that starts at the nav bar's bottom edge,
	so the thumb never shows beside or above the bar. Without JavaScript the normal scrollbar stays.

*/
html.customScrollbar {
	scrollbar-width: none;
}

/* Safari before 18.2 doesn't know scrollbar-width */
html.customScrollbar::-webkit-scrollbar {
	display: none;
}

.pageScrollbar {
	position: fixed;
	right: 0;
	bottom: 0;
	width: max(1vmin, 8px);
	z-index: 1;
	overflow: hidden;
}

.pageScrollbarThumb {
	background-color: var(--color-scrollbar);
	touch-action: none;
}

.pageScrollbarThumb:hover,
.pageScrollbarThumb.dragging {
	background-color: var(--color-scrollbar-hover);
}


/*

	Main content and sections

*/

/* Everything under the banner (nav bar, page, footer) is at least the screen's height, so even a short page scrolls
   far enough for the banner to go right off the top; the page stretches to fill it, keeping the footer at the bottom
   (on pages without a banner too) */
.belowBanner {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex-grow: 1;
	width: calc(100% - 2.5rem); /* the side padding's taken off: the column won't stretch it, with auto margins */
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.section {
	padding-top: 2.5rem;
	scroll-margin-top: 3rem;
}

.section h2 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding-bottom: 0.55rem;
	font-size: 2rem;
	color: var(--color-text-bright);
}

/* Short orange bar under each section heading */
.section h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 3px;
	background-color: var(--color-accent);
	border-radius: 2px;
}

.sectionNote {
	margin: 0.75rem 0 1.25rem;
	color: var(--color-text-muted);
}


/*

	Tags: small rounded labels, used as <ul class="tags">

*/
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.tags li {
	padding: 0.15rem 0.55rem;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	background-color: var(--color-border);
	border-radius: 999px;
}


/*

	Row of buttons
	margin-top: auto pins it to the bottom of a flex column, so links line up across a row of cards

*/
.modLinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}


/*

	Footer

*/
footer {
	margin-top: 4rem;
	padding: 2rem 1.25rem;
	border-top: 1px solid var(--color-border);
	text-align: center;
	color: var(--color-text-muted);
}

footer a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.25rem 0.8rem;
	text-decoration: none;
}

/* Brand icons from Simple Icons (CC0); fill follows the link colour so they brighten on hover too */
footer svg {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
}

footer a:hover {
	color: var(--color-text-bright);
}