@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Kameron:wght@700&family=Source+Serif+4:wght@400;700&display=swap');

/* =============================================================================
   1. BASE
   ============================================================================= */

body {
  color: #003163 !important;
  background: #FFFFFF;
  /* Globale tekst: Source Serif 4 Regular */
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
}

a {
  color: #ba4d22;
  text-decoration: none;
}

a:hover {
  color: #003163;
  text-decoration: none;
}

/* =============================================================================
   2. HEADER / NAV
   ============================================================================= */

header {
  background: url("/themes/editiepajot2/images/header.png") no-repeat top center, linear-gradient(to bottom, #F2F5F9, #FFFFFF);
}

.region-header {
  height: 250px;
}

header nav {
  background: #F0F3F5;
  font-size: 18px;
}

header nav sub {
  background: #a3a2a2;
}

/* Menu en buttons: Source Serif 4 Bold */
.navbar a,
button,
.btn {
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
}

header .navbar a {
  color: #003163;
}

header .navbar a:hover {
  color: #ba4d22;
}

.dropdown-item.active,
.media-library-view--widget .view-header a.dropdown-item.is-active,
.dropdown-item:active {
  color: #003163;
  text-decoration: none;
  background-color: #FFD300;
}

/* FIX: was 'header highlighted' and should target the highlighted region/class */
header .region-highlighted {
  margin: auto !important;
  padding: 0;
}

header .region-highlighted {
  background-color: #ba4d22;
  color: #ffffff;
  height: auto;
  align-content: center;
}

header .region-highlighted p {
  margin-bottom: 0;
}

/* =============================================================================
   3. MAIN / CONTENT
   ============================================================================= */

main,
.breadcrumb {
  background: #ecece3;
}

main {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Post titels: Kameron Bold */
main h2 {
  font-family: 'Kameron', serif;
  font-weight: 700;
  color: #ba4d22;
  line-height: 1em;
  font-size: 1.8rem;
}

article.node--type-article img.img-fluid {
  width: 100%;
  margin-bottom: 25px;
}

.view-artikels .group-right .node__links ul.links.inline li,
.view-taxonomy-term .group-right .node__links ul.links.inline li {
  background: #ba4d22;
  border-radius: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
}

.view-artikels .group-right .node__links ul.links.inline li:hover,
.view-taxonomy-term .group-right .node__links ul.links.inline li:hover {
  background: #003163;
}

.view-artikels .group-right .node__links ul.links.inline li a,
.view-taxonomy-term .group-right .node__links ul.links.inline li a {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.2rem;
}

.view-artikels .field--name-field-artikel-gemeenten,
.view-taxonomy-term .field--name-field-artikel-gemeenten {
  display: inline-block;
  background: rgba(186, 77, 34, 1);
  color: #ffffff;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  bottom: 50px;
  left: 0;
}

.view-artikels.view-id-artikels.view-display-id-block_1 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_2 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_3 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_4 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_5 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_6 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_7 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_8 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_9 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_10 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_11 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_12 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_13 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_14 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_15 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_16 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_17 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_18 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_19 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_20 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_21 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_22 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_23 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_24 .views-field-field-artikel-gemeenten,
.view-artikels.view-id-artikels.view-display-id-block_25 .views-field-field-artikel-gemeenten  {
  display: inline-block;
  background: rgba(186, 77, 34, 1);
  color: #ffffff;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  bottom: 40px;
  left: 0;
}

.view-artikels.view-id-artikels.view-display-id-block_1 .views-field-created,
.view-artikels.view-id-artikels.view-display-id-block_2 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_3 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_4 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_5 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_6 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_7 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_8 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_9 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_10 .views-field-created,
.view-artikels.view-id-artikels.view-display-id-block_11 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_12 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_13 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_14 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_15 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_16 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_17 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_18 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_19 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_20 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_21 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_22 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_23 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_24 .views-field-created, 
.view-artikels.view-id-artikels.view-display-id-block_25 .views-field-created {
  margin-top: -20px;
  color: #ba4d22;
}

.view-artikels .field--name-field-artikel-gemeenten .field__item,
.view-taxonomy-term .field--name-field-artikel-gemeenten .field__item {
  display: none;
}

.view-artikels .field--name-field-artikel-gemeenten .field__item:first-child,
.view-taxonomy-term .field--name-field-artikel-gemeenten .field__item:first-child {
  display: block;
}

.view-artikels .field--name-node-post-date,
.view-taxonomy-term .field--name-node-post-date {
  text-align: left;
  position: relative;
  margin-top: 0;
  color: #ba4d22;
}

.order-2 h2,
.order-3 h2 {
  text-align: center;
}

.feed-icon {
  display: none;
}

#block-editiepajot2-globalcounter {
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  margin-bottom: 15px;
}

#block-editiepajot2-views-block-artikels-block-1 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-2 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-3 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-4 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-5 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-6 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-7 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-8 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-9 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-10 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-11 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-12 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-13 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-14 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-15 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-16 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-17 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-18 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-19 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-20 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-21 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-22 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-23 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-24 .views-field-title a,
#block-editiepajot2-views-block-artikels-block-25 .views-field-title a{
  color: #003163 !important;
  font-weight: 200 !important;
}

