/*
Theme Name: Sascha 2027
Theme URI: https://sascha.wiki
Author: Sascha Schulz
Description: Almanac 2027. A cookie-free, tracker-free block theme for sascha.wiki. Studio grey, ink, rosé and gold. Anybody for headlines, Newsreader for reading. English first, German second (WPML).
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sascha-2027
*/

/* ---------- Tokens and dark mode ---------- */
:root {
	--s27-ground: var(--wp--preset--color--studio-grey);
	--s27-ink: var(--wp--preset--color--ink);
	--s27-muted: var(--wp--preset--color--graphite);
	--s27-rule: var(--wp--preset--color--ink);
	--s27-condensed: "wdth" 58;
	--s27-medium: "wdth" 72;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--studio-grey: #121212;
		--wp--preset--color--ink: #ECEBE7;
		--wp--preset--color--graphite: #A9A8A2;
		--wp--preset--color--chalk: #1E1E1E;
		--wp--preset--color--rust: #F08A63;
		--wp--preset--color--gold: #D6A640;
		--wp--preset--color--rose: #3A2A28;
	}
	.s27-rose-text { color: #ECEBE7; }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-optical-sizing: auto; text-rendering: optimizeLegibility; }
img, video { max-width: 100%; height: auto; }
::selection { background: var(--wp--preset--color--rose); color: #121212; }
:focus-visible { outline: 3px solid var(--wp--preset--color--rust); outline-offset: 3px; }

/* Display headlines: condensed and heavy */
h1, h2, .s27-display {
	font-variation-settings: var(--s27-condensed);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.88;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
/* Smaller headlines: lighter and a little wider for readability */
h3, h4, h5, h6, .s27-headline-s {
	font-variation-settings: var(--s27-medium);
	font-weight: 620;
	text-transform: uppercase;
	line-height: 0.95;
	text-wrap: balance;
}
.s27-kicker {
	font-family: var(--wp--preset--font-family--anybody);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}
.s27-meta {
	font-family: var(--wp--preset--font-family--anybody);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
}
.s27-rule-top { border-top: 2px solid var(--s27-rule); }
.s27-rule-heavy { border-top: 6px solid var(--s27-rule); }
.s27-rule-bottom { border-bottom: 2px solid var(--s27-rule); }

/* ---------- Masthead ---------- */
.s27-mark { width: clamp(44px, 8vw, 118px); height: auto; flex: none; }
.s27-mark path { fill: currentColor; }
.s27-mark circle { fill: var(--wp--preset--color--gold); }
.s27-masthead-title {
	font-family: var(--wp--preset--font-family--anybody);
	font-variation-settings: var(--s27-condensed);
	font-weight: 800;
	font-size: clamp(2.5rem, 10vw, 9.4rem);
	line-height: 0.82;
	text-transform: uppercase;
	margin: 0;
}
.s27-masthead-title a { text-decoration: none; color: inherit; }

/* ---------- Contents list ---------- */
.s27-contents { list-style: none; margin: 0; padding: 0; }
.s27-contents li {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--s27-rule);
}
.s27-contents .num { font-family: var(--wp--preset--font-family--anybody); font-weight: 700; color: var(--wp--preset--color--rust); }
.s27-contents a {
	font-family: var(--wp--preset--font-family--anybody);
	font-variation-settings: var(--s27-medium);
	font-weight: 620;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 0.95;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}
.s27-contents a:hover { color: var(--wp--preset--color--rust); }
@media (max-width: 700px) {
	.s27-contents li { grid-template-columns: 2.25rem minmax(0, 1fr); }
	.s27-contents li > span:last-child { grid-column: 2; }
}

/* ---------- Money slider: CSS only, no script, no cookies ---------- */
.s27-slider {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem, 1fr);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--ink) transparent;
}
.s27-slide {
	scroll-snap-align: start;
	border-top: 6px solid var(--wp--preset--color--ink);
	padding-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.s27-slide .value {
	font-family: var(--wp--preset--font-family--anybody);
	font-variation-settings: var(--s27-condensed);
	font-weight: 800;
	font-size: clamp(4.5rem, 9vw, 8rem);
	line-height: 0.8;
}
.s27-slide .label { font-family: var(--wp--preset--font-family--anybody); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.s27-slide .text { font-style: italic; font-size: 1.25rem; line-height: 1.25; margin: 0; }
.s27-slide .src { font-family: var(--wp--preset--font-family--anybody); font-size: 0.75rem; line-height: 1.5; margin: 0; }
.s27-slide.focus { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--rose); padding: 0.75rem; }

/* ---------- Audio ---------- */
.s27-audio { border-top: 2px solid var(--s27-rule); border-bottom: 2px solid var(--s27-rule); }
.s27-audio figure { margin: 0; padding: 0.75rem 0; }
.s27-audio figure + figure { border-top: 1px solid var(--s27-rule); }
.s27-audio figcaption { font-family: var(--wp--preset--font-family--anybody); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--graphite); }
.s27-audio audio { width: 100%; }

/* ---------- Film strip ---------- */
.s27-film { background: #1E1E1E; padding: 1rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; position: relative; }
.s27-film::before, .s27-film::after {
	content: ""; grid-column: 1 / -1; height: 10px;
	background-image: repeating-linear-gradient(90deg, rgba(236,235,231,.18) 0 14px, transparent 14px 34px);
}
.s27-film img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (max-width: 700px) { .s27-film { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .s27-motion video { display: none; } }

/* ---------- Cards and images ---------- */
.s27-card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.wp-block-post-featured-image img { object-fit: cover; }

/* ---------- Footer ---------- */
.s27-footer a { color: inherit; }
.s27-footer .s27-mark path { fill: #ECEBE7; }

/* ---------- Print ---------- */
@media print {
	.s27-audio, .s27-film, nav { display: none !important; }
	body { background: #fff; color: #000; }
}

/* WPML language switcher in header */
.wpml-ls-legacy-dropdown, .wpml-ls-legacy-list-horizontal { font-family: var(--wp--preset--font-family--anybody); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.wpml-ls-legacy-list-horizontal { border: 0; padding: 0; }
.wpml-ls-legacy-list-horizontal a { padding: 0.35em 0.6em; color: inherit; }
.wpml-ls-current-language > a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--studio-grey) !important; }
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover { color: var(--wp--preset--color--rust); }