/*
Theme Name: Buğra Gedik
Theme URI: https://bugragedik.nl
Author: Strila
Author URI: https://strila.nl
Description: Eén scherm, één foto, vier links. Persoonlijk thema voor stand-upcomedian Buğra Gedik, gebouwd op zijn design system.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bugra-gedik
*/

/* ==========================================================================
   1. Design tokens
   Overgenomen uit design-system/tokens/*.css. Bewust op specificiteit 0
   (:where) zodat de stijlvariatie "Poster" ze via global styles kan
   overschrijven. Het selector-paar dekt front-end (:root) en blokeditor.
   ========================================================================== */

:where(:root, .editor-styles-wrapper) {
	/* Papier (achtergrond persfoto) */
	--paper-000: #FFFDF9;
	--paper-050: #FAF7F0;
	--paper-100: #F4F0E8;
	--paper-200: #F0ECE3;
	--paper-300: #E4DED2;

	/* Blush (het perzikkleurige overhemd) */
	--blush-050: #FDF3EB;
	--blush-100: #FAE8DA;
	--blush-200: #F9E8D8;
	--blush-300: #F0DED0;
	--blush-400: #E8C9B2;

	/* Klei (warme middentoon) */
	--clay-400: #D6A181;
	--clay-600: #A9704F;

	/* Posterrood */
	--red-500: #A81E17;
	--red-600: #881913;
	--red-700: #6C1512;
	--red-900: #501113;

	/* Inkt (warm bijna-zwart) */
	--ink-900: #171310;
	--ink-800: #292219;
	--ink-600: #4A4137;
	--ink-400: #7A7065;
	--ink-200: #A9A196;

	/* Semantische aliassen */
	--surface-page: var(--paper-050);
	--surface-raised: var(--paper-000);
	--surface-blush: var(--blush-100);
	--surface-invert: var(--red-600);
	--surface-ink: var(--ink-900);

	--text-primary: var(--ink-900);
	--text-secondary: var(--ink-600);
	--text-muted: var(--ink-400);
	--text-on-invert: var(--paper-050);
	--text-accent: var(--red-600);

	--link-rest: var(--ink-900);
	--link-hover: var(--red-600);
	--link-visited: var(--clay-600);
	--link-active: var(--red-900);

	--border-hairline: var(--paper-300);
	--border-strong: var(--ink-900);
	--border-blush: var(--blush-400);

	--focus-ring: var(--red-600);

	/* Typografie */
	--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
	--font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, monospace;

	--size-display-xl: clamp(64px, 13vw, 190px);
	--size-display-l: clamp(44px, 7vw, 96px);
	--size-display-m: clamp(32px, 4.4vw, 60px);
	--size-link-xl: clamp(28px, 3.6vw, 52px);
	--size-link-l: clamp(22px, 2.4vw, 32px);
	--size-body-l: 20px;
	--size-body: 17px;
	--size-body-s: 15px;
	--size-meta: 13px;
	--size-micro: 11px;

	--lh-display: 0.92;
	--lh-heading: 1.06;
	--lh-body: 1.5;
	--lh-tight: 1.2;

	--ls-display: -0.02em;
	--ls-heading: -0.01em;
	--ls-body: 0em;
	--ls-meta: 0.08em;
	--ls-micro: 0.16em;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	--type-nameplate: italic var(--weight-regular) var(--size-display-xl)/var(--lh-display) var(--font-display);
	--type-title: var(--weight-regular) var(--size-display-l)/var(--lh-heading) var(--font-display);
	--type-subtitle: var(--weight-regular) var(--size-display-m)/var(--lh-heading) var(--font-display);
	--type-link: var(--weight-regular) var(--size-link-xl)/1.15 var(--font-display);
	--type-body: var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-sans);
	--type-body-l: var(--weight-regular) var(--size-body-l)/var(--lh-body) var(--font-sans);
	--type-meta: var(--weight-medium) var(--size-meta)/1.3 var(--font-sans);

	/* Ruimte */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 144px;

	--gutter-page: clamp(20px, 5vw, 64px);
	--stack-tight: var(--space-2);
	--stack-default: var(--space-5);
	--stack-section: var(--space-8);

	--measure-prose: 58ch;
	--measure-narrow: 40ch;
	--max-page: 1440px;

	--radius-0: 0px;
	--radius-1: 2px;
	--radius-2: 4px;
	--radius-pill: 999px;

	--hairline: 1px;
	--rule-strong: 2px;

	/* Beweging: alleen kleurovergangen */
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-instant: 90ms;
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 520ms;
	--transition-link: color var(--dur-fast) var(--ease-out);
	--transition-surface: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
	:where(:root, .editor-styles-wrapper) {
		--dur-instant: 0ms;
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

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

html {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body,
.editor-styles-wrapper {
	margin: 0;
	text-wrap: pretty;
}

img {
	display: block;
	max-width: 100%;
}

figure {
	margin: 0;
}

/* ==========================================================================
   3. Links, focus en selectie
   Volgorde link → visited → hover → active is bindend: :visited moet winnen
   van de theme.json-linkkleur (:root :where(a...)) en verliezen van :hover
   (die uit theme.json komt met hogere specificiteit).
   ========================================================================== */

a {
	color: var(--link-rest);
	text-decoration: none;
	transition: var(--transition-link);
}

a:visited {
	color: var(--link-visited);
}

a:hover {
	color: var(--link-hover);
}

a:active {
	color: var(--link-active);
}

/* Externe links krijgen een pijl rechtsboven. Knoppen en ticketlinks niet. */
a[target="_blank"]:not(.wp-element-button):not(.bg-event__action)::after {
	content: "\2197";
	margin-left: .35em;
	opacity: .55;
	font: var(--weight-medium) 13px/1 var(--font-sans);
	letter-spacing: .08em;
	vertical-align: .35em;
}

:focus-visible {
	outline: var(--rule-strong) solid var(--focus-ring);
	outline-offset: 3px;
}

::selection {
	background: var(--blush-300);
	color: var(--ink-900);
}

/* ==========================================================================
   4. Paginaschil
   ========================================================================== */

.wp-block-group.bg-site {
	padding-inline: var(--gutter-page);
}

.wp-block-group.bg-site--page {
	padding-block: clamp(24px, 4vw, 56px);
}

/* De post-content-wrapper mag geen extra ruimte of breedte introduceren. */
.bg-site > .wp-block-post-content {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   5. Micro-labels en titels
   ========================================================================== */

.bg-meta {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}

.bg-kicker {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.bg-kicker::after {
	content: "";
	flex: 1;
	height: var(--hairline);
	background: var(--border-hairline);
}

.wp-block-heading.bg-title,
.bg-title {
	font: var(--weight-regular) var(--size-display-l)/0.92 var(--font-display);
	letter-spacing: var(--ls-display);
	color: var(--text-primary);
	margin: 0 0 var(--space-6);
	padding-bottom: .1em;
}

.bg-lead {
	font: var(--weight-regular) var(--size-display-m)/1.06 var(--font-display);
	letter-spacing: var(--ls-heading);
	color: var(--text-primary);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}

.bg-prose {
	max-width: var(--measure-prose);
	font: var(--weight-regular) 20px/1.5 var(--font-sans);
	color: var(--text-secondary);
	margin: 0 0 var(--space-7);
}

.bg-prose p {
	margin: 0;
}

.bg-prose p + p {
	margin-top: var(--space-4);
}

/* ==========================================================================
   6. Home
   ========================================================================== */

.wp-block-group.bg-home {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
	gap: clamp(24px, 4vw, 72px);
	min-height: 100dvh;
	/* vmin in plaats van vw: op een laag venster krimpt de marge mee zodat de
	   voorpagina op desktop niet gaat scrollen. */
	padding-block: clamp(24px, 3.8vmin, 56px);
	align-items: stretch;
	box-sizing: border-box;
}

.wp-block-group.bg-home__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	gap: clamp(24px, 4vmin, 48px);
	min-width: 0;
}

.wp-block-group.bg-nameplate {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.bg-nameplate__name {
	font: italic var(--weight-regular) var(--size-display-xl)/0.92 var(--font-display);
	letter-spacing: var(--ls-display);
	color: var(--text-primary);
	margin: 0;
	/* Staart van ğ en g vrijhouden van de kicker (line-height .92). */
	padding-bottom: .14em;
}

/* Op een laag venster krimpt de naam mee, zodat de voorpagina zonder scrollen
   op één scherm blijft passen. */
@media (max-height: 880px) {
	.bg-nameplate__name {
		font-size: min(var(--size-display-xl), 20vh);
	}
}

/* Nog lager: ook de linkregels worden iets compacter. */
@media (max-height: 760px) {
	.bg-home .bg-linklist > .bg-link {
		padding-block: clamp(10px, 1.6vmin, 16px);
	}
}

.bg-home__footer {
	margin: 0;
}

.wp-block-image.bg-home__photo {
	position: relative;
	height: 100%;
	min-height: 0;
	min-width: 0;
	margin: 0;
}

/* Absoluut gepositioneerd zodat de eigen hoogte van de foto de rasterrij nooit
   oprekt: de rij volgt de tekstkolom en 100dvh. */
.bg-home__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bg-home__photo figcaption {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	margin: 0;
	padding: 0;
	background: none;
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ==========================================================================
   7. Linklijst
   ========================================================================== */

.wp-block-group.bg-linklist {
	display: block;
	min-width: 0;
}

.bg-linklist > .bg-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	border-bottom: var(--hairline) solid var(--border-hairline);
	margin: 0;
}

.bg-linklist > .bg-link:first-child {
	border-top: var(--hairline) solid var(--border-hairline);
}

.bg-link__label {
	font: var(--weight-regular) var(--size-link-xl)/1.12 var(--font-display);
	letter-spacing: var(--ls-heading);
	margin: 0;
	min-width: 0;
}

.bg-link--l .bg-link__label,
.bg-linklist--l .bg-link__label,
.bg-link__label--l {
	font-size: var(--size-link-l);
}

.bg-link__note {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
	flex-shrink: 0;
	margin: 0;
}

/* Terug-link boven aan elke subpagina. */
.bg-terug {
	font: var(--weight-regular) var(--size-link-l)/1.12 var(--font-display);
	letter-spacing: var(--ls-heading);
	margin: 0 0 var(--space-7);
}

/* ==========================================================================
   8. Twee kolommen: bio en contact
   ========================================================================== */

.wp-block-group.bg-two-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

.wp-block-group.bg-two-col--contact {
	grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
}

.wp-block-group.bg-two-col__main {
	min-width: 0;
}

.wp-block-image.bg-portrait {
	margin: 0;
}

.bg-portrait img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.bg-portrait--poster img {
	aspect-ratio: 4 / 5;
}

.bg-portrait figcaption {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: left;
	margin: var(--space-3) 0 0;
}

/* Bio: afstand tussen kicker en perslijst. */
.bg-two-col__main .bg-kicker {
	margin-bottom: var(--space-4);
}

/* ==========================================================================
   9. Contact
   ========================================================================== */

.wp-block-group.bg-contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: var(--measure-narrow);
}

.wp-block-group.bg-contact-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.wp-block-separator.bg-rule {
	width: 100%;
	max-width: none;
	height: var(--hairline);
	border: 0;
	border-top: var(--hairline) solid var(--border-hairline);
	background: none;
	opacity: 1;
	margin: 0;
}

/* ==========================================================================
   10. Knoppen
   Specificiteit ligt bewust boven :root :where(...) uit theme.json en boven
   de core-stijl voor is-style-outline.
   ========================================================================== */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font: var(--weight-medium) var(--size-meta)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	text-decoration: none;
	padding: 11px 20px;
	border: var(--hairline) solid transparent;
	border-radius: var(--radius-1);
	background-color: var(--border-strong);
	color: var(--surface-page);
	transition: var(--transition-surface);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	background-color: var(--link-hover);
	color: var(--surface-page);
	border-color: transparent;
}

.wp-block-button .wp-block-button__link:visited {
	color: var(--surface-page);
}

.wp-block-button.is-style-pill > .wp-block-button__link {
	border-radius: var(--radius-pill);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--text-primary);
	border: var(--hairline) solid var(--border-strong);
	padding: 11px 20px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:visited {
	color: var(--text-primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--border-strong);
	color: var(--surface-page);
	border-color: var(--border-strong);
}

/* ==========================================================================
   11. Agenda (blok bugra-gedik/agenda)
   ========================================================================== */

.bg-agenda {
	border-top: var(--rule-strong) solid var(--border-strong);
	margin: 0 0 var(--space-5);
}

.bg-event {
	display: grid;
	grid-template-columns: minmax(96px, 120px) minmax(90px, 160px) 1fr auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: var(--hairline) solid var(--border-hairline);
	color: var(--text-primary);
	transition: var(--transition-link);
}

.bg-event__date {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-accent);
}

.bg-event__city {
	font: var(--type-body);
	color: inherit;
}

.bg-event__time {
	color: var(--text-muted);
	margin-left: var(--space-2);
}

.bg-event__venue {
	font: var(--weight-regular) var(--size-link-l)/1.1 var(--font-display);
	color: inherit;
	transition: var(--transition-link);
}

.bg-event__note {
	color: var(--text-muted);
	font: var(--type-body);
}

.bg-event:hover .bg-event__venue {
	color: var(--link-hover);
}

.bg-event__action {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-secondary);
	justify-self: end;
}

