/* ==========================================================================
   mdp-shared.css — komponen bersama seluruh halaman Mutiara Digital Printing.
   Dipusatkan dari 23 salinan inline. Alasan: satu sumber untuk 23 halaman
   (R-34: setiap tema harus jalan di satu tempat), bukan 23 titik perbaikan.
   Isi: token warna, tombol, focus ring, skip-link, galeri, ikon sosial,
   dan seluruh definisi light/dark mode.
   ========================================================================== */

/* ---- Token warna (light default) ---- */
:root {
  --mdp-red: #B53336;
  --mdp-yellow: #FFF317;
  --mdp-ink: #1a0a0a;
  --mdp-muted: #444;
  --mdp-line: #ececec;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 28px;

  /* Permukaan tema — dipakai dark mode untuk membalik tanpa ubah komponen */
  --mdp-page: #F7F5F4;
  --mdp-surface: #FFFFFF;
  --mdp-surface-2: #F0EDEB;
  --mdp-text: #333333;
  --mdp-text-strong: #1a0a0a;
  --mdp-text-muted: #666666;
  --mdp-link: #B53336;
  --mdp-border: #ececec;
}

/* ---- Tombol ---- */
.btn { border-radius: 4px; font-weight: 700; letter-spacing: .01em; }
.btn-primary, .btn-action, .btn-u.btn-u-lg {
  background: var(--mdp-red);
  color: #fff !important;
  border: 1px solid #9a2a2d;
}
.btn-primary:hover, .btn-action:hover, .btn-u.btn-u-lg:hover {
  background: #9a2a2d;
  color: #fff !important;
}

