/*
 * Website Desa — Visual Guard v1.12
 * Loaded AFTER app.css and theme.css.
 * Purpose: final contrast/responsive safety net so no theme can accidentally
 * render light-on-light/dark-on-dark controls or unreadable mobile drawers.
 */
:root{
  --vg-ink:#173342;
  --vg-ink-2:#3f5867;
  --vg-muted:#667d8a;
  --vg-line:#d8e4e9;
  --vg-soft:#f3f7f9;
  --vg-surface:#fff;
  --vg-danger:#a8241a;
  --vg-warning:#9a5a00;
}
html,body{max-width:100%;overflow-x:hidden}
main,.container,.grid,.card,.card-body,.brand-copy,.footer-grid>*{min-width:0}

/* ---------- buttons / interactive contrast ---------- */
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-3))!important;
  color:#fff!important;
  border-color:color-mix(in srgb,var(--primary) 76%,#000)!important;
  text-shadow:none!important;
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 88%,#000),color-mix(in srgb,var(--primary-3) 86%,#000))!important;
  color:#fff!important;
}
.btn-danger{
  background:linear-gradient(135deg,#b42318,#8d1c15)!important;
  color:#fff!important;border-color:#8d1c15!important;text-shadow:none!important
}
.btn-danger:hover,.btn-danger:focus-visible{background:linear-gradient(135deg,#9d2017,#761812)!important;color:#fff!important}
.btn-warning{
  background:linear-gradient(135deg,#d48a08,#a96200)!important;
  color:#fff!important;border-color:#a96200!important;text-shadow:none!important
}
.btn-warning:hover,.btn-warning:focus-visible{background:linear-gradient(135deg,#b97404,#8b5100)!important;color:#fff!important}
.btn-outline{background:#fff!important;color:#294555!important;border-color:#bfd0d9!important;text-shadow:none!important}
.btn-outline:hover,.btn-outline:focus-visible{background:color-mix(in srgb,var(--primary) 8%,#fff)!important;color:color-mix(in srgb,var(--primary) 80%,#000)!important;border-color:color-mix(in srgb,var(--primary) 45%,#bfd0d9)!important}
.btn-map{background:#fff!important;color:#143748!important;border-color:#d5e2e8!important;text-shadow:none!important}
.btn-map:hover,.btn-map:focus-visible{background:#f2f7f9!important;color:#0b2e3f!important;border-color:#bdd1da!important}
.icon-btn{background:#fff!important;color:#1c3a4a!important;border-color:#cfdee5!important}
.icon-btn:hover,.icon-btn:focus-visible{background:#edf4f7!important;color:#0c3246!important;border-color:#bcd0d9!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 32%,transparent);outline-offset:2px}

/* ---------- forms ---------- */
.form-group>label,.modal-body label{color:#1d3544!important}
.input,.select,.textarea,input.input,select.select,textarea.textarea{background:#fff!important;color:#183342!important;border-color:#c7d7df!important}
.input::placeholder,.textarea::placeholder{color:#8b9da8!important;opacity:1}
.input:hover,.select:hover,.textarea:hover{background:#fff!important;color:#183342!important;border-color:#99b1bd!important}
.input:focus,.select:focus,.textarea:focus{background:#fff!important;color:#102c3b!important;border-color:var(--primary)!important}
select option{background:#fff!important;color:#173342!important}

/* ---------- white data surfaces must always use dark ink ---------- */
.table-wrap,table.data{color:#203b4a}
table.data thead th{background:#edf3f6!important;color:#203c4c!important;border-color:#d7e3e9!important;text-align:center!important;vertical-align:middle!important}
table.data tbody td{color:#253f4e}
table.data tbody tr:hover td{background:#f5f9fa!important;color:#173342!important}
.empty,.empty-state{color:#5e7482}

/* ---------- office hours: explicit surface/ink pairing ---------- */
.public-office-hours{
  background:#fff!important;
  border:1px solid #d7e4e9!important;
  box-shadow:0 8px 24px rgba(18,56,76,.055);
  overflow:hidden!important
}
.public-office-table{background:#fff!important;color:#173746!important}
.public-office-table thead th{
  background:#edf5f7!important;
  color:#234454!important;
  border-color:#d8e5ea!important;
  font-weight:850!important
}
.public-office-table tbody td{
  background:#fff!important;
  color:#31505f!important;
  border-color:#e2eaee!important
}
.public-office-table tbody td:first-child{color:#173746!important;font-weight:850!important}
.public-office-table tbody tr:hover td{background:#f6fafb!important;color:#173746!important}
.office-status{background:#f4f7f8!important;border:1px solid #dce6ea!important;color:#223f4e!important}
.office-status b{color:#223f4e!important}
.theme-bahari .home-welcome .card:last-child .public-office-hours,
.theme-modern .home-welcome .card:last-child .public-office-hours,
.theme-nusantara .home-welcome .card:last-child .public-office-hours{background:#fff!important}
.theme-bahari .home-welcome .card:last-child .public-office-table th,
.theme-bahari .home-welcome .card:last-child .public-office-table td{color:#244655!important}
.theme-bahari .home-welcome .card:last-child .public-office-table th{background:#edf5f7!important}
.theme-bahari .home-welcome .card:last-child .public-office-table td{background:#fff!important;border-color:#e2eaee!important}
.theme-bahari .home-welcome .card:last-child .office-status{background:#fff!important;border-color:rgba(255,255,255,.72)!important}
.theme-bahari .home-welcome .card:last-child .office-status b{color:#244655!important}

/* ---------- mobile / compact public navigation ---------- */
@media(max-width:1040px){
  body .site-header .nav{
    background:#fff!important;
    color:#203b4a!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:-20px 0 70px rgba(8,28,39,.25)!important;
    width:min(390px,92vw)!important;
    max-width:100%!important;
    height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-color:#aebfc8 transparent;
    -webkit-overflow-scrolling:touch;
  }
  body .site-header .nav-mobile-head,
  body .site-header .nav-mobile-head b,
  body .site-header .nav-mobile-head strong{color:#173746!important}
  body .site-header .nav-mobile-head{background:#fff!important;border-bottom:1px solid #dce6eb!important}
  body .site-header .nav>a,
  body .site-header .nav-item>a,
  body .site-header .nav-parent-label,
  body .site-header .submenu a{
    color:#294756!important;
    background:transparent!important;
    border-color:transparent!important;
    text-shadow:none!important;
    opacity:1!important;
  }
  body .site-header .nav>a:hover,
  body .site-header .nav-item>a:hover,
  body .site-header .nav-parent-label:hover,
  body .site-header .submenu a:hover{
    background:color-mix(in srgb,var(--primary) 7%,#fff)!important;
    color:color-mix(in srgb,var(--primary) 78%,#102b3b)!important;
    border-color:color-mix(in srgb,var(--primary) 14%,#d8e4e9)!important;
  }
  body .site-header .nav>a.active,
  body .site-header .nav-item>a.active,
  body .site-header .submenu a.active{
    background:color-mix(in srgb,var(--primary) 11%,#fff)!important;
    color:color-mix(in srgb,var(--primary) 82%,#0c2634)!important;
    border-color:color-mix(in srgb,var(--primary) 22%,#d4e2e8)!important;
    box-shadow:none!important;
  }
  body .site-header .submenu-toggle{background:#f0f5f7!important;color:#3f5f6f!important;border-color:#d9e5ea!important}
  body .site-header .nav-item .submenu{background:transparent!important;border-left-color:#d7e4e9!important}
  body .site-header .nav .nav-login.btn-primary,
  body .site-header .nav .nav-login.btn-primary:hover,
  body .site-header .nav .nav-login.btn-primary:focus-visible{
    background:linear-gradient(135deg,var(--primary),var(--primary-3))!important;
    color:#fff!important;
    border-color:color-mix(in srgb,var(--primary) 70%,#000)!important;
  }
  body .site-header .nav-close{background:#eff4f6!important;color:#173746!important;border-color:#d2e0e6!important}
  body .site-header .nav-close:hover{background:#e5edf1!important;color:#0f2f40!important}
  body .nav-backdrop{background:rgba(8,23,32,.58)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ---------- cards / public content responsive guard ---------- */
.news-card,.structure-card,.aid-program-card,.public-stat-link-card,.budget-public-card{min-width:0}
.news-card h1,.news-card h2,.news-card h3,.structure-card h1,.structure-card h2,.structure-card h3{overflow-wrap:anywhere}
.rich-content img,.rich-content video,.rich-content iframe{max-width:100%;height:auto}
.rich-content table{max-width:100%}

/* ---------- footer hierarchy ---------- */
.footer-brand{align-items:center!important}
.footer-brand .brand-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.footer-brand .brand-copy h3{margin:0!important;line-height:1.2}
.footer-location-line{
  display:block!important;
  margin-top:5px!important;
  max-width:540px;
  color:#cbdde4!important;
  font-size:11.5px!important;
  line-height:1.45!important;
  font-weight:520!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:normal!important;
}
.footer-office-address{margin:12px 0 0!important;max-width:560px;color:#c5d8df!important;font-size:12px!important;line-height:1.55}
.footer .brand-eyebrow{margin-bottom:3px}
.footer .brand-logo{flex:0 0 auto}

/* ---------- mobile precision ---------- */
@media(max-width:760px){
  .header-inner{gap:9px!important}
  .brand{max-width:calc(100% - 52px)!important}
  .brand-copy{overflow:hidden}
  .hero-frame{width:100%;max-width:100%}
  .home-welcome .card,.home-budget .card,.home-news .card{min-width:0!important}
  .public-office-hours{border-radius:12px!important;box-shadow:none!important}
  .public-office-table,.public-office-table tbody{width:100%!important}
  .public-office-table tr{background:#fff!important;border:1px solid #dde8ec!important}
  .public-office-table td{color:#31505f!important;background:transparent!important}
  .public-office-table td:first-child{color:#173746!important}
  .footer-brand{align-items:flex-start!important}
  .footer-location-line{font-size:11px!important;margin-top:4px!important}
  .footer-office-address{font-size:11.5px!important;margin-top:9px!important}
  .social-links{display:flex!important;flex-wrap:wrap!important}
  .social-link{flex:0 0 auto}
}

@media(max-width:480px){
  body .site-header .nav{width:min(348px,94vw)!important;padding-left:14px!important;padding-right:14px!important}
  .footer-brand .brand-logo{width:42px!important;height:50px!important}
  .footer-brand .brand-copy h3{font-size:16px!important}
  .footer-location-line{font-size:10.5px!important}
  .public-office-table tr{grid-template-columns:1.15fr .85fr 1.25fr .85fr!important;gap:4px!important;padding:9px 7px!important}
  .public-office-table td{font-size:9.5px!important;line-height:1.35!important;overflow-wrap:anywhere}
}

/* Respect reduced-motion while retaining visible hover/focus states. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =========================================================
   v1.13 — Premium footer composition
   Keeps logo + village identity compact, left aligned and balanced.
   ========================================================= */
.footer .footer-shell{
  position:relative;
  padding:42px 0 22px!important;
}
.footer .footer-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(220px,.8fr) minmax(220px,.75fr)!important;
  gap:clamp(28px,4vw,64px)!important;
  align-items:start!important;
}
.footer .footer-column{min-width:0;text-align:left!important}
.footer .footer-identity{max-width:660px}
.footer .footer-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:13px!important;
  width:100%!important;
  min-width:0!important;
  text-align:left!important;
  margin:0!important;
}
.footer .footer-brand .brand-logo{
  width:56px!important;
  height:64px!important;
  flex:0 0 56px!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}
.footer .footer-brand .brand-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:0!important;
  min-width:0!important;
  text-align:left!important;
  margin:0!important;
}
.footer .footer-brand .brand-eyebrow{
  margin:0 0 3px!important;
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:820!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
  text-align:left!important;
}
.footer .footer-brand .brand-copy h3{
  margin:0!important;
  font-size:21px!important;
  line-height:1.12!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  text-align:left!important;
}
.footer .footer-location-line{
  display:block!important;
  margin:6px 0 0!important;
  max-width:560px!important;
  font-size:11.5px!important;
  line-height:1.48!important;
  font-weight:520!important;
  letter-spacing:0!important;
  text-transform:none!important;
  text-align:left!important;
  white-space:normal!important;
}
.footer .footer-office-address{
  margin:14px 0 0 69px!important;
  max-width:520px!important;
  padding-top:12px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  font-size:12px!important;
  line-height:1.58!important;
  text-align:left!important;
}
.footer .footer-kicker{
  display:block;
  margin:1px 0 6px;
  font-size:9px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.76;
}
.footer .footer-column>h3{
  margin:0 0 14px!important;
  font-size:17px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
  text-align:left!important;
}
.footer .social-links{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
.footer .social-link{
  min-height:36px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 12px!important;
  border-radius:10px!important;
  font-size:11.5px!important;
  font-weight:720!important;
  line-height:1!important;
  text-align:center!important;
}
.footer .footer-map .btn-map{
  min-height:42px!important;
  padding:10px 16px!important;
  border-radius:11px!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.footer .footer-empty-note{font-size:11.5px!important;line-height:1.5!important;opacity:.76}
.footer .footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.11);
  font-size:10.5px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.01em;
  color:#bcd0d6;
}
/* Prevent theme-level masthead rules from centering footer identity. */
.theme-modern .footer .footer-brand,
.theme-modern .footer .footer-brand .brand-copy,
.theme-nusantara .footer .footer-brand,
.theme-nusantara .footer .footer-brand .brand-copy,
.theme-bahari .footer .footer-brand,
.theme-bahari .footer .footer-brand .brand-copy{
  justify-content:flex-start!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.theme-modern .footer .footer-brand{align-items:center!important}
.theme-nusantara .footer .footer-brand{align-items:center!important}
.theme-bahari .footer .footer-brand{align-items:center!important}

@media(max-width:980px){
  .footer .footer-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(210px,.8fr)!important;
    gap:30px!important;
  }
  .footer .footer-map{grid-column:1/-1!important}
  .footer .footer-map .btn-map{width:max-content!important}
}
@media(max-width:700px){
  .footer .footer-shell{padding:30px 0 18px!important}
  .footer .footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  .footer .footer-map{grid-column:auto!important}
  .footer .footer-column{padding:0!important}
  .footer .footer-brand{gap:11px!important;align-items:center!important}
  .footer .footer-brand .brand-logo{width:48px!important;height:55px!important;flex-basis:48px!important}
  .footer .footer-brand .brand-copy h3{font-size:18px!important}
  .footer .footer-brand .brand-eyebrow{font-size:8.8px!important;letter-spacing:.09em!important}
  .footer .footer-location-line{font-size:10.5px!important;margin-top:4px!important}
  .footer .footer-office-address{margin:11px 0 0 59px!important;padding-top:10px!important;font-size:11px!important}
  .footer .footer-column>h3{font-size:16px!important;margin-bottom:11px!important}
  .footer .footer-bottom{align-items:flex-start;flex-direction:column;gap:5px;margin-top:26px;padding-top:15px;font-size:9.8px}
}
@media(max-width:430px){
  .footer .footer-brand{gap:9px!important}
  .footer .footer-brand .brand-logo{width:43px!important;height:50px!important;flex-basis:43px!important}
  .footer .footer-brand .brand-copy h3{font-size:16px!important}
  .footer .footer-location-line{font-size:9.8px!important;line-height:1.4!important}
  .footer .footer-office-address{margin-left:52px!important}
  .footer .social-link{padding:8px 10px!important;font-size:10.8px!important}
  .footer .footer-map .btn-map{width:100%!important}
}