/* ==========================================================================
   Pappas Cykeludlejning – WordPress blok-tema
   Farver, skrift og grundstyling ligger i theme.json. Her er det, som
   theme.json ikke kan: header, strandspor, cykelkort, booking og footer.

   Mobile first. Breakpoints (min-width):
     26rem  (416px)   sitenavn ved siden af emblemet
     30rem  (480px)   2 kolonner i formularen
     48rem  (768px)   telefonnummer og undertitel i headeren
     48.875rem (782px) hero i to kolonner (WordPress' kolonne-breakpoint)
     52rem  (832px)   strandspor vandret
     60rem  (960px)   cykler i 3 kolonner
     68rem  (1088px)  fuld menu i headeren
   ========================================================================== */

:root {
	--p-navy: var(--wp--preset--color--navy);
	--p-navy-lys: var(--wp--preset--color--navy-lys);
	--p-himmel: var(--wp--preset--color--himmel);
	--p-hav: var(--wp--preset--color--hav);
	--p-sand: var(--wp--preset--color--sand);
	--p-sand-mork: var(--wp--preset--color--sand-mork);
	--p-creme: var(--wp--preset--color--creme);
	--p-fyr: var(--wp--preset--color--fyr);
	--p-staal: var(--wp--preset--color--staal);
	--p-kant: max(1rem, calc((100% - 72rem) / 2));
	--p-luft: clamp(3rem, 2rem + 6vw, 7rem);
	--p-header-h: 4rem;
}
@media (min-width: 30rem) {
	:root { --p-kant: max(1.25rem, calc((100% - 72rem) / 2)); --p-header-h: 4.75rem; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--p-header-h) + 1rem); }

/* Ingen luft mellem header, indhold og footer, og mellem farvede sektioner */
.wp-site-blocks > * { margin-block: 0; }
.wp-block-post-content > .alignfull,
.pappas-main > .wp-block-post-content { margin-block: 0; }

:focus-visible { outline: 3px solid var(--p-hav); outline-offset: 3px; }
.has-navy-background-color :focus-visible,
.has-klit-background-color :focus-visible { outline-color: var(--p-sand); }

.skjult,
.pappas-booking__honning {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wp-element-button, .wp-block-button__link { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }

/* Knapper på mørk bund */
.has-navy-background-color .wp-element-button,
.has-navy-background-color .wp-block-button__link {
	background: var(--p-sand);
	border-color: var(--p-sand);
	color: var(--p-navy);
}
.has-navy-background-color .wp-element-button:hover,
.has-navy-background-color .wp-block-button__link:hover {
	background: var(--p-fyr);
	border-color: var(--p-fyr);
	color: var(--p-navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--p-navy); color: var(--p-fyr); }

/* --- Header ---------------------------------------------------------------
   Mobil: emblem · sprogvalg · ring · menu på én linje.
   68rem+: emblem og navn · menu · sprogvalg · ring.
   ------------------------------------------------------------------------ */

.pappas-header-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 2px solid var(--p-navy);
}
.admin-bar .pappas-header-wrap { top: var(--wp-admin--admin-bar--height, 0); }

.pappas-header.pappas-header {
	gap: 0.4rem;
	min-height: var(--p-header-h);
	padding: 0 var(--p-kant);
	flex-wrap: nowrap;
}

.pappas-header .pappas-logo { order: 0; margin-right: auto; gap: 0.5rem; flex-wrap: nowrap; }
.pappas-logo__emblem { margin: 0; flex: none; }
.pappas-logo__emblem img,
.pappas-logo__emblem .custom-logo {
	width: 2.75rem !important;
	height: 2.75rem !important;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--p-navy);
	object-fit: cover;
}
.pappas-logo__tekst {            /* skjult visuelt på de mindste skærme */
	gap: 0.15rem;
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.pappas-logo__tekst .wp-block-site-title { margin: 0; }
.pappas-logo__tekst .wp-block-site-tagline { display: none; margin: 0; }

/* Sprogvalg (blokken pappas/sprogvalg) – altid synligt */
.pappas-sprogvalg { order: 1; flex: none; }
.pappas-sprogvalg ul {
	display: flex;
	margin: 0;
	padding: 2px;
	list-style: none;
	border: 2px solid var(--p-navy);
	border-radius: 999px;
}
.pappas-sprogvalg li { margin: 0; }
.pappas-sprogvalg a,
.pappas-sprogvalg strong {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0 0.45rem;
	font-size: 0.875rem;
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
	color: var(--p-navy);
	border-radius: 999px;
}
.pappas-sprogvalg a:hover { background: rgba(21, 39, 53, 0.1); }
.pappas-sprogvalg strong { background: var(--p-navy); color: var(--p-creme); }

/* Ring-knap: kun ikon på mobil */
.pappas-ring { order: 2; flex: none; gap: 0; }
.pappas-ring .wp-block-button__link {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	white-space: nowrap;
}
.pappas-ring .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pappas-ring__tekst {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Navigation: WordPress' overlay-menu på mobil og tablet */
.pappas-nav { order: 3; flex: none; }
.pappas-nav .wp-block-navigation__responsive-container-open {
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border: 2px solid var(--p-navy);
	border-radius: 50%;
	color: var(--p-navy);
}
.pappas-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	padding: 1rem var(--p-kant) 2rem;
}
.pappas-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	align-items: stretch;
}
.pappas-nav .is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; align-items: stretch !important; }
.pappas-nav .is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch !important; }
.pappas-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.95rem 0.25rem;
	font-size: 1.25rem;
	font-weight: 700;
	border-bottom: 1px solid rgba(21, 39, 53, 0.15);
}
.pappas-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 4px 0 0 var(--p-hav);
	padding-left: 0.9rem;
}
.pappas-nav .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border: 2px solid var(--p-navy);
	border-radius: 50%;
}

