/*
Theme Name:   Mijnkerk Child
Template:     mijnkerk
Version: 	  1.0
*/


/*---ALGEMEEN---*/

/*---FONT---*/
.boventitel {font-family: 'Montserrat', Open Sans !important; font-size: var(--l-text); color:  var(--hoofdkleur-2) !important; margin-bottom:-5px;}
/*---HEADER---*/

/*---MENU---*/
#hoofdmenu-list > li > a > .pagina-icoon {display: none;}
.pagina-icoon {width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; color: var(--hoofdkleur-2); font-size: 22px;}
.sub-menu li:hover {background: var(--achtergrondkleur-1);}
header.vertikaal_submenu #hoofdmenu-list .sub-menu .menu-item a {padding-left: 12px; padding-right: 12px; grid-gap: 12px; }
#hoofdmenu-list.menu-list .menu-item .sub-menu {padding: 0px !important;}
header.vertikaal_submenu #hoofdmenu-list .sub-menu .menu-item:first-child a {padding-top: 5px;}
header.vertikaal_submenu #hoofdmenu-list .sub-menu .menu-item:last-child a {padding-bottom: 5px;}
/*---HOME---*/
.home .hero .section-inner-wrap {padding-bottom: 100px;}
.home .hero + section.verwijzingen {margin-top: -40px; position: relative; z-index: 2; background-color: transparent;}
.home .hero + section.verwijzingen .section-inner-wrap {padding-top: 40px; background-color: #ffffff; border-radius: 40px;}


/*---PAGE---*/
.ondertitel {font-family: 'Montserrat', Open Sans !important;  color:  var(--hoofdkleur-2) !important;}
/*---SINGLE---*/

/*---PAGINABLOKKEN---*/

/**hero**/
.hero .full-width {max-width: 800px;}

/**tekst en afbeeldingen**/
section.tekst-afbeelding:not(.hero) .tekst-inner {background-color: #ffffff;}
section.tekst-afbeelding:not(.hero) h3 {color: var(--hoofdkleur-1);}

@media (min-width: 992px) {section.tekst-afbeelding .slider .flickity-viewport {height: 100% !important;}}

section.tekst-afbeelding:not(.hero) .square .tekst {display: flex; justify-content: center; }
section.tekst-afbeelding:not(.hero) .square .tekst-inner {background-color: transparent;}
section.tekst-afbeelding .square .media::before, section.tekst-afbeelding .square .media, section.tekst-afbeelding .square .media img {width: 100% !important;}
section.tekst-afbeelding .collumns-2.boven {max-width: 960px;}
.page-id-13 section.tekst-afbeelding:not(.hero) .tekst-inner {background: transparent;}
.viering-buttons .button {background: #ffffff !important;}
.page-id-13  .viering {background: #ffffff;}
/**carousel**/

/**overzicht**/

/**page breaker**/

/**verwijzingen**/

.verwijzingen.voor .verwijzing-columns {    display: grid;    grid-template-columns: repeat(2, 1fr);    grid-gap: clamp(20px, 5vmin, 50px);    width: 100%;}
@media (max-width: 768px) {.verwijzingen.voor .verwijzing-columns {grid-template-columns: repeat(1, 1fr);}}

.verwijzingen h2, .verwijzingen .boventitel {text-align: center; width: 100%; display: block}
section.verwijzingen h4 {color: var(--hoofdkleur-2); font-weight: 400;}
.verwijzingen-tekst > h4:first-child {margin-top: -20px;}
section.verwijzingen:not(.voor)  .tekst-container h4 {color: #ffffff !important; font-weight: 600;}
section.verwijzingen.voor .section-inner-wrap img + .tekst-container {width: calc(100% - 100px);}
section.verwijzingen.voor  .tekst-container .verwijzing-tekst {font-size: 16px;}
section.verwijzingen.voor  .tekst-container h4 {font-size: 20px;}
section.verwijzingen.voor   a {justify-content: flex-start; width: 100%;}
section.verwijzingen.voor .section-inner-wrap img {width: 100px;}

section.verwijzingen:not(.voor) .verwijzingen-tekst {max-width: 800px; text-align:center; margin: auto;}
/* Grid (jij hebt dit waarschijnlijk al, maar ter volledigheid) */
section.verwijzingen:not(.voor) .verwijzing-columns {
  display: grid;
  gap: 32px;
}

section.verwijzingen:not(.voor)  .verwijzing-columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}





@media (max-width: 768px) {
#blok_6899f1051733e .tekst-container {
  padding-bottom: 100px;
}

#blok_698b34d0eb6e3 .collumns-2 {
  flex-direction: column-reverse;
}

section.tekst-afbeelding .collumns-2 {
  display: flex;
  flex-direction: column;
}

.verwijzing-columns-4, .verwijzing-columns-7, .verwijzing-columns-8, .verwijzing-columns-10, .verwijzing-columns-11, .verwijzing-columns-12, .verwijzing-columns-13 {
  grid-template-columns: repeat(2, 1fr);
}

.viering.liturgischedag  {
  font-size: 20px ;
}

#blok_6980c5aa93f79 .div-block {
  display: block;
}

footer .footer-row-top {
  display: flex;
  flex-direction: column;
}
}

@media (max-width: 500px) {
  .content a:not(.button) {
  overflow-wrap: break-word;
  word-break: break-word;
  }
}

@media (max-width: 414px){
  #blok_6899f1051733e .tekst-container {
  padding-bottom: 50px;
}

.verwijzing-columns-4, .verwijzing-columns-7, .verwijzing-columns-8, .verwijzing-columns-10, .verwijzing-columns-11, .verwijzing-columns-12, .verwijzing-columns-13 {
  grid-template-columns: repeat(1, 1fr);
}

.viering.liturgischedag  {
  font-size: 16px ;
}
}

