/*
Theme Name: CampKvitsund Moderne
Template: twentytwentyfive
Description: Forslag til ny, moderne og enkel layout for campkvitsund.no. Samme innhold som dagens side, nytt utseende.
Version: 0.1.0
Text Domain: campkvitsund-moderne
*/

:root {
	--ck-gold: #af9453;
	--ck-gold-dark: #7d6a3b;
	--ck-sand: #f7f5f0;
	--ck-ink: #1c1c1a;
	--ck-muted: #6b6b66;
	--ck-line: #ece8df;
	--ck-radius: 16px;
}

body { -webkit-font-smoothing: antialiased; }

/* ---------- Topp ---------- */
.ck-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--ck-line);
	padding: 12px 24px;
}
.ck-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ck-ink);
	font-weight: 650;
	font-size: 1.15rem;
	letter-spacing: -0.015em;
}
.ck-brand svg { width: 32px; height: 34px; fill: var(--ck-gold); flex: none; }
.ck-header .wp-block-navigation { font-size: 0.95rem; font-weight: 500; }
.ck-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--ck-ink); text-decoration: none; }
.ck-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.ck-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--ck-gold-dark); }
.ck-header .ck-cta .wp-block-button__link { padding: 0.55em 1.15em !important; font-size: 0.9rem; }
@media (max-width: 781px) { .ck-header .ck-cta { display: none; } }

/* ---------- Knapper ---------- */
.wp-block-button__link {
	background: var(--ck-ink) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.85em 1.7em !important;
	font-weight: 550;
	letter-spacing: 0.005em;
	transition: background-color 0.15s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible { background: var(--ck-gold-dark) !important; }

/* ---------- Hovedinnhold ---------- */
.ck-main { margin-top: 0 !important; padding-bottom: 96px; }
.ck-main h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; margin-top: 2.2em; }
.ck-main h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

