/*
Theme Name: Desa Classic
Theme URI: https://ompom.id/themes/desa-classic
Author: Ompom Development Team
Author URI: https://ompom.id
Description: Custom Classic WordPress Theme untuk 112 Website Desa. v1.0.4 — Nav mobile up to 1279px, sidebar sticky beside content ≥540px, overlay z-index fixed, plugin styles merged.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 8.1
License: Proprietary — Custom Assets Bundle ompom.id
Text Domain: desa-classic
Tags: government, village, indonesian, responsive, accessibility-ready, custom-logo, custom-menu
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --color-primary:       #2D8659;
  --color-primary-dark:  #1F5C3D;
  --color-primary-light: #3FA673;
  --color-primary-xl:    #E8F5EE;
  --color-white:     #FFFFFF;
  --color-gray-50:   #F9FAFB;
  --color-gray-100:  #F3F4F6;
  --color-gray-200:  #E5E7EB;
  --color-gray-300:  #D1D5DB;
  --color-gray-400:  #9CA3AF;
  --color-gray-500:  #6B7280;
  --color-gray-700:  #374151;
  --color-gray-800:  #1F2937;
  --color-gray-900:  #111827;
  --color-text:         var(--color-gray-800);
  --color-text-muted:   var(--color-gray-500);
  --color-border:       var(--color-gray-200);
  --color-bg:           var(--color-white);
  --color-accent:       #F59E0B;
  --color-error:        #EF4444;
  --color-success:      #10B981;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
  --text-xs:   .75rem;  --text-sm:   .875rem; --text-base: 1rem;
  --text-lg:   1.125rem; --text-xl:  1.25rem;  --text-2xl: 1.5rem;
  --text-3xl:  1.875rem; --text-4xl: 2.25rem;  --text-5xl: 3rem;
  --text-6xl:  3.75rem;
  --fw-light: 300; --fw-normal: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;
  --lh-tight: 1.2; --lh-snug: 1.375; --lh-normal: 1.6; --lh-relaxed: 1.75;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem;
  --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,.25);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;
  --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030;
  --z-overlay: 1040; --z-modal: 1050; --z-toast: 1060;
  --header-height: 70px;
  --container-max: 1280px;
  --container-pad: var(--sp-6);
  --hero-height: 65vh;
  --hero-min-h: 500px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth !important}
body{overflow-x:hidden}

/* CRITICAL: SVG inline fix — not display:block by default */
svg{display:inline-block;vertical-align:middle;flex-shrink:0}
img,picture,video,canvas{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
a{text-decoration:none;color:inherit;transition:color var(--dur-fast) var(--ease)}
ul,ol{list-style:none}

/* ── Base typography ───────────────────────────────────────── */
body{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--fw-normal);line-height:var(--lh-normal);color:var(--color-text);background:var(--color-bg)}
h1,h2,h3,h4,h5,h6{font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--color-gray-900);margin-bottom:var(--sp-4)}
h1{font-size:clamp(var(--text-3xl),4vw,var(--text-5xl))}
h2{font-size:clamp(var(--text-2xl),3vw,var(--text-4xl))}
h3{font-size:clamp(var(--text-xl),2.5vw,var(--text-3xl))}
h4{font-size:var(--text-xl)} h5{font-size:var(--text-lg)} h6{font-size:var(--text-base)}
p{margin-bottom:var(--sp-4)} p:last-child{margin-bottom:0}
a{color:var(--color-primary)}
a:hover,a:focus{color:var(--color-primary-dark);text-decoration:underline}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);font-weight:var(--fw-semibold);font-size:var(--text-sm);cursor:pointer;border:2px solid transparent;border-radius:var(--radius-md);transition:all var(--dur-base) var(--ease);line-height:1.4;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.btn svg{flex-shrink:0}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border-color:var(--color-primary-dark);box-shadow:0 2px 8px rgba(45,134,89,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(45,134,89,.4);color:#fff;text-decoration:none}
.btn-outline{color:#fff;background:transparent;border-color:rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.btn-outline:hover{background:rgba(255,255,255,.15);border-color:#fff;text-decoration:none;color:#fff}
.btn-outline-dark{color:var(--color-primary);background:transparent;border-color:var(--color-primary)}
.btn-outline-dark:hover{color:#fff;background:var(--color-primary);text-decoration:none}
.btn-sm{padding:var(--sp-2) var(--sp-4);font-size:var(--text-xs)}
.btn-lg{padding:var(--sp-4) var(--sp-8);font-size:var(--text-lg)}

/* ── Layout ────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.section{padding-block:var(--sp-20)}
.section-sm{padding-block:var(--sp-12)}
.section-lg{padding-block:var(--sp-24)}
.section-alt{background:var(--color-gray-50)}

.section-header{text-align:center;margin-bottom:var(--sp-12)}
.section-tag{display:inline-block;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-xl);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);margin-bottom:var(--sp-3)}
.section-header h2{position:relative;display:inline-block;padding-bottom:var(--sp-4);margin-bottom:var(--sp-4)}
.section-header h2::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));border-radius:var(--radius-full)}
.section-header p{max-width:600px;margin-inline:auto;color:var(--color-text-muted);font-size:var(--text-lg)}

.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}

/* Card */
.card{background:var(--color-white);border-radius:var(--radius-xl);border:1px solid var(--color-border);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card-img{width:100%;height:200px;object-fit:cover;display:block}
.card-body{padding:var(--sp-6)}
.card-title{font-size:var(--text-lg);margin-bottom:var(--sp-3);font-weight:var(--fw-semibold)}
.card-text{color:var(--color-text-muted);font-size:var(--text-sm)}
.card-footer{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--color-border)}

/* ── Header & Branding ─────────────────────────────────────── */
.site-header{background:var(--color-white);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:var(--z-sticky);height:var(--header-height);border-bottom:1px solid var(--color-border);transition:box-shadow var(--dur-base) var(--ease)}
.site-header.scrolled{box-shadow:var(--shadow-md);border-bottom-color:transparent}
.header-container{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad);gap:var(--sp-6)}
.site-branding{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.custom-logo-link{display:block;line-height:0;flex-shrink:0}
.custom-logo{max-height:60px;width:auto}
.site-branding-text{line-height:1.2}
.site-title{font-size:var(--text-lg);font-weight:var(--fw-bold);margin:0;line-height:1.2}
.site-title a{color:var(--color-gray-900);text-decoration:none}
.site-title a:hover{color:var(--color-primary);text-decoration:none}
.site-description{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}

/* ── PENTING ompom masthead ─────────────────────────────────────── */
header#masthead.site-header {
    z-index: 1040;
}

/* ── Navigation Desktop ────────────────────────────────────── */
.main-navigation{display:flex;align-items:center;flex:1;justify-content:flex-end}

/* Top-level list */
.main-navigation .nav-menu{display:flex;align-items:center;gap:var(--sp-1);margin:0;padding:0;list-style:none}

/* Each top-level item — MUST be relative for dropdown */
.main-navigation .nav-menu > li{position:relative}

/* All nav links */
.main-navigation .nav-menu a{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);color:var(--color-gray-700);font-weight:var(--fw-medium);font-size:var(--text-sm);border-radius:var(--radius-md);transition:color var(--dur-fast),background var(--dur-fast);white-space:nowrap;text-decoration:none;position:relative}

/* Underline indicator on desktop top links */
.main-navigation .nav-menu > li > a::after{content:'';position:absolute;bottom:4px;left:var(--sp-3);right:var(--sp-3);height:2px;background:var(--color-primary);border-radius:var(--radius-full);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease)}

