/*
 * RutanGov 3.1.1 — UI, responsive and accessibility refinements.
 * Loaded after the theme's existing styles so existing templates remain compatible.
 */
:root {
  --color-primary: #17324d;
  --color-secondary: #264966;
  --color-accent: #8d641e;
  --color-accent-dark: #755017;
  --color-text: #27384a;
  --color-muted: #596b7d;
  --color-light: #f2f5f8;
  --color-border: #dfe6ed;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 10px rgba(19, 42, 64, .06), 0 12px 28px rgba(19, 42, 64, .045);
  --shadow-hover: 0 8px 22px rgba(19, 42, 64, .12);
  --section-pad: 68px;
  --section-pad-sm: 40px;
}

html { scroll-behavior: smooth; }
body {
  color: var(--color-text);
  background: #f7f9fb;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* Keyboard users always receive a clear, high-contrast focus indicator. */
:focus-visible {
  outline: 3px solid #855d1b !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}
.skip-link:focus,
.skip-link:focus-visible,
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
  position: fixed !important;
  z-index: 100000 !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  padding: 12px 18px !important;
  color: #fff !important;
  background: #17324d !important;
  border: 2px solid #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.22) !important;
}
#main { scroll-margin-top: 92px; }

/* Calm, consistent header and a reliable click/keyboard/hover submenu state. */
.site-header {
  z-index: 1000;
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid #e5eaf0 !important;
  box-shadow: 0 4px 18px rgba(18, 39, 59, .055) !important;
  backdrop-filter: blur(12px);
}
.site-header__container { min-height: 68px; }
.nav-menu > li > a { min-height: 44px; display: flex; align-items: center; }
.nav-menu > li > .sub-menu { z-index: 1100; }
.nav-menu > li:hover > .sub-menu,
.nav-menu > li.menu-open > .sub-menu,
.nav-menu > li:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.nav-menu .sub-menu {
  border: 1px solid #e4eaf0;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(19, 42, 64, .15);
}
.nav-menu .sub-menu li a { min-height: 42px; display: flex; align-items: center; }
.btn-search, .hamburger, .slider-arrow, .slider-dot { min-width: 44px; min-height: 44px; }

/* Stronger hierarchy, comfortable reading width, and consistent surfaces. */
.content-container { width: min(100% - 40px, 1200px); margin-inline: auto; }
.page-hero { padding-top: clamp(36px, 5vw, 64px) !important; }
.page-hero__title, .section-title { letter-spacing: -.025em; text-wrap: balance; }
.page-hero__subtitle { max-width: 70ch; line-height: 1.7; }
.article-body, .entry-content { color: #33465a; line-height: 1.8; }
.article-body h2, .article-body h3, .entry-content h2, .entry-content h3 {
  color: #17324d;
  line-height: 1.35;
  text-wrap: balance;
}
.article-body p, .entry-content p { margin-block: 0 1.15em; }
.article-body a, .entry-content a { text-underline-offset: 3px; }

/* Unified cards: quiet borders, restrained elevation, predictable image crops. */
.berita-card, .program-card, .pengumuman-card, .layanan-card, .produk-card,
.news-card, .prog-card, .announce-item__card, .service-card, .doc-card,
.contact-info-card, .sidebar-box, .rg-cart, .rg-checkout__summary, .rg-checkout__form {
  border: 1px solid #e6ebf0;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card);
}
.berita-card, .program-card, .pengumuman-card, .layanan-card, .produk-card,
.news-card, .prog-card, .service-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.berita-card:hover, .program-card:hover, .pengumuman-card:hover,
.layanan-card:hover, .produk-card:hover, .news-card:hover, .prog-card:hover,
.service-card:hover {
  transform: translateY(-3px);
  border-color: #d4dee8;
  box-shadow: var(--shadow-hover);
}
.berita-card__image img, .news-card__img img, .prog-card__img img,
.program-card__image img, .produk-card__image img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Interactive controls remain legible and comfortably tappable. */
.btn-accent, .btn-secondary, .btn-pengaduan, .btn-checkout,
.produk-cta-cart, .produk-cta-wa, .btn-outline {
  min-height: 44px;
  font-weight: 700;
}
.btn-accent, .btn-pengaduan, .btn-checkout {
  background-color: var(--color-accent);
}
.btn-accent:hover, .btn-pengaduan:hover { background-color: var(--color-accent-dark); }
input, select, textarea, .rg-input {
  max-width: 100%;
  color: #24364a;
  border-color: #cbd5df;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .rg-input:focus-visible {
  border-color: #855d1b !important;
  box-shadow: 0 0 0 3px rgba(188, 135, 44, .18);
}


.produk-single-price, .produk-hero-price, .rg-cart__total strong,
.rg-cart-item__price, .rg-checkout__total-row strong, .rg-checkout-item__sub {
  color: var(--color-accent-dark) !important;
}

/* Prevent the floating return-to-top control from covering WhatsApp. */
#scrollToTop { right: 82px !important; bottom: 24px !important; width: 46px !important; height: 46px !important; }
#rgFloatCart, .rg-checkout button, .rg-qty-btn, .rg-remove { cursor: pointer; }

@media (max-width: 768px) {
  :root { --section-pad: 42px; --section-pad-sm: 28px; }
  .content-container { width: min(100% - 32px, 1200px); }
  .site-header { position: sticky; top: 0; }
  .page-hero__inner { padding-inline: 0; }
  .page-hero__title { line-height: 1.2; }
  .rg-checkout__summary, .rg-checkout__form, .rg-cart { padding: 18px; }
  #scrollToTop { right: 76px !important; bottom: 20px !important; }
}
@media (max-width: 480px) {
  .content-container { width: min(100% - 28px, 1200px); }
  .hero__title { text-wrap: balance; }
  .rg-cart-item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .rg-cart-item img { width: 52px; height: 52px; }
  .rg-cart__summary > div:last-child { flex-direction: column; }
  .rg-cart__summary > div:last-child a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* v3.1.2: strong section separation and readable contrast on every surface. */
.info-penting, .trust-bar, .profil-galeri,
.archive-section, .archive-wrap:not(.archive-wrap--white) {
  background: #eef3f7 !important;
  border-block: 1px solid #d4dee8 !important;
}
.berita-section, .program-section, .sosmed-produk,
.archive-wrap--white, .rg-page, .rg-page--white {
  background: #fff !important;
  border-block: 1px solid #d4dee8 !important;
}
.section-header { border-bottom-color: #cbd6e0 !important; }
.section-link, .section-eyebrow { color: #755017 !important; }
.section-eyebrow::before { background: #755017 !important; }
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a {
  color: #755017 !important;
  background: #f5ead7 !important;
}
.berita-card, .program-card, .pengumuman-card, .layanan-card, .produk-card,
.news-card, .prog-card, .service-card, .contact-info-card, .sidebar-box {
  border-color: #cbd6e0 !important;
  box-shadow: 0 2px 10px rgba(19, 42, 64, .09), 0 10px 24px rgba(19, 42, 64, .055) !important;
}
.berita-card__meta time, .program-card__excerpt { color: #596b7d !important; }

/* Transparansi is intentionally a dark section; keep its text and stat cards bright. */
.transparansi {
  color: #fff !important;
  background: linear-gradient(135deg, #10283f 0%, #183d5a 100%) !important;
  border-block: 1px solid #0b2033 !important;
}
.transparansi__title { color: #fff !important; }
.transparansi .stat-item {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
}
.transparansi .stat-item__number {
  background: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.transparansi .stat-item__label { color: #f0f5f9 !important; }
.transparansi .stat-item__sublabel { color: #c4d3df !important; }
.transparansi .stat-item__icon {
  color: #ffda85 !important;
  background: rgba(245,166,35,.2) !important;
}
.transparansi__photo-placeholder {
  color: #e0eaf2 !important;
  border: 1px dashed rgba(255,255,255,.38);
}

/* Native button keeps the video play control reliable and keyboard accessible. */
button.hero__video-lazy {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
button.hero__video-lazy:focus-visible {
  outline: 4px solid #ffd166 !important;
  outline-offset: -4px !important;
}