/**
 * Custom CSS - Badilum Website Standardization 2026
 * SK Dirjen Badilum MA RI No. 127/DJU/SK.HM1.1/III/2026
 * Pengadilan Tinggi Pontianak - Joomla 5 (Cassiopeia)
 */

:root {
  --badilum-maroon: #9a2109;
  --badilum-maroon-dark: #7a1805;
  --badilum-maroon-light: #b4290d;
  --badilum-gold: #c59b27;
  --badilum-gold-light: #e5b945;
  --badilum-text-dark: #212529;
  --badilum-text-muted: #6c757d;
  --badilum-bg-light: #f8f9fa;
  --cassiopeia-color-primary: #9a2109;
  --cassiopeia-color-link: #9a2109;
  --cassiopeia-color-hover: #7a1805;
  --site-max-width: 1240px;
  --site-gutter: 1rem;
}

/* ==========================================================================
   Header & Identity (PT Jakarta / Badilum Standardization)
   ========================================================================== */
body {
  background-color: #eef1f6 !important;
  background-image: url('../images/web_bg_pattern.png') !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
  background-size: auto !important;
}

header.header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Header Brand Container & Logo Standardization */
.header-brand-container {
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.header-brand-wrapper {
  max-width: var(--site-max-width, 1240px) !important;
  margin: 0 auto !important;
  padding: 0.75rem 1rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

header.header .navbar-brand {
  margin: 0;
  padding: 0;
}

.brand-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  gap: 0.85rem !important;
}

.header-logo-img,
header.header .navbar-brand img,
header.header .brand-logo img {
  height: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  transition: transform 0.2s ease;
}

.brand-title-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.brand-title-top {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
}

.brand-title-main {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: var(--badilum-maroon, #9a2109) !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin: 1px 0 !important;
}

.brand-title-jurisdiction {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.3 !important;
}

/* Header Badges (WBK, GOL KPK, BerAKHLAK) */
.header-badges {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
}

.header-badge-link {
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.header-badge-link:hover {
  transform: translateY(-2px) scale(1.05) !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16)) !important;
}

/* ==========================================================================
   Header Brand Mobile & Tablet Layout (< 992px)
   Enlarged (~1.5x - 2x), bold, royal court aesthetic, 1-line per text element, zero overflow
   ========================================================================== */
@media (max-width: 991.98px) {
  header.header {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .header-brand-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 3px solid var(--badilum-maroon, #9a2109) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  .header-brand-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .brand-logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  .header-logo-img,
  header.header .navbar-brand img,
  header.header .brand-logo img {
    height: 60px !important;
    max-height: 62px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15)) !important;
  }

  .brand-title-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .brand-title-top {
    display: block !important;
    font-size: clamp(0.64rem, 2.8vw, 0.88rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.25px !important;
    line-height: 1.18 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
  }

  .brand-title-main {
    display: block !important;
    font-size: clamp(0.96rem, 4.4vw, 1.40rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.15px !important;
    line-height: 1.14 !important;
    color: var(--badilum-maroon, #9a2109) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    margin: 2px 0 !important;
  }

  .brand-title-jurisdiction {
    display: block !important;
    font-size: clamp(0.55rem, 2.5vw, 0.75rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    line-height: 1.18 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-badges {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .header-brand-container {
    padding: 6px 8px !important;
  }
  .brand-logo {
    gap: 8px !important;
  }
  .header-logo-img,
  header.header .navbar-brand img,
  header.header .brand-logo img {
    height: 50px !important;
    max-height: 52px !important;
  }
  .brand-title-top {
    font-size: 0.58rem !important;
    letter-spacing: 0px !important;
  }
  .brand-title-main {
    font-size: 0.88rem !important;
    letter-spacing: 0px !important;
  }
  .brand-title-jurisdiction {
    font-size: 0.50rem !important;
  }
}

/* ==========================================================================
   Desktop Navigation Menu & Multi-Level Dropdowns (>= 992px)
   RESTORED 100% TO ORIGINAL PRISTINE STATE
   ========================================================================== */
@media (min-width: 992px) {
  /* Enforce Pristine Desktop Navbar (Restored to exact previous state) */
  .pt-mobile-nav-bar,
  .pt-drawer-header,
  .pt-drawer-footer,
  .pt-drawer-backdrop,
  .pt-chevron-icon {
    display: none !important;
  }

  header.header .container-nav,
  .header-nav-container .container-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .container-header .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .container-header .mod-menu > li.nav-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .container-header .mod-menu > li.nav-item > a,
  .container-header .mod-menu > li.nav-item > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 0.82rem 1.05rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.35px !important;
    line-height: 1.25 !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  .container-header .mod-menu > li.nav-item:first-child > a,
  .container-header .mod-menu > li.nav-item:first-child > span {
    border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  .container-header .mod-menu > li.nav-item:hover > a,
  .container-header .mod-menu > li.nav-item:hover > span,
  .container-header .mod-menu > li.nav-item.active > a,
  .container-header .mod-menu > li.nav-item.active > span {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.22) !important;
    box-shadow: inset 0 -4px 0 #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }

  /* Caret indicator for top-level parent items */
  .container-header .mod-menu > li.parent > a::after,
  .container-header .mod-menu > li.parent > span::after {
    content: " ▾" !important;
    font-size: 0.74rem !important;
    margin-left: 5px !important;
    color: #ffebcc !important;
    transition: transform 0.2s ease;
    display: inline-block;
    transform: translateY(-1px);
  }

  .container-header .mod-menu:has(> li.nav-item:nth-child(9)) > li.nav-item > a,
  .container-header .mod-menu:has(> li.nav-item:nth-child(9)) > li.nav-item > span {
    padding: 0.82rem 0.75rem !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.2px !important;
  }

  .container-header .mod-menu:has(> li.nav-item:nth-child(10)) > li.nav-item > a,
  .container-header .mod-menu:has(> li.nav-item:nth-child(10)) > li.nav-item > span {
    padding: 0.80rem 0.55rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1px !important;
  }

  .container-header .mod-menu:has(> li.nav-item:nth-child(11)) > li.nav-item > a,
  .container-header .mod-menu:has(> li.nav-item:nth-child(11)) > li.nav-item > span {
    padding: 0.78rem 0.42rem !important;
    font-size: 0.74rem !important;
    letter-spacing: 0 !important;
  }

  /* Level 1 Submenu Dropdown (Clean White Theme) */
  .container-header .mod-menu > li.parent {
    position: relative !important;
  }

  .container-header .mod-menu li.parent > ul.mod-menu__sub {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 280px !important;
    max-width: 360px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 3px solid #e86e00 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.04) !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 99999 !important;
  }

  /* Show submenu when hovering parent */
  .container-header .mod-menu li.parent:hover > ul.mod-menu__sub {
    display: block !important;
  }

  /* Submenu items formatting */
  .container-header .mod-menu ul.mod-menu__sub,
  .container-header .mod-menu ul.mod-menu__sub *,
  .container-header .mod-menu ul.mod-menu__sub li,
  .container-header .mod-menu ul.mod-menu__sub a,
  .container-header .mod-menu ul.mod-menu__sub span {
    text-align: left !important;
  }

  .container-header .mod-menu ul.mod-menu__sub > li.nav-item {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
  }

  .container-header .mod-menu ul.mod-menu__sub > li.nav-item::after {
    display: none !important;
  }

  .container-header .mod-menu ul.mod-menu__sub > li.nav-item > a,
  .container-header .mod-menu ul.mod-menu__sub > li.nav-item > span,
  .container-header .mod-menu ul.mod-menu__sub li a,
  .container-header .mod-menu ul.mod-menu__sub li span {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    color: #212529 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    padding: 8px 18px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f1f3f5 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.15s ease !important;
    white-space: normal !important;
    word-break: break-word !important;
    cursor: pointer !important;
  }

  .container-header .mod-menu ul.mod-menu__sub > li.parent > a,
  .container-header .mod-menu ul.mod-menu__sub > li.parent > span,
  .container-header .mod-menu ul.mod-menu__sub li.parent > a,
  .container-header .mod-menu ul.mod-menu__sub li.parent > span {
    justify-content: space-between !important;
  }

  .container-header .mod-menu ul.mod-menu__sub > li.nav-item:last-child > a,
  .container-header .mod-menu ul.mod-menu__sub > li.nav-item:last-child > span {
    border-bottom: none !important;
  }

  .container-header .mod-menu ul.mod-menu__sub > li.nav-item:hover > a,
  .container-header .mod-menu ul.mod-menu__sub > li.nav-item:hover > span {
    background-color: #fff6ee !important;
    color: #c45500 !important;
    font-weight: 600 !important;
    padding-left: 22px !important;
    border-left-color: #ff8405 !important;
  }

  /* Caret indicator for nested items */
  .container-header .mod-menu ul.mod-menu__sub li.parent > a::after,
  .container-header .mod-menu ul.mod-menu__sub li.parent > span::after {
    content: " ▸" !important;
    font-size: 11px !important;
    margin-left: auto !important;
    padding-left: 10px !important;
    color: #c45500 !important;
  }

  /* Level 2 & 3 Flyout Submenus (open to the right) */
  .container-header .mod-menu ul.mod-menu__sub li.parent > ul.mod-menu__sub {
    top: 0 !important;
    left: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-left: 3px solid #ff8405 !important;
    border-radius: 0 6px 6px 6px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  }

  .container-header .mod-menu ul.mod-menu__sub li.parent:hover > ul.mod-menu__sub {
    display: block !important;
  }

  /* Reverse flyout for the last 2 items in main menu */
  .container-header .mod-menu > li.parent:nth-last-child(-n+2) ul.mod-menu__sub li.parent > ul.mod-menu__sub {
    left: auto !important;
    right: 100% !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 3px solid #ff8405 !important;
    border-radius: 6px 0 6px 6px !important;
  }

  .container-header .mod-menu > li.parent:nth-last-child(-n+2) ul.mod-menu__sub li.parent > a::after,
  .container-header .mod-menu > li.parent:nth-last-child(-n+2) ul.mod-menu__sub li.parent > span::after {
    content: " ◂" !important;
  }

  /* Align rightmost dropdown flush right to prevent horizontal overflow */
  .container-header .mod-menu > li.parent:last-child > ul.mod-menu__sub {
    left: auto !important;
    right: 0 !important;
  }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .container-header .mod-menu > li.nav-item > a,
  .container-header .mod-menu > li.nav-item > span {
    font-size: 0.80rem !important;
    padding: 0.80rem 0.65rem !important;
    letter-spacing: 0.15px !important;
  }

  .container-header .mod-menu:has(> li.nav-item:nth-child(9)) > li.nav-item > a,
  .container-header .mod-menu:has(> li.nav-item:nth-child(9)) > li.nav-item > span {
    font-size: 0.74rem !important;
    padding: 0.78rem 0.45rem !important;
  }
}

/* ==========================================================================
   Headings & Article Titles
   ========================================================================== */
h1:not(.card-header):not(.card-header *):not(header *):not(.header *):not(footer *),
h2:not(.card-header):not(.card-header *):not(header *):not(.header *):not(footer *),
h3:not(.card-header):not(.card-header *):not(header *):not(.header *):not(footer *),
h4:not(.card-header):not(.card-header *):not(header *):not(.header *):not(footer *),
h5:not(.card-header):not(.card-header *):not(header *):not(.header *):not(footer *),
h6:not(.card-header):not(.card-header *):not(header *):not(.header *):not(footer *),
.page-header h1,
.article-title {
  color: var(--badilum-maroon) !important;
  font-weight: 700;
}

.page-header {
  border-bottom: 2px solid var(--badilum-gold);
  margin-top: 0.25rem !important;
  margin-bottom: 0.65rem !important;
  padding-bottom: 0.35rem !important;
}

/* Links */
a {
  color: var(--badilum-maroon);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--badilum-gold);
}

/* Buttons */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--badilum-maroon) !important;
  border-color: var(--badilum-maroon-dark) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background-color: var(--badilum-maroon-dark) !important;
  border-color: #5c1003 !important;
  color: var(--badilum-gold-light) !important;
  box-shadow: 0 4px 10px rgba(154, 33, 9, 0.35);
}

/* Sidebar & Cards - Ensure Pure White Titles on Maroon & High-Contrast Elements */
.card-header,
.card-header *,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title,
.card-title,
.container-sidebar-right .card-header,
.container-sidebar-right .card-header *,
.container-sidebar-right .card-title,
.container-sidebar-right .card-title *,
.sidebar-module-title,
.sidebar-module-title * {
  color: #ffffff !important;
}

.card-header {
  background-color: var(--badilum-maroon) !important;
  font-weight: 700;
  border-bottom: 3px solid var(--badilum-gold) !important;
  font-size: 1.05rem;
  padding: 0.75rem 1rem;
}

/* Badges and buttons on Gold / Warning backgrounds - High-contrast White text with subtle drop-shadow */
.badge.bg-warning,
.badge[style*="badilum-gold"],
.badge[style*="#c59b27"],
.badge[style*="#d4af37"],
.btn-warning,
.badge-warning {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  font-weight: 700 !important;
}

.badge.bg-warning *,
.btn-warning * {
  color: #ffffff !important;
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}

/* Breadcrumbs */
.mod-breadcrumbs__wrapper {
  background-color: var(--badilum-bg-light);
  border-radius: 4px;
  border: 1px solid #e9ecef;
  margin-bottom: 0.75rem;
  padding: 0.45rem 0.85rem;
}

.breadcrumb-item a {
  color: var(--badilum-maroon);
}

.breadcrumb-item.active {
  color: var(--badilum-text-muted);
  font-weight: 600;
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--badilum-maroon) !important;
  border-color: var(--badilum-maroon) !important;
  color: #ffffff !important;
}

.page-link {
  color: var(--badilum-maroon);
}


/* ==========================================================================
   Service Cards & Quick Links
   ========================================================================== */
.service-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(154, 33, 9, 0.15) !important;
  border-color: var(--badilum-gold) !important;
}

/* ==========================================================================
   Blog & Articles Cards
   ========================================================================== */
.blog-featured .page-header,
.page-header {
  border-bottom: 2px solid rgba(154, 33, 9, 0.15);
  margin-bottom: 0.85rem;
  padding-bottom: 0.35rem;
}

.blog-featured .page-header h1,
.page-header h1 {
  color: var(--badilum-maroon);
  font-size: 1.45rem;
  font-weight: 800;
  border-left: 4px solid var(--badilum-gold);
  padding-left: 12px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}

.blog-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.blog-item .item-image img {
  border-radius: 6px;
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.blog-item:hover .item-image img {
  transform: scale(1.02);
}

.blog-item .item-title a,
.blog-item .article-title a {
  color: var(--badilum-maroon);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.blog-item .item-title a:hover,
.blog-item .article-title a:hover {
  color: var(--badilum-maroon-dark);
  text-decoration: underline;
}

.badge-badilum {
  background-color: var(--badilum-maroon);
  color: #ffffff;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 3px;
}

/* News Cards (Compact 3-Column Layout) */
.news-card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(154, 33, 9, 0.12) !important;
}

.news-card-img-wrapper {
  overflow: hidden;
}

.news-card-img {
  transition: transform 0.3s ease;
}

.news-card:hover .news-card-img {
  transform: scale(1.04);
}

.hover-maroon {
  transition: color 0.2s ease;
}

.hover-maroon:hover {
  color: var(--badilum-maroon) !important;
  text-decoration: underline;
}

.news-readmore-btn {
  border-color: var(--badilum-maroon) !important;
  color: var(--badilum-maroon) !important;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
}

.news-readmore-btn:hover {
  background-color: var(--badilum-maroon) !important;
  color: #ffffff !important;
}

/* Pengumuman Module (Main Bottom) */
.pengumuman-card {
  border: 1px solid rgba(154, 33, 9, 0.18) !important;
  border-radius: 8px !important;
  overflow: hidden;
  margin-top: 1rem;
}

.transition-hover-bg {
  transition: background-color 0.2s ease;
}

.transition-hover-bg:hover {
  background-color: rgba(154, 33, 9, 0.035) !important;
}

/* ==========================================================================
   Interactive Utilities & Component Styling
   ========================================================================== */
.transition-hover {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.transition-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(154, 33, 9, 0.16) !important;
  border-color: var(--badilum-gold) !important;
}

.transition-scale {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.transition-scale:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(197, 155, 39, 0.4) !important;
}

.service-icon-circle {
  transition: transform 0.25s ease, background-color 0.25s ease !important;
}

.service-item:hover .service-icon-circle {
  transform: scale(1.08) rotate(3deg);
  background-color: var(--badilum-maroon-dark) !important;
  border-color: var(--badilum-gold) !important;
}

.topbar-container a {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.topbar-container a:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.slider-slide-wrapper {
  transition: all 0.3s ease;
}

/* ==========================================================================
   Header Brand, Badges & Centered Nav (PT Jakarta Standard) - Desktop Only (>= 992px)
   ========================================================================== */
@media (min-width: 992px) {
  .header-brand-container {
    max-width: var(--site-max-width, 1240px) !important;
    width: min(var(--site-max-width, 1240px), calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    padding: 1.25rem 2rem !important;
    background: #ffffff !important;
    border-top: 5px solid var(--badilum-maroon) !important;
    border-left: 1px solid rgba(197, 155, 39, 0.35) !important;
    border-right: 1px solid rgba(197, 155, 39, 0.35) !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
  }

  .header-brand-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    background: transparent !important;
  }

  .brand-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }

  .header-logo-img {
    height: 96px !important;
    max-height: 102px !important;
    width: auto !important;
    margin-right: 1.25rem !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15)) !important;
  }

  .brand-title-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .brand-title-top {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    letter-spacing: 0.6px !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  .brand-title-main {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    color: var(--badilum-maroon) !important;
    letter-spacing: 0.8px !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
  }

  .brand-title-jurisdiction {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    letter-spacing: 0.3px !important;
    margin-top: 3px !important;
  }

  .header-badges {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    background: transparent !important;
  }

  .header-badge-link {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    transition: transform 0.22s ease, filter 0.22s ease !important;
  }

  .header-badge-link:hover {
    transform: translateY(-2px) scale(1.05) !important;
  }

  .header-badge-link img {
    background: transparent !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.14)) !important;
  }

  /* Header Nav: Vibrant Orange / Amber Bar (Inspired by PT Semarang) */
  .header-nav-container {
    max-width: var(--site-max-width, 1240px) !important;
    width: min(var(--site-max-width, 1240px), calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    background: linear-gradient(90deg, #b84b00 0%, #d96200 20%, #f57c00 50%, #d96200 80%, #b84b00 100%) !important;
    border-top: 2px solid #ffc280 !important;
    border-bottom: 4px solid #802e00 !important;
    border-left: 1px solid rgba(196, 85, 0, 0.45) !important;
    border-right: 1px solid rgba(196, 85, 0, 0.45) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 8px 24px rgba(196, 85, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    min-height: 56px !important;
    position: relative !important;
    z-index: 9999 !important;
    overflow: visible !important;
  }

  .header-nav-container .container-nav {
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   Site Grid & Layout Width Harmonization (Proportional & Unified 1240px)
   ========================================================================== */
.site-grid {
  max-width: var(--site-max-width, 1240px) !important;
  width: min(var(--site-max-width, 1240px), calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0.35rem !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Balanced Spacing for Banner & Adjacent Modules */
.container-banner {
  margin: 0 !important;
  padding: 0 !important;
}

.pt-slider-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
  padding: 0 !important;
}

.container-banner + .container-top-a,
.site-grid > .container-top-a {
  margin-top: 0.15rem !important;
}

.container-top-a > .card,
.container-top-a > .top-a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-top-a > .card > .card-body {
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 992px) {
  .site-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 340px !important;
    grid-template-areas:
      "banner banner banner banner"
      "top-a top-a top-a top-a"
      "top-b top-b top-b top-b"
      "comp comp comp side-r"
      "bot-a bot-a bot-a bot-a"
      "bot-b bot-b bot-b bot-b" !important;
    row-gap: 0.65rem !important;
    column-gap: 1.5rem !important;
    align-items: start !important;
  }

  body:not(.has-sidebar-right) .site-grid {
    grid-template-areas:
      "banner banner banner banner"
      "top-a top-a top-a top-a"
      "top-b top-b top-b top-b"
      "comp comp comp comp"
      "bot-a bot-a bot-a bot-a"
      "bot-b bot-b bot-b bot-b" !important;
  }

  /* Inner pages (Submenus & Articles) - Unified Top Spacing & Robust Grid */
  body:not(.itemid-101) .site-grid {
    margin-top: 0.25rem !important;
    grid-template-areas:
      "banner banner banner banner"
      "top-a top-a top-a top-a"
      "top-b top-b top-b top-b"
      "comp comp comp side-r"
      "bot-a bot-a bot-a bot-a"
      "bot-b bot-b bot-b bot-b" !important;
    align-items: start !important;
  }

  body:not(.itemid-101):not(.has-sidebar-right) .site-grid {
    margin-top: 0.25rem !important;
    grid-template-areas:
      "banner banner banner banner"
      "top-a top-a top-a top-a"
      "top-b top-b top-b top-b"
      "comp comp comp comp"
      "bot-a bot-a bot-a bot-a"
      "bot-b bot-b bot-b bot-b" !important;
    align-items: start !important;
  }
}

@media (max-width: 991.98px) {
  .site-grid {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 0.65rem !important;
    gap: 0.65rem !important;
  }
  .site-grid > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  body:not(.itemid-101) .site-grid {
    margin-top: 0.25rem !important;
  }
}

/* Spacing Harmonization for Inner Pages */
body:not(.itemid-101) .container-component {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:not(.itemid-101) .mod-breadcrumbs__wrapper {
  margin-top: 0 !important;
  margin-bottom: 0.45rem !important;
  padding: 0.35rem 0.75rem !important;
}

body:not(.itemid-101) .mod-breadcrumbs.breadcrumb {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

body:not(.itemid-101) .page-header {
  margin-top: 0.2rem !important;
  margin-bottom: 0.6rem !important;
  padding-bottom: 0.3rem !important;
}

body:not(.itemid-101) .page-header h1,
body:not(.itemid-101) .page-header h2,
body:not(.itemid-101) .article-title {
  margin-top: 0 !important;
  margin-bottom: 0.2rem !important;
  font-size: 1.55rem !important;
  line-height: 1.25 !important;
}

/* Slider Banner: Full width of the site-grid container */
.site-grid > .container-banner {
  grid-area: banner !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#ptCarousel {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Layanan Publik, Banner ZI & Inovasi (top-a: Stacked Vertically Ke Bawah Rapi & Proporsional) */
.site-grid > .container-top-a {
  grid-area: top-a !important;
  width: 100% !important;
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.site-grid > .container-top-a > * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.site-grid > .container-top-a > .card {
  display: block !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
}

.site-grid > .container-top-a > .card:last-child {
  margin-bottom: 0 !important;
}

.site-grid > .container-top-a > .card > .card-body {
  display: block !important;
  padding: 0 !important;
}

/* Reset margin-bottom internal agar jarak antar modul rapi, rapat, dan proporsional */
.site-grid > .container-top-a .layanan-ma-card {
  margin-bottom: 0 !important;
}

.site-grid > .container-top-a .banner-zi-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.site-grid > .container-top-a .inovasi-daerah-card {
  margin-bottom: 0 !important;
}

.banner-zi-link {
  display: block !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.banner-zi-link:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(154, 33, 9, 0.2) !important;
}

/* Maklumat Pelayanan & Informasi Publik (top-b) */
.site-grid > .container-top-b {
  grid-area: top-b !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

.site-grid > .container-top-b > .card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.site-grid > .container-top-b > .card > .card-body {
  padding: 0 !important;
}

/* Component (News & Content) */
.site-grid > .container-component {
  grid-area: comp !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Sidebar Right (Alih Bahasa, Search, etc.) */
.site-grid > .container-sidebar-right {
  grid-area: side-r !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: start !important;
}

/* Bottom Modules (Pengumuman & Jadwal Sidang) */
.site-grid > .container-main-bottom {
  grid-area: main-b !important;
  width: 100% !important;
  margin-top: 1rem !important;
}

/* Full-Width Centered Bottom Modules (Warta Resmi MA/Badilum, Jadwal Sidang, Video & Banner) */
.site-grid > .container-bottom-a {
  grid-area: bot-a !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
  display: block !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
  clear: both !important;
}

.site-grid > .container-bottom-a > * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  box-sizing: border-box !important;
}

.site-grid > .container-bottom-a > *:last-child {
  margin-bottom: 0 !important;
}

.site-grid > .container-bottom-a > .card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}

.site-grid > .container-bottom-a > .card > .card-body {
  padding: 0 !important;
  display: block !important;
}

/* Footer Section (PT Semarang Standard) */
footer.container-footer {
  background: linear-gradient(135deg, #1c1e24 0%, #111317 100%) !important;
  border-top: 4px solid var(--badilum-gold) !important;
  color: #e9ecef !important;
  margin-top: 3.5rem !important;
  padding: 2.5rem 0 1rem !important;
  width: 100% !important;
  clear: both !important;
  position: relative !important;
  z-index: 10 !important;
}

footer.container-footer .footer-inner-container {
  max-width: var(--site-max-width, 1240px) !important;
  width: min(var(--site-max-width, 1240px), calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

.footer-widget-title {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  padding-bottom: 8px !important;
  margin-bottom: 1rem !important;
}

.footer-widget-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 36px !important;
  height: 2px !important;
  background-color: var(--badilum-gold) !important;
}

.footer-link-list li {
  margin-bottom: 8px !important;
}

.footer-link-list li a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.84rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.footer-link-list li a:hover {
  color: var(--badilum-gold-light) !important;
  transform: translateX(4px) !important;
  text-decoration: none !important;
}

.footer-social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.footer-social-btn:hover {
  background-color: var(--badilum-maroon) !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  border-color: var(--badilum-gold) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.footer-contact-list li {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.83rem !important;
  line-height: 1.45 !important;
}

.footer-contact-list a {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.2s ease;
}

.footer-contact-list a:hover {
  color: var(--badilum-gold-light) !important;
  text-decoration: underline !important;
}

.footer-bottom-bar a:hover {
  color: var(--badilum-gold-light) !important;
}

.partner-logos a {
  display: inline-block;
  transition: transform 0.2s ease;
}

.partner-logos a img {
  max-height: 44px;
  width: auto;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-logos a:hover img {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.35) !important;
}

.map-responsive iframe {
  border-radius: 6px;
  width: 100%;
}

/* ==========================================================================
   Jadwal Sidang Module
   ========================================================================== */
.hearing-schedule-card {
  border: 1px solid rgba(154, 33, 9, 0.2) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
}

.hearing-schedule-card .table {
  margin-bottom: 0 !important;
}

.hearing-schedule-card .table thead th {
  background-color: #f1f3f5 !important;
  color: #343a40 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.3px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  border-bottom: 2px solid #dee2e6 !important;
  padding: 0.65rem 0.75rem !important;
}

.hearing-schedule-card .table tbody td {
  padding: 0.65rem 0.75rem !important;
  vertical-align: middle !important;
  font-size: 0.88rem !important;
}

.hearing-schedule-card .table tbody tr:hover {
  background-color: rgba(154, 33, 9, 0.04) !important;
}

.hearing-schedule-table-wrap {
  max-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.hearing-schedule-table-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.hearing-schedule-table-wrap::-webkit-scrollbar-track {
  background: #f1f3f5;
}

.hearing-schedule-table-wrap::-webkit-scrollbar-thumb {
  background: #c59b27;
  border-radius: 4px;
}

.hearing-schedule-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #9a2109;
}

/* ==========================================================================
   Sidebar Widgets Styling
   ========================================================================== */
.container-sidebar-right .card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden;
}

.container-sidebar-right .card-header,
.container-sidebar-right .card-title,
.container-sidebar-right h3.card-header,
.container-sidebar-right h4.card-header,
.container-sidebar-right h5.card-header {
  background: linear-gradient(135deg, var(--badilum-maroon, #9a2109) 0%, var(--badilum-maroon-dark, #7a1805) 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--badilum-gold, #c59b27) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 !important;
}

.container-sidebar-right .card-header *,
.container-sidebar-right .card-title *,
.container-sidebar-right h3.card-header *,
.container-sidebar-right h4.card-header *,
.container-sidebar-right h5.card-header * {
  color: #ffffff !important;
}

/* Smart Search in Sidebar */
.container-sidebar-right .mod-finder form,
.container-sidebar-right .finder {
  padding: 0.5rem;
}

.container-sidebar-right .mod-finder .input-group,
.container-sidebar-right .finder .input-group {
  display: flex !important;
  width: 100%;
}

.container-sidebar-right .mod-finder input[type="search"],
.container-sidebar-right .finder input[type="search"],
.container-sidebar-right .mod-finder input[type="text"] {
  border: 1px solid #ced4da !important;
  border-radius: 4px 0 0 4px !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.9rem;
}

.container-sidebar-right .mod-finder input[type="search"]:focus,
.container-sidebar-right .finder input[type="search"]:focus {
  border-color: var(--badilum-maroon) !important;
  box-shadow: 0 0 0 0.2rem rgba(154, 33, 9, 0.15) !important;
}

.container-sidebar-right .mod-finder button[type="submit"],
.container-sidebar-right .finder button[type="submit"] {
  background-color: var(--badilum-maroon) !important;
  border-color: var(--badilum-maroon) !important;
  color: #ffffff !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 0.45rem 0.85rem !important;
  font-weight: 600;
}

.container-sidebar-right .mod-finder button[type="submit"]:hover {
  background-color: var(--badilum-maroon-dark) !important;
}

/* Alih Bahasa */
.alih-bahasa-box {
  background-color: #f8f9fa;
  border-radius: 6px;
}

.goog-te-gadget-simple {
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  background-color: #ffffff !important;
}

/* Language Switcher Buttons */
.lang-btn {
  transition: all 0.2s ease !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
}

.lang-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(154, 33, 9, 0.2);
}

.lang-btn.active {
  background-color: var(--badilum-maroon) !important;
  border-color: var(--badilum-maroon-dark) !important;
  color: #ffffff !important;
}

/* Maklumat Cards */
.maklumat-box {
  border-radius: 8px !important;
  overflow: hidden;
  border: 1px solid rgba(154, 33, 9, 0.15) !important;
}

.maklumat-box .card-body {
  background: #ffffff;
}

.maklumat-box img {
  transition: transform 0.25s ease;
}

.maklumat-box:hover img {
  transform: scale(1.02);
}

/* Sidebar Tautan & Socmed */
.sidebar-tautan-box .btn:hover {
  background-color: rgba(154, 33, 9, 0.05) !important;
  border-color: var(--badilum-maroon) !important;
}

.sidebar-socmed-box .list-group-item:hover {
  background-color: rgba(154, 33, 9, 0.04) !important;
}

/* RSS Feeds & Videos */
.rss-feed-container,
.video-gallery-card,
.evidence-zi-card {
  border-radius: 8px !important;
  overflow: hidden;
}

.video-gallery-card iframe {
  border: none;
}

/* Visitor Counter Widget */
.site-stats-widget .list-group-item {
  border-color: rgba(0, 0, 0, 0.06) !important;
  font-size: 0.88rem;
}

/* ==========================================================================
   Mobile Responsive Adjustments
   ========================================================================== */
@media (max-width: 991.98px) {
  :root {
    --site-gutter: 1rem;
  }

  header.header {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-areas: none !important;
    grid-template-columns: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 1rem !important;
  }

  .site-grid > *,
  .site-grid > .container-component,
  .container-component {
    display: block !important;
    grid-area: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  footer.container-footer {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }

  .header-brand-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.5rem !important;
  }

  .brand-logo {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
  }

  .header-logo-img {
    margin-right: 0.5rem !important;
    margin-bottom: 0 !important;
  }

  .header-badges {
    display: none !important;
  }
}

/* ==========================================================================
   Hero Slider (Carousel) Full Styling & Transitions
   ========================================================================== */
#ptCarousel.carousel {
  position: relative;
  width: 100%;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 0 !important;
}

#ptCarousel .carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

#ptCarousel .carousel-item {
  position: relative;
  display: none;
  width: 100%;
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  float: none;
}

#ptCarousel .carousel-item.active {
  display: block;
  opacity: 1;
}

#ptCarousel.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

#ptCarousel.carousel-fade .carousel-item.active {
  opacity: 1;
  z-index: 1;
}

/* Indicators */
#ptCarousel .carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 15%;
  list-style: none;
  gap: 8px;
}

#ptCarousel .carousel-indicators button {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 28px;
  height: 6px;
  padding: 0;
  margin: 0;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.65);
  background-clip: padding-box;
  border: none;
  border-radius: 3px;
  transition: all 0.3s ease;
}

#ptCarousel .carousel-indicators button.active {
  background-color: var(--badilum-gold);
  width: 42px;
  opacity: 1;
  box-shadow: 0 0 8px rgba(197, 155, 39, 0.6);
}

/* Navigation Prev & Next Controls */
#ptCarousel .carousel-control-prev,
#ptCarousel .carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

#ptCarousel .carousel-control-prev:hover,
#ptCarousel .carousel-control-next:hover {
  opacity: 1;
  transform: scale(1.08);
}

#ptCarousel .carousel-control-prev-icon,
#ptCarousel .carousel-control-next-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(122, 24, 5, 0.8) !important;
  border: 2px solid var(--badilum-gold) !important;
  border-radius: 50% !important;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 45% 45%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease;
}

#ptCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#ptCarousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--badilum-maroon) !important;
  border-color: var(--badilum-gold-light) !important;
}

#ptCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
}

#ptCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* ==========================================================================
   Top Utility Bar (Baris Pintas Disabilitas & Identitas MA RI)
   ========================================================================== */
.pt-top-utility-bar {
  max-width: var(--site-max-width, 1240px);
  width: min(var(--site-max-width, 1240px), calc(100% - 32px));
  margin: 6px auto 0 auto;
  background: linear-gradient(135deg, #1f2329 0%, #15181e 100%);
  border-bottom: 2px solid var(--badilum-gold);
  border-radius: 6px 6px 0 0;
  padding: 4px 14px;
  box-sizing: border-box;
  color: #e2e8f0;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pt-top-utility-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pt-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pt-top-badge {
  color: var(--badilum-gold-light);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.pt-top-sep {
  color: rgba(255, 255, 255, 0.3);
}

.pt-top-subtitle {
  color: #cbd5e1;
  font-weight: 500;
}

.pt-top-datetime {
  color: #f1f5f9;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
}

.pt-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pt-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pt-top-btn:hover {
  background: var(--badilum-maroon);
  border-color: var(--badilum-gold);
  color: var(--badilum-gold-light);
}

.pt-top-btn.pt-btn-speaking {
  background: #28a745 !important;
  color: #ffffff !important;
  animation: pulseSpeaking 1.5s infinite;
}

@keyframes pulseSpeaking {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.pt-top-resizer {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.pt-top-resizer-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 2px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pt-top-resizer-btn:last-child {
  border-right: none;
}

.pt-top-resizer-btn:hover {
  background: var(--badilum-maroon);
  color: var(--badilum-gold-light);
}

/* ==========================================================================
   Floating Action Widget (Tombol Mengambang Disabilitas & Suara)
   ========================================================================== */
.pt-a11y-floating-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
}

.pt-a11y-floating-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--badilum-maroon) 0%, var(--badilum-maroon-dark) 100%);
  color: #ffffff;
  border: 2px solid var(--badilum-gold);
  border-radius: 30px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(122, 24, 5, 0.45);
  cursor: pointer;
  transition: all 0.25s ease;
}

.pt-a11y-floating-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px rgba(122, 24, 5, 0.6);
  border-color: var(--badilum-gold-light);
  color: var(--badilum-gold-light);
}

