/* ============================================================
   ŽUMBERAK INFO - Glavni CSS
   Tradicionalni hrvatski/grkokatolički stil bez vjerskih motiva
   ============================================================ */

/* --- Reset & Font --- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@400;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #186020;
    --secondary: #a6ce39;
    --accent: #ffffff;
    --dark-bg: #0d3a12;
    --deep-red: #186020;
    --terracotta: #a6ce39;
    --gold: #a6ce39;
    --dark-brown: #0d3a12;
    --cream: #ffffff;
    --parchment: #f8faf7;
    --text-dark: #1a3a1a;
    --text-light: #ffffff;
    --border-ornate: #186020;
    --accent-green: #a6ce39;
    --shadow: 0 2px 8px rgba(0,0,0,0.15);
    --header-gradient-start: #186020;
    --header-gradient-end: #0d3a12;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #0d3a12 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="%230d3a12"/><path d="M30 5 L35 15 L45 10 L40 20 L50 25 L40 30 L50 35 L40 40 L45 50 L35 45 L30 55 L25 45 L15 50 L20 40 L10 35 L20 30 L10 25 L20 20 L15 10 L25 15 Z" fill="%23186020" opacity="0.3"/></svg>');
    color: var(--text-dark);
    min-height: 100vh;
    line-height: 1.6;
}

/* --- Pleter Border Pattern --- */
.pleter-top, .pleter-bottom {
    height: 12px;
    background: var(--primary);
    position: relative;
}
.pleter-top::after, .pleter-bottom::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, 
        transparent, transparent 8px, var(--gold) 8px, var(--gold) 10px,
        transparent 10px, transparent 18px, var(--gold) 18px, var(--gold) 20px);
    opacity: 0.6;
}

/* --- Main Container --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--parchment);
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    min-height: 100vh;
}

/* --- Header --- */
.header {
    background: linear-gradient(180deg, var(--primary) 0%, var(--dark-bg) 100%);
    color: var(--text-light);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 3px solid var(--secondary);
    position: relative;
}
.header-logo {
    width: 70px; height: 70px;
    background: var(--accent);
    border-radius: 50%;
    border: 3px solid var(--secondary);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--primary);
    flex-shrink: 0;
    overflow: hidden;
}
.header-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.header-title {
    font-family: 'Merriweather', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}
.header-url {
    font-size: 13px;
    opacity: 0.85;
    letter-spacing: 0.5px;
}

/* --- Language Switcher --- */
.lang-switcher {
    margin-left: auto;
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.lang-switcher button {
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.4);
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}
.lang-switcher button.active {
    background: var(--secondary);
    color: #1a3a1a;
    border-color: var(--secondary);
}
.lang-switcher button:hover {
    background: rgba(255,255,255,0.2);
}

/* --- Hamburger Menu --- */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
    flex-shrink: 0;
}
.hamburger:hover { opacity: 0.8; }

/* --- Main Layout: 60/30 --- */
.main-layout {
    display: flex;
    gap: 0;
    padding: 20px;
}
.main-left {
    flex: 0 0 62%;
    padding-right: 20px;
}
.main-right {
    flex: 0 0 38%;
    border-left: 2px solid var(--terracotta);
    padding-left: 20px;
}

/* --- Sub-news grid: 2 columns under main news --- */
.sub-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
}

