/* ==========================================================================
   CIHOS Mobile Menu - Full-screen overlay navigation
   Only active below 768px
   ========================================================================== */

/* ---------- Overlay (dark backdrop) ---------- */
.cihos-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cihos-menu-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Menu panel ---------- */
.cihos-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  z-index: 99999;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: normal;
}

.cihos-mobile-menu.is-open {
  transform: translateX(0);
}

/* Prevent body scroll when menu is open */
body.cihos-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ---------- Show only on mobile ---------- */
@media (max-width: 767px) {
  .cihos-menu-overlay {
    display: block;
  }

  .cihos-mobile-menu {
    display: flex;
  }
}

@media (min-width: 768px) {
  .cihos-menu-overlay,
  .cihos-mobile-menu {
    display: none !important;
  }

  body.cihos-menu-open {
    overflow: auto;
    position: static;
  }
}

/* ---------- Top bar (56px) ---------- */
.cihos-mm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  min-height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid #EBEBEB;
}

.cihos-mm-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgb(4, 63, 201) !important;
  margin-left: 22px; /* align with header logo (16px pad + 22px = 38px left) */
}

.cihos-mm-logo-icon {
  height: 44px; /* match header logo size on mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cihos-mm-logo-icon img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.cihos-mm-logo-text {
  font-size: 11px;
  font-weight: 700;
  color: #3F4153;
  letter-spacing: 1px;
  line-height: 1.2;
}

.cihos-mm-close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  font-size: 20px;
  font-family: sans-serif !important;
  font-weight: 400 !important;
  color: #111111;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cihos-mm-close:hover,
.cihos-mm-close:focus {
  opacity: 0.7;
}

/* ---------- Override Twenty Twenty global a tag styles ---------- */
/* Exclude CTA buttons which have their own explicit colors */
.cihos-mobile-menu a:not(.cihos-mm-btn) {
  color: inherit !important;
  text-decoration: none !important;
}

.cihos-mobile-menu a:not(.cihos-mm-btn):visited {
  color: inherit !important;
  text-decoration: none !important;
}

/* ---------- Navigation list ---------- */
.cihos-mm-nav {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.cihos-mm-nav-item {
  border-bottom: 1px solid #F2F2F2;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.cihos-mm-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
  color: #111111;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  line-height: 1;
}

/* Lock link colors against Twenty Twenty defaults and :visited overrides */
.cihos-mm-nav-link:visited,
.cihos-mm-nav-link:hover,
.cihos-mm-nav-link:focus {
  color: #111111 !important;
  background: #F9F9F9;
  text-decoration: none !important;
  outline: none !important;
}

/* Active/current page in mobile menu */
.cihos-mm-nav-item.is-current > .cihos-mm-nav-link,
.cihos-mm-nav-item.is-current > .cihos-mm-nav-link:visited {
  color: #3F4153 !important;
  font-weight: 600;
}

/* Button nav links (Lokasi Kami toggle) inherit sans-serif on CIHOS (browser
   default for <button>). Override the Open Sans !important to match exactly. */
button.cihos-mm-nav-link {
  font-family: sans-serif !important;
}

.cihos-mm-chevron {
  font-size: 18px;
  font-family: sans-serif !important;
  color: #6B7078;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.cihos-mm-nav-item.is-expanded .cihos-mm-chevron {
  transform: rotate(90deg);
}

/* ---------- Submenu (Lokasi Kami) ---------- */
.cihos-mm-submenu {
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #F9F9F9;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.cihos-mm-nav-item.is-expanded .cihos-mm-submenu {
  max-height: 2000px;
}

/* Section labels (RUMAH SAKIT / KLINIK) */
.cihos-mm-section-label {
  padding: 16px 40px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #3F4153;
  letter-spacing: 0.5px;
  line-height: 22px;
}

.cihos-mm-section-label--klinik {
  padding-top: 20px;
  border-top: 1px solid #EBEBEB;
}

/* Hospital links in Lokasi Kami submenu */
.cihos-mm-hospital-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 10px 40px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #3F4153;
  text-decoration: none;
  line-height: 22px;
  border-bottom: 1px solid #F2F2F2;
}

.cihos-mm-hospital-link:visited {
  color: #3F4153 !important;
  text-decoration: none !important;
}

.cihos-mm-hospital-link:last-of-type {
  border-bottom: none;
}

.cihos-mm-hospital-link:hover,
.cihos-mm-hospital-link:focus {
  color: #3F4153 !important;
  background: #E8F1FA;
  text-decoration: none !important;
}

.cihos-mm-hospital-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cihos-mm-hospital-name {
  font-size: 14px;
  font-weight: 500;
  color: #3F4153;
  line-height: 22px;
}

.cihos-mm-hospital-location {
  font-size: 12px;
  color: #8B8C8D;
  flex-shrink: 0;
  line-height: 22px;
}

/* Location dot (shared) */
.cihos-mm-loc-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8B8C8D;
  flex-shrink: 0;
}

/* Clinic items in Lokasi Kami submenu */
.cihos-mm-clinic-item {
  display: block;
  padding: 12px 24px 12px 40px;
  border-bottom: 1px solid #F2F2F2;
  text-decoration: none;
  color: inherit;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.cihos-mm-clinic-item:visited {
  color: inherit !important;
  text-decoration: none !important;
}

.cihos-mm-clinic-item:last-child {
  border-bottom: none;
}

.cihos-mm-clinic-item:hover,
.cihos-mm-clinic-item:focus {
  color: inherit !important;
  background: #E8F1FA;
  text-decoration: none !important;
}

.cihos-mm-clinic-name {
  font-size: 14px;
  font-weight: 600;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #3F4153;
  margin-bottom: 2px;
  line-height: 22px;
}

.cihos-mm-clinic-type {
  font-size: 12px;
  font-weight: 400;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #8B8C8D;
  margin-bottom: 6px;
  line-height: 22px;
}

.cihos-mm-clinic-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.cihos-mm-clinic-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #8B8C8D;
  text-decoration: none;
  line-height: 22px;
}

.cihos-mm-clinic-loc:visited {
  color: #8B8C8D !important;
  text-decoration: none !important;
}

.cihos-mm-clinic-loc:hover {
  color: #2B7ACC;
}

.cihos-mm-clinic-loc:hover .cihos-mm-loc-dot {
  background: #2B7ACC;
}

/* ---------- Bottom CTA buttons ---------- */
.cihos-mm-cta {
  margin-top: auto;
  padding: 8px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cihos-mm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  gap: 8px;
  line-height: 1;
}

.cihos-mm-btn--primary,
.cihos-mm-btn--primary:visited {
  background: #3F4153;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.cihos-mm-btn--primary:hover,
.cihos-mm-btn--primary:focus {
  background: #333645;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.cihos-mm-btn--whatsapp,
.cihos-mm-btn--whatsapp:visited {
  background: #FFFFFF;
  color: #26AD61 !important;
  border: 1.5px solid #26AD61;
  text-decoration: none !important;
}

.cihos-mm-btn--whatsapp:hover,
.cihos-mm-btn--whatsapp:focus {
  background: #F0FBF5;
  color: #26AD61 !important;
  text-decoration: none !important;
}