/* ============================================================
   NOTARIAAT STATENHAGHE ? custom.css
   ============================================================ */

/* Google Fonts ? Poppins (Regular 400, Medium 500, SemiBold 600, Bold 700) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Brand colours */
  --statenhage-blue:        #435394;
  --statenhage-blue-hover:  #003B5C;
  --statenhage-light-blue:  #6781E8;
  --statenhage-light-gray:  #EAECF0;
  --statenhage-warm-gray:   #E9EFED;
  --statenhage-steun:       #C1B3A8;  /* support / accent */
  --statenhage-textcolor:   #4D4D4D;
  --statenhage-white:       #FFFFFF;

  /* Typography scale */
  --font-base:      'Poppins', sans-serif;

  /* Font sizes */
  --fs-body:        18px;
  --fs-nav:         18px;
  --fs-body-card:   16px;
  --fs-card-title:  18px;
  --fs-kopje:       24px;
  --fs-h2:          34px;
  --fs-small:       14px;
  --fs-nav-small:   14px;

  /* Line heights */
  --lh-body:        30px;
  --lh-h2:          48px;
  --lh-kopje:       30px;
  --lh-card-title:  22px;
  --lh-small:       20px;
  --lh-nav-small:   25px;
}


/* ============================================================
   2. BASE ? Body & Typography
   ============================================================ */
body {
  font-family:                var(--font-base);
  font-size:                  var(--fs-body);
  font-weight:                400;
  line-height:                var(--lh-body);
  color:                      var(--statenhage-textcolor);
  -webkit-font-smoothing:     antialiased;
  -moz-osx-font-smoothing:    grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  color:       var(--statenhage-blue);
}

h2 {
  font-size:      var(--fs-h2);
  font-weight:    700;
  line-height:    var(--lh-h2);
  letter-spacing: 0.09765625px;
}

h3 {
  font-size:   var(--fs-kopje);
  font-weight: 400;
  line-height: var(--lh-kopje);
}

a {
  color: var(--statenhage-blue);
}

a:hover {
  color: var(--statenhage-blue-hover);
}


/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn-statenhage {
  display:          inline-block;
  background-color: var(--statenhage-blue);
  color:            var(--statenhage-white);
  font-family:      var(--font-base);
  font-size:        var(--fs-body);
  font-weight:      400;
  line-height:      var(--lh-body);
  padding:          5px 15px;
  border:           none;
  text-decoration:  none;
  transition:       background-color 0.2s ease;
}

.btn-statenhage:hover,
.btn-statenhage:focus {
  background-color: var(--statenhage-blue-hover);
  color:            var(--statenhage-white);
  text-decoration:  none;
}


/* ============================================================
   4. IMAGE UTILITIES
   ============================================================ */
.bg-image {
  background-repeat:   no-repeat;
  background-position: center center;
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}


/* ============================================================
   5. HERO SECTION
   ============================================================ */
.hero-section {
  height:   500px;
  overflow: hidden;
}

.hero-section .bg-image {
  height: 100%;
}

@media (max-width: 1399.98px) {
  .hero-section { height: 320px; }
}

@media (max-width: 767.98px) {
  .hero-section { height: 260px; }
}


/* ============================================================
   6. CARD STYLES
   ============================================================ */
.card-statenhage {
  background-color: var(--statenhage-light-gray);
}

.card-statenhage .card-kop {
  font-family:  var(--font-base);
  font-size:    var(--fs-card-title);
  font-weight:  500;
  line-height:  var(--lh-card-title);
  color:        var(--statenhage-blue);
}

.card-statenhage .card-body-text {
  font-family:  var(--font-base);
  font-size:    var(--fs-small);
  font-weight:  400;
  line-height:  var(--lh-small);
  color:        var(--statenhage-textcolor);
}


/* ============================================================
   7. BACKGROUND COLOUR UTILITIES
   ============================================================ */
.bg-statenhage-blue      { background-color: var(--statenhage-blue) !important; }
.bg-statenhage-light-gray { background-color: var(--statenhage-light-gray) !important; }
.bg-statenhage-warm-gray  { background-color: var(--statenhage-warm-gray) !important; }
.bg-statenhage-steun      { background-color: var(--statenhage-steun) !important; }