/* ---- Focus ring (R-32: state fokus harus terlihat) ---- */
a:focus-visible, button:focus-visible { outline: 3px solid #FFF317; outline-offset: 2px; }

/* ---- Navbar & footer: satu definisi untuk semua halaman ----
   Sebelumnya override ini hanya ada di index.html, sehingga footer index lebih
   gelap dari 22 halaman lain. Disatukan agar konsisten (R-20).
   Kontras dicek WCAG AA: #ececec pada #2b2b2b = 12.0:1, #FFF317 = 12.2:1. */
.navbar-inverse *:focus { outline: 0; }
.navbar-inverse a:focus-visible, .navbar-inverse button:focus-visible { outline: 3px solid #FFF317; outline-offset: 2px; }
.footer1 { background: #2b2b2b; }
.footer1, .footer1 p, .footer1 li, .footer1 .panel, .footer1 .panel-body { color: #ececec; }
.footer1 a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.footer1 a:hover { color: #FFF317; }
.footer1 .panel-title { color: #ffffff; }
.footer-news-item { margin: 4px 0; }
.footer-news-title { color: #ececec; font-size: 13px; line-height: 1.4; }
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > .open ul > a { color: rgba(255,255,255,.92); }

/* ---- Navigasi: hover & aktif pakai warna brand, bukan putih bawaan Bootstrap ----
   Bootstrap 3 memberi hover submenu #f5f5f5 (putih) dan .active #080808;
   di atas latar gelap itu lepas dari tema. Disamakan ke merah brand.
   Kontras (WCAG AA): kuning #FFF317 pada #9a2a2d = 6.6:1,
   putih pada #9a2a2d = 7.7:1, putih pada #B53336 = 6.0:1. */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background: #9a2a2d;
  color: #FFF317;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background: #B53336;
  color: #fff !important;
}
.navbar-inverse .navbar-nav > li:hover { background: #9a2a2d; }
/* style.css menetapkan .navbar-nav>li:hover { color:#3A3A3A !important }
   (abu gelap di atas merah = kontras 1.9:1, gagal WCAG). Ditimpa ke putih. */
.navbar-inverse .navbar-nav > li:hover > a,
.navbar-inverse .navbar-nav > li:hover > .dropdown-toggle {
  color: #FFF317 !important;
}
/* Submenu: item hover jangan putih (bawaan Bootstrap #f5f5f5) */
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
  background-color: #9a2a2d !important;
  color: #fff !important;
}
/* Item submenu bertanda aktif: Bootstrap pakai biru #428bca, di luar palet brand */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a {
  background-color: #B53336 !important;
  color: #fff !important;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--mdp-surface); color: var(--mdp-link);
  padding: 8px 12px; z-index: 10000; border-radius: 4px;
}
.skip-link:focus { left: 8px; outline: 3px solid #FFF317; }

/* ---- Galeri: masonry native + dialog (vanilla) ---- */
.gallery-grid { column-count: 3; column-gap: 12px; list-style: none; padding: 0; margin: 0; }
.gallery-item { break-inside: avoid; margin-bottom: 12px; border-radius: 8px; overflow: hidden; border: 1px solid var(--mdp-border); background: var(--mdp-surface); }
.gallery-item img { width: 100%; height: auto; display: block; cursor: pointer; }
.gallery-item .caption { padding: 8px 10px; font-size: 13px; color: var(--mdp-muted); }
#filter ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; justify-content: center; margin: 0 0 16px; }
#filter a.btn-theme { padding: 6px 12px; border: 1px solid var(--mdp-border); border-radius: 20px; background: var(--mdp-surface); display: inline-block; }
#filter a.current { background: var(--mdp-red); color: #fff; border-color: var(--mdp-red); }
@media (max-width: 991px) { .gallery-grid { column-count: 2; } }
@media (max-width: 600px) { .gallery-grid { column-count: 1; } }
dialog#imgDialog { border: none; padding: 0; background: transparent; max-width: 92vw; }
dialog#imgDialog::backdrop { background: rgba(0,0,0,.85); }
dialog#imgDialog img { max-width: 92vw; max-height: 88vh; border-radius: 8px; display: block; }

/* ---- Ikon sosial (SVG modern, konsisten tinggi) ---- */
.follow-me-icons i { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; font-size: 20px; }
.follow-me-icons i svg { width: 1em; height: 1em; }
.fa.fa-tiktok, .fa.fa-instagram, .fa.fa-facebook, .fa.fa-youtube, .fa.fa-x {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Ikon baris kontak (contact.html, ciamis.html) ----
   Ganti ikon font (Font Awesome) dengan SVG inline modern: garis tipis,
   warna ikut currentColor, jadi otomatis sesuai tema terang/gelap.
   Ukuran 18px, sejajar teks (vertical-align: -0.2em). */
.mdp-ico {
  width: 18px; height: 18px;
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 6px;
  color: var(--mdp-red);
  flex: 0 0 auto;
}
.mdp-ico-row {
  display: flex; align-items: flex-start;
  gap: 8px; margin-bottom: 6px;
}
.mdp-ico-row .mdp-ico { margin-right: 0; margin-top: 1px; }
.mdp-ico-row > span { min-width: 0; }

/* ---- Kartu layanan (services.html) ----
   Empat kartu dalam satu baris. Agar sejajar presisi:
   - .svc-card pakai flex kolom; tinggi penuh mengikuti kolom (stretch).
   - gambar diseragamkan tinggi (object-fit: cover) karena aslinya
     435/427/428/427 px — beda tinggi bikin dasar kartu tidak rata.
   - .svc-body flex:1 + .svc-cta margin-top:auto → tombol selalu di dasar.
   - warna dari token tema, jadi ikut light/dark tanpa aturan tambahan. */
.svc-row { display: flex; flex-wrap: wrap; }
.svc-col { display: flex; margin-bottom: 24px; }
.svc-card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border);
  border-radius: 4px; overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); border-color: var(--mdp-red); }
.svc-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.svc-card .svc-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.svc-card h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--mdp-text-strong); letter-spacing: .02em; }
.svc-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--mdp-text-muted); }
.svc-card .svc-cta { margin-top: auto; }
.svc-card .svc-cta .btn {
  display: block; width: 100%; padding: 9px 12px; font-weight: 700;
  /* warna brand eksplisit: style.css punya .btn{color!important;bg hijau}
     yang akan menimpa bila tidak ditulis di sini. */
  background: var(--mdp-red) !important;
  color: #fff !important;
  border: 1px solid #9a2a2d;
  text-align: center;
}
.svc-card .svc-cta .btn:hover {
  background: #9a2a2d !important;
  color: #fff !important;
}

/* ---- Theme switch: tombol di navbar (static, bukan floating) ----
   Ditempatkan sebagai <li> terakhir di nav, sejajar item navigasi lain.
   Ikon matahari/bulan bertumpuk lewat CSS Grid (grid-area sama), lalu
   bergantian dengan rotasi + opacity. */
.mdp-theme-item { display: inline-block; }
.mdp-theme-toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  /* Latar tipis agar tombol terbaca di navbar merah maupun saat collapse */
  background: rgba(0,0,0,.18);
  color: #fff;
  cursor: pointer; padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.mdp-theme-toggle:hover {
  background: rgba(0,0,0,.32);
  border-color: #FFF317;
  color: #FFF317;
}
.mdp-theme-toggle:active { transform: scale(.94); }
.mdp-theme-toggle svg { width: 20px; height: 20px; display: block; }
.mdp-theme-text { display: none; }
.mdp-theme-toggle .icon-sun,
.mdp-theme-toggle .icon-moon {
  grid-area: 1 / 1;
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  transform-origin: center;
}
.mdp-theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
.mdp-theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .mdp-theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .mdp-theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
/* Di panel mobile: baris penuh, ikon + label teks agar jelas */
@media (max-width: 991px) {
  .mdp-theme-item { display: block; }
  .mdp-theme-toggle {
    width: 100%; height: auto; min-height: 44px;
    grid-template-columns: 20px 1fr;
    justify-items: start;
    column-gap: 10px;
    padding: 10px 16px; border-radius: 0;
  }
  .mdp-theme-text { display: inline; font-size: 16px; }
}
/* Netralkan gaya nav umum yang tidak cocok untuk item tombol:
   - .navbar-nav>li:hover memberi latar merah; tombol punya hover sendiri.
   - drill-down mobile (:has(> li.open) > li:not(.open)) akan menyembunyikan
     tombol saat dropdown dibuka; tombol harus tetap terlihat. */
.navbar-nav > li.mdp-theme-item:hover { background: transparent; }
@media (max-width: 991px) {
  .navbar-nav:has(> li.open) > li.mdp-theme-item { display: block; }
}

/* ==========================================================================
   DARK MODE — membalik token, bukan menimpa tiap komponen.
   Palet diverifikasi WCAG AA (R-25): teks #e8e4e0 pada #16130f = 14.6:1,
   muted #b3ada7 = 8.3:1, link #e05558 = 4.95:1.
   ========================================================================== */
[data-theme="dark"] {
  --mdp-page: #16130f;
  --mdp-surface: #1f1b17;
  --mdp-surface-2: #24201b;
  --mdp-text: #e8e4e0;
  --mdp-text-strong: #f5f2ee;
  --mdp-text-muted: #b3ada7;
  --mdp-link: #e05558;
  --mdp-border: #322c26;
  --mdp-line: #322c26;
  --mdp-ink: #f5f2ee;
}
[data-theme="dark"] body {
  background: var(--mdp-page);
  color: var(--mdp-text);
}
[data-theme="dark"] a { color: var(--mdp-link); }
[data-theme="dark"] blockquote { color: var(--mdp-text-muted); }
[data-theme="dark"] label { color: var(--mdp-text); }
[data-theme="dark"] .text-muted { color: var(--mdp-text-muted); }
[data-theme="dark"] .jumbotron { background: var(--mdp-surface-2); }
[data-theme="dark"] .page-title { color: var(--mdp-link); }
[data-theme="dark"] .h-caption h4,
[data-theme="dark"] .caption h4 { color: var(--mdp-text-strong); }
[data-theme="dark"] .jumbotron p { color: var(--mdp-text); }
[data-theme="dark"] .breadcrumb a { color: var(--mdp-link); }
[data-theme="dark"] .skip-link { background: var(--mdp-surface); color: var(--mdp-link); }
/* Footer & navbar tetap gelap di kedua tema (identitas brand), teks tetap terang */
[data-theme="dark"] .footer1 { background: #141210; }
[data-theme="dark"] .footer1, [data-theme="dark"] .footer1 p,
[data-theme="dark"] .footer1 li, [data-theme="dark"] .footer1 .panel { color: #dcd7d2; }
[data-theme="dark"] .footer1 a { color: #f2efec; }
[data-theme="dark"] .footer1 a:hover { color: #FFF317; }
[data-theme="dark"] .footer1 .panel-title { color: #f2efec; }
[data-theme="dark"] .footer2 { background: #0d0b0a; }
/* Komponen khusus beranda (blockquote-box, kartu layanan) di dark */
[data-theme="dark"] .blockquote-box { background: var(--mdp-surface); border-color: var(--mdp-border); }
[data-theme="dark"] .blockquote-box h4 { color: var(--mdp-text-strong); }
[data-theme="dark"] .blockquote-box p { color: var(--mdp-text); }
[data-theme="dark"] .blockquote-box .square { background: var(--mdp-surface-2); }
[data-theme="dark"] .jumbotron.sectionBox { background: var(--mdp-surface-2); border-color: var(--mdp-border); }
[data-theme="dark"] .highlight { border-left-color: var(--mdp-border); }
[data-theme="dark"] .highlight .h-caption h4 { color: var(--mdp-text-strong); }
/* Halaman info/berita */
[data-theme="dark"] .news-item { background: var(--mdp-surface); border-color: var(--mdp-border); }
[data-theme="dark"] .news-item h3 { color: var(--mdp-text-strong); }
[data-theme="dark"] .news-item .news-content { color: var(--mdp-text); }
[data-theme="dark"] .news-item .news-date { color: var(--mdp-text-muted); }
[data-theme="dark"] .news-item .news-tag { background: #3a2426; color: #f0a0a2; }
[data-theme="dark"] .news-year { color: var(--mdp-link); border-bottom-color: var(--mdp-border); }
[data-theme="dark"] .info-toolbar .chip { background: var(--mdp-surface); border-color: var(--mdp-border); color: var(--mdp-text); }
[data-theme="dark"] .info-toolbar .chip.active { background: var(--mdp-red); color: #fff; border-color: var(--mdp-red); }
[data-theme="dark"] .news-item mark { background: #6b5c00; color: #fff8cc; }
/* Galeri & filter di dark */
[data-theme="dark"] .gallery-item { border-color: var(--mdp-border); background: var(--mdp-surface); }
[data-theme="dark"] .gallery-item .caption { color: var(--mdp-text-muted); }
[data-theme="dark"] #filter a.btn-theme { border-color: var(--mdp-border); background: var(--mdp-surface); color: var(--mdp-text); }
[data-theme="dark"] #filter a.current { background: var(--mdp-red); color: #fff; border-color: var(--mdp-red); }
/* Tema toggle menyesuaikan permukaan (di navbar, tetap kontras) */
[data-theme="dark"] .mdp-theme-toggle {
  color: #fff;
}
/* Transisi halus saat ganti tema, tanpa mengganggu reduced-motion.
   Tombol toggle tidak ikut di sini karena sudah punya transisi sendiri. */
html.mdp-theme-ready body,
html.mdp-theme-ready .jumbotron,
html.mdp-theme-ready .gallery-item { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .mdp-theme-toggle,
  .mdp-theme-toggle .icon-sun,
  .mdp-theme-toggle .icon-moon,
  html.mdp-theme-ready body,
  html.mdp-theme-ready .jumbotron,
  html.mdp-theme-ready .gallery-item { transition: none !important; }
}