/* WASIAT4D2 wasiat4d2-lp-jjk-stable-2.0.1 – Responsive QA fixes, final cascade layer. */
/* Keep existing Jujutsu-inspired palette, assets and spacing system. */
html, body.body {
  max-width: 100%;
  overflow-x: clip;
}
body.body { min-width: 0; }

/* Webflow's original brand link adds a fixed 200px width + top padding.
   This forced the hamburger outside the viewport at some intermediate widths. */
.navbar-wrapper { min-width: 0; justify-content: space-between; }
.navbar-brand, .navbar-brand.w-nav-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  align-self: center;
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.navbar-brand .jjk-brand--nav { max-width: 100%; }
.navbar-brand .jjk-logo { height: auto; }
.div-block-14 { margin-left: auto; }

@media (max-width: 767px) {
  .navbar-brand .jjk-brand--nav { width: clamp(124px, 34vw, 145px); }
  .jjk-service-section { padding-inline: clamp(14px, 4.5vw, 20px); }

  /* Small screens: use full-width content instead of squeezing typography
     into the reference's narrow date/number column. */
  .jjk-service-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px 0;
    padding: clamp(16px, 4vw, 21px);
    align-items: start;
  }
  .jjk-service-row .date {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start;
    align-items: baseline;
    gap: 9px;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
  .jjk-service-row .day {
    order: -1;
    display: block;
    width: auto;
    margin: 0;
    font: 800 25px/1.08 'Barlow Condensed', sans-serif;
    color: var(--jjk-gold);
  }
  .jjk-service-row .month {
    display: block;
    width: auto;
    margin: 0;
    font: 700 11px/1.4 'Noto Sans', sans-serif;
    letter-spacing: .13em;
    color: #c5d7e6;
  }
  .jjk-service-row .details {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    gap: 3px;
    margin: 0;
    padding: 0;
  }
  .jjk-service-row .heading-6 { font-size: 11px; line-height: 1.5; }
  .jjk-service-row .main-title-horizontal-wrapper { max-width: 100%; }
  .jjk-service-row .heading-4,
  .jjk-service-row .main-title-horizontal-wrapper h3 {
    margin: 2px 0 3px;
    font-size: clamp(22px, 5vw, 26px);
    line-height: 1.16;
    overflow-wrap: break-word;
  }
  .jjk-service-row .jjk-row-desc {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .jjk-service-row .buy-tickets.nav {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    width: min(100%, 214px);
    min-height: 44px;
    margin: 5px 0 0;
  }
  .jjk-faq-item { padding-inline: clamp(13px, 3.8vw, 18px); }
  .jjk-faq-toggle { gap: 11px; min-height: 58px; padding-block: 15px; }
  .jjk-faq-toggle .accordion-header { font-size: 14.5px; line-height: 1.5; }
  .jjk-faq-toggle .accordion-icon { flex: 0 0 25px; width: 25px; height: 25px; }
  .jjk-faq-answer p { font-size: 14px; line-height: 1.72; }
  .jjk-about-section .paragraph,
  .jjk-koneksi-section .paragraph,
  .jjk-mengapa-section .paragraph { line-height: 1.72; }
  .jjk-footer-info p { overflow-wrap: break-word; }
}

/* The mobile nav contains the same CTA; hide its cramped header copy. */
@media (max-width: 540px) {
  .navbar-no-shadow .container-regular { width: calc(100% - 28px); }
  .div-block-14 > .div-block { display: none !important; }
  .jjk-nav-toggle { flex: 0 0 auto; }
}

/* The old Webflow top-bar sets font-size:0 below 479px,
   leaving a blank blue strip. Avoid that dead space. */
@media (max-width: 479px) {
  .top-bar-wrapper---brix { display: none !important; }
  .navbar-no-shadow { top: 0 !important; }
}
@media (max-width: 359px) {
  .navbar-brand .jjk-brand--nav { width: 126px; }
  .navbar-no-shadow .container-regular { width: calc(100% - 22px); }
  .jjk-service-section .h2 { font-size: clamp(32px, 10.5vw, 37px); }
  .jjk-service-row { padding: 16px; }
  .jjk-service-row .heading-4,
  .jjk-service-row .main-title-horizontal-wrapper h3 { font-size: 22px; }
  .jjk-faq-section #faq-title { font-size: 34px; }
  .jjk-conclusion .jjk-form-heading h2 { font-size: clamp(38px, 12vw, 45px); }
}

/* Give the open hamburger menu intrinsic height instead of the
   Webflow menu's inherited viewport-height panel. */
@media (max-width: 1199px) {
  .nav-menu-wrapper.jjk-navigation {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(calc(100dvh - 88px), 480px);
    overflow-y: auto;
  }
}

@media (max-width: 767px) {
  /* Heading, service description and action should share one left axis. */
  .jjk-service-row .details { align-items: flex-start !important; text-align: left !important; }
  .jjk-service-row .heading-6,
  .jjk-service-row .heading-4,
  .jjk-service-row .main-title-horizontal-wrapper h3 { text-align: left !important; }
  .jjk-service-row .main-title-horizontal-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100%;
  }
  /* Reduce the inherited gap underneath content-card headings. */
  .jjk-about-section .about-content,
  .jjk-koneksi-section .about-content,
  .jjk-mengapa-section .about-content { gap: 12px; }
  .jjk-about-section .div-block-29,
  .jjk-koneksi-section .div-block-29,
  .jjk-mengapa-section .div-block-29 { margin-bottom: 0; min-height: 0; }
}