@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ============================================
   RADIO SINAJ — dizajn sistem baziran na logou
   ============================================ */
:root{
  --cream:#F6F1E6;
  --parchment:#E8D7B5;
  --primary:#8B1E1E;
  --primary-dark:#6B1616;
  --gold:#C79A3B;
  --gold-light:#DFC585;
  --olive:#5C7A3D;
  --brown:#5A3E2B;
  --ink:#3A2A1E;
  --white:#FFFFFF;
  --border:#DDD0B4;
  --shadow: 0 6px 20px rgba(90,62,43,0.08);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Source Sans 3',sans-serif;color:var(--ink);background:var(--cream);line-height:1.65}
h1,h2,h3,.brand{font-family:'Alegreya',serif}
.mono{font-family:'Source Sans 3',monospace;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}

.ornament-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}
.ornament-divider .ln{height:1px;background:var(--gold);flex:1;max-width:120px;opacity:.6}
.ornament-divider svg{width:16px;height:16px;flex-shrink:0}

/* Header */
header.site-header{background:var(--parchment);border-bottom:2px solid var(--primary)}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:52px;height:52px;border-radius:50%;box-shadow:var(--shadow)}
.logo-word{font-size:22px;font-weight:700;color:var(--primary);letter-spacing:.01em}
.logo-tagline{font-size:11px;color:var(--brown);letter-spacing:.04em;text-transform:uppercase}
.header-actions{display:flex;align-items:center;gap:16px}
.social-links{display:flex;gap:10px}
.social-links a{width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:12px}
.btn-listen-small{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:var(--gold-light);padding:10px 18px;border-radius:24px;font-size:13px;font-weight:700;border:1px solid var(--gold)}
.btn-listen-small:hover{background:var(--primary-dark)}