.pt-a11y-floating-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* ==========================================================================
   Floating Audio Speech Player Bar (Sedang Membaca...)
   ========================================================================== */
.pt-speech-player-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  max-width: 90vw;
  width: 520px;
}

.pt-speech-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #11141a;
  color: #ffffff;
  border: 2px solid var(--badilum-gold);
  border-radius: 35px;
  padding: 8px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  gap: 12px;
}

.pt-speech-status {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}

.pt-speech-wave {
  animation: audioWave 1s infinite alternate;
}

@keyframes audioWave {
  from { transform: scale(0.9); }
  to { transform: scale(1.2); }
}

.pt-speech-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--badilum-gold-light);
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-speech-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pt-speech-ctrl-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pt-speech-ctrl-btn:hover {
  background: var(--badilum-maroon);
  color: var(--badilum-gold-light);
  border-color: var(--badilum-gold);
}

.pt-speech-ctrl-btn.pt-speech-close {
  background: rgba(220, 53, 69, 0.4);
}

.pt-speech-ctrl-btn.pt-speech-close:hover {
  background: #dc3545;
  color: #fff;
}

/* Speaking highlight on active element */
.pt-speaking-highlight {
  outline: 3px solid var(--badilum-gold) !important;
  background-color: rgba(197, 155, 39, 0.12) !important;
  border-radius: 4px;
  transition: background-color 0.2s ease, outline 0.2s ease;
}