@media (min-width: 26rem) {
	.pappas-logo__tekst { position: static; width: min-content; height: auto; overflow: visible; clip: auto; }
}
@media (min-width: 30rem) {
	.pappas-header.pappas-header { gap: 0.75rem; }
	.pappas-header .pappas-logo { gap: 0.75rem; }
}
@media (min-width: 48rem) {
	.pappas-logo__emblem img,
	.pappas-logo__emblem .custom-logo { width: 3.25rem !important; height: 3.25rem !important; }
	.pappas-logo__tekst { width: auto; }
	.pappas-logo__tekst .wp-block-site-title { font-size: 1.2rem; }
	.pappas-logo__tekst .wp-block-site-tagline { display: block; }
	.pappas-ring .wp-block-button__link { width: auto; padding: 0.6em 1.1em; gap: 0.5rem; }
	.pappas-ring__tekst { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (min-width: 68rem) {
	.pappas-header.pappas-header { gap: 1.25rem; }
	.pappas-nav { order: 1; }
	.pappas-sprogvalg { order: 2; }
	.pappas-ring { order: 3; }

	/* Vis menuen inline (samme som WordPress gør for "mobil"-varianten over 600px) */
	.pappas-nav .wp-block-navigation__responsive-container-open { display: none; }
	.pappas-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
		background-color: inherit;
	}
	.pappas-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
	.pappas-nav .wp-block-navigation__container { gap: 0.25rem; }
	.pappas-nav :not(.is-menu-open) .wp-block-navigation-item__content {
		padding: 0.5rem 0.8rem;
		border-radius: 999px;
		white-space: nowrap;
		text-decoration: none;
	}
	.pappas-nav :not(.is-menu-open) .wp-block-navigation-item__content:hover { background: rgba(21, 39, 53, 0.08); }
	.pappas-nav :not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content {
		background: var(--p-navy);
		color: var(--p-creme);
	}
}

/* --- Hero ------------------------------------------------------------------ */

.sektion-hero { padding-top: 2rem; padding-bottom: 2.5rem; overflow: hidden; }
.hero { gap: 1.5rem; margin: 0; }
.hero__logo { margin: 0; }
.hero__logo img { width: min(100%, 20rem); height: auto; }
.hero h1 { max-width: 13ch; margin-top: 0; }
.hero__tekst { color: var(--p-navy-lys); max-width: 32rem; }
.hero__fakta {
	list-style: none;
	padding: 0;
	margin-top: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem 1.75rem;
	font-weight: 650;
	color: var(--p-navy-lys);
}
.hero__fakta li { display: flex; align-items: center; gap: 0.5rem; }
.hero__fakta li::before {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	border: 2px solid var(--p-navy);
	background: var(--p-sand);
}

@media (min-width: 30rem) {
	.hero__fakta { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 48.875rem) {   /* 782px – hvor WordPress lægger kolonner side om side */
	.sektion-hero { padding-top: var(--p-luft); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
	.hero.hero { flex-wrap: nowrap !important; align-items: center; gap: 4rem; }
	.hero > .hero__billede { order: 2; flex: 0 0 40% !important; display: flex; justify-content: flex-end; }
	.hero > .hero__tekst-kolonne { flex: 1 1 auto; }
	.hero__logo img { width: min(100%, 30rem); }
}

/* --- Strandsporet ---------------------------------------------------------
   Nummereret liste med blokstilen "Strandspor". Hvert punkt:
   fed titel + tekst. Mobil lodret, 52rem+ vandret.
   ------------------------------------------------------------------------ */

.strandspor-sektion {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	border-top: 2px solid var(--p-navy);
	background-image:
		linear-gradient(var(--p-himmel), var(--p-himmel)),
		linear-gradient(var(--p-hav), var(--p-hav));
	background-size: 100% 0.35rem, 100% 0.9rem;
	background-repeat: no-repeat;
	background-position: top, top;
}

.is-style-pappas-strandspor {
	position: relative;
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: trin;
}
.is-style-pappas-strandspor::before {        /* hjulsporet */
	content: "";
	position: absolute;
	left: calc(1.6rem - 2px);
	top: 0;
	bottom: 0;
	width: 4px;
	background: repeating-linear-gradient(180deg, var(--p-sand-mork) 0 14px, transparent 14px 24px);
}
.is-style-pappas-strandspor > li {
	position: relative;
	min-height: 3.2rem;
	padding-left: 4.5rem;
	counter-increment: trin;
	font-size: 0.975rem;
	line-height: 1.45;
	color: #3a3326;
}
.is-style-pappas-strandspor > li::before {   /* hjulet */
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3.2rem;
	height: 3.2rem;
	box-sizing: border-box;
	border-radius: 50%;
	border: 4px solid var(--p-navy);
	background:
		radial-gradient(circle, var(--p-navy) 0 18%, transparent 19%),
		repeating-conic-gradient(from 0deg, rgba(21, 39, 53, 0.55) 0 3deg, transparent 3deg 45deg),
		var(--p-fyr);
}
.is-style-pappas-strandspor > li::after {    /* trin-nummer */
	content: counter(trin);
	position: absolute;
	left: 2.3rem;
	top: -0.7rem;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--p-fyr);
	background: var(--p-hav);
}
.is-style-pappas-strandspor > li strong {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.2;
	color: var(--p-navy);
}

@media (min-width: 52rem) {
	.strandspor-sektion { padding-top: 3rem; padding-bottom: 2.75rem; }
	.is-style-pappas-strandspor { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
	.is-style-pappas-strandspor::before {
		left: -100vw;
		right: -100vw;
		top: calc(1.6rem - 2px);
		bottom: auto;
		width: auto;
		height: 4px;
		background: repeating-linear-gradient(90deg, var(--p-sand-mork) 0 14px, transparent 14px 24px);
	}
	.is-style-pappas-strandspor > li { padding-left: 0; padding-top: 4.25rem; }
	.strandspor-sektion { overflow: hidden; }
}

/* Hjulene ruller ind – eneste animation */
@media (prefers-reduced-motion: no-preference) {
	.js .is-style-pappas-strandspor > li::before { animation: pappas-rul-ned 0.9s cubic-bezier(.2, .75, .25, 1) both; }
	.js .is-style-pappas-strandspor > li:nth-child(2)::before { animation-delay: .12s; }
	.js .is-style-pappas-strandspor > li:nth-child(3)::before { animation-delay: .24s; }
	.js .is-style-pappas-strandspor > li:nth-child(4)::before { animation-delay: .36s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 52rem) {
	.js .is-style-pappas-strandspor > li::before { animation-name: pappas-rul-ind; }
}
@keyframes pappas-rul-ned {
	from { transform: translateY(-3rem) rotate(-200deg); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
@keyframes pappas-rul-ind {
	from { transform: translateX(-6rem) rotate(-300deg); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* --- Cykler og priser ------------------------------------------------------ */

.sektion-cykler { padding-top: var(--p-luft); padding-bottom: var(--p-luft); }
.sektion-intro { max-width: 40rem; margin-bottom: 2rem; line-height: 1.5; }
.cykel-grid.cykel-grid { gap: 1.25rem clamp(1.25rem, 0.5rem + 2vw, 2.5rem); }
@media (min-width: 60rem) {
	.cykel-grid.cykel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.is-style-pappas-cykel.is-style-pappas-cykel {
	gap: 0.35rem;
	align-items: stretch;
	height: 100%;
	padding-top: 1.5rem;
	border-top: 4px solid var(--p-navy);
}
.is-style-pappas-cykel h3 { margin: 0 0 0.25rem; }
.is-style-pappas-cykel p { margin: 0; color: var(--p-staal); }
.is-style-pappas-pris.is-style-pappas-pris,
.is-style-pappas-cykel .is-style-pappas-pris {
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	color: var(--p-navy);
}
.is-style-pappas-pris small { font-size: 0.875rem; font-weight: 500; color: var(--p-staal); }

/* --- Udtalelse ---------------------------------------------------------------- */

.sektion-udtalelse { padding-top: var(--p-luft); padding-bottom: var(--p-luft); }
.udtalelse { margin: 0; }
.udtalelse p { line-height: 1.5; margin: 0 0 0.6em; }
.udtalelse cite { font-size: 0.9375rem; font-style: normal; color: var(--p-navy-lys); }

/* --- Booking ------------------------------------------------------------------ */

.sektion-booking { padding-top: var(--p-luft); padding-bottom: var(--p-luft); }
.sektion-booking .wp-block-columns { gap: 2.5rem; }
.sektion-booking a { color: var(--p-sand); }
.kontaktinfo p { margin: 0; }
.kontaktinfo h2 { margin-bottom: 0.75rem; }
.kontaktinfo .kontaktinfo__label { margin-top: 1.25rem; font-size: 0.9375rem; color: #b9c8cf; }
.kontaktinfo .kontaktinfo__vaerdi { font-size: var(--wp--preset--font-size--large); font-weight: 650; }
.kontaktinfo .kontaktinfo__vaerdi a { color: var(--p-fyr); text-decoration: none; }
.kontaktinfo .kontaktinfo__vaerdi a:hover { color: var(--p-sand); text-decoration: underline; }
.kontaktinfo .kontaktinfo__telefon { font-size: var(--wp--preset--font-size--xx-large); font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }
.kontaktinfo .kontaktinfo__telefon a { color: var(--p-sand); }

@media (min-width: 52rem) {
	.sektion-booking .wp-block-columns { gap: clamp(2rem, 1rem + 5vw, 6rem); }
}

/* Formularen (blokken pappas/booking) */
.pappas-booking form { margin: 0; }
.pappas-felt { margin-bottom: 1.1rem; min-width: 0; }
.pappas-felt label { display: block; font-weight: 650; margin-bottom: 0.35rem; }
.pappas-felt__krav { color: var(--p-hav); }
.has-navy-background-color .pappas-felt__krav { color: var(--p-sand); }
.pappas-felt input,
.pappas-felt textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 2.9rem;
	font: inherit;
	font-size: max(1rem, 16px);           /* undgår auto-zoom på iOS */
	padding: 0.7rem 0.9rem;
	color: var(--p-navy);
	background: var(--p-fyr);
	border: 2px solid var(--p-navy);
	border-radius: 6px;
}
.pappas-felt textarea { min-height: 8rem; resize: vertical; }
.pappas-felt input:focus,
.pappas-felt textarea:focus {
	outline: none;
	border-color: var(--p-hav);
	box-shadow: 0 0 0 3px rgba(119, 182, 199, 0.55);
}
.pappas-felt.has-fejl input,
.pappas-felt.has-fejl textarea { border-color: #b3261e; }
.pappas-felt__fejl { margin: 0.3rem 0 0; font-weight: 600; color: #b3261e; }
.has-navy-background-color .pappas-felt__fejl { color: #ffb4a2; }
.has-navy-background-color .pappas-felt.has-fejl input,
.has-navy-background-color .pappas-felt.has-fejl textarea { border-color: #ffb4a2; }
.pappas-booking__raekke { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
.pappas-booking__note { font-size: 0.875rem; opacity: 0.8; margin: 0 0 1rem; }
.pappas-booking .wp-block-button,
.pappas-booking .wp-block-button__link { width: 100%; }
.pappas-booking__besked {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 6px;
	font-weight: 600;
}
.pappas-booking__besked strong { display: block; }
.pappas-booking__besked.is-ok { background: var(--p-himmel); color: var(--p-navy); }
.pappas-booking__besked.is-fejl { background: #ffdad4; color: #6b1410; }

@media (min-width: 30rem) {
	.pappas-booking__raekke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pappas-booking .wp-block-button,
	.pappas-booking .wp-block-button__link { width: auto; }
}

/* --- Footer ------------------------------------------------------------------- */

.pappas-footer { padding-top: 2.5rem; padding-bottom: 1.75rem; font-size: 0.9375rem; color: #c3d2cd; }
.pappas-footer h4 { color: var(--p-fyr); font-size: 1rem; letter-spacing: 0; margin: 0 0 0.5rem; }
.pappas-footer p { margin: 0; }
.pappas-footer a { color: var(--p-fyr); }
.pappas-footer__grid { gap: 1.75rem; }
.pappas-footer__bund {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(248, 241, 230, 0.2);
	gap: 0.5rem 2rem;
}
@media (min-width: 52rem) {
	.pappas-footer { padding-top: 3rem; padding-bottom: 2rem; }
}

/* --- Undersider og indlæg ------------------------------------------------------ */

.pappas-side { padding-top: var(--p-luft); padding-bottom: var(--p-luft); }
.pappas-meta { color: var(--p-staal); font-size: 0.9375rem; }

@media print {
	.pappas-header-wrap { position: static; }
	.pappas-nav, .strandspor-sektion, .wp-block-buttons { display: none; }
}