/* =========================================================
   Ark Klimaattechniek – Volledige lichte CSS 2025
   Compatibel met WordPress.com Premium
   ========================================================= */
/* === Kleuren === */
:root {
}

/* === Algemene basis === */
body {
	background: var(--ark-bg);
	color: var(--ark-text);
}

h1,h2,h3 {
	color: var(--ark-text);
	line-height: 1.2;
}

p {
	color: var(--ark-text-soft);
	line-height: 1.7;
}

/* === Hero sectie === */
.hero {
	padding: 50px 0;
}

.hero h1 {
	font-size: clamp(26px,4vw,40px);
	margin-bottom: 10px;
}

.hero .subtext {
	color: var(--ark-text-soft);
	font-size: clamp(16px,2vw,18px);
	margin-bottom: 20px;
}

/* === Knoppen === */
.btn {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	transition: .2s ease;
}

.btn--primary {
	background: var(--ark-blue);
	color: #fff;
}

.btn--primary:hover {
	background: var(--ark-blue-hover);
}

.btn--secondary {
	background: var(--ark-red);
	color: #fff;
}

.btn--secondary:hover {
	background: var(--ark-red-hover);
}

.btn--outline {
	background: transparent;
	color: var(--ark-blue);
	border: 2px solid var(--ark-blue);
}

.btn--outline:hover {
	background: var(--ark-blue);
	color: #fff;
}

/* Gutenberg standaardknoppen forceren */
.wp-site-blocks .wp-block-button__link {
	border-radius: 8px !important;
	font-weight: 600 !important;
	padding: 12px 20px !important;
}

.wp-site-blocks .wp-block-button__link:hover {
	filter: brightness(.92);
}

/* Tweede knop in knoppenrij rood maken */
.wp-site-blocks .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
	background: var(--ark-red) !important;
	color: #fff !important;
}

.wp-site-blocks .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover {
	background: var(--ark-red-hover) !important;
}

/* === Secties === */
.section--soft {
	background: var(--ark-bg-soft);
	padding: 40px 0;
}

/* === Lijst met vinkjes === */
.ark-list {
	list-style: none;
	padding: 0;
}

.ark-list li::before {
	content: "✓";
	color: var(--ark-blue);
	margin-right: 6px;
	font-weight: 700;
}

/* === Formulieren === */
input[type="text"],input[type="email"],input[type="tel"],textarea,select {
	width: 100%;
	border: 1px solid #D9E2EC;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 16px;
	color: var(--ark-text);
}

input:focus,textarea:focus,select:focus {
	outline: none;
	border-color: var(--ark-blue);
	box-shadow: 0 0 0 3px rgba(99,179,230,.2);
}

input[type="submit"],button[type="submit"],.wpforms-submit {
	background: var(--ark-blue);
	color: #fff;
	border: none;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: .2s ease;
}

input[type="submit"]:hover,button[type="submit"]:hover,.wpforms-submit:hover {
	background: var(--ark-blue-hover);
}

/* === Kaarten / cards === */
.card {
	background: #fff;
	border: 1px solid #E9EEF3;
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* === Footer === */
.site-footer {
	background: var(--ark-bg-soft);
	border-top: 3px solid var(--ark-blue);
	color: var(--ark-text);
	padding-top: 24px;
}

/* === Contactpagina (page-id-195) === */
.page-id-195 .wp-block-button__link {
	background: var(--ark-blue) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 14px 20px !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.page-id-195 .wp-block-button__link:hover {
	background: var(--ark-blue-hover) !important;
}

.page-id-195 .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
	background: var(--ark-red) !important;
}

.page-id-195 .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover {
	background: var(--ark-red-hover) !important;
}

.page-id-195 .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--ark-blue) !important;
	color: #fff !important;
	border-color: var(--ark-blue) !important;
}

.page-id-195 .wp-block-cover__background,
.page-id-195 .wp-block-cover__gradient-background {
	opacity: .15 !important;
}

/* === Algemene contact lay-out === */
.contact-hero.hero {
	padding: 48px 0;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	gap: 18px;
	margin: 26px 0;
}

.contact-card {
	background: #fff;
	border: 1px solid #E9EEF3;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.contact-card h3 {
	margin-top: 0;
	color: var(--ark-text);
}

.contact-form {
	padding: 36px 0;
}

.contact-form form {
	max-width: 760px;
	margin: 0 auto;
}

