/* =====================================================================
   Bosstad Tweewielers – design system (fase 1, 2026-09-09)
   Eén bron voor tokens, Solace-neutralisatie en gedeelde componentregels.
   Elementor-widgets verwijzen naar de kit-globals; die kit-globals en deze
   tokens hebben dezelfde waarden. Wijzig kleuren/fonts hier én in de kit.
   ===================================================================== */

:root {
	--bs-turquoise: #33C7B7;
	--bs-turquoise-light: #4FD8C8;
	--bs-teal: #0F8A7C;
	--bs-teal-deep: #1E4A46;
	--bs-ink: #1C2022;
	--bs-ink-2: #2C3235;
	--bs-text: #4A5356;
	--bs-muted: #697478;
	--bs-border: #E3E4E2;
	--bs-border-soft: #EEF0EF;
	--bs-surface: #FFFFFF;
	--bs-surface-soft: #F6F5F2;
	--bs-dark: #0E1214;
	--bs-on-dark: #D2D9DA;
	--bs-on-dark-muted: #C3CBCD;
	--bs-gold: #8A6A1F;
	--bs-btn-ink: #06110F;

	--bs-font-body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bs-font-display: Newsreader, Georgia, "Times New Roman", serif;

	--bs-radius-sm: 2px;   /* knoppen, velden, badges */
	--bs-radius: 4px;      /* cards, afbeeldingen */
	--bs-shadow-soft: 0 1px 2px rgba(28, 32, 34, .04), 0 8px 24px rgba(28, 32, 34, .06);
	--bs-ease: cubic-bezier(.2, .7, .2, 1);

	--bs-wrap: 1440px;
	--bs-gutter: clamp(18px, 4vw, 48px);
	--bs-section: 88px;
	--bs-section-tablet: 64px;
	--bs-section-mobile: 48px;

	/* Solace leest deze variabelen voor links/knoppen/koppen */
	--sol-color-link-button-initial: var(--bs-teal);
	--sol-color-link-button-hover: var(--bs-teal-deep);
	--sol-color-base-font: var(--bs-text);
	--sol-color-heading: var(--bs-ink);
	--sol-color-border: var(--bs-border);
	--nv-fallback-ff: Barlow, sans-serif;
}

/* ---------------------------------------------------------------------
   Solace-defaults neutraliseren (alleen wat botst met het Bosstad-design)
   --------------------------------------------------------------------- */
body.solacewp {
	font-family: var(--bs-font-body);
	color: var(--bs-text);
	background: var(--bs-surface);
	-webkit-font-smoothing: antialiased;
}

/* Solace dimt élke link bij hover (opacity .9) – geeft een vaal effect op knoppen en cards. */
body.solacewp a:hover,
body.solacewp a:focus { opacity: 1; }

/* Focus-ring in huisstijl i.p.v. Solace-oranje */
body.solacewp a:focus-visible,
body.solacewp button:focus-visible,
body.solacewp [tabindex]:focus-visible,
body.solacewp input:focus-visible,
body.solacewp select:focus-visible,
body.solacewp textarea:focus-visible {
	outline: 2px solid var(--bs-teal);
	outline-offset: 2px;
}

/* Elementor full-width pagina's: geen theme-marges rond de content */
body.elementor-template-full-width #mycontent { display: none; }

/* Koppen buiten Elementor (catalogus, formulieren, 404) */
body.solacewp h1, body.solacewp h2, body.solacewp h3 { font-family: var(--bs-font-display); font-weight: 400; color: var(--bs-ink); }
body.solacewp h4, body.solacewp h5, body.solacewp h6 { font-family: var(--bs-font-body); font-weight: 600; color: var(--bs-ink); }

