:root {
  --gold: #c5a473;
  --gold-light: #d4ba8e;
  --gold-dark: #9a7e53;
  --black: #121212;
  --black-light: #222222;
}

/* Core Navbar Styles */
.luxury-navbar {
  background-color: rgba(18, 18, 18, 0.95);
  border-bottom: 1px solid var(--gold);
  padding: 0;
  margin-top: 0;
  transition: all 0.3s ease;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  background-image: url('../storage/assets/background-gresik-header.gif'), url('../storage/assets/background-gresik-header.gif');
  background-size: auto 105px, auto 60px; 
  background-position: top, bottom;
  min-height: 80px; /* keep bar height consistent */
}

/* Keep container as positioning context */
.luxury-navbar .container {
  position: relative;
  padding-left: 150px; /* reserve space for absolute brand so nav isn't overlapped */
}

/* Hide navbar animation */
.luxury-navbar.navbar-hide {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

/* Scrolled state */
.luxury-navbar.scrolled {
  background-color: rgba(18, 18, 18, 0.98);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Top & Bottom Gold Lines */
.navbar-line-top, 
.navbar-line-bottom {
  position: absolute;
  height: 1px;
  background-color: var(--gold);
  left: 0;
  width: 100%;
}

.navbar-line-top {
  top: 0;
}

.navbar-line-bottom {
  bottom: 0;
}

/* Brand & Logo */
.navbar-brand-wrapper {
  background: #222222;
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 4px 18px 0 rgba(197, 164, 115, 0.18), 0 1.5px 0 var(--gold);
  padding: 1rem 1rem;
  margin: 10px 0.7rem -16px 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  position: absolute; /* remove from document flow so bar doesn't grow */
  top: -10px;
  left: 12px;
  margin: 0; /* prevent extra bar height */
  transition: all 0.3s ease;
  text-decoration: none;
}

.navbar-brand-wrapper:hover {
  text-decoration: none;
}

.navbar-brand-wrapper img {
  height: 100px; /* large logo at top */
  width: auto;
  z-index: 1101;
  position: relative;
  background: transparent;
  transition: all 0.3s ease;
}

/* Adjust when scrolled */
.luxury-navbar.scrolled .navbar-brand-wrapper {
  top: 0px;
}

.luxury-navbar.scrolled .navbar-brand-wrapper img {
  height: 80px; /* small logo when scrolled */
}

/* Navigation Links */
.luxury-navbar .navbar-nav {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;
  flex-wrap: nowrap;
  
}

.luxury-navbar .nav-item {
  position: relative;
  margin: 0 0.25rem;
}

.luxury-navbar .nav-link {
  color: #ffffff;
  font-size: 0.9rem;
  padding: 1rem 0.75rem; /* keep navigation bar slim always */
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  text-decoration: none;
}

.luxury-navbar .nav-link:hover,
.luxury-navbar .nav-link:focus,
.luxury-navbar .nav-link.active {
  color: var(--gold);
  text-decoration: none;
}

/* Remove underline for language dropdown toggle, keep hover color */
.lang-toggle-link::after {
  display: none !important;
}

/* Active Link Indicator */
.luxury-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.luxury-navbar .nav-link:hover::after,
.luxury-navbar .nav-link:focus::after,
.luxury-navbar .nav-link.active::after {
  width: 1.5rem;
}

/* Mobile Navigation Toggle */
.navbar-toggler {
  border: 1px solid var(--gold);
  padding: 0.5rem;
  margin-left: auto;
  margin-right: 1rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1060;
  display: flex;
  justify-content: flex-end;
  
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(197, 164, 115, 0.25);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(197, 164, 115, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Language Dropdown */
.lang-dropdown .lang-toggle-link { padding: 1rem 0.75rem; display:flex; align-items:center; justify-content: flex-end; }
.lang-dropdown .lang-flag { width:24px; height:18px; object-fit:cover; border:1px solid var(--gold); border-radius:3px; box-shadow:0 0 4px rgba(0,0,0,0.4); }
.lang-dropdown .dropdown-menu { background: rgba(6, 16, 31, 0.85); border:1px solid var(--gold); min-width:170px; padding:.4rem 0; }
.lang-dropdown .dropdown-item { color:#fff; font-weight:500; font-size:.85rem; }
.lang-dropdown .dropdown-item.active, .lang-dropdown .dropdown-item:active { background: var(--gold); color:#121212; }
.lang-dropdown .dropdown-item:hover { background: rgba(197,164,115,0.2); color: var(--gold); }

@media (max-width: 991.98px) {
  .lang-dropdown .dropdown-menu { position: static; float:none; width:100%; border:none; box-shadow:none; background:transparent; padding:0; justify-content:flex-end; text-align:right;  }
  .lang-dropdown .dropdown-item { padding:.65rem 1rem .65rem 0; border-bottom:1px solid rgba(197,164,115,0.15); display:flex; justify-content:flex-end; text-align:right; }
  .lang-dropdown .dropdown-item:last-child { border-bottom:none; }
  .lang-dropdown .lang-toggle-link { padding:.75rem 1rem; }
  .lang-dropdown .lang-flag { border:none; box-shadow:none; }
  .lang-nav { margin-left:auto !important; width:100%; display:flex; justify-content:flex-end; }
  .lang-nav .lang-dropdown { margin-left:auto; }
  .lang-dropdown .dropdown-item .lang-flag { margin-left:.5rem; margin-right:0; }
}

/* Desktop: push language nav to far right */
.lang-nav { margin-left:auto !important; }

/* Scrolled State Adjustments */
.luxury-navbar.scrolled .navbar-brand-wrapper {
  padding: 0rem 0.9rem;
  margin: 0px 1rem -10px 0.8rem;
  border-width: 3px;
  border-radius: 12px;
}

.luxury-navbar.scrolled .navbar-brand-wrapper img {
  height: 80px; /* small logo when scrolled */
}

.luxury-navbar.scrolled .nav-link {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.luxury-navbar.scrolled .nav-link::after {
  bottom: 0.5rem; 
}

/* Mobile Responsive Styles */
@media (max-width: 991.98px) {
  .navbar-brand-wrapper {
    /* keep absolute so menu height stays stable */
    top: 0px;
    left: 12px;
    height: auto;
    padding: 0.8rem 0.9rem;
    margin: 0px 1rem -10px 0.8rem;
    border-width: 3px;
  }
  .luxury-navbar.scrolled .navbar-brand-wrapper img {
  height: 70px; /* small logo when scrolled */
  }
  
  .navbar-brand-wrapper img {
    height: 60px; /* smaller on mobile to avoid overlap */
  }
  
  .luxury-navbar .navbar-collapse {
    background-color: rgba(18, 18, 18, 0.98);
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid var(--gold);
    max-height: 80vh;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  
  .luxury-navbar .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  
  .luxury-navbar .nav-item {
    width: 100%;
    margin: 0;
  }
  
  .luxury-navbar .nav-link {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(197, 164, 115, 0.1);
    text-align: right;
    width: 100%;
  }
  
  .luxury-navbar .nav-link::after {
    display: none;
  }
  
  .luxury-navbar .nav-item:last-child .nav-link {
    border-bottom: none;
  }
  
  .lang-toggle-switch {
    margin-left: 0;
    margin-top: 1rem;
    justify-content: center;
  }
  
  .luxury-navbar .container { padding-left: 0; }
}

/* Medium screens optimization */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .luxury-navbar .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8rem;
  }
}

/* Large screens */
@media (min-width: 1200px) {
  .luxury-navbar .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Desktop fine-tune if needed */
@media (min-width: 1400px) {
  .luxury-navbar .container { padding-left: 200px; }
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container{
    max-width: 920px;
  }
  
}

@media screen and (min-width: 576px) and (max-width: 768px) {
  .container{
    max-width: 920px;
  }
  
}

/* Prevent logo clipping on medium-height landscape tablets (e.g., iPad Mini 1024x768) */
@media (max-height: 820px) and (min-width: 768px) {
  .luxury-navbar {
    min-height: 92px; /* give enough vertical space */
  }
  .navbar-brand-wrapper {
    top: 0; /* remove negative offset that caused clipping */
    padding: 0.6rem 0.8rem;
  }
  .navbar-brand-wrapper img {
    height: 85px; /* slightly smaller so it fits comfortably */
  }
  /* Adjust left padding so nav links don't overlap brand */
  .luxury-navbar .container {
    padding-left: 140px;
  }
}