/* =========================================================
   Kecamatan Liliriaja — Custom Styles
   Dua skema warna dapat dipilih lewat tombol tema di navbar,
   tersimpan di localStorage (lihat assets/js/theme-toggle.js).
   ========================================================= */

/* Tema A (default) — "Tosca Segar": hijau-teal + kuning keemasan */
:root,
[data-theme="tosca"]{
  --lr-hijau-tua:   #0F6B5C;
  --lr-hijau:       #14876F;
  --lr-emas:        #F2B705;
  --lr-emas-muda:   #F7D154;
  --lr-krem:        #F5F9F7;
  --lr-teks:        #1D2A26;
  --lr-teks-muted:  #5C6E68;
  --lr-garis:       #DCEAE4;
  --lr-radius:      8px;
  --lr-font-judul:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --lr-font-teks:   -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Tema B — "Biru Kelautan": biru tua + oranye cerah */
[data-theme="biru"]{
  --lr-hijau-tua:   #0B3D5C;
  --lr-hijau:       #145E8C;
  --lr-emas:        #F27B13;
  --lr-emas-muda:   #F79F52;
  --lr-krem:        #F4F8FB;
  --lr-teks:        #1B2733;
  --lr-teks-muted:  #5A6B7A;
  --lr-garis:       #DCE7F0;
  --lr-radius:      8px;
  --lr-font-judul:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --lr-font-teks:   -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body{ transition: background-color .2s ease, color .2s ease; }

body{
  font-family: var(--lr-font-teks);
  color: var(--lr-teks);
  background: #FFFFFF;
}

h1, h2, h3, h4, .lr-font-judul{
  font-family: var(--lr-font-judul);
  font-weight: 600;
  color: var(--lr-hijau-tua);
}

a{ color: var(--lr-hijau-tua); }
a:hover{ color: var(--lr-emas); }

/* ---------- Topbar informasi ---------- */
.lr-topbar{
  background: var(--lr-hijau-tua);
  color: #E9EFE9;
  font-size: .8rem;
}
.lr-topbar a{ color: #E9EFE9; text-decoration: none; }
.lr-topbar a:hover{ color: var(--lr-emas-muda); }

/* ---------- Navbar ---------- */
.lr-navbar{
  background: #FFFFFF;
  border-bottom: 3px solid var(--lr-emas);
}
.lr-navbar .navbar-brand{
  font-family: var(--lr-font-judul);
  font-weight: 700;
  color: var(--lr-hijau-tua);
  line-height: 1.15;
}
.lr-navbar .navbar-brand small{
  display:block;
  font-family: var(--lr-font-teks);
  font-weight: 400;
  font-size: .68rem;
  color: var(--lr-teks-muted);
  letter-spacing: .04em;
}
.lr-navbar .nav-link{
  color: var(--lr-teks);
  font-weight: 500;
  font-size: .93rem;
}
.lr-navbar .nav-link.active,
.lr-navbar .nav-link:hover{
  color: var(--lr-hijau-tua);
  border-bottom: 2px solid var(--lr-emas);
}

/* ---------- Hero ---------- */
.lr-hero{
  background: linear-gradient(160deg, var(--lr-hijau-tua) 0%, #163A30 100%);
  color: #F3EFE2;
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
}
@media (min-width: 992px){
  .lr-hero{ min-height: 520px; }
}
.lr-hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity:.35;
}
.lr-hero-bg.lr-hero-bg-placeholder{
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
  display:flex; align-items:center; justify-content:center;
}
.lr-hero-bg-placeholder .lr-hero-bg-label{
  border: 1px dashed rgba(255,255,255,.35);
  color: rgba(255,255,255,.55);
  font-size:.75rem;
  padding:.4rem .8rem;
  border-radius: 4px;
  letter-spacing:.04em;
}
.lr-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(201,151,59,.08) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.lr-hero .lr-eyebrow{
  color: var(--lr-emas-muda);
  letter-spacing:.12em;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
}
.lr-hero h1{ color:#fff; }
.lr-hero p.lead{ color:#D9E3DC; }

/* ---------- Statistik ---------- */
.lr-stat{
  border-left: 3px solid var(--lr-emas);
  padding-left: 1rem;
}
.lr-stat .num{
  font-family: var(--lr-font-judul);
  font-size: 2.1rem;
  font-weight:700;
  color: var(--lr-hijau-tua);
  line-height:1;
}
.lr-stat .label{
  color: var(--lr-teks-muted);
  font-size:.85rem;
}

/* ---------- Section label ---------- */
.lr-section-label{
  color: var(--lr-emas);
  font-weight:700;
  letter-spacing:.1em;
  font-size:.78rem;
  text-transform:uppercase;
}

/* ---------- Card umum ---------- */
.lr-card{
  border: 1px solid var(--lr-garis);
  border-radius: var(--lr-radius);
  transition: box-shadow .15s ease, transform .15s ease;
  background:#fff;
}
.lr-card:hover{
  box-shadow: 0 10px 24px rgba(31,75,63,.10);
  transform: translateY(-2px);
}

/* ---------- Kartu Desa ---------- */
.lr-desa-card .lr-desa-badge{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--lr-hijau-tua);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}

/* ---------- Kartu layanan PATEN ---------- */
.lr-layanan-icon{
  width:48px; height:48px;
  border-radius: var(--lr-radius);
  background: rgba(201,151,59,.12);
  color: var(--lr-emas);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
}

/* ---------- Timeline alur layanan ---------- */
.lr-alur{ counter-reset: lr-step; }
.lr-alur .lr-alur-item{
  position:relative;
  padding-left: 2.6rem;
  padding-bottom: 1.4rem;
  border-left: 2px solid var(--lr-garis);
  margin-left: 1rem;
}
.lr-alur .lr-alur-item:last-child{ border-left-color: transparent; }
.lr-alur .lr-alur-item::before{
  counter-increment: lr-step;
  content: counter(lr-step);
  position:absolute; left:-1.1rem; top:0;
  width:2.2rem; height:2.2rem;
  border-radius:50%;
  background: var(--lr-hijau-tua);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
}

/* ---------- Section transparansi ---------- */
.lr-doc-row{
  border-bottom: 1px solid var(--lr-garis);
  padding: .85rem 0;
}
.lr-doc-row:last-child{ border-bottom:none; }

/* ---------- Footer ---------- */
.lr-footer{
  background: #16281F;
  color: #C8D3CB;
}
.lr-footer h6{
  color:#fff;
  font-family: var(--lr-font-judul);
  letter-spacing:.03em;
}
.lr-footer a{ color:#C8D3CB; text-decoration:none; }
.lr-footer a:hover{ color: var(--lr-emas-muda); }
.lr-footer .lr-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem;
  color:#93A296;
}

/* ---------- Tombol ---------- */
.btn-lr-primary{
  background: var(--lr-emas);
  border-color: var(--lr-emas);
  color:#20301F;
  font-weight:600;
}
.btn-lr-primary:hover{
  background: var(--lr-emas-muda);
  border-color: var(--lr-emas-muda);
  color:#20301F;
}
.btn-lr-outline{
  border-color:#fff; color:#fff;
}
.btn-lr-outline:hover{
  background:#fff; color: var(--lr-hijau-tua);
}

/* WhatsApp floating button */
.lr-wa-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:1030;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Breadcrumb halaman dalam */
.lr-page-header{
  background: var(--lr-krem);
  border-bottom: 1px solid var(--lr-garis);
}

@media (max-width: 767px){
  .lr-stat .num{ font-size:1.6rem; }
}

/* ---------- Theme toggle button (icon-only) ---------- */
.lr-theme-toggle{
  border: 1px solid var(--lr-garis);
  background: #fff;
  color: var(--lr-hijau-tua);
  border-radius: 50%;
  width: 34px; height: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
}
.lr-theme-toggle:hover{ border-color: var(--lr-emas); }
.lr-theme-toggle .dot{
  width:16px; height:16px; border-radius:50%;
  background: linear-gradient(135deg, var(--lr-hijau-tua), var(--lr-emas));
  display:inline-block;
}

/* ---------- Marquee pengumuman ---------- */
.lr-marquee-wrap{
  background: var(--lr-emas);
  color:#20301F;
  overflow:hidden;
  white-space:nowrap;
  font-size:.82rem;
  font-weight:600;
}
.lr-marquee{
  display:inline-block;
  padding-left:100%;
  animation: lr-marquee-scroll 28s linear infinite;
}
.lr-marquee span{ margin-right:3rem; }
@keyframes lr-marquee-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .lr-marquee{ animation: none; padding-left: 1rem; }
}

/* ---------- Jam & status loket ---------- */
.lr-clock-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--lr-radius);
  backdrop-filter: blur(2px);
}
.lr-clock-time{
  font-family: var(--lr-font-judul);
  font-size: 1.9rem;
  font-weight:700;
  color:#fff;
  line-height:1;
}
.lr-status-dot{
  width:10px; height:10px; border-radius:50%;
  display:inline-block; margin-right:.4rem;
}
.lr-status-buka .lr-status-dot{ background:#3DD68C; box-shadow:0 0 0 4px rgba(61,214,140,.25); }
.lr-status-tutup .lr-status-dot{ background:#F26B6B; box-shadow:0 0 0 4px rgba(242,107,107,.25); }
.lr-status-buka{ color:#3DD68C; }
.lr-status-tutup{ color:#F79999; }

/* ---------- Galeri ---------- */
.lr-galeri-item{
  aspect-ratio: 4/3;
  border-radius: var(--lr-radius);
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.lr-galeri-item img,
.lr-galeri-item .ph{ width:100%; height:100%; object-fit:cover; display:flex; align-items:center; justify-content:center; color:#fff; }
.lr-galeri-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  color:#fff; font-size:.75rem; padding:.5rem;
}
.lr-galeri-item .lr-galeri-more{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.1rem;
  opacity:0; transition:opacity .15s ease;
}
.lr-galeri-item:hover .lr-galeri-more{ opacity:1; }

/* ---------- Foto berita (pengganti gradient placeholder) ---------- */
.lr-berita-thumb{
  height:150px; border-radius: var(--lr-radius) var(--lr-radius) 0 0;
  overflow:hidden; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  color:#fff; position:relative;
}
.lr-berita-thumb.lr-berita-thumb-lg{ height:280px; border-radius:8px; }

/* ---------- Footer kontak cepat ---------- */
.lr-footer-cta{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--lr-radius);
}
.lr-footer-cta a.lr-cta-link{
  color:#fff; font-weight:600; font-size:.95rem;
  display:flex; align-items:center; gap:.5rem;
}
.lr-footer-cta a.lr-cta-link:hover{ color: var(--lr-emas-muda); }
.lr-lapor-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:.3rem .8rem;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  color:#fff; text-decoration:none;
}
.lr-lapor-badge:hover{ border-color:var(--lr-emas); color:var(--lr-emas-muda); }

/* ---------- Badge IKM ---------- */
.lr-ikm-badge{
  width:96px; height:96px; border-radius:50%;
  border:4px solid var(--lr-emas);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--lr-font-judul); color: var(--lr-hijau-tua);
}
.lr-ikm-badge .num{ font-size:1.6rem; font-weight:700; line-height:1; }
.lr-ikm-badge .max{ font-size:.65rem; color: var(--lr-teks-muted); }