/**
 * Community bridge — SEVIMA homepage-light header/footer
 * Breakpoints (sama sevima2024 / main-202401241016):
 *   mobile  : ≤ 36rem   (≤576px)
 *   tablet  : ≤ 61.99rem (≤991px)  — hamburger #other
 *   laptop+ : ≥ 62rem   (≥992px)  — desktop nav
 *   desktop : ≥ 80rem   (≥1280px) — container 75rem
 *   wide    : ≥ 120rem  (≥1920px) — container 99rem
 *   footer accordion: ≤ 48rem (≤768px)
 */

/* ── Tokens ── */
:root {
  --lp-breakpoint-xs: 36rem;
  --lp-breakpoint-sm: 48rem;
  --lp-breakpoint-sm-ext: 62rem;
  --lp-breakpoint-md: 80rem;
  --lp-breakpoint-2xl: 120rem;
  --lp-space-screen-x: 1rem;
  --lp-container-width: 100%;
  --header-nav-gap: 16px;
}

@media only screen and (min-width: 36rem) {
  :root {
    --lp-space-screen-x: 2rem;
  }
}

@media only screen and (min-width: 80rem) {
  :root {
    --lp-space-screen-x: 0rem;
    --lp-container-width: 75rem;
  }
}

@media only screen and (min-width: 120rem) {
  :root {
    --lp-container-width: 99rem;
  }
}

body {
  overflow-x: hidden;
}

/* ── Header shell ── */
.header.header_lp {
  position: relative;
  z-index: 1040;
  background: #fff;
}

.header.header_lp > .header__wrapper.container {
  width: var(--lp-container-width);
  max-width: var(--lp-container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lp-space-screen-x);
  padding-right: var(--lp-space-screen-x);
  box-sizing: border-box;
}

/* Page body containers:
   - < 80rem: tetap Bootstrap (kompatibel grid section lama)
   - ≥ 80rem: ikut SEVIMA (sama header/footer — 75rem / 99rem, padding = --lp-space-screen-x) */
body > *:not(header):not(.footer):not(script):not(style) .container,
main .container,
section .container,
#top-footer .container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  body > *:not(header):not(.footer):not(script):not(style) .container,
  main .container,
  section .container,
  #top-footer .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  body > *:not(header):not(.footer):not(script):not(style) .container,
  main .container,
  section .container,
  #top-footer .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  body > *:not(header):not(.footer):not(script):not(style) .container,
  main .container,
  section .container,
  #top-footer .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  body > *:not(header):not(.footer):not(script):not(style) .container,
  main .container,
  section .container,
  #top-footer .container {
    max-width: 1140px;
  }
}

/* Desktop SEVIMA: override Bootstrap — sejajar header (.header__wrapper) */
@media only screen and (min-width: 80rem) {
  body > *:not(header):not(.footer):not(script):not(style) .container,
  main .container,
  section .container,
  #top-footer .container {
    width: var(--lp-container-width);
    max-width: var(--lp-container-width);
    padding-left: var(--lp-space-screen-x);
    padding-right: var(--lp-space-screen-x);
    box-sizing: border-box;
  }
}

/* Hide search jika modal tidak ada */
body:not(:has(#modal-search-global)) #toggle-search-global {
  display: none;
}

/* ═══════════════════════════════════════════════════
   NAV VISIBILITY — fix dead-zone di 62rem (sevima bug)
   Mobile/tablet: ≤61.99rem → hamburger
   Laptop/desktop: ≥62rem → full nav
   ═══════════════════════════════════════════════════ */
@media only screen and (max-width: 61.99rem) {
  .header.header_lp .nav__item:not(#other) {
    display: none !important;
  }

  .header.header_lp .nav__item#other {
    display: flex !important;
  }
}

@media only screen and (min-width: 62rem) {
  .header.header_lp .nav__item:not(#other) {
    display: flex !important;
  }

  .header.header_lp .nav__item#other {
    display: none !important;
  }
}

/* ── Nav link base (Bootstrap-safe) ── */
.header.header_lp .nav__item button.nav__link,
.header.header_lp .nav__item a.nav__link,
.header.header_lp .nav__link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: var(--qn-size-10, 0.625rem) var(--qn-size-8, 0.5rem) !important;
  gap: var(--qn-size-4, 0.25rem) !important;
  border: none !important;
  border-radius: var(--qn-size-4, 0.25rem) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  font-family: "Inter", "Instrument Sans", sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  color: #202939 !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.header.header_lp .nav__link:hover,
