/*
Theme Name: SVSH
Theme URI: https://svsh.dk
Author: Skolen ved Sorte Hest
Description: Blok-tema for Skolen ved Sorte Hest, bygget efter Julies Figma-design (oktober 2026). Farver og typografi ligger i theme.json; sektionerne ligger som mønstre under "SVSH".
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.9
License: GNU General Public License v2 or later
Text Domain: svsh
*/

/* ---------- Grundlæggende ---------- */
body {
	-webkit-font-smoothing: antialiased;
}

a {
	text-underline-offset: 0.15em;
}

/* Fuldbredde-sektioner må ikke få luft mellem sig */
.wp-site-blocks > main > .entry-content > .alignfull,
.wp-site-blocks > main > .alignfull,
.is-layout-flow > .alignfull + .alignfull {
	margin-block-start: 0;
}
main.wp-block-group,
.wp-site-blocks > * {
	margin-block-start: 0;
}
/* Ingen hvid stribe mellem sidste sektion og footer */
.entry-content > .alignfull:last-child {
	margin-block-end: 0;
}

/* ---------- Header ---------- */
.svsh-header {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .svsh-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .svsh-header {
		top: 46px;
	}
}
.svsh-header .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 700;
	font-size: 14px;
}
.svsh-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.svsh-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.svsh-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--blaa);
}
.svsh-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--marine) !important;
	border: 0 !important;
	padding-block: 8px;
}
.svsh-header .wp-block-site-logo img {
	max-height: 56px;
	width: auto;
}

/* ---------- Split-sektioner (billede/illustration + tekst) ---------- */
.svsh-split {
	gap: 0 !important;
}
.svsh-split > .wp-block-column {
	margin: 0 !important;
	box-sizing: border-box;
}
/* Præcis halvt/halvt som i Figma – padding må ikke gøre tekstsiden bredere */
@media (min-width: 782px) {
	.svsh-split > .wp-block-column {
		flex: 0 0 50% !important;
		max-width: 50%;
	}
}
/* Billedet fylder hele sin halvdel – højden styres af tekstsiden,
   dog mindst ca. Figmas sektionshøjde. */
.svsh-split__media {
	position: relative;
	min-height: clamp(320px, 35vw, 680px);
	overflow: hidden;
}
.svsh-split__media > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.svsh-split__media > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Grafiske mønstre (prikker, jordbær, pære) er PNG'er og skal vises hele,
   ikke beskæres – kolonnens baggrundsfarve fylder resten ud. */
