/* =========================================
   OS "DOBRILA STAMBOLIĆ" — MAIN.CSS (1:1)
   Autor: Simple Look - Radnja za racunarsko programiranje - Svrljig
   Verzija: 1.0.4
   NAPOMENA: OVO JE JEDAN FAJL (assets/css/main.css)
   ========================================= */

/* =========================================
   1. OSNOVNA PODEŠAVANJA & PROMENLJIVE
   ========================================= */
:root {
    /* Boje - Royal Blue & Premium Gold */
    --primary: #0a2540;
    --primary-light: #163a5f;
    --gold: #d4af37;
    --gold-hover: #b5952f;

    /* Tekst i Pozadina */
    --text-main: #1e293b;
    --text-muted: #64748b;
    --bg-page: #f8fafc;
    --white: #ffffff;

    /* UI Elementi */
    --radius: 8px;
    --shadow: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-hover: 0 10px 25px rgba(0,0,0,0.1);
    --font: 'Poppins', sans-serif;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Apple-like smooth transition */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden; /* Sprečava horizontalni skrol */
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* =========================================
   2. UI KOMPONENTE (Back to Top, Buttons)
   ========================================= */
#backToTop {
    position: fixed; bottom: 30px; right: 30px;
    width: 45px; height: 45px; background: var(--gold);
    color: var(--primary); border: none; border-radius: 50%;
    font-size: 22px; cursor: pointer; display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 999;
    transition: var(--transition);
}
#backToTop:hover { transform: translateY(-5px); background: #b5952f; color: white; }

/* =========================================
   3. TOP BAR & HEADER
   ========================================= */
