/* Whitehaven Dental: "Emergency" dropdown in the main menu (all pages) */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-caret { font-size: 10px; margin-left: 6px; opacity: 0.8; transition: transform 0.2s ease; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 250px; padding: 8px; border-radius: 14px; background: #ffffff;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.25); opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 100000;
}
.nav-dropdown-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* hover bridge */
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; color: #1f2937; font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav-dropdown-menu a i { width: 16px; text-align: center; color: #a8871f; font-size: 13px; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] { background: #FDFBF7; color: #1E4D8C; }
@media (max-width: 768px) {
  .nav-dropdown { flex-direction: column; align-items: center; }
  .nav-caret { display: none; }
  .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 4px 0 8px; background: transparent; box-shadow: none; border-radius: 0;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a { color: rgba(255,255,255,0.85); padding: 10px 0; font-size: 14px; border-radius: 0; }
  .nav-dropdown-menu a i { color: #FBBC04; }
  .nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] { background: transparent; color: #FBBC04; }
}

/* Keep the fixed header on its own layer so scrolling never repaints it */
.header { will-change: transform; transform: translateZ(0); }