.contact-map {
	background: #fff;
	border: 1px solid #E9EEF3;
	border-radius: 14px;
	padding: 18px;
	margin-top: 20px;
}

/* === Navigatie: Contact-link rood === */
.wp-site-blocks nav a[href="https://arkklimaattechniek.nl/contact"] {
	background: var(--ark-red) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 10px 16px !important;
	font-weight: 600 !important;
}

.wp-site-blocks nav a[href="https://arkklimaattechniek.nl/contact"]:hover {
	background: var(--ark-red-hover) !important;
}

/* === Mobiel === */
@media (max-width:768px) {
	.btn {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.hero {
		padding: 30px 0;
	}
	
	.contact-grid {
		grid-template-columns: 1fr;
	}
	
	.wp-site-blocks .wp-block-button__link {
		width: 100% !important;
		text-align: center !important;
		margin-bottom: 10px !important;
	}
}

/* ==== UNIVERSAL OVERRIDES (zonder page-id) ==== */
/* Buttons (Gutenberg + WP core) */
html body .wp-block-button__link,
html body .wp-element-button {
	background: #63B3E6 !important;
/* blauw */
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 14px 20px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}

html body .wp-block-button__link:hover,
html body .wp-element-button:hover {
	background: #4798CC !important;
/* hover blauw */
}

/* Als een knoppenrij twee knoppen heeft: maak de 2e rood */
html body .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link,
html body .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-element-button {
	background: #E94A4B !important;
}

html body .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover,
html body .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-element-button:hover {
	background: #C53A3B !important;
}

/* Forceer 'outline' knoppen toch leesbaar */
html body .wp-block-button.is-style-outline .wp-block-button__link,
html body .is-style-outline .wp-element-button {
	background: #63B3E6 !important;
	color: #fff !important;
	border-color: #63B3E6 !important;
}

/* Tekstkleuren in hero (niet wit wegvallen) */
html body .hero h1 {
	color: #1E1E1E !important;
	font-size: clamp(26px, 4vw, 40px) !important;
	line-height: 1.2 !important;
}

html body .hero p,
html body .hero .subtext {
	color: #4A4A4A !important;
	font-size: clamp(16px, 2vw, 18px) !important;
}

/* Zachte sectie */
html body .section--soft {
	background: #F5F7FA !important;
	padding: 40px 0 !important;
}

/* Cover/achtergrond overlays minder fel (zodat knoppen niet wegvallen) */
html body .wp-block-cover__background,
html body .wp-block-cover__gradient-background {
	opacity: .15 !important;
}

/* Lijst met vinkjes */
html body .ark-list {
	list-style: none !important;
	padding: 0 !important;
}

html body .ark-list li::before {
	content: "✓";
	color: #63B3E6;
	font-weight: 700;
	margin-right: 6px;
}

/* Mobiel: knoppen 100% breed */
@media (max-width: 768px) {
	html body .wp-block-button__link,
					  html body .wp-element-button {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		margin-bottom: 10px !important;
	}
}

/* ==== Contactpagina gerichte fix (post=195) ==== */
.page-id-195 .wp-block-cover__background,
.page-id-195 .wp-block-cover__gradient-background {
	opacity: .05 !important;
/* bijna geen sluier meer */
	filter: brightness(1) !important;
}

/* Hero-tekst contrastrijk */
.page-id-195 .wp-block-cover h1,
.page-id-195 .wp-block-cover p {
	color: #1E1E1E !important;
	text-shadow: none !important;
}

/* CTA-knoppen duidelijk blauw/rood */
.page-id-195 .wp-block-button__link,
.page-id-195 .wp-element-button {
	background: #63B3E6 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 22px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.page-id-195 .wp-block-button__link:hover,
.page-id-195 .wp-element-button:hover {
	background: #4798CC !important;
}

/* Tweede knop in knoppenrij rood */
.page-id-195 .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link,
.page-id-195 .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-element-button {
	background: #E94A4B !important;
}

.page-id-195 .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover,
.page-id-195 .hero .wp-block-buttons .wp-block-button:nth-child(2) .wp-element-button:hover {
	background: #C53A3B !important;
}

/* Tekst onderaan formulier en contactgegevens donker */
.page-id-195 .wp-block-group p,
.page-id-195 .wp-block-group h2,
.page-id-195 .wp-block-group h3 {
	color: #1E1E1E !important;
}

/* Mobiel: knoppen onder elkaar */
@media (max-width:768px) {
	.page-id-195 .wp-block-button__link {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		margin-bottom: 10px !important;
	}
}

/* ====== Bedankt-pagina (/bedankt-voor-uw-bericht) ====== */
/* 1) Basis layout (werkt als je Group de class 'thankyou-page' geeft) */
body[class*="bedankt-voor-uw-bericht"] .thankyou-page,
.thankyou-page {
	text-align: center;
	padding: 90px 20px;
	background: #F5F7FA;
/* rustig lichtgrijs */
}

/* 2) Tekststijl */
body[class*="bedankt-voor-uw-bericht"] .thankyou-page h1,
.thankyou-page h1 {
	color: #E94A4B;
/* rood uit logo */
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 12px;
}

body[class*="bedankt-voor-uw-bericht"] .thankyou-page p,
.thankyou-page p {
	color: #1E1E1E;
	line-height: 1.7;
	max-width: 640px;
	margin: 0 auto 22px;
}

/* 3) Knoppen */
body[class*="bedankt-voor-uw-bericht"] .thankyou-page .btn,
.thankyou-page .btn {
	display: inline-block;
	background: #E94A4B;
	color: #fff;
	padding: 12px 28px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	transition: .2s ease;
}

body[class*="bedankt-voor-uw-bericht"] .thankyou-page .btn:hover,
.thankyou-page .btn:hover {
	background: #C53A3B;
}

/* 4) Gebruik je een Cover-blok als achtergrond? Maak overlay licht en tekst leesbaar */
body[class*="bedankt-voor-uw-bericht"] .wp-block-cover__background,
body[class*="bedankt-voor-uw-bericht"] .wp-block-cover__gradient-background {
	background: rgba(255,255,255,.35) !important;
/* lichte sluier boven foto */
	opacity: 1 !important;
}

body[class*="bedankt-voor-uw-bericht"] .wp-block-cover h1,
body[class*="bedankt-voor-uw-bericht"] .wp-block-cover p {
	color: #1E1E1E !important;
	text-shadow: none !important;
}

/* 5) Mobiel: mooi stapelen */
@media (max-width: 768px) {
	body[class*="bedankt-voor-uw-bericht"] .thankyou-page {
		padding: 70px 16px;
	}
	
	body[class*="bedankt-voor-uw-bericht"] .thankyou-page .btn {
		width: 100%;
	}
}

/* ====== CONTACT (page-id-195) – mobiel breedte fix ====== */
/* 1) voorkom horizontaal scrollen */
html, body {
	overflow-x: hidden;
}

/* 2) Cover/Hero mag nooit breder dan viewport zijn */
.page-id-195 .wp-block-cover {
	width: 100% !important;
	max-width: 100vw !important;
	box-sizing: border-box;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3) Binnenkant cover netjes in de breedte laten vallen */
.page-id-195 .wp-block-cover__inner-container {
	box-sizing: border-box;
	padding-left: clamp(16px, 5vw, 28px);
	padding-right: clamp(16px, 5vw, 28px);
	max-width: 100%;
}

/* 4) Paneel achter de tekst mag niet uit de randen lopen */
.page-id-195 .hero-text-panel {
	max-width: 680px;
}

@media (max-width: 768px) {
	.page-id-195 .hero-text-panel {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* 5) Kolommen/rijen in formulieren: altijd stapelen op mobiel */
@media (max-width: 768px) {
	.page-id-195 .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 14px !important;
	/* kleiner gap helpt tegen overflow */
	}
	
	.page-id-195 .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* 6) Buttons op mobiel 100% breed */
@media (max-width: 768px) {
	.page-id-195 .wp-block-button__link {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}
}

/* 7) Afbeeldingen/embeds kunnen nooit breder dan het scherm */
.page-id-195 img, 
.page-id-195 figure, 
.page-id-195 .wp-block-image,
.page-id-195 .wp-block-embed {
	max-width: 100% !important;
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

/* ========== Compactere mobiele header (gescope) ========== */
@media (max-width: 768px) {
	/* Headercontainers */
	header,
			  .site-header,
			  .wp-block-template-part[area="header"],
			  .wp-block-group[aria-label*="Header"] {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin: 0 !important;
		min-height: 44px !important;
		line-height: 1 !important;
	}
	
	/* Logo */
	header img,
			  .wp-block-site-logo img {
		max-height: 32px !important;
		width: auto !important;
		margin: 4px 0 !important;
	}
	
	/* Titel naast logo */
	header .wp-block-site-title {
		font-size: .95rem !important;
		margin: 0 0 0 6px !important;
		padding: 0 !important;
	}
	
	/* Navigatieknop & container */
	header .wp-block-navigation,
			  header .wp-block-navigation__responsive-container-open {
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Alleen padding binnen header-groepen weghalen */
	header .wp-block-group,
			  header .wp-block-template-part__inner-container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	
	/* Uitklapmenu compacter */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}

html, :root, body {
	scroll-behavior: smooth !important;
}

#contactformulier {
	scroll-margin-top: 80px;
}/* pas 80 aan als je header hoger/lager is */
	
}

/* ==== MOBIELE HEADER MAXIMAAL COMPACT ==== */
@media (max-width: 768px) {
	/* 0) Zet globale root-padding voor mobiele view lager (block-thema's) */
	.wp-site-blocks {
	}
	
	/* 1) Header container: minder padding/hoogte */
	.wp-block-template-part[area="header"],
			  header,
			  .site-header {
		padding: 6px 10px !important;
		margin: 0 !important;
		min-height: 42px !important;
		line-height: 1 !important;
	}
	
	/* 2) Binnenste header-groepen: verwijder extra spacing/gap */
	.wp-block-template-part[area="header"] .wp-block-group {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.wp-block-template-part[area="header"] .is-layout-flex {
		gap: 6px !important;
	/* standaard is vaak 16–24px */
	}
	
	/* 3) Logo kleiner, zonder extra marge */
	.wp-block-site-logo,
			  .wp-block-site-logo img {
		margin: 0 !important;
		max-height: 28px !important;
	/* was ~48px */
		height: 28px !important;
		width: auto !important;
	}
	
	/* 4) Sitenaam (tussen logo en hamburger) compacter */
	.wp-block-site-title {
		font-size: 1rem !important;
		line-height: 1.1 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* 5) Hamburger-knop en navigatie: geen extra padding */
	.wp-block-navigation__responsive-container-open {
		padding: 4px 6px !important;
		margin: 0 !important;
	}
	
	.wp-block-navigation {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	/* 6) Als er nog witruimte onder de header zit (vaak door een alignfull group) */
	.wp-site-blocks > .wp-block-template-part[area="header"] + * {
		margin-top: 0 !important;
	}
}

/* Centreer de verzendknop in het formulier */
.page-id-195 form .wp-block-button {
	text-align: center !important;
/* centreren binnen container */
	justify-content: center !important;
/* centreren binnen flex */
}

.page-id-195 form .wp-block-button__link {
	display: inline-block !important;
/* behoudt zijn breedte */
	margin: 0 auto !important;
/* midden horizontaal */
	width: 100% !important;
}	
}

/* === WhatsApp-knop: exact centreren en zelfde breedte als blauwe knop === */
.page-id-195 {
/* desktop breedte, pas eventueel aan */
}

/* Container en beide knoppen 100% uitlijnen */
.page-id-195 .wp-block-stack,
.page-id-195 .wp-block-buttons {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	width: 100% !important;
	margin: 0 auto !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

/* Blauwe knop */
.page-id-195 form [type="submit"] {
	display: block !important;
	width: 100% !important;
	max-width: var(--cta-max) !important;
	margin: 0 auto !important;
}

/* WhatsApp-knop */
.page-id-195 a[href*="wa.me"],
.page-id-195 a[href*="whatsapp.com"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: var(--cta-max) !important;
	margin: 0 auto !important;
	float: none !important;
	text-align: center !important;
	box-sizing: border-box !important;
	background: #25D366 !important;
	color: #fff !important;
	font-weight: 600 !important;
	border-radius: 10px !important;
	padding: 14px 20px !important;
	text-decoration: none !important;
	transition: background .2s ease, transform .1s ease;
}

.page-id-195 a[href*="wa.me"]:hover,
.page-id-195 a[href*="whatsapp.com"]:hover {
	background: #1ebe5b !important;
	transform: translateY(-1px);
}

/* Icoon netjes naast tekst */
.page-id-195 a[href*="wa.me"] img,
.page-id-195 a[href*="whatsapp.com"] img {
	height: 22px !important;
	width: auto !important;
	margin: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Mobiel: 100% breed en perfect gecentreerd */
@media (max-width: 768px) {
	.page-id-195 {
	}
	
	.page-id-195 a[href*="wa.me"],
		  .page-id-195 a[href*="whatsapp.com"] {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}
}

/* === Fix WhatsApp-knop centreren + logo behouden === */
/* Zorg dat het element zichzelf centreert */
.page-id-195 a[href*="wa.me"],
.page-id-195 a[href*="whatsapp.com"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	text-align: center !important;
	margin: 0 auto !important;
	float: none !important;
	width: auto !important;
/* behoud originele breedte */
	padding: 12px 24px !important;
	background: #25D366 !important;
/* standaard WhatsApp groen */
	color: #fff !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

/* WhatsApp-logo goed positioneren */
.page-id-195 a[href*="wa.me"] img,
.page-id-195 a[href*="whatsapp.com"] img {
	height: 22px !important;
	width: auto !important;
	margin-right: 8px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Op mobiel centreren en breder tonen */
@media (max-width: 768px) {
	.page-id-195 a[href*="wa.me"],
		  .page-id-195 a[href*="whatsapp.com"] {
		display: flex !important;
		justify-content: center !important;
		width: fit-content !important;
		margin: 0 auto !important;
	}
}

/* ===== Contactpagina CTA's exact centreren en even breed ===== */
.page-id-195 {
}

/* breedte op desktop, pas aan naar smaak */
/* 1) Zorg dat de Stack met knoppen echt centreert */
.page-id-195 .wp-block-stack {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	text-align: center !important;
}

/* 2) Blauwe submitknop: centreren + zelfde maximale breedte */
.page-id-195 form [type="submit"] {
	display: block !important;
	width: 100% !important;
	max-width: var(--cta-max) !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

/* 3) WhatsApp-knop: pak ALLE varianten (link/knop/image) en centreer hard */
.page-id-195 .wp-block-stack :is(a[href*="wa.me"], a[href*="whatsapp.com"]) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: var(--cta-max) !important;
	margin: 0 auto !important;
/* perfect midden */
	float: none !important;
/* voorkom rechts-drift */
	text-align: center !important;
	box-sizing: border-box !important;
}

/* 4) Als de WA-knop een IMG bevat: centreer en beperk netjes */
.page-id-195 .wp-block-stack :is(a[href*="wa.me"], a[href*="whatsapp.com"]) img {
	display: inline-block !important;
	height: 22px !important;
/* icoonhoogte */
	width: auto !important;
	margin: 0 !important;
}

/* 5) Op mobiel beide knoppen volledig breed */
@media (max-width: 768px) {
	.page-id-195 {
	}
}

/* Voeg WhatsApp-logo toe in de knop (voor tekst) */
.page-id-195 .whatsapp-button::before,
.page-id-195 a[href*="wa.me"]::before,
.page-id-195 a[href*="whatsapp.com"]::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

/* ===== WPForms inside SeedProd: force full-width fields ===== */

.ark-form .wpforms-container,
.ark-form form.wpforms-form {
  width: 100% !important;
  max-width: 100% !important;
}

/* Inputs, selects, textarea should stretch */
.ark-form .wpforms-field input,
.ark-form .wpforms-field select,
.ark-form .wpforms-field textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix First / Last name layout on desktop */
@media (min-width: 768px) {
  .ark-form .wpforms-field-name .wpforms-field-row {
    display: flex !important;
    gap: 16px !important;
  }

  .ark-form .wpforms-field-name .wpforms-field-row-block {
    flex: 1 1 0 !important;
  }
}

/* Make the form visually wider and centered */
@media (min-width: 992px) {
  .ark-form .wpforms-container {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* === Form-only embed page (post ID 848) === */

/* Hide header, footer, hero, navigation */
.page-id-848 header,
.page-id-848 footer,
.page-id-848 .site-header,
.page-id-848 .site-footer,
.page-id-848 .page-header,
.page-id-848 .entry-header,
.page-id-848 .wp-block-cover,
.page-id-848 .hero,
.page-id-848 nav,
.page-id-848 .wp-site-blocks > header,
.page-id-848 .wp-site-blocks > footer {
  display: none !important;
}

/* Remove spacing around content */
.page-id-848 main,
.page-id-848 .site-content,
.page-id-848 .content-area,
.page-id-848 .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Optional: tighten form spacing */
.page-id-848 .fluentform {
  margin-top: 0 !important;
}


}