nav.main-nav{background:var(--primary)}
nav.main-nav .wrap{display:flex;align-items:center;gap:2px;overflow-x:auto}
.nav-link{padding:13px 14px;font-size:13px;font-weight:700;color:#EFD9B0;white-space:nowrap;display:block;letter-spacing:.01em}
.nav-link:hover, .nav-link.active{color:var(--white);background:rgba(255,255,255,0.08)}
.mobile-toggle{display:none}

@media (max-width:900px){
  .mobile-toggle{display:block;background:none;border:none;color:var(--gold-light);font-size:20px;padding:12px 16px;cursor:pointer}
  nav.main-nav .wrap{flex-direction:column;align-items:flex-start;display:none;overflow-x:visible}
  nav.main-nav.open .wrap{display:flex}
  .header-actions .social-links{display:none}
}

/* Hero */
.hero{
  position:relative; overflow:hidden; color:var(--white); padding:64px 0;
  background:
    linear-gradient(180deg, rgba(107,22,22,0.78) 0%, rgba(58,16,16,0.88) 100%),
    url('/assets/img/hero-bg.jpg') center 35%/cover no-repeat;
}
.hero-frame{position:absolute;inset:14px;border:1px solid rgba(223,197,133,0.35);border-radius:4px;pointer-events:none}
.hero-corner{position:absolute;width:56px;height:56px;z-index:2;opacity:.85}
.hero-corner-tl{top:22px;left:22px}
.hero-corner-br{bottom:22px;right:22px}
.hero .wrap{position:relative;z-index:2;text-align:center;max-width:720px}
.hero-logo{width:84px;height:84px;border-radius:50%;margin:0 auto 20px;box-shadow:0 8px 24px rgba(0,0,0,0.3);border:3px solid var(--gold)}
.hero-eyebrow{color:var(--gold-light);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.hero h1{font-size:38px;margin-bottom:10px}
.hero-sub{color:#EFD9B0;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.hero-verse{font-family:'Alegreya',serif;font-style:italic;font-size:17px;color:#F3E6C8;margin-bottom:6px}
.hero-verse-ref{font-size:12px;color:var(--gold-light);margin-bottom:26px}
.btn-gold{
  display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:var(--gold-light);
  padding:14px 30px;border-radius:28px;font-weight:700;font-size:14.5px;border:1.5px solid var(--gold);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
}
.btn-gold:hover{background:var(--primary-dark)}
.btn-gold svg{width:14px;height:14px}

/* Sections */
section{padding:48px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.section-head h2{font-size:22px;color:var(--primary)}
.section-head .see-all{font-size:13px;font-weight:700;color:var(--olive);border-bottom:1px solid transparent}
.section-head .see-all:hover{border-color:var(--olive)}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.card:hover{transform:translateY(-2px)}
.card-img{width:100%;height:160px;object-fit:cover;background:var(--parchment)}
.card-body{padding:16px}
.card-cat{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--olive);font-weight:700;margin-bottom:6px}
.card-title{font-family:'Alegreya',serif;font-size:17px;font-weight:700;color:var(--primary);margin-bottom:6px;line-height:1.35}
.card-meta{font-size:12px;color:var(--brown);margin-bottom:8px}
.card-excerpt{font-size:13.5px;color:#5A5145}

.quote-block{background:var(--parchment);border:1px solid var(--gold);border-radius:14px;padding:32px;text-align:center;position:relative}
.quote-text{font-family:'Alegreya',serif;font-style:italic;font-size:19px;color:var(--primary);margin-bottom:10px}
.quote-author{color:var(--olive);font-size:13px;font-weight:600}

.schedule-mini{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.schedule-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.schedule-row:last-child{border-bottom:none}
.schedule-row.is-active{color:var(--primary);font-weight:700}
.schedule-row.is-active::before{content:'● ';color:var(--olive)}

/* Detail pages */
h1.page-title{font-family:'Alegreya',serif;font-size:30px;color:var(--primary);margin-bottom:16px}
.meta-line{font-size:13px;color:var(--brown);margin-bottom:24px}
.content-body{font-size:15.5px;color:#40342A;white-space:pre-line}
.content-body img{border-radius:10px;margin:16px 0}

.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.filter-chip{padding:8px 16px;border-radius:20px;background:var(--white);border:1px solid var(--gold);font-size:13px;font-weight:700;color:var(--primary)}
.filter-chip.active{background:var(--primary);color:var(--gold-light);border-color:var(--primary)}

.pagination{display:flex;gap:8px;margin-top:24px}
.pagination a, .pagination span{padding:8px 13px;border-radius:8px;border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--primary)}
.pagination .current{background:var(--primary);color:var(--gold-light);border-color:var(--primary)}

/* Forms */
.alert-success{background:#EAF1E2;color:#3E6B2E;border:1px solid #B9D6A5;padding:14px 18px;border-radius:8px;margin-bottom:24px;font-size:14px}
.error-list{background:#F7E6E2;color:var(--primary-dark);border:1px solid var(--primary);padding:14px 18px;border-radius:8px;margin-bottom:24px;font-size:14px}
label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--primary)}
input[type=text], input[type=email], input[type=tel], textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:14.5px;margin-bottom:20px;background:var(--white);color:var(--ink)
}
textarea{min-height:150px;resize:vertical}
.hp-field{position:absolute;left:-9999px;opacity:0}
button[type=submit]{background:var(--primary);color:var(--gold-light);border:1.5px solid var(--gold);padding:13px 28px;border-radius:24px;font-size:14.5px;font-weight:700;cursor:pointer}
button[type=submit]:hover{background:var(--primary-dark)}

/* Footer */
footer.site-footer{
  position:relative; overflow:hidden; margin-top:40px; padding:44px 0 20px; color:#EFD9B0;
  background:
    linear-gradient(180deg, rgba(107,22,22,0.55) 0%, rgba(58,16,16,0.75) 100%),
    url('/assets/img/footer-bg.jpg') center/cover no-repeat;
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;margin-bottom:30px;position:relative;z-index:1}
.footer-grid h4{color:var(--gold-light);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.footer-grid ul{list-style:none}
.footer-grid ul li{margin-bottom:8px;font-size:13.5px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo img{width:38px;height:38px;border-radius:50%}
.footer-social{display:flex;gap:10px}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid var(--gold);color:var(--gold-light);display:flex;align-items:center;justify-content:center}
.footer-social a:hover{background:var(--gold);color:var(--primary-dark)}
.foot-bottom{border-top:1px solid rgba(239,217,176,0.25);padding-top:16px;font-size:12.5px;color:#D9B98A;display:flex;justify-content:space-between;position:relative;z-index:1}

@media (max-width:860px){
  .hero h1{font-size:28px}
  .card-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .audio-banner-grid{grid-template-columns:1fr !important}
}

.audio-banner-grid{display:grid;grid-template-columns:0.9fr 1.4fr;gap:32px;align-items:center}