/* ============================================
   UKM MEDIA KAMPUS — FRONTEND THEME
   Palette derived from the official logo:
   maroon gonjong roof, navy camera/mic, gold wordmark, moss-green journalism accent
   ============================================ */
:root{
  --maroon: #7a2a26;
  --maroon-dark: #5c1e1b;
  --navy: #1c2b45;
  --navy-light: #2e4468;
  --gold: #8a5a2b;
  --gold-light: #b98544;
  --moss: #4a5d3a;
  --cream: #f7f2e7;
  --cream-2: #efe7d6;
  --ink: #241d16;
  --paper: #fffdf8;
}

*{box-sizing:border-box;}

body{
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
}

h1,h2,h3,h4,.display-font{
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.eyebrow{
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--maroon);
  font-weight: 600;
}

a{ color: var(--maroon); text-decoration:none; }
a:hover{ color: var(--maroon-dark); }

/* ---------- Gonjong roof motif (signature element) ---------- */
.gonjong-divider{
  width:100%;
  height:46px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.gonjong-divider svg{ width:100%; height:100%; display:block; }

.gonjong-accent{
  clip-path: polygon(50% 0%, 100% 55%, 100% 100%, 0 100%, 0 55%);
}

/* ---------- Navbar ---------- */
.navbar-ukm{
  background: var(--paper);
  border-bottom: 3px solid var(--maroon);
  padding: 0.6rem 0;
}
.navbar-ukm .navbar-brand img{ height:52px; }
.navbar-ukm .navbar-brand-text{
  font-family:'Fraunces', serif;
  font-weight:700;
  color: var(--navy);
  font-size:1.15rem;
  line-height:1.1;
}
.navbar-ukm .navbar-brand-text small{
  display:block;
  font-family:'Source Sans 3', sans-serif;
  font-size:0.68rem;
  font-weight:400;
  color: var(--maroon);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.navbar-ukm .nav-link{
  color: var(--ink) !important;
  font-weight:600;
  font-size:0.92rem;
  padding: 0.5rem 0.9rem !important;
}
.navbar-ukm .nav-link:hover, .navbar-ukm .nav-link.active{ color: var(--maroon) !important; }
.navbar-ukm .dropdown-menu{ border:none; box-shadow: 0 12px 28px rgba(28,43,69,.14); border-radius:10px; }
.navbar-ukm .dropdown-item:active,.navbar-ukm .dropdown-item:hover{ background: var(--cream); color:var(--maroon); }

/* ---------- Hero ---------- */
.hero-slide{
  position:relative;
  min-height: 78vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
}
.hero-slide::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(28,43,69,.88) 0%, rgba(28,43,69,.45) 55%, rgba(28,43,69,.15) 100%);
}
.hero-content{ position:relative; z-index:2; color:#fff; padding: 3.5rem 0; }
.hero-content h1{ color:#fff; font-size: clamp(2rem, 4.5vw, 3.4rem); }
.hero-content p{ font-size:1.15rem; max-width:640px; color:#f1ede2; }
.btn-maroon{ background: var(--maroon); border-color: var(--maroon); color:#fff; font-weight:600; padding:.6rem 1.5rem; border-radius:6px; }
.btn-maroon:hover{ background: var(--maroon-dark); border-color: var(--maroon-dark); color:#fff; }
.btn-outline-cream{ border:2px solid #fff; color:#fff; font-weight:600; border-radius:6px; padding:.55rem 1.4rem; }
.btn-outline-cream:hover{ background:#fff; color:var(--navy); }

/* ---------- Sections ---------- */
.section{ padding: 4.5rem 0; }
.section-title{ margin-bottom: 2rem; }
.section-title .eyebrow{ display:block; margin-bottom:.4rem; }

.bg-paper{ background: var(--paper); }
.bg-navy{ background: var(--navy); color:#eef0f5; }
.bg-navy > .container > .section-title h2,
.bg-navy > .container > .d-flex h2,
.bg-navy h2{ color:#fff; }
.bg-navy .card-ukm h3,
.bg-navy .card-ukm .news-title{ color: var(--navy) !important; }

/* ---------- Cards ---------- */
.card-ukm{
  background:var(--paper);
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 2px 10px rgba(28,43,69,.09);
  border: 1px solid rgba(28,43,69,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  height:100%;
  display:flex;
  flex-direction:column;
}
.card-ukm:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28,43,69,.16); }
.card-ukm .card-img-wrap{ width:100%; aspect-ratio: 16/10; overflow:hidden; background:#eee; }
.card-ukm .card-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-ukm > img{ width:100%; height:190px; object-fit:cover; display:block; }
.card-ukm .card-body{ padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; flex:1; }

.card-meta-row{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; flex-wrap:wrap;
}
.card-date{
  font-size:.78rem; color:#8a8272; display:flex; align-items:center; gap:.35rem;
}
.card-tag{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:#fff; padding:.22rem .6rem; border-radius:4px; line-height:1.5;
}
.card-tag-0{ background: var(--maroon); }
.card-tag-1{ background: var(--navy); }
.card-tag-2{ background: var(--moss); }
.card-tag-3{ background: var(--gold); }

.card-ukm .news-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.08rem;
  color: var(--navy);
  line-height:1.35;
  margin-bottom: .7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.card-ukm .card-excerpt{
  font-size:.87rem; color:#726b5b; margin-bottom:.8rem;
  display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-ukm .read-more{
  margin-top:auto;
  font-weight:700; font-size:.85rem; color: var(--maroon);
  display:inline-flex; align-items:center; gap:.3rem;
}
.card-ukm .read-more:hover{ color: var(--maroon-dark); gap:.5rem; }

/* legacy alias kept for other templates */
.card-ukm .card-cat{
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--moss);
  font-weight:700;
}
.card-ukm h3{ font-size:1.15rem; margin: .4rem 0; }
.card-ukm .card-meta{ font-size:.8rem; color:#77705f; }

/* ---------- Buttons general ---------- */
.btn-moss{ background:var(--moss); border-color:var(--moss); color:#fff; font-weight:600; }
.btn-moss:hover{ background:#3a4a2d; border-color:#3a4a2d; color:#fff; }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--navy);
  color:#c9cedb;
  padding-top: 3rem;
}
footer.site-footer h5{ color:#fff; font-family:'Fraunces',serif; margin-bottom:1rem; }
footer.site-footer a{ color:#c9cedb; }
footer.site-footer a:hover{ color: var(--gold-light); }
footer.site-footer .social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background: rgba(255,255,255,.08); margin-right:.5rem; font-size:1.1rem;
}
footer.site-footer .social-icons a:hover{ background: var(--maroon); }
footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:2rem; padding:1.1rem 0; font-size:.85rem; color:#9aa1b4;
}

/* ---------- Tabs (Puisi/Cerpen) ---------- */
.nav-tabs-ukm .nav-link{
  border:none; border-bottom:3px solid transparent; color: var(--ink); font-weight:600;
}
.nav-tabs-ukm .nav-link.active{ border-bottom-color: var(--maroon); color: var(--maroon); background:none; }

/* ---------- Article show ---------- */
.article-content{ font-size:1.08rem; line-height:1.85; }
.article-content img{ max-width:100%; height:auto; border-radius:8px; margin:1rem 0; }
.article-content h2,.article-content h3{ margin-top:1.6rem; }

/* ---------- Misc ---------- */
.badge-type{ background:var(--gold); color:#fff; font-weight:600; }
.page-banner{
  background: var(--navy);
  color:#fff;
  padding: 3rem 0 2rem;
}
.page-banner h1{ color:#fff; margin-bottom:.3rem; }
.breadcrumb-ukm a{ color:#cdd3e2; }
.breadcrumb-ukm span{ color:#8a91a8; }