/*
Theme Name: NocNoc North
Author: A Liljenberg, NocNoc
Description: NocNoc Child Theme för ZENZR. Sidhuvudet byggs i PHP (nn_entry_header) i stället för med JavaScript i kodsnutten "Header".
Version: 1.0
Template: siteorigin-north
*/

/* ==========================================================================
   H1 i innehållet ser ut exakt som H2
   Moduler med "Rubriknivå: H1" och Text-redigerarens "Rubrik 1" används när
   sidhuvudet är dolt. Speglar h2-reglerna i kodsnuttarna Fonts och Master CSS –
   ändras de, ändra här också.
   ========================================================================== */
.entry-content h1:where(:not(.product-single-headline, .news-single-headline)) {
	font-size: clamp(12px, 3.4rem, 18px);
}

.entry-content h1:where(:not(.product-single-headline, .news-single-headline)):first-of-type {
	margin-top: 0;
}

.entry-content h1.heading_large {
	font-size: clamp(64px, 21.9rem, 118px);
	line-height: 1;
}

.entry-content h1.heading_medium {
	font-size: clamp(30px, 12.7rem, 68px);
	line-height: normal;
}

.nocnoc_fc_product_grid_group .fc_content_headline h1 {
	text-align: center;
	max-width: 740px;
	margin: 0 auto;
}

/* ==========================================================================
   Kortrubriker i Produkt-grid och Nyhets-grid är h2 när modulrubriken är H1,
   men ska se ut som tidigare h3 (speglar h3.nnp-card__title i kodsnutten Fonts)
   ========================================================================== */
h2.nnp-card__title {
	font-size: clamp(24px, 5.6rem, 30px);
	line-height: normal;
}

.nnp-card h2.nnp-card__news_title {
	margin-top: 25px; /* h2:first-of-type i Master CSS nollar annars marginalen */
}

/* ==========================================================================
   Streamad bakgrundsvideo i sidhuvudet (Bunny Stream, nn_bunny_header_video)
   Iframen täcker hela ytan som en videofil med object-fit: cover.
   Överlägget (:before) och reservbilden (:after) kommer från kodsnutten Header.
   Lager: reservbild längst bak → video → Bunnys miniatyr (första bildrutan) → överlägg.
   ========================================================================== */
.video-background.nn-stream:before {
	z-index: 2; /* mörka överlägget över videon */
}

.nn-stream__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: size;
}

.nn-stream__iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/* +4px så att halva pixlar vid centreringen inte lämnar en glipa i kanten */
	width: calc(max(100cqw, 177.78cqh) + 4px);
	height: calc(max(100cqh, 56.25cqw) + 4px);
	max-width: none; /* temats iframe { max-width: 100% } gör annars iframen smalare än 16:9 → videon visas som ett band */
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none; /* bakgrundsvideo – klick ska inte pausa */
	transition: opacity .4s ease-out;
}

.nn-stream__thumb {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	transition: opacity .4s ease-out;
	pointer-events: none;
}

/* Videon spelar: miniatyren tonas bort */
.nn-stream.is-playing .nn-stream__thumb {
	opacity: 0;
}

/* Videon spelar inte (fel eller inte igång inom 8 s): reservbilden syns */
.nn-stream.is-fallback .nn-stream__thumb,
.nn-stream.is-fallback .nn-stream__iframe {
	opacity: 0;
}