/*
Theme Name: Rowan Blijd
Theme URI: https://rowanblijd.nl
Author: Rowan Blijd
Description: Persoonlijke website van Rowan Blijd. Tijdelijke live-versie van voorbeeld 1, in afwachting van het blokthema.
Version: 1.4.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rowanblijd
*/

/* Kleuren en basis */
:root {
	--offwhite: #F6F0E6;
	--zwart: #1C1412;
	--bruin: #5B3A2B;
	--bordeaux: #7A1B37;
	--aubergine: #2E0F29;
	--fuchsia: #B8267A;
	--oudroze: #E3BDBA;
	--boter: #F3DE92;
	--lime: #C8E05C;
	--kop: 'Caprasimo', Georgia, serif;
	--tekst: 'Hanken Grotesk', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--offwhite);
	color: var(--zwart);
	font-family: var(--tekst);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--kop); font-weight: 400; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--zwart); }
a:hover { color: var(--bordeaux); }
a:focus-visible { outline: 3px solid var(--fuchsia); outline-offset: 4px; }
[id] { scroll-margin-top: 24px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.arrow { display: inline-block; transition: transform .2s; }
a:hover .arrow { transform: translateX(6px); }
.label {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
.accent { color: var(--fuchsia); }
.tekstlink { font-size: 17px; font-weight: 400; text-underline-offset: 6px; }
.skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--zwart); color: var(--offwhite); padding: 12px 16px; z-index: 10;
}
.skip:focus { left: 0; color: var(--offwhite); }

/* Kopbalk */
.kopbalk { border-bottom: 1px solid rgba(28, 20, 18, .2); }
.kopbalk .wrap {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px 28px; padding-top: 18px; padding-bottom: 18px;
}
.logo { font-family: var(--kop); font-size: 24px; text-decoration: none; color: var(--zwart); }
.menu { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; font-weight: 400; }
.menu a { text-decoration: none; padding: 6px 0; }
.kop-rechts { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.kop-rechts a { text-decoration: none; }
.kop-mail {
	background: var(--lime); color: var(--zwart);
	border: 2px solid var(--zwart); box-shadow: 3px 3px 0 var(--zwart);
	padding: 8px 14px; font-weight: 600; font-size: 14px;
	transition: transform .15s, box-shadow .15s;
}
.kop-mail:hover { color: var(--zwart); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--fuchsia); }

/* Hero */
.hero { padding: 72px 0 88px; }
.hero .label { color: var(--bordeaux); margin-bottom: 28px; }
.hero-rij { display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch; }
.hero-tekst { flex: 999 1 520px; min-width: 0; }
.hero h1 { font-size: clamp(64px, 11vw, 168px); line-height: .88; letter-spacing: -.02em; }
.hero-intro { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; max-width: 560px; margin-top: 36px; }
.hero-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; margin-top: 44px; padding-bottom: 14px; }
.hero-foto { flex: 1 1 420px; margin: 0; position: relative; max-width: 540px; display: flex; min-height: 520px; }
.hero-foto img { display: block; flex: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; background: var(--oudroze); }
.hero-foto figcaption {
	position: absolute; left: -28px; bottom: 36px;
	background: var(--zwart); color: var(--offwhite);
	font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
	padding: 10px 14px; transform: rotate(-3deg);
}