.main-navigation .nav-menu > li > a:hover,
.main-navigation .nav-menu > li > a:focus{color:var(--color-primary);background:var(--color-primary-xl);text-decoration:none}
.main-navigation .nav-menu > li > a:hover::after{transform:scaleX(1)}
.main-navigation .nav-menu > li.current-menu-item > a,
.main-navigation .nav-menu > li.current-menu-ancestor > a{color:var(--color-primary);background:var(--color-primary-xl);font-weight:var(--fw-semibold)}
.main-navigation .nav-menu > li.current-menu-item > a::after,
.main-navigation .nav-menu > li.current-menu-ancestor > a::after{transform:scaleX(1)}

/* ══ DROPDOWN FIX ══════════════════════════════════════════════
   Bug: sub-menu was missing display:none + proper positioning.
   Fix: explicit hidden state + absolute positioning on hover/focus.
   ═══════════════════════════════════════════════════════════════ */
.main-navigation .nav-menu .sub-menu{
  display:none;                      /* HIDDEN — the missing piece */
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:220px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  padding:var(--sp-2) 0;
  z-index:var(--z-dropdown);
  list-style:none;
  pointer-events:none;               /* Prevent ghost interactions when hidden */
  animation:ddIn var(--dur-fast) var(--ease);
}

@keyframes ddIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Show on hover + focus-within + JS class */
.main-navigation .nav-menu > li.menu-item-has-children:hover > .sub-menu,
.main-navigation .nav-menu > li.menu-item-has-children:focus-within > .sub-menu,
.main-navigation .nav-menu > li.menu-item-has-children.submenu-open > .sub-menu{
  display:block;
  pointer-events:auto;
}

/* Sub-menu links */
.main-navigation .sub-menu a{padding:var(--sp-3) var(--sp-5);color:var(--color-gray-700);font-size:var(--text-sm);border-radius:0}
.main-navigation .sub-menu a::after{display:none} /* No underline in dropdown */
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus{color:var(--color-primary);background:var(--color-primary-xl);text-decoration:none}
.main-navigation .sub-menu li:first-child a{border-radius:var(--radius-md) var(--radius-md) 0 0}
.main-navigation .sub-menu li:last-child a{border-radius:0 0 var(--radius-md) var(--radius-md)}
.main-navigation .sub-menu .sub-menu{top:-var(--sp-2);left:calc(100% + 4px)} /* Nested */