.top-bar { background: #020617; color: #cbd5e1; font-size: 0.85rem; padding: 8px 0; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
.top-flex i { color: var(--gold); margin-right: 5px; }
.top-right a { margin-left: 20px; font-weight: 500; }
.top-right a:hover { color: white; }

.site-header {
    background: var(--white); height: 90px;
    box-shadow: var(--shadow); position: sticky; top: 0; z-index: 1000;
    transition: height 0.3s;
}
.header-inner {
    display: flex; justify-content: space-between; align-items: center;
    height: 100%; position: relative; z-index: 1002; background: var(--white);
}

/* Logo */
.logo { display: flex; align-items: center; gap: 15px; }
.logo-icon {
    width: 50px; height: 50px; background: var(--primary); color: white;
    border-radius: var(--radius); display: flex; align-items: center;
    justify-content: center; font-size: 26px;
}
.logo-info h1 { font-size: 1.2rem; font-weight: 700; color: var(--primary); line-height: 1.2; }
.logo-info span { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.nav-right { display: flex; align-items: center; gap: 20px; }

/* Desktop Navigation */
.main-nav ul { display: flex; gap: 5px; }
.main-nav a {
    font-weight: 600; padding: 10px 18px; color: var(--primary);
    font-size: 0.95rem; border-radius: var(--radius);
	
}
.main-nav a:hover, .main-nav a.active { background: #f1f5f9; color: var(--gold); }

/* Dropdown (Desktop) */
.has-drop { position: relative; }
.dropdown {
    position: absolute; top: 100%; left: 0; background: var(--white);
    min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: var(--radius); padding: 10px 0;
    opacity: 0; visibility: hidden; transform: translateY(15px);
    transition: var(--transition);
    border-top: 3px solid var(--gold); display: flex; flex-direction: column;
}
.has-drop:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { width: 100%; }
.dropdown li a { display: block; width: 100%; padding: 10px 20px; font-size: 0.9rem; border-bottom: 1px solid #f8fafc; }
.dropdown li a:hover { background: #f8fafc; padding-left: 25px; color: var(--primary); }

/* Search Bar (Desktop Overlay) */
.search-btn {
    background: none; border: none; font-size: 1.4rem; color: var(--primary);
    cursor: pointer; padding: 0; width: 40px; height: 40px; border-radius: 50%;
    transition: var(--transition); display: flex; align-items: center; justify-content: center;
}
.search-btn:hover { background: #f1f5f9; color: var(--gold); }

.search-container {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: var(--white); padding: 20px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    z-index: 1001;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-container.active { opacity: 1; visibility: visible; transform: translateY(0); }

.search-form { display: flex; max-width: 600px; margin: 0 auto; border: 2px solid #e2e8f0; border-radius: 50px; overflow: hidden; }
.search-form input { flex: 1; border: none; padding: 15px 25px; font-family: var(--font); font-size: 1rem; outline: none; }
.search-form button { background: var(--primary); color: white; border: none; padding: 0 25px; cursor: pointer; font-size: 1.2rem; transition: 0.3s; }
.search-form button:hover { background: var(--gold); }

/* =========================================
   4. OFFCANVAS (MOBILNI MENI)
   ========================================= */
.offcanvas-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.offcanvas-overlay.active { opacity: 1; visibility: visible; }

.offcanvas-menu {
    position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
    background: white; z-index: 2001; transition: 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -5px 0 20px rgba(0,0,0,0.1); padding: 25px;
    overflow-y: auto; display: flex; flex-direction: column;
}
.offcanvas-menu.active { right: 0; }

.offcanvas-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #f1f5f9;
}
.offcanvas-header h3 { font-size: 1.2rem; color: var(--primary); font-weight: 700; }
#close-menu { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; transition: 0.3s; }
#close-menu:hover { color: var(--gold); transform: rotate(90deg); }

/* =========================================
   MOBILE SEARCH FINAL FIX
   ========================================= */

.mobile-search-box {
    margin-bottom: 15px;
    width: 100%;
}

.mobile-search-box .search-form {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f1f5f9;
    border-radius: 12px;
    height: 46px;
    box-sizing: border-box;
    overflow: hidden;
}

.mobile-search-box .search-form input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-family: var(--font);
    font-size: 0.95rem;
    outline: none;
    min-width: 0;
}

.mobile-search-box .search-form button {
    width: 46px;
    height: 46px;
    background: var(--primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-search-box .search-form button:hover {
    background: var(--gold);
    color: var(--primary);
}


/* Mobile Links */
.mobile-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; font-weight: 600; color: var(--primary);
    font-size: 1.05rem; border-radius: 8px; transition: 0.2s;
}
.nav-link:hover, .nav-link.active { background: #f8fafc; color: var(--primary); }

/* PILLS STYLE SUBMENU (Zaobljen sivi meni) */
.mob-sub-menu {
    display: none; flex-direction: column; gap: 8px;
    padding: 10px 0 10px 15px; /* Uvlačenje */
}
.mob-sub-menu li a {
    display: block; background: #f1f5f9; padding: 10px 15px;
    border-radius: 50px; font-size: 0.9rem; color: #475569;
    font-weight: 500; transition: 0.2s;
}
.mob-sub-menu li a:hover { background: var(--primary); color: white; }

/* Animacija otvaranja podmenija */
.mob-dropdown.active .mob-sub-menu { display: flex; }
.mob-dropdown.active .drop-trigger { color: var(--gold); }
.drop-trigger i { transition: 0.3s; }

/* =========================================
   5. DASHBOARD HERO (SLIDER + SERVICE PANEL)
   ========================================= */
.dashboard-grid {
    display: grid; grid-template-columns: 2.2fr 1fr; gap: 25px;
    margin-top: 40px; margin-bottom: 60px;
}

/* Slider */
.main-slider-container {
    position: relative; border-radius: var(--radius); overflow: hidden;
    height: 500px; box-shadow: var(--shadow);
}
.slider-wrapper { height: 100%; width: 100%; position: relative; }
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.8s ease; display: flex; align-items: flex-end;
}
.slide.active { opacity: 1; z-index: 1; }

.slide-content { padding: 50px; color: white; width: 100%; z-index: 2; position: relative; }
.tag {
    background: var(--gold); color: var(--primary); padding: 5px 15px;
    border-radius: 4px; font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; margin-bottom: 15px; display: inline-block;
}
.slide-content h2 {
    font-size: 2.5rem; font-weight: 700; margin-bottom: 10px;
    line-height: 1.2; text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.slide-content p { font-size: 1.2rem; color: #e2e8f0; }

.slider-controls {
    position: absolute; bottom: 40px; right: 40px;
    display: flex; gap: 15px; z-index: 5; align-items: center;
}
.slider-controls button {
    width: 45px; height: 45px; background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.5); color: white; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 24px; transition: 0.3s;
}
.slider-controls button:hover {
    background: var(--gold); border-color: var(--gold); color: var(--primary);
}
.slider-dots { display: flex; gap: 8px; }
.dot {
    width: 12px; height: 12px; background: rgba(255,255,255,0.5);
    border-radius: 50%; cursor: pointer; transition: 0.3s;
}
.dot.active { background: var(--gold); transform: scale(1.3); }

/* Service Panel (Desno) */
.service-panel { display: flex; flex-direction: column; gap: 15px; height: 500px; }
.panel-header {
    background: var(--primary); color: white; padding: 25px;
    border-radius: var(--radius);
}
.panel-header h3 { font-size: 1.4rem; margin-bottom: 5px; }

.service-btn {
    flex: 1; background: var(--white); border-radius: var(--radius);
    padding: 0 25px; display: flex; align-items: center; gap: 20px;
    box-shadow: var(--shadow); border-left: 5px solid transparent;
    transition: 0.3s; position: relative;
}
.service-btn:hover { transform: translateX(5px); border-left-color: var(--gold); }
.service-btn .icon {
    width: 50px; height: 50px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
/* Boje ikonica */
.ednevnik .icon { color: #dc2626; background: #fef2f2; } /* Red */
.schedule .icon { color: #2563eb; background: #eff6ff; } /* Blue */
.calendar .icon { color: #d97706; background: #fffbeb; } /* Orange */
.bell .icon { color: #16a34a; background: #f0fdf4; } /* Green */

.service-btn strong { font-size: 1.1rem; color: var(--text-main); display: block; }
.service-btn span { font-size: 0.85rem; color: var(--text-muted); }

/* =========================================
   6. CONTENT GRID (VESTI & SIDEBAR)
   ========================================= */
.content-section { margin-bottom: 80px; }
.content-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 40px; }

/* Section Title */
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.title-left { display: flex; align-items: center; gap: 15px; width: 70%; }
.title-left h2 { font-size: 1.8rem; color: var(--primary); font-weight: 700; white-space: nowrap; }
.title-left .line { width: 100%; height: 2px; background: #e2e8f0; position: relative; }
.title-left .line::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 60px; background: var(--gold); }
.archive-link { color: var(--primary); font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; }
.archive-link:hover { color: var(--gold); gap: 10px; }

/* News Grid 2x2 */
.news-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.news-card {
    background: var(--white); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); transition: 0.3s;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.nc-img { position: relative; height: 200px; overflow: hidden; }
.nc-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.news-card:hover .nc-img img { transform: scale(1.05); }

.nc-content { padding: 25px; }
.nc-cat {
    font-size: 0.75rem; text-transform: uppercase; color: var(--gold-hover);
    font-weight: 700; margin-bottom: 8px; display: block;
}
.nc-content h3 a {
    font-size: 1.2rem; font-weight: 700; color: var(--text-main);
    margin-bottom: 10px; display: block; line-height: 1.3;
}
.nc-content h3 a:hover { color: var(--primary); }
.nc-content p { font-size: 0.95rem; color: var(--text-muted); }

/* Director Sidebar */
.director-widget {
    background: var(--white); border-radius: var(--radius); padding: 40px 30px;
    text-align: center; box-shadow: var(--shadow); border-top: 5px solid var(--primary);
    position: sticky; top: 130px;
}
.dir-head img {
    width: 140px; height: 140px; border-radius: 50%; border: 5px solid #f8fafc;
    margin: 0 auto 20px; object-fit: cover;
}
.dir-body h3 { font-size: 1.4rem; color: var(--primary); margin-bottom: 5px; }
.dir-body span {
    color: var(--gold-hover); font-weight: 600; text-transform: uppercase;
    font-size: 0.85rem; display: block; margin-bottom: 20px;
}
.quote-box {
    font-style: italic; color: #555; background: #f8fafc; padding: 20px;
    border-radius: 8px; position: relative; margin-bottom: 25px;
}
.quote-box i { font-size: 2rem; color: #e2e8f0; display: block; margin-bottom: 10px; }
.btn-dir {
    display: inline-block; padding: 10px 30px; border: 2px solid var(--primary);
    color: var(--primary); font-weight: 600; border-radius: 50px; transition: 0.3s;
}
.btn-dir:hover { background: var(--primary); color: white; }

/* =========================================
   7. PARTNERS & FOOTER
   ========================================= */
.partners-section { background: #0f172a; padding: 60px 0; text-align: center; }
.partners-section h3 { color: white; margin-bottom: 40px; font-size: 1.5rem; opacity: 0.9; }
.partners-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.partner-item {
    background: rgba(255,255,255,0.05); color: #cbd5e1; padding: 20px 40px;
    border-radius: var(--radius); display: flex; align-items: center; gap: 15px;
    font-weight: 500; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s;
    min-width: 250px;
}
.partner-item:hover {
    background: var(--gold); color: var(--primary); border-color: var(--gold);
    transform: translateY(-5px);
}
.partner-item i { font-size: 1.8rem; }

/* Footer */
.site-footer { background: #020617; color: #94a3b8; padding-top: 80px; }
.footer-inner {
    display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 50px;
    padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ft-logo { font-size: 3rem; color: var(--gold); margin-bottom: 15px; }
.ft-brand h4 { color: white; font-size: 1.3rem; margin-bottom: 15px; }
.ft-brand p { font-size: 0.95rem; line-height: 1.6; max-width: 350px; margin-bottom: 25px; }
.ft-social a { font-size: 1.5rem; color: #64748b; margin-right: 15px; transition: 0.3s; }
.ft-social a:hover { color: var(--gold); }

.ft-links h4, .ft-contact h4 {
    color: white; font-size: 1.1rem; margin-bottom: 25px;
    position: relative; display: inline-block;
}
.ft-links h4::after {
    content: ''; position: absolute; bottom: -8px; left: 0;
    width: 30px; height: 2px; background: var(--gold);
}
.ft-links ul li { margin-bottom: 12px; }
.ft-links a:hover { color: var(--gold); padding-left: 5px; }

.ft-contact ul li { display: flex; gap: 15px; margin-bottom: 15px; font-size: 0.95rem; }
.ft-contact i { color: var(--gold); font-size: 1.2rem; margin-top: 3px; }

.ft-bottom { background: black; padding: 25px 0; text-align: center; font-size: 0.85rem; color: #555; }

/* =========================================
   8. SINGLE POST STYLES
   ========================================= */
.breadcrumbs {
    margin-bottom: 20px; color: var(--text-muted); font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px;
}
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs i { font-size: 0.8rem; }
.breadcrumbs span { color: var(--text-main); font-weight: 500; }

.single-post-card {
    background: var(--white); border-radius: var(--radius);
    padding: 40px; box-shadow: var(--shadow);
}
.post-header { margin-bottom: 30px; }
.post-cat {
    display: inline-block; background: var(--gold); color: var(--primary);
    padding: 5px 15px; border-radius: 4px; font-weight: 700;
    font-size: 0.85rem; text-transform: uppercase; margin-bottom: 15px;
}
.post-header h1 { font-size: 2.2rem; line-height: 1.2; color: var(--primary); margin-bottom: 15px; }
.post-meta {
    display: flex; gap: 20px; color: var(--text-muted); font-size: 0.9rem;
    border-bottom: 1px solid #f1f5f9; padding-bottom: 20px;
}
.post-featured-image { margin-bottom: 40px; border-radius: var(--radius); overflow: hidden; }

/* Article Typography */
.post-body { font-size: 1.1rem; line-height: 1.8; color: #334155; }
.post-body p { margin-bottom: 20px; }
.post-body h3 { font-size: 1.5rem; color: var(--primary); margin-top: 40px; margin-bottom: 20px; font-weight: 700; }
.post-body blockquote {
    background: #f8fafc; border-left: 5px solid var(--gold);
    padding: 20px 30px; margin: 30px 0; font-style: italic;
    color: var(--text-main); font-size: 1.2rem; border-radius: 0 8px 8px 0;
}
.post-body blockquote cite {
    display: block; margin-top: 10px; font-size: 0.9rem;
    color: var(--text-muted); font-style: normal; font-weight: 600;
}
.lead { font-size: 1.25rem; font-weight: 500; color: var(--text-main); }

/* Gallery Grid */
.post-gallery { margin-top: 50px; padding-top: 30px; border-top: 1px solid #f1f5f9; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.gallery-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; transition: 0.3s; cursor: pointer; }
.gallery-grid img:hover { transform: scale(1.05); }

/* Sidebar Widget */
.sidebar-widget {
    background: var(--white); border-radius: var(--radius); padding: 30px;
    box-shadow: var(--shadow); margin-top: 30px; border-top: 4px solid var(--gold);
}
.sidebar-widget h3 { font-size: 1.2rem; color: var(--primary); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.widget-news-item { display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px dashed #e2e8f0; transition: 0.2s; }
.widget-news-item:last-child { border: none; }
.widget-news-item:hover { transform: translateX(5px); }
.wn-date { font-weight: 700; color: var(--gold-hover); font-size: 0.85rem; min-width: 45px; }
.wn-title { font-weight: 600; color: var(--text-main); font-size: 0.95rem; line-height: 1.3; }

/* =========================================
   9. RESPONSIVE (MEDIA QUERIES)
   ========================================= */
.mobile-toggle { display: none; color: var(--primary); font-size: 2rem; cursor: pointer; }

@media (max-width: 1024px) {
    .dashboard-grid, .content-grid { grid-template-columns: 1fr; }
    .main-slider-container { height: 400px; }
    .service-panel { height: auto; display: grid; grid-template-columns: 1fr 1fr; }
    .news-grid-4 { gap: 20px; }
    .director-widget { position: static; margin-top: 30px; }
}

@media (max-width: 768px) {
    /* Hide Desktop Elements */
    .top-bar, .main-nav, .search-btn { display: none; }
    .mobile-toggle { display: block; }

    /* Dashboard Mobile */
    .dashboard-grid { margin-top: 20px; gap: 20px; }
    .main-slider-container { height: 350px; }
    .slider-controls { right: 20px; bottom: 20px; }
    .slide-content { padding: 20px; }
    .slide-content h2 { font-size: 1.5rem; }

    /* Service Panel */
    .service-panel { display: flex; flex-direction: column; height: auto; gap: 15px; }
    .service-btn { padding: 15px 20px; width: 100%; flex: auto; }

    .news-grid-4 { grid-template-columns: 1fr; }

    /* Centered Footer */
    .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .ft-brand p { margin: 0 auto 25px; }
    .ft-contact ul li { justify-content: center; }
    .ft-links h4::after, .ft-contact h4::after { left: 50%; transform: translateX(-50%); }
    .partner-item { width: 100%; justify-content: center; }

    .section-title { flex-direction: column; align-items: flex-start; gap: 10px; }
    .title-left { width: 100%; }

    /* Single Post Mobile */
    .single-post-card { padding: 20px; }
    .post-header h1 { font-size: 1.6rem; }
    .post-meta { flex-direction: column; gap: 10px; }
    .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================
   10. SINGLE POST & TYPOGRAPHY (PRO)
   ========================================= */

/* Sidebar Override for Single Page (Not Sticky) */
.single-sidebar .director-widget {
    position: static; /* Isključuje sticky */
    margin-bottom: 30px;
}

/* Breadcrumbs */
.breadcrumbs {
    margin-bottom: 25px; color: var(--text-muted); font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs i { font-size: 0.8rem; }
.breadcrumbs span { color: var(--text-main); font-weight: 500; }

/* Single Post Container */
.single-post-card {
    background: var(--white); border-radius: var(--radius);
    padding: 50px; box-shadow: var(--shadow);
}

/* Header Vesti */
.post-header { margin-bottom: 30px; border-bottom: 1px solid #f1f5f9; padding-bottom: 20px; }
.post-cat {
    display: inline-block; background: var(--gold); color: var(--primary);
    padding: 5px 15px; border-radius: 4px; font-weight: 700;
    font-size: 0.85rem; text-transform: uppercase; margin-bottom: 15px;
}
.post-header h1 { font-size: 2.4rem; line-height: 1.2; color: var(--primary); margin-bottom: 15px; }
.post-meta { display: flex; gap: 20px; color: var(--text-muted); font-size: 0.9rem; flex-wrap: wrap; }
.post-meta span { display: flex; align-items: center; gap: 6px; }

.post-featured-image { margin-bottom: 40px; border-radius: var(--radius); overflow: hidden; }
.post-featured-image img { width: 100%; height: auto; display: block; }

/* =========================================
   UNIFIED TYPOGRAPHY SYSTEM (PREMIUM)
   ========================================= */

.typography {
    font-size: 1.08rem;
    line-height: 1.75;
    color: #334155;
}

/* Paragraph rhythm */
.typography p {
    margin-bottom: 22px;
}

/* Lead paragraph */
.typography .lead {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Headings hierarchy */
.typography h1 {
    font-size: 2.2rem;
    line-height: 1.25;
    margin: 30px 0 15px;
    color: var(--primary);
}

.typography h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 40px 0 18px;
    color: var(--primary);
}

.typography h3 {
    font-size: 1.45rem;
    line-height: 1.35;
    margin: 35px 0 15px;
    color: var(--primary);
}

.typography h4 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 28px 0 12px;
    color: var(--text-main);
}

/* Lists */
.typography ul,
.typography ol {
    margin: 20px 0 25px;
    padding-left: 22px;
}

.typography li {
    margin-bottom: 8px;
}

.typography li::marker {
    color: var(--gold);
}

/* Blockquote */
.typography blockquote {
    background: #f8fafc;
    border-left: 4px solid var(--gold);
    padding: 22px 28px;
    margin: 30px 0;
    font-style: italic;
    font-size: 1.15rem;
    border-radius: 0 8px 8px 0;
}

/* =========================================
   IMAGE SYSTEM (CONSISTENT)
   ========================================= */

/* Sve slike u contentu */
.typography img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 25px 0;
    display: block;
}

/* Gutenberg figure */
.typography figure {
    margin: 35px 0;
    text-align: center;
}

/* Slika u figure */
.typography figure img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Caption */
.typography figcaption,
.typography .wp-caption-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
    line-height: 1.5;
    padding: 0 10px;
}

/* Gutenberg align klase */
.typography .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.typography .alignleft {
    float: left;
    margin: 10px 25px 15px 0;
    max-width: 48%;
}

.typography .alignright {
    float: right;
    margin: 10px 0 15px 25px;
    max-width: 48%;
}

.typography .alignwide,
.typography .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Spreči lom layouta */
.single-post-card,
.full-width-card {
    overflow: hidden;
}

.single-post-card img,
.full-width-card img {
    max-width: 100% !important;
    height: auto !important;
}

/* =========================================
   MOBILE TYPOGRAPHY
   ========================================= */

@media (max-width: 768px) {
    .typography {
        font-size: 1rem;
        line-height: 1.7;
    }

    .typography h1 {
        font-size: 1.6rem;
    }

    .typography h2 {
        font-size: 1.45rem;
    }

    .typography h3 {
        font-size: 1.25rem;
    }

    .typography .alignleft,
    .typography .alignright {
        float: none;
        margin: 20px 0;
        max-width: 100%;
    }
}



/* =========================================
   11. FULL WIDTH PAGE STYLES
   ========================================= */

/* Page Header Section */
.page-header-section {
    background: var(--primary);
    padding: 60px 0 80px;
    text-align: center;
    color: var(--white);
    margin-bottom: -40px; /* Overlap effect */
}
.page-header-section h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; }
.page-header-section p { font-size: 1.1rem; opacity: 0.9; }
.page-header-section .breadcrumbs { justify-content: center; color: rgba(255,255,255,0.7); }
.page-header-section .breadcrumbs a:hover { color: var(--gold); }
.page-header-section .breadcrumbs span { color: var(--gold); }

/* Full Width Card Container */
.full-width-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 50px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    position: relative;
    z-index: 2; /* Da ide preko page-header-a */
}

/* Grid Layout (Text + Image) */
.fw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.fw-image img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-hover); }

/* Section Headers inside Card */
.fw-header { margin-bottom: 30px; text-align: center; }
.fw-header h2 { font-size: 2rem; color: var(--primary); font-weight: 700; display: inline-block; position: relative; }
.fw-header .line { width: 60px; height: 3px; background: var(--gold); margin: 10px auto 0; }

/* Team Grid */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.team-card { text-align: center; transition: 0.3s; padding: 20px; border-radius: var(--radius); border: 1px solid transparent; }
.team-card:hover { border-color: #e2e8f0; box-shadow: var(--shadow); transform: translateY(-5px); }
.team-img img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #f8fafc; margin-bottom: 15px; }
.team-info h4 { font-size: 1.1rem; color: var(--primary); margin-bottom: 5px; font-weight: 700; }
.team-info span { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* Accordion (FAQ) */
.accordion { display: flex; flex-direction: column; gap: 15px; }
.accordion-item { border: 1px solid #e2e8f0; border-radius: var(--radius); overflow: hidden; transition: 0.3s; }
.accordion-header {
    background: #f8fafc; padding: 15px 25px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; color: var(--primary); transition: 0.2s;
}
.accordion-header:hover { background: #f1f5f9; }
.accordion-body {
    padding: 0 25px; max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    background: var(--white); color: var(--text-muted);
}
/* Active State */
.accordion-item.active { border-color: var(--gold); }
.accordion-item.active .accordion-header { background: var(--primary); color: var(--white); }
.accordion-item.active .accordion-body { padding: 20px 25px; max-height: 200px; }
.accordion-item.active i { transform: rotate(180deg); }

/* CTA Full Section */
.cta-full { background: var(--primary); padding: 60px 0; text-align: center; color: white; margin-top: 60px; }
.cta-full h2 { font-size: 2rem; margin-bottom: 15px; }
.cta-full p { margin-bottom: 30px; font-size: 1.1rem; opacity: 0.9; }
.btn-cta { background: var(--gold); color: var(--primary); padding: 12px 30px; border-radius: 50px; font-weight: 700; font-size: 1rem; }
.btn-cta:hover { background: white; transform: translateY(-3px); }

/* Responsive Full Width */
@media (max-width: 992px) {
    .fw-grid { grid-template-columns: 1fr; }
    .fw-image { order: -1; }
    .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .full-width-card { padding: 25px; }
    .team-grid { grid-template-columns: 1fr; }
    .page-header-section h1 { font-size: 1.8rem; }
}
/* =========================================
   PAGE CONTENT IMAGE CONTROL
   ========================================= */

/* Ograniči slike unutar page sadržaja */
.full-width-card .typography img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 25px 0;
}

.typography .alignwide,
.typography .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}


/* Sprečava prevelike slike da razvale layout */
.full-width-card .typography {
    overflow: hidden;
}

.typography img {
    border-radius: var(--radius);
    margin: 25px 0;
}



/* =========================================
   12. CONTACT PAGE STYLES
   ========================================= */

/* Contact Header Tweaks */
.contact-header { margin-bottom: -60px; padding-bottom: 100px; }

/* Contact Cards (Grid) */
.contact-info-section { position: relative; z-index: 5; margin-bottom: 60px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.contact-card {
    background: var(--white); padding: 40px 20px; border-radius: var(--radius);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); text-align: center;
    transition: 0.3s; border-bottom: 4px solid transparent;
}
.contact-card:hover { transform: translateY(-10px); border-bottom-color: var(--gold); }

.cc-icon {
    width: 70px; height: 70px; background: #f8fafc; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--primary); margin: 0 auto 20px;
    transition: 0.3s;
}
.contact-card:hover .cc-icon { background: var(--primary); color: var(--gold); }

.contact-card h3 { font-size: 1.2rem; color: var(--primary); margin-bottom: 15px; font-weight: 700; }
.contact-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 5px; line-height: 1.6; }
.contact-card a { font-weight: 500; color: var(--primary); }
.contact-card a:hover { color: var(--gold-hover); }

/* Map & Form Section */
.map-form-section { margin-bottom: 80px; }
.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); background: var(--white); }

/* Form Wrapper */
.form-wrapper { padding: 50px; background: var(--white); }
.form-header { margin-bottom: 30px; }
.form-header h2 { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }
.form-header p { color: var(--text-muted); }

/* Form Styles */
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-bottom: 8px; }

.input-icon-wrap { position: relative; }
.input-icon-wrap i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1.2rem; }
.input-icon-wrap input { padding-left: 45px; }

.contact-form input, .contact-form textarea {
    width: 100%; padding: 12px 15px; border: 2px solid #e2e8f0;
    border-radius: 8px; font-family: var(--font); font-size: 0.95rem;
    transition: 0.3s; outline: none; color: var(--text-main);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1); }
.contact-form textarea { resize: vertical; padding: 15px; }

.btn-submit {
    background: var(--primary); color: white; border: none;
    padding: 15px 30px; border-radius: 50px; font-size: 1rem; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
    transition: 0.3s; width: 100%; justify-content: center;
}
.btn-submit:hover { background: var(--gold); color: var(--primary); }

/* Map Wrapper */
.map-wrapper { height: 100%; min-height: 500px; position: relative; }
.map-wrapper iframe { filter: grayscale(20%); transition: 0.5s; width: 100%; height: 100%; border: 0; }
.map-wrapper iframe:hover { filter: grayscale(0%); }

/* Responsive Contact */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; gap: 20px; }
    .contact-header { margin-bottom: 0; padding-bottom: 60px; }
    .contact-info-section { margin-top: -30px; }

    .mf-grid { grid-template-columns: 1fr; }
    .map-wrapper { height: 400px; order: -1; }
    .form-wrapper { padding: 30px; }
    .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================
   13. DOCUMENTS REPOSITORY STYLES
   ========================================= */

/* Filter Bar */
.doc-filter-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--white); padding: 15px 25px;
    border-radius: var(--radius); box-shadow: var(--shadow);
    margin-bottom: 30px; flex-wrap: wrap; gap: 20px;
}

.filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-btn {
    background: #f1f5f9; border: none; padding: 10px 20px;
    border-radius: 50px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: 0.2s; font-family: var(--font);
}
.filter-btn:hover { background: #e2e8f0; color: var(--primary); }
.filter-btn.active { background: var(--primary); color: white; }

.doc-search {
    display: flex; align-items: center; background: #f8fafc;
    border: 1px solid #e2e8f0; padding: 8px 15px; border-radius: 50px;
    min-width: 250px;
}
.doc-search i { color: var(--text-muted); margin-right: 10px; }
.doc-search input { border: none; background: transparent; outline: none; width: 100%; font-family: var(--font); }

/* Document List */
.doc-repository {
    background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 40px;
}

.doc-cat-title {
    font-size: 1.1rem; color: var(--primary); margin: 30px 0 20px;
    padding-bottom: 10px; border-bottom: 2px solid #f1f5f9;
    display: flex; align-items: center; gap: 10px;
}
.doc-cat-title:first-child { margin-top: 0; }

/* Document Item */
.doc-item {
    display: flex; align-items: center; gap: 20px;
    padding: 20px; border: 1px solid #f1f5f9; border-radius: 12px;
    margin-bottom: 15px; transition: 0.3s;
}
.doc-item:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-hover);
    border-color: var(--gold); background: #fffdf5;
}

/* Icons (Color Coded) */
.doc-icon {
    width: 60px; height: 60px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; flex-shrink: 0;
}
.doc-icon.pdf { background: #fee2e2; color: #dc2626; } /* Red */
.doc-icon.doc { background: #eff6ff; color: #2563eb; } /* Blue */
.doc-icon.xls { background: #f0fdf4; color: #16a34a; } /* Green */

/* Content */
.doc-details { flex-grow: 1; }
.doc-details h4 { font-size: 1.1rem; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }

.doc-meta { display: flex; gap: 15px; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); align-items: center; }
.dm-tag { background: #f1f5f9; padding: 2px 10px; border-radius: 4px; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; }
.doc-meta span i { margin-right: 5px; color: var(--gold); }

/* Download Button */
.doc-download-btn {
    background: white; border: 2px solid #e2e8f0; color: var(--primary);
    padding: 10px 20px; border-radius: 50px; font-weight: 600;
    font-size: 0.9rem; display: flex; align-items: center; gap: 8px;
    transition: 0.2s; white-space: nowrap;
}
.doc-download-btn:hover {
    background: var(--primary); color: white; border-color: var(--primary);
}

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.pagination a {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: var(--white); border-radius: 50%; color: var(--text-main);
    font-weight: 600; transition: 0.2s; border: 1px solid #e2e8f0;
}
.pagination a:hover, .pagination a.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Responsive Documents */
@media (max-width: 768px) {
    .doc-filter-bar { flex-direction: column; align-items: stretch; }
    .filter-tabs { overflow-x: auto; padding-bottom: 5px; }
    .filter-btn { white-space: nowrap; }

    .doc-item { flex-direction: column; align-items: flex-start; gap: 15px; }
    .doc-icon { width: 50px; height: 50px; font-size: 24px; }
    .doc-details h4 { font-size: 1rem; line-height: 1.4; }
    .doc-meta { gap: 10px; }
    .doc-download-btn { width: 100%; justify-content: center; margin-top: 5px; }
}

/* =========================================
   WP NAV FIX (Desktop menu 1 linija + dropdown)
   ========================================= */

/* Drži meni u jednoj liniji */
.header-inner{ gap: 24px; }
.logo{ flex: 0 0 auto; }
.nav-right{ flex: 1 1 auto; justify-content: flex-end; }

.main-nav{ flex: 1 1 auto; }
.main-nav > ul{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 6px;
  flex-wrap: nowrap;            /* <-- ne dozvoli lomljenje u novi red */
  white-space: nowrap;          /* <-- spreči prelamanje teksta */
}

/* WP li */
.main-nav li{
  position: relative;
  flex: 0 0 auto;
}

/* Linkovi */
.main-nav a{
  display:flex;
  align-items:center;
  gap: 8px;
  line-height: 1;
  padding: 10px 14px;           /* malo manje od 18 da stane */
  white-space: nowrap;
  text-transform: uppercase;
}

/* Ako ima ikonica strelice u linku */
.main-nav a i{
  font-size: 18px;
  line-height: 1;
}

/* ===== WP dropdown: WP koristi .menu-item-has-children i .sub-menu ===== */
.main-nav li.menu-item-has-children > .sub-menu{
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-radius: var(--radius);
  padding: 10px 0;
  border-top: 3px solid var(--gold);

  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: var(--transition);

  display:flex;
  flex-direction: column;
  z-index: 3000;
}

.main-nav li.menu-item-has-children > .sub-menu li{ width:100%; }
.main-nav li.menu-item-has-children > .sub-menu a{
  display:block;
  width:100%;
  padding: 10px 20px;
  font-size: 0.9rem;
  border-bottom: 1px solid #f8fafc;
}
.main-nav li.menu-item-has-children > .sub-menu a:hover{
  background:#f8fafc;
  padding-left:25px;
  color: var(--primary);
}

/* Hover + fokus (tastatura) */
.main-nav li.menu-item-has-children:hover > .sub-menu,
.main-nav li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* JS open state (touch/click) */
.main-nav li.menu-item-has-children.is-open > .sub-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* Sitno zatezanje za 1200-1024 da ne puca */
@media (max-width: 1200px){
  .main-nav a{ padding: 10px 12px; font-size: 0.92rem; }
}

/* =========================================
   MOBILE NAV WP FIX
   ========================================= */

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* WP dropdown -> mob-dropdown stil */
.mobile-nav li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Submenu stil */
.mobile-nav .sub-menu {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 10px 15px;
}

.mobile-nav .sub-menu li a {
    display: block;
    background: #f1f5f9;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
    transition: 0.2s;
}

.mobile-nav .sub-menu li a:hover {
    background: var(--primary);
    color: white;
}

/* aktivan dropdown */
.mobile-nav li.open > .sub-menu {
    display: flex;
}
/* =========================================
   MOBILE NAV MAIN LINKS (WP FIX)
   ========================================= */

.mobile-nav > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    font-weight: 600;
    color: var(--primary);
    font-size: 1.05rem;
    border-radius: 8px;
    transition: 0.2s;
}

.mobile-nav > li > a:hover,
.mobile-nav > li.current-menu-item > a {
    background: #f8fafc;
    color: var(--primary);
}
.mobile-nav li.current-menu-item > a {
    background: var(--gold);
    color: var(--primary);
}

/* =========================================
   FINAL IMAGE + CAPTION SYSTEM (OVERRIDE)
   ========================================= */

.single-post-card .typography figure,
.single-post-card .typography .wp-block-image,
.full-width-card .typography figure,
.full-width-card .typography .wp-block-image,
.typography figure,
.typography .wp-block-image{
  display:block;
  max-width:100%;
  margin:30px 0;
  text-align:center;
}

.single-post-card .typography img,
.single-post-card .typography figure img,
.single-post-card .typography .wp-block-image img,
.full-width-card .typography img,
.full-width-card .typography figure img,
.full-width-card .typography .wp-block-image img,
.typography img,
.typography figure img,
.typography .wp-block-image img{
  max-width:100% !important;
  height:auto !important;
  width:auto !important;
  display:block !important;
  margin:0 auto !important;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.single-post-card .typography figcaption,
.single-post-card .typography .wp-caption-text,
.single-post-card .typography .wp-block-image figcaption,
.full-width-card .typography figcaption,
.full-width-card .typography .wp-caption-text,
.full-width-card .typography .wp-block-image figcaption,
.typography figcaption,
.typography .wp-caption-text,
.typography .wp-block-image figcaption{
  display:block;
  margin-top:8px;
  text-align:center;
  font-size:.9rem;
  color:var(--text-muted);
  font-style:italic;
  line-height:1.5;
  padding:0 10px;
}

/* WP classic caption container fix (bitno) */
.wp-caption{
  max-width:100% !important;
}
.wp-caption img{
  max-width:100% !important;
  height:auto !important;
}

/* Align left/right */
.typography .alignleft{
  float:left;
  margin:10px 25px 15px 0;
  max-width:45%;
}
.typography .alignright{
  float:right;
  margin:10px 0 15px 25px;
  max-width:45%;
}
.typography .aligncenter{
  margin-left:auto;
  margin-right:auto;
}

.single-post-card,
.full-width-card{
  overflow:hidden;
}

@media (max-width:768px){
  .typography .alignleft,
  .typography .alignright{
    float:none;
    margin:20px 0;
    max-width:100%;
  }
}
/* =========================================
   HOTFIX: WP inline caption width + emoji fix
   (stavi NA SAM KRAJ main.css)
   ========================================= */

/* 1) Ubija inline width="2560px" na wp-caption/figure */
.single-post-card .typography figure.wp-caption,
.full-width-card .typography figure.wp-caption,
.single-post-card .typography .wp-caption,
.full-width-card .typography .wp-caption{
  width: auto !important;
  max-width: 100% !important;
}

/* Nekad WP stavi style direktno na figure */
.single-post-card .typography figure[style],
.full-width-card .typography figure[style]{
  width: auto !important;
  max-width: 100% !important;
}

/* 2) Slika u caption-u mora da bude responsive */
.single-post-card .typography figure.wp-caption > img,
.full-width-card .typography figure.wp-caption > img,
.single-post-card .typography .wp-caption > img,
.full-width-card .typography .wp-caption > img{
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 3) Gutenberg image block isto */
.single-post-card .typography .wp-block-image,
.full-width-card .typography .wp-block-image{
  max-width: 100% !important;
}

/* 4) Emoji: NE diraj ih kao “slike” */
.typography img.emoji,
.typography img[alt].emoji{
  display: inline !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  vertical-align: -0.15em;
}

/* 5) SVE ostale slike u contentu (osim emoji) */
.typography img:not(.emoji){
  max-width: 100% !important;
  height: auto !important;
}

/* =========================================
   MOBILE TIGHTEN PACK (ADD AT END OF main.css)
   - smanjuje padding/gap
   - ujednačava typography
   - slider kontrole prebacuje TOP RIGHT da ne prekrivaju tekst
   ========================================= */

@media (max-width: 768px){

  /* Global spacing */
  .container{ padding: 0 14px; }

  .dashboard-grid{ margin-top: 16px; gap: 14px; margin-bottom: 34px; }
  .content-section{ margin-bottom: 48px; }
  .content-grid{ gap: 18px; }

  /* Cards / boxes padding */
  .single-post-card{ padding: 18px !important; }
  .full-width-card{ padding: 18px !important; }

  .panel-header{ padding: 16px; }
  .service-btn{ padding: 12px 14px; gap: 12px; }
  .service-btn .icon{ width: 44px; height: 44px; font-size: 22px; border-radius: 10px; }

  .nc-content{ padding: 16px; }
  .sidebar-widget{ padding: 18px; }

  /* Section title tighten */
  .section-title{ gap: 8px; margin-bottom: 16px; }
  .title-left h2{ font-size: 1.35rem; }
  .archive-link{ font-size: .9rem; }

  /* News images a bit smaller */
  .nc-img{ height: 180px; }

  /* Typography consistency (mobile) */
  .typography{
    font-size: 1rem;
    line-height: 1.7;
  }
  .typography p{ margin-bottom: 16px; }
  .typography h1{ font-size: 1.55rem; margin: 22px 0 12px; }
  .typography h2{ font-size: 1.35rem; margin: 26px 0 12px; }
  .typography h3{ font-size: 1.2rem;  margin: 22px 0 10px; }

  /* Breadcrumbs tighten */
  .breadcrumbs{ margin-bottom: 14px; gap: 6px; }

  /* ===== SLIDER: kontrole gore desno (ne preko teksta) ===== */
  .main-slider-container{ height: 340px; }

  .slide-content{
    padding: 18px;
    /* malo više “donjeg prostora” da tekst diše */
    padding-bottom: 34px;
  }
  .slide-content h2{ font-size: 1.45rem; line-height: 1.2; margin-bottom: 8px; }
  .slide-content p{ font-size: 1rem; }

  .slider-controls{
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;

    /* da se lepo vidi preko slike */
    background: rgba(2, 6, 23, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;

    padding: 6px 8px;
    gap: 10px;
  }

  .slider-controls button{
    width: 36px;
    height: 36px;
    font-size: 20px;
    border-width: 1px;
    background: rgba(255,255,255,0.18);
  }

  .slider-dots{ gap: 6px; }
  .dot{ width: 9px; height: 9px; }
  .dot.active{ transform: scale(1.25); }

  /* Ako ti tag previše “pojede” prostor */
  .tag{ font-size: .72rem; padding: 4px 12px; margin-bottom: 10px; }

  /* Footer spacing */
  .site-footer{ padding-top: 52px; }
  .footer-inner{ gap: 26px; padding-bottom: 34px; }
  .partner-item{ min-width: unset; padding: 16px 18px; }
}

/* HERO SLIDE LINK + CTA */
.slide{ position:absolute; }
.slide-link{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
}
.slide-content{
  position:relative;
  z-index:2;
}

.slide-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding:12px 18px;
  border-radius:999px;
  background: var(--gold);
  color: var(--primary);
  font-weight:700;
  font-size:0.95rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  transition: var(--transition);
}
.slide-cta:hover{
  transform: translateY(-2px);
  background: var(--gold-hover);
  color:#fff;
}
/* =========================================
   SEARCH PAGE (FIX)
   ========================================= */
.search-header{
  margin: 10px 0 30px;
}

.search-title{
  font-size: 2.2rem;
  color: var(--primary);
  line-height: 1.15;
  margin-bottom: 10px;
}
.search-title span{ color: var(--gold-hover); }

.search-count{
  color: var(--text-muted);
  margin-bottom: 18px;
  font-size: 0.95rem;
}

.search-form-wrap{ max-width: 720px; }

.search-results-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.search-card .nc-img{ height: 210px; }
.search-card .nc-content{ padding: 22px; }

.search-readmore{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 700;
  color: var(--primary);
}
.search-readmore:hover{ color: var(--gold-hover); gap: 12px; }

.search-pagination{
  margin-top: 35px;
}

/* Search form (WP default) to match theme */
.search-form{
  display:flex;
  width:100%;
  border: 2px solid #e2e8f0;
  border-radius: 999px;
  overflow:hidden;
  background: var(--white);
}
.search-form label{ flex: 1; }
.search-form .search-field{
  width:100%;
  border:none;
  padding: 14px 18px;
  outline:none;
  font-family: var(--font);
}
.search-form .search-submit{
  border:none;
  background: var(--primary);
  color:#fff;
  padding: 0 22px;
  cursor:pointer;
  font-weight: 700;
}
.search-form .search-submit:hover{
  background: var(--gold);
  color: var(--primary);
}

/* Responsive */
@media (max-width: 1024px){
  .search-results-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .search-title{ font-size: 1.6rem; }
  .search-results-grid{ grid-template-columns: 1fr; gap: 18px; }
  .search-card .nc-content{ padding: 18px; }
  .search-card .nc-img{ height: 190px; }
}

/* =========================================
   SINGLE: TAGS + SHARE (ADD AT END)
   ========================================= */

/* TAGOVI */
.post-tags{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-tags > span{
  font-weight: 800;
  color: var(--primary);
  font-size: 0.95rem;
  letter-spacing: .2px;
}

.tags-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.post-tags a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--primary);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  transition: var(--transition);
}

.post-tags a:hover{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-1px);
}

.post-tags a:focus-visible{
  outline: 3px solid rgba(212,175,55,.35);
  outline-offset: 2px;
}

/* SHARE */
.post-share{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.post-share > span{
  font-weight: 800;
  color: var(--primary);
  font-size: 0.95rem;
  margin-right: 6px;
}

/* dugme */
.share-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  background: var(--white);
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow);

  color: var(--primary);
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1;

  transition: var(--transition);
  user-select: none;
  cursor: pointer;
}

.share-btn i{
  font-size: 1.15rem;
  line-height: 1;
}

.share-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(212,175,55,.45);
}

/* boje po mreži */
.share-btn.fb{
  border-color: rgba(37,99,235,.25);
}
.share-btn.fb:hover{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.share-btn.tw{
  border-color: rgba(15,23,42,.25);
}
.share-btn.tw:hover{
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.share-btn.vib{
  border-color: rgba(124,58,237,.25);
}
.share-btn.vib:hover{
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

/* Copy */
.share-btn.copy{
  border-style: dashed;
}
.share-btn.copy:hover{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--primary);
}

/* Mobile */
@media (max-width: 768px){
  .post-share{
    gap: 8px;
  }

  .share-btn{
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .post-share > span,
  .post-tags > span{
    width: 100%;
    margin-right: 0;
  }
}
/* Header mini logo 52x52 */
.logo-icon{
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: var(--radius);
}

.logo-icon img{
  width: 52px;
  height: 52px;
  object-fit: contain;   /* ako je PNG sa transparentnom pozadinom */
  display: block;
}