/* =====================================================
   🔥 RESPONSIVE FIXES (This part is NEW)
   Makes header background responsive & smaller on mobile
   ===================================================== */

@media (max-width: 768px) {

  /* Make the header image scale smaller on mobile */
  .navbar {
    background-size: contain !important; /* show entire image */
    background-position: center;
    min-height: 140px !important;        /* reduce header height */
  }

  #headerNavigationContainer {
    min-height: 140px !important;        /* match navbar */
  }

  /* Optional: improve spacing */
  #main-navigation {
    flex-direction: column;
    align-items: center;
  }

  .navbar-nav {
    float: none !important;
    text-align: center;
  }

  #nav-menu {
    position: static;
    width: 100%;
  }
}

/* ================================
   📱 iPAD / Tablet Responsiveness
   Width: 769px – 1024px
   ================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Scale header background smaller like mobile, but not too small */
  .navbar {
    background-size: contain !important;
    background-position: center;
    min-height: 180px !important;  /* slightly taller than mobile */
  }

  #headerNavigationContainer {
    min-height: 180px !important;
  }

  /* Adjust navigation spacing */
  #main-navigation {
    justify-content: center;
    gap: 10px;
  }

  .navbar-nav {
    float: none !important;
  }

  #nav-menu {
    position: static;
    margin-top: 10px;
    text-align: center;
  }

  /* Dropdown alignment fix for tablet */
  #main-navigation .dropdown-menu {
    left: 0 !important;
    transform: none !important;
    min-width: 180px;
  }

  /* Improve readability */
  #main-navigation > li > a {
    font-size: 13px;
    padding: 8px 12px;
  }
}


#headerNavigationContainer {
    min-height: 250px; 
}

.navbar {
    padding-top: 5px;  
    padding-bottom: 5px;
}

.navbar-nav > li > a {
    padding-top: 5px;   
    padding-bottom: 5px;
}

.navbar-collapse {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

#headerNavigationContainer {
    position: relative;
}

#nav-menu {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
}

#main-navigation {
    display: flex;
    padding-bottom: 5px; 
}

.navbar-nav {
  float: right !important;
}

#main-navigation .dropdown {
  position: relative; /* parent context for positioning */
}

#main-navigation .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.95); 
  border: none;
  box-shadow: 0 4px 8px #5a7b3d;
  width: auto;
  min-width: 150px; /* adjust based on your preference */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: none; /* hide by default */
  position: absolute;
  z-index: 9999;
  text-align: center; /* optional: center text */
}

/* ✅ This is the new rule to show dropdown on hover */
#main-navigation li.dropdown:hover > .dropdown-menu {
  display: block !important;
}

#main-navigation li.dropdown:hover > a {
  color: #ffffff !important;
  background: #5a7b3d !important;
}

#main-navigation .dropdown-menu > li > a {
  color: #5a7b3d !important;
  padding: 5px 5px;
  display: block;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}

#main-navigation .dropdown-menu > li > a:hover {
  background-color: #5a7b3d;
  color: #ffffff !important;
}

#main-navigation .dropdown-menu {
  border-radius: 6px;
}

.dropdown-menu > li > a {
  font-size: 12px; 
}

#main-navigation > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-form .btn {
    height: 35px; 
    font-size: 14px;
}

#main-navigation > li > a {
    font-size: 12px; 
    color: #4B6930; 
}

#main-navigation > li > a:hover {
    color: #F2F2F2; 
    background: #5A7B3D;
    border-radius: 5px; 
}

.pull-md-right {
    display: none !important;
}

.homepage-image {
  display: none !important;
}

.navbar-brand {
  display: none !important;
}

.title {
    font-size: 18px;
    text-align: center;
   
}

.hover-zoom-shadow:hover {
  transform: scale(1.1);
}

.pkp_block .title {
  background: #5a7b3d95;
  color: #ffffff;
  
}

a {
  color: #04588C; 
  text-decoration: none; 
}

a:hover {
  color: #5A7B3D; 
  text-decoration: underline; 
}

.page-header > h1 {
    text-align: center;
    font-size: 25px;
}

/* Hide sidebar on all pages */
#sidebar {
  display: none !important;
}

/* Expand main content when sidebar hidden */
.pkp_structure_main {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Show sidebar only on homepage */
body.pkp_page_index #sidebar {
  display: block !important;
}

/* On homepage, return main content to normal width */
body.pkp_page_index .pkp_structure_main {
  width: 66.6667% !important; /* same as col-md-8 */
  max-width: 66.6667% !important;
  flex: 0 0 66.6667% !important;
}

.breadcrumb {
  background-color: #5a7b3d42;
}

li.active {
  color:#ffffff
}

.navbar {
  background-image: url("https://agritech.unhas.ac.id/ojs/public/journals/7/homepageImage_en_US.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 250px; 
}

/* Hide original Register/Login in mobile */
@media (max-width: 768px) {
    #navigationUser {
        display: none !important;
    }
}

/* Insert Register/Login inside mobile dropdown */
@media (max-width: 768px) {
    #nav-menu .navbar-nav {
        position: relative;
    }

    /* Move Register/Login and style it like other menu items */
    #navigationUser-clone {
        display: block;
        padding-left: 15px;
        margin-top: 10px;
    }

    #navigationUser-clone li a {
        color: #333;
        padding: 10px 15px;
        display: block;
    }
}