/* BeSharp – Enterprise Software Onderhandelingen
   Full-bleed + hover-states + responsive. */

.bsl-root { box-sizing: border-box; }
.bsl-root *, .bsl-root *::before, .bsl-root *::after { box-sizing: border-box; }
.bsl-root a { text-decoration: none; }

/* Soepel scrollen naar de aanpak-sectie (alleen op deze pagina, want
   deze stylesheet wordt enkel hier geladen). De scroll-margin zorgt dat
   de titel niet achter de sticky header van Graviton verdwijnt. */
html { scroll-behavior: smooth; }
#besharp-aanpak { scroll-margin-top: 100px; }

/* Breek elke sectie uit de container van het thema naar volle breedte.
   Werkt binnen de meeste thema-wrappers zonder horizontale scrollbar. */
.bsl-section {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Graviton-thema: grote padding boven/onder de content-wrapper weghalen
   zodat de hero direct onder de header begint. */
.besharp-landing-page #pxl-main,
body.besharp-landing-page #pxl-main {
	padding: 0 !important;
	min-height: 0 !important;
}

/* Graviton forceert kop-kleuren met !important; de titels erven hun
   kleur en vallen daardoor terug op de donkere themakleur. Hier zetten
   we de bedoelde kleuren expliciet terug (per achtergrond). */
.bsl-root h1,
.bsl-root h2,
.bsl-root h3 {
	color: #0C1F38 !important; /* standaard: donker op lichte secties */
}
/* Lichte koppen op de donkere (navy) secties */
.bsl-root [data-r="hero-h1"] { color: #fff !important; }
.bsl-root [data-r="hero-h1"] span { color: #FF5900 !important; }
.bsl-root [data-r="cta"] h2 { color: #fff !important; }
.bsl-root [data-r="threecol"] > div:first-child h3 { color: #fff !important; }

/* ---- Hover-states (vervangen de Claude Design style-hover attributen) ---- */
.bsl-root .bsl-btn-primary { transition: background-color .15s ease; }
.bsl-root .bsl-btn-primary:hover { background: #E64F00 !important; }

.bsl-root .bsl-btn-outline { transition: border-color .15s ease; }
.bsl-root .bsl-btn-outline:hover { border-color: #fff !important; }

.bsl-root .bsl-link-arrow { transition: gap .15s ease; }
.bsl-root .bsl-link-arrow:hover { gap: 12px !important; }

.bsl-root .bsl-news-link { transition: opacity .15s ease; }
.bsl-root .bsl-news-link:hover { opacity: 0.7; }

/* ---- FAQ accordeon (<details>/<summary>) ---- */
.bsl-root .bsl-faq { background: #fff; border: 1px solid #E7EBF0; border-radius: 10px; box-shadow: 0 2px 12px rgba(12,31,56,0.04); overflow: hidden; }
.bsl-root .bsl-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 20px 24px; font-size: 17px; font-weight: 700; color: #0C1F38; }
.bsl-root .bsl-faq-q::-webkit-details-marker { display: none; }
.bsl-root .bsl-faq-ic { flex: 0 0 auto; color: #FF5900; transition: transform .2s ease; }
.bsl-root .bsl-faq[open] .bsl-faq-ic { transform: rotate(180deg); }
.bsl-root .bsl-faq-a { padding: 0 24px 22px; }
.bsl-root .bsl-faq-a p:last-child { margin-bottom: 0; }

/* ---- Logobalk (marquee) ---- */
@keyframes besharp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bsl-root .bsl-logo-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: besharp-marquee 48s linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.bsl-root .bsl-logo-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ---- Responsive (desktop is 1:1 boven 1024px) ---- */
@media (max-width: 1024px) {
	.bsl-root [data-r="hero"] { flex-direction: column !important; gap: 40px !important; }
	.bsl-root [data-r="hero-col"] { flex: 1 1 100% !important; max-width: 100% !important; }
	.bsl-root [data-r="hero-col"] > div { margin-right: 0 !important; }
	.bsl-root [data-r="hero-h1"] { font-size: 40px !important; }
	.bsl-root [data-r="trust"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
	.bsl-root [data-r="callout"] { flex-direction: column !important; gap: 32px !important; padding: 36px 32px !important; }
	.bsl-root [data-r="callout-col"] { flex: 1 1 100% !important; }
	.bsl-root [data-r="steps"] { grid-template-columns: 1fr 1fr !important; row-gap: 48px !important; }
	.bsl-root [data-r="steps-line"] { display: none !important; }
	.bsl-root [data-r="vendors"] { grid-template-columns: 1fr 1fr !important; }
	.bsl-root [data-r="threecol"] { grid-template-columns: 1fr !important; }
	.bsl-root [data-r="cta"] { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; padding: 36px 32px !important; }
}
@media (max-width: 640px) {
	.bsl-root [data-r="hero-h1"] { font-size: 32px !important; }
	.bsl-root [data-r="trust"] { grid-template-columns: 1fr !important; }
	.bsl-root [data-r="steps"] { grid-template-columns: 1fr !important; }
	.bsl-root [data-r="vendors"] { grid-template-columns: 1fr !important; }
	.bsl-root [data-r="cta-btns"] { flex-direction: column !important; width: 100% !important; }
	.bsl-root [data-r="cta-btns"] > a { width: 100% !important; justify-content: center !important; }
	.bsl-root [data-r="hero-btns"] { flex-direction: column !important; }
	.bsl-root [data-r="hero-btns"] > a { width: 100% !important; justify-content: center !important; }
}