#block-editiepajot2-views-block-artikels-block-1 .views-field-title a:hover, 
#block-editiepajot2-views-block-artikels-block-2 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-3 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-4 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-5 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-6 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-7 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-8 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-9 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-10 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-11 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-12 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-13 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-14 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-15 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-16 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-17 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-18 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-19 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-20 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-21 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-22 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-23 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-24 .views-field-title a:hover,
#block-editiepajot2-views-block-artikels-block-25 .views-field-title a:hover{
  color: #ba4d22 !important;
}

#block-editiepajot2-views-block-advertenties-block-1 div.view-advertenties.view-id-advertenties.view-display-id-block_1 div.view-content div.views-row div.views-field-field-advertentie-bovenaan div.field-content {
  padding-top: 21px;
  padding-bottom: 21px;
}

#block-editiepajot2-views-block-advertenties-block-2 .views-field-field-advertentie-rechterkolom img,
#block-editiepajot2-views-block-advertenties-block-5 .views-field-field-advertentie-rechterkolom img {
  margin-bottom: 25px;
}

#block-editiepajot2-views-block-advertenties-block-6 {
  margin-top: 25px;
}

.node--view-mode-teaser .group-left .field--name-field-artikel-andere-media + .field--name-field-image {
  display: none;
}

footer.node__meta {
  padding: 0 0;
  margin-bottom: 25px;
}

article.node--type-article .field--name-field-artikel-gemeenten {
  display: inline-block;
  background: rgba(186, 77, 34, 1);
  color: #ffffff;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  bottom: 90px;
  left: 0;
}

article.node--type-article .field--name-field-artikel-gemeenten .field__item {
  display: none;
}

article.node--type-article .field--name-field-artikel-gemeenten .field__item:first-child {
  display: block;
}

article.node--type-article .field--name-field-artikel-fotograaf {
  text-align: center;
  margin-top: -60px;
}

article.node--type-article .field--name-field-artikel-fotograaf p:before {
  content: "© ";
}

article.node--type-article .field--name-field-artikel-terug-nr-gemeente {
  margin-top: 20px;
}

article.node--type-article .field--name-field-artikel-terug-nr-gemeente:before {
  content: "\2190  Terug naar gemeente ";
}

/* =============================================================================
   4. PAGINATION / SEARCH
   ============================================================================= */

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: #003163;
  --bs-pagination-bg: #ffffff;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #ba4d22;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-hover-color: #003163;
  --bs-pagination-hover-bg: #e9ecef;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-color: #003163;
  --bs-pagination-focus-bg: #e9ecef;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 60, 197, 0.25);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: #ba4d22;
  --bs-pagination-active-border-color: #ba4d22;
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #ffffff;
  --bs-pagination-disabled-border-color: #dee2e6;
  display: flex;
  padding-left: 0;
  list-style: none;
}

