/* ==================================================
  Header & Navigation
================================================== */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; transition: var(--transition); padding: 1rem 0; }
.site-header .container { display: flex; align-items: center; gap: var(--gap); min-height: 140px; padding: 0; }

.nav { margin-left: auto; display: flex; gap: 1.2rem; align-items: center; }
.nav a { color: var(--text); text-decoration: none; padding: 0.5rem 0.8rem; font-weight: 500; position: relative; transition: var(--transition); }
.nav a:hover { color: var(--gold); }
.nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background: var(--gold); transition: var(--transition); transform: translateX(-50%); }
.nav a:hover::after { width: calc(100% - 1.6rem); }
.nav a.active { font-weight: 700; background: linear-gradient(to right, var(--gold-dark), var(--gold)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(198, 163, 85, 0.35); }
.nav a.active::after { width: calc(100% - 1.6rem); }

.brand { font-weight: 700; text-decoration: none; color: var(--gold-dark); font-size: 1.6rem; display: inline-flex; align-items: center; transition: var(--transition); }
.brand:hover { background: linear-gradient(to right, var(--gold-dark), var(--gold)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-img { height: 120px; margin-right: 18px; display: inline-block; transition: var(--transition); filter: drop-shadow(var(--shadow-sm)); }
.brand:hover .logo-img { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(198, 163, 85, 0.35)); }
.brand.active .logo-img { transform: scale(1.07); filter: drop-shadow(0 0 12px rgba(198, 163, 85, 0.45)); }

/* Responsive Header */
@media (max-width: 700px) {
  .site-header { padding: 0.5rem 0; }
  .site-header .container { min-height: 100px; }
  .nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); padding: 1rem; border-top: 1px solid var(--border); justify-content: center; margin: 0; box-shadow: var(--shadow-md); }
  .nav a { padding: 0.5rem; }
  .nav a::after { display: none; }
  .logo-img { height: 90px; margin-right: 12px; }
  .brand { font-size: 1.2rem; }
}