/**
 * Responsive & Mobile Navigation Stylesheet
 * Website  : Fakultas Kedokteran Universitas Tadulako (FK UNTAD)
 * File     : /assets/css/responsive.css
 * Version  : 1.1.3 (Horizontal Format - Full Clean Layout Fix)
 */

/* ==========================================================================
   1. TOP BAR SOCIAL MEDIA STYLES (DESKTOP & GENERAL)
   ========================================================================== */
.top-bar-right, .top-links { display: flex; align-items: center; gap: 8px; }
.top-social-links { display: flex; align-items: center; gap: 6px; }
.top-social-links a { color: #ffffff !important; font-size: 11px !important; width: 24px !important; height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.15) !important; transition: all 0.2s ease !important; text-decoration: none !important; }
.top-social-links a:hover { background: #37BCE5 !important; color: #ffffff !important; transform: translateY(-2px) !important; }

/* ==========================================================================
   2. HAMBURGER BUTTON
   ========================================================================== */
.mobile-menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 6px; outline: none; z-index: 999999; position: relative; }
.hamburger-bar { display: block; width: 22px; height: 2.5px; margin: 4px 0; background-color: #0F2C59; border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.mobile-menu-toggle.is-active .hamburger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-toggle.is-active .hamburger-bar:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-active .hamburger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   3. BREAKPOINT MOBILE & TABLET (MAX-WIDTH: 1200PX)
   ========================================================================== */
@media screen and (max-width: 1200px) {
  /* TOP BAR PRESISI & DIKUNCI SESUAI ALUR TATA LETAK */
  .top-bar, .top-header, [class*="top-bar"] { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; padding: 6px 10px !important; font-size: 10.5px !important; background-color: #0F2C59 !important; border-bottom: 2px solid #37BCE5 !important; z-index: 10 !important; margin: 0 !important; }
  .top-bar .container, .top-header .container, [class*="top-bar"] .container, .top-bar-container { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px 10px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .top-info { display: flex !important; align-items: center !important; gap: 10px !important; }
  .top-info span, .top-info a { display: inline-flex !important; align-items: center !important; color: #ffffff !important; font-size: 10.5px !important; white-space: nowrap !important; }
  .top-info i, .top-info .dashicons { margin-right: 3px !important; font-size: 12px !important; width: 12px !important; height: 12px !important; line-height: 12px !important; }
  .top-address { display: none !important; }

  /* MAIN NAVBAR SAFE POSITION */
  .main-navbar { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 9999 !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; margin: 0 !important; }
  .navbar-container { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 12px !important; }
  .mobile-menu-toggle { display: block !important; }

  /* NAVIGATION CONTAINER (DROPDOWN MELAYANG DENGAN SCROLL MANDIRI) */
  .main-navigation { display: none; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; background: #ffffff !important; box-shadow: 0 12px 24px rgba(15, 44, 89, 0.2) !important; border-top: 3px solid #37BCE5 !important; border-bottom: 4px solid #0F2C59 !important; z-index: 99999 !important; }
  .main-navigation.is-active { display: block !important; max-height: 65vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ITEM MENU VERTIKAL */
  .nav-menu-list { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; width: 100% !important; list-style: none !important; }
  .nav-menu-list > li { width: 100% !important; display: block !important; float: none !important; }
  .nav-menu-list a { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 16px !important; width: 100% !important; box-sizing: border-box !important; border-bottom: 1px solid #edf2f7 !important; color: #0F2C59 !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; }
  .nav-menu-list a:hover, .nav-menu-list li.submenu-active > a { background-color: #f1f5f9 !important; color: #37BCE5 !important; }

  /* SUBMENU MOBILE INDENTASI & BACKGROUND BERBEDA */
  .nav-menu-list ul.sub-menu, .nav-menu-list ul { position: static !important; display: none; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: none !important; background-color: #f8fafc !important; padding: 0 !important; width: 100% !important; margin: 0 !important; }
  .nav-menu-list ul.sub-menu a, .nav-menu-list ul a { padding-left: 30px !important; font-size: 12px !important; font-weight: 500 !important; background-color: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; color: #334155 !important; }
  .nav-menu-list ul.sub-menu ul a, .nav-menu-list ul ul a { padding-left: 45px !important; background-color: #f1f5f9 !important; }

  /* INDIKATOR PANAH TOGGLE */
  .nav-menu-list .menu-item-has-children > a::after { content: "▾"; font-size: 11px; margin-left: 8px; transition: transform 0.25s ease; display: inline-block; opacity: 0.7; }
  .nav-menu-list .menu-item-has-children.submenu-active > a::after { transform: rotate(180deg); opacity: 1; color: #37BCE5; }
}

/* ==========================================================================
   4. SMALL MOBILE (MAX-WIDTH: 576PX)
   ========================================================================== */
@media screen and (max-width: 576px) {
  .site-branding img, .header-logo-img { height: 32px !important; width: auto !important; }
  .branding-text { display: flex; flex-direction: column; }
  .univ-title { font-size: 10.5px !important; line-height: 1.1 !important; font-weight: 700 !important; }
  .univ-subtitle { font-size: 8px !important; line-height: 1.1 !important; }
  .univ-tagline { display: none !important; }
  .btn-siga8 { padding: 2px 6px !important; font-size: 9.5px !important; }
}