.pagination .pager__item--last {
  display: none;
}

.path-search a#edit-help-link {
  display: none;
}

.path-search form#search-form {
  margin-bottom: 20px;
}

.path-search .item-list ol {
  padding-left: 0;
}

.path-search .item-list li {
  margin: 0 0 0 0;
  padding: 0;
}

/* =============================================================================
   5. FOOTER
   ============================================================================= */

footer.site-footer {
  background: #ba4d22;
  color: #ffffff;
  font-size: 18px;
}

footer.site-footer nav {
  background: #ba4d22;
}

footer.site-footer a,
footer.site-footer nav a {
  color: #ffffff;
}

footer.site-footer a:hover,
footer.site-footer nav a:hover,
.region-footer-second nav#block-editiepajot2-footer ul li a:hover {
  color: #003163;
}

footer.site-footer a.button {
  background: #ffffff;
  color: #ba4d22;
  border-radius: 45px;
  border: 3px solid;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

footer.site-footer a.button:hover {
  background: #ba4d22;
  color: #003163;
}

/* =============================================================================
   6. RESPONSIVE - XS / MOBILE
   ============================================================================= */

@media (max-width: 768px) {
  header {
    background: none;
  }

  .region-header {
    position: relative;
    background: url(/themes/editiepajot2/images/header.png) no-repeat center center;
    height: 120px;
  }

  .region-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #F2F5F9, #FFFFFF);
    opacity: 0.9;
    pointer-events: none;
  }

  #block-editiepajot2-branding {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  #block-editiepajot2-branding img {
    height: auto;
    margin: 0 1rem 0 0;
    width: 80%;
    z-index: 2;
    position: relative;
    margin-top: 25px;
  }

  header nav.navbar.navbar-expand-lg {
    right: 0;
    position: absolute;
    top: 5px;
    width: 100%;
    padding: 0;
    padding-bottom: 0;
  }

  header nav.navbar.navbar-expand-lg .navbar-toggler {
    text-align: right;
    right: 0;
    position: absolute;
    top: 5px;
    background: none;
    border: 0;
    z-index: 4;
  }

  header nav.navbar.navbar-expand-lg .navbar-collapse {
    z-index: 3;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }

  header nav.navbar .navbar-collapse #block-editiepajot2-search-form {
    padding-bottom: 20px;
  }

  main .view-artikels .ds-2col-fluid,
  main .view-taxonomy-term .ds-2col-fluid {
    display: block;
  }

  main .view-artikels .ds-2col-fluid .group-left,
  main .view-artikels .ds-2col-fluid .group-right,
  main .view-taxonomy-term .ds-2col-fluid .group-left,
  main .view-taxonomy-term .ds-2col-fluid .group-right {
    width: 100% !important;
    float: none !important;
    display: block;
  }

  main .view-artikels .ds-2col-fluid .group-left img,
  main .view-taxonomy-term .ds-2col-fluid .group-left img {
    width: 100%;
    height: auto;
  }

  main .view-artikels .group-right,
  main .view-taxonomy-term .group-right {
    margin-top: -20px;
  }

  main .view-artikels .views-row,
  main .view-taxonomy-term .views-row {
    margin-bottom: 30px;
  }

  .mobile-only {
    display: block;
    margin: 1rem 0;
  }

  .block-views-blockadvertenties-block-3 {
    text-align: center;
  }

  .mobile-only .block-views-blockadvertenties-block-3 h2 {
    display: none;
  }

  .block-views-blockadvertenties-block-3 img {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
  }

  #block-editiepajot2-views-block-artikels-block-1 {
    display: none;
  }

  #block-editiepajot2-brandingvandewebsite img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .region-footer-second ul.nav {
    margin-bottom: 20px;
  }

  .region-sidebar-second {
    display: none;
  }
}

