/* ==========================================================================
   SensatieReizen — Content-/servicepagina's 2025
   Herstyled de bestaande thema-klassen (.banner-inner, .content-block,
   .main-heading, .seperator) zodat alle service-/infopagina's dezelfde
   look & feel krijgen als de rest van de site. Gebruikt :root-vars.
   ========================================================================== */

/* ============================= HERO ============================= */
.banner-inner {
    position: relative; padding: 0 !important;
    background-size: cover !important; background-position: center !important;
    background-color: var(--sr-dark);
}
/* Compacte hoogte (main.css zet 100vh/500px + absolute/table-centrering) */
.banner.banner-inner { height: auto !important; min-height: 0 !important; max-height: none !important; }
.banner.banner-inner .banner-text {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    bottom: auto !important; transform: none !important; height: auto !important; width: 100% !important; display: block !important;
}
.banner.banner-inner .center-text { display: block !important; height: auto !important; vertical-align: baseline !important; }
.banner-inner::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(20,32,56,.5) 0%, rgba(20,32,56,.8) 100%);
}
.banner-inner .banner-text { position: static; }
.banner-inner .center-text { position: relative; z-index: 2; }
.banner-inner .center-text .container { padding-top: 8px !important; padding-bottom: 9px !important; }
.banner-inner h1 {
    color: #fff !important; font-family: 'Montserrat', sans-serif; font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px) !important; letter-spacing: -.4px; margin: 0 0 1px !important; line-height: 1.1 !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.banner-inner .breadcrumbs { margin-top: 1px; }
.banner-inner .breadcrumbs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11px; }
.banner-inner .breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.banner-inner .breadcrumbs li + li::before { content: "/"; opacity: .55; color: #fff; }
.banner-inner .breadcrumbs a, .banner-inner .breadcrumbs span { color: rgba(255,255,255,.85); text-decoration: none; }
.banner-inner .breadcrumbs a:hover { color: var(--sr-green); }

/* ============================= CONTENT ============================= */
#main { background: var(--sr-light); }
.content-block { padding: 36px 0 !important; background: transparent !important; }
.content-heading { text-align: center; margin: 0 auto 6px; max-width: 860px; }
.main-heading { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--sr-dark);
    font-size: clamp(24px, 3vw, 34px); line-height: 1.18; }
.main-subtitle { display: block; color: var(--sr-muted); font-size: 17px; margin-top: 12px; font-weight: 500; }
.seperator { width: 64px; height: 4px; background: var(--sr-green); border-radius: 4px; margin: 20px auto 6px; }

/* Prose-kaart voor service-/infopagina's (content-center) */
.content-block.content-center .container {
    max-width: 900px; background: #fff; border-radius: 16px;
    box-shadow: 0 18px 44px -22px rgba(33,60,101,.26); padding: 44px 48px;
}