/* Submenu toggle button (injected by JS) */
.submenu-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:var(--sp-1);cursor:pointer;color:inherit;border-radius:var(--radius-sm);margin-left:var(--sp-1);transition:transform var(--dur-fast) var(--ease);vertical-align:middle}
.submenu-toggle:hover{background:var(--color-gray-100)}
.submenu-toggle svg{width:14px;height:14px;display:inline-block;vertical-align:middle}
.menu-item-has-children.submenu-open .submenu-toggle{transform:rotate(180deg)}

/* ── Mobile Menu Toggle ────────────────────────────────────── */
.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:var(--sp-2);color:var(--color-gray-700);border-radius:var(--radius-md);transition:background var(--dur-fast);flex-shrink:0}
.menu-toggle:hover{background:var(--color-gray-100)}
.menu-toggle[aria-expanded="true"]{color:var(--color-primary);background:var(--color-primary-xl)}
.menu-toggle-bar{display:block;width:22px;height:2px;background:currentColor;border-radius:var(--radius-full);transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease);margin:2px 0}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile overlay */
.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--z-fixed);backdrop-filter:blur(2px)}
/* FIX: overlay MUST NOT cover nav panel — nav uses --z-overlay which is above --z-fixed */
.mobile-nav-overlay.active{display:block;z-index:var(--z-fixed)}
.mobile-nav-overlay.active{display:block}
.mobile-nav-close{position:absolute;top:var(--sp-4);right:var(--sp-4);display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;cursor:pointer;color:var(--color-gray-500);border-radius:var(--radius-full);transition:background var(--dur-fast)}
.mobile-nav-close:hover{background:var(--color-gray-100);color:var(--color-gray-900)}

/* ── Hero ──────────────────────────────────────────────────── */
.hero-banner{position:relative;min-height:var(--hero-height);min-height:max(var(--hero-height),var(--hero-min-h));display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center top;background-repeat:no-repeat;overflow:hidden}
.hero-banner.no-image{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 50%,#0f3d25 100%)}

/* SVG pattern overlay */
.hero-banner::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");z-index:0;pointer-events:none}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(31,92,61,.82) 0%,rgba(45,134,89,.70) 40%,rgba(15,61,37,.88) 100%);z-index:1}

.hero-video-wrapper{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-video-iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.77vh;transform:translate(-50%,-50%);pointer-events:none}

.hero-content{position:relative;z-index:2;text-align:center;color:#fff;max-width:860px;padding:var(--sp-8) var(--container-pad);width:100%}
.hero-tag{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:var(--fw-semibold);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);margin-bottom:var(--sp-5);backdrop-filter:blur(8px)}
.hero-title{font-size:clamp(2rem,5vw,var(--text-6xl));font-weight:var(--fw-black);line-height:var(--lh-tight);margin-bottom:var(--sp-5);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3);letter-spacing:-.02em}
.hero-subtitle{font-size:clamp(var(--text-base),2vw,var(--text-xl));margin-bottom:var(--sp-8);opacity:.92;max-width:640px;margin-inline:auto;line-height:var(--lh-relaxed)}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);flex-wrap:wrap;padding-top:var(--sp-8);border-top:1px solid rgba(255,255,255,.2)}
.hero-stat{text-align:center}
.hero-stat-value{font-size:var(--text-3xl);font-weight:var(--fw-black);color:#fff;line-height:1;display:block}
.hero-stat-label{font-size:var(--text-xs);color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.08em;margin-top:var(--sp-1);display:block}

.hero-scroll-indicator{position:absolute;bottom:var(--sp-8);left:50%;transform:translateX(-50%);z-index:2;animation:heroScroll 2s ease-in-out infinite}
.hero-scroll-indicator a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid rgba(255,255,255,.5);border-radius:var(--radius-full);color:#fff;transition:all var(--dur-base);text-decoration:none}
.hero-scroll-indicator a:hover{background:rgba(255,255,255,.2);border-color:#fff;text-decoration:none}
@keyframes heroScroll{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ── Content sections ──────────────────────────────────────── */
.stat-card{text-align:center;padding:var(--sp-8) var(--sp-6);background:#fff;border-radius:var(--radius-xl);border:1px solid var(--color-border);transition:all var(--dur-base);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light))}
.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.stat-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--color-primary-xl);border-radius:var(--radius-xl);margin:0 auto var(--sp-4);color:var(--color-primary)}
.stat-icon svg{width:28px;height:28px;display:block}
.stat-value{font-size:var(--text-4xl);font-weight:var(--fw-black);color:var(--color-gray-900);line-height:1;display:block}
.stat-label{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--sp-2);font-weight:var(--fw-medium)}

/* News cards */
.news-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--radius-xl);border:1px solid var(--color-border);overflow:hidden;transition:all var(--dur-base)}
.news-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.news-card-img-wrap{position:relative;overflow:hidden;aspect-ratio:16/9}
.news-card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.news-card:hover .news-card-img-wrap img{transform:scale(1.05)}
.news-card-category{position:absolute;top:var(--sp-3);left:var(--sp-3);background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:var(--fw-semibold);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-full)}
.news-card-body{padding:var(--sp-5);flex:1;display:flex;flex-direction:column}
.news-card-date{font-size:var(--text-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.news-card-title{font-size:var(--text-base);font-weight:var(--fw-semibold);line-height:var(--lh-snug);margin-bottom:var(--sp-3);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card-title a{color:var(--color-gray-900);text-decoration:none}
.news-card-title a:hover{color:var(--color-primary);text-decoration:none}
.news-card-excerpt{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--sp-4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card-link{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--color-primary);text-decoration:none;margin-top:auto;transition:gap var(--dur-fast)}
.news-card-link:hover{gap:var(--sp-3);text-decoration:none}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer{background:var(--color-gray-900);color:rgba(255,255,255,.8);position:relative;overflow:hidden}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary),var(--color-primary-light))}
.footer-widgets{padding:var(--sp-16) 0 var(--sp-12)}
.footer-widgets-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-8);align-items:start}
.footer-widget-title{font-size:var(--text-base);font-weight:var(--fw-bold);color:#fff;margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:.02em}
.footer-column ul{list-style:none}
.footer-column li{margin-bottom:var(--sp-3)}
.footer-column a{color:rgba(255,255,255,.65);font-size:var(--text-sm);transition:color var(--dur-fast);display:inline-flex;align-items:center;gap:var(--sp-2);text-decoration:none}
.footer-column a:hover{color:#fff;text-decoration:none}
.social-links{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);color:rgba(255,255,255,.7);transition:all var(--dur-base);text-decoration:none}
.social-link:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-2px);text-decoration:none}
.social-link svg{width:18px;height:18px;display:block}
.footer-office-hours{font-size:var(--text-sm);color:rgba(255,255,255,.65);line-height:var(--lh-relaxed)}
.site-info{border-top:1px solid rgba(255,255,255,.08);padding:var(--sp-6) 0}
.site-info-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}
.copyright-text{font-size:var(--text-sm);color:rgba(255,255,255,.5)}
.theme-credit{font-size:var(--text-sm);color:rgba(255,255,255,.4)}
.theme-credit a{color:rgba(255,255,255,.6);text-decoration:none;transition:color var(--dur-fast)}
.theme-credit a:hover{color:var(--color-primary-light);text-decoration:none}