.text-statenhage-blue     { color: var(--statenhage-blue) !important; }
.text-statenhage-light    { color: var(--statenhage-white) !important; }


/* ============================================================
   8. ACCESSIBILITY ? Focus visible
   ============================================================ */
:focus-visible {
  outline:        3px solid var(--statenhage-blue);
  outline-offset: 3px;
}


/* ============================================================
   9. NAVBAR ? Two-tier layout
   ============================================================ */

/* Top info bar (white) */
.navbar-topbar {
  background-color: var(--statenhage-white);
  font-size:        var(--fs-nav-small);
  line-height:      var(--lh-nav-small);
  color:            var(--statenhage-blue);
  padding:          22px 0;
}

.navbar-topbar a {
  color: var(--statenhage-blue);
  text-decoration: none;
}

.navbar-topbar a:hover {
  color: var(--statenhage-blue-hover);
}

/* Button overrides ? must come after .navbar-topbar a to win specificity */
.navbar-topbar .btn-statenhage,
.navbar-topbar .btn-statenhage:hover,
.navbar-topbar .btn-statenhage:focus {
  color: var(--statenhage-white);
}

/* Main nav bar (dark blue) */
.navbar-statenhage {
  background-color: var(--statenhage-blue-hover);  /* #003B5C */
}

.navbar-statenhage .nav-link {
  color:       var(--statenhage-white);
  font-size:   var(--fs-nav);
  line-height: var(--lh-body);
  padding:     8px 0;
  transition:  opacity 0.15s ease;
}

.navbar-statenhage .nav-link:hover,
.navbar-statenhage .nav-link.active {
  color:       var(--statenhage-white);
  font-weight: 700;
  opacity:     1;
}

.navbar-statenhage .navbar-nav {
  gap: 80px;
}

/* Hamburger icon colour on dark background */
.navbar-statenhage .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-statenhage .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Mobile overlay (hamburger active up to xxl) */
@media (max-width: 1399.98px) {
  .navbar-statenhage .navbar-collapse.collapsing,
  .navbar-statenhage .navbar-collapse.show {
    position:        fixed;
    inset:           0;
    width:           100vw !important;
    height:          100dvh !important;
    z-index:         1055;
    background:      var(--statenhage-blue-hover);
    display:         flex !important;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    overflow-y:      auto;
    padding:         0 !important;
    transition:      opacity .22s ease !important;
  }
  .navbar-statenhage .navbar-collapse.collapsing { opacity: 0; }
  .navbar-statenhage .navbar-collapse.show       { opacity: 1; }
  .navbar-statenhage .navbar-collapse .navbar-nav {
    align-items: center;
    gap:         8px !important;
    padding:     0;
  }
  .navbar-statenhage .navbar-collapse .nav-link {
    font-size:   26px;
    padding:     10px 0 !important;
    text-align:  center;
  }
  .nav-overlay-close {
    position:   absolute;
    top:        20px;
    right:      20px;
    background: none;
    border:     none;
    font-size:  28px;
    color:      var(--statenhage-white);
    cursor:     pointer;
    padding:    8px;
    transition: color .15s;
  }
  .nav-overlay-close:hover { color: var(--statenhage-light-blue); }
  .nav-overlay-logo {
    position:  absolute;
    top:       16px;
    left:      50%;
    transform: translateX(-50%);
  }
  .nav-overlay-logo img {
    min-width: 280px;
    max-width: 90%;
    height:    auto;
  }
}


/* ============================================================
   10. HERO / HEADER SECTION
   ============================================================ */

header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Two-column hero: photo left + text right on blue */
.section-header {
  background-color: var(--statenhage-blue);
  overflow:         hidden;
}

.section-header .header-photo {
  height:     500px;
  overflow:   hidden;
}

.section-header .header-photo .bg-image {
  height: 100%;
}

.section-header .header-content {
  color:          var(--statenhage-white);
  padding-top:    80px;
  padding-bottom: 80px;
}

.section-header .header-content h1 {
  color:          var(--statenhage-white);
  font-size:      var(--fs-h2);
  font-weight:    700;
  line-height:    var(--lh-h2);
  letter-spacing: 0.098px;
}

.section-header .header-content p {
  color: var(--statenhage-white);
}