/* ---------- Forside: helte-intro ---------- */
.ck-intro {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: clamp(96px, 16vh, 180px) 24px clamp(80px, 12vh, 140px) !important;
	color: #fff;
	background:
		linear-gradient(180deg, rgba(18, 18, 16, 0.35) 0%, rgba(18, 18, 16, 0.68) 100%),
		var(--ck-hero, var(--ck-ink)) center / cover no-repeat;
}
.ck-intro > .wp-block-spacer { display: none; }
.ck-intro h1 {
	/* Én linje i alle bredder: følger skjermbredden (≈ 17 tegn får plass), og slipper ut av
	   tekstspaltens 720 px. Maks 4.5rem på store skjermer. */
	font-size: clamp(1.9rem, 7.4vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
	margin: 0 auto 0.35em;
	max-width: none !important;
	white-space: nowrap;
}
.ck-intro p { color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; }
.ck-intro p:first-of-type { font-size: clamp(1.15rem, 2vw, 1.4rem); color: #fff; margin-bottom: 0.2em; }
.ck-intro p:first-of-type strong { font-weight: 550; }
.ck-intro p:nth-of-type(2) { margin-top: 0; }
.ck-intro a { color: #fff; text-underline-offset: 3px; }
.ck-intro .wp-block-button__link { background: #fff !important; color: var(--ck-ink) !important; }
.ck-intro .wp-block-button__link:hover { background: var(--ck-gold) !important; color: #fff !important; }

/* ---------- Talere: kortrutenett ---------- */
.ck-talere {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 32px !important;
}
.ck-talere > .wp-block-columns { display: contents; }
.ck-talere .wp-block-column {
	margin: 0 !important;
	background: var(--ck-sand);
	border-radius: var(--ck-radius);
	padding: 14px 14px 20px;
	text-align: left;
}
.ck-talere .wp-block-image { margin: 0 0 14px; }
.ck-talere .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px !important;
}
.ck-talere h3 { text-align: left !important; margin: 0 0 4px; font-size: 1.05rem; }
.ck-talere p { text-align: left !important; margin: 0; color: var(--ck-muted); font-size: 0.9rem; }
@media (max-width: 960px) { .ck-talere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Dagsprogram: kort ---------- */
.ck-program {
	background: transparent !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 32px !important;
}
.ck-program > hr { display: none; }
.ck-program > .wp-block-columns {
	margin: 0 !important;
	flex-direction: column;
	gap: 6px;
	background: var(--ck-sand);
	border-radius: var(--ck-radius);
	padding: 24px 26px;
	border-top: 3px solid var(--ck-gold);
}
.ck-program .wp-block-column { flex-basis: auto !important; }
.ck-program h3 { margin: 0 0 6px; font-size: 1.25rem; }
.ck-program p { margin: 0; }
.ck-program .wp-block-column:last-child p { color: var(--ck-muted); font-size: 0.95rem; }
@media (max-width: 781px) { .ck-program { grid-template-columns: 1fr; } }

/* ---------- Bokser (f.eks. gave) ---------- */
.ck-boks {
	background: var(--ck-sand) !important;
	border-radius: var(--ck-radius);
	border-left: 4px solid var(--ck-gold);
	padding: 24px 28px !important;
	margin-top: 40px !important;
}
.ck-boks h3 { margin-top: 0; }

/* ---------- Undersider: bildebånd med tittel ---------- */
.ck-pagehead {
	margin-top: 0 !important;
	padding: clamp(80px, 14vh, 150px) 24px clamp(40px, 6vh, 64px) !important;
	color: #fff;
	background:
		linear-gradient(180deg, rgba(18, 18, 16, 0.25) 0%, rgba(18, 18, 16, 0.7) 100%),
		var(--ck-page-img, var(--ck-ink)) center / cover no-repeat;
}
.ck-pagehead .wp-block-post-title {
	color: #fff;
	font-size: clamp(2.2rem, 5.5vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
}
.ck-pagecontent { padding-top: 48px; }

/* ---------- Tabell (overnatting) ---------- */
.wp-block-table { margin-top: 32px; }
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-radius);
	overflow: hidden;
	font-size: 0.95rem;
}
.wp-block-table th,
.wp-block-table td { border: 0; border-bottom: 1px solid var(--ck-line); padding: 14px 16px; vertical-align: top; text-align: left; }
.wp-block-table thead { border: 0; }
.wp-block-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ck-muted); font-weight: 600; background: #fff; }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--ck-sand); }
.wp-block-table td:nth-child(2) { white-space: nowrap; font-weight: 600; }

/* ---------- Bunn ---------- */
.ck-footer {
	margin-top: 0 !important;
	background: var(--ck-ink);
	color: rgba(255, 255, 255, 0.78);
	padding: 72px 24px 40px !important;
	font-size: 0.95rem;
}
.ck-footer a { color: #fff; text-underline-offset: 3px; }
.ck-footer h2 {
	color: #fff;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	margin: 0 0 12px;
}
.ck-footer .ck-brand { color: #fff; font-size: 1.3rem; }
.ck-footer .ck-brand svg { width: 44px; height: 46px; }
.ck-footer p { margin: 0 0 6px; }
.ck-footer .ck-nlm img { max-width: 170px; height: auto; opacity: 0.9; }
.ck-footer .ck-bunnlinje {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 48px !important;
	padding-top: 20px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- Forhåndsvisningsbanner (fra mu-plugin) ---------- */
.ck-preview-bar {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 9999;
	background: var(--ck-ink);
	color: #fff;
	border-radius: 999px;
	padding: 10px 18px;
	font: 500 0.85rem/1.3 "Work Sans", system-ui, sans-serif;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	display: flex;
	gap: 14px;
	align-items: center;
	white-space: nowrap;
}
.ck-preview-bar a { color: var(--ck-gold); }

/* Forsiden: introen skal gå helt ut til kantene, også rett under toppen */
.home .ck-main { padding-top: 0 !important; }
.home .ck-main > .wp-block-post-content { margin-top: 0 !important; }
.ck-intro p:nth-of-type(3) { max-width: 560px; margin-inline: auto !important; font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 520px) {
	.ck-preview-bar { white-space: normal; width: calc(100% - 32px); justify-content: space-between; border-radius: 14px; }
}

/* ---------- Énside: avsnitt med ankre ---------- */
html { scroll-behavior: smooth; }
.ck-seksjon {
	scroll-margin-top: 72px;
	margin-top: 0 !important;
	padding-block: clamp(56px, 9vw, 104px) !important;
}
.ck-seksjon + .ck-seksjon { border-top: 1px solid var(--ck-line); }
.ck-seksjon > h2:first-child { margin-top: 0; }
.ck-seksjon > h3 { text-align: center; margin-top: 72px; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
#kontakt .wp-block-columns { margin-top: 24px; }

/* ---------- Påmelding (innbygget bookingskjema) ---------- */
.ck-pagecontent > .ck-pamelding,
.ck-pameldingsside > .ck-pamelding { max-width: 960px !important; margin-top: 32px; }
.ck-pamelding iframe { border-radius: var(--ck-radius); background: #fff; }
.ck-pamelding-fallback { text-align: center; font-size: 0.9rem; margin-top: 12px; }

/* ---------- Sammenfoldbare avsnitt (grunnstil i ck-nettsted.php) ---------- */
.ck-fold { border-color: var(--ck-line) !important; }
.ck-fold > summary { font-weight: 650; letter-spacing: -0.025em; }
.ck-fold > summary:hover { color: var(--ck-gold-dark); }
.ck-fold > summary::after { color: var(--ck-gold); }
.ck-fold > h3 { text-align: center; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.ck-fold > .ck-program { margin-top: 24px !important; }

/* ---------- Mobil: ingenting skal være bredere enn skjermen ---------- */
/* Programkortene stables i kolonneretning. WordPress' mobilregel
   (.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important })
   betyr da 100 % HØYDE, og sammen med flex-wrap ble kolonnene brutt ut til siden. Dobbel klasse for
   å slå den spesifisiteten. */
.ck-program.ck-program > .wp-block-columns { flex-wrap: nowrap !important; }
.ck-program.ck-program > .wp-block-columns > .wp-block-column { flex-basis: auto !important; width: 100% !important; min-width: 0; }
@media (max-width: 600px) {
	/* Pristabellen som én blokk per overnattingstype i stedet for en tabell som sprenger bredden. */
	.wp-block-table { overflow: visible; }
	.wp-block-table table { border-radius: var(--ck-radius); }
	.wp-block-table thead { display: none; }
	.wp-block-table table,
	.wp-block-table tbody,
	.wp-block-table tr,
	.wp-block-table td { display: block; width: 100%; }
	.wp-block-table tr { padding: 14px 16px; border-bottom: 1px solid var(--ck-line); }
	.wp-block-table tbody tr:last-child { border-bottom: 0; }
	.wp-block-table td { border: 0 !important; padding: 0 !important; }
	.wp-block-table td:nth-child(2) { color: var(--ck-gold-dark); margin: 2px 0 6px; }
	.wp-block-table td:nth-child(3) { color: var(--ck-muted); font-size: 0.9rem; }
}
@media (max-width: 600px) {
	/* Prisboksene: rad-padding må regnes inn i bredden, ellers kuttes teksten i høyre kant. */
	.wp-block-table tr { box-sizing: border-box; }
	.wp-block-table td { width: auto; }
}
.ck-fold-ingress { color: var(--ck-muted); opacity: 1; }

/* ---------- Videoloop bak forsidens intro (functions.php) ---------- */
.ck-intro.has-video { position: relative; isolation: isolate; overflow: hidden; }
.ck-intro-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	/* Introen har «constrained»-layout, som ellers gir alle barn maks 720 px bredde og auto-marger. */
	max-width: none !important;
	margin: 0 !important;
}
.ck-intro .ck-video-pause { max-width: none !important; margin: 0 !important; }
/* Samme mørke tone som stillbildet har, men over videoen. */
.ck-intro.has-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(18, 18, 16, 0.38) 0%, rgba(18, 18, 16, 0.7) 100%);
	pointer-events: none;
}
.ck-video-pause {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(18, 18, 16, 0.45);
	color: #fff;
	border-radius: 999px;
	padding: 6px 14px;
	font: 500 0.8rem/1.3 "Work Sans", system-ui, sans-serif;
	cursor: pointer;
	backdrop-filter: blur(6px);
}
.ck-video-pause:hover { background: rgba(18, 18, 16, 0.7); }
.ck-video-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Talerkort: sentrerte bilder er display:table i WordPress og krymper til bildets egen størrelse -
   et lite originalbilde ble derfor smalere enn kortet. Alltid full kortbredde. */
.ck-talere .wp-block-image.aligncenter,
.ck-talere .wp-block-image { display: block !important; width: 100% !important; }

/* ---------- Toppmeny: åpnet ☰-meny ---------- */
/* backdrop-filter på .ck-header gjorde toppfeltet til «containing block» for position:fixed, så den
   åpnede menyen ble klemt inne i det 67 px høye feltet og menypunktene rant ut over siden.
   Glasseffekten ligger derfor i et eget bakgrunnslag i stedet for på selve feltet. */
.ck-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ck-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--ck-line);
}
.ck-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 28px;
	background: #fff;
}
.ck-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
	align-items: flex-start !important;
}
.ck-header .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	font-size: 1.35rem;
	font-weight: 600;
}
.ck-header .is-menu-open .wp-block-navigation-item__content { padding: 8px 0; }

/* ---------- Bunn på nettbrett ---------- */
/* Logoen hadde fast bredde (170 px) og ble bredere enn sin kolonne ved 782–1100 px. */
.ck-footer .ck-nlm img { max-width: min(170px, 100%); }
@media (min-width: 782px) and (max-width: 1100px) {
	.ck-footer > .wp-block-columns { flex-wrap: wrap !important; row-gap: 32px; }
	.ck-footer > .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 24px) !important; }
}

