@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/radius-shadow.css');

/* components */
.btn{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-base);padding:12px 26px;border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;text-transform:lowercase;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.btn:active{transform:scale(0.98)}
.btn-sm{font-size:var(--text-sm);padding:8px 18px}
.btn-primary{background:var(--color-orange);color:#fff;border-color:var(--color-orange)}
.btn-primary:hover{background:var(--color-orange-dark);border-color:var(--color-orange-dark)}
.btn-secondary{background:transparent;color:var(--color-blue);border-color:var(--color-blue)}
.btn-secondary:hover{background:var(--color-blue);color:#fff}
.badge{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-xs);text-transform:lowercase;padding:4px 12px;border-radius:var(--radius-pill);display:inline-block}
.badge-orange{background:#ffe4cf;color:var(--color-orange-dark)}
.badge-blue{background:#dce7f5;color:var(--color-blue)}
.card{background:var(--surface-card);border:var(--border-thin);border-radius:var(--radius-md);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);font-family:var(--font-sans);transition:box-shadow var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--ease-standard)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* hover / focus states (inline styles need the !important override) */
[data-hov="scale"]:hover{transform:scale(1.03)}
[data-hov="orange"]:hover{color:var(--color-orange)!important}
[data-hov="peach"]:hover{background:#fff4ec!important}
[data-hov="orange-dark"]:hover{color:var(--color-orange-dark)!important}
[data-foc="blue"]:focus{border-color:var(--color-blue)!important}

/* page */
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);font-family:var(--font-sans);color:var(--text-body)}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
@keyframes waterDash{to{stroke-dashoffset:-56}}
@keyframes waterY{to{transform:translateY(24px)}}
body{overflow-x:clip}
[data-acc-chev]{transition:transform 150ms ease;transform:rotate(45deg);display:none}
@media (min-width: 761px){
[data-mq="mob-only"]{display:none!important}
}
@media (max-width: 760px){
[data-acc-sum]{cursor:pointer}
[data-acc-chev]{display:block}
[data-acc]:has([data-acc-cb]:not(:checked)) [data-acc-body]{display:none}
[data-acc]:has([data-acc-cb]:checked) [data-acc-chev]{transform:rotate(225deg)}
}
@media (max-width: 1080px){
[data-mq="quickform"]{grid-template-columns:1fr 1fr!important}
[data-mq="q-probleem"],[data-mq="q-actions"],[data-mq="q-foto"]{grid-column:span 2!important}
[data-mq="q-actions"]{justify-content:stretch!important}
[data-mq="q-actions"] a,[data-mq="q-actions"] > button{flex:1;display:flex}
[data-mq="q-actions"] a button,[data-mq="q-actions"] > button{width:100%;justify-content:center}
}
@media (max-width: 760px){
[data-mq="nav"]{display:none!important}
[data-mq="hide-mobile"],[data-mq="desk-only"]{display:none!important}
[data-mq="quickform"]{grid-template-columns:1fr 1fr!important}
[data-mq="q-probleem"],[data-mq="q-actions"],[data-mq="q-foto"]{grid-column:span 2!important}
[data-mq="q-actions"]{justify-content:stretch!important}
[data-mq="q-actions"] a,[data-mq="q-actions"] > button{flex:1;display:flex}
[data-mq="q-actions"] a button,[data-mq="q-actions"] > button{width:100%;justify-content:center}
[data-mq="pipe-wide"]{width:1100px!important;left:-240px!important}
[data-mq="pipe-hero-connect"]{display:none!important}
[data-mq="over-pad"]{padding-top:130px!important}
[data-mq="pipe-flow"]{width:1100px!important;margin-left:-240px!important}
[data-mq="hero-pad"]{padding-bottom:240px!important}
}

/* responsive: tablet header (761-920px) */
@media (max-width: 920px) and (min-width: 761px){
[data-mq="header-bar"]{padding:14px 18px!important;gap:16px!important}
[data-mq="nav"]{gap:14px!important}
}
/* responsive: hide hero pipe where it would clip awkwardly (<1000px) */
@media (max-width: 999px){
[data-mq="pipe-hero-d"]{display:none!important}
}
/* responsive: large screens (>=1500px) - connector pipes scale with viewport, give sections room */
@media (min-width: 1500px){
[data-mq="hero-pad"]{padding-bottom:calc(6.5vw + 30px)!important}
[data-mq="diensten-pad"]{padding-top:calc(6vw + 40px)!important}
[data-mq="over-pad"]{padding-top:calc(6vw + 40px)!important}
[data-mq="cta-pad"]{padding-bottom:calc(7vw + 30px)!important}
}