.svsh-split__media > .wp-block-image img[src$=".png"] {
	object-fit: contain;
}
.svsh-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Videokolonnen strækker sig i fuld højde, og videoen centreres i den */
.svsh-video > .svsh-split__video {
	align-self: stretch !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* ---------- Prik-tapet ----------
   Prikkerne tegnes med CSS og ligger fast i vinduet, så siden ruller hen
   over dem. Motivet (jordbær, pære, bold, ansigt) er en del af tapetet:
   det sidder på en af prikkernes pladser og ligger lige så fast.
   Farve vælges med svsh-dots--koral / --blaa / --hvid; motivet aflæses
   automatisk af billedet i kolonnen.
   På telefoner/tablets (uden fastlåsning) vises motivet som almindeligt
   billede midt i kolonnen. */
.svsh-dots {
	--svsh-dot: var(--wp--preset--color--hvid);
	--svsh-bg: var(--wp--preset--color--hvid);
	--svsh-dot-r: 72px;
	background-image:
		radial-gradient(circle at center, var(--svsh-dot) 0 var(--svsh-dot-r), transparent calc(var(--svsh-dot-r) + 1px)),
		radial-gradient(circle at center, var(--svsh-dot) 0 var(--svsh-dot-r), transparent calc(var(--svsh-dot-r) + 1px));
	background-size: 380px 340px;
	background-position: 0 0, 190px 170px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.svsh-dots--koral { --svsh-dot: var(--wp--preset--color--koral); --svsh-bg: var(--wp--preset--color--hvid); }
.svsh-dots--blaa { --svsh-dot: var(--wp--preset--color--blaa); --svsh-bg: var(--wp--preset--color--hvid); }
.svsh-dots--hvid { --svsh-dot: var(--wp--preset--color--hvid); --svsh-bg: var(--wp--preset--color--blaa); }

/* Motiver – størrelse svarer til en prik (ca. 150 px) */
.svsh-dots:has(img[src*="svsh-ikon-jordbaer"]) { --svsh-motif: url(/wp-content/uploads/2026/10/svsh-ikon-jordbaer.png); --svsh-mw: 120px; --svsh-mh: 150px; }
.svsh-dots:has(img[src*="svsh-ikon-paere"]) { --svsh-motif: url(/wp-content/uploads/2026/10/svsh-ikon-paere.png); --svsh-mw: 108px; --svsh-mh: 150px; }
.svsh-dots:has(img[src*="svsh-ikon-tennisbold"]) { --svsh-motif: url(/wp-content/uploads/2026/10/svsh-ikon-tennisbold.png); --svsh-mw: 150px; --svsh-mh: 149px; }
.svsh-dots:has(img[src*="svsh-ikon-ansigt-blank"]) { --svsh-motif: url(/wp-content/uploads/2026/10/svsh-ikon-ansigt-blank.png); --svsh-mw: 150px; --svsh-mh: 149px; }

/* Fastlåst tapet kun på skærme med mus – iOS håndterer det dårligt.
   Alle lag regnes ud fra motivets plads (--cx, --cy) i vinduet: midt i
   den halvdel, kolonnen står i, og midt på skærmen lodret. Prikgitteret
   lægges, så en prik falder præcis dér; den prik dækkes af en cirkel i
   baggrundsfarven, og motivet tegnes ovenpå. */
@media (hover: hover) and (pointer: fine) {
	.svsh-dots {
		--cx: 25vw;
		--cy: 50vh;
		background-attachment: fixed;
	}
	.svsh-split.is-media-right > .svsh-dots {
		--cx: 75vw;
	}
	.svsh-dots:has(img[src*="svsh-ikon-"]) {
		background-image:
			var(--svsh-motif),
			radial-gradient(circle at center, var(--svsh-bg) 0 calc(var(--svsh-dot-r) + 6px), transparent calc(var(--svsh-dot-r) + 7px)),
			radial-gradient(circle at center, var(--svsh-dot) 0 var(--svsh-dot-r), transparent calc(var(--svsh-dot-r) + 1px)),
			radial-gradient(circle at center, var(--svsh-dot) 0 var(--svsh-dot-r), transparent calc(var(--svsh-dot-r) + 1px));
		background-size:
			var(--svsh-mw) var(--svsh-mh),
			calc(var(--svsh-dot-r) * 2 + 14px) calc(var(--svsh-dot-r) * 2 + 14px),
			380px 340px,
			380px 340px;
		background-position:
			calc(var(--cx) - var(--svsh-mw) / 2) calc(var(--cy) - var(--svsh-mh) / 2),
			calc(var(--cx) - var(--svsh-dot-r) - 7px) calc(var(--cy) - var(--svsh-dot-r) - 7px),
			calc(var(--cx) - 190px) calc(var(--cy) - 170px),
			var(--cx) var(--cy);
		background-repeat: no-repeat, no-repeat, repeat, repeat;
		background-attachment: fixed;
	}
	/* Billedet bliver i markup'en (så det kan skiftes i editoren), men tapetet tegner det */
	.svsh-dots:has(img[src*="svsh-ikon-"]) > .wp-block-image {
		visibility: hidden;
	}
}
.svsh-split__media.svsh-dots > .wp-block-image {
	position: relative;
	inset: auto;
	width: clamp(110px, 12vw, 190px);
	margin: 0;
}
.svsh-split__media.svsh-dots > .wp-block-image img {
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(0, 53, 99, 0.18));
}

@media (max-width: 781px) {
	.svsh-split__media {
		min-height: 66vw;
	}
	.svsh-dots {
		--svsh-dot-r: 44px;
		background-size: 240px 210px;
		background-position: 0 0, 120px 105px;
	}
	/* Tekst altid efter billede på mobil, uanset rækkefølge på desktop */
	.svsh-split.is-media-right {
		flex-direction: column-reverse;
	}
}

/* H2'er efter sidens H1 i samme tekstkolonne er underoverskrifter (Julies
   "Subhead": Lato Bold 24/36), så siden ikke får to lige store titler. */
.svsh-split__text > h1.wp-block-heading ~ h2.wp-block-heading:not([style*="font-size"]) {
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 700;
	line-height: 1.5;
}

/* ---------- Ikonkort ---------- */
.svsh-icon-card {
	text-align: center;
}
.svsh-icon-card .wp-block-image img {
	width: 155px;
	height: 155px;
	object-fit: contain;
}

/* ---------- Nyhedskort ---------- */
.svsh-news .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.svsh-news .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.svsh-news .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.svsh-news .svsh-news__bar {
	margin-top: 0 !important;
}
.svsh-news .wp-block-post-title a {
	text-decoration: none;
}

/* ---------- Knapper (outline-variant som "Se tidligere nyheder") ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1.5px;
}

/* ---------- Personale ---------- */
.svsh-staff .wp-block-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}
.svsh-staff h4 {
	margin-bottom: 0;
}
.svsh-staff p {
	margin-top: 0.25em;
}