/* ==========================================================================
   Accessibility Modal Dialog (Panel Layanan Ramah Disabilitas & Suara)
   ========================================================================== */
.pt-a11y-modal[hidden] {
  display: none !important;
}

.pt-a11y-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pt-a11y-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
}

.pt-a11y-dialog {
  position: relative;
  background: #ffffff;
  border: 2px solid var(--badilum-gold);
  border-radius: 12px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pt-a11y-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--badilum-maroon) 0%, var(--badilum-maroon-dark) 100%);
  color: #ffffff;
  padding: 1rem 1.25rem;
  border-bottom: 3px solid var(--badilum-gold);
}

.pt-a11y-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pt-a11y-badge-icon {
  font-size: 2rem;
  line-height: 1;
}

.pt-a11y-title-text {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.2;
}

.pt-a11y-subtitle-text {
  color: var(--badilum-gold-light);
  font-size: 0.8rem;
  margin: 2px 0 0 0;
}

.pt-a11y-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.pt-a11y-close-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
}

.pt-a11y-body {
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pt-a11y-section {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
}

.pt-speech-section {
  background: #fffdf5;
  border-color: rgba(197, 155, 39, 0.4);
}

.pt-a11y-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--badilum-maroon);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 4px;
}

.pt-a11y-section-desc {
  font-size: 0.82rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.pt-speech-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pt-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.pt-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pt-btn-primary {
  background-color: var(--badilum-maroon);
  color: #ffffff;
}

.pt-btn-primary:hover:not(:disabled) {
  background-color: var(--badilum-maroon-dark);
  color: var(--badilum-gold-light);
}

.pt-btn-secondary {
  background-color: #6c757d;
  color: #ffffff;
}

.pt-btn-danger {
  background-color: #dc3545;
  color: #ffffff;
}

.pt-switch-card {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  user-select: none;
}

.pt-switch-card input {
  display: none;
}

.pt-switch-slider {
  position: relative;
  width: 44px;
  height: 22px;
  background-color: #ced4da;
  border-radius: 22px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.pt-switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pt-switch-card input:checked + .pt-switch-slider {
  background-color: var(--badilum-maroon);
}

.pt-switch-card input:checked + .pt-switch-slider::before {
  transform: translateX(22px);
}

.pt-switch-label strong {
  display: block;
  font-size: 0.88rem;
  color: #212529;
}

.pt-switch-label small {
  display: block;
  font-size: 0.76rem;
  color: #6c757d;
}

.pt-speech-speed {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pt-speed-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #495057;
}

.pt-speed-options {
  display: inline-flex;
  gap: 4px;
}

.pt-speed-btn {
  background: #ffffff;
  border: 1px solid #ced4da;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pt-speed-btn.active,
.pt-speed-btn:hover {
  background: var(--badilum-maroon);
  color: #ffffff;
  border-color: var(--badilum-maroon);
}

.pt-grid-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pt-grid-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 8px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.pt-grid-btn:hover {
  border-color: var(--badilum-maroon);
  background: #fdf6f5;
}

.pt-grid-btn.active {
  background: var(--badilum-maroon);
  color: #ffffff;
  border-color: var(--badilum-maroon-dark);
  box-shadow: 0 2px 8px rgba(154, 33, 9, 0.25);
}

.pt-grid-btn.active .pt-grid-btn-title,
.pt-grid-btn.active .pt-grid-btn-desc {
  color: #ffffff !important;
}

.pt-grid-btn-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--badilum-maroon);
}

.pt-grid-btn-desc {
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 2px;
}

.pt-grid-contrast {
  grid-template-columns: repeat(2, 1fr);
}

.pt-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-bottom: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.dot-default { background: linear-gradient(135deg, #9a2109 50%, #ffffff 50%); }
.dot-high { background: #000000; border-color: #ffd700; box-shadow: inset 0 0 0 4px #ffd700; }
.dot-dark { background: #1a1d21; border-color: #495057; }
.dot-mono { background: linear-gradient(135deg, #333 50%, #bbb 50%); }

.pt-toggles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pt-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pt-toggle-btn:hover {
  border-color: var(--badilum-maroon);
}

.pt-toggle-btn.active {
  background: var(--badilum-maroon);
  color: #ffffff;
  border-color: var(--badilum-maroon-dark);
}

.pt-a11y-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: #f1f3f5;
  border-top: 1px solid #dee2e6;
}

.pt-btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pt-btn-reset:hover {
  background: #e9ecef;
  color: #000;
}

.pt-btn-close-footer {
  background: var(--badilum-maroon);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ==========================================================================
   Accessibility Modifier Classes on BODY
   ========================================================================== */
/* Font Size Variations */
body.a11y-font-sm {
  font-size: 90% !important;
}

body.a11y-font-lg {
  font-size: 115% !important;
}

body.a11y-font-xl {
  font-size: 130% !important;
}

body.a11y-font-xl h1, body.a11y-font-xl h2, body.a11y-font-xl h3 {
  line-height: 1.35 !important;
}

/* Dyslexia Readable Font */
body.a11y-dyslexic,
body.a11y-dyslexic * {
  font-family: Arial, Helvetica, "OpenDyslexic", system-ui, sans-serif !important;
  letter-spacing: 0.5px !important;
  word-spacing: 1.5px !important;
}

/* Text Spacing */
body.a11y-text-spacing,
body.a11y-text-spacing p,
body.a11y-text-spacing div {
  line-height: 1.85 !important;
  letter-spacing: 0.75px !important;
  word-spacing: 2px !important;
}

/* Underline All Links */
body.a11y-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 700 !important;
}

/* Big Cursor */
body.a11y-big-cursor,
body.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3e%3cpolygon points='0,0 0,28 8,20 18,32 24,28 14,16 26,16' fill='%23000000' stroke='%23ffffff' stroke-width='2'/%3e%3c/svg%3e"), auto !important;
}

/* Grayscale / Monochrome Mode */
body.a11y-contrast-mono {
  filter: grayscale(100%) !important;
}

/* High Contrast Mode (Yellow on Black - Badilum Standard) */
body.a11y-contrast-high {
  background-color: #000000 !important;
  color: #ffff00 !important;
}

body.a11y-contrast-high header.header,
body.a11y-contrast-high .header-brand-container,
body.a11y-contrast-high .header-nav-container,
body.a11y-contrast-high .site-grid,
body.a11y-contrast-high .card,
body.a11y-contrast-high .card-header,
body.a11y-contrast-high .blog-item,
body.a11y-contrast-high .news-card,
body.a11y-contrast-high .container-footer,
body.a11y-contrast-high footer,
body.a11y-contrast-high .pt-top-utility-bar {
  background: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffd700 !important;
  box-shadow: none !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high h1,
body.a11y-contrast-high h2,
body.a11y-contrast-high h3,
body.a11y-contrast-high h4,
body.a11y-contrast-high span,
body.a11y-contrast-high p,
body.a11y-contrast-high div,
body.a11y-contrast-high td,
body.a11y-contrast-high th {
  color: #ffff00 !important;
}

body.a11y-contrast-high .btn,
body.a11y-contrast-high button,
body.a11y-contrast-high input[type="submit"] {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffd700 !important;
}

body.a11y-contrast-high .btn:hover,
body.a11y-contrast-high button:hover {
  background: #ffd700 !important;
  color: #000000 !important;
}

body.a11y-contrast-high .container-header .mod-menu > li.nav-item > a,
body.a11y-contrast-high .container-header .mod-menu > li.nav-item > span {
  color: #ffff00 !important;
  border-color: #ffd700 !important;
}

body.a11y-contrast-high .container-header .mod-menu ul.mod-menu__sub {
  background-color: #000000 !important;
  border: 2px solid #ffd700 !important;
}

/* Dark Mode */
body.a11y-contrast-dark {
  background-color: #12151a !important;
  color: #e2e8f0 !important;
}

body.a11y-contrast-dark .header-brand-container,
body.a11y-contrast-dark .card,
body.a11y-contrast-dark .blog-item,
body.a11y-contrast-dark .news-card,
body.a11y-contrast-dark .hearing-schedule-card,
body.a11y-contrast-dark .pengumuman-card {
  background: #1a1e26 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

body.a11y-contrast-dark h1,
body.a11y-contrast-dark h2,
body.a11y-contrast-dark h3,
body.a11y-contrast-dark h4 {
  color: var(--badilum-gold-light) !important;
}

body.a11y-contrast-dark a {
  color: #60a5fa !important;
}

body.a11y-contrast-dark .brand-title-top {
  color: #e2e8f0 !important;
}

body.a11y-contrast-dark .brand-title-jurisdiction {
  color: #94a3b8 !important;
}

body.a11y-contrast-dark .table {
  color: #e2e8f0 !important;
}

body.a11y-contrast-dark .table thead th {
  background-color: #242933 !important;
  color: #f1f5f9 !important;
}

/* Mobile Responsiveness for Accessibility UI */
@media (max-width: 767.98px) {
  .pt-top-utility-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .pt-top-right {
    width: 100%;
    justify-content: space-between;
  }

  .pt-grid-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .pt-toggles-grid {
    grid-template-columns: 1fr;
  }

  .pt-a11y-floating-widget {
    bottom: 16px;
    right: 16px;
  }

  .pt-a11y-floating-btn {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .pt-speech-player-bar {
    width: calc(100% - 24px);
    bottom: 12px;
  }
}

/* ==========================================================================
   POPUP MODAL NOTIFICATION (STANDAR BADILUM & MA-RI - COMPACT NO SCROLL)
   ========================================================================== */
#ptModalPopup .modal-dialog {
  max-width: 600px !important;
  margin: 1.25rem auto !important;
}

#ptModalPopup .modal-content {
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4) !important;
}

#ptModalPopup .modal-header {
  background: linear-gradient(135deg, var(--badilum-maroon, #9a2109) 0%, var(--badilum-maroon-dark, #7a1805) 100%) !important;
  border-bottom: 2px solid var(--badilum-gold, #c59b27) !important;
  color: #ffffff !important;
  padding: 0.65rem 1rem !important;
}

#ptModalPopup .modal-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  font-size: 0.95rem !important;
}

#ptModalPopup .modal-body {
  padding: 0.85rem 1rem !important;
  background-color: #fbfbfb !important;
}

#ptModalPopup .modal-footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 0.55rem 1rem !important;
}

.popup-banner-img {
  width: 100% !important;
  height: auto !important;
  max-height: 145px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

/* RSS Feed Header Pills */
.rss-feed-container .card-header-pills .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: transparent;
  transition: all 0.2s ease;
}
.rss-feed-container .card-header-pills .nav-link:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}
.rss-feed-container .card-header-pills .nav-link.active {
  background-color: var(--badilum-gold, #c59b27) !important;
  color: #111317 !important;
  border-color: var(--badilum-gold, #c59b27) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   Home Page Spacing Optimization & Hide Breadcrumbs
   ========================================================================== */
.is-home .mod-breadcrumbs,
.is-home nav[aria-label="Breadcrumbs"],
.is-home .container-breadcrumbs {
  display: none !important;
}

.is-home .container-top-b {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0 !important;
}

.is-home .container-top-b > * {
  margin-bottom: 0.5rem !important;
}

.is-home .container-component {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.is-home .container-component > main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.is-home .com-content-featured.blog,
.is-home .blog {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ==========================================================================
   Search Page (com_finder) Standardization - Badilum Theme
   ========================================================================== */
.pt-search-container {
  width: 100% !important;
}

.pt-search-main-title {
  color: var(--badilum-maroon, #9a2109) !important;
  font-weight: 800 !important;
  font-size: 1.65rem !important;
  margin-bottom: 0.35rem !important;
}

.pt-search-divider {
  height: 3px;
  width: 60px;
  background-color: var(--badilum-gold, #c59b27);
  margin-top: 0.6rem;
  border-radius: 2px;
}

.pt-search-form .form-control:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.pt-search-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.pt-search-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(154, 33, 9, 0.1) !important;
  border-color: rgba(197, 155, 39, 0.4) !important;
}

.pt-search-item-title a:hover {
  color: var(--badilum-maroon-dark, #7a1805) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   Maklumat Layanan in main-top (Centered, beside Sidebar, above Berita Terkini)
   ========================================================================== */
.container-component > .card:has(.maklumat-box),
.container-component > div:has(.maklumat-box) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
}

.container-component > .card:has(.maklumat-box) > .card-body {
  padding: 0 !important;
}

/* ==========================================================================
   Banner Slider Title - High Contrast Bold Solid White
   ========================================================================== */
.pt-slider-wrapper h2,
.pt-slider-wrapper h2.pt-slide-title,
.pt-slider-wrapper .carousel-item h2,
.pt-slide-profile-box h2,
.pt-slide-profile-box h2 * {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* ==========================================================================
   Jam Pelayanan PTSP - Poster Image Mode
   ========================================================================== */
.ptsp-poster-link {
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
}

.ptsp-poster-link:hover img {
  transform: scale(1.02);
}

/* ==========================================================================
   Article Metadata / Details Bar (Horizontal Sleek Ribbon)
   ========================================================================== */
.article-info,
dl.article-info {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem 1.15rem !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid var(--badilum-maroon, #9a2109) !important;
  border-radius: 6px !important;
  padding: 0.55rem 0.95rem !important;
  margin: 0.75rem 0 1.5rem 0 !important;
  font-size: 0.84rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

/* Hide redundant "Details" / "Rincian" label so it does not waste space */
.article-info .article-info-term,
dl.article-info dt.article-info-term {
  display: none !important;
}

.article-info dd,
dl.article-info dd {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.35rem !important;
  font-size: 0.84rem !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.article-info dd [class^="icon-"],
.article-info dd [class*=" icon-"],
.article-info dd .fa {
  color: var(--badilum-maroon, #9a2109) !important;
  font-size: 0.9rem !important;
  margin-right: 2px !important;
}

.article-info dd a {
  color: #1e293b !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.article-info dd a:hover {
  color: var(--badilum-maroon, #9a2109) !important;
  text-decoration: underline !important;
}

.article-info dd strong,
.article-info dd span {
  font-weight: 500 !important;
}

/* Subtle separator dot between items */
.article-info dd:not(:last-child)::after {
  content: "•";
  margin-left: 0.85rem;
  color: #cbd5e1;
  font-weight: bold;
}

/* ==========================================================================
   Inner Page Content Card / Wrapper (Elevated Professional Container)
   ========================================================================== */
body:not(.is-home) .container-component > main {
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: 4px solid var(--badilum-maroon, #9a2109) !important;
  padding: 2.25rem 2.5rem !important;
  margin-bottom: 2.5rem !important;
  position: relative !important;
  min-height: 400px !important;
}

@media (max-width: 767.98px) {
  body:not(.is-home) .container-component > main {
    padding: 1.25rem 1rem !important;
    border-radius: 8px !important;
  }
}

/* Breadcrumbs styling on inner pages */
body:not(.is-home) .mod-breadcrumbs,
body:not(.is-home) nav[aria-label="Breadcrumbs"] {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  padding: 0.55rem 1.15rem !important;
  margin-bottom: 1.25rem !important;
}

body:not(.is-home) .mod-breadcrumbs .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 0.88rem !important;
}

body:not(.is-home) .mod-breadcrumbs .breadcrumb-item a {
  color: var(--badilum-maroon, #9a2109) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

body:not(.is-home) .mod-breadcrumbs .breadcrumb-item a:hover {
  text-decoration: underline !important;
}

body:not(.is-home) .mod-breadcrumbs .breadcrumb-item.active {
  color: #64748b !important;
}

/* ==========================================================================
   Article Page & Content Typography (Human-Centered Comfortable Reading)
   ========================================================================== */
.com-content-article .page-header,
.item-page .page-header {
  border-bottom: 2px solid #f1f5f9 !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.45rem !important;
}

.com-content-article .page-header h1,
.item-page .page-header h1,
.com-content-article h1,
.item-page h1,
.com-content-category h1 {
  color: var(--badilum-maroon, #9a2109) !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 0.5rem !important;
}

.com-content-article h2,
.item-page h2 {
  font-size: 1.20rem !important;
  font-weight: 700 !important;
  color: var(--badilum-maroon, #9a2109) !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

.com-content-article h3,
.item-page h3 {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-top: 1rem !important;
  margin-bottom: 0.4rem !important;
}

.com-content-article h4,
.item-page h4 {
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.com-content-article,
.item-page,
.com-content-category,
.blog-item {
  color: #334155 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  letter-spacing: 0.1px !important;
}

/* Force override of inline 14pt / 18px font sizes copied from editors in news & articles */
.com-content-article p,
.com-content-article p *,
.com-content-article span:not([class*="icon"]):not([class*="badge"]):not([class*="fa"]):not(.pt-btn-icon),
.com-content-article div:not(.table-responsive),
.com-content-article li,
.com-content-article li *,
.item-page p,
.item-page p *,
.item-page span:not([class*="icon"]):not([class*="badge"]):not([class*="fa"]):not(.pt-btn-icon),
.item-page div:not(.table-responsive),
.item-page li,
.item-page li * {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

.com-content-article p,
.item-page p {
  margin-bottom: 1rem !important;
}

.com-content-article ul,
.com-content-article ol,
.item-page ul,
.item-page ol {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

/* Inner Page Main Wrapper Padding */
body:not(.is-home) .container-component > main {
  padding: 1.75rem 2rem !important;
}

/* Responsive Table Wrapper - Protects rowspan, colspan, photos & prevents mobile layout breakage */
.table-responsive,
.pt-table-scroll-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 1.25rem !important;
}

/* Tables inside article content */
.com-content-article table,
.item-page table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 1.25rem !important;
  border-collapse: collapse !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 0.88rem !important;
}

.com-content-article table th,
.item-page table th {
  background-color: #f8fafc !important;
  color: var(--badilum-maroon, #9a2109) !important;
  font-weight: 700 !important;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid #e2e8f0 !important;
}

.com-content-article table td,
.item-page table td {
  padding: 0.65rem 0.85rem !important;
  border: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
  height: auto !important;
}

.com-content-article table td img,
.item-page table td img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

.com-content-article table tr:nth-child(even),
.item-page table tr:nth-child(even) {
  background-color: #fbfcfe !important;
}

/* Slider Badge Wrap */
.pt-slide-profile-box .badge,
.pt-slide-badge {
  white-space: normal !important;
  word-break: break-word !important;
  display: inline-block !important;
  max-width: 100% !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

@media (max-width: 767.98px) {
  body:not(.is-home) .container-component > main {
    padding: 1rem 0.85rem !important;
    border-radius: 8px !important;
  }

  .com-content-article,
  .item-page,
  .com-content-category,
  .blog-item {
    font-size: 0.90rem !important;
    line-height: 1.62 !important;
  }

  /* Force comfortable reading size on mobile news and articles */
  .com-content-article p,
  .com-content-article p *,
  .com-content-article span:not([class*="icon"]):not([class*="badge"]):not([class*="fa"]):not(.pt-btn-icon),
  .com-content-article div:not(.table-responsive),
  .com-content-article li,
  .com-content-article li *,
  .item-page p,
  .item-page p *,
  .item-page span:not([class*="icon"]):not([class*="badge"]):not([class*="fa"]):not(.pt-btn-icon),
  .item-page div:not(.table-responsive),
  .item-page li,
  .item-page li * {
    font-size: 0.90rem !important;
    line-height: 1.62 !important;
  }

  .com-content-article p,
  .item-page p {
    font-size: 0.90rem !important;
    line-height: 1.62 !important;
    margin-bottom: 0.85rem !important;
  }

  .com-content-article .page-header h1,
  .item-page .page-header h1,
  .com-content-article h1,
  .item-page h1,
  .com-content-category h1 {
    font-size: 1.20rem !important;
    line-height: 1.3 !important;
  }

  .com-content-article h2,
  .item-page h2 {
    font-size: 1.08rem !important;
  }

  .com-content-article h3,
  .item-page h3 {
    font-size: 0.98rem !important;
  }

  .com-content-article table,
  .item-page table {
    font-size: 0.80rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .com-content-article img,
  .item-page img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile article paragraph alignment - adhere to editor formatting (justify) */
  .com-content-article p,
  .item-page p {
    text-align: justify;
  }

  table#customers {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  table#customers th,
  table#customers td {
    text-align: center !important;
  }

  .pt-slide-profile-box .badge,
  .pt-slide-badge {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    max-width: 95% !important;
  }
}

/* ==========================================================================
   Global Mobile Responsiveness & Container Hardening
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.site-grid {
  max-width: var(--site-max-width, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 991.98px) {
  .site-grid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden !important;
  }
  .container-banner,
  .container-top-a,
  .container-top-b,
  .container-bottom-a,
  .container-bottom-b {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .container-component {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }
  body:not(.is-home) .container-component > main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 1.15rem 0.95rem !important;
    margin: 0 0 1.25rem 0 !important;
    overflow-x: visible !important;
  }
  .com-content-article,
  .item-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ==========================================================================
   Top Utility Bar - Responsive Standardization
   ========================================================================== */
@media (max-width: 991.98px) {
  .pt-top-utility-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 3px 8px !important;
  }
  .pt-top-utility-inner {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .pt-top-left {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    font-size: 0.70rem !important;
    gap: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .pt-top-datetime {
    display: none !important;
  }
  .pt-top-right {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  .pt-top-btn {
    padding: 1px 5px !important;
    font-size: 0.68rem !important;
  }
  .pt-top-resizer-btn {
    padding: 1px 4px !important;
    font-size: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  .pt-top-subtitle {
    display: none !important;
  }
  .pt-top-sep {
    display: none !important;
  }
  .pt-top-label {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile Navigation Bar & Responsive Menu Architecture
   ========================================================================== */
/* ==========================================================================
   Mobile Navigation: Off-Canvas Left Sidebar & Accordion Submenus (< 992px)
   ========================================================================== */
.pt-mobile-nav-bar {
  display: none;
}

.pt-drawer-backdrop {
  display: none;
}

@media (max-width: 991.98px) {
  /* Mobile Top Bar with Toggle Button */
  .pt-mobile-nav-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(135deg, var(--badilum-maroon, #9a2109) 0%, var(--badilum-maroon-dark, #7a1805) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 2px solid var(--badilum-gold, #c59b27) !important;
    padding: 7px 14px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
    position: relative !important;
    z-index: 100 !important;
  }

  .pt-nav-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .pt-nav-toggle-btn:hover,
  .pt-nav-toggle-btn:focus,
  .pt-nav-toggle-btn:active {
    background: var(--badilum-gold, #c59b27) !important;
    color: #1a0500 !important;
    border-color: #ffd700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  .pt-mobile-brand-short {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  }

  /* Backdrop Dimmer behind the Left Sidebar */
  .pt-drawer-backdrop {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.32s ease, visibility 0.32s ease !important;
  }

  .pt-drawer-backdrop.pt-backdrop-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.pt-drawer-locked {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* ==========================================================================
     Off-Canvas Left Sidebar Drawer (.container-nav on mobile)
     ========================================================================== */
  .header-nav-container .container-nav,
  #ptNavCollapse {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    background: linear-gradient(180deg, #741704 0%, #8e1e08 30%, #581002 100%) !important;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.55) !important;
    border-right: 3px solid var(--badilum-gold, #c59b27) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #ptNavCollapse.pt-drawer-open,
  .header-nav-container #ptNavCollapse.pt-drawer-open,
  .header-nav-container .container-nav.pt-drawer-open {
    transform: translateX(0) !important;
  }

  /* Drawer Top Header */
  .pt-drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #4a0b01 !important;
    border-bottom: 2px solid var(--badilum-gold, #c59b27) !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .pt-drawer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .pt-drawer-logo {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
  }

  .pt-drawer-title-group {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
  }

  .pt-drawer-subtitle {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: var(--badilum-gold, #c59b27) !important;
    text-transform: uppercase !important;
  }

  .pt-drawer-title {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
  }

  .pt-drawer-close-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
  }

  .pt-drawer-close-btn:hover,
  .pt-drawer-close-btn:active {
    background: var(--badilum-maroon, #9a2109) !important;
    border-color: var(--badilum-gold, #c59b27) !important;
    color: #ffd700 !important;
    transform: rotate(90deg) !important;
  }

  /* Drawer Search Module */
  .pt-drawer-search {
    padding: 10px 14px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .pt-drawer-search .form-control {
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    border-radius: 6px 0 0 6px !important;
  }

  .pt-drawer-search .btn {
    padding: 6px 12px !important;
    border-radius: 0 6px 6px 0 !important;
    background: var(--badilum-gold, #c59b27) !important;
    color: #000000 !important;
    border-color: var(--badilum-gold, #c59b27) !important;
  }

  /* Top-Level Menu Items in Left Drawer */
  .header-nav-container .container-nav .mod-menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: 1 0 auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .header-nav-container .container-nav .mod-menu > li.nav-item,
  .header-nav-container .container-nav .mod-menu > li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-right: none !important;
    border-left: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    position: static !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  .header-nav-container .container-nav .mod-menu > li > a,
  .header-nav-container .container-nav .mod-menu > li > span {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 13px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
  }

  .header-nav-container .container-nav .mod-menu > li:hover > a,
  .header-nav-container .container-nav .mod-menu > li:active > a,
  .header-nav-container .container-nav .mod-menu > li.active > a,
  .header-nav-container .container-nav .mod-menu > li.current > a {
    background: rgba(197, 155, 39, 0.22) !important;
    color: #ffe082 !important;
  }

  /* Clean Pure CSS Chevron Caret Indicator for Mobile Drawer */
  .header-nav-container .container-nav .mod-menu li.parent > a::after,
  .header-nav-container .container-nav .mod-menu li.parent > span::after {
    content: " ▾" !important;
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    margin-left: auto !important;
    padding-left: 10px !important;
    color: var(--badilum-gold, #c59b27) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    display: inline-block !important;
    transform: none !important;
  }

  .header-nav-container .container-nav .mod-menu li.parent.pt-sub-open > a::after,
  .header-nav-container .container-nav .mod-menu li.parent.pt-sub-open > span::after {
    transform: rotate(180deg) !important;
    color: #ffd700 !important;
  }

  /* ==========================================================================
     Submenus: True Badilum Court Colors & Robust Multi-Level Vertical Accordion
     Zero flyouts to the right, zero horizontal clipping, distinct hierarchical indentation
     ========================================================================== */

  /* All mobile submenus (Level 1, 2, 3) are strictly hidden and in normal vertical flow by default */
  .header-nav-container .container-nav .mod-menu ul.mod-menu__sub,
  .header-nav-container .container-nav .mod-menu ul.mm-collapse,
  .header-nav-container .container-nav .mod-menu li.parent > ul {
    display: none !important;
    position: static !important;
    float: none !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
    overflow: hidden !important;
    transform: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Universal static reset to prevent ANY horizontal flyouts (left: 100% or absolute positioning) on mobile */
  .header-nav-container .container-nav .mod-menu ul,
  .header-nav-container .container-nav .mod-menu li,
  .header-nav-container .container-nav .mod-menu ul.mod-menu__sub li.parent > ul.mod-menu__sub,
  .header-nav-container .container-nav .mod-menu li.parent > ul.mod-menu__sub {
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Submenus are displayed ONLY when their DIRECT parent has .pt-sub-open (Level 1, 2, 3) */
  .header-nav-container .container-nav .mod-menu li.parent.pt-sub-open > ul.mod-menu__sub,
  .header-nav-container .container-nav .mod-menu li.parent.pt-sub-open > ul.mm-collapse,
  .header-nav-container .container-nav .mod-menu li.parent.pt-sub-open > ul,
  .header-nav-container .container-nav .mod-menu ul.mod-menu__sub li.parent.pt-sub-open > ul.mod-menu__sub,
  .header-nav-container .container-nav .mod-menu ul.mod-menu__sub li.parent.pt-sub-open > ul {
    display: block !important;
    animation: ptSubSlideIn 0.22s ease forwards !important;
  }

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

  /* Universal wrapping protection for all drawer links & spans */
  .header-nav-container .container-nav .mod-menu a,
  .header-nav-container .container-nav .mod-menu span {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* Submenu list items (all levels) */
  .header-nav-container .container-nav .mod-menu ul.mod-menu__sub > li,
  .header-nav-container .container-nav .mod-menu ul.mm-collapse > li,
  .header-nav-container .container-nav .mod-menu ul > li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    box-sizing: border-box !important;
  }

  /* LEVEL 1 SUBMENU (Direct children of Top-Level: Tentang Pengadilan, Layanan Publik, etc.) */
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub {
    background: #460a00 !important; /* Deep Badilum court mahogany */
    border-left: 4px solid var(--badilum-gold, #c59b27) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li > a,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li > span {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 11px 16px 11px 22px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: all 0.18s ease !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li > a:hover,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li > a:active,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.active > a,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.current > a {
    background: rgba(197, 155, 39, 0.22) !important;
    color: #ffe082 !important;
    border-left-color: var(--badilum-gold, #c59b27) !important;
  }

  /* When Level 1 parent item is open */
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent.pt-sub-open > a {
    background: rgba(0, 0, 0, 0.25) !important;
    color: #ffd700 !important;
    border-left-color: #ffd700 !important;
  }

  /* LEVEL 2 SUBMENU (Children of Level 1 parents: Profil Pengadilan, PTSP, Laporan, Kepaniteraan, etc.) */
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub {
    background: #310600 !important; /* Rich darker court maroon */
    border-left: 4px solid #ffb300 !important; /* Bright amber gold */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > a,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > span {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 0.81rem !important;
    font-weight: 500 !important;
    padding: 10px 16px 10px 34px !important; /* Progressive indentation */
    color: #f1f5f9 !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: all 0.18s ease !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > a:hover,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > a:active,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.active > a,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.current > a {
    background: rgba(255, 179, 0, 0.2) !important;
    color: #fff3c4 !important;
    border-left-color: #ffb300 !important;
  }

  /* When Level 2 parent item is open */
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent.pt-sub-open > a {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffe082 !important;
    border-left-color: #ffe082 !important;
  }

  /* LEVEL 3 SUBMENU (Children of Level 2 parents: SOP inside Sistem Pengelolaan, SAKIP inside Laporan) */
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub {
    background: #1f0300 !important; /* Deepest onyx maroon */
    border-left: 4px solid #ffe082 !important; /* Light champagne gold */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > a,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > span {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 9px 14px 9px 46px !important; /* Deep indentation for clear hierarchy */
    color: #e2e8f0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: all 0.18s ease !important;
  }

  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > a:hover,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li > a:active,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.active > a,
  .header-nav-container .container-nav .mod-menu > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.parent > ul.mod-menu__sub > li.current > a {
    background: rgba(255, 224, 130, 0.18) !important;
    color: #ffffff !important;
    border-left-color: #ffe082 !important;
  }

  /* Direct Parent Link (e.g., ZI-WBK main page link) */
  .header-nav-container .container-nav .mod-menu li.pt-direct-parent-link > a {
    color: #ffd700 !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-bottom: 1px dashed rgba(255, 215, 0, 0.3) !important;
  }

  /* Drawer Footer */
  .pt-drawer-footer {
    padding: 14px 16px !important;
    background: #3a0700 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  /* ==========================================================================
     Definitive Mobile Header Enforcement (< 992px)
     Enlarged (~1.5x - 2x), bold, royal court aesthetic, 1-line per text element, zero overflow
     ========================================================================== */
  html, body {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  header.header,
  .container-header {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .header-brand-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 3px solid var(--badilum-maroon, #9a2109) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }

  .header-brand-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .header-brand-wrapper .navbar-brand {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .header-brand-wrapper .brand-logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  .header-brand-wrapper .header-logo-img,
  header.header .navbar-brand img,
  header.header .brand-logo img {
    height: 60px !important;
    max-height: 62px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15)) !important;
  }

  .header-brand-wrapper .brand-title-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-brand-wrapper .brand-title-top {
    display: block !important;
    font-size: clamp(0.64rem, 2.8vw, 0.88rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.25px !important;
    line-height: 1.18 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
  }

  .header-brand-wrapper .brand-title-main {
    display: block !important;
    font-size: clamp(0.96rem, 4.4vw, 1.40rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.15px !important;
    line-height: 1.14 !important;
    color: var(--badilum-maroon, #9a2109) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    margin: 2px 0 !important;
  }

  .header-brand-wrapper .brand-title-jurisdiction {
    display: block !important;
    font-size: clamp(0.55rem, 2.5vw, 0.75rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    line-height: 1.18 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-brand-wrapper .header-badges,
  .header-badges {
    display: none !important;
  }

  /* Header Nav Bar on Mobile */
  .header-nav-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    min-height: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 360px) {
  .header-brand-container {
    padding: 6px 8px !important;
  }
  .header-brand-wrapper .brand-logo {
    gap: 8px !important;
  }
  .header-brand-wrapper .header-logo-img,
  header.header .navbar-brand img,
  header.header .brand-logo img {
    height: 50px !important;
    max-height: 52px !important;
  }
  .header-brand-wrapper .brand-title-top {
    font-size: 0.58rem !important;
    letter-spacing: 0px !important;
  }
  .header-brand-wrapper .brand-title-main {
    font-size: 0.88rem !important;
    letter-spacing: 0px !important;
  }
  .header-brand-wrapper .brand-title-jurisdiction {
    font-size: 0.50rem !important;
  }
}