/*
Theme Name: Ons Katholiek
Theme URI: 
Author: Martin Oosterwijk
Author URI: 
Description: Custom thema voor Ons Katholiek
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onskatholiek
Tags: custom
*/



html {
  margin-top: 0px !important;
  background-color:#19122f;
}

body {
  /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  font-family: -apple-system-ui-serif, ui-serif, Spectral, Georgia, serif;
    line-height: 1.8;
  font-size:19px;
  /*color: #333;*/
  color:white;
  margin: 0;
  padding: 0;
  background: no-repeat;
  background-image: linear-gradient(rgb(27, 16, 49) 0px, rgb(27, 16, 49) clamp(10vh, 24rem, 14vh), rgb(85, 28, 94) 0%, rgb(85, 28, 94) 30%, rgb(27, 16, 49) 100%);
  
  background-size: cover;
}

h1 a,
h2 a,
h3 a {
  color: white;
}

a {
  text-decoration: none;;
  color:white;
}

.post-content {

  width:100%;
}

.post-content > p,
.post-content > .wp-block-list {
  margin:auto auto;
  max-width: 600px;
  margin-top:15px;
}



.post-content-header > p {
  margin-left: 0px !important;
}


.post-content > .wp-block-image {
  margin: auto auto;
  max-width: 800px;
  margin-top:50px;
  margin-bottom:50px;
}

.post-content > h3 {

  max-width: 800px;
  margin:auto auto;
  margin-top:50px;
  margin-bottom:20px;

}

/* lijntje onder links met uitluitingen voor content waar ik het lijntje niet wil hebben. */

.post-content a {
  position: relative;
  display: inline-block;
}

/* Underline style for links */
.post-content a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 2px; /* Adjust the thickness */
  background: linear-gradient(90deg, rgb(251, 50, 107) 5.74%, rgb(255, 116, 109) 100%);
}


/* Exclude links that are within heading elements */
.post-content h1 a::after,
.post-content h2 a::after,
.post-content h3 a::after,
.post-content h4 a::after,
.post-content h5 a::after,
.post-content h6 a::after {
  display: none;
}

a.read-more.button-link::after {
  display:none;
}

.read-more,
.button-link a::after,
.button-link-big a::after {
  display:none;
}

/* Exclude links that contain only an image */
.post-content a:has(> img:only-child)::after {
  display: none;
}




a:hover {
  text-decoration: underline;
}

hr {
  margin-left: 0;
  background: linear-gradient(90deg, rgb(251, 50, 107) 5.74%, rgb(255, 116, 109) 100%);
  width: 100px;
  height: 3px;      /* Set the desired thickness */
  border: none;     /* Remove any default borders */
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;

  max-width: 1200px;
  margin:auto;
  /*background: #fff;*/
  
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  position: relative;
  
}

.wrapper {
  display: flex;
  max-width: 1200px;
  margin: 2rem auto;
  gap: 2rem;
}

.homepage-widget .row,
.three-columns {
  margin-bottom: 2rem;
}

/* --- Row 2 & Row 3: Three-Column Layout --- */
.three-columns {
  display: flex;
  gap: 1rem;
}

.three-columns .column {
  /*flex: 1;*/
  /*flex: 0 0 70%;*/
  width: 80%;
  /*scroll-snap-align: start;*/
  position: relative;

  overflow: hidden;
}

.three-columns .column img {
  display: block;
  width: 100%;
  height: 150px;  
  object-fit: cover;
}



@media screen and (max-width: 768px) {
  /* Make the container horizontally scrollable */
  .three-columns.horizontal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 2rem; /* Optional: spacing between columns */
    
  }
  /* Ensure each column takes a fixed portion of the container width */
  .three-columns .column {
    flex: 0 0 70%; /* Adjust this value (e.g., 80%) for desired column width */
    width:80%;
    scroll-snap-align: start;
  }
}





/* --- Row 3: Category Specific Styling --- */
.category-column .category-title {
  margin-bottom: 1rem;
}

.category-column .category-posts {
  list-style: none;
  padding: 0;
}
.category-column .category-posts li {
  margin-bottom: 0.5rem;
}


@media screen and (max-width: 768px) {
  /* For row 3 (categories), stack columns vertically */
  .vertical-scroll.three-columns {
    flex-direction: column;
    overflow-x: visible; /* Disable horizontal scrolling */
  }
  
  .vertical-scroll .three-columns .category-column  {
    flex: 1 1 auto;
    width: 100%;
    scroll-snap-align: none; /* Disable snap alignment */
    margin-bottom: 1rem; /* Optional spacing between columns */
  }
}



