/*
Theme Name: sloteria
Theme URI: https://example.com/sloteria
Description: Beige, navy and rust theme for Sloteria with built-in German/English support and no cookies.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Author: Sloteria
Text Domain: sloteria
Domain Path: /languages
License: GPL-2.0-or-later
*/

/* Palette taken from the logo.
   Contrast against the beige --bg: text 11.1:1, links 9.3:1,
   visited links 5.2:1, muted 4.7:1 (all pass WCAG AA). */
:root {
	--navy: #2a3151;        /* logo navy */
	--navy-deep: #1f2540;   /* darker navy for body text */
	--beige: #e2ddcf;       /* logo cream */
	--rust: #a42e05;        /* logo rust */

	--bg: var(--beige);
	--fg: var(--navy-deep);
	--muted: #5a5f75;       /* blue-grey for secondary text */

	--link: var(--navy);
	--link-visited: var(--rust);

	--stripe: 4px;          /* thickness of the navy and rust header stripes */

	--nav-width: min(18rem, 85vw);
	--nav-bg: var(--beige);
	--nav-speed: 280ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
	margin: 0;
	min-height: 100%;
	background: var(--bg);
	color: var(--fg);
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
}

/* ---- Links: navy, rust once visited ------------------------------ */
a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
	outline: 2px solid var(--rust);
	outline-offset: 2px;
	border-radius: 2px;
}

.gallery {
	text-align: center;
}

/* ---- Front-page poster: scales to any screen width --------------- */
.site-main:has(.sloteria-logo) {
	padding: clamp(0.75rem, 3vw, 3rem) 1rem;
}
.site-main picture {
	display: block;
	width: 100%;
	max-width: 1560px;        /* the image's real width, so it never blurs */
}
.sloteria-logo {
	display: block;
	width: 100%;
	height: auto;             /* keeps the poster's proportions */
	margin: 0 auto;
	border: 3px solid var(--navy-deep);
	border-radius: 1rem;
}

/* ---- Header ------------------------------------------------------ */

/* Three columns: menu button | logo | language switch.
   The two outer columns are equal (1fr), so the logo is always dead centre. */
.site-header {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: clamp(1rem, 3vw, 2rem) 1.5rem;
	margin-bottom: calc(var(--stripe) * 3);
}
/* Navy stripe, beige gap, rust stripe: the same bands as the logo */
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: calc(var(--stripe) * 3);
	background: linear-gradient(
		to bottom,
		var(--navy) 0 var(--stripe),
		transparent var(--stripe) calc(var(--stripe) * 2),
		var(--rust) calc(var(--stripe) * 2) 100%
	);
}
.site-header > .nav-toggle { justify-self: start; }
/* Whatever sloteria_language_switcher() outputs is the header's last child,
   so this works even if the <ul> is wrapped in another element. */
.site-header > :last-child { justify-self: end; }

.site-logo {
	display: block;
	line-height: 0;
	border-radius: 0.25rem;
}
.site-logo img {
	display: block;
	height: clamp(4rem, 10vw, 7rem);   /* how tall the logo (and header) gets */
	width: auto;
}
.site-logo:focus-visible { outline-offset: 4px; }

/* ---- Sliding vertical nav ---------------------------------------- */
.nav-toggle,
.site-nav__close {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--navy);
	cursor: pointer;
	transition: color 0.15s, background-color 0.15s;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"],
.site-nav__close:hover {
	background: rgb(42 49 81 / 0.1);
}
.nav-toggle:focus-visible,
.site-nav__close:focus-visible {
	outline: 2px solid var(--rust);
	outline-offset: 2px;
}
.nav-toggle__icon { fill: currentColor; }
.site-nav__close svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* The panel, off-screen to the left until opened */
.site-nav {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;                        /* for a right-hand panel: right: 0 */
	z-index: 1001;
	width: var(--nav-width);
	padding: 1rem 1.5rem 2rem;
	overflow-y: auto;
	background: var(--nav-bg);
	/* navy + rust edge, matching the header stripes */
	border-right: var(--stripe) solid var(--rust);
	box-shadow: inset calc(var(--stripe) * -1) 0 0 var(--bg), inset calc(var(--stripe) * -2) 0 0 var(--navy);
	transform: translateX(-100%);   /* for a right-hand panel: 100% */
	visibility: hidden;
	transition:
		transform var(--nav-speed) ease,
		visibility 0s linear var(--nav-speed);
}
.site-nav.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--nav-speed) ease, visibility 0s;
}

.site-nav__close { margin-bottom: 1.5rem; }

.site-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}
.site-nav a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 0.25rem;
	text-decoration: none;
	transition: color 0.15s, background-color 0.15s;
}
.site-nav a:hover { background: rgb(42 49 81 / 0.08); }
.site-nav a[aria-current="page"] {
	color: var(--rust);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--rust);
}

/* Dimmed backdrop; clicking it closes the menu */
.nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgb(31 37 64 / 0.45);
	opacity: 0;
	transition: opacity var(--nav-speed) ease;
}
.nav-backdrop.is-visible { opacity: 1; }

/* No page scrolling behind the open menu */
html.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.site-nav,
	.site-nav.is-open,
	.nav-backdrop { transition: none; }
}

/* ---- Language switch --------------------------------------------- */
.lang-switch {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
}

.lang-switch a,
.lang-switch a:visited {
	color: var(--muted);
	text-decoration: none;
}

.lang-switch a:hover { color: var(--navy); }
.lang-switch a[aria-current="true"] {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline 2px var(--rust);
	text-underline-offset: 0.35em;
}

/* ---- Content ----------------------------------------------------- */
.site-subtitle {
	margin: clamp(0.1rem, 0.5rem + 1vw, 1rem) 0 0;
	font-size: clamp(1rem, 3vw, 1.5rem);
	font-weight: 400;
	color: var(--muted);
	text-align: center;
}
.site-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 2rem 1.5rem;
	gap: 0;
}

.site-title {
	margin: 0;
	font-size: clamp(2.5rem, 10vw, 7rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--navy);
}

.site-title a,
.site-title a:visited { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { color: var(--navy); }

.entry { max-width: 65ch; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.contact-page {

}