/* ============================================================
   PAUDPEDIA — Modern Navigation + Global Mobile Fixes
   ============================================================ */

/* ----- Navbar wrapper ----- */
nav.paud-navbar {
  background: linear-gradient(
    135deg,
    #0b3270 0%,
    #1266a2 60%,
    #0f9e8a 100%
  ) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
  padding: 0 !important;
  border: none !important;
  position: relative;
  z-index: 1060;
}

/* ----- Nav items ----- */
/* Use higher specificity than app.css (.paud-navbar .navbar-nav li.nav-item = 21) */
nav.paud-navbar .navbar-nav li.paud-nav-item {
  position: relative;
  border-left: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  /* border-right separator */
  border-right: 1px solid rgba(255, 255, 255, 0.28) !important;
}
nav.paud-navbar .navbar-nav li.paud-nav-item:last-child {
  border-right: none !important;
}

/* Full-width nav — override Bootstrap ml-auto */
ul.paud-navbar-nav {
  width: 100% !important;
  margin-left: 0 !important;
  justify-content: space-between !important;
}

/* ----- Nav links (top level) — ALL states reset ----- */
.paud-navbar-nav .paud-nav-link,
.paud-navbar-nav .paud-nav-link:hover,
.paud-navbar-nav .paud-nav-link:focus,
.paud-navbar-nav .paud-nav-link:active,
.paud-navbar-nav .paud-nav-item.show > .paud-nav-link,
.paud-navbar .navbar-nav .show > .nav-link,
.paud-navbar .navbar-nav .nav-link:focus,
.paud-navbar .navbar-nav .nav-link:active,
.paud-navbar .navbar-nav li.show > a,
.paud-navbar .navbar-nav li.show > a:focus,
.paud-navbar .navbar-nav li.show > a:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
/* Reset background on li and a — all states */
nav.paud-navbar .navbar-nav li,
nav.paud-navbar .navbar-nav li.show,
nav.paud-navbar .navbar-nav li:hover,
nav.paud-navbar .navbar-nav li.active,
nav.paud-navbar .navbar-nav li a,
nav.paud-navbar .navbar-nav li a:hover,
nav.paud-navbar .navbar-nav li a:focus,
nav.paud-navbar .navbar-nav li.show > a {
  background: transparent !important;
  background-color: transparent !important;
}

/* Base link style */
nav.paud-navbar .navbar-nav li.paud-nav-item a.paud-nav-link {
  color: rgba(255, 255, 255, 0.93) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.25px;
  padding: 0 14px !important;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
  background: transparent !important;
  background-color: transparent !important;
}

/* Hover/open dropdown: gold text */
nav.paud-navbar .navbar-nav li.paud-nav-item:hover > a.paud-nav-link,
nav.paud-navbar .navbar-nav li.paud-nav-item.show > a.paud-nav-link {
  color: #ffd700 !important;
  text-decoration: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Custom dropdown arrow */
.paud-nav-link.dropdown-toggle::after {
  border: none !important;
  content: "▾";
  font-size: 11px;
  margin-left: 3px;
  vertical-align: middle;
  opacity: 0.75;
}

/* ----- Level 1 Dropdown menu ----- */
.paud-navbar-nav .paud-dropdown-menu {
  background: #fff !important;
  border: none !important;
  border-top: 3px solid #1266a2 !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  padding: 6px 0 !important;
  min-width: 230px !important;
  margin-top: 2px !important;
  animation: paudDropIn 0.18s ease forwards;
  right: 0px !important;
}

@keyframes paudDropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ----- Dropdown position per menu ----- */
/* Menu paling kiri (Program Prioritas) → rata kiri */
#mpp .paud-dropdown-menu {
  left: 15px !important;
  right: auto !important;
}
/* Menu paling kanan (Tentang Kami) → rata kanan */
#mhk .paud-dropdown-menu {
  right: 15px !important;
  left: auto !important;
}

/* ----- Level 1 Dropdown item ----- */
.paud-navbar-nav .paud-dropdown-item {
  color: #1e3a5f !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px 9px 20px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.14s ease;
  white-space: normal;
  line-height: 1.4;
  position: relative;
}
.paud-navbar-nav .paud-dropdown-item:hover,
.paud-navbar-nav .paud-dropdown-item:focus {
  background: #f0f7ff !important;
  color: #1266a2 !important;
  border-left-color: #1266a2 !important;
  padding-left: 24px !important;
  text-decoration: none !important;
}
/* Divider utility */
.paud-dropdown-divider {
  height: 1px;
  background: #e8f0fa;
  margin: 4px 12px;
}