/* ---------- Nedtelling i toppfeltet (ck-innstillinger.php: ck_render_nedtelling) ---------- */
.ck-nedtelling { margin: 22px auto 26px; text-align: center; color: #fff; }
.ck-intro .ck-nedtelling .ck-nt-tekst {
	margin: 0 0 10px;
	font-size: 0.8rem !important;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85) !important;
}
.ck-nt-enheter { display: inline-flex; gap: 10px; justify-content: center; }
.ck-nt-enhet {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 72px;
	padding: 10px 8px 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.ck-nt-tall {
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.ck-nt-navn { margin-top: 6px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.ck-intro .ck-nedtelling-i-gang { font-size: 1.15rem !important; font-weight: 600; color: #fff !important; margin: 20px 0 24px; }
@media (max-width: 480px) {
	.ck-nt-enheter { gap: 6px; }
	.ck-nt-enhet { min-width: 60px; padding: 8px 4px 6px; }
}

/* ---------- Hold deg oppdatert (Infoskjermen GO) ---------- */
.ck-app { text-align: center; padding-top: 8px; }
.ck-app p { text-align: center; }
.ck-app .ck-app-logo { margin: 8px auto 20px; }
.ck-app .ck-app-logo img { width: 260px; max-width: 70%; height: auto; display: block; margin: 0 auto; }
.ck-app .ck-delingskode {
	width: fit-content;
	margin: 8px auto 20px !important;
	padding: 10px 28px 10px 34px;
	font-size: clamp(2rem, 6vw, 2.8rem);
	font-weight: 750;
	letter-spacing: 0.22em;
	line-height: 1.1;
	color: var(--ck-ink);
	background: var(--ck-sand);
	border: 2px dashed var(--ck-gold);
	border-radius: 14px;
	font-variant-numeric: tabular-nums;
	user-select: all;
}
.ck-app .ck-merker { gap: 12px; justify-content: center; margin: 0 auto 8px; }
.ck-app .ck-merke { margin: 0; }
.ck-app .ck-merke img { height: 48px; width: auto; display: block; }

/* ☰-menyen er alltid i bruk (header.html: overlayMenu «always»). På mobil fyller den skjermen;
   fra nettbrett og oppover er den et panel fra høyre, så den ikke blir en tom, hvit side. */
@media (min-width: 782px) {
	.ck-header .wp-block-navigation__responsive-container.is-menu-open {
		left: auto !important;
		width: min(380px, 100vw);
		padding: 28px 36px;
		border-left: 1px solid var(--ck-line);
		box-shadow: -24px 0 60px rgba(18, 18, 16, 0.16);
		animation: ck-meny-inn 0.18s ease-out;
	}
	.ck-header .wp-block-navigation__responsive-container.is-menu-open { box-sizing: border-box; }
	.ck-header .is-menu-open .wp-block-navigation__container { gap: 2px !important; }
}
@keyframes ck-meny-inn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.ck-header .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}
/* Menypunktene i den åpne ☰-menyen: store og lette å treffe (alle skjermstørrelser). */
.ck-header .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.3rem !important;
	font-weight: 600;
	padding: 10px 0 !important;
	letter-spacing: -0.01em;
}