main.site-main {
  flex: 3;
  /*background: #fff;*/
  padding: 2rem;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}


/*posts */
/* Styles for the most recent post */
.recent-post {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  
  padding-bottom: 1rem;
}

.recent-post .post-content {
  flex: 1;
  /* Optional: add some right margin for spacing */
  /*margin-right: 1rem;*/
}

.recent-post  p {
  margin-left:0px !important;
}

.recent-post .post-thumbnail, 
.post-content .post-thumbnail {
  text-align:center;
  margin-block-start:2.00em;
  align-self: flex-start;
  max-width: 100%;
  max-height: 450px;
  overflow: hidden;
}


.recent-post .post-thumbnail img,
.post-content .post-thumbnail img {
  
  display: block;
  width: 100%;
  max-width: 700px;
  max-height: 450px;
  height: 100%;
  object-fit: cover; /* Makes the image cover the available space, cropping if needed */
  flex:2;
  
}


.post-content .post-thumbnail img {
  margin:auto auto;
}


@media screen and (max-width: 768px) {
  .recent-post {
    flex-direction: column;
  }
  .recent-post .post-thumbnail {
    order: -1;
    margin-block-start: 0em;
    margin-bottom: 1rem; /* Optional: adds spacing below the thumbnail */
  }
}


.wp-element-caption {
  color:#fff;
}

/* Style for the read more link */


.button-link {
  background:linear-gradient(90deg, rgb(251, 50, 107) 5.74%, rgb(255, 116, 109) 100%);
  border-radius:45px;
  padding:5px;
}

.button-link-big {
  background:linear-gradient(90deg, rgb(251, 50, 107) 5.74%, rgb(255, 116, 109) 100%);
  border-radius:45px;
  padding:5px;
  display: inline-block;
  margin-top: 1rem;
  /*background: #333;*/
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
}



.read-more {
  display: inline-block;
  margin-top: 1rem;
  /*background: #333;*/
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

/* Optional: Style for default posts */
.post {
  margin-bottom: 2rem;
}



.alignright {
  float: right;
  margin: 0 0 1.5rem 1.5rem;
}

.alignleft {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



.sidebar {
  flex: 1;
  /*background: #fff;*/
  padding: 1.5rem;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;

  max-width: 1200px;
  margin:auto;
  /*background: #fff;*/

  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  position: relative;
  z-index: 1000;
}

.site-title {
  margin: 0;
}

/* The navigation will automatically align right thanks to space-between */
.site-navigation {
  margin-left: auto;
}

/* Optionally style the mobile menu icon */
.mobile-menu-icon {
  margin-right: 1rem;
  cursor: pointer;
}



header h1 a {
  text-decoration: none;
  color: white;
}

nav ul {
  list-style: none;
  padding:0;
  margin-top:45px;
  /*margin: 1rem 0 0;*/
  display: flex;
  justify-content: center;
}

nav ul .sub-menu {
  display:none;
}

nav ul li {
  margin-right: 1.5rem;
}

nav ul li a {
  position: relative; /* Required for absolute positioning of ::after */
  text-decoration: none;
  font-weight: bold;
  color: white;
  text-align: left;
  font-size: large;
  background: none; /* Remove the background from the a element */
}

nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px; /* Adjust the height of the bar as needed */
  background: linear-gradient(90deg, rgb(251, 50, 107) 5.74%, rgb(255, 116, 109) 100%);
}



.mobile-menu-icon {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 1rem;
}

@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }

  nav ul {
    display: none;
    flex-direction: column;
    background: #19122f;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 999;
  }

  nav ul.show {
    display: flex;
  }

  .mobile-menu-icon {
    display: block;
  }

  nav ul li {
    margin: 1rem;
    text-align: left;
    position: relative; /* Allows submenu to be positioned relative to its parent */
  }
  
  /* Ensure the submenu is part of the normal flow and indented */
  nav ul li ul.sub-menu {
    position: static !important; /* Override any absolute positioning */
    display: block !important;
    margin-left: 1rem;
    background: inherit;
  }
  
  /* Optional: Adjust spacing for individual submenu items */
  nav ul li ul.sub-menu li {
    margin: 0.5rem 0;
  }
}

/* Editor and widget styles */
.editor-styles-wrapper {
  padding: 20px;
  /*background: #fff;*/
}

.widgets-editor-wrapper {
  padding: 20px;
  /*background: #fff;*/
}

.interface-interface-skeleton__content {
  /*background: #fff;*/
  padding: 20px;
}

.sidebar .widget {
  margin-bottom: 2rem;
}

.sidebar .widget-title {
  font-size: 1.2rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}