.back-to-top{position:fixed;bottom:var(--sp-6);right:var(--sp-6);width:48px;height:48px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:all var(--dur-base) var(--ease);z-index:var(--z-fixed);box-shadow:var(--shadow-lg)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top:hover{background:var(--color-primary-dark);transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-xl)}
.back-to-top svg{display:block;width:20px;height:20px}

/* ── Sidebar & Widgets ─────────────────────────────────────── */
.widget-area{display:flex;flex-direction:column;gap:var(--sp-8)}
.widget{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--sp-6)}
.widget-title{font-size:var(--text-base);font-weight:var(--fw-bold);margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:2px solid var(--color-primary);color:var(--color-gray-900)}

/* ── Content ───────────────────────────────────────────────── */
.with-sidebar .content-area{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-10);align-items:start}
.entry-header{margin-bottom:var(--sp-8)}
.entry-title{font-size:clamp(var(--text-2xl),3.5vw,var(--text-4xl));margin-bottom:var(--sp-5)}
.entry-meta{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;color:var(--color-text-muted);font-size:var(--text-sm)}
.entry-meta a{color:var(--color-primary)}
.entry-content{max-width:72ch;line-height:var(--lh-relaxed)}
.entry-content h2,.entry-content h3,.entry-content h4{margin-top:var(--sp-8);margin-bottom:var(--sp-4)}
.entry-content p{margin-bottom:var(--sp-5)}
.entry-content img{border-radius:var(--radius-lg);margin-block:var(--sp-6)}
.entry-content blockquote{border-left:4px solid var(--color-primary);margin:var(--sp-8) 0;padding:var(--sp-5) var(--sp-6);background:var(--color-primary-xl);border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-style:italic;color:var(--color-primary-dark)}

/* ── Forms ─────────────────────────────────────────────────── */
.form-group{margin-bottom:var(--sp-5)}
.form-label{display:block;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-gray-700);margin-bottom:var(--sp-2)}
.form-control{display:block;width:100%;padding:var(--sp-3) var(--sp-4);font-size:var(--text-base);color:var(--color-gray-900);background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);appearance:none}
.form-control:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(45,134,89,.15)}
.form-control::placeholder{color:var(--color-gray-400)}