/* =============================================================================
   7. RESPONSIVE - SM
   ============================================================================= */

@media (min-width: 576px) {
  .region-header {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  #block-editiepajot2-branding {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
}

/* =============================================================================
   8. RESPONSIVE - MD
   ============================================================================= */

@media (min-width: 768px) {
  .region-header {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  #block-editiepajot2-branding {
    justify-content: flex-start;
    text-align: left;
  }

  #block-editiepajot2-branding img {
    width: 260px;
    height: auto;
  }

  .mobile-only {
    display: none;
  }

  #block-editiepajot2-views-block-artikels-block-1 {
    display: block;
  }

  .region-sidebar-second {
    display: block;
  }
}

/* =============================================================================
   9. RESPONSIVE - LG
   ============================================================================= */

@media (min-width: 992px) {
  .region-header {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }

  #block-editiepajot2-branding {
    padding: 1rem 2rem;
  }

  #block-editiepajot2-branding img {
    width: 280px;
    height: auto;
  }

  .path-node .field--name-field-artikel-andere-media iframe {
    width: 100%;
  }


  .order-1,
  .order-2,
  .order-3 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .order-1 {
    width: 55% !important;
    padding-left: 0% !important;
    padding-right: 1% !important;
    border-right: 3px solid #003163;
  }

  .order-2 {
    width: 22.5% !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
    border-right: 3px solid #003163;
  }

  .order-3 {
    width: 22.5% !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
  }

}

/* =============================================================================
   10. RESPONSIVE - XL
   ============================================================================= */

@media (min-width: 1200px) {
  .region-header {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 120px;
  }

  #block-editiepajot2-branding {
    gap: 2rem;
  }

  #block-editiepajot2-branding img {
    width: 300px;
    height: auto;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main {
    width: 80%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main nav#block-editiepajot2-main-navigation ul.navbar-nav li.nav-item:first-child {
    padding-right: 1%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main nav#block-editiepajot2-main-navigation ul.navbar-nav li.nav-item {
    padding-left: 1%;
    padding-right: 1%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main nav#block-editiepajot2-main-navigation ul.navbar-nav li.nav-item:last-child {
    padding-left: 1%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-additional {
    width: 18%;
    margin-left: 25px;
  }

  header nav .region-nav-additional form#search-block-form div.form-item {
    width: 100%;
  }

  header nav .region-nav-additional form#search-block-form input.form-search {
    background-color: #FFD300;
    background-image: url('/themes/editiepajot2/images/icons/search.png');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid #FFD300;
    border-radius: 40px;
    color: #003163;
  }

  header nav .region-nav-additional form#search-block-form input#edit-submit,
  header nav .region-nav-additional form#search-block-form input#edit-submit--2,
  .navbar .block-search form .form-actions input#edit-submit,
  .navbar .block-search form .form-actions input.form-submit {
    display: none;
  }

  header .highlighted .region-highlighted {
    min-height: 104px;
  }

  /* Clean Bootstrap 5 compatible 3-column layout */
  main div.container > div.row,
  .path-frontpage main .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .order-1,
  .order-2,
  .order-3 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .order-1 {
    width: 55% !important;
    padding-left: 0% !important;
    padding-right: 1% !important;
    border-right: 3px solid #003163;
  }

  .order-2 {
    width: 22.5% !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
    border-right: 3px solid #003163;
  }

  .order-3 {
    width: 22.5% !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
  }

  .view-artikels .views-row,
  .view-taxonomy-term .views-row {
    margin-bottom: 30px;
  }

  .view-artikels .views-row:last-child,
  .view-taxonomy-term .views-row:last-child {
    margin-bottom: 25px;
  }

  .view-artikels .group-left img,
  .view-taxonomy-term .group-left img {
    padding-right: 5%;
  }

  .view-artikels .group-right .node__links,
  .view-taxonomy-term .group-right .node__links {
    margin-top: 20px;
  }

  #block-editiepajot2-contactinfobottom {
    margin-top: 10px;
  }

  #block-editiepajot2-contactinfobottom a,