.section-header .header-content .contact-link,
.section-header .header-content .contact-link:hover {
  color:           var(--statenhage-white);
  font-weight:     600;
  text-decoration: none;
}

/* Hero tagline ? rendered lowercase via CSS */
.hero-subtitle {
  text-transform: lowercase;
}

@media (max-width: 991.98px) {
  .section-header .header-photo { height: 320px; }
}

@media (max-width: 767.98px) {
  .section-header .header-photo  { height: 220px; }
  .section-header .header-content { padding: 40px 0 80px; }
}


/* ============================================================
   10b. SUB-PAGE HERO ? full-width photo strip
   ============================================================ */
.section-subpage-hero {
  height:   250px;
  overflow: hidden;
}

.section-subpage-hero .bg-image {
  height: 100%;
}

@media (max-width: 767.98px) {
  .section-subpage-hero { height: 160px; }
}


/* ============================================================
   10c. PAGE CONTENT BLOCK
   ============================================================ */
.section-page-content {
  background-color: var(--statenhage-white);
}

/* Max-width matches Figma 962px content column */
.section-page-content .content-inner {
  max-width: 962px;
}

/* H3 subheadings inside page content ? bold, blue, body-size (18px) */
.section-page-content h3 {
  font-size:   var(--fs-body);    /* 18px */
  font-weight: 700;
  line-height: var(--lh-body);   /* 30px */
  color:       var(--statenhage-blue);
  margin-bottom: 0;
}

/* Inline links inside page content use light-blue accent */
.section-page-content a:not(.btn-statenhage) {
  color: var(--statenhage-blue);
}

.section-page-content a:not(.btn-statenhage):hover {
  color: var(--statenhage-blue-hover);
}

/* Bullet list */
.section-page-content ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.section-page-content ul li {
  color:       var(--statenhage-textcolor);
  line-height: var(--lh-body);
  margin-bottom: 0;
}


/* ============================================================
   11. SECTION ? INTRO
   ============================================================ */
.section-intro {
  background-color: var(--statenhage-white);
}

.section-intro h2 {
  color: var(--statenhage-blue);
}

/* Inline service links use the light-blue accent colour */
.section-intro p a {
  color: var(--statenhage-light-blue);
}

.section-intro p a:hover {
  color: var(--statenhage-blue-hover);
}


/* ============================================================
   12. SECTION ? CARDS (steun/beige background)
   ============================================================ */
.section-cards {
  background-color: var(--statenhage-steun);  /* #C1B3A8 */
}

/* Logo invert filter ? use on dark backgrounds (footer, mobile nav) */
.logo-white {
  filter: brightness(0) invert(1);
}

/* 40px column gutter between cards */
.section-cards .row {
  --bs-gutter-x: 40px;
}

/* Each kaartje card ? Bootstrap card resets */
.kaartje {
  background-color: var(--statenhage-light-gray);
  border:           none;
  border-radius:    0;
}

.kaartje .kaartje-photo {
  height:   207px;
  overflow: hidden;
}

.kaartje .kaartje-photo .bg-image {
  height: 100%;
}

.kaartje .card-body {
  padding: 40px 40px 40px;
  gap:     16px;
  display: flex;
  flex-direction: column;
}

.kaartje .kaartje-title {
  font-size:   var(--fs-card-title);
  font-weight: 500;
  line-height: var(--lh-card-title);
  color:       var(--statenhage-blue);
  margin:      0;
}

.kaartje .kaartje-text {
  font-size:   var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-small);
  color:       var(--statenhage-textcolor);
  margin:      0;
  flex:        1;
}

.kaartje .kaartje-title a {
  color:           var(--statenhage-blue);
  text-decoration: none;
}

.kaartje .kaartje-title a:hover {
  text-decoration: underline;
}

/* card-footer ? remove Bootstrap defaults, align button to bottom */
.kaartje .card-footer {
  background:  transparent;
  border-top:  none;
  padding:     0 40px 40px;
}


/* ============================================================
   13. SECTION ? VIND ONS HIER / CONTACT FORM
   ============================================================ */
.section-contact {
  background-color: var(--statenhage-white);
}