/* ── Accessibility ─────────────────────────────────────────── */
.skip-link{position:absolute;top:-60px;left:var(--sp-4);z-index:9999;background:var(--color-primary);color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-md);font-weight:var(--fw-semibold);text-decoration:none;transition:top var(--dur-fast)}
.skip-link:focus{top:var(--sp-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
*:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
body:not(.keyboard-nav) *:focus:not(:focus-visible){outline:none}

/* ── License Gate (HAKI) ───────────────────────────────────── */
.desa-license-gate{position:fixed;inset:0;background:#fff;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:var(--sp-6);padding:var(--sp-8)}
.desa-license-gate h2{font-size:var(--text-2xl);color:var(--color-gray-900);margin-bottom:var(--sp-3)}
.desa-license-gate p{color:var(--color-text-muted);max-width:400px;margin:0 auto}
.desa-license-gate .license-badge{background:#FEF2F2;color:#991B1B;border:1px solid #FCA5A5;padding:var(--sp-3) var(--sp-6);border-radius:var(--radius-full);font-weight:var(--fw-semibold);font-size:var(--text-sm)}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1280px){:root{--container-pad:var(--sp-5)}}

/* ── Desktop nav: hamburger hidden, horizontal menu visible ≥ 1280px ── */
@media(min-width:1280px){
  .menu-toggle{display:none!important}
  .mobile-nav-overlay{display:none!important}
}

/* ── Mobile+Tablet nav (hamburger + slide panel) up to 1279px ── */
@media(max-width:1279px){
  :root{--hero-height:55vh;--hero-min-h:420px;--container-pad:var(--sp-5)}
  .menu-toggle{display:flex}

  /* ── Mobile nav panel (slide-in from right) ──────────────── */
  /* z-index: --z-overlay (1040) so panel sits ABOVE overlay (1030) */
  .main-navigation{
    position:fixed;top:0;right:-320px;width:300px;max-width:85vw;
    height:100dvh;background:#fff;box-shadow:var(--shadow-2xl);
    padding:var(--sp-20) var(--sp-6) var(--sp-8);
    overflow-y:auto;overflow-x:hidden;
    z-index:var(--z-overlay);
    transition:right var(--dur-slow) var(--ease);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
  }

  .main-navigation.toggled{right:0}

  .main-navigation .nav-menu{flex-direction:column;align-items:stretch;gap:var(--sp-1);width:100%}
  .main-navigation .nav-menu > li{width:100%}
  .main-navigation .nav-menu > li > a{padding:var(--sp-3) var(--sp-4);font-size:var(--text-base);border-radius:var(--radius-md);justify-content:space-between}
  .main-navigation .nav-menu > li > a::after{display:none}

  /* Mobile sub-menu: expand vertically */
  .main-navigation .sub-menu{
    position:static!important;
    display:none;
    box-shadow:none;border:none;border-radius:0;
    padding:0 0 0 var(--sp-4);
    background:var(--color-gray-50);
    border-left:2px solid var(--color-primary-light);
    margin:var(--sp-2) 0 var(--sp-2) var(--sp-4);
    animation:none;pointer-events:auto;
  }

  /* Override desktop hover rule on mobile */
  .main-navigation .nav-menu > li.menu-item-has-children:hover > .sub-menu,
  .main-navigation .nav-menu > li.menu-item-has-children:focus-within > .sub-menu{
    display:none;
  }
  /* Only JS class opens on mobile */
  .main-navigation .nav-menu > li.menu-item-has-children.submenu-open > .sub-menu{
    display:block;
  }

  .main-navigation .sub-menu a{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md)}
  /* ── Sidebar: stays beside content on tablet (≥ 540px), stack < 540px ── */
  /* Override happens in finer breakpoints below — leave 2-col as default */
  /* .with-sidebar stays at 1fr 300px until 540px via separate rule below */
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  /*.grid-3{grid-template-columns:repeat(3,1fr)!important} /* ompom custom */
}

@media(max-width:640px){
  :root{--hero-height:50vh;--hero-min-h:360px;--container-pad:var(--sp-4)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stat-value{font-size:var(--text-2xl)}
  .hero-stats{gap:var(--sp-5)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .section{padding-block:var(--sp-12)}
  .footer-widgets-inner{grid-template-columns:1fr 1fr}
  .site-info-inner{flex-direction:column;text-align:center}
  .back-to-top{bottom:var(--sp-4);right:var(--sp-4)}
}

@media(max-width:380px){.footer-widgets-inner{grid-template-columns:1fr}}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}

.animate-fade-in-up{animation:fadeInUp .5s var(--ease) both}
.animate-fade-in{animation:fadeIn .4s var(--ease) both}

.skeleton{background:linear-gradient(90deg,var(--color-gray-100) 25%,var(--color-gray-200) 50%,var(--color-gray-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}

/* Reading progress bar */
.reading-progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));z-index:9999;transition:width .1s linear}

/* WP alignment */
.alignleft{float:left;margin:0 var(--sp-6) var(--sp-4) 0}
.alignright{float:right;margin:0 0 var(--sp-4) var(--sp-6)}
.aligncenter{margin-inline:auto;display:block;text-align:center}
.alignfull{width:100vw;margin-left:calc(50% - 50vw)}

/* Admin bar */
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){.admin-bar .site-header{top:46px}}

/* Print */
@media print{
  .site-header,.site-footer,.back-to-top,.reading-progress-bar,
  .menu-toggle,.mobile-nav-overlay{display:none!important}
}

/* ================================================================
   DESA CLASSIC — EXTENDED STYLES (merged from custom.css)
   Version: 1.0.4
   ================================================================ */

/* ── Sidebar responsive behaviour ──────────────────────────────────
   Default (style.css): .with-sidebar keeps 1fr 300px (desktop).
   We need it to STAY beside content down to 540px, stack below that.
   ────────────────────────────────────────────────────────────────── */

/* Tablet: narrower sidebar to fit */
@media(min-width:768px) and (max-width:1023px){
  .with-sidebar .content-area{
    grid-template-columns: 1fr 240px;
    gap: var(--sp-6);
  }
}

/* Small tablet / large phone */
@media(min-width:540px) and (max-width:767px){
  .with-sidebar .content-area{
    grid-template-columns: 1fr 200px;
    gap: var(--sp-4);
  }
}

/* Below 540px: ONLY then stack sidebar (full-width content first) */
@media(max-width:539px){
  .with-sidebar .content-area{
    grid-template-columns: 1fr;
  }
  .widget-area{
    /* Sidebar goes horizontal / compact on very small screens */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
  }
}

/* Sidebar sticky — follows scroll without jumping off-screen */
@media(min-width:540px){
  .widget-area{
    position: sticky;
    top: calc(var(--header-height) + var(--sp-4));
    max-height: calc(100dvh - var(--header-height) - var(--sp-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-200) transparent;
  }
  .widget-area::-webkit-scrollbar{ width:4px }
  .widget-area::-webkit-scrollbar-thumb{
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
  }
}

/* ── 1280px+ Desktop nav: polished horizontal ──────────────────────
   At ≥1280px hamburger is hidden (fixed above). Make sure horizontal
   nav gets the right submenu-toggle hide + proper hover dropdown.
   ────────────────────────────────────────────────────────────────── */
@media(min-width:1280px){
  /* Submenu toggle not needed on desktop — hover/focus does it */
  .main-navigation .nav-menu .submenu-toggle{ display:none!important }

  /* Smooth dropdown open */
  .main-navigation .nav-menu > li.menu-item-has-children:hover > .sub-menu,
  .main-navigation .nav-menu > li.menu-item-has-children:focus-within > .sub-menu{
    display:block;
    animation: ddIn var(--dur-fast) var(--ease);
  }
}

/* ── Mobile nav 1024–1279px: ensure hamburger shows ────────────────
   Theme hid .menu-toggle at min-width:1024px. We've moved that gate
   to 1280px above, but add explicit show rule for belt-and-suspenders.
   ────────────────────────────────────────────────────────────────── */
@media(min-width:1024px) and (max-width:1279px){
  .menu-toggle{ display:flex!important }

  /* Nav panel same style as mobile */
  .main-navigation{
    position: fixed;
    top: 0; right: -320px;
    width: 300px; max-width: 85vw;
    height: 100dvh;
    background: var(--color-white);
    box-shadow: var(--shadow-2xl);
    padding: var(--sp-20) var(--sp-6) var(--sp-8);
    overflow-y: auto; overflow-x: hidden;
    z-index: var(--z-overlay);
    transition: right var(--dur-slow) var(--ease);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .main-navigation.toggled{ right:0 }

  /* Show overlay for this range too */
  .mobile-nav-overlay{ display:none }
  .mobile-nav-overlay.active{ display:block; z-index:var(--z-fixed) }

  /* Vertical nav menu in panel */
  .main-navigation .nav-menu{
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    width: 100%;
  }
  .main-navigation .nav-menu > li{ width:100% }
  .main-navigation .nav-menu > li > a{
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    justify-content: space-between;
    min-height: 48px; /* WCAG touch target */
  }
  .main-navigation .nav-menu > li > a::after{ display:none }

  /* Sub-menu: vertical expand */
  .main-navigation .sub-menu{
    position: static!important;
    display: none;
    box-shadow: none; border: none; border-radius:0;
    padding: 0 0 0 var(--sp-4);
    background: var(--color-gray-50);
    border-left: 2px solid var(--color-primary-light);
    margin: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    animation: none; pointer-events: auto;
  }
  .main-navigation .nav-menu > li.menu-item-has-children:hover > .sub-menu,
  .main-navigation .nav-menu > li.menu-item-has-children:focus-within > .sub-menu{
    display: none; /* hover off — only JS toggle */
  }
  .main-navigation .nav-menu > li.menu-item-has-children.submenu-open > .sub-menu{
    display: block;
  }
  .main-navigation .sub-menu a{
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    min-height: 44px;
    display: flex; align-items: center;
  }

  /* Submenu toggle: show in panel */
  .main-navigation .nav-menu .submenu-toggle{
    display: inline-flex!important;
  }
}

/* ── Plugin component styles (from custom.css) ──────────────────── */

/* Forms */
.entry-content,.desa-buku-tamu-wrap,.desa-aspirasi-wrap,
.desa-pengaduan-wrap,.desa-form{
  width:100%;max-width:100%;box-sizing:border-box
}
.desa-form-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;width:100%
}
.desa-form-group{ width:100%;margin-bottom:1rem }
.desa-input{ width:100%;max-width:100%;box-sizing:border-box }

/* Tables */
.desa-table-wrap{
  width:100%;overflow-x:auto;display:block;
  -webkit-overflow-scrolling:touch;
  margin-top:15px;border:1px solid var(--color-border);
  border-radius:var(--radius-md)
}
.desa-table{ width:100%;min-width:600px;border-collapse:collapse }

/* Statistik cards */
.desa-stat-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1rem;margin-bottom:1.5rem
}
.desa-stat-card{
  background:#fff;border:1px solid var(--color-border);
  border-radius:10px;padding:1.25rem;text-align:center
}
.desa-stat-icon{ font-size:1.8rem;margin-bottom:.4rem }
.desa-stat-value{
  font-size:1.6rem;font-weight:700;
  color:var(--color-primary);display:block
}
.desa-stat-label{ font-size:.78rem;color:var(--color-gray-500);margin-top:.2rem }
.desa-stat-source{ font-size:.78rem;color:var(--color-gray-400);text-align:right }
.desa-stat-year-filter{ display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap }
.desa-stat-year-btn{
  padding:.3rem .8rem;border:1px solid var(--color-border);
  border-radius:6px;font-size:.85rem;text-decoration:none;color:var(--color-gray-700)
}
.desa-stat-year-btn.active{
  background:var(--color-primary);color:#fff;border-color:transparent
}
.desa-stat-charts{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem
}
.desa-stat-chart-wrap{
  background:#fff;border:1px solid var(--color-border);
  border-radius:10px;padding:1rem
}
.desa-stat-chart-wrap h3{ font-size:.95rem;margin:0 0 .75rem;color:var(--color-gray-700) }
@media(max-width:640px){
  .desa-stat-charts{ grid-template-columns:1fr }
}

/* IDM Calculator */
.desa-idm-wrap{
  background:#fff;border:1px solid var(--color-border);
  border-radius:12px;padding:1.5rem;max-width:560px
}
.desa-idm-field{ margin-bottom:1rem }
.desa-idm-field label{ display:block;font-size:.88rem;font-weight:600;margin-bottom:.3rem }
.desa-idm-slider{ width:calc(100% - 60px) }
.desa-idm-output{
  display:inline-block;width:50px;text-align:right;
  font-family:monospace;font-size:.9rem
}
.desa-idm-btn{
  background:var(--color-primary);color:#fff;border:none;
  padding:.55rem 1.2rem;border-radius:7px;cursor:pointer;
  font-size:.92rem;margin-top:.5rem
}
.desa-idm-btn:hover{ opacity:.9 }
.desa-idm-result{
  margin-top:1rem;padding:1rem;background:#f0fdf4;
  border-radius:8px;font-size:.95rem;display:none
}

/* Partial Statistik */
.desa-stat-partial{ font-family:inherit }
.dsp-header{
  background:linear-gradient(135deg,#1a5c38 0%,#2D8659 60%,#3aab72 100%);
  border-radius:var(--radius-2xl);padding:2rem 2.5rem;color:#fff;
  margin-bottom:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem
}
.dsp-total{ display:flex;flex-direction:column;min-width:140px }
.dsp-total-num{ font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.03em }
.dsp-total-label{
  font-size:.875rem;opacity:.8;margin-top:.25rem;
  text-transform:uppercase;letter-spacing:.08em
}
.dsp-gender-row{ flex:1;min-width:200px }
.dsp-gender-bar{
  display:flex;height:44px;border-radius:10px;
  overflow:hidden;margin-bottom:.5rem
}
.dsp-bar-lk,.dsp-bar-pr{
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  transition:width .6s cubic-bezier(.4,0,.2,1);
  min-width:fit-content;padding:0 .75rem;white-space:nowrap
}
.dsp-bar-lk{ background:rgba(255,255,255,.3) }
.dsp-bar-pr{ background:rgba(255,255,255,.12) }
.dsp-gender-legend{
  font-size:.8rem;opacity:.85;display:flex;
  align-items:center;gap:.25rem;flex-wrap:wrap
}
.dsp-dot{ display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0 }
.dsp-dot-lk{ background:rgba(255,255,255,.6) }
.dsp-dot-pr{ background:rgba(255,255,255,.3) }
.dsp-grid-2{ display:grid;grid-template-columns:1fr 1fr;gap:1.25rem }
.dsp-card{
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:1.5rem;
  box-shadow:0 1px 4px rgba(0,0,0,.04)
}
.dsp-card-title{
  font-size:1rem;font-weight:700;margin:0 0 1.1rem;
  color:var(--color-gray-900);display:flex;align-items:center;gap:.4rem
}
.dsp-bar-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.6rem
}
.dsp-bar-list li{
  display:grid;
  grid-template-columns:minmax(90px,1.4fr) 3fr 50px;
  align-items:center;gap:.5rem
}
.dsp-bl-label{
  font-size:.78rem;color:var(--color-gray-500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.dsp-bl-track{
  background:var(--color-gray-100);border-radius:99px;
  height:10px;overflow:hidden
}
.dsp-bl-fill{
  height:100%;border-radius:99px;
  transition:width .7s cubic-bezier(.4,0,.2,1)
}
.dsp-fill-age{ background:linear-gradient(90deg,#a52a2a,#edd4d4) }
.dsp-fill-edu{ background:linear-gradient(90deg,#cc00bd,#ff66f4) }
.dsp-fill-job{ background:linear-gradient(90deg,#1e40af,#60a5fa) }
.dsp-fill-relig{ background:linear-gradient(90deg,#2D8659,#5ec99a) }
.dsp-bl-val{ font-size:.78rem;font-weight:600;color:var(--color-gray-700);text-align:right }

@media(max-width:768px){
  .dsp-header{ padding:1.25rem 1.5rem;flex-direction:column;align-items:flex-start;gap:1rem }
  .dsp-total-num{ font-size:2.25rem }
  .dsp-grid-2{ grid-template-columns:1fr }
  .dsp-bar-list li{ grid-template-columns:minmax(80px,1.2fr) 2.5fr 44px }
}
@media(max-width:480px){
  .dsp-bl-label,.dsp-bl-val{ font-size:.72rem }
}

/* Transparansi */
.desa-transparansi-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
  gap:2rem;padding:1rem 0
}
.desa-dok-group{
  background:#fff;border-radius:12px;padding:1.5rem;
  box-shadow:var(--shadow-md);border:1px solid var(--color-primary-xl)
}
.desa-dok-group-title{
  font-size:1.2rem;color:var(--color-primary);margin-bottom:1.2rem;
  font-weight:700;border-bottom:2px solid var(--color-primary-xl);padding-bottom:.5rem
}
.desa-dok-item{
  display:flex;align-items:center;gap:1rem;padding:1rem;
  background:var(--color-gray-50);border-radius:8px;margin-bottom:1rem;
  transition:transform .2s,box-shadow .2s
}
.desa-dok-item:hover{ transform:translateY(-2px);box-shadow:var(--shadow-lg) }
.desa-dok-icon--pdf{
  width:48px;height:48px;background:#FEE2E2;color:#DC2626;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;border-radius:8px;font-weight:700;flex-shrink:0
}
.desa-dok-icon--pdf::before{ content:'PDF';font-size:.75rem }
.desa-dok-actions{ display:flex;gap:.5rem }
.desa-dok-btn{
  padding:.5rem 1rem;border-radius:6px;font-size:.875rem;font-weight:500;
  text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;transition:all .2s
}
.desa-dok-btn--preview{ background:var(--color-primary-xl);color:var(--color-primary) }
.desa-dok-btn--download{ background:var(--color-primary);color:#fff }
@media(max-width:640px){
  .desa-transparansi-wrap{ grid-template-columns:1fr }
  .desa-dok-item{ flex-direction:column;align-items:stretch;text-align:center }
  .desa-dok-icon--pdf{ margin:0 auto }
  .desa-dok-actions{ flex-direction:column;width:100% }
  .desa-dok-btn{ justify-content:center;width:100% }
}

/* Social share */
.social-share-buttons{
  display:flex;gap:.75rem;margin:2rem 0;align-items:center;flex-wrap:wrap
}

/* Search widget */
#search-2{
  background:#fff;border-radius:16px;padding:24px;
  box-shadow:var(--shadow-md);border:1px solid var(--color-primary-xl)
}
#search-2 .widget-title{
  font-size:1rem;font-weight:700;color:var(--color-primary);
  margin-bottom:16px;border-bottom:2px solid var(--color-primary);
  display:inline-block;padding-bottom:4px;
  text-transform:uppercase;letter-spacing:.5px
}
#search-2 .search-form-wrapper{
  display:flex;gap:8px;background:var(--color-primary-xl);
  padding:5px;border-radius:10px;transition:all .3s
}
#search-2 .search-form-wrapper:focus-within{
  background:#fff;box-shadow:0 0 0 2px var(--color-primary)
}
#search-2 .search-field{
  flex:1;border:none;background:transparent;
  padding:10px 14px;font-size:1rem;color:var(--color-gray-900);outline:none
}
#search-2 .search-submit{
  background:var(--color-primary);color:#fff;border:none;
  padding:10px 22px;border-radius:7px;font-weight:600;cursor:pointer;transition:background .2s
}
#search-2 .search-submit:hover{ background:var(--color-primary-dark) }
@media(max-width:480px){
  #search-2 .search-form-wrapper{ flex-direction:column;background:transparent;padding:0;gap:10px }
  #search-2 .search-field{ background:var(--color-primary-xl);border-radius:8px;padding:12px 14px }
  #search-2 .search-submit{ width:100%;padding:12px }
}