/* Leesbare tekst binnen content */
.content-block .container p {
    color: #4a5560; font-family: 'Roboto', sans-serif; font-size: 16.5px; line-height: 1.8; margin: 0 0 12px;
}
.content-block .container p a { color: var(--sr-olive-d); font-weight: 600; }
.content-block .container p a:hover { color: var(--sr-green); }
.content-block .container ul, .content-block .container ol { margin: 0 0 16px; padding-left: 22px; }
.content-block .container li { color: #4a5560; font-family: 'Roboto', sans-serif; font-size: 16.5px; line-height: 1.7; margin-bottom: 8px; }
.content-block .container h2:not(.main-heading),
.content-block .container h3 { font-family: 'Montserrat', sans-serif; color: var(--sr-dark); margin: 28px 0 12px; font-weight: 700; }
.content-block .container h2:not(.main-heading) { color: var(--sr-blue); }

@media (max-width: 640px) {
    .content-block { padding: 38px 0 !important; }
    .content-block.content-center .container { padding: 28px 22px; }
}

/* ============================= CONTACT 2025 (nieuwe opzet) ============================= */
.sr-ct { background: var(--sr-light); padding: 30px 0 56px; font-family: 'Roboto', sans-serif; color: var(--sr-text); }
.sr-ct__container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sr-ct__grid { display: grid; grid-template-columns: 1fr 390px; gap: 30px; align-items: start; }
.sr-ct__card { background: #fff; border-radius: 16px; box-shadow: 0 18px 44px -22px rgba(33,60,101,.24); padding: 30px 32px; margin-bottom: 22px; }
.sr-ct__card h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--sr-dark); font-size: 22px; margin: 0 0 6px; }
.sr-ct__card h3.t { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--sr-dark); font-size: 16px; margin: 0 0 16px; }
.sr-ct__card .lead { color: var(--sr-muted); margin: 0 0 22px; line-height: 1.6; }
.sr-ct__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sr-ct__field { margin-bottom: 16px; }
.sr-ct__field label { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--sr-dark); margin-bottom: 7px; }
.sr-ct__req { color: var(--sr-green); }
.sr-ct__input { width: 100%; border: 1.5px solid #dde5e9; border-radius: 10px; padding: 12px 14px; font-size: 15px; font-family: 'Roboto', sans-serif; outline: none; transition: border .2s, box-shadow .2s; background: #fff; }
.sr-ct__input:focus { border-color: var(--sr-green); box-shadow: 0 0 0 3px rgba(51,189,189,.18); }
textarea.sr-ct__input { min-height: 150px; resize: vertical; }
.sr-ct__salut { display: flex; gap: 10px; }
.sr-ct__salut label { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px solid #dde5e9; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--sr-dark); }
.sr-ct__salut input { accent-color: var(--sr-green); }
.sr-ct__btn { display: inline-flex; align-items: center; gap: 9px; background: var(--sr-green); color: #fff; border: none; cursor: pointer; padding: 14px 32px; border-radius: 50px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; box-shadow: 0 10px 22px -8px rgba(51,189,189,.85); transition: all .2s; }
.sr-ct__btn:hover { background: var(--sr-green-d); transform: translateY(-2px); }
.sr-ct__tile { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid #eef2f4; }
.sr-ct__tile:last-child { border-bottom: none; }
.sr-ct__tile .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(51,189,189,.12); color: var(--sr-olive-d); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.sr-ct__tile h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: var(--sr-dark); margin: 2px 0 4px; }
.sr-ct__tile a { color: var(--sr-blue); font-weight: 600; text-decoration: none; }
.sr-ct__tile a:hover { color: var(--sr-green); }
.sr-ct__tile p, .sr-ct__tile address { margin: 0; color: #4a5560; font-size: 14px; font-style: normal; line-height: 1.55; }
.sr-ct__usps { list-style: none; margin: 0; padding: 0; }
.sr-ct__usps li { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 14.5px; color: var(--sr-dark); font-weight: 500; }
.sr-ct__usps i { color: var(--sr-green); }
.sr-ct__trustbadges { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px; color: var(--sr-muted); }
.sr-ct__map { margin-top: 40px; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px -22px rgba(33,60,101,.24); }
.sr-ct__map iframe { width: 100%; height: 440px; display: block; border: 0; }
.sr-ct__alert { border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: 14.5px; }
.sr-ct__alert--ok { background: #e7f7ee; color: #1b7a44; }
.sr-ct__alert--err { background: #fdecea; color: #b3261e; }
.sr-ct__alert ul { margin: 0; padding-left: 18px; }
@media (max-width: 900px) { .sr-ct__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sr-ct__row { grid-template-columns: 1fr; } .sr-ct__map iframe { height: 320px; } }

/* ============================= CONTACT (oude markup, legacy) ============================= */
.contact-info { margin: 0 0 34px; }
.contact-info .tel { display: inline-flex; align-items: center; gap: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; color: var(--sr-dark); margin-bottom: 8px; border: none !important; padding: 0 !important; }
.contact-info .tel a { color: var(--sr-dark); text-decoration: none; }
.contact-info .tel a:hover { color: var(--sr-green); }
.contact-info .tel [class^="icon-"] { color: var(--sr-green); font-size: 22px; }
.contact-info h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--sr-blue); font-size: 16px; margin: 6px 0; }
.contact-info p { color: #4a5560; margin: 0; }

.contact-form.has-border { border: none !important; padding: 0 !important; }
.contact-form .form-title { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; color: var(--sr-dark); }
.contact-form .form-control { width: 100%; border: 1.5px solid #dde5e9; border-radius: 10px; padding: 12px 14px; font-size: 15px;
    font-family: 'Roboto', sans-serif; outline: none; height: auto; transition: border .2s, box-shadow .2s; background: #fff; }
.contact-form .form-control:focus { border-color: var(--sr-green); box-shadow: 0 0 0 3px rgba(51,189,189,.18); }
.contact-form textarea.form-control { min-height: 150px; resize: vertical; }
.contact-form .btn-white, .contact-form #btn_sent {
    background: var(--sr-green) !important; color: #fff !important; border: none !important; border-radius: 50px !important;
    padding: 14px 32px !important; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; cursor: pointer;
    margin-top: 16px; box-shadow: 0 10px 22px -8px rgba(51,189,189,.85); transition: all .2s;
}
.contact-form .btn-white:hover, .contact-form #btn_sent:hover { background: var(--sr-green-d) !important; transform: translateY(-2px); }
.map-holder { border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px -22px rgba(33,60,101,.28); height: 100%; min-height: 420px; }
.map-holder iframe { width: 100% !important; height: 100% !important; min-height: 420px; display: block; border: 0; }