/*
Theme Name: Captain Trips
Description: Scroll-Seite der Rock/Metal-Band Captain Trips. Konzept "Gezeiten": von der Oberflaeche bis in den Marianengraben.
Author: Jan Kleinheider
Version: 0.3.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: captaintrips
*/

/* Epilogue (OFL), lokal aus @fontsource/epilogue 5.3.0 */
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/epilogue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/epilogue-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/epilogue-latin-900-normal.woff2") format("woff2"); }

/* Farben aus dem Gezeiten-Artwork, je tiefer desto dunkler */
:root {
	--sky: #14252b;
	--sky-top: #1b1f38; /* Himmel oben im Hero-Video (quer), Farbe der Kopfzeile ueber dem Hero */
	--sea: #3e6a5b;
	--sea-ink: #12241e;
	--c-release: #23413a;
	--c-release-tone: #2f554b;
	--c-story: #0e2730;
	--c-crew: #e2e3df;
	--c-videos: #0a1316;
	--c-live: #071012;
	--c-hire: #040709;
	--c-hire-tone: #0b1316;
	--bone: #edeeea;
	--bone-soft: #c7d0cc;
	--muted-dark: #9fb5ab;
	--ink-dark: #0b1417;
	--accent: #d3241b;
	--accent-ink: #ffffff;

	--font: "Epilogue", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
	--step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	--step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
	--step-display: clamp(64px, 9.5vw, 150px);

	--m: clamp(16px, 2.2vw, 32px);
	--bar: 88px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-aspect-ratio: 4/5) { :root { --sky-top: #0e1326; } } /* Hochkant-Video ist oben dunkler */
html { background: var(--c-hire); }
body {
	margin: 0;
	background: var(--c-hire);
	color: var(--bone);
	font-family: var(--font);
	font-size: var(--step-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
:where(body) :is(h1, h2, h3, p, ul, figure) { margin: 0; }
:where(body) ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopfzeile: nimmt die Schriftfarbe des Kapitels darunter an (html[data-ink]) */
.ct-top {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	height: var(--bar);
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 0 var(--m);
	color: var(--bone);
	background: var(--bar-bg, var(--c-hire));
	transition: color .3s, background-color .3s;
}
.admin-bar .ct-top { top: 32px; }
@media (max-width: 782px) { .admin-bar .ct-top { top: 46px; } }
html[data-ink="dark"] .ct-top { color: var(--ink-dark); }
.ct-top__logo { display: block; margin-right: auto; }
.ct-top__logo img { height: 58px; width: auto; transition: filter .3s; }
html[data-ink="dark"] .ct-top__logo img { filter: brightness(0); }
.ct-menu { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.ct-menu a { text-decoration: none; font-weight: 500; font-size: var(--step-body); }
.ct-menu a:hover, .ct-menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Burger (nur Handy/Tablet) */
.ct-burger { display: none; position: relative; width: 48px; height: 48px; margin-right: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ct-burger__lines, .ct-burger__lines::before, .ct-burger__lines::after { position: absolute; left: 12px; width: 24px; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.ct-burger__lines { top: 23px; }
.ct-burger__lines::before, .ct-burger__lines::after { content: ""; left: 0; }
.ct-burger__lines::before { top: -8px; }
.ct-burger__lines::after { top: 8px; }
.ct-menu-open .ct-burger__lines { background: transparent; }
.ct-menu-open .ct-burger__lines::before { transform: translateY(8px) rotate(45deg); }
.ct-menu-open .ct-burger__lines::after { transform: translateY(-8px) rotate(-45deg); }
.ct-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 500;
	text-decoration: none;
	transition: transform .15s var(--ease), background-color .2s;
}
.ct-btn:hover { background: #b01c14; }
.ct-btn:active { transform: scale(.97); }
@media (max-width: 860px) {
	:root { --bar: 68px; }
	.ct-top { gap: 16px; }
	.ct-top__logo img { height: 40px; }
	.ct-burger { display: block; }
	/* Menue als ganze Flaeche unter der Leiste */
	.ct-top__nav {
		position: fixed;
		inset: var(--bar) 0 0 0;
		padding: 32px var(--m);
		background: var(--c-hire);
		color: var(--bone);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
	}
	.admin-bar .ct-top__nav { top: calc(var(--bar) + 46px); }
	.ct-menu-open .ct-top__nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.ct-menu { flex-direction: column; gap: 4px; }
	.ct-menu a { display: block; padding: 8px 0; font-size: clamp(2rem, 9vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
	.ct-menu-open, .ct-menu-open body { overflow: hidden; }
}

/* Fusszeile: das Logo gross als Abschluss */
.ct-foot { background: var(--c-hire); color: var(--bone); padding: 96px var(--m) 32px; }
.ct-foot__mark img { width: 100%; height: auto; }
.ct-foot__cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; margin-top: 56px; font-size: var(--step-small); }
.ct-foot__col { grid-column: span 2; display: flex; flex-direction: column; gap: 6px; }
.ct-foot__col--wide { grid-column: span 2; }
.ct-foot__col b { font-weight: 500; color: var(--muted-dark); margin-bottom: 6px; }
.ct-foot__col a { text-decoration: none; }
.ct-foot__col a:hover { text-decoration: underline; }
.ct-foot__last { display: flex; justify-content: space-between; align-items: center; margin-top: 64px; font-size: var(--step-small); color: var(--muted-dark); }
/* Auftauchen: Luftblasen steigen beim Darueberfahren */
.ct-up { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font-weight: 500; font-size: var(--step-body); padding: 8px 0; }
.ct-up__icon circle { transition: transform .5s var(--ease); }
.ct-up:hover .b1 { transform: translateY(-6px); }
.ct-up:hover .b2 { transform: translateY(-9px); transition-delay: .05s; }
.ct-up:hover .b3 { transform: translateY(-12px); transition-delay: .1s; }
.ct-up:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* Startseite: "Auftauchen" schwebt ab dem CD-Kapitel unten rechts (front.js setzt ct-up-ready / ct-up-on) */
.ct-up-ready .ct-up {
	position: fixed;
	right: var(--m);
	bottom: 20px;
	z-index: 45;
	padding: 10px 20px 10px 16px;
	border: 2px solid rgb(237 238 234 / .45);
	border-radius: 999px;
	background: rgb(4 7 9 / .82);
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .35s, transform .35s var(--ease), visibility 0s .35s, border-color .2s;
}
.ct-up-on .ct-up { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ct-up-ready .ct-up:hover { border-color: var(--bone); }
.ct-up-ready .ct-up:hover span { text-decoration: none; }
.ct-up-ready.ct-menu-open .ct-up { opacity: 0; visibility: hidden; }
@media (max-width: 860px) {
	.ct-up-ready .ct-up { right: 16px; bottom: 16px; width: 52px; height: 52px; padding: 0; justify-content: center; }
	.ct-up-ready .ct-up span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 860px) {
	.ct-foot__cols { grid-template-columns: 1fr 1fr; }
	.ct-foot__col, .ct-foot__col--wide { grid-column: auto; }
	.ct-foot__col--wide { grid-column: 1 / -1; }
}

/* Unterseiten (Impressum, Datenschutz) */
.ct-page { max-width: 760px; margin: 0 auto; padding: calc(var(--bar) + 64px) var(--m) 120px; }
.ct-page h1 { font-size: var(--step-head); font-weight: 900; letter-spacing: -.04em; line-height: .9; margin-bottom: 40px; }
.ct-page a { color: var(--bone); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.ct-page h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; margin: 2.4em 0 .7em; }
.ct-page h3 { font-size: 1.1rem; font-weight: 700; margin: 1.8em 0 .5em; }
.ct-page p, .ct-page ul { margin: 0 0 1em; }
.ct-page ul { padding-left: 1.2em; list-style: disc; }
.ct-page li { margin-bottom: .25em; }
.ct-page li::marker { color: var(--accent); }
.ct-page mark { background: var(--accent); color: var(--bone); padding: 0 .2em; }

/* Grossansicht (Bullaugen auf der Startseite, Galerie unter /live/) */
.ct-lightbox {
	position: fixed;
	inset: 0;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	box-sizing: border-box;
	padding: 72px var(--m) 32px;
	border: 0;
	background: rgb(4 7 9 / .96);
	color: var(--bone);
}
html:has(.ct-lightbox[open]) { overflow: hidden; }
.ct-lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 16px; }
.ct-lightbox::backdrop { background: transparent; }
.ct-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ct-lightbox__cap { font-size: var(--step-small); color: var(--bone-soft); text-align: center; }
.ct-lightbox__btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: var(--bone); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .2s, color .2s; }
.ct-lightbox__btn:hover { background: var(--bone); color: var(--ink-dark); }
.ct-lightbox__prev { left: var(--m); top: 50%; transform: translateY(-50%); }
.ct-lightbox__next { right: var(--m); top: 50%; transform: translateY(-50%); }
.ct-lightbox__close { right: var(--m); top: 12px; }
@media (max-width: 860px) {
	.ct-lightbox__prev, .ct-lightbox__next { top: auto; bottom: 20px; transform: none; }
}