/* ============================================================
Regelmiek - Custom stylesheet
Laadt na Bootstrap 5 en Bootstrap Icons
============================================================ */

:root {
--rm-ink:       #1f2a37;
--rm-teal:      #14655e;
--rm-teal-dark: #0e4a45;
--rm-sand:      #f6f1e7;
--rm-cream:     #fbf8f2;
--rm-gold:      #c89a4b;
--bs-body-line-height: 1.65;
}

.logo-name:after {
content: ".";
color: var(--rm-gold);	
}
/* ── Basis ── */
body {
font-family: 'Open Sans', system-ui, sans-serif;
color: var(--rm-ink);
background: var(--rm-cream);
}
.lead { font-weight: 400; }
.lead-light { font-weight: 300; }
h1, h2, h3, .brand-serif {
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: -0.01em;
}

/* ── Navigatie ── */
.navbar {
	transition: all .3s ease;
	background: transparent;
	padding: 1.1rem 0;
}
.navbar.nav-scrolled,
.navbar:has(.show, .collapsing) {
	background: rgba(251, 248, 242, .95);
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 24px rgba(20, 40, 60, .06);

}
.navbar.nav-scrolled {
	padding: .55rem 0;
}
.navbar-brand {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--rm-ink) !important;
}

.nav-link { color: var(--rm-ink) !important; font-weight: 500; }
.nav-link:hover { color: var(--rm-teal) !important; }

/* ── Hero (homepage) ── */
.hero {
position: relative;
background: linear-gradient(135deg, var(--rm-sand) 0%, #ece3d0 100%);
padding: 9rem 0 6rem;
overflow: hidden;
}
.hero .badge-25 {
display: inline-block;
background: var(--rm-teal);
color: #fff;
font-weight: 600;
padding: .35rem .9rem;
border-radius: 999px;
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.hero h1 {
font-size: clamp(2.2rem, 4.4vw, 3.6rem);
line-height: 1.1;
margin: 1.25rem 0;
}
.hero p.lead { font-size: 1.15rem; color: #455160; max-width: 56ch; }
.hero .hero-img {
border-radius: 18px;
box-shadow: 0 30px 60px -20px rgba(14, 74, 69, .35);
width: 100%;
height: auto;
}

/* ── Pagina-hero (diensten) ── */
.page-hero {
background: linear-gradient(135deg, var(--rm-sand) 0%, #ece3d0 100%);
padding: 8rem 0 4rem;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 1rem 0; }
.page-hero .lead { font-size: 1.15rem; color: #455160; max-width: 62ch; }

/* ── Knoppen ── */
.btn-rm-primary {
background: var(--rm-teal);
color: #fff;
border: none;
padding: .8rem 1.6rem;
border-radius: 999px;
font-weight: 600;
transition: all .2s ease;
}
.btn-rm-primary:hover {
background: var(--rm-teal-dark);
color: #fff;
transform: translateY(-1px);
}
.btn-rm-outline {
background: transparent;
color: var(--rm-ink);
border: 1.5px solid var(--rm-ink);
padding: .75rem 1.5rem;
border-radius: 999px;
font-weight: 600;
}
.btn-rm-outline:hover { background: var(--rm-ink); color: #fff; }

/* ── Secties ── */
section { padding: 5rem 0; }
@media(min-width: 992px) {
section { padding: 6rem 0; }
}

.section-title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .75rem; }
.section-eyebrow {
color: var(--rm-teal);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
font-size: .8rem;
}

/* ── Kaarten ── */
.value-card,
.service-card,
.info-card {
background: #fff;
border-radius: 16px;
padding: 2rem;
height: 100%;
border: 1px solid #ece3d0;
transition: all .25s ease;
}
.value-card:hover,
.service-card:hover,
.info-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 40px -22px rgba(14, 74, 69, .25);
border-color: var(--rm-teal);
}

/* ── Icoon-cirkel ── */
.icon-circle {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--rm-sand);
color: var(--rm-teal);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin-bottom: 1.25rem;
}

/* ── Achtergronden ── */
.bg-sand  { background: var(--rm-sand); }
.bg-ink   { background: var(--rm-ink); color: #fff; }
.bg-ink h2, .bg-ink h3 { color: #fff; }

/* ── Over-foto ── */
.about-img {
border-radius: 18px;
box-shadow: 0 30px 60px -20px rgba(14, 74, 69, .3);
width: 100%;
height: auto;
}

/* ── Checklijst ── */
.check-list { list-style: none; padding-left: 0; }
.check-list li {
padding-left: 1.8rem;
position: relative;
margin-bottom: .65rem;
color: #3a4451;
}
.check-list li::before {
content: "✓";
color: var(--rm-teal);
font-weight: 700;
position: absolute;
left: 0;
top: 0;
}

/* ── CTA-band (contactsectie) ── */
.cta-band {
background: linear-gradient(135deg, var(--rm-teal) 0%, var(--rm-teal-dark) 100%);
color: #fff;
border-radius: 22px;
padding: 3rem;
}
.cta-band li { color: #fff;}
.cta-band a { text-decoration: none; color: #fff; }
.cta-band .btn-rm-primary { background: #fff; color: var(--rm-teal); }
.cta-band .btn-rm-primary:hover { background: var(--rm-gold); color: #fff; }

/* ── Formulier ── */
.form-control,
.form-select {
border-radius: 10px;
border-color: #e2dccd;
padding: .8rem 1rem;
}
.form-control:focus {
border-color: var(--rm-teal);
box-shadow: 0 0 0 .15rem rgba(20, 101, 94, .15);
}

/* ── Footer ── */
footer {
background: var(--rm-ink);
color: #c8cfd9;
padding: 3rem 0 1.5rem;
}
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: var(--rm-gold); }

/* ── Fade-up animatie ── */
.fade-up {
opacity: 0;
transform: translateY(24px);
transition: all .7s ease;
}
.fade-up.is-visible {
opacity: 1;
transform: translateY(0);
}