.header.header_lp .nav__link:focus,
.header.header_lp .nav__link:focus-visible,
.header.header_lp .nav__link.show,
.header.header_lp .nav__item_block:hover > .dropdown > .nav__link,
.header.header_lp .nav__item_block:hover > .nav__link,
.header.header_lp .nav__item:hover > .nav__link,
.header.header_lp .nav__item:hover > .dropdown > .nav__link {
  color: #F43134 !important;
  background-color: #FAFBFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.header.header_lp .nav__link.active,
.header.header_lp .nav__link.active:hover,
.header.header_lp .nav__link.active:focus {
  color: #F43134 !important;
  text-decoration: none !important;
}

.header.header_lp .nav__link .icon {
  display: inline-flex;
  transition: transform 0.18s ease;
}

.header.header_lp .nav__link.active::after {
  content: "";
  position: absolute;
  bottom: 0.063rem;
  left: 0;
  width: 100%;
  height: 0.25rem;
  background-color: transparent;
  border-radius: 0.25rem 0.25rem 0 0;
}

/* ═══════════════════════════════════════════════════
   MOBILE (≤36rem)
   ═══════════════════════════════════════════════════ */
@media only screen and (max-width: 36rem) {
  .header.header_lp #toggle-search-global {
    display: none !important;
  }

  .header.header_lp .nav__link {
    font-size: 0.875rem !important;
  }

  .header.header_lp #nav_kontak.lp-btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════
   TABLET + MOBILE NAV (≤61.99rem) — hamburger #other
   ═══════════════════════════════════════════════════ */
@media only screen and (max-width: 61.99rem) {
  .header.header_lp .header__wrapper-group {
    flex-direction: row-reverse;
    gap: 1rem;
  }

  .header.header_lp .nav__item#other {
    position: relative !important;
  }

  .header.header_lp .nav__item#other > .dropdown.dropdown_nav {
    position: static !important;
  }

  .header.header_lp .nav__item#other .nav-mobile-mirror__dropdown,
  .header.header_lp .nav__item#other .dropdown__box.dropdown__box_multi.nav-mobile-mirror__dropdown {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    width: min(100vw - 24px, 360px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-top: 8px !important;
    z-index: 1060 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.12) !important;
    background: #fff !important;
    border: 1px solid #dfe5ef !important;
    padding: 12px 16px 16px !important;
    max-height: min(85vh, 640px) !important;
    overflow-y: auto !important;
  }

  /* Solusi mega (desktop) tidak dipakai di tablet — item disembunyikan */
  .header.header_lp .nav__item--solusi .dropdown__box_block {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   LAPTOP + DESKTOP (≥62rem) — full nav + dropdowns
   ═══════════════════════════════════════════════════ */
@media only screen and (min-width: 62rem) {
  .header.header_lp .header__wrapper-group {
    flex-direction: row;
    gap: 1.5rem;
  }

  .header.header_lp .nav__item_block:hover .nav__link .icon,
  .header.header_lp .nav__item--acara:hover .nav__link .icon,
  .header.header_lp .nav__item--blog:hover .nav__link .icon,
  .header.header_lp .nav__item--about:hover .nav__link .icon,
  .header.header_lp .nav__item--solusi:hover .nav__link .icon {
    transform: rotate(-180deg) !important;
  }

  /* Solusi mega — lebar container, center */
  .header.header_lp .nav__item--solusi {
    position: static !important;
  }

  .header.header_lp .nav__item--solusi > .dropdown.dropdown_nav {
    position: static !important;
  }

  .header.header_lp .nav__item--solusi .dropdown__box.dropdown__box_block,
  .header.header_lp .nav__item--solusi .dropdown__box_block {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    width: min(var(--lp-container-width, 1200px), calc(100vw - 2 * var(--lp-space-screen-x, 24px))) !important;
    max-width: calc(100vw - 2 * var(--lp-space-screen-x, 24px)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10px !important;
    padding: 0 !important;
    transform: translateX(-50%) scale(0.98) !important;
    border: 1px solid #dfe5ef !important;
    border-radius: 14px !important;
    border-bottom: 1px solid #dfe5ef !important;
    background: #fff !important;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.12) !important;
    box-sizing: border-box !important;
    z-index: 1050 !important;
    overflow: hidden;
  }

  .header.header_lp .nav__item--solusi .dropdown__box.dropdown__box_block.show,
  .header.header_lp .nav__item--solusi:hover .dropdown__box.dropdown__box_block,
  .header.header_lp .nav__item--solusi:hover .dropdown__box_block {
    transform: translateX(-50%) scale(1) !important;
    left: 50% !important;
    margin-top: 10px !important;
  }

  .header.header_lp .nav__item--solusi .dropdown__box_block > .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Acara / Blog / Tentang */
  .header.header_lp .nav__item--acara,
  .header.header_lp .nav__item--blog,
  .header.header_lp .nav__item--about {
    position: relative !important;
  }

  .header.header_lp .nav__item--acara > .dropdown,
  .header.header_lp .nav__item--blog > .dropdown,
  .header.header_lp .nav__item--about > .dropdown {
    position: static !important;
  }

  .header.header_lp .nav__item--acara::after,
  .header.header_lp .nav__item--blog::after,
  .header.header_lp .nav__item--about::after {
    content: '';
    position: absolute;
    bottom: calc(var(--header-nav-gap) * -1);
    left: 0;
    right: 0;
    height: var(--header-nav-gap);
    pointer-events: auto;
  }

  .header.header_lp .nav__item--acara #nav_acara + .dropdown__box.dropdown__box_multi,
  .header.header_lp .nav__item--about #nav_about + .dropdown__box.dropdown__box_multi {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: var(--header-nav-gap) !important;
    transform: translateY(4px) !important;
  }

  .header.header_lp .nav__item--blog #nav_blog + .dropdown__box.dropdown__box_multi.dropdown__box_multi--blog-cols3 {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: var(--header-nav-gap) !important;
    transform: translate(-50%, 6px) !important;
  }

  .header.header_lp .nav__item--acara:hover #nav_acara + .dropdown__box.dropdown__box_multi,
  .header.header_lp .nav__item--about:hover #nav_about + .dropdown__box.dropdown__box_multi,
  .header.header_lp #nav_acara + .dropdown__box.dropdown__box_multi.show,
  .header.header_lp #nav_about + .dropdown__box.dropdown__box_multi.show,
  .header.header_lp .nav__item--acara .nav__link[aria-expanded="true"] + .dropdown__box.dropdown__box_multi,
  .header.header_lp .nav__item--about .nav__link[aria-expanded="true"] + .dropdown__box.dropdown__box_multi {
    top: 100% !important;
    margin-top: var(--header-nav-gap) !important;
    transform: translateY(0) !important;
  }

  .header.header_lp .nav__item--blog:hover #nav_blog + .dropdown__box.dropdown__box_multi.dropdown__box_multi--blog-cols3,
  .header.header_lp #nav_blog + .dropdown__box.dropdown__box_multi.dropdown__box_multi--blog-cols3.show,
  .header.header_lp .nav__item--blog .nav__link[aria-expanded="true"] + .dropdown__box.dropdown__box_multi.dropdown__box_multi--blog-cols3 {
    top: 100% !important;
    margin-top: var(--header-nav-gap) !important;
    transform: translate(-50%, 0) !important;
  }
}

/* ═══════════════════════════════════════════════════
   FOOTER light
   ═══════════════════════════════════════════════════ */
.footer.footer_lp.footer_lp--homepage-light > .container {
  width: var(--lp-container-width, 100%);
  max-width: var(--lp-container-width, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lp-space-screen-x, 1rem);
  padding-right: var(--lp-space-screen-x, 1rem);
  box-sizing: border-box;
}

.footer.footer_lp.footer_lp--homepage-light .footer__block-links a {
  color: #fff;
  text-decoration: none;
}

.footer.footer_lp.footer_lp--homepage-light .footer__block-links a:hover {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}

/* Tablet/mobile footer accordion peek */
@media only screen and (max-width: 48rem) {
  .footer.footer_lp.footer_lp--homepage-light .footer__certif {
    max-width: 100%;
    justify-content: center;
  }

  .footer.footer_lp.footer_lp--homepage-light .footer__middle {
    justify-content: center;
  }
}