/* Shared customer navigation. Profile menus and dialogs retain their own
   styles; only the two explicitly targeted logout shadows change below. */
.site-header {
  background: var(--customer-paper, #fdfaf6);
  border-bottom: 1px solid #dfd5cf;
  box-shadow: 0 2px 8px rgba(43, 43, 49, 0.025);
}

.site-header > .logo-container {
  gap: 12px;
}

/* The UCN navbar mark also appears in the cloned mobile drawer.
   A fixed square keeps uploads contained. */
.site-header > .logo-container .header-logo-pair,
.sidebar-logo-container .header-logo-pair {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-header > .logo-container .header-logo-pair .header-emblem,
.sidebar-logo-container .header-logo-pair .header-emblem {
  display: block;
  flex: 0 0 auto;
  width: clamp(34px, 3.5vw, 48px);
  height: clamp(34px, 3.5vw, 48px);
  margin: 0;
  object-fit: contain;
}

.site-header > .main-nav > ul {
  gap: clamp(18px, 2vw, 28px);
}

.site-header > .main-nav .nav-link {
  min-height: 44px;
  padding: 11px 2px;
  color: #676169;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  transition: color 110ms ease;
}

.site-header > .main-nav .nav-link::after {
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 2px;
  background: var(--customer-wine, #6b202b);
  border-radius: 0;
  transform-origin: left;
  transition: opacity 110ms ease, transform 110ms ease;
}

.site-header > .main-nav .nav-link:is(:hover, .active, [aria-current="page"]) {
  color: var(--customer-wine, #6b202b);
}

.site-header > .main-nav .nav-link[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Target the header controls themselves, never the popup nested in the host. */
.site-header .header-right-actions .announcement-bell,
.site-header .header-right-actions .cart-icon-container,
.site-header .header-right-actions > .user-profile:not(.guest-profile-host),
.site-header > .mobile-menu-toggle {
  border: 1px solid #dfd5cf;
  background: var(--customer-paper, #fdfaf6);
  box-shadow: none;
  transition: background-color 110ms ease, border-color 110ms ease;
}

.site-header .header-right-actions .announcement-bell,
.site-header .header-right-actions .cart-icon-container {
  border-radius: 50%;
  color: var(--customer-wine, #6b202b);
}

.site-header .header-right-actions .announcement-bell:hover,
.site-header .header-right-actions .cart-icon-container:hover,
.site-header .header-right-actions > .user-profile:not(.guest-profile-host):hover,
.site-header > .mobile-menu-toggle:hover {
  border-color: #b99a9d;
  background: var(--customer-paper-sink, #f7f2ec);
  box-shadow: none;
  transform: none;
}

/* The cart is a standalone action in the customer header. Keep its generous
   hit area for touch and keyboard users, while removing the circular card
   treatment that belongs to the notification control. */
.site-header .header-right-actions .cart-icon-container {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-header .header-right-actions .cart-icon-container:hover,
.site-header .header-right-actions .cart-icon-container:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.site-header .header-right-actions > .user-profile > .user-initial-badge {
  border: 0;
  background: transparent;
  color: var(--customer-wine, #6b202b);
}

.site-header .guest-sign-in-trigger {
  border-color: #d3c1bc;
  background: var(--customer-paper, #fdfaf6);
  border-radius: 8px;
  box-shadow: none;
}

.site-header .guest-sign-in-trigger:is(:hover, .is-open) {
  border-color: var(--customer-wine, #6b202b);
  background: var(--customer-wine, #6b202b);
  box-shadow: none;
  transform: none;
}

.site-header .guest-sign-in-label {
  font-weight: 700;
  letter-spacing: 0;
}

/* Navbar profile mark: a compact monogram tile that is distinct from the
   circular notification controls while staying in the same paper/maroon
   system. The popup below is intentionally untouched. */
.site-header .header-right-actions > .user-profile:not(.guest-profile-host) {
  position: relative;
  isolation: isolate;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border-color: #d8ccc7;
  background:
    linear-gradient(145deg, var(--customer-paper, #fdfaf6), var(--customer-paper-sink, #f7f2ec));
  box-shadow: inset 0 0 0 3px rgba(107, 32, 43, 0.045);
}

.site-header .header-right-actions > .user-profile:not(.guest-profile-host)::before {
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid rgba(107, 32, 43, 0.16);
  border-radius: 8px;
  content: "";
  pointer-events: none;
}

.site-header .header-right-actions > .user-profile:not(.guest-profile-host) > .user-initial-badge {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--customer-wine, #6b202b);
  color: var(--customer-paper, #fdfaf6);
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.site-header .header-right-actions > .user-profile:not(.guest-profile-host) > svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}

.site-header .header-right-actions .guest-sign-in-mark {
  border-radius: 9px;
}

.site-header .guest-sign-in-trigger .guest-sign-in-kicker {
  display: none;
}

.site-header > .logo-container:focus-visible,
.site-header > .main-nav .nav-link:focus-visible,
.site-header > .mobile-menu-toggle:focus-visible,
.site-header .header-right-actions .announcement-bell:focus-visible,
.site-header .header-right-actions .cart-icon-container:focus-visible,
.site-header .header-right-actions > .user-profile:focus-visible,
.site-header .guest-sign-in-trigger:focus-visible {
  outline: 2px solid var(--customer-wine, #6b202b);
  outline-offset: 4px;
}

/* The existing 900px drawer breakpoint and header height stay in shared CSS. */
@media (min-width: 901px) {
  .site-header {
    padding-inline: max(24px, calc((100% - 1280px) / 2));
    gap: 24px;
  }

  .site-header > .logo-container .logo-text {
    gap: 5px;
  }

  .site-header > .logo-container .logo-title {
    color: var(--customer-wine, #6b202b);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.025em;
    line-height: 1.15;
  }

  .site-header > .logo-container .logo-subtitle {
    color: #676169;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1.4;
  }
}

@media (min-width: 901px) and (max-width: 1150px) {
  .site-header { gap: 16px; padding-inline: 24px; }
  .site-header > .main-nav > ul { gap: 16px; }
  .site-header > .main-nav .nav-link { font-size: 13px; }
  .site-header > .logo-container { gap: 10px; }
  .site-header > .logo-container .logo-title { font-size: 12px; }
  .site-header > .logo-container .logo-subtitle { font-size: 7.5px; }
  .site-header .guest-sign-in-trigger {
    grid-template-columns: 28px minmax(0, 1fr) 8px;
    column-gap: 6px;
    padding-inline: 6px;
  }
  .site-header .guest-sign-in-trigger .guest-sign-in-mark {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .site-header > .logo-container .brand-name-full { display: none; }
  .site-header > .logo-container .brand-name-short { display: inline; }
  .site-header > .logo-container .logo-text {
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
  }
  .site-header > .logo-container .logo-title,
  .site-header > .logo-container .logo-subtitle {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .site-header > .logo-container .logo-title .brand-name-short::after {
    content: "-";
  }
}

@media (max-width: 900px) {
  .site-header > .logo-container { gap: 8px; }
  .site-header > .logo-container .header-logo-pair .header-emblem {
    width: 38px;
    height: 38px;
  }
  .sidebar-logo-container .header-logo-pair .header-emblem {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 600px) {
  .site-header > .logo-container .header-logo-pair .header-emblem {
    width: clamp(25px, 8vw, 32px);
    height: clamp(25px, 8vw, 32px);
  }
}

@media (max-width: 430px) {
  .site-header { gap: 6px; }
  .site-header > .logo-container { gap: 4px; }
  .site-header > .logo-container .header-logo-pair .header-emblem {
    width: clamp(25px, 7.5vw, 30px);
    height: clamp(25px, 7.5vw, 30px);
  }
  .site-header > .logo-container .logo-text {
    font-size: clamp(11px, 3.4vw, 14px);
  }
}

@media (max-width: 340px) {
  .site-header .header-right-actions > .user-profile:not(.guest-profile-host) {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .site-header .guest-sign-in-trigger {
    width: 96px;
    min-width: 96px;
  }
}

.mobile-sidebar {
  background: var(--customer-paper, #fdfaf6);
  border-right: 1px solid #dfd5cf;
}

.mobile-sidebar > .sidebar-header { border-bottom-color: #dfd5cf; }

/* Keep the appointment action below the scrollable links, above the iPhone
   home indicator (the drawer already supplies the bottom safe-area inset). */
.mobile-sidebar > .sidebar-nav { min-height: 0; }

.mobile-sidebar > .sidebar-footer-actions {
  flex-shrink: 0;
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid #dfd5cf;
}

.mobile-sidebar .sidebar-appointment-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--customer-wine, #6b202b);
  border-radius: 8px;
  background: var(--customer-wine, #6b202b);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.mobile-sidebar .sidebar-appointment-link:hover {
  background: var(--customer-wine-dark, #521923);
  border-color: var(--customer-wine-dark, #521923);
}

.mobile-sidebar .sidebar-appointment-link:focus-visible {
  outline: 2px solid var(--customer-wine, #6b202b);
  outline-offset: 3px;
}

.mobile-sidebar .sidebar-close-btn,
.site-header > .mobile-menu-toggle {
  border-radius: 8px;
}

.mobile-sidebar .sidebar-close-btn {
  border-color: #dfd5cf;
  background: var(--customer-paper, #fdfaf6);
}

.mobile-sidebar .sidebar-close-btn:hover {
  border-color: #b99a9d;
  background: var(--customer-paper-sink, #f7f2ec);
}

.mobile-sidebar > .sidebar-nav .nav-link {
  border: 1px solid transparent;
  border-radius: 8px;
  color: #676169;
  font-weight: 600;
  letter-spacing: 0;
  transition: color 110ms ease, background-color 110ms ease, border-color 110ms ease;
}

.mobile-sidebar > .sidebar-nav .nav-link:is(:hover, .active, [aria-current="page"]) {
  border-color: #e7ded9;
  background: var(--customer-paper-sink, #f7f2ec);
  color: var(--customer-wine, #6b202b);
}

.mobile-sidebar .nav-link:focus-visible,
.mobile-sidebar .sidebar-close-btn:focus-visible {
  outline: 2px solid var(--customer-wine, #6b202b);
  outline-offset: 2px;
}

.mobile-sidebar .sidebar-close-btn {
  transition: background-color 110ms ease, border-color 110ms ease, transform 110ms ease;
}

/* Remove the red bloom only; retain logout fills, sizing and focus outlines. */
.profile-popup #logoutBtn.popup-logout,
#laravelLogoutModal #confirmLogoutBtn {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header > .main-nav .nav-link,
  .site-header > .main-nav .nav-link::after,
  .site-header > .mobile-menu-toggle,
  .site-header .header-right-actions .announcement-bell,
  .site-header .header-right-actions .cart-icon-container,
  .site-header .header-right-actions > .user-profile,
  .site-header .guest-sign-in-trigger,
  .mobile-sidebar .nav-link,
  .mobile-sidebar .sidebar-close-btn {
    transition: none;
  }
}

/* Keep the compact mobile wordmark comfortably readable without crowding
   notification/profile controls. Drawer branding has its own breathing room. */
@media (max-width: 900px) {
  .site-header > .logo-container .logo-text {
    font-size: clamp(14px, 4.05vw, 18px);
  }
  .sidebar-logo-container {
    gap: 14px;
  }
  .sidebar-logo-container .header-logo-pair {
    flex: 0 0 auto;
    margin-right: 0;
  }
  .sidebar-logo-container .logo-text {
    font-size: clamp(15px, 4.1vw, 18px);
  }
}

/* Quick drawer motion: transform for the panel, opacity for the scrim. */
@media (max-width: 1100px) {
  .mobile-sidebar { transition: transform 140ms cubic-bezier(.2,.8,.2,1) !important; }
  .sidebar-backdrop { transition: opacity 120ms ease-out, visibility 120ms ease-out !important; }
  .mobile-menu-toggle span { transition: transform 120ms ease-out, opacity 100ms ease-out !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-sidebar, .sidebar-backdrop, .mobile-menu-toggle span { transition: none !important; }
}