#block-editiepajot2-contactinfobottom a:hover{
    text-decoration:none;
  }

  .region-footer-second nav#block-editiepajot2-footer ul {
    list-style: none;
    padding-left: 0;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li {
    list-style: none;
    font-size: 20px;
    font-weight: 700;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li a.dropdown-toggle::after {
    display: none;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li ul li {
    list-style: none;
    font-size: 18px;
    font-weight: 400;
    flex: 1 1 30%;
    box-sizing: border-box;
    height: 30px;
  }

  .footer-bottom {
    margin-top: 25px;
    align-content: center;
    border-top: 3px solid #ffffff;
  }

  .footer-bottom p {
    margin-bottom: 0;
  }
}

  .footer-bottom a,
  .footer-bottom a:hover{
    text-decoration:none;
  }

/* =============================================================================
   11. RESPONSIVE - XXL
   ============================================================================= */

@media (min-width: 1400px) {
  .region-header {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
  }

  #block-editiepajot2-branding {
    padding-left: 0;
  }

  #block-editiepajot2-branding img {
    width: 350px;
    height: auto;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main {
    width: 100%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main nav#block-editiepajot2-main-navigation ul.navbar-nav li.nav-item:first-child {
    padding-right: 1%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main nav#block-editiepajot2-main-navigation ul.navbar-nav li.nav-item {
    padding-left: 1%;
    padding-right: 1%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-main nav#block-editiepajot2-main-navigation ul.navbar-nav li.nav-item:last-child {
    padding-left: 1%;
  }

  header nav div.container.d-flex div#navbarSupportedContent div.region.region-nav-additional {
    width: 18%;
    margin-left: 25px;
  }

  header nav .region-nav-additional form#search-block-form div.form-item {
    width: 100%;
  }

  header nav .region-nav-additional form#search-block-form input.form-search {
    background-color: #FFD300;
    background-image: url('/themes/editiepajot2/images/icons/search.png');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid #FFD300;
    border-radius: 40px;
    color: #003163;
  }

  header nav .region-nav-additional form#search-block-form input#edit-submit,
  .navbar .block-search form .form-actions input#edit-submit {
    display: none;
  }

  header .highlighted .region-highlighted {
    min-height: 104px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .order-1,
  .order-2,
  .order-3 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .order-1 {
    width: 55% !important;
    padding-left: 0% !important;
    padding-right: 1% !important;
    border-right: 3px solid #003163;
  }

  .order-2 {
    width: 22.5% !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
    border-right: 3px solid #003163;
  }

  .order-3 {
    width: 22.5% !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
  }

  .view-artikels .views-row,
  .view-taxonomy-term .views-row {
    margin-bottom: 30px;
  }

  .view-artikels .views-row:last-child,
  .view-taxonomy-term .views-row:last-child {
    margin-bottom: 25px;
  }

  .view-artikels .group-left img,
  .view-taxonomy-term .group-left img {
    padding-right: 5%;
  }

  .view-artikels .group-right .node__links,
  .view-taxonomy-term .group-right .node__links {
    margin-top: 0px;
  }

  #block-editiepajot2-contactinfobottom {
    margin-top: 10px;
  }

  .region-footer-second nav#block-editiepajot2-footer ul {
    list-style: none;
    padding-left: 0;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li {
    list-style: none;
    font-size: 20px;
    font-weight: 700;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li a.dropdown-toggle::after {
    display: none;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .region-footer-second nav#block-editiepajot2-footer ul li ul li {
    list-style: none;
    font-size: 18px;
    font-weight: 400;
    flex: 1 1 30%;
    box-sizing: border-box;
    height: 30px;
  }

  .footer-bottom {
    margin-top: 25px;
    align-content: center;
    border-top: 3px solid #ffffff;
  }

  .footer-bottom p {
    margin-bottom: 0;
  }
}

