nav {
	position: fixed;
	top: 0;
	left: 0;	
	right: 0;
	z-index: 50;
	background-color: rgba(26, 26, 46, 0.95);
	transition: all 0.3s ease-in-out;
	width: 100%;
}
div.navmain{
	max-width: 80rem;     /* 1280px */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;   /* 16px */
	padding-right: 1rem;  /* 16px */
}
div.navinner{
	display: flex;
	align-items: center;      /* items-center */
	justify-content: space-between; /* justify-between */
	height: 5rem;             /* h-20 (80px) */
}
a.navlogo{
	display: flex;          /* flex */
	align-items: center;    /* items-center */
	gap: 0.75rem;           /* gap-3 (12px) */
	text-decoration: none;  /* standard link reset */
}
div.gold-icon-container {
  /* p-2 */
  padding: 0.5rem; /* 8px */

  /* bg-[#d4af37]/10 (10% opacity) */
  background-color: rgba(212, 175, 55, 0.1);

  /* rounded-lg */
  border-radius: 0.5rem; /* 8px */

  /* border border-[#d4af37]/30 (30% opacity) */
  border: 1px solid rgba(212, 175, 55, 0.3);

  /* Helper to keep the SVG centered */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gold-icon {
  /* w-6 h-6 */
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */

  /* text-[#d4af37] */
  color: #d4af37;
}

.brand-container {
  display: none; /* hidden */
}

/* sm:block (at 640px and up) */
@media (min-width: 880px) {
  .brand-container {
    display: block;
  }
}

span.brand-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;    /* font-bold */
  color: #f5e6d3;     /* text-[#f5e6d3] */
}

span.brand-subtitle {
  display: block;      /* block */
  font-size: 0.75rem;  /* text-xs */
  color: #d4af37;      /* text-[#d4af37] */
  margin-top: -0.25rem; /* -mt-1 */
  letter-spacing: 0.1em; /* tracking-widest */
}

/* Mobile: hidden by default */
.nav-group {
  display: none;
}

/* Tablet/Desktop: md:flex (at 768px and up) */
@media (min-width: 768px) {
  .nav-group {
    display: flex;
    align-items: center; /* items-center */
    gap: 0.25rem;        /* gap-1 (4px) */
  }
}


.nav-button {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem; /* gap-2 */
  height: 1.25rem; /* h-9 */
  padding: 0.25rem 0.25rem; /* py-2 px-4 */
  
  /* Typography */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  white-space: nowrap;
  text-decoration: none;
  
  /* Visuals */
  border-radius: 0.375rem; /* rounded-md */
  border: none;
  cursor: pointer;
  /* transition: all 0.2s ease; */
  /* Animation: transition-colors */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-button:hover {
  color: #f5e6d3; /* hover:text-[#f5e6d3] */
  background-color: rgba(74, 25, 66, 0.3); /* Deep Purple at 30% */
}

/* Accessibility */
.nav-button:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

/* SVG scaling (Targeting the icon inside) */
.nav-button svg {
  width: 1rem; /* w-4 (1rem = 16px) */
  height: 1rem; /* h-4 (1rem = 16px) */  
  flex-shrink: 0;
  margin-right: 0.5rem; /* mr-2 (0.5rem = 8px) */
  /* Ensure the icon scales correctly within its box */
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}

.nav-active{
  /* Initial Colors (Gold Theme) */
  color: #d4af37;
  background-color: rgba(212, 175, 55, 0.1);
}
.nav-secondary { 
  /* Initial Colors (Gold Theme) */
  color: rgba(245, 230, 211, 0.7);
  background-color: transparent;
}

.nav-bar {
  /* flex items-center */
  display: flex;
  align-items: center;

  /* gap-3 */
  gap: 0.75rem; /* 12px */

  /* px-4 py-3 */
  padding: 0.75rem 1rem; /* 12px top/bottom, 16px left/right */

  /* rounded-lg */
  border-radius: 0.5rem; /* 8px */
 
  /* Smooth transition for hover effects */
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

/* hover:bg-[#4a1942]/30 */
/* hover:text-[#f5e6d3] */
.nav-bar:hover {
  background-color: rgba(74, 25, 66, 0.3); /* 30% opacity */
  color: #f5e6d3; /* Full opacity on hover */
}

.nav-bar svg{
    /* w-5 h-5 */
    width: 1.25rem;  /* 20px */
    height: 1.25rem; /* 20px */
    
    /* Ensures the SVG behaves like an icon */
    display: inline-block;
    vertical-align: middle;
    
    /* Optional: ensures icon inherits text color */
    stroke: currentColor;
}


.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Sizing: h-9 w-9 */
  height: 2.25rem;
  width: 2.25rem;
  
  /* Visuals: rounded-md text-[#f5e6d3] */
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  color: #f5e6d3;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 2. Responsive Logic: md:hidden */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
}

/* 3. Hover States (Using CSS variables for "accent") */
.menu-toggle:hover {
  background-color: var(--accent, #4a1942); /* Fallback to your brand purple */
  color: var(--accent-foreground, #ffffff);
}

/* 4. Icon Scaling (w-6 h-6) */
.menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
}



#vertical-menu {
  display: none;
}
#site-navigation.toggled #vertical-menu {
  display: block;
}

.burger-menu {
  /* bg-[#1a1a2e]/95 */
    /* background-color: rgba(26, 26, 46, 0.90);  */
  
  /* backdrop-blur-lg */
  /* backdrop-filter: blur(16px); */
  /* -webkit-backdrop-filter: blur(16px); Safari support */
  
  /* border-b border-[#4a1942]/30 */
  border-bottom: 1px solid rgba(74, 25, 66, 0.3);
  
  /* style="opacity: 1; height: auto;" */
  opacity: 1;
  height: auto;
  width: 100%;
}

.menu-container {
  /* px-4 py-4 */
  padding: 1rem; 
  
  /* space-y-2 (Vertical spacing between children) */
  display: flex;
  flex-direction: column;
  gap: 0.25rem; 
}

/* md:hidden (Hide the menu on screens larger than 768px) */
@media (min-width: 768px) {
  .burger-menu,
  #vertical-menu,
  #site-navigation.toggled #vertical-menu {
    display: none;
  }
}



/* Initially hide the X icon */
.icon-close {
    display: none;
}

/* When menu is open (.toggled class added to parent) */
#site-navigation.toggled .icon-burger {
    display: none;
}

#site-navigation.toggled .icon-close {
    display: block;
}