/* 160px visible gap between the two contact columns (80px each side via gutter split) */
.section-contact .row {
  --bs-gutter-x: 160px;
}

/* Vertical divider line between columns (desktop only) */
@media (min-width: 992px) {
  .section-contact .col-form {
    border-left: 1px solid var(--statenhage-steun);
  }
}

/* Square checkbox to match design */
.form-statenhage .form-check-input {
  border-radius: 0;
  border-color:  var(--statenhage-steun);
}

.form-statenhage .form-check-input:checked {
  background-color: var(--statenhage-blue);
  border-color:     var(--statenhage-blue);
}

/* Form inputs with steun border */
.form-statenhage .form-control {
  border:        1px solid var(--statenhage-steun);
  border-radius: 0;
  font-family:   var(--font-base);
  font-size:     var(--fs-body);
  color:         var(--statenhage-textcolor);
}

.form-statenhage .form-control::placeholder {
  font-size: 15px;
  color:     var(--statenhage-textcolor);
  opacity:   0.6;
}

.form-statenhage .form-control:focus {
  border-color: var(--statenhage-blue);
  box-shadow:   0 0 0 3px rgba(67, 83, 148, 0.15);
}

.form-statenhage label {
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--statenhage-textcolor);
  margin-bottom: 2px;
}

.form-statenhage label .required-star {
  color: var(--statenhage-light-blue);
  margin-left: 2px;
}

/* Contact info icons (Material icons used in design) */
.contact-icon {
  width:  48px;
  height: 48px;
  flex-shrink: 0;
}

.contact-info-label {
  font-weight: 700;
  color:       var(--statenhage-blue);
}


/* ============================================================
   14. FOOTER
   ============================================================ */
.footer-statenhage {
  background-color: var(--statenhage-blue);
  color:            var(--statenhage-white);
  font-size:        var(--fs-body);
  line-height:      var(--lh-body);
}

.footer-statenhage address {
  font-style: normal;
}

.footer-statenhage ul li {
  margin-bottom: 4px;
}

.footer-statenhage a {
  color:           var(--statenhage-white);
  text-decoration: none;
}

.footer-statenhage a:hover {
  text-decoration: underline;
}

.footer-statenhage .footer-title {
  font-weight: 700;
}

.footer-copyright {
  background-color: var(--statenhage-blue-hover);  /* #003B5C */
  color:            var(--statenhage-white);
  font-size:        var(--fs-body);
  line-height:      var(--lh-body);
  padding:          8px 0;
}

.footer-copyright a {
  color:           var(--statenhage-white);
  text-decoration: none;
}

.footer-copyright a:hover {
  text-decoration: underline;
}


/* ============================================================
   15. ACCESSIBILITY ? Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration:        .01ms !important;
    animation-duration:         .01ms !important;
    animation-iteration-count:  1 !important;
    scroll-behavior:            auto !important;
  }
}

/* leftovers */
@media (min-width: 1200px) {
    .container {
        max-width: 1178px;
    }
}

@media (min-width: 1400px) {
    .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px;
    }
}

.gap-28 {
  gap: 28px !important;
}

.gap-40 {
  gap: 40px !important;
}

.dropdown-menu{border-radius: 0px !important;}

/* intro */
.section-intro .container {
  max-width: 962px !important;
}
.section-intro.full .container {
  max-width: 1178px !important;
}

/* cards */
.section-cards .container-lg {
  max-width: 1178px !important;
}

.nav-link.show {
    color: #fff !important; font-weight: 700 !important;
}

.section-intro-text p, .section-intro-text h2, .section-intro-text h3 { margin-bottom: 24px; }
.section-intro-text ul { margin-bottom: 40px; }
.section-intro-text b, .section-intro-text strong { color: var(--statenhage-blue); font-weight: 600; }

.footer-copyright { font-size: 16px; line-height: 20px; }
.footer-statenhage .logo-white { margin-left: -12px; }
/* mobile */
@media (max-width: 1024px) {
  .footer-statenhage .logo-white { margin-left: 0; max-width: 100%; height: auto; }
  .section-contact .row, .section-cards .row { --bs-gutter-x: 20px; }
  .section-cards .row { --bs-gutter-y: 40px; }
}

.list-unstyled ul { padding-left: 0; list-style: none; }