/* =============================================================================
   12. DRUPAL 11 & BOOTSTRAP 5 LAYOUT FIXES
   ============================================================================= */

/* 1. FORCEER BRUINE TITELS EN VERWIJDER ONDERSTREPINGEN */
main a,
main h2 a,
main h2.node__title a,
main .view-artikels .views-field-title a,
main .views-field-title h2 a,
main .views-field-title a,
.order-1 h2 a,
.order-2 h2 a {
  font-family: 'Kameron', serif !important;
  font-weight: 700 !important;
  color: #ba4d22 !important;
  text-decoration: none !important;
}

main h2 a:hover,
main .view-artikels .views-field-title a:hover,
main .views-field-title a:hover,
.order-1 h2 a:hover,
.order-2 h2 a:hover {
  color: #003163 !important;
  text-decoration: none !important;
}

/* 2. SPECIFIEKE FIX VOOR DE MIDDENKOLOM */
.order-2 .views-field-title a,
.order-2 a {
  font-family: 'Kameron', serif !important;
  font-weight: 700 !important;
  color: #ba4d22 !important;
  text-decoration: none !important;
}

.order-2 .views-field-title a:hover,
.order-2 a:hover {
  color: #003163 !important;
  text-decoration: none !important;
}

/* 3. VERTICALE SCHEIDINGSLIJNEN VOLLEDIG DOORLATEN LOPEN */
@media (min-width: 1200px) {
  main div.container > div.row,
  main .row,
  .path-frontpage main .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .order-1,
  .order-2,
  .order-3 {
    display: flex !important;
    flex-direction: column !important;
  }

  .order-1 {
    border-right: 3px solid #003163 !important;
  }

  .order-2 {
    border-right: 3px solid #003163 !important;
  }
}

/* ==========================================================================
   FIX: images kolom 2 & 3 centreren + betere spacing
   ========================================================================== */

.order-2 img,
.order-3 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  height:auto;
}

.order-2 .field-content,
.order-3 .field-content {
  text-align: center;
}

.order-2,
.order-3 {
  padding-left: 2%;
  padding-right: 2%;
}

/* ==========================================================================
   ARTIKEL BLOKKEN (kolom 1 & 2)
   ========================================================================== */

/* ==========================================================================
   KOLUM 1 – SOFT ARTICLE STYLE (clean krantdesign)
   ========================================================================== */

.order-1 .views-row {
  background: none; /* GEEN card */
  padding: 18px 0;
  margin-bottom: 18px;
  position: relative;
}

/* subtiele scheidingslijn (ingetrokken) */
.order-1 .views-row::after {
  content: "";
  display: block;
  width: 85%;
  height: 1px;
  background: rgba(0, 49, 99, 0.15);
  margin: 18px auto 0 auto;
}

.order-1 .views-row:last-child::after {
  display: none;
}

/* titel spacing */
.order-1 .views-field-title {
  margin-bottom: 6px;
}

/* datum rustiger */
.order-1 .views-field-created {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 6px;
}

/* intro spacing */
.order-1 .views-field-body,
.order-1 .field--name-body {
  margin-bottom: 10px;
}

/* knop beter geïntegreerd */
.order-1 .node__links {
  margin-top: 10px;
}