a.bg-event__action:visited {
	color: var(--text-secondary);
}

a.bg-event__action:hover {
	color: var(--link-hover);
}

.bg-event.is-sold-out,
.bg-event.is-past {
	color: var(--text-muted);
}

.bg-event.is-sold-out .bg-event__date,
.bg-event.is-past .bg-event__date {
	color: var(--text-muted);
}

.bg-event.is-sold-out:hover .bg-event__venue,
.bg-event.is-past:hover .bg-event__venue {
	color: inherit;
}

.bg-agenda__empty {
	font: var(--type-body);
	color: var(--text-secondary);
	padding: var(--space-4) 0;
	margin: 0;
}

/* Agendapagina: titel, ondertitel, lijst, afsluitende regel. */
.bg-agenda-page .bg-title {
	margin-bottom: var(--space-3);
}

.bg-agenda-page .bg-title + .bg-meta {
	margin-bottom: var(--space-6);
}

.bg-agenda-page > .bg-meta:last-child {
	margin-top: var(--space-5);
}

/* ==========================================================================
   12. Berichtenlijst (index.html) en losse berichten
   ========================================================================== */

.bg-postlist .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bg-postlist .wp-block-post {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	border-bottom: var(--hairline) solid var(--border-hairline);
}

.bg-postlist .wp-block-post:first-child {
	border-top: var(--hairline) solid var(--border-hairline);
}

.bg-postlist .bg-link__label {
	font-size: var(--size-link-l);
}

/* ==========================================================================
   13. Mobiel
   ========================================================================== */

@media (max-width: 760px) {
	.wp-block-group.bg-home {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
		min-height: 0;
	}

	/* De tekstkolom valt weg als grid-item zodat de foto tussen de naam en
	   de links kan staan. */
	.wp-block-group.bg-home__text {
		display: contents;
	}

	.wp-block-group.bg-nameplate {
		order: 1;
	}

	.wp-block-image.bg-home__photo {
		order: 2;
		height: auto;
	}

	.bg-home__photo img {
		position: static;
		inset: auto;
		height: auto;
		aspect-ratio: 3 / 4;
	}

	.wp-block-group.bg-linklist {
		order: 3;
	}

	.bg-home__footer {
		order: 4;
	}

	.wp-block-group.bg-two-col,
	.wp-block-group.bg-two-col--contact {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.bg-event {
		grid-template-columns: 1fr auto;
		gap: var(--space-1) var(--space-4);
	}

	.bg-event__date {
		grid-column: 1;
		grid-row: 1;
	}

	.bg-event__action {
		grid-column: 2;
		grid-row: 1;
	}

	.bg-event__city {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.bg-event__venue {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}