/*
Theme Name: Bootstrap Basic4 Child
Theme URI: https://rundiz.com
Template: bootstrap-basic4
Author: Rundiz-WP team
Author URI: https://github.com/Rundiz-WP
Description: Bootstrap v.4 basic theme for developers to build their new theme very fast and easy. (WordPress 5 or Gutenberg ready.) The concept is to keep it basic, no rich features, no additional functions; all of these for theme developers will be easier to start develop their theme. To follow what was changed, please look for commits of this theme at Github or changelog.md file that come with the theme. Please read notice on Bootstrap Basic 4 Help page in Dashboard > Appearance > Bootstrap Basic4 Help or in readme.txt file in this theme package.
Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-menu,featured-images,post-formats,threaded-comments,translation-ready,editor-style,blog
Version: 1.3.5.1744654182
Updated: 2025-04-14 18:09:42
*/


.site-footer .footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .footer-list li {
    margin-bottom: .65rem;
}

.site-footer .footer-column h3 {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.site-footer .footer-logos img,
.site-footer .logo-grid img {
    filter: grayscale(100%);
    opacity: .85;
	margin-top: 2rem;
    margin-bottom: 2rem;
	align-items: center;
}

.site-footer .footer-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
	
}

/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

.custom-postcode-label {
    background: none !important;
    border: none !important;
}

/* Header Styles */
.site-header {
    padding: 20px 0;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
}
.header-column {
    padding: 15px;
}
.header-column h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
}
.header-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.header-list li {
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #555;
}
.header-list a {
    color: #007bff;
    text-decoration: none;
}
.header-list a:hover {
    text-decoration: underline;
}
.site-logo {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 2em;
    margin: 0;
}
.site-logo a {
    color: #333;
    text-decoration: none;
}
.site-logo a:hover {
    color: #007bff;
}
.site-description {
    font-size: 0.9em;
    color: #555;
}
.col-md-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
}
@media (max-width: 767px) {
    .header-column {
        margin-bottom: 20px;
    }
    .col-md-2-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Styling for bürtgenoten */
#buert-bold {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1em;
    margin: 0;
}

/* Unified Table Styling */
table,
.weather-table,
.incident-table,
.radar-table,
.parcelshop-table,
#aed-locatie-tabel,
#ns-station-tabel {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

table th,
table td,
.weather-table th,
.weather-table td,
.incident-table th,
.incident-table td,
.radar-table th,
.radar-table td,
.parcelshop-table th,
.parcelshop-table td,
#aed-locatie-tabel th,
#aed-locatie-tabel td,
#ns-station-tabel th,
#ns-station-tabel td {
    padding: 1rem;
    border: 1px solid #e0e0e0;
    text-align: left;
}

table thead,
.weather-table thead,
.incident-table thead,
.radar-table thead,
.parcelshop-table thead,
#aed-locatie-tabel thead,
#ns-station-tabel thead {
    background: #0073aa;
    color: #fff;
}

table tbody tr:nth-child(even),
.weather-table tbody tr:nth-child(even),
.incident-table tbody tr:nth-child(even),
.radar-table tbody tr:nth-child(even),
.parcelshop-table tbody tr:nth-child(even),
#aed-locatie-tabel tbody tr:nth-child(even),
#ns-station-tabel tbody tr:nth-child(even) {
    background: #f9f9f9;
}

table tbody tr:hover,
.weather-table tbody tr:hover,
.incident-table tbody tr:hover,
.radar-table tbody tr:hover,
.parcelshop-table tbody tr:hover,
#aed-locatie-tabel tbody tr:hover,
#ns-station-tabel tbody tr:hover {
    background: #e6f0fa;
}

#aed-locatie-tabel td i {
    margin-right: 8px;
    color: #d63031;
}

#ns-station-tabel td i {
    margin-right: 8px;
    color: #0984e3;
}

/* Responsive Tables */
.table-container {
    overflow-x: auto;
    margin: 1.5rem 0;
}