/* zachte hover */
.order-1 .views-row:hover {
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Hover effect (subtiel, professioneel) */
.view-artikels .views-row:hover,
.view-taxonomy-term .views-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Titel spacing beter */
.views-field-title h2 {
  margin-bottom: 10px;
}

/* Datum + meta iets subtieler */
.views-field-created {
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* Samenvatting spacing */
.views-field-field-artikel-samenvatting,
.field--name-body {
  margin-bottom: 15px;
}

/* Lees meer knop consistent */
.node__links,
.views-field-view-node {
  margin-top: 10px;
}

/* Zorg dat knop onderaan blijft (mooi uitlijnen) */
.view-artikels .views-row,
.view-taxonomy-term .views-row {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.view-artikels .node__links,
.view-taxonomy-term .node__links {
  margin-top: auto;
}

.field--name-field-artikel-gemeenten {
  margin-bottom: 10px;
}

.order-2 .views-row {
  padding: 15px;
}

.order-2 h2 {
  font-size: 1.3rem;
  line-height: 1.2;
}

/* ==========================================================================
   FIX: uniforme intro tekst in kolom 1
   ========================================================================== */

/* ==========================================================================
   FIX: intro enkel voor artikellijst (niet voor gewone pagina's!)
   ========================================================================== */

.order-1 .view-artikels .views-field-body,
.order-1 .view-artikels .field--name-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-1 .views-row {
  display: flex;
  flex-direction: column;
}

.order-1 .view-content {
  display: block;
}

.order-1 .node__links {
  margin-top: auto;
}

/* ==========================================================================
   SUBTIELE SCHEIDING TUSSEN ARTIKELS
   ========================================================================== */

.order-2 .views-row {
  border-bottom: 1px solid rgba(0, 49, 99, 0.15);
  padding-bottom: 20px;
  margin-bottom: 20px;
}


/* ==========================================================================
   MODERNE ARTIKEL SPACING (kolom 1)
   ========================================================================== */

.order-1 .views-row {
  display: flex;
  gap: 20px;
  margin-bottom: 35px;
  align-items: flex-start;
}

.order-1 .views-row {
  padding: 20px 0;
  margin-bottom: 30px;
  position: relative;
}

.order-1 .group-right {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.order-1 .views-field-title {
  margin-bottom: 6px;
}

.order-1 .views-field-created {
  margin-bottom: 6px;
}

.order-1 .views-field-body {
  margin-bottom: 12px;
}
``

.order-1 .node__links {
  margin-top: auto;
}


.order-1 .views-row::after {
  content: "";
  display: block;
  height: 1px;
  width: 60%;
  margin: 25px auto 0 auto;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 49, 99, 0.2),
    transparent
  );
}

.order-1 .views-row:last-child::after {
  display: none;
}

/* laatste artikel geen lijn */
.order-1 .views-row:last-child,
.order-2 .views-row:last-child {
  border-bottom: none;
 margin-bottom: 40px;
}

/* ==========================================================================
   FIX: ruimte onder laatste artikel + pager correct uitlijnen
   ========================================================================== */

/* Zorg voor extra ruimte na laatste artikel */
.order-1 .view-content {
  margin-bottom: 30px;
}


.order-1 .pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.order-1 .pagination li {
  display: inline-block;
}


.order-1 .pagination {
  padding-top: 15px;
  border-top: 1px solid rgba(0, 49, 99, 0.15);
  text-align: center;
}

/* ==========================================================================
   PAGER STYLING (Bootstrap override)
   ========================================================================== */

/* basis pager */
.order-1 .pagination .page-link {
  color: #003163;
  border: 1px solid #ba4d22;
  background-color: #ffffff;
}

/* hover */
.order-1 .pagination .page-link:hover {
  color: #ffffff !important;
  background-color: #ba4d22;
  border-color: #ba4d22;
}

/* actieve pagina */
.order-1 .pagination .page-item.active .page-link {
  color: #ffffff !important;
  background-color: #003163; /* jouw hoofdkleur */
  border-color: #003163;
}

/* focus (bij klikken) */
.order-1 .pagination .page-link:focus {
  box-shadow: none;
}

/* ==========================================================================
   TAXONOMY TITLE – MODERN HEADER
   ========================================================================== */

.path-taxonomy h1.page-title {
  font-family: 'Kameron', serif;
  font-size: 2.2rem;
  color: #003163;
  margin-bottom: 15px;
  position: relative;
}

/* subtiele lijn eronder */
.path-taxonomy h1.page-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ba4d22;
  margin-top: 10px;
}

/* ==========================================================================
   TAXONOMY / PAGE TITLE – PREMIUM NEWS STYLE
   ========================================================================== */

#block-editiepajot2-page-title {
  margin-bottom: 25px;
}