/* --- Small News Card (under main news): horizontal image+text --- */
.small-news-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 90px;
}
.small-news-card-image {
    width: 90px;
    min-width: 90px;
    height: 100%;
    background: #e0d5c5;
    display: flex; align-items: center; justify-content: center;
    color: #999;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.small-news-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.small-news-card-image .placeholder-text {
    position: absolute;
    font-style: italic;
    color: #aaa;
    font-size: 11px;
    text-align: center;
    padding: 0 6px;
}
.small-news-card-body {
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.small-news-card-body h4 {
    font-family: 'Merriweather', serif;
    color: var(--primary);
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.small-news-card-body p {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* --- News Card --- */
.news-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
/* Slika glavne vijesti. Bila je 220 px dok je pod naslovom stajao i skraćeni
   tekst vijesti; 16. 10. 2026. tekst je uklonjen, a njegov prostor (103 px)
   dan je slici, pa je kartica ostala iste visine. */
.news-card-image {
    width: 100%; height: 320px;
    background: #e0d5c5;
    display: flex; align-items: center; justify-content: center;
    color: #999;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}
.news-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.news-card-image .placeholder-text {
    position: absolute;
    font-style: italic;
    color: #aaa;
}
.news-card-body {
    padding: 15px 20px;
}
.news-card-body h3 {
    font-family: 'Merriweather', serif;
    color: var(--primary);
    font-size: 18px;
    margin-bottom: 8px;
}
.news-card-body p {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Event Card (desni stupac) --- */
.event-card {
    background: #fff;
    border: 1px solid #e0d5c5;
    border-left: 4px solid var(--secondary);
    border-radius: 4px;
    padding: 12px 15px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    /* Slika stoji SA STRANE, a ne preko cijele širine (16. 10. 2026.). */
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.event-card-body {
    flex: 1 1 auto;
    min-width: 0;   /* inače duga riječ razvuče stupac i gurne sliku */
}
.event-card h4 {
    font-family: 'Merriweather', serif;
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 4px;
}
.event-card p {
    font-size: 12px;
    color: #666;
}
.event-card .event-date {
    display: inline-block;
    background: var(--secondary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* --- Event Card Image ---
   Bila je preko cijele širine i visoka 120 px, pa je od uspravne slike
   (izmjereno 636×900) ostalo vidljivo samo 22 % visine. Sada je uspravna
   (3:4), uz bok teksta: od iste slike vidi se 94 %. */
.event-card-image {
    flex: 0 0 150px;
    width: 150px;
    height: 200px;
    overflow: hidden;
    border-radius: 4px;
}
.event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-title {
    font-family: 'Merriweather', serif;
    font-size: 16px;
    color: var(--primary);
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 6px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* --- Liturgijski kalendar: traka je UKLONJENA 13. 10. 2026. ----------------
   Traka »Liturgijski kalendar« stajala je ovdje od 12. do 13. 10. 2026.
   (`.kalendar-traka`, `__znak`, `__tekst`, `__naslov`, `__podnaslov`,
   `__poziv`, plus njihova pravila u `@media (max-width: 768px)`). Uklonjena je
   na korisnikovu riječ: »makni poveznicu kalendar sa stranice, makni ju
   skroz«. Ne ostaje ni slog ni prazan razred - mrtvo pravilo u slogu je kvar
   koji nitko ne vidi.
   Kalendar sam ostaje na /kalendar/ i dalje radi; uklonjena je samo poveznica
   s matične stranice, i to mjeri `provjeri_objavu.sh`. */
/* --- Navigation Bar --- */
.nav-bar {
    background: var(--dark-brown);
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
}
.nav-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 100px;
    padding: 12px 20px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: background 0.2s;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.nav-bar a:hover {
    background: var(--secondary);
    color: #1a3a1a;
}

/* --- Sub Menu --- */
.sub-menu {
    background: var(--cream);
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
}
.sub-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 100px;
    padding: 10px 18px;
    color: var(--dark-brown);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    border-right: 1px solid #e0d5c5;
}
.sub-menu a:hover {
    background: var(--secondary);
    color: #1a3a1a;
}

/* Sub-menu items with images */
.sub-menu-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    flex: 1;
}
.sub-menu-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
    margin-bottom: 6px;
}
.sub-menu-label {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
}

/* Drugi red — odvojen linijom od prvog reda. Razred se zove `.sub-menu-ads`
   jer je red nekad držao samo reklame; danas su u njemu i udruge i ustanove
   (npr. Muzeji od 13. 10. 2026.), pa ime više ne opisuje sadržaj - mijenjati
   ga se ne mora, ali se na njega ne treba oslanjati pri čitanju reda. */
.sub-menu-ads {
    border-top: 2px solid #e0d5c5;
}
.sub-menu-ads:empty {
    display: none;
}

/* Treći red — poveznice (Općina Žumberak, Park prirode, Žumberački vikarijat,
   Galerija, arhiva ZNS-a …). Isti slog kao red reklama (bijela podloga, linija
   prema redu iznad), pa se tri reda čitaju kao jedna hrpa. Razlikuje ih
   sadržaj, ne boja.
   SASTAV REDOVA SE NE POPISUJE OVDJE: koja kategorija ide u koji red stoji u
   bazi (`categories.section`), pa se popis u ovakvu komentaru tiho raziđe s
   njome - i to se 13. 10. 2026. i dogodilo (Muzeji su prešli u red iznad, a
   komentar je još pisao stari raspored). */
.sub-menu-links {
    border-top: 2px solid #e0d5c5;
}
.sub-menu-links:empty {
    display: none;
}

/* Fix emoji rendering */
.cat-emoji {
    font-size: 20px;
    margin-right: 4px;
    vertical-align: middle;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif !important;
}
.nav-bar .cat-emoji,
.media-row .cat-emoji {
    font-size: 20px;
    margin-right: 4px;
    vertical-align: middle;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif !important;
}

/* --- Map & Sport Row --- */
.map-sport-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.map-sport-left {
    flex: 1;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
    padding: 15px;
    border-right: 1px solid #ddd;
    cursor: pointer;
    transition: background 0.2s;
}
.map-sport-left:hover { background: #f0ece0; }
.map-sport-left a {
    font-family: 'Merriweather', serif;
    font-size: 18px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
}
.map-sport-right {
    flex: 1;
    background: #f8f4ec;
    padding: 10px 15px;
}
.map-sport-right a {
    display: block;
    padding: 6px 0;
    color: var(--dark-brown);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.map-sport-right a:hover {
    color: var(--primary);
}

/* --- Map Modal --- */
.map-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.map-modal.active { display: flex; }
.map-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    position: relative;
}
.map-modal-close {
    position: absolute;
    top: 10px; right: 15px;
    background: var(--primary);
    color: #fff;
    border: none;
    width: 35px; height: 35px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.map-modal-close:hover { background: #c0392b; }
.map-modal-content iframe {
    width: 100%; height: 500px;
    border: none;
}

/* --- Content Categories --- */
.content-cats {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
    padding: 5px;
}
.content-cats a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 100px;
    padding: 8px 14px;
    margin: 3px;
    background: var(--cream);
    color: var(--dark-brown);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #e0d5c5;
    border-radius: 3px;
    transition: all 0.2s;
}
.content-cats a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* --- Media Row --- */
.podrucja-row {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
    padding: 5px;
}
.podrucja-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 100px;
    padding: 8px 14px;
    margin: 3px;
    background: var(--cream);
    color: var(--dark-brown);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #e0d5c5;
    border-radius: 3px;
    transition: all 0.2s;
}
.podrucja-row a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.media-row {
    background: var(--dark-brown);
    display: flex;
    border-bottom: 2px solid var(--gold);
}
.media-row a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    transition: background 0.2s;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.media-row a:hover {
    background: var(--secondary);
    color: #1a3a1a;
}

/* --- Contact / Search --- */
.contact-row {
    display: flex;
    padding: 12px 20px;
    background: var(--cream);
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}
.contact-row input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 10px 15px;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}
.contact-row input[type="text"]:focus {
    border-color: var(--secondary);
    outline: none;
}
.contact-row button {
    padding: 10px 25px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}
.contact-row button:hover {
    background: var(--secondary);
    color: #1a3a1a;
}

/* --- Contact Email & Facebook Links --- */
.contact-email, .contact-fb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s;
    white-space: nowrap;
}
.contact-email:hover, .contact-fb:hover {
    background: var(--secondary);
    color: #1a3a1a;
}

/* --- Search Results --- */
.search-results {
    display: none;
    padding: 20px;
    background: #fff;
    border-bottom: 2px solid var(--secondary);
}
.search-results.active { display: block; }
.search-results h3 {
    font-family: 'Merriweather', serif;
    color: var(--primary);
    margin-bottom: 15px;
}
.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.search-result-item h4 {
    color: var(--primary);
    font-size: 14px;
}
.search-result-item p {
    font-size: 12px;
    color: #666;
}
.search-result-item a {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}

/* --- Newsletter --- */
.newsletter-row {
    background: var(--primary);
    color: #fff;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--secondary);
}
.newsletter-row h4 {
    font-family: 'Merriweather', serif;
    font-size: 16px;
    white-space: nowrap;
}
.newsletter-row p {
    font-size: 13px;
    opacity: 0.9;
    flex: 1;
    min-width: 200px;
}
.newsletter-row input[type="email"] {
    padding: 10px 15px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    background: rgba(255,255,255,0.15);
    color: #fff;
    min-width: 220px;
}
.newsletter-row input[type="email"]::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-row input[type="email"]:focus {
    border-color: var(--secondary);
    outline: none;
}
.newsletter-row button {
    padding: 10px 25px;
    background: var(--secondary);
    color: #1a3a1a;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.newsletter-row button:hover { background: #8bbd2e; }
.newsletter-msg {
    font-size: 13px;
    font-weight: 600;
    min-width: 150px;
}

/* --- Visit Counter --- */
.visit-counter {
    text-align: center;
    padding: 8px;
    background: var(--dark-bg);
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.visit-counter span {
    font-weight: 700;
    color: var(--secondary);
}

/* --- Footer --- */
.back-link {
    display: inline-block;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    margin: 15px 0;
    transition: background 0.2s;
}
.back-link:hover {
    background: var(--secondary);
    color: #1a3a1a;
}

.footer {
    background: var(--primary);
    color: var(--text-light);
    text-align: center;
    padding: 15px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* --- Category Icons --- */
.cat-emoji {
    font-size: 18px;
    margin-right: 4px;
    vertical-align: middle;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif;
}
.cat-icon {
    width: 24px; height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 3px;
}
.nav-bar .cat-emoji {
    font-size: 18px;
    margin-right: 4px;
    vertical-align: middle;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif;
}
.nav-bar .cat-icon,
.media-row .cat-icon {
    width: 22px; height: 22px;
    background: #fff;
    padding: 2px;
    border-radius: 3px;
}

/* --- Lightbox Gallery --- */
.lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.lightbox.active { display: flex; }
.lightbox img {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.lightbox-close {
    position: absolute;
    top: 20px; right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    z-index: 10;
}
.lightbox-close:hover { color: var(--secondary); }
.lightbox-nav {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.lightbox-nav button {
    padding: 10px 20px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s;
}
.lightbox-nav button:hover { background: var(--secondary); color: #1a3a1a; }
.lightbox-caption {
    color: #fff;
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
}

/* --- Gallery Grid --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 15px;
}
.gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.gallery-item:hover { border-color: var(--secondary); }
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.gallery-item .gallery-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
}


/* --- Document Thumbnail --- */
.doc-thumb {
    max-width: 200px;
    max-height: 150px;
    border-radius: 4px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- Category Icon Wrapper (for fallback) --- */
.cat-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    margin-right: 6px;
    flex-shrink: 0;
}
.cat-fallback {
    font-size: 18px;
    margin: 0;
}
.nav-bar .cat-icon-wrap,
.media-row .cat-icon-wrap {
    width: 22px; height: 22px;
}

/* --- Mobile Sidebar --- */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9000;
    transition: opacity 0.3s ease;
}
.mobile-overlay.open {
    display: block;
    opacity: 1;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: #fff;
    z-index: 9001;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
    padding: 0;
}
.mobile-sidebar.open {
    right: 0;
}

.mobile-nav-content {
    padding: 0;
}

.mobile-section-title {
    background: var(--primary);
    color: #fff;
    padding: 12px 20px;
    font-family: 'Merriweather', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--secondary);
    position: sticky;
    top: 0;
    z-index: 2;
}

.mobile-links {
    display: flex;
    flex-direction: column;
}

.mobile-links a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    transition: all 0.2s;
    gap: 8px;
}

.mobile-links a:hover,
.mobile-links a:active {
    background: var(--secondary);
    color: #1a3a1a;
}

/* Fix sub-menu items in sidebar */
.mobile-links .sub-menu-item {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
}
.mobile-links .sub-menu-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.mobile-links .sub-menu-label {
    font-size: 14px;
    font-weight: 600;
    padding: 0;
}

/* Fix map-sport in sidebar */
.mobile-links .map-sport-left,
.mobile-links .map-sport-right {
    flex: none;
    width: 100%;
    border: none;
    padding: 0;
}
.mobile-links .map-sport-left a,
.mobile-links .map-sport-right a {
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

/* Fix content-cats in sidebar */
.mobile-links a {
    border-radius: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid #eee;
}

/* Fix media-row in sidebar */
.mobile-links .media-row {
    flex-direction: column;
    background: transparent;
    border: none;
}
.mobile-links .media-row a {
    background: transparent;
    color: var(--text-dark);
    border-bottom: 1px solid #eee;
}

/* Hamburger active state */
.hamburger.active {
    color: var(--secondary);
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .hamburger { display: block; }
    
    .main-layout { flex-direction: column; }
    .main-left { flex: 1; padding-right: 0; }
    .main-right { flex: 1; border-left: none; padding-left: 0; margin-top: 20px; }
    .sub-news-grid { grid-template-columns: 1fr; }
    .small-news-card-body h4 {
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
        font-size: 12px;
    }

    /* Hide desktop nav elements on mobile - they get cloned into sidebar */
    .nav-bar { display: none; }
    .sub-menu { display: none; }
    .media-row { display: none; }
    .map-sport-row { display: none; }
    .content-cats { display: none; }
    .podrucja-row { display: none; }
    
    .newsletter-row { flex-direction: column; text-align: center; }
    .newsletter-row input[type="email"] { width: 100%; }
    
    .lang-switcher { margin-left: 0; }
    .header { flex-wrap: wrap; }
    .header-title { font-size: 18px; }

    /* Ovdje su do 13. 10. 2026. stajala pravila za traku »Liturgijski
       kalendar« na uskome ekranu (poziv u svojem retku, `white-space:
       normal`). Trake više nema - vidi uklonjeni blok kod `.section-title`. */

    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* --- Admin Styles --- */
.admin-body {
    background: #f0f0f0;
    font-family: 'Open Sans', sans-serif;
}
.admin-container {
    max-width: 1100px;
    margin: 30px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    overflow: hidden;
}
.admin-header {
    background: var(--primary);
    color: #fff;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-header h2 {
    font-family: 'Merriweather', serif;
    font-size: 20px;
}
.admin-header a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}
.admin-header a:hover { background: rgba(255,255,255,0.3); }
.admin-content { padding: 25px; }
.admin-content h3 {
    font-family: 'Merriweather', serif;
    color: var(--primary);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--secondary);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}
.admin-table th {
    background: var(--dark-brown);
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}
.admin-table tr:hover td { background: #fdf5e6; }
.admin-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: 'Open Sans', sans-serif;
    transition: all 0.2s;
}
.admin-btn-edit { background: var(--primary); color: #fff; }
.admin-btn-edit:hover { background: var(--dark-bg); }
.admin-btn-delete { background: #c0392b; color: #fff; }
.admin-btn-delete:hover { background: #a93226; }
.admin-btn-add { background: var(--secondary); color: #1a3a1a; padding: 8px 20px; font-size: 13px; font-weight: 700; }
.admin-btn-add:hover { background: #8bbd2e; }
.admin-btn-save { background: var(--primary); color: #fff; padding: 10px 25px; font-size: 14px; }
.admin-btn-save:hover { background: var(--dark-bg); }
.admin-form-group { margin-bottom: 15px; }
.admin-form-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
    color: #333;
}
.admin-form-group input[type="text"],
.admin-form-group input[type="file"],
.admin-form-group input[type="date"],
.admin-form-group input[type="email"],
.admin-form-group textarea,
.admin-form-group select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}
.admin-form-group textarea { min-height: 100px; resize: vertical; }
.admin-form-group input:focus,
.admin-form-group textarea:focus,
.admin-form-group select:focus {
    border-color: var(--secondary);
    outline: none;
}
.admin-msg {
    padding: 12px 18px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 13px;
}
.admin-msg-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.admin-msg-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* --- Login --- */
.login-box {
    max-width: 400px;
    margin: 80px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    overflow: hidden;
}
.login-header {
    background: var(--primary);
    color: #fff;
    padding: 20px;
    text-align: center;
    font-family: 'Merriweather', serif;
    font-size: 20px;
}
.login-body { padding: 25px; }
.login-body input[type="text"],
.login-body input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}
.login-body input:focus { border-color: var(--secondary); outline: none; }
.login-body button {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.login-body button:hover { background: var(--secondary); color: #1a3a1a; }

/* --- Chart bars --- */
.chart-bar-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding: 10px 0;
}
.chart-bar {
    flex: 1;
    background: var(--secondary);
    border-radius: 3px 3px 0 0;
    min-width: 20px;
    position: relative;
    transition: height 0.3s;
}
.chart-bar:hover { background: var(--primary); }
.chart-bar-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #666;
    white-space: nowrap;
}
.chart-bar-value {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
}