@media (max-width: 900px) {
  section.verwijzingen:not(.voor)  .verwijzing-columns-3 { grid-template-columns: 1fr; }

}

@media (min-width: 1200px) and (max-width: 1400px) {
    .verwijzing-columns-8 {
          grid-template-columns: repeat(3, 1fr);
    }
}
/*Hexagons*/
/* === Rounded hex mask (SVG path) === */
:root{
  /* Pas dit aan naar smaak */
  --hex-size-2: 620px;
  --hex-size-3: 460px;
  --hex-size-4: 320px;
  --hex-border: 10px;
  --hex-border-color: rgba(255,255,255,0.95); /* of je merk-kleur */
  --hex-shadow: 0 10px 25px rgba(0,0,0,0.18);
  --hex-accent-x: 7%;
  --hex-accent-y: 6%;
  --hex-accent-color: #f5a000;
}
@media (max-width: 1200px){
  :root{
    --hex-size-2: 100%;
    --hex-size-3: 100%;
    --hex-size-4: 100%;

  }
}

/* Het link-blok = de vorm + border (via background + padding) */
section.verwijzingen:not(.voor) .verwijzing-columns a.box-shadow, section.tekst-afbeelding .square .media{
  width: var(--hex-size-3);
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: var(--hex-border);
  background: transparent; /* belangrijk */
  transition: transform .18s ease;
}

section.verwijzingen:not(.voor) .verwijzing-columns a.box-shadow::before, section.tekst-afbeelding .square .media::before{
  content:"";
  position:absolute;
  width: calc(100% - (var(--hex-border) * 2)) !important;
  height: calc(100% - (var(--hex-border) * 2)) !important;
  inset: 0;
  transform: translate(var(--hex-accent-x), var(--hex-accent-y));
  background: var(--hex-accent-color);
  z-index: 0;


  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<path d='M6 50 C6 48 6.6 46 7.6 44.3 L25.2 14 C26.9 11 30 9.2 33.4 9.2 H66.6 C70 9.2 73.1 11 74.8 14 L92.4 44.3 C93.4 46 94 48 94 50 C94 52 93.4 54 92.4 55.7 L74.8 86 C73.1 89 70 90.8 66.6 90.8 H33.4 C30 90.8 26.9 89 25.2 86 L7.6 55.7 C6.6 54 6 52 6 50 Z' fill='white'/>\
</svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<path d='M6 50 C6 48 6.6 46 7.6 44.3 L25.2 14 C26.9 11 30 9.2 33.4 9.2 H66.6 C70 9.2 73.1 11 74.8 14 L92.4 44.3 C93.4 46 94 48 94 50 C94 52 93.4 54 92.4 55.7 L74.8 86 C73.1 89 70 90.8 66.6 90.8 H33.4 C30 90.8 26.9 89 25.2 86 L7.6 55.7 C6.6 54 6 52 6 50 Z' fill='white'/>\
</svg>") center/contain no-repeat;
}




section.verwijzingen:not(.voor) .verwijzing-columns-4 a.box-shadow, section.verwijzingen:not(.voor) .verwijzing-columns-8 a.box-shadow{
  width: var(--hex-size-4);
}

section.tekst-afbeelding .square .media{
  /*width: var(--hex-size-2);*/
}

