/*
Theme Name: Kecamatan Sambung Makmur Official
Theme URI: https://sambungmakmur.banjarkab.go.id
Author: Pemerintah Kecamatan Sambung Makmur & Diskominfo Kab. Banjar
Author URI: https://banjarkab.go.id
Description: Tema resmi website portal informasi publik dan Sistem Informasi Pelayanan Administrasi Terpadu Kecamatan (SIPATEN) Kecamatan Sambung Makmur, Kabupaten Banjar, Kalimantan Selatan. Dilengkapi form surat keterangan mandiri, pelacakan kode resi, berita, dan agenda kegiatan.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sambung-makmur
Tags: government, banjar, portal-resmi, sipaten, pelayanan-publik, custom-background, featured-images
*/

:root {
  --primary-blue: #004f8c;
  --dark-blue: #0b3c6d;
  --deep-blue: #002b54;
  --accent-gold: #fdb813;
  --accent-gold-hover: #e5a50f;
  --bg-light: #f1f5f9;
  --text-main: #1e293b;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-light);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.container {
  width: 100%;
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header & Top Bar */
.top-bar {
  background-color: var(--dark-blue);
  color: #ffffff;
  font-size: 0.75rem;
  padding: 0.5rem 0;
}
.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Header Branding */
.branding-bar {
  background: #ffffff;
  padding: 0.85rem 0;
  border-bottom: 1px solid #e2e8f0;
}
.branding-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.brand-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  height: 60px;
  width: auto;
}
.brand-sub {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
  letter-spacing: 0.05em;
}
.brand-title {
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #002f6c;
  line-height: 1.1;
  margin: 0;
}
.brand-motto {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

/* Search Box */
.header-search {
  position: relative;
  width: 260px;
}
.header-search input {
  width: 100%;
  padding: 0.45rem 2rem 0.45rem 0.85rem;
  font-size: 0.8125rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Navigation Bar */
.main-nav {
  background-color: var(--primary-blue);
  border-top: 1px solid #003d6d;
}
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav-item-home a {
  background: var(--accent-gold);
  color: #002f6c !important;
  font-weight: 900;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-size: 0.875rem;
}
.nav-item a {
  color: #ffffff;
  padding: 0.75rem 1rem;
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  border-right: 1px solid rgba(0, 94, 166, 0.6);
  transition: background 0.2s;
}
.nav-item a:hover {
  background: #003d6d;
}

/* Hero Section */
.hero-section {
  background-color: #1b436e;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
  color: #ffffff;
  padding-top: 1.5rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  align-items: flex-end;
}
.camat-card {
  width: 270px;
  background-color: transparent;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.camat-photo {
  width: 100%;
  height: auto;
  background-color: transparent;
  object-fit: contain;
  display: block;
}
.camat-nameplate {
  background: var(--accent-gold);
  color: #002f6c;
  padding: 0.65rem 0.5rem;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  border-top: 2px solid #fef08a;
}
.camat-title-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: #003b7a;
}
.hero-slogan-script {
  font-family: 'Caveat', cursive;
  font-size: 3.5rem;
  color: var(--accent-gold);
  line-height: 1;
  font-weight: 700;
}

/* 4 Quick Action Cards */
.quick-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.quick-card {
  padding: 1rem;
  border-radius: 0.65rem;
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.quick-card:hover {
  transform: translateY(-2px);
}
.card-blue { background-color: #4da1ff; }
.card-green { background-color: #48bb78; }
.card-orange { background-color: #ed8936; }
.card-red { background-color: #e53e3e; }

/* Sub Icons Bar */
.sub-icons-bar {
  background: #ffffff;
  border-radius: 0.65rem;
  padding: 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.75rem;
  text-align: center;
  border: 1px solid #e2e8f0;
}

/* Footer */
.site-footer {
  background-color: var(--deep-blue);
  color: #ffffff;
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
  border-top: 4px solid var(--accent-gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .quick-cards { grid-template-columns: 1fr 1fr; }
  .sub-icons-bar { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Penyelarasan berita dan agenda di beranda */
.news-agenda-layout { align-items: start; }
.agenda-item { box-sizing: border-box; }
@media (max-width: 700px) { .news-agenda-layout { grid-template-columns: 1fr !important; } }

/* Homepage banner slideshow */
.hero-slideshow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#1b436e}.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}.hero-slide.is-active{opacity:1}.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,67,110,.88),rgba(27,67,110,.72) 48%,rgba(27,67,110,.58));}.hero-grid{position:relative;z-index:1}.hero-slide-dots{position:absolute;z-index:3;pointer-events:auto;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.hero-dot{width:9px;height:9px;border:1px solid rgba(255,255,255,.8);border-radius:50%;padding:0;background:transparent;cursor:pointer}.hero-dot.is-active{background:#fdb813;border-color:#fdb813}