/*

Theme Name: WelkominLWD
Theme URI: https://theme.co/pro/
Author: agoeie
Author URI: https://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

:root {
    --font: 'poppins', sans-serif;
    --algemeen: #21558f;
    --culinair: #d66c22;
    --lifestyle: #fec81e;
    --sport: #28a745;
    --toerisme: #00e28c;
    --uit: #b33b77;
    --winkelen: #f15252;
    --zakelijk: #A0988E;
}

.txt-culinair h1, .txt-culinair span {
    color: var(--culinair) !important;
}

.bg-culinair {
    background-color: var(--culinair) !important;
}

.tr-culinair {
    border-left: 10px solid var(--culinair) !important;
}

.txt-lifestyle h1, .txt-lifestyle span {
    color: var(--lifestyle) !important;
}

.bg-lifestyle {
    background-color: var(--lifestyle) !important;
}

.tr-lifestyle {
    border-left: 10px solid var(--lifestyle) !important;
}

.txt-sport h1, .txt-sport span {
    color: var(--sport) !important;
}

.bg-sport {
    background-color: var(--sport) !important;
}

.tr-sport {
    border-left: 10px solid var(--sport) !important;
}

.txt-toerisme h1, .txt-toerisme span {
    color: var(--toerisme) !important;
}

.bg-toerisme {
    background-color: var(--toerisme) !important;
}

.tr-toerisme{
    border-left: 10px solid var(--toerisme) !important;
}

.txt-uit h1, .txt-uit span {
    color: var(--uit) !important;
}

.bg-uit {
    background-color: var(--uit) !important;
}

.tr-uit {
    border-left: 10px solid var(--uit) !important;
}

.txt-winkelen h1, .txt-winkelen span {
    color: var(--winkelen) !important;
}

.bg-winkelen {
    background-color: var(--winkelen) !important;
}

.tr-winkelen {
    border-left: 10px solid var(--winkelen) !important;
}

.txt-zakelijk h1, .txt-zakelijk span {
    color: var(--zakelijk) !important;
}

.bg-zakelijk {
    background-color: var(--zakelijk) !important;
}

.tr-zakelijk {
    border-left: 10px solid var(--zakelijk) !important;
}

/* aspect-ratio */
.vierkant {
    aspect-ratio: 1 / 1;
}

.liggend {
    aspect-ratio: 16 / 9;
}

.liggend-smal {
    aspect-ratio: 16 / 6;
}

.titel-header {
    aspect-ratio: 16 / 7;
}

.staand {
    aspect-ratio: 4 / 5;
}

.header-banner {
    aspect-ratio: 40 / 7;
}

#grad {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.the-content img {
  width: 100%;
  height: auto;
  display: none;
}

.aspect-ratio-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
}

.aspect-ratio-wrapper img {
  display: none;
}

/* homepage looper */
.customloop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.customloop-grid > .customloop-item {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Thumbnail */
.customloop-thumb {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.customloop-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    z-index: 2;
}

/* Content onderaan uitgelijnd */
.customloop-content {
    position: absolute;
    bottom: 1em;
    left: 1em;
    right: 1em;
    color: white;
    z-index: 2;
}

h2, .h2 {
    font-size: 2em !important;
    line-height: 0.7;
}

/* Titel en excerpt */
.customloop-title,
.customloop-excerpt {
    margin: 0;
}

.customloop-title a {
    font-size: 0.5em;
    font-weight: bold;
    color: white;
    text-decoration: none;
}

.customloop-excerpt {
    display: none !important;
}

.customloop-title a:hover {
    color: white;
}

/* Verberg excerpt standaard */
.customloop-item .customloop-excerpt {
    display: none;
}

/* Toon excerpt alleen op eerste item */
.customloop-item:first-child .customloop-excerpt {
    display: block;
}

.more-link {
    display: none !important;
}

/* paginatie */
.customloop-pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

.page-numbers {
    font-family: var(--font);
    font-weight: 400;
    color: #000;
}

.page-numbers .current {
    color: #000 0.5;
}

/* Responsive: 1 kolom op mobiel */
@media (max-width: 768px) {
    .customloop-grid {
        grid-template-columns: 1fr;
    }

    .customloop-grid > .customloop-item:first-child {
        grid-column: span 1;
    }
}

/* comment form */
.comment-form-comment label, .comment-form-author label, .comment-form-email label, .comment-form-url label {
    display: none !important;
}

#comment, #author, #email {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--algemeen);

    font-family: var(--font);
    font-size: 1em;
    color: black;
}

.comment-form-cookies-consent {
    font-family: var(--font);
}

.comment-form-url {
    display: none;
}

#entry-comment-submit {
    text-shadow: none;
    box-shadow: none;
    border: none;

    width: 100%;
    font-family: var(--font);
    font-size: 1em;
}

#entry-comment-submit:hover {
    background-color: var(--algemeen);
}

.x-comment-img {
    display: none;
}

article.comment {
    margin: 0 !important;
    background-color: transparent;
    box-shadow: none;

    font-family: var(--font);
}

.m25-1a .x-paginate-inner > .current {
    background-color: transparent !important;
    color: #000 !important;
}

.m25-1a .x-paginate-inner > * {
    min-width: 1em !important;
    min-height: 1em !important;
    background-color: transparent !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

/* nieuwsbrief */
#field_2_4 .gfield_label, #field_2_3 .gfield_label {
    font-family: var(--font);
    font-size: 1em;
    font-weight: 700;
    color: white;
}

#input_2_4 {
    font-family: var(--font);
    font-size: 0.9em;
    font-weight: 400;
    color: white;
}

#gform_submit_button_2 {
    background-color: var(--lifestyle);
    font-family: var(--font);
    text-shadow: none;
    font-size: 1em;
    font-weight: 700;
    color: #000;
    border: none;
}

#gform_submit_button_2:hover {
    background-color: var(--culinair);
    border: none;
}

/* contactformulier */
.gform-body .gform_body {
    width: 100%;
}

.gform_heading {
    display: none;
}

#input_1_4, #input_1_5, #input_1_6, #input_1_3 {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    font-family: var(--font);
    font: 1em;
    color: #000;
    border-bottom: 1px solid #21558f;
}

#gform_submit_button_1 {
    width: 100%;
    background-color: #21558f;
    box-shadow: none;
    text-shadow: none;
    border: none;
    border-radius: 0;
    font-family: var(--font);
    font-weight: 700;
    font-size: 1em;
    color: white;
}