#block-editiepajot2-page-title h1 {
  font-family: 'Kameron', serif;
  font-size: 2.4rem;
  color: #003163;
  margin: 0;
  padding-bottom: 10px;
  position: relative;
}

/* subtiele lijn onder titel */
#block-editiepajot2-page-title h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 4px;
  background: #ba4d22;
}

/* ==========================================================================
   SEARCH AUTOCOMPLETE – VOLLEDIGE FIX (POSITION + DESIGN)
   ========================================================================== */

/* Zorg dat dropdown buiten layout komt */
.ui-autocomplete {
  position: fixed !important;
  top: 180px !important; /* pas aan indien nodig afhankelijk van header */
  left: 50% !important;
  transform: translateX(-50%);
  
  width: 600px;
  max-width: 90vw;

  background: #ffffff;
  border: 2px solid #ba4d22;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  padding: 5px 0;

  z-index: 9999;
  font-family: 'Source Serif 4', serif;
}

/* items */
.ui-menu-item {
  padding: 12px 20px;
  color: #003163;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* laatste item */
.ui-menu-item:last-child {
  border-bottom: none;
}

/* hover en actieve selectie */
.ui-menu-item:hover,
.ui-state-active,
.ui-state-focus {
  background: #ba4d22 !important;
  color: #ffffff !important;
}

/* links binnen autocomplete */
.ui-menu-item a {
  color: inherit;
  text-decoration: none;
}

/* kleine spacing */
.ui-autocomplete {
  margin-top: 8px;
}

/* ==========================================================================
   PAGER – verberg "laatste"
   ========================================================================== */

/* Drupal pager (Bootstrap 5) */
.pagination .pager__item--last,
.pagination .pager__item--last-last,
.pagination li.pager__item--last,
.pagination li.last {
  display: none !important;
}

/* ==========================================================================
   SEARCH HEADER
   ========================================================================== */

.path-zoeken .views-exposed-form {
  max-width: 700px;
  margin-bottom: 40px;
}

.path-zoeken .views-exposed-form input[type="text"] {
  width: 100%;
  padding: 14px 18px;
  font-size: 1.1rem;
  border: 2px solid #ba4d22;
  border-radius: 6px;
}

.path-zoeken .views-exposed-form input[type="text"]:focus {
  border-color: #003163;
  outline: none;
}

/* ==========================================================================
   SEARCH RESULTS → ZELFDE ALS HOMEPAGE
   ========================================================================== */

.path-zoeken .view-zoeken .views-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  align-items: start;
}

/* afbeelding */
.path-zoeken .views-field-field-image img {
  width: 100%;
  border-radius: 4px;
}

/* label (gemeente) */
.path-zoeken .views-field-field-artikel-gemeenten {
  font-weight: bold;
  color: #ba4d22;
  margin-bottom: 5px;
}

/* titel */
.path-zoeken .views-field-title a {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ba4d22;
  text-decoration: none;
}

.path-zoeken .views-field-title a:hover {
  color: #003163;
}

/* datum */
.path-zoeken .views-field-created {
  font-size: 0.85rem;
  color: #666;
}

/* body */
.path-zoeken .views-field-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #003163;
}

/* ==========================================================================
   FIX: advertentie centreren (alleen zoekpagina)
   ========================================================================== */

.path-zoeken .region-banner,
.path-zoeken .block-views-block-advertenties {
  text-align: center;
}

.path-zoeken .region-banner img,
.path-zoeken .block-views-block-advertenties img {
  margin: 0 auto;
  display: block;
}

/* ==========================================================================
   AUTOCOMPLETE — metadata verbergen
   ========================================================================== */

.ui-autocomplete-field-created {
  display: none !important;
}