/* ============================================================
   Vestjysk Varmepumper — fælles styling
   ------------------------------------------------------------
   Her ligger det der skal gælde på tværs af alle sider.
   Sidespecifik styling hører hjemme i den enkelte sides CSS-fil.
   ============================================================ */

/* --- Logo -------------------------------------------------
   Lå tidligere som CSS injiceret af et plugin midt i sidens
   indhold. Flyttet hertil, så det følger temaet og kan caches. */

.nav-logo {
	display: block !important;
	width: 160px !important;
	height: 44px !important;
	background: url('/wp-content/uploads/2026/05/vestjysk-varmepumper-logo-white.png') no-repeat left center !important;
	background-size: contain !important;
	/* Teksten bliver stående i markup'en, så skærmlæsere og Google
	   stadig kan læse firmanavnet — den flyttes bare ud af syne. */
	text-indent: -9999px !important;
	overflow: hidden !important;
	font-size: 0 !important;
	white-space: nowrap;
}

.footer-brand {
	width: 160px !important;
	height: 44px !important;
	background: url('/wp-content/uploads/2026/05/vestjysk-varmepumper-logo-white.png') no-repeat left center !important;
	background-size: contain !important;
	margin-bottom: 12px !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
	font-size: 0 !important;
	color: transparent !important;
	white-space: nowrap;
}

/* --- Formularfelter ---------------------------------------
   WooCommerce' eget mørke tema farvede felterne så teksten blev
   næsten usynlig mens man skrev. */

.vv-form__input {
	background: #f9fafb !important;
	color: #1a1a2e !important;
	border: 1px solid #d1d5db !important;
}

.vv-form__input:focus {
	background: #ffffff !important;
	border-color: #1e73be !important;
	color: #1a1a2e !important;
}

.vv-form__input::placeholder {
	color: #9ca3af !important;
}

.vv-lead-form {
	background: #ffffff !important;
}

/* --- Tilgængelighed --------------------------------------- */

/* Springlinket skal kunne ses når man tabber til det.
   Ellers er tastaturnavigation reelt ubrugelig. */
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	padding: 12px 20px;
	background: #1a73e8;
	color: #fff;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

/* Synligt fokus på alt der kan tabbes til. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

/* Respekterer brugerens systemvalg om reduceret bevægelse. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Hello Elementor-rester -------------------------------
   Temaets egen header og sidetitel er slået fra i PHP på de sider
   der har deres eget design. Dette er en sikkerhedsnet-regel. */

.vv-page .entry-title,
.vv-location .entry-title,
.vv-page .page-header,
.vv-location .page-header {
	display: none;
}

/* Sikkerhedsnet: skulle Hello Elementors header alligevel blive udskrevet
   på en side der har sin egen navigation, må den ikke vises to gange.
   PHP-filteret 'hello_elementor_header_footer' er den egentlige løsning. */
body.vv-has-own-chrome #site-header,
body.vv-has-own-chrome .site-header {
	display: none !important;
}

/* --- Tilbuds-popup ----------------------------------------
   Lå tidligere som inline styles i en PHP-tekststreng. */

.vv-popup-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.vv-popup-backdrop[open] {
	display: flex;
}

.vv-popup-box {
	position: relative;
	background: #0f172a;
	border: 1px solid #1e3a5f;
	border-radius: 16px;
	padding: 40px;
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
	color: #fff;
}

.vv-popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: 0;
	color: #94a3b8;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 6px;
}

.vv-popup-close:hover {
	color: #fff;
}

.vv-popup-badge {
	display: inline-block;
	background: #1d4ed8;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.vv-popup-heading {
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 8px;
	color: #fff;
}

.vv-popup-sub {
	color: #94a3b8;
	font-size: 15px;
	margin: 0 0 24px;
}

.vv-popup-form input[type="text"],
.vv-popup-form input[type="tel"],
.vv-popup-form input[type="email"] {
	width: 100%;
	padding: 12px 16px;
	background: #1e293b;
	border: 1px solid #1e3a5f;
	border-radius: 8px;
	color: #fff;
	font-size: 15px;
	margin-bottom: 10px;
}

