/*
Theme Name: BossBlocks
Template: twentytwentyfive
Description: Placeholderpagina voor BossBlocks (child theme van Twenty Twenty-Five).
Version: 0.7.0
Text Domain: bossblocks
*/

/* Roboto (Google Fonts, SIL Open Font License 1.1), zelf gehost, variabel: gewicht 100–900, breedte 75–100% */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url(assets/fonts/roboto-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url(assets/fonts/roboto-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bb-nacht-1: #0A0618;
	--bb-nacht-2: #120A28;
	--bb-nacht-3: #05030E;
	--bb-cyaan: #20E3FF;
	--bb-roze: #FF2E97;
	--bb-groen: #9DFF3D;
	--bb-oranje: #FFB627;
	--bb-paars: #9A6BFF;
	--bb-rood: #FF5B3D;
	--bb-tekst: #EDE8FF;
	--bb-tekst-zacht: #B8AFD6;
	--bb-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bb-font-cjk: "Roboto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

html { background: var(--bb-nacht-3); }
body {
	margin: 0;
	min-height: 100vh;
	background: linear-gradient(180deg, var(--bb-nacht-1) 0%, var(--bb-nacht-2) 55%, var(--bb-nacht-3) 100%) fixed;
	color: var(--bb-tekst);
	font-family: var(--bb-font);
}
html:lang(ja) body, html:lang(ko) body { font-family: var(--bb-font-cjk); }

.bb-scherm {
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3vh, 2rem);
	padding: 3rem 16px;
	text-align: center;
}
.bb-scherm > * { margin-block: 0 !important; }

/* Logo: afbeelding zodra het bestand er is; tot die tijd een tijdelijk woordmerk in CSS */
.bb-logo img { display: block; width: min(468px, 86vw); height: auto; } /* logo is 937 px breed: scherp tot 468 CSS-px op retina */
.bb-woordmerk { display: inline-flex; flex-direction: column; align-items: center; gap: .35em; font-size: clamp(2.6rem, 10vw, 5.5rem); line-height: 1; }
.bb-woordmerk-boss {
	font-weight: 900; font-style: italic; letter-spacing: .02em;
	background: linear-gradient(180deg, #ffffff 0%, #d9d4ea 38%, #7d7698 52%, #f4f1ff 70%, #a9a2c4 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 .06em .12em rgba(154, 107, 255, .45));
}
.bb-woordmerk-blocks { display: flex; gap: .12em; font-size: .5em; }
.bb-woordmerk-blocks span {
	display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: .18em;
	font-weight: 900; color: #10091f;
	box-shadow: inset 0 -.12em 0 rgba(0,0,0,.25), inset 0 .1em 0 rgba(255,255,255,.35), 0 0 .6em rgba(255,255,255,.08);
}
.bb-woordmerk-blocks span:nth-child(1) { background: var(--bb-cyaan); }
.bb-woordmerk-blocks span:nth-child(2) { background: var(--bb-roze); }
.bb-woordmerk-blocks span:nth-child(3) { background: var(--bb-groen); }
.bb-woordmerk-blocks span:nth-child(4) { background: var(--bb-oranje); }
.bb-woordmerk-blocks span:nth-child(5) { background: var(--bb-paars); }
.bb-woordmerk-blocks span:nth-child(6) { background: var(--bb-rood); }

.bb-scherm h1.bb-onzichtbaar, .bb-onzichtbaar {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bb-release {
	font-weight: 700; font-stretch: 87.5%; letter-spacing: .06em; /* geen hoofdletters: "iOS" moet zo blijven */
	font-size: clamp(1rem, 2.6vw, 1.3rem);
	background: linear-gradient(90deg, var(--bb-oranje), var(--bb-rood));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
html:lang(ja) .bb-release, html:lang(ko) .bb-release { letter-spacing: .04em; }
.bb-teaser { max-width: 34rem; color: var(--bb-tekst-zacht); font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.6; }

.bb-talen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem; }
.bb-talen a, .bb-talen span { font-size: .85rem; font-stretch: 87.5%; letter-spacing: .06em; text-decoration: none; color: var(--bb-tekst-zacht); padding: .25rem .1rem; border-bottom: 2px solid transparent; }
.bb-talen a:hover, .bb-talen a:focus-visible { color: var(--bb-tekst); border-bottom-color: var(--bb-cyaan); outline: none; }
.bb-talen [aria-current="page"] { color: var(--bb-tekst); border-bottom-color: var(--bb-roze); }

@media (prefers-reduced-motion: no-preference) {
	.bb-woordmerk-blocks span { animation: bb-tegel 4.8s ease-in-out infinite; }
	.bb-woordmerk-blocks span:nth-child(2) { animation-delay: .15s; }
	.bb-woordmerk-blocks span:nth-child(3) { animation-delay: .3s; }
	.bb-woordmerk-blocks span:nth-child(4) { animation-delay: .45s; }
	.bb-woordmerk-blocks span:nth-child(5) { animation-delay: .6s; }
	.bb-woordmerk-blocks span:nth-child(6) { animation-delay: .75s; }
	@keyframes bb-tegel { 0%, 80%, 100% { transform: translateY(0); } 88% { transform: translateY(-.12em); } }
}

.bb-voet p { margin: 0; font-size: .75rem; letter-spacing: .06em; color: var(--bb-tekst-zacht); opacity: .75; }
.bb-voet a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.bb-voet a:hover, .bb-voet a:focus-visible { border-bottom-color: currentColor; outline: none; }

.bb-niet-gevonden { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.bb-niet-gevonden p { margin: 0; }
.bb-terug {
	display: inline-block; padding: .7rem 1.4rem; border-radius: 999px; text-decoration: none;
	font-weight: 700; font-stretch: 87.5%; letter-spacing: .04em; color: #10091f;
	background: linear-gradient(90deg, var(--bb-oranje), var(--bb-rood));
}
.bb-terug:hover, .bb-terug:focus-visible { filter: brightness(1.08); outline: 2px solid var(--bb-tekst); outline-offset: 3px; }

/* Privacyverklaring: leesbare tekstkolom op het nachtverloop */
.bb-scherm:has(.bb-privacy) { justify-content: flex-start; }
.bb-privacy { width: 100%; max-width: 42rem; text-align: left; line-height: 1.65; color: var(--bb-tekst-zacht); }
.bb-privacy h1 { color: var(--bb-tekst); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; margin: 0 0 1rem; }
.bb-privacy h2 { color: var(--bb-tekst); font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .5rem; }
.bb-privacy p, .bb-privacy li { font-size: 1rem; }
.bb-privacy ul { padding-left: 1.2rem; }
.bb-privacy li + li { margin-top: .5rem; }
.bb-privacy strong { color: var(--bb-tekst); }
.bb-privacy a { color: var(--bb-cyaan); }
.bb-privacy .bb-klein { font-size: .85rem; margin-top: 2rem; }
.bb-scherm:has(.bb-privacy) .bb-logo img { width: min(280px, 60vw); }