/* LANGKAH KUDA | HOME-UX C2-R1 | isolated single-row responsive header */
/* The production header has a four-column mobile grid at <=1180px.
   Do NOT force an extra grid child there. Put categories INSIDE the opened hamburger. */
@media (min-width: 1181px) {
  .masthead.masthead-v2 .mast-links.mast-links-v2.lk-c2-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: clamp(3px, .55vw, 9px) !important;
    min-width: 0;
  }
  .masthead.masthead-v2 .mast-links-v2.lk-c2-links > a:not(.write-pill):not(.account-pill) {
    padding-inline: clamp(2px, .36vw, 7px);
    white-space: nowrap;
  }
  .masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category {
    display: block !important;
    flex: 0 0 auto;
    margin-left: auto !important;
  }
}
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category {
  position: relative !important;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  z-index: 5600;
}
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category > summary {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--surface) !important;
  color: var(--accent) !important;
  cursor: pointer;
  list-style: none;
}
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category > summary::-webkit-details-marker { display: none; }
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category > summary::marker { content: ''; }
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lk-c2-category .lk-c2-category-chevron {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  visibility: visible !important;
  color: inherit;
  transition: transform .2s ease;
}
.lk-c2-category[open] .lk-c2-category-chevron { transform: rotate(180deg); }
.lk-c2-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category > .isi-menu-topik {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: min(550px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(520px, 65dvh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  z-index: 5700 !important;
}
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category:not([open]) > .isi-menu-topik {
  display: none !important;
}
.masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category[open] > .isi-menu-topik {
  display: grid !important;
}
/* At all breakpoints where existing header switches to hamburger+grid,
   hidden category may not become a 5th grid item. */
@media (max-width: 1180px) {
  .masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category {
    display: none !important;
  }
  body.menu-open .masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 5px 0 0 !important;
    align-self: stretch;
  }
  body.menu-open .masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category > summary {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }
  body.menu-open .masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category .lk-c2-sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
  }
  body.menu-open .masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category > .isi-menu-topik {
    position: relative !important;
    top: 6px !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: min(42dvh, 400px) !important;
    transform: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.menu-open .masthead.masthead-v2 .mast-links-v2.lk-c2-links > .lk-c2-category .isi-menu-topik > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lk-c2-category .lk-c2-category-chevron { transition: none; }
}

/* LK C2-R2 OVERRIDES: mobile category bar + notification slot */
/* LK HOME-UX C2-R2: category OUTSIDE mobile hamburger. No duplicate taxonomy DOM. */
/* Desktop: reserve the rightmost header slot for the single category disclosure. */
@media (min-width:1181px) {
  .masthead.masthead-v2 .mast-top.mast-top-v2 { padding-right: 58px !important; }
  .masthead.masthead-v2 .lk-c2-r2-category-bar {
    position:absolute !important; right:0 !important; top:50% !important;
    transform:translateY(-50%) !important; z-index:5600 !important;
    width:44px !important; max-width:44px !important; margin:0 !important; padding:0 !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar > .lk-c2-category > summary {
    width:42px !important; height:42px !important; min-width:42px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar .lk-c2-category .lk-c2-sr-only {
    position:absolute !important; width:1px !important; height:1px !important;
    overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar .lk-c2-category > .isi-menu-topik {
    position:absolute !important; right:0 !important; left:auto !important; top:calc(100% + 8px) !important;
    width:min(550px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important; max-height:min(520px, 65dvh) !important;
    overflow-y:auto !important; overflow-x:hidden !important; z-index:5700 !important;
  }
}
/* Mobile/tablet: the existing header switches to a GRID at 1180px. */
@media (max-width:1180px) {
  .masthead.masthead-v2 .mast-top.mast-top-v2 {
    grid-template-columns: 42px minmax(0,1fr) 40px 54px 42px !important;
    column-gap: 7px !important;
  }
  .masthead.masthead-v2 .lk-notification-bell.lk-notification-bell-mobile {
    position:relative !important; top:auto !important; right:auto !important;
    left:auto !important; bottom:auto !important; transform:none !important;
    grid-column:3 !important; grid-row:1 !important; align-self:center !important;
    justify-self:center !important; display:inline-grid !important;
    width:38px !important; height:38px !important; min-width:38px !important;
    margin:0 !important; z-index:12 !important;
  }
  .masthead.masthead-v2 .mast-links-v2 > .pilih-bahasa.language-switcher {
    grid-column:4 !important; grid-row:1 !important;
  }
  .masthead.masthead-v2 .mast-links-v2 > .btn-tema {
    grid-column:5 !important; grid-row:1 !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar {
    display:block !important; position:relative !important; transform:none !important;
    grid-column:1 / -1 !important; grid-row:2 !important;
    min-width:0 !important; width:100% !important; max-width:100% !important;
    margin:2px 0 0 !important; padding:0 !important; z-index:5500 !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar > .lk-c2-category {
    display:block !important; position:relative !important; width:100% !important;
    box-sizing:border-box !important; min-width:0 !important;
    margin:0 !important; border:0 !important; background:transparent !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar > .lk-c2-category > summary {
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    box-sizing:border-box !important; width:100% !important; min-width:0 !important;
    min-height:43px !important; height:auto !important; padding:9px 13px !important;
    border:1px solid var(--line, #bdb5a6) !important; border-radius:9px !important;
    background:var(--surface, #fff) !important; font-size:13px !important;
    text-align:left !important; cursor:pointer !important; list-style:none !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar .lk-c2-category .lk-c2-sr-only {
    position:static !important; display:inline !important; width:auto !important; height:auto !important;
    margin:0 !important; padding:0 !important; overflow:visible !important;
    clip:auto !important; white-space:normal !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar .lk-c2-category > .isi-menu-topik {
    position:absolute !important; top:calc(100% + 5px) !important; left:0 !important;
    right:0 !important; transform:none !important;
    box-sizing:border-box !important; width:100% !important; min-width:0 !important; max-width:100% !important;
    max-height:min(60dvh, 480px) !important; overflow-x:hidden !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; z-index:5700 !important;
    grid-template-columns:minmax(0,1fr) !important; padding:10px !important;
    border-radius:10px !important; background:var(--surface, #fff) !important;
    box-shadow:0 15px 35px rgba(0,0,0,.15) !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar .lk-c2-category > .isi-menu-topik > * {
    min-width:0 !important; max-width:100% !important; overflow-wrap:break-word !important;
  }
  .masthead.masthead-v2 .lk-c2-r2-category-bar .isi-menu-topik a,
  .masthead.masthead-v2 .lk-c2-r2-category-bar .isi-menu-topik summary {
    white-space:normal !important; overflow-wrap:anywhere !important; line-height:1.4 !important;
  }
  /* Prevent two overlaid menus; hamburger takes precedence if opened. */
  body.menu-open .masthead.masthead-v2 .lk-c2-r2-category-bar {
    visibility:hidden !important; pointer-events:none !important;
  }
}
@media (max-width:480px) {
  .masthead.masthead-v2 .mast-top.mast-top-v2 {
    grid-template-columns:39px minmax(0,1fr) 36px 47px 38px !important;
    gap:5px !important;
  }
  .masthead.masthead-v2 .lk-notification-bell.lk-notification-bell-mobile {
    width:34px !important; height:34px !important; min-width:34px !important;
  }
}
@media (max-width:360px) {
  .masthead.masthead-v2 .mast-top.mast-top-v2 {
    grid-template-columns:37px minmax(0,1fr) 32px 43px 37px !important;
    column-gap:4px !important;
  }
  .masthead.masthead-v2 .lk-notification-bell.lk-notification-bell-mobile {
    width:32px !important; height:32px !important; min-width:32px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .masthead.masthead-v2 .lk-c2-category-chevron { transition:none !important; }
}