.vv-popup-form input::placeholder {
	color: #94a3b8;
}

.vv-popup-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 16px;
	cursor: pointer;
	color: #94a3b8;
	font-size: 13px;
	line-height: 1.5;
}

.vv-popup-consent input {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: #2563eb;
}

.vv-popup-consent a {
	color: #60a5fa;
	text-decoration: underline;
}

.vv-popup-submit {
	width: 100%;
	padding: 14px;
	background: #2563eb;
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.vv-popup-submit:hover {
	background: #1d4ed8;
}

.vv-popup-submit:disabled {
	opacity: 0.65;
	cursor: default;
}

.vv-popup-note {
	color: #64748b;
	font-size: 12px;
	text-align: center;
	margin: 10px 0 0;
}

.vv-popup-success {
	text-align: center;
	padding: 20px 0;
}

.vv-popup-check {
	font-size: 44px;
	margin: 0 0 12px;
	color: #22c55e;
}

.vv-popup-success h3 {
	color: #fff;
	font-size: 20px;
	margin: 0 0 8px;
}

.vv-popup-success p {
	color: #94a3b8;
	margin: 0;
}

/* Fejlbesked på lokationssidernes formular. */
#vv-lead-error {
	display: none;
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.4);
	color: #fecaca;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 12px;
}

/* ============================================================
   Mobil-UX
   ------------------------------------------------------------
   Regler der kun gælder på telefon, hvor de faktisk betyder noget.
   Skriftstørrelserne på desktop røres ikke.
   ============================================================ */

@media (max-width: 768px) {

	/* iOS zoomer automatisk ind når man trykker i et felt med
	   skrift under 16px. Siden hopper, brugeren mister overblikket,
	   og skal zoome ud igen bagefter. Det sker uanset viewport-meta.

	   16px er derfor ikke en æstetisk beslutning — det er grænsen
	   for hvornår telefonen lader være med at blande sig. */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px !important;
	}

	/* Apples minimum for noget man skal ramme med en finger.
	   Under det rammer folk ved siden af — især i bevægelse. */
	button,
	.btn-primary,
	.btn-nav,
	.nav-mobile-cta,
	.vv-popup-submit,
	input[type="submit"],
	a.button {
		min-height: 44px;
	}

	/* Fjerner det grå blink iOS lægger over links ved tryk. */
	a,
	button {
		-webkit-tap-highlight-color: transparent;
	}

	/* Forhindrer at dobbelttryk zoomer i stedet for at aktivere knappen. */
	button,
	a.btn-primary,
	a.btn-nav,
	input[type="submit"] {
		touch-action: manipulation;
	}
}

/* Fuld højde uden at browserens adresselinje snyder målingen.
   100vh regner med et vindue der ikke findes når linjen er synlig. */
.vv-full-height {
	min-height: 100dvh;
}

/* ============================================================
   Vandret overløb på mobil
   ------------------------------------------------------------
   En side der kan rulles sidelæns på telefon føles ødelagt.
   Teksten forsvinder ud i kanten, og man rammer forkert når
   man scroller.
   ============================================================ */

@media (max-width: 640px) {

	/* Footeren stod i to spalter på 375px. To spalter à 200px
	   plus mellemrum er bredere end skærmen. */
	.footer-top {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
}

@media (max-width: 768px) {

	/* Brede tabeller — fx prislisten på servicesiden — får lov
	   at rulle inde i deres eget felt i stedet for at skubbe
	   hele siden ud i siden.

	   Alternativet ville være at klemme kolonnerne sammen, hvor
	   priser og beskrivelser bliver ulæselige. */
	table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Sikkerhedsnet: intet må stikke ud over skærmkanten. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Billeder og indlejret indhold holder sig inden for deres plads. */
img,
video,
iframe,
svg {
	max-width: 100%;
}