/* ---------- Video-rækker ---------- */
.svsh-video .wp-block-embed {
	margin: 0;
}
.svsh-video .wp-block-embed__wrapper iframe {
	display: block;
}

/* ---------- Pil mellem video og tekst ----------
   Lille trekant i tekstfeltets farve, der sidder på sømmen og peger ind mod
   videoen (som i Julies videosider). Farven følger tekstkolonnens baggrund. */
.svsh-video > .svsh-split__text {
	--svsh-arrow: var(--wp--preset--color--hvid);
	position: relative;
	z-index: 1;
}
.svsh-video > .svsh-split__text.has-blaa-background-color { --svsh-arrow: var(--wp--preset--color--blaa); }
.svsh-video > .svsh-split__text.has-marine-background-color { --svsh-arrow: var(--wp--preset--color--marine); }
.svsh-video > .svsh-split__text.has-koral-background-color { --svsh-arrow: var(--wp--preset--color--koral); }
.svsh-video > .svsh-split__text.has-turkis-background-color { --svsh-arrow: var(--wp--preset--color--turkis); }
@media (min-width: 782px) {
	.svsh-video > .svsh-split__text::before {
		content: "";
		position: absolute;
		top: 50%;
		width: 0;
		height: 0;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
		transform: translateY(-50%);
		pointer-events: none;
	}
	/* Video til venstre, tekst til højre: pilen peger mod venstre */
	.svsh-video:not(.is-media-right) > .svsh-split__text::before {
		left: -19px;
		border-right: 20px solid var(--svsh-arrow);
	}
	/* Tekst til venstre, video til højre: pilen peger mod højre */
	.svsh-video.is-media-right > .svsh-split__text::before {
		right: -19px;
		border-left: 20px solid var(--svsh-arrow);
	}
}

/* ---------- YouTube: stillbillede + afspilknap ---------- */
.svsh-yt {
	margin: 0;
}
.svsh-yt__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--marine);
	overflow: hidden;
}
.svsh-yt__frame iframe,
.svsh-yt__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.svsh-yt__play {
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
	display: block;
}
.svsh-yt__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.svsh-yt__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 96px;
	height: 96px;
	transform: translate(-50%, -50%);
	border: 3px solid #fff;
	border-radius: 50%;
	background: rgba(0, 53, 99, 0.25);
	transition: background 0.2s ease, transform 0.2s ease;
}
.svsh-yt__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	border-style: solid;
	border-width: 18px 0 18px 30px;
	border-color: transparent transparent transparent #fff;
}
.svsh-yt__play:hover .svsh-yt__img,
.svsh-yt__play:focus-visible .svsh-yt__img {
	transform: scale(1.03);
}
.svsh-yt__play:hover .svsh-yt__icon,
.svsh-yt__play:focus-visible .svsh-yt__icon {
	background: var(--wp--preset--color--blaa);
	transform: translate(-50%, -50%) scale(1.06);
}
.svsh-yt__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--gul);
	outline-offset: -3px;
}
@media (max-width: 781px) {
	.svsh-yt__icon {
		width: 64px;
		height: 64px;
	}
	.svsh-yt__icon::after {
		border-width: 12px 0 12px 20px;
	}
}

/* ---------- Pladsholdere ----------
   Billeder der endnu ikke er leveret, vises med en stiplet ramme,
   så de er nemme at finde både i editoren og på staging. */
.svsh-placeholder img,
img[src*="placeholder.svg"] {
	outline: 2px dashed var(--wp--preset--color--koral);
	outline-offset: -2px;
}

/* ---------- Footer ---------- */
.svsh-footer a {
	color: inherit;
	text-decoration: none;
	font-weight: 400;
}
.svsh-footer a[href*="privatlivspolitik"] {
	font-weight: 700;
}
.svsh-footer a:hover,
.svsh-footer a:focus-visible {
	text-decoration: underline;
}
.svsh-footer .svsh-footer__list {
	list-style: none;
	padding-left: 0;
	line-height: 2.2;
}