/* ----- Level 2 → Level 3 (submenu) ----- */
.paud-dropdown-submenu {
  position: relative !important;
}
.paud-dropdown-submenu > .paud-dropdown-item::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #aaa;
  line-height: 1;
  transition: color 0.14s;
}
.paud-dropdown-submenu:hover > .paud-dropdown-item::after {
  color: #1266a2;
}
.paud-dropdown-submenu > .paud-dropdown-menu {
  display: none;
  position: absolute !important;
  top: -8px !important;
  left: 100% !important;
  margin: 0 !important;
  border-top: 3px solid #0f9e8a !important;
  min-width: 210px !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.14) !important;
  animation: paudDropIn 0.15s ease forwards;
}
.paud-dropdown-submenu:hover > .paud-dropdown-menu {
  display: block !important;
}
.paud-dropdown-submenu.sub-left > .paud-dropdown-menu {
  left: auto !important;
  right: 100% !important;
}

/* ----- Sticky header row: force full width on all pages ----- */
.sticky1 {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.sticky2 {
  position: fixed !important;
  top: 71px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
}
.sticky1 {
  z-index: 10001 !important;
}

/* Mobile: sticky1 (header logo) disembunyiin saat scroll, sticky2 naik ke top:0 */
@media (max-width: 767px) {
  .sticky1 {
    display: none !important;
  }
  .sticky2 {
    top: 0 !important;
  }
}

/* ----- Slider: fix margin-top overlap from app.css ----- */
.paud-carousel {
  margin-top: 0 !important;
}

/* ============================================================
   GLOBAL MOBILE FIXES — Header Logo
   ============================================================ */
@media (max-width: 575px) {
  /* --- Header logo row --- */
  .paud-header .row-paud {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
  }
  /* Row 1: Kemendikdasmen logo — full width, CENTER */
  .paud-header .row-paud .col-md-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    margin-bottom: 6px;
    text-align: center !important;
  }
  .paud-header .row-paud .col-md-5 .paud-header_logo {
    text-align: center !important;
    display: block !important;
  }
  .paud-header .row-paud .col-md-5 img {
    max-width: 200px !important;
    width: 60% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Row 2: PAUD logo (kiri) + berahlak/WBK (kanan) — 50/50 */
  .paud-header .row-paud .col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    text-align: center !important;
    padding: 0 4px !important;
  }
  .paud-header .row-paud .col-md-3 img {
    max-width: 100px !important;
    width: 80% !important;
    height: auto;
    display: inline-block;
  }
  .paud-header .row-paud .col-md-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    text-align: center !important;
    padding: 0 4px !important;
  }
  .paud-header .row-paud .col-md-4 img {
    max-width: 140px !important;
    width: 90% !important;
    height: auto;
    display: inline-block;
  }
}

/* ============================================================
   GLOBAL MOBILE FIXES — Footer
   ============================================================ */
@media (max-width: 767px) {
  /* Footer full-width, no horizontal overflow */
  .paud-footer {
    padding: 20px 0 90px !important;
    overflow-x: hidden;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Fix Bootstrap row negative margins causing overflow */
  .paud-footer > .row {
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .paud-footer > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 16px !important;
    margin-bottom: 18px !important;
  }

  /* Inner sub-menu rows: 2 columns */
  .paud-footer .row .row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .paud-footer .row .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 4px 0 0 !important;
    margin-bottom: 10px !important;
  }

  .paud-footer h4 {
    font-size: 15px !important;
    margin-bottom: 8px;
    padding-left: 0 !important;
  }
  .paud-footer p {
    font-size: 12px !important;
    padding-left: 0 !important;
  }
  .paud-footer ul {
    padding: 0 !important;
  }
  .paud-footer li {
    font-size: 12px !important;
    line-height: 1.6;
  }
  .paud-footer img[width="100"] {
    width: 70px !important;
  }

  /* Copyright bar — full width, no gap */
  .paud-footer > p,
  .paud-footer p[style*="background-color"] {
    font-size: 10px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    text-align: center;
    word-break: break-word;
    width: 100% !important;
    box-sizing: border-box;
    display: block;
    margin-bottom: 0 !important;
  }
}

