/* Header Base - Modified for Overlay */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Header transparent state (initial) */
.header-transparent {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Header scrolled state — dark glass, matching the rest of the site.
   (The .single-post rules that used to force this one page at a time are
   gone; every page now behaves the same.) */
.header-scrolled {
  position: fixed !important;
  background: rgba(9, 15, 27, 0.92) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(214, 178, 78, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 1000;
}

.header-scrolled .nav-menu li a,
.header-scrolled .hamburger-menu {
  color: #fff;
}

/* Navigation transparent state */
.nav-transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Navigation scrolled state — the bar itself carries the background now,
   so the nav no longer draws a second panel on top of it. */
.nav-scrolled {
  transition: all 0.3s ease;
}

/* Legacy support for existing classes */
header.sticky {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
}

header.bg-transparent {
  background-color: transparent !important;
}

.backdrop-blur10px {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header .logo img {
  height: 50px;
}

header .nav-menu {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

header .nav-menu li {
  position: relative;
}

header .nav-menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  display: block;
  padding: 10px 10px;
  transition: color 0.3s ease;
}

header .nav-menu li a:hover {
  color: rgb(214, 178, 78);
}

header .nav-menu li:hover > .submenu {
  display: block;
  z-index: 99;
  width: 14rem;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(13, 20, 34, 0.97);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  min-width: 180px;
  z-index: 10;
  border-radius: 10px;
  border: 1px solid rgba(214, 178, 78, 0.22);
}

.submenu li a {
  padding: 10px 16px;
  font-size: 14px;
  color: #d8dce4 !important;
}

.submenu li a:hover {
  color: rgb(214, 178, 78) !important;
}

header .nav-menu {
  margin-right: 20px;
}

header .nav-menu li:last-child {
  margin-right: 0;
}

/* Hamburger Icon Hidden by Default */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  z-index: 1002;
}

/* Hero Section */
.hero-section {
  padding-top: 90px;
}

/* Mobile */
@media (max-width: 768px) {
  .hamburger-menu {
    display: block;
  }

  /* Mobile header scrolled state */
  .header-scrolled {
    background: rgba(9, 15, 27, 0.94) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }

  /* Nav utama di mobile */
  .main-nav {
    display: none;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    z-index: 999;
    transition: all 0.3s ease;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Mobile nav transparent state */
  .main-nav.nav-transparent {
    background: rgba(9, 15, 27, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Mobile nav scrolled state */
  .main-nav.nav-scrolled {
    background: rgba(9, 15, 27, 0.97) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }

  .main-nav.nav-scrolled .nav-menu li a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  /* full-bleed panel: the old 10px padding left a visible sliver of page
     showing down both edges of the open menu */
  .main-nav.active {
    display: flex;
    padding: 0;
  }

  /* Custom scrollbar for mobile menu */
  .main-nav::-webkit-scrollbar {
    width: 4px;
  }

  .main-nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
  }

  .main-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
  }

  .main-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }

  /* Smooth scrolling behavior */
  .main-nav {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  header .nav-menu {
    flex-direction: column;
    width: 100%;
    margin: 0;
  }

  header .nav-menu li a {
    padding-left: 25px;
    padding-right: 60px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    position: relative;
  }

  /* Remove hover effect for mobile */
  header .nav-menu li:hover > .submenu {
    display: none;
  }

  /* Add active class for clicked submenus */
  header .nav-menu li.active > .submenu {
    display: block;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }

  .submenu {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    box-shadow: none;
    display: none;
    background: rgba(9, 15, 27, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-nav.nav-scrolled .submenu {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(214, 178, 78, 0.2);
  }

  .main-nav.nav-scrolled .submenu li a {
    color: #d8dce4 !important;
  }

  .submenu li a {
    padding: 10px 20px;
    color: #fff !important;
  }

  .nav-menu i {
    position: absolute;
    right: 28px;
    font-size: 18px;
  }

  .ti-chevron-down {
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .ti-chevron-down:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .menu-link {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .menu-item-has-children > .menu-link {
    padding-right: 60px;
  }

  .menu-item-has-children.active > .menu-link .ti-chevron-down {
    transform: translateY(-50%) rotate(180deg);
    background: rgba(255, 255, 255, 0.2);
  }

  .hero-section {
    padding-top: 80px;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .hamburger-menu {
    display: none;
  }

  .depth-1 {
    left: 14rem;
    top: 0;
  }

  .depth-0 {
    top: 40px;
  }

  .depth-2 {
    left: 14rem;
    top: 0;
  }

  /* Wider two-column layout for the larger Services & Locations dropdowns,
     so a long list of items reads as a tidy grid instead of one tall column. */
  .menu-item-187 > .submenu,
  .menu-item-188 > .submenu {
    columns: 2;
    column-gap: 4px;
    padding: 6px 0;
  }

  .menu-item-187 > .submenu li,
  .menu-item-188 > .submenu li {
    break-inside: avoid;
  }

  header .nav-menu li.menu-item-187:hover > .submenu,
  header .nav-menu li.menu-item-188:hover > .submenu {
    width: 26rem;
  }

  /* Desktop header scrolled state */
  .header-scrolled {
    background: rgba(9, 15, 27, 0.92) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  /* Desktop nav scrolled state */
  .main-nav.nav-scrolled {
    background: transparent;
    padding: 0;
  }
}

.ti-chevron-down-m {
  position: absolute;
  right: 28px;
  font-size: 18px;
}

/* Additional styles for better overlay effect */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header-transparent::before {
  opacity: 1;
}

.header-scrolled::before {
  opacity: 0;
}

/* Ensure CTA button is visible */
header .cta-button {
  background-color: transparent;
  border: 2px solid rgb(214, 178, 78);
  color: rgb(214, 178, 78);
  padding: 8px 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* The container used to add 0.75rem top and bottom on scroll, which made the
   bar grow from 91px to 119px exactly when it should feel lighter. Height is
   handled on the header itself now (see "Header refresh" at the end). */
.header-scrolled .container {
  transition: all 0.3s ease;
}

/* Ensure proper stacking order */
header {
  z-index: 1000;
}

.main-nav {
  z-index: 1001;
}

.hamburger-menu {
  z-index: 1002;
}

/* Smooth transitions for all blur effects */
header,
.main-nav,
.submenu {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced mobile menu */
@media (max-width: 768px) {
  .main-nav.active.nav-scrolled {
    background: rgba(9, 15, 27, 0.97) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-top: 1px solid rgba(214, 178, 78, 0.22);
  }

  .main-nav.active.nav-transparent {
    background: rgba(9, 15, 27, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-nav .nav-menu {
    padding-bottom: 20px;
  }
}

.liquid-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.liquid-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(9, 15, 27, 0.1) 0%,
        rgba(214, 178, 78, 0.1) 25%,
        rgba(202, 172, 147, 0.1) 50%,
        rgba(214, 178, 78, 0.1) 75%,
        rgba(9, 15, 27, 0.1) 100%);
    border-radius: inherit;
    z-index: -1;
}

.why-choice-juara-swiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
}

.why-choice-juara-swiper .swiper-slide {
    height: auto !important;
    display: flex !important;
    align-items: stretch !important;
}

.why-choice-juara-swiper .liquid-glass {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 450px !important;
    height: 100% !important;
}

.why-choice-juara-swiper .liquid-glass p {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
}

/* ---------------------------------------------------------------------
   Header clearance for content-first templates (single.php, page.php,
   index.php). The site header is position:fixed (~90px tall) and these
   templates aren't hero sections, so their first block needs enough
   top padding or the breadcrumb/title render underneath the nav.
   A couple of the exact spacing values below aren't in the prebuilt
   tailwind.min.css, so they're defined by hand here to match Tailwind's
   own scale (1 unit = 0.25rem) and keep working regardless of any
   future Tailwind rebuild.
   --------------------------------------------------------------------- */
.pt-28 { padding-top: 7rem; }
.pb-20 { padding-bottom: 5rem; }
.badge-bronze-tint { background-color: rgba(214, 178, 78, .15); }

@media (min-width: 768px) {
  .md\:pt-36 { padding-top: 9rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
}

/* ---------------------------------------------------------------------
   Article content polish (single blog posts & pages, inside .prose)
   --------------------------------------------------------------------- */

/* "Quick answer" callout — the direct-answer opening paragraph some
   articles use (<p class="jawaban-atas">) gets a branded highlight box
   instead of rendering as a plain, unstyled paragraph. */
.prose .jawaban-atas {
  display: block;
  margin: 0 0 1.75em;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(214, 178, 78, 0.14), rgba(214, 178, 78, 0.04));
  border: 1px solid rgba(214, 178, 78, 0.35);
  border-left: 3px solid rgb(214, 178, 78);
  border-radius: 10px;
  font-size: 1.05em;
  line-height: 1.65;
}

.prose .jawaban-atas::before {
  content: "Quick answer";
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(214, 178, 78);
}

/* A little more breathing room and a hairline divider before each section
   heading, so long guides with many H2s keep a clear visual rhythm. */
.prose h2 {
  margin-top: 2.2em;
  padding-top: 0.9em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.single-post .header-scrolled::before {
  opacity: 1;
}


/* =====================================================================
   HEADER REFRESH
   ---------------------------------------------------------------------
   Sits at the end of the file on purpose: it is the last word on the
   header's geometry and states, so the older rules above stay readable
   as history without having to be untangled.

   What it establishes:
     - one height that shrinks on scroll (88 -> 72 desktop, 76 -> 64 mobile)
       instead of the bar growing by 28px the moment you scrolled
     - a CTA button, which assets/css/header.css already had styles for at
       .cta-button but which nothing ever rendered
     - a bronze marker on the current page, using the current-menu-item
       classes WordPress already emits
   ===================================================================== */

header {
  padding-block: 19px;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease,
              box-shadow 0.3s ease;
}

.header-scrolled {
  padding-block: 11px;
}

header .logo img {
  height: 50px;
  width: auto;
  display: block;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* the top-of-page scrim only helped when the bar was transparent */
.header-scrolled::before {
  opacity: 0;
}

/* ------------------------------------------------- desktop nav ------- */
@media (min-width: 769px) {
  header {
    padding-inline: 0;
  }

  header .nav-menu {
    align-items: center;
    gap: 2px;
    margin-right: 0;
  }

  header .nav-menu > li > a {
    position: relative;
    padding: 8px 12px;
    font-size: 15px;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  /* bronze underline that grows in on hover and stays on the current page */
  header .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: rgb(214, 178, 78);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
  }

  header .nav-menu > li:hover > a::after,
  header .nav-menu > li.current-menu-item > a::after,
  header .nav-menu > li.current_page_item > a::after,
  header .nav-menu > li.current-menu-ancestor > a::after,
  header .nav-menu > li.current-menu-parent > a::after {
    transform: scaleX(1);
  }

  header .nav-menu > li.current-menu-item > a,
  header .nav-menu > li.current_page_item > a,
  header .nav-menu > li.current-menu-ancestor > a,
  header .nav-menu > li.current-menu-parent > a {
    color: rgb(214, 178, 78);
  }

  /* dropdown: give it room to breathe and a soft entrance */
  .submenu {
    padding: 6px;
    margin-top: 6px;
  }

  .submenu li a {
    border-radius: 6px;
  }

  .submenu li a:hover {
    background: rgba(214, 178, 78, 0.12);
  }
}

/* ------------------------------------------------- CTA button -------- */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 20px;
  background: rgb(214, 178, 78);
  color: #090f1b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgb(214, 178, 78);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.header-cta:hover {
  background: #e4c46b;
  border-color: #e4c46b;
  transform: translateY(-1px);
}

.header-cta i {
  font-size: 17px;
}

@media (min-width: 769px) {
  .header-cta--desktop {
    margin-left: 18px;
  }
}

@media (max-width: 768px) {
  .header-cta--desktop {
    display: none;
  }

  /* inside the slide-down panel, full width under the last menu item */
  .header-cta--mobile {
    display: flex;
    justify-content: center;
    margin: 14px 20px 20px;
    padding: 14px 20px;
  }
}

/* ------------------------------------------------- mobile panel ------ */
@media (max-width: 768px) {
  header {
    padding-block: 13px;
  }

  .header-scrolled {
    padding-block: 7px;
  }

  header .logo img {
    height: 44px;
  }

  .main-nav {
    top: 70px;
    max-height: calc(100vh - 70px);
    border-top: 1px solid rgba(214, 178, 78, 0.22);
  }

  .header-scrolled + .main-nav,
  .header-scrolled .main-nav {
    top: 58px;
    max-height: calc(100vh - 58px);
  }

  header .nav-menu li a {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 15px;
  }

  /* .menu-link is carried for specificity: the panel background rule
     (.main-nav.nav-scrolled .nav-menu li a) is three classes deep and would
     otherwise repaint the current item white. */
  .main-nav .nav-menu > li.current-menu-item > a.menu-link,
  .main-nav .nav-menu > li.current_page_item > a.menu-link,
  .main-nav .nav-menu > li.current-menu-ancestor > a.menu-link {
    color: rgb(214, 178, 78) !important;
    box-shadow: inset 3px 0 0 rgb(214, 178, 78);
  }

  .hamburger-menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
}

/* ---------------------------------------------------------------------
   The open mobile panel must be a solid surface.
   It used to sit at 0.97 alpha over a backdrop-filter, which reads as
   nearly opaque on paper but let bright page content — headings, cards,
   swiper buttons — show straight through the menu. A blur is pointless
   behind an opaque panel anyway, so it goes too.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .main-nav.active,
  .main-nav.active.nav-scrolled,
  .main-nav.active.nav-transparent {
    background: #0d1422 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
  }
}