/* Zorg dat je grid ze mooi centreert als je vaste size gebruikt */
section.verwijzingen:not(.voor) .verwijzing-columns-3{
  justify-items: center;
}

section.verwijzingen:not(.voor) .verwijzing-columns a.box-shadow > img, section.tekst-afbeelding .square .media > img {
  position: absolute !important;
  inset: var(--hex-border);
  width: calc(100% - (var(--hex-border) * 2)) !important;
  height: calc(100% - (var(--hex-border) * 2)) !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 2;

  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<path d='M6 50 C6 48 6.6 46 7.6 44.3 L25.2 14 C26.9 11 30 9.2 33.4 9.2 H66.6 C70 9.2 73.1 11 74.8 14 L92.4 44.3 C93.4 46 94 48 94 50 C94 52 93.4 54 92.4 55.7 L74.8 86 C73.1 89 70 90.8 66.6 90.8 H33.4 C30 90.8 26.9 89 25.2 86 L7.6 55.7 C6.6 54 6 52 6 50 Z' fill='white'/>\
</svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<path d='M6 50 C6 48 6.6 46 7.6 44.3 L25.2 14 C26.9 11 30 9.2 33.4 9.2 H66.6 C70 9.2 73.1 11 74.8 14 L92.4 44.3 C93.4 46 94 48 94 50 C94 52 93.4 54 92.4 55.7 L74.8 86 C73.1 89 70 90.8 66.6 90.8 H33.4 C30 90.8 26.9 89 25.2 86 L7.6 55.7 C6.6 54 6 52 6 50 Z' fill='white'/>\
</svg>") center/contain no-repeat;
}


/* Tekst overlay (jouw .tekst-container) */
section.verwijzingen:not(.voor) .verwijzing-columns a.box-shadow .tekst-container{
  position: absolute !important;
  inset: var(--hex-border);
  width: calc(100% - (var(--hex-border) * 2)) !important;
  height: calc(100% - (var(--hex-border) * 2)) !important;
  left: var(--hex-border);
  right: var(--hex-border);
  /*bottom: var(--hex-border);*/
  bottom: 8%;
  padding: 14px 16px;
  text-align: center;

  /* subtiele leesbaarheid op foto */
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 40%);
  color: #fff;
}
section.verwijzingen:not(.voor) .verwijzing-columns a.box-shadow .tekst-container{
  z-index: 3;
  display: flex;
    justify-content: flex-end;
    padding-bottom: 50px;

  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<path d='M6 50 C6 48 6.6 46 7.6 44.3 L25.2 14 C26.9 11 30 9.2 33.4 9.2 H66.6 C70 9.2 73.1 11 74.8 14 L92.4 44.3 C93.4 46 94 48 94 50 C94 52 93.4 54 92.4 55.7 L74.8 86 C73.1 89 70 90.8 66.6 90.8 H33.4 C30 90.8 26.9 89 25.2 86 L7.6 55.7 C6.6 54 6 52 6 50 Z' fill='white'/>\
</svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<path d='M6 50 C6 48 6.6 46 7.6 44.3 L25.2 14 C26.9 11 30 9.2 33.4 9.2 H66.6 C70 9.2 73.1 11 74.8 14 L92.4 44.3 C93.4 46 94 48 94 50 C94 52 93.4 54 92.4 55.7 L74.8 86 C73.1 89 70 90.8 66.6 90.8 H33.4 C30 90.8 26.9 89 25.2 86 L7.6 55.7 C6.6 54 6 52 6 50 Z' fill='white'/>\
</svg>") center/contain no-repeat;
}



section.verwijzingen:not(.voor) .verwijzing-columns a.box-shadow h4{
  margin: 0 0 4px 0;
  line-height: 1.15;

}

section.verwijzingen:not(.voor) .verwijzing-columns-4 a.box-shadow h4, .verwijzing-columns-8 a.box-shadow h4{
  font-size: 1.25rem;
}

section.verwijzingen:not(.voor) .verwijzing-columns a.box-shadow .verwijzing-tekst{
  opacity: 0.95;
  color: #ffffff;
  margin-top: 0px; 
}

/*Button in footer*/
.social-link {padding: 5px 15px; margin-top: 20px; display: flex; border-radius: var(--borderradius); border:2px solid var(--hoofdkleur-2); transition-duration: 0.4s; text-decoration: none; align-items: center; gap: 10px; color: var(--tekstkleur) !important; background: #ffffff;}
.social-link:hover { transform: translateY(-5px);}



/**faq**/

/*---FOOTER---*/

/*---CONTENT---*/

/**blockquote**/

/**formulieren**/