/* ==========================================================================
   JOOMLA 5 - USER.CSS (VOLLEDIGE GEOPTIMALISEERDE VERSIE)
   ========================================================================== */

/* --- 1. TYPOGRAFIE --- */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');

h1, .h1 { font-size: 1.2rem !important; font-weight: 700; margin-bottom: 1rem; }
h2, .h2 { font-size: 1.1rem !important; font-weight: 600; }
h3, .h4, .module-title { font-size: 1.0rem !important; font-weight: 600; margin-bottom: 0.5rem; }

/* --- 2. LOGO FIX --- */
.navbar-brand img, .brand-logo img, header .container img { 
    width: 75px !important; 
    max-width: 75px !important; 
    height: auto !important; 
}

/* --- 3. HOMEPAGE: VASTE TEKST & HOVER OP RANDOM IMAGE --- */
div[class*="mod-randomimage"] {
    position: relative !important;
    display: block !important;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

div[class*="mod-randomimage"] img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

div[class*="mod-randomimage"]:hover img {
    filter: brightness(60%);
    transform: scale(1.03);
}

div[class*="mod-randomimage"]::before {
    content: "Harelbeekse Fotovrienden";
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Alex Brush', cursive !important;
    font-size: 4.5rem !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9);
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

div[class*="mod-randomimage"]::after {
    content: "Fotograferen is onze passie en delen die graag met anderen \A \A Klik op de foto om verder te gaan..";
    white-space: pre-wrap;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem !important;
    color: #ffffff !important;
    font-weight: 300;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.9);
    width: 90%;
    z-index: 10;
    line-height: 1.3;
    pointer-events: none;
}

/* --- 4. CONTAINER & VELDEN (Artikel Detailpagina) --- */
.view-article .fields-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
    display: block !important;
}

.view-article .field-entry { 
    display: flex !important; 
    margin-bottom: 8px !important; 
    align-items: center; 
}

.view-article .field-label, 
.com-content-article__links li.content-links-a::before { 
    width: 150px !important; 
    min-width: 150px !important;
    font-weight: bold !important; 
    flex-shrink: 0 !important;
}

/* --- 5. KNOPPEN (Inschrijven / Deelnames / Bijlagen) --- */
.field-value a, 
.com-content-article__links li.content-links-a a { 
    display: inline-block !important; 
    width: 200px !important; 
    padding: 6px 10px !important; 
    border-radius: 4px !important; 
    color: #fff !important; 
    font-weight: bold !important; 
    text-align: center !important; 
    text-decoration: none !important;
}

.field-url-inschrijven a, 
.field-url-bekijk-deelname a, 
.field-url-bekijkdeelname a {
    font-size: 0 !important; 
}

.field-url-inschrijven a { background-color: #007bff !important; }
.field-url-inschrijven a::after { content: "Nu Inschrijven"; font-size: 13px !important; }

.field-url-bekijk-deelname a, 
.field-url-bekijkdeelname a { background-color: #28a745 !important; }
.field-url-bekijk-deelname a::after, 
.field-url-bekijkdeelname a::after { content: "Deelnames"; font-size: 13px !important; }

/* BIJLAGE KNOP */
.com-content-article__links { padding-left: 0 !important; margin-left: 0 !important; }
.com-content-article__links li.content-links-a { display: flex !important; align-items: center; list-style: none !important; margin-top: 10px; }
.com-content-article__links li.content-links-a::before { content: "Bijlage 1:"; width: 150px; font-weight: bold; }
.com-content-article__links li.content-links-a a { background-color: #6c757d !important; font-size: 13px !important; }
.com-content-article__links li.content-links-a a::after { content: "" !important; }

/* --- 6. KALENDER BLOKJE --- */
.view-article .field-entry.field-kalender { 
    display: inline-flex !important; 
    flex-direction: column !important; 
    width: 150px !important; 
    text-align: center !important; 
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    margin: 15px 0 !important;
}
.view-article .field-entry.field-kalender .field-label { 
    background-color: #d9534f !important; 
    color: #fff !important; 
    width: 100% !important; 
    padding: 3px 0 !important;
}
/* De datum zelf vetgedrukt maken */
.view-article .field-entry.field-kalender .field-value {
    font-weight: bold !important;
    padding: 5px 0 !important;
    color: #333 !important;
    font-size: 1.1rem !important;
}

/* --- 7. ARTIKEL AFBEELDING --- */
.view-article .item-image { 
    float: none !important; 
    display: block !important; 
    margin: 20px 0 !important; 
    clear: both;
}

.view-article .item-image img { 
    max-width: 320px !important; 
    height: auto !important; 
    border-radius: 4px; 
}

/* --- 8. BLOG OVERZICHT (TEGELS) --- */
.com-content-category-blog__item .badge { 
    pointer-events: none !important; 
    cursor: default !important; 
}

.blog-item-datum {
    font-size: 0.9rem;
    color: #666;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* --- VERBERG INSCHRIJKNOP BIJ VERLOPEN DEADLINE --- */
/* Als de PHP de klasse 'deadline-verstreken' toevoegt, verbergen we alles van de knop */

.deadline-verstreken .field-url-inschrijven, 
.deadline-verstreken .field-id-1,
.deadline-verstreken a[href*="docs.google.com/forms"] {
    display: none !important;
}

/* Optioneel: verberg ook de tekst "Inschrijven:" label als de knop weg is */
.deadline-verstreken .field-entry:has(.field-url-inschrijven) {
    display: none !important;
}