@media (max-width: 768px) {
    table,
    .weather-table,
    .incident-table,
    .radar-table,
    .parcelshop-table,
    #aed-locatie-tabel,
    #ns-station-tabel {
        font-size: 0.9rem;
    }

    table th,
    table td,
    .weather-table th,
    .weather-table td,
    .incident-table th,
    .incident-table td,
    .radar-table th,
    .radar-table td,
    .parcelshop-table th,
    .parcelshop-table td,
    #aed-locatie-tabel th,
    #aed-locatie-tabel td,
    #ns-station-tabel th,
    #ns-station-tabel td {
        padding: 0.75rem;
    }
}

/* RSS Feed */
.rss-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.rss-column {
    flex: 1 1 100%;
    max-width: 100%;
}

.rss-column ul {
    list-style: none;
    padding: 0;
}

.rss-column li {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

@media (min-width: 600px) {
    .rss-column {
        flex: 1 1 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

/* News Columns */
.wp-block .buert-feeds-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    margin: 20px 0;
    padding: 0 15px;
    max-width: 1200px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

.buert-feed {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.buert-feed:hover {
    transform: translateY(-5px);
}

.buert-feed-title {
    font-size: 1.5em;
    margin: 0 0 10px;
    color: #333;
}

.buert-distance {
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}

.buert-feed-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.buert-feed-items li {
    margin-bottom: 10px;
}

.buert-feed-items a {
    color: #0073aa;
    text-decoration: none;
    font-size: 1em;
    line-height: 1.4;
}

.buert-feed-items a:hover {
    text-decoration: underline;
    color: #005177;
}

.buert-feed-error {
    color: #d9534f;
    font-style: italic;
    margin: 10px 0;
}

.buert-debug {
    margin-top: 20px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.buert-debug h4 {
    margin: 0 0 10px;
    font-size: 1.2em;
}

.buert-debug pre {
    margin: 0;
    font-size: 0.9em;
    white-space: pre-wrap;
}

@media (max-width: 992px) {
    .wp-block .buert-feeds-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .wp-block .buert-feeds-container {
        grid-template-columns: 1fr !important;
        padding: 0 10px;
    }

    .buert-feed {
        padding: 15px;
    }

    .buert-feed-title {
        font-size: 1.3em;
    }

    .buert-feed-items a {
        font-size: 0.95em;
    }
}

.header-postcode-search { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    z-index: 1000; 
}
.postcode-search { 
    max-width: 300px; 
}
.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-search-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
}

.hero-search-overlay form {
    background: rgba(255, 255, 255, 0.8);
    padding: 25px;
    border-radius: 8px;
}

.hero-search-overlay input[type="text"],
.hero-search-overlay button {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.hero-search-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Website Menu and CLS Fix */
.site-header {
    position: relative;
    background: #fff;
    padding: 1rem 0;
    min-height: 120px;
}

.header-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.site-logo {
    margin: 0;
    font-size: 1.5rem;
}

.site-logo a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.site-description {
    font-size: 0.9rem;
    color: #666;
}

.main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
} 

.main-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu li a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: color 0.2s;
}

.main-menu li a:hover {
    color: #007bff;
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 0.5rem;
}

.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .main-menu {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .mobile-menu.active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 1000;
        padding: 4rem 1rem;
        overflow-y: auto;
    }

    .mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .mobile-menu li a {
        font-size: 1.2rem;
        color: #333;
        text-decoration: none;
        display: block;
    }

    .mobile-menu li a:hover {
        color: #007bff;
    }

    .close-menu {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #333;
    }
}

.site-content {
    margin-top: 120px;
}

.postcode-search-container {
    min-height: 50px;
}

#postcode-input.loading {
    background-image: url('https://buert.nl/assets/loading.gif');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20px 20px;
}

.cache-result {
    color: green;
}

.db-result {
    color: red;
}

/* MODAL DESIGN */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
    margin-top: 0;
}

.modal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal .close:hover {
    color: #000;
}

.modal .weather-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-top: 15px;
}

.modal .weather-item {
    background: #f7f7f7;
    padding: 8px 12px;
    border-radius: 4px;
}