/*
 * Header Website UM — disalin apa adanya dari Guideline resmi:
 *   website_guideline/WEBSITE GUIDELINE UM 2026/Code/css header.txt
 *
 * JANGAN diedit di sini. Penyesuaian khas fakultas (warna --umh-blue,
 * logo) ditaruh di style.css agar berkas ini tetap bisa dibandingkan
 * baris demi baris dengan Guideline saat penilaian.
 */

:root {
    --umh-navy: #05245c;
    --umh-blue: #5269a3;
    --umh-white: #ffffff;
    --umh-muted: rgba(255, 255, 255, 0.68);
    --umh-border: rgba(255, 255, 255, 0.18);
    --umh-font: "Albert Sans", Helvetica, Arial, Lucida, sans-serif;
  }
/*
  #top-header,
  #main-header,
  .et-l--header > #main-header,
  .wprh-header {
    display: none !important;
  }
*/
  
  body.et_fixed_nav #page-container {
    padding-top: 0 !important;
  }

  .et-l--header,
  .et-l--header .et_builder_inner_content,
  .et-l--header .et_pb_section,
  .et-l--header .et_pb_row,
  .et-l--header .et_pb_column,
  .et-l--header .et_pb_module,
  .et-l--header .et_pb_code,
  .et-l--header .et_pb_code_inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .et-l--header .et_pb_section {
    background: transparent !important;
  }

  /*
    Force Divi Theme Builder header wrappers to stay visible on all devices.
    This is needed because Divi may keep generating per-device hide rules like:
    .et_pb_section_0_tb_header { display:none!important; }
  */
  .et-l--header [class*="_tb_header"].et_pb_section,
  .et-l--header [class*="_tb_header"].et_pb_row,
  .et-l--header [class*="_tb_header"].et_pb_column,
  .et-l--header [class*="_tb_header"].et_pb_module,
  .et-l--header [class*="_tb_header"].et_pb_code,
  .et-l--header [class*="_tb_header"].et_pb_menu {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .et-l--header .et_pb_section.et-disabled-phone,
  .et-l--header .et_pb_section.et-disabled-tablet,
  .et-l--header .et_pb_row.et-disabled-phone,
  .et-l--header .et_pb_row.et-disabled-tablet,
  .et-l--header .et_pb_column.et-disabled-phone,
  .et-l--header .et_pb_column.et-disabled-tablet,
  .et-l--header .et_pb_module.et-disabled-phone,
  .et-l--header .et_pb_module.et-disabled-tablet,
  .et-l--header .et_pb_code.et-disabled-phone,
  .et-l--header .et_pb_code.et-disabled-tablet,
  .et-l--header .et_pb_section.et_pb_section_hidden_phone,
  .et-l--header .et_pb_section.et_pb_section_hidden_tablet,
  .et-l--header .et_pb_row.et_pb_row_hidden_phone,
  .et-l--header .et_pb_row.et_pb_row_hidden_tablet,
  .et-l--header .et_pb_module.et_pb_module_hidden_phone,
  .et-l--header .et_pb_module.et_pb_module_hidden_tablet,
  .et-l--header .et_pb_code.et_pb_module_hidden_phone,
  .et-l--header .et_pb_code.et_pb_module_hidden_tablet {
    display: block !important;
  }

  @media only screen and (max-width: 980px) {
    .et-l--header [class*="_tb_header"].et_pb_section,
    .et-l--header [class*="_tb_header"].et_pb_row,
    .et-l--header [class*="_tb_header"].et_pb_column,
    .et-l--header [class*="_tb_header"].et_pb_module,
    .et-l--header [class*="_tb_header"].et_pb_code,
    .et-l--header [class*="_tb_header"].et_pb_menu {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
    }

    .et-l--header .et_pb_row[class*="_tb_header"] {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      padding: 0 !important;
    }

    .et-l--header .et_pb_column[class*="_tb_header"] {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

  .umh-topbar,
  .umh-topbar *,
  .umh-topbar *::before,
  .umh-topbar *::after {
    box-sizing: border-box;
  }

  .umh-topbar {
    width: 100%;
    min-height: 144px;
    color: var(--umh-white);
    background: var(--umh-navy);
    font-family: var(--umh-font);
    line-height: 1;
    position: relative;
    z-index: 10000;
  }

  .umh-topbar a {
    color: inherit;
    text-decoration: none;
  }

  .umh-container {
    width: min(calc(100% - 124px), 1320px);
    min-height: 144px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .umh-brand {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    min-width: 0;
  }

  .umh-logo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--umh-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .umh-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .umh-logo:not(.has-image) img {
    display: none;
  }

  .umh-logo.has-image .umh-logo-fallback {
    display: none;
  }

  .umh-title {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
  }

  .umh-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin-left: auto;
  }

  .umh-socials {
    display: inline-flex;
    align-items: center;
    gap: 20px;
  }

  .umh-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--umh-muted);
    transition: color 160ms ease, transform 160ms ease;
  }

  .umh-icon:hover,
  .umh-icon:focus {
    color: var(--umh-white);
    transform: translateY(-1px);
  }

  .umh-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
  }

  .umh-divider {
    width: 1px;
    height: 32px;
    background: var(--umh-border);
  }

  .umh-language {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--umh-border);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--umh-white);
    font-size: 13px;
    font-weight: 600;
  }

  .umh-flag {
    width: 21px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #e11d2e 0 50%, #ffffff 50% 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  }

  .umh-language svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    opacity: 0.8;
  }

  /* Dynamic menu row: add class umh-dynamic-menu to the Divi Menu Module. */
  .et-l--header .umh-dynamic-menu.et_pb_menu {
    min-height: 48px !important;
    background: var(--umh-blue) !important;
    font-family: var(--umh-font) !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .et_pb_menu_inner_container,
  .et-l--header .umh-dynamic-menu.et_pb_menu .et_pb_menu__wrap {
    min-height: 48px !important;
    justify-content: center !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .et_pb_menu__menu,
  .et-l--header .umh-dynamic-menu.et_pb_menu nav,
  .et-l--header .umh-dynamic-menu.et_pb_menu ul.et-menu {
    min-height: 48px !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu ul.et-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu ul.et-menu > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu ul.et-menu > li > a {
    min-height: 48px !important;
    padding: 0 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu ul.et-menu > li > a:hover,
  .et-l--header .umh-dynamic-menu.et_pb_menu ul.et-menu > li.current-menu-item > a {
    color: var(--umh-white) !important;
    opacity: 1 !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .nav li ul {
    background: var(--umh-navy) !important;
    border-top: 0 !important;
    box-shadow: 0 18px 40px rgba(4, 22, 55, 0.24) !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .nav li li {
    padding: 0 !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .nav li li a {
    width: 240px !important;
    padding: 12px 16px !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .mobile_nav {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    background: var(--umh-blue);
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .mobile_menu_bar::before {
    color: var(--umh-white) !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .et_mobile_menu {
    background: var(--umh-navy) !important;
    border-top: 1px solid var(--umh-border) !important;
  }

  .et-l--header .umh-dynamic-menu.et_pb_menu .et_mobile_menu li a {
    color: rgba(255, 255, 255, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Tablet landscape: keep the desktop shape, but reduce spacing. */
  @media (max-width: 1180px) {
    .umh-topbar,
    .umh-container {
      min-height: 118px;
    }

    .umh-container {
      width: calc(100% - 48px);
      gap: 24px;
    }

    .umh-brand {
      gap: 22px;
    }

    .umh-logo {
      width: 64px;
      height: 64px;
      flex-basis: 64px;
      font-size: 21px;
    }

    .umh-title {
      gap: 7px;
      font-size: 20px;
    }

    .umh-tools {
      gap: 18px;
    }

    .umh-socials {
      gap: 14px;
    }

    .umh-icon {
      width: 20px;
      height: 20px;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu ul.et-menu > li > a {
      padding: 0 12px !important;
      font-size: 15px !important;
    }
  }

  /* Tablet portrait: top bar remains branded, menu switches to Divi mobile nav. */
  @media (max-width: 980px) {
    .umh-topbar,
    .umh-container {
      min-height: 92px;
    }

    .umh-container {
      width: calc(100% - 40px);
      gap: 18px;
    }

    .umh-brand {
      gap: 14px;
    }

    .umh-logo {
      width: 54px;
      height: 54px;
      flex-basis: 54px;
      font-size: 18px;
    }

    .umh-title {
      gap: 5px;
      max-width: 48vw;
      font-size: 18px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .umh-tools {
      display: inline-flex;
      gap: 14px;
      flex: 0 0 auto;
    }

    .umh-tools .umh-socials,
    .umh-tools .umh-divider:first-of-type {
      display: none;
    }

    .umh-language {
      min-height: 34px;
      padding: 5px 12px;
      font-size: 12px;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu {
      min-height: 52px !important;
      z-index: 9999 !important;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .et_pb_menu_inner_container,
    .et-l--header .umh-dynamic-menu.et_pb_menu .et_pb_menu__wrap,
    .et-l--header .umh-dynamic-menu.et_pb_menu .mobile_nav {
      min-height: 52px !important;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .mobile_nav {
      justify-content: space-between;
      padding: 0 24px;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .select_page {
      color: rgba(255, 255, 255, 0.82) !important;
      font-family: var(--umh-font) !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      line-height: 1 !important;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .mobile_menu_bar {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .et_mobile_menu {
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-height: calc(100vh - 144px);
      overflow-y: auto;
      padding: 8px 0 !important;
      box-shadow: 0 18px 40px rgba(4, 22, 55, 0.28) !important;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .et_mobile_menu li a {
      min-height: 48px;
      display: flex !important;
      align-items: center;
      padding: 0 24px !important;
    }
  }

  /* Phone: keep the first row compact and let the menu module handle navigation. */
  @media (max-width: 767px) {
    .umh-topbar,
    .umh-container {
      min-height: 78px;
    }

    .umh-container {
      width: calc(100% - 32px);
      gap: 12px;
    }

    .umh-brand {
      gap: 12px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .umh-logo {
      width: 46px;
      height: 46px;
      flex-basis: 46px;
      font-size: 16px;
    }

    .umh-title {
      font-size: 16px;
      line-height: 1.08;
    }

    .umh-tools {
      display: none;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu,
    .et-l--header .umh-dynamic-menu.et_pb_menu .et_pb_menu_inner_container,
    .et-l--header .umh-dynamic-menu.et_pb_menu .et_pb_menu__wrap,
    .et-l--header .umh-dynamic-menu.et_pb_menu .mobile_nav {
      min-height: 48px !important;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .mobile_nav {
      padding: 0 16px;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .select_page {
      font-size: 14px !important;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .et_mobile_menu {
      max-height: calc(100vh - 126px);
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .et_mobile_menu li a {
      min-height: 46px;
      padding: 0 18px !important;
      font-size: 15px !important;
    }
  }

  @media (max-width: 420px) {
    .umh-container {
      width: calc(100% - 28px);
    }

    .umh-logo {
      width: 42px;
      height: 42px;
      flex-basis: 42px;
      font-size: 15px;
    }

    .umh-title {
      font-size: 15px;
    }

    .et-l--header .umh-dynamic-menu.et_pb_menu .select_page {
      font-size: 13px !important;
    }
  }

  /*
    Divi responsive fallback.
    These selectors intentionally support both cases:
    - umh-dynamic-menu is added as CSS Class on the Menu Module.
    - umh-dynamic-menu is accidentally added as CSS ID or on a wrapper.
  */
  .umh-topbar {
    display: block !important;
    background: var(--umh-navy) !important;
  }

  .umh-dynamic-menu,
  #umh-dynamic-menu,
  .umh-dynamic-menu.et_pb_menu,
  #umh-dynamic-menu.et_pb_menu,
  .umh-dynamic-menu .et_pb_menu,
  #umh-dynamic-menu .et_pb_menu {
    background: var(--umh-blue) !important;
  }

  .umh-dynamic-menu .et_pb_menu_inner_container,
  #umh-dynamic-menu .et_pb_menu_inner_container,
  .umh-dynamic-menu .et_pb_menu__wrap,
  #umh-dynamic-menu .et_pb_menu__wrap,
  .umh-dynamic-menu .mobile_nav,
  #umh-dynamic-menu .mobile_nav {
    background: var(--umh-blue) !important;
  }

  .umh-dynamic-menu .mobile_nav,
  #umh-dynamic-menu .mobile_nav {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
  }

  .umh-dynamic-menu .select_page,
  #umh-dynamic-menu .select_page {
    color: rgba(255, 255, 255, 0.84) !important;
    font-family: var(--umh-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .umh-dynamic-menu .mobile_menu_bar,
  #umh-dynamic-menu .mobile_menu_bar {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .umh-dynamic-menu .mobile_menu_bar::before,
  #umh-dynamic-menu .mobile_menu_bar::before {
    color: var(--umh-white) !important;
  }

  .umh-dynamic-menu .et_mobile_menu,
  #umh-dynamic-menu .et_mobile_menu {
    background: var(--umh-navy) !important;
    border-top: 1px solid var(--umh-border) !important;
    box-shadow: 0 18px 40px rgba(4, 22, 55, 0.28) !important;
  }

  .umh-dynamic-menu .et_mobile_menu li a,
  #umh-dynamic-menu .et_mobile_menu li a {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    font-family: var(--umh-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  /* ============================= */
/* LANGUAGE DROPDOWN - CLEAN FIX */
/* ============================= */

.umh-language-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger */
.umh-language {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--umh-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

/* Flag */
.umh-flag {
  width: 16px;
  height: 10px;
  flex: 0 0 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22);
}

.umh-flag-id {
  background: linear-gradient(to bottom,#e11d2e 0 50%,#fff 50% 100%);
}

.umh-flag-en {
  background:
    linear-gradient(90deg,transparent 36%,#fff 36% 44%,#c8102e 44% 56%,#fff 56% 64%,transparent 64%),
    linear-gradient(0deg,transparent 36%,#fff 36% 44%,#c8102e 44% 56%,#fff 56% 64%,transparent 64%),
    #012169;
}

/* Arrow */
.umh-language svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  opacity: .8;
}

/* Dropdown */
.umh-language-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;

  min-width: 120px;
  padding: 5px;

  background: #071f50;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 10px 25px rgba(0,0,0,0.25);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all .14s ease;

  z-index: 9999999;
}

/* Show dropdown */
.umh-language-wrap:hover .umh-language-menu,
.umh-language-wrap.is-open .umh-language-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Item */
.umh-language-menu a {
  display: flex;
  align-items: center;
  gap: 7px;

  padding: 6px 8px;
  border-radius: 7px;

  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);

  white-space: nowrap;
}

.umh-language-menu a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}


/* ============================= */
/* 🔥 STACKING FIX FINAL (PENTING) */
/* ============================= */

/* HAPUS semua clipping dari Divi */
.et-l--header,
.et-l--header * {
  overflow: visible !important;
}

/* Pastikan header layer paling atas */
.umh-topbar {
  position: relative !important;
  z-index: 9999998 !important;
}

/* Turunkan menu Divi */
.et_pb_menu,
.umh-dynamic-menu {
  position: relative !important;
  z-index: 1 !important;
}

/* HAPUS stacking context yang sering bikin bug */
.et-l--header {
  transform: none !important;
}
  
  /* Force topbar above menu section */
.et-l--header .umh-topbar {
  position: relative !important;
  z-index: 99999999 !important;
}

/* Paksa row/section yang berisi menu bawah turun layer */
.et-l--header .et_pb_section:has(.umh-dynamic-menu),
.et-l--header .et_pb_row:has(.umh-dynamic-menu),
.et-l--header .et_pb_column:has(.umh-dynamic-menu),
.et-l--header .et_pb_module:has(.umh-dynamic-menu),
.et-l--header .umh-dynamic-menu,
.et-l--header .umh-dynamic-menu.et_pb_menu {
  position: relative !important;
  z-index: 1 !important;
}

/* Paksa section/row yang berisi topbar naik layer */
.et-l--header .et_pb_section:has(.umh-topbar),
.et-l--header .et_pb_row:has(.umh-topbar),
.et-l--header .et_pb_column:has(.umh-topbar),
.et-l--header .et_pb_module:has(.umh-topbar),
.et-l--header .et_pb_code:has(.umh-topbar),
.et-l--header .et_pb_code_inner:has(.umh-topbar) {
  position: relative !important;
  z-index: 99999998 !important;
  overflow: visible !important;
}

/* Dropdown paling atas */
.et-l--header .umh-language-wrap,
.et-l--header .umh-language-menu {
  z-index: 999999999 !important;
}
  /* SEARCH POPUP */
.umh-search-popup{
  position:absolute;
  top:100%;
  right:20px;
  width:340px;
  padding:15px;
  background:#05245c;
  border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:.25s ease;
  z-index:999999999;
}

.umh-search-popup.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.umh-search-popup form{
  display:flex;
  gap:8px;
}

.umh-search-popup input{
  flex:1;
  height:42px;
  padding:0 14px;
  border:none;
  border-radius:8px;
  outline:none;
  font-size:14px;
}

.umh-search-popup button{
  height:42px;
  padding:0 18px;
  border:none;
  border-radius:8px;
  background:#5269a3;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}