/* Tekstselectie */
/* Selectiekleur: altijd turquoise, ook als het thema (Solace-palet sol-color-selection-*) iets anders instelt. 25-09-2026 definitief. */
::selection { background: rgba(51, 199, 183, .32) !important; color: var(--bs-ink, #1C2022) !important; text-shadow: none !important; }
::-moz-selection { background: rgba(51, 199, 183, .32) !important; color: var(--bs-ink, #1C2022) !important; text-shadow: none !important; }
img::selection, svg::selection { background: rgba(51, 199, 183, .22) !important; }

/* ---------------------------------------------------------------------
   Formulieren (Solace + eigen plugins) – één veldstijl
   --------------------------------------------------------------------- */
body.solacewp input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
body.solacewp select,
body.solacewp textarea {
	font-family: var(--bs-font-body);
	font-size: 16px;
	color: var(--bs-ink);
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-sm);
	box-shadow: none;
	transition: border-color .15s var(--bs-ease), box-shadow .15s var(--bs-ease);
}
body.solacewp input:not([type=button]):not([type=submit]):focus,
body.solacewp select:focus,
body.solacewp textarea:focus {
	border-color: var(--bs-turquoise);
	box-shadow: 0 0 0 3px rgba(51, 199, 183, .18);
	outline: none;
}

/* ---------------------------------------------------------------------
   Knoppen – gedeelde motion voor Elementor-buttons
   --------------------------------------------------------------------- */
.elementor-button {
	transition: background-color .18s var(--bs-ease), color .18s var(--bs-ease), border-color .18s var(--bs-ease), transform .18s var(--bs-ease);
}
.elementor-button:hover .elementor-button-icon { transform: translateX(3px); }
.elementor-button .elementor-button-icon { transition: transform .18s var(--bs-ease); }

/* ---------------------------------------------------------------------
   Cards (.bs-card wordt door Elementor-containers gedragen)
   --------------------------------------------------------------------- */
.bs-card {
	transition: border-color .2s var(--bs-ease), box-shadow .2s var(--bs-ease), transform .2s var(--bs-ease);
}
.bs-card:has(a):hover {
	border-color: #CBD3D1;
	box-shadow: var(--bs-shadow-soft);
	transform: translateY(-2px);
}
.bs-card img { border-radius: var(--bs-radius); }

/* ---------------------------------------------------------------------
   Kleine leesbaarheids- en spacingregels
   --------------------------------------------------------------------- */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor a { color: var(--bs-teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.elementor-widget-text-editor a:hover { color: var(--bs-teal-deep); }
.elementor-icon-list-item { transition: color .15s var(--bs-ease); }

/* Subtiele scroll-reveal: alleen als Elementor-animaties gebruikt worden, nooit forceren */
@media (prefers-reduced-motion: reduce) {
	.bs-card, .elementor-button, .elementor-button .elementor-button-icon { transition: none; }
	.bs-card:has(a):hover { transform: none; }
}

/* ---------------------------------------------------------------------
   Header (Solace Extra Site Builder-part 90)
   --------------------------------------------------------------------- */
.solace-extra-nav-menu .menu-item > a,
.elementor-widget-solace-extra-nav-menu .menu-item > a {
	transition: color .15s var(--bs-ease);
}

/* ---------------------------------------------------------------------
   Footer (Solace HFG) – hiërarchie en kleuren op tokens
   --------------------------------------------------------------------- */
#site-footer { margin-top: 0; background: var(--bs-dark); color: var(--bs-on-dark); }
#site-footer .footer-top { border-top: 4px solid var(--bs-turquoise); }
#site-footer .item--inner,
#site-footer .bs-ft-list a,
#site-footer .bs-ft-tagline,
#site-footer .builder-item--copyright_html p { font-family: var(--bs-font-body); }
/* Containerlogica = Elementor: full-width achtergrond, gecentreerde inner van max 1440px, gutter 48/24/16. */
#site-footer .footer--row-inner { max-width: none; padding-left: 48px; padding-right: 48px; }
#site-footer .footer--row .container { width: 100%; max-width: var(--bs-wrap) !important; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
#site-footer .footer--row .builder-item { padding-left: 0; padding-right: 0; }
#site-footer .footer--row .row { margin-left: 0; margin-right: 0; }
@media (max-width: 1024px) { #site-footer .footer--row-inner { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 767px) { #site-footer .footer--row-inner { padding-left: 16px; padding-right: 16px; } }

#site-footer .builder-item--logo-footer .site-logo .brand { display: inline-block; line-height: 0; }
#site-footer .builder-item--logo-footer .site-logo img { max-width: 236px; width: 100%; height: auto; border-radius: 0; background: transparent; }
@media (max-width: 767px) { #site-footer .builder-item--logo-footer .site-logo img { max-width: 190px; } }
#site-footer .builder-item--logo-footer { --margin: 0 0 14px 0; }

#site-footer .bs-ft-tagline { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--bs-on-dark-muted); }
#site-footer .builder-item--footer_html1 { --margin: 0 0 22px 0; --padding: 0; }

#site-footer .component-wrap-footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
#site-footer .component-wrap-footer-social .box-social { margin: 0; position: relative; }
#site-footer .component-wrap-footer-social .box-social a.link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; transition: background-color .18s var(--bs-ease); }
#site-footer .component-wrap-footer-social .box-social:first-child a.link { margin-left: -10px; }
#site-footer .component-wrap-footer-social .box-social svg { width: 22px; height: 22px; fill: var(--bs-on-dark-muted); transition: fill .18s var(--bs-ease); }
#site-footer .component-wrap-footer-social .box-social a.link:hover,
#site-footer .component-wrap-footer-social .box-social a.link:focus-visible { background: rgba(51, 199, 183, .12); }
#site-footer .component-wrap-footer-social .box-social a.link:hover svg,
#site-footer .component-wrap-footer-social .box-social a.link:focus-visible svg { fill: var(--bs-turquoise); }
#site-footer .component-wrap-footer-social .box-content { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#site-footer .footer--row .widget { margin: 0; padding: 0; background: none; border: 0; }
#site-footer .footer--row .widget h5 { margin: 0 0 16px; padding-top: 6px; font-family: var(--bs-font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #FFFFFF; }
#site-footer .bs-ft-list { list-style: none; margin: 0; padding: 0; }
#site-footer .bs-ft-list li { margin: 0; padding: 0; }
#site-footer .bs-ft-list a { display: inline-block; padding: 5px 0; font-size: 15.5px; line-height: 1.45; color: var(--bs-on-dark-muted); text-decoration: none; transition: color .15s var(--bs-ease); }
#site-footer .bs-ft-list a:hover,
#site-footer .bs-ft-list a:focus-visible { color: var(--bs-turquoise); }

#site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
#site-footer .builder-item--copyright_html { --fontsize: 13.5px; --fontweight: 500; }
#site-footer .builder-item--copyright_html p { margin: 0; color: var(--bs-on-dark-muted); }

@media (max-width: 960px) {
	#site-footer .builder-item--footer_html1 { --margin: 0 0 16px 0; }
	#site-footer .bs-ft-list a { padding: 7px 0; font-size: 15px; }
}
@media (max-width: 400px) {
	#site-footer .footer-top-inner .row { column-gap: 8px; }
	#site-footer .bs-ft-list a { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------
   Hero's met foto (homepage): leesbaarheid op widescreen – gradient i.p.v. vlakke overlay,
   zodat de tekstzone links altijd rustig is en de foto rechts zichtbaar blijft.
   --------------------------------------------------------------------- */
.e-con#top::before,
.e-con#contact::before {
	background-image: linear-gradient(90deg, rgba(28, 32, 34, .92) 0%, rgba(28, 32, 34, .82) 42%, rgba(28, 32, 34, .55) 70%, rgba(28, 32, 34, .35) 100%);
	background-color: transparent;
	opacity: 1;
	z-index: 0;
}
.e-con#top > .elementor-element,
.e-con#contact > .elementor-element { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.e-con#top::before,
	.e-con#contact::before { background-image: linear-gradient(180deg, rgba(28, 32, 34, .8) 0%, rgba(28, 32, 34, .86) 100%); }
}
#site-footer .builder-item--logo-footer .site-logo { margin-bottom: 10px; }