/* ----- Float buttons: icon-only + tooltip on mobile ----- */
@media (max-width: 767px) {
  .float-button,
  .float-button-survey,
  .float-button-lapor {
    position: fixed !important;
    right: 8px !important;
    padding: 0 !important;
    line-height: 0;
  }
  .float-button {
    bottom: 56px !important;
  }
  .float-button-survey {
    bottom: 108px !important;
  }
  .float-button-lapor {
    bottom: 4px !important;
  }

  /* Hide original images — replace with FA icon */
  .float-button img,
  .float-button-survey img,
  .float-button-lapor img {
    display: none !important;
  }

  /* Icon button base */
  .float-button,
  .float-button-survey,
  .float-button-lapor {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
    text-decoration: none !important;
  }

  /* Icon via ::before */
  .float-button::before,
  .float-button-survey::before,
  .float-button-lapor::before {
    font-family: FontAwesome;
    font-size: 22px;
    color: #fff;
    line-height: 1;
  }

  /* Survei — biru, paper-plane */
  .float-button-survey {
    background: #29b6f6 !important;
  }
  .float-button-survey::before {
    content: "\f1d8";
  }

  /* Hubungi Kami — hijau, comment */
  .float-button {
    background: #66bb6a !important;
  }
  .float-button::before {
    content: "\f075";
  }

  /* Pengaduan — merah, exclamation */
  .float-button-lapor {
    background: #ef5350 !important;
  }
  .float-button-lapor::before {
    content: "\f06a";
  }

  /* Tooltip */
  .float-button::after,
  .float-button-survey::after,
  .float-button-lapor::after {
    content: "";
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .float-button-survey::after {
    content: "Survei";
  }
  .float-button::after {
    content: "Hubungi Kami";
  }
  .float-button-lapor::after {
    content: "Pengaduan";
  }
  .float-button:hover::after,
  .float-button-survey:hover::after,
  .float-button-lapor:hover::after {
    opacity: 1;
  }
}

/* ----- Mobile toggler ----- */
.paud-navbar .navbar-toggler {
  /* border: 2px solid rgba(255, 255, 255, 0.4) !important; */
  color: #fff !important;
  padding: 6px;
  border-radius: 6px;
  margin: 6px 0;
  transition: background 0.2s;
}
.paud-navbar .navbar-toggler:hover {
  background: rgba(255, 255, 255, 0.15);
}
.paud-navbar .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}
.paud-navbar .navbar-toggler .fa-bars {
  font-size: 18px;
}

/* ----- Mobile collapsed nav menu ----- */
@media (max-width: 767px) {
  nav.paud-navbar {
    padding: 4px 12px !important;
  }

  .paud-navbar-collapse {
    background: rgba(11, 50, 112, 0.97);
    border-radius: 0 0 12px 12px;
    padding: 0 0 8px;
    margin: 0 -12px;
  }

  nav.paud-navbar .navbar-nav li.paud-nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .paud-navbar-nav .paud-nav-link {
    padding: 13px 16px !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }

  /* Mobile dropdown menu */
  .paud-navbar-nav .paud-dropdown-menu {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none;
    padding: 4px 0 !important;
  }
  .paud-navbar-nav .paud-dropdown-item {
    color: rgba(255, 255, 255, 0.82) !important;
    padding: 9px 16px 9px 28px !important;
    border-left: none !important;
    font-size: 13px !important;
  }
  .paud-navbar-nav .paud-dropdown-item:hover {
    background: rgba(255, 215, 0, 0.12) !important;
    color: #ffd700 !important;
    padding-left: 32px !important;
    border-left: none !important;
  }

  /* Mobile: level 3 static (indented) */
  .paud-dropdown-submenu > .paud-dropdown-item::after {
    display: none;
  }
  .paud-dropdown-submenu > .paud-dropdown-menu {
    display: block !important;
    position: static !important;
    left: 0 !important;
    top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 12px !important;
    animation: none;
  }
}

/* ----- Active page highlight — gold text only ----- */
nav.paud-navbar .navbar-nav li.paud-nav-item.paud-active > a.paud-nav-link,
nav.paud-navbar
  .navbar-nav
  li.paud-nav-item.paud-active
  > a.paud-nav-link:hover,
nav.paud-navbar
  .navbar-nav
  li.paud-nav-item.paud-active
  > a.paud-nav-link:focus {
  color: #ffd700 !important;
  background: transparent !important;
  background-color: transparent !important;
}