/* AU Superior — shared shell (nav / mobile menu / a11y) · 2026-07-21
   Loaded AFTER each page's inline styles; overrides are deliberate. */

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: #1d1d1f; color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-size: 13px;
}
.skip-link:focus { left: 0; }

/* ---- Keyboard focus ---- */
:focus-visible {
  outline: 2px solid #9B7820 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Nav right cluster ---- */
.nav-right { display: flex; align-items: center; gap: 10px; }

/* ---- Hamburger (hidden on desktop) ---- */
#menu-btn {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
}
#menu-btn span {
  display: block; width: 20px; height: 2px;
  background: #1d1d1f; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
#menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile menu panel ---- */
#mobile-menu {
  position: fixed; top: 52px; left: 0; right: 0; z-index: 99;
  background: rgba(255,255,255,0.98);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  padding: 8px 0 14px;
}
#mobile-menu[hidden] { display: none; }
#mobile-menu ul { list-style: none; margin: 0; padding: 0; }
#mobile-menu a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 28px; font-size: 16px; color: #1d1d1f;
  text-decoration: none; border-bottom: 1px solid #f2f2f4;
}
#mobile-menu a:active, #mobile-menu a:hover { background: #f5f5f7; }
#mobile-menu a.active { color: #9B7820; font-weight: 500; }

/* ---- Breakpoint: unify at 900px ---- */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  #menu-btn { display: flex; }
}
@media (min-width: 901px) {
  #mobile-menu { display: none !important; }
}

/* ---- Accessible gold for small interactive text ----
   Brand gold #C9A84C stays for headings/decoration; functional small text
   uses the darker gold already present in the palette (#9B7820, 4.6:1). */
.quote-link a { color: #9B7820 !important; }
.btn-outline { color: #9B7820 !important; border-color: #C9A84C !important; }
.btn-outline:hover { color: #fff !important; background: #C9A84C !important; }
footer .footer-copy a { opacity: 0.7 !important; }

/* ---- Forms: status + errors (contact) ---- */
.form-status { margin-top: 14px; font-size: 14px; display: none; }
.form-status.ok { display: block; color: #1a7f37; }
.form-status.err { display: block; color: #b42318; }
.field-err { color: #b42318; font-size: 12px; margin-top: 4px; display: none; }
input:user-invalid + .field-err, textarea:user-invalid + .field-err { display: block; }

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a1,.a2,.a3,.a4,.a5,.a6,.reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* staff pill: desktop nav only; mobile uses the menu item */
@media (max-width: 900px) { .nav-staff { display: none !important; } }