/* Stickers */
.sticker, .sticker-b {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; text-decoration: none;
	border-radius: 50%; border: 3px solid var(--zwart);
	transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s;
}
.sticker { gap: 8px; background: var(--lime); color: var(--zwart); padding: 40px 64px; box-shadow: 8px 8px 0 var(--zwart); transform: rotate(-6deg); }
.sticker:hover, .sticker:focus-visible { transform: rotate(-2deg) scale(1.05); box-shadow: 12px 12px 0 var(--fuchsia); color: var(--zwart); }
.sticker .groot { font-family: var(--kop); font-size: clamp(32px, 3.4vw, 44px); line-height: 1; }
.sticker .klein { font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.sticker-b { gap: 6px; background: var(--fuchsia); color: var(--offwhite); padding: 28px 48px; box-shadow: 6px 6px 0 var(--zwart); transform: rotate(4deg); margin-left: auto; }
.sticker-b:hover, .sticker-b:focus-visible { transform: rotate(1deg) scale(1.05); box-shadow: 10px 10px 0 var(--aubergine); color: var(--offwhite); }
.sticker-b .groot { font-family: var(--kop); font-size: 28px; line-height: 1; }
.sticker-b .klein { font-size: 15px; font-weight: 600; letter-spacing: .02em; }

/* Ticker */
.tickerbalk { background: var(--zwart); color: var(--offwhite); overflow: hidden; padding: 20px 0; }
.ticker { display: flex; gap: 48px; white-space: nowrap; width: max-content; font-family: var(--kop); font-size: 34px; animation: tick 38s linear infinite; }
.ticker .ster { color: var(--lime); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Te horen, zien en lezen bij */
.media { padding: 36px 0; border-bottom: 1px solid rgba(28, 20, 18, .2); }
.media .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px 48px; }
.media-namen { font-family: var(--kop); font-size: 26px; color: var(--bruin); display: flex; flex-wrap: wrap; gap: 12px 44px; }

/* Over mij */
.over { background: var(--aubergine); color: var(--offwhite); padding: 112px 0; }
.over .wrap { display: flex; flex-wrap: wrap; gap: 64px; }
.over-links { flex: 1 1 360px; min-width: 0; }
.over .label { color: var(--oudroze); margin-bottom: 20px; }
.over h2 { font-size: clamp(40px, 5.5vw, 76px); line-height: 1; color: var(--offwhite); }
.polaroid { margin: 48px 0 0; max-width: 400px; background: var(--offwhite); padding: 12px 12px 14px; transform: rotate(-2.5deg); box-shadow: 8px 8px 0 var(--fuchsia); }
.polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--zwart); margin-top: 10px; }
.over-tekst { flex: 1.3 1 420px; min-width: 0; font-size: 19px; line-height: 1.65; display: flex; flex-direction: column; gap: 22px; }
.over-tekst .zacht { color: var(--oudroze); }
.over-tekst a { color: var(--lime); font-weight: 400; text-underline-offset: 6px; margin-top: 8px; align-self: flex-start; }
.over-tekst a:hover { color: var(--offwhite); }

/* Waarvoor je me vraagt */
.aanbod { background: var(--boter); padding: 112px 0; }
.aanbod-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.aanbod h2, .werk h2 { font-size: clamp(40px, 5.5vw, 76px); line-height: 1; }
.rij {
	display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 32px 0;
	text-decoration: none; align-items: baseline;
	border-top: 1px solid rgba(28, 20, 18, .25);
}
.rij:last-child { border-bottom: 1px solid rgba(28, 20, 18, .25); }
.rij:hover { color: var(--zwart); }
.rij:hover .rij-titel { color: var(--bordeaux); }
.rij-nr { font-size: 15px; font-weight: 600; width: 40px; }
.rij-titel { font-family: var(--kop); font-size: 34px; line-height: 1.1; flex: 1 1 320px; transition: color .2s; }
.rij-tekst { flex: 1.4 1 340px; font-size: 18px; line-height: 1.5; }
.rij .arrow { font-size: 26px; }

