/* =========================================================
   SMP NEGERI 4 METRO — Custom Theme
   Warna & font dasar diatur lewat CSS variable agar bisa
   diubah dinamis dari panel admin (lihat inline style di header.php)
   ========================================================= */

:root{
  --clr-primary: #0b3d5c;      /* biru dongker - identitas institusi   */
  --clr-secondary: #e8a33d;    /* kuning emas - aksen prestasi          */
  --clr-dark: #08283b;
  --clr-cream: #f7f4ec;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-base: .5rem;
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color:#28323c;
  background:#ffffff;
}

h1,h2,h3,h4,h5,h6,.font-heading{
  font-family: var(--font-heading);
  font-weight:600;
  color: var(--clr-dark);
}

a{ color: var(--clr-primary); text-decoration:none; }
a:hover{ color: var(--clr-secondary); }

.btn-primary{
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.btn-primary:hover, .btn-primary:focus{
  background-color: var(--clr-dark);
  border-color: var(--clr-dark);
}
.btn-accent{
  background-color: var(--clr-secondary);
  border-color: var(--clr-secondary);
  color:#20160a;
  font-weight:600;
}
.btn-accent:hover{ background-color:#d6912c; color:#20160a; }

.text-primary-custom{ color: var(--clr-primary) !important; }
.bg-primary-custom{ background-color: var(--clr-primary) !important; }
.bg-dark-custom{ background-color: var(--clr-dark) !important; }
.text-accent{ color: var(--clr-secondary) !important; }

/* ---------------- Topbar ---------------- */
.topbar{
  background: var(--clr-dark);
  color:#dce8ef;
  font-size:.85rem;
  padding:.35rem 0;
}
.topbar a{ color:#dce8ef; }
.topbar a:hover{ color: var(--clr-secondary); }

/* ---------------- Navbar / Header ---------------- */
.navbar-school{
  background:#ffffff;
  box-shadow:0 2px 12px rgba(8,40,59,.08);
  padding:.7rem 0;
}
.navbar-school .navbar-brand{
  display:flex; align-items:center; gap:.65rem;
}
.navbar-school .navbar-brand img{
  height:52px; width:52px; object-fit:contain;
}
.navbar-school .brand-title{
  font-family: var(--font-heading);
  font-weight:700;
  color: var(--clr-primary);
  line-height:1.1;
  font-size:1.05rem;
}
.navbar-school .brand-tagline{
  font-size:.72rem;
  color:#5c6b76;
}
.navbar-school .nav-link{
  color: var(--clr-dark) !important;
  font-weight:500;
  padding:.55rem .9rem !important;
}
.navbar-school .nav-link:hover,
.navbar-school .nav-link.active{
  color: var(--clr-primary) !important;
}

/* Dropdown bertingkat (submenu 5 level) */
.navbar-school .dropdown-menu{
  border:none;
  box-shadow:0 8px 24px rgba(8,40,59,.14);
  border-radius:var(--radius-base);
  padding:.4rem;
}
.navbar-school .dropdown-item{
  border-radius:.35rem;
  padding:.5rem .75rem;
  font-size:.92rem;
}
.navbar-school .dropdown-item:hover{
  background: var(--clr-cream);
  color: var(--clr-primary);
}
.dropdown-submenu{ position:relative; }
.dropdown-submenu > .dropdown-menu{
  top:0; left:100%; margin-top:-.4rem;
}
@media (max-width: 991.98px){
  .dropdown-submenu > .dropdown-menu{
    position:static !important;
    box-shadow:none;
    margin-left:1rem;
    border-left:2px solid var(--clr-cream);
  }
}

/* ---------------- Hero ---------------- */
.hero-slide{
  position:relative;
  height:78vh;
  min-height:420px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,40,59,.85) 10%, rgba(8,40,59,.35) 65%, rgba(8,40,59,.15) 100%);
}
.hero-content{
  position:relative; z-index:2; color:#fff; max-width:640px;
}
.hero-content .eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  color: var(--clr-secondary); font-weight:700;
}
.hero-content h1{
  color:#fff; font-size:2.6rem; margin:.6rem 0 1rem;
}
.hero-content p{ color:#dce8ef; font-size:1.05rem; }
.carousel-indicators [data-bs-target]{ background-color: var(--clr-secondary); }

/* ---------------- Section titles ---------------- */
.section-title{
  position:relative; margin-bottom:2.2rem;
}
.section-title .eyebrow{
  text-transform:uppercase; letter-spacing:.1em; font-size:.78rem;
  color: var(--clr-secondary); font-weight:700;
}
.section-title h2{ margin:.35rem 0 0; }
.section-title .bar{
  width:56px; height:4px; background: var(--clr-secondary); border-radius:2px; margin-top:.9rem;
}

/* ---------------- Cards ---------------- */
.card-berita{
  border:none; border-radius:var(--radius-base); overflow:hidden;
  box-shadow:0 4px 18px rgba(8,40,59,.08);
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.card-berita:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(8,40,59,.14); }
.card-berita img{ height:190px; object-fit:cover; width:100%; }
.card-berita .card-body{ padding:1.15rem; }
.card-berita .kategori-badge{
  background: var(--clr-cream); color: var(--clr-primary);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.28rem .6rem; border-radius:30px;
}
.card-berita .tanggal{ font-size:.8rem; color:#7c8994; }
.card-berita h3{ font-size:1.05rem; margin:.55rem 0; }
.card-berita h3 a{ color: var(--clr-dark); }
.card-berita h3 a:hover{ color: var(--clr-primary); }

/* ---------------- Agenda list ---------------- */
.agenda-item{
  display:flex; gap:1rem; padding:1rem; border-radius:var(--radius-base);
  background:#fff; box-shadow:0 4px 16px rgba(8,40,59,.07); margin-bottom:1rem;
}
.agenda-date-box{
  flex:0 0 68px; height:68px; background: var(--clr-primary); color:#fff;
  border-radius:.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.agenda-date-box .d{ font-size:1.3rem; font-weight:700; line-height:1; }
.agenda-date-box .m{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }

/* ---------------- Gallery ---------------- */
.gallery-thumb{
  border-radius:var(--radius-base); overflow:hidden; position:relative; display:block;
  aspect-ratio:4/3;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.gallery-thumb:hover img{ transform:scale(1.07); }
.gallery-thumb .overlay{
  position:absolute; inset:0; background:rgba(8,40,59,.0); transition:background .25s;
  display:flex; align-items:flex-end; padding:.75rem;
}
.gallery-thumb:hover .overlay{ background:rgba(8,40,59,.45); }
.gallery-thumb .overlay span{ color:#fff; font-weight:600; opacity:0; transition:opacity .25s; }
.gallery-thumb:hover .overlay span{ opacity:1; }

.video-card{
  border-radius:var(--radius-base); overflow:hidden; box-shadow:0 4px 16px rgba(8,40,59,.08); background:#fff;
}
.video-card .ratio{ background:#000; }

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--clr-dark); color:#c7d5dd; padding:3.2rem 0 1.2rem;
}
.site-footer h5{ color:#fff; font-size:1rem; margin-bottom:1rem; }
.site-footer a{ color:#c7d5dd; }
.site-footer a:hover{ color: var(--clr-secondary); }
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.2rem;
  font-size:.85rem; color:#93a3ac;
}
.social-icon{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem;
}
.social-icon:hover{ background: var(--clr-secondary); color: var(--clr-dark); }

/* ---------------- Misc ---------------- */
.breadcrumb-bar{ background: var(--clr-cream); padding:1.1rem 0; }
.stat-box{ text-align:center; }
.stat-box .num{ font-family:var(--font-heading); font-size:2.2rem; font-weight:700; color:var(--clr-primary); }
.stat-box .lbl{ color:#5c6b76; font-size:.9rem; }
.back-to-top{
  position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%;
  background:var(--clr-primary); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(8,40,59,.3); z-index:99; opacity:0; visibility:hidden; transition:.25s;
}
.back-to-top.show{ opacity:1; visibility:visible; }

/* Content typography (halaman/berita detail) */
.content-body{ font-size:1.02rem; line-height:1.85; color:#33404a; }
.content-body img{ max-width:100%; height:auto; border-radius:var(--radius-base); }
.content-body h2, .content-body h3{ margin-top:1.6rem; }