/* Werk */
.werk { background: var(--oudroze); padding: 112px 0; }
.werk .label { color: var(--bordeaux); margin-bottom: 20px; }
.werk h2 { margin-bottom: 56px; max-width: 820px; }
.werk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 48px 32px; }
.vak { text-decoration: none; display: flex; flex-direction: column; gap: 14px; color: var(--zwart); }
.vak-beeld { position: relative; aspect-ratio: 1 / 1; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.vak-beeld > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.vak:nth-child(1) .vak-beeld { transform: rotate(-1.5deg); }
.vak:nth-child(2) .vak-beeld { transform: rotate(1deg); }
.vak:nth-child(3) .vak-beeld { transform: rotate(-.8deg); }
.vak:nth-child(4) .vak-beeld { transform: rotate(1.5deg); }
.vak:nth-child(5) .vak-beeld { transform: rotate(-1deg); }
.vak:nth-child(6) .vak-beeld { transform: rotate(1.2deg); }
a.vak:hover .vak-beeld { transform: rotate(0deg) scale(1.02); }
.vak-kleur { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; }
.vak-kleur .soort { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.vak-kleur .uitspraak { font-family: var(--kop); font-size: clamp(34px, 3.4vw, 46px); line-height: 1.02; }
.kleur-bordeaux { background: var(--bordeaux); color: var(--offwhite); }
.kleur-bordeaux .soort { color: var(--boter); }
.kleur-aubergine { background: var(--aubergine); color: var(--boter); }
.kleur-aubergine .soort { color: var(--oudroze); }
.kleur-lime { background: var(--lime); color: var(--zwart); border: 3px solid var(--zwart); }
.logo-sticker { position: absolute; right: -14px; bottom: 18px; width: 46%; transform: rotate(-5deg); border: 3px solid var(--zwart); box-shadow: 5px 5px 0 var(--zwart); }
.pixel { image-rendering: pixelated; }
.vak-naam { font-family: var(--kop); font-size: 28px; line-height: 1.1; }
.vak-tags { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--bordeaux); }

/* Ik werkte al samen met */
.klanten { padding: 104px 0; }
.klanten h2 { font-size: clamp(36px, 4vw, 52px); line-height: 1.05; margin-bottom: 40px; }
.klantenlijst {
	list-style: none; margin: 0; padding: 32px 0 0; border-top: 2px solid var(--zwart);
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 0;
	font-family: var(--kop); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2;
}
.klantenlijst li:not(:last-child)::after { content: "\2731"; color: var(--fuchsia); font-size: .6em; margin: 0 18px; position: relative; top: -.2em; }

/* Voet */
.voet { background: var(--zwart); color: var(--offwhite); padding: 104px 0 40px; }
.voet .label { color: var(--lime); margin-bottom: 24px; }
.voet-mail { display: block; font-family: var(--kop); font-size: clamp(34px, 7vw, 104px); line-height: 1; color: var(--offwhite); text-decoration: none; overflow-wrap: anywhere; }
.voet-mail:hover { color: var(--lime); }
.voet-tekst { font-size: 19px; line-height: 1.5; max-width: 560px; margin-top: 28px; color: var(--oudroze); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: 96px; padding-top: 24px; border-top: 1px solid rgba(246, 240, 230, .25); font-size: 14px; }
.voet-onder div { display: flex; flex-wrap: wrap; gap: 24px; }
.voet-onder a { color: var(--offwhite); }
.voet-onder a:hover { color: var(--lime); }

/* Losse pagina's en berichten */
.inhoud { padding: 72px 0 104px; }
.inhoud .wrap { max-width: 820px; }
.inhoud h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1; margin-bottom: 32px; }
.inhoud h2 { font-size: 32px; line-height: 1.1; margin: 40px 0 12px; }
.inhoud p, .inhoud ul, .inhoud ol { margin: 0 0 20px; font-size: 19px; line-height: 1.65; }
.inhoud article + article { margin-top: 72px; padding-top: 48px; border-top: 2px solid var(--zwart); }
.inhoud h1 a { text-decoration: none; }

/* Mobiel */
@media (max-width: 760px) {
	body { font-size: 17px; }
	.wrap { padding: 0 20px; }
	.kop-rechts .social { display: none; }
	.menu { gap: 4px 20px; order: 3; width: 100%; }
	.hero { padding: 40px 0 64px; }
	.hero-rij { gap: 40px; }
	.hero-acties { gap: 28px; }
	.hero-foto { min-height: 440px; }
	.hero-foto figcaption { left: -8px; font-size: 12px; }
	.sticker { padding: 28px 30px; }
	.sticker .klein { font-size: 15px; }
	.sticker-b { margin-left: 0; }
	.ticker { font-size: 26px; gap: 32px; }
	.over, .aanbod, .werk { padding: 72px 0; }
	.over .wrap { gap: 48px; }
	.klanten { padding: 72px 0; }
	.rij { padding: 24px 0; }
	.rij-nr { width: 100%; }
	.rij-titel { font-size: 28px; flex-basis: 100%; }
	.rij .arrow { display: none; }
	.logo-sticker { right: -6px; }
	.klantenlijst li:not(:last-child)::after { margin: 0 12px; }
	.voet { padding-top: 72px; }
	.voet-onder { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ticker { animation: none; }
	.sticker, .sticker-b, .vak-beeld, .arrow { transition: none; }
}