/* ============================================================
   Desktop Hamburger Override
   Added: 2026-05-18
   Last updated: 2026-05-18 (preserve auth/sign-out + email)

   Purpose
     - Show the hamburger button on desktop in addition to mobile.
     - Hide inline top-of-page navigation LINKS only
       (Home / Pricing / Docs / Portfolio / "Back to Home").
     - Keep the sign-in / sign-out + user email controls visible
       (#auth-nav-area on index, .nav-user on account/portfolio).
     - Footer navigation (#footer-nav-links, .site-footer) is
       intentionally left untouched on desktop.

   How to revert (one-liner)
     - Easiest: delete this file on the VPS:
         rm /opt/pricethat-watch/public/desktop-hamburger.css
       The <link> tags in each HTML page become harmless 404s,
       and the original styling reasserts itself.
     - Optional cleanup: also remove the injected <link> tag from
       each HTML file:
         find /opt/pricethat-watch/public -name '*.html' -exec \
           sed -i 's|<link rel="stylesheet" href="/desktop-hamburger.css">||g' {} +
   ============================================================ */

/* 1) Always show the hamburger button (was mobile-only). */
.nav-hamburger {
  display: flex !important;
  align-items: center;
}

/* 2) Hide nav LINKS only — do NOT touch #auth-nav-area or .nav-user. */
.nav .nav-links,
.nav > a[href="/"],
.nav > a[href="./"] {
  display: none !important;
}

/* 3) When .nav only contains the hamburger (docs/pricing/privacy/
      status/tos — the "Back to Home" anchor is now hidden and there
      is no .nav-user inside), collapse the bar so it leaves no gap. */
.nav:has(.nav-hamburger):not(:has(.nav-user)) {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}

/* 4) When .nav has neither the hamburger nor .nav-user (support.html —
      only contained "Back to Home"), hide it entirely. */
.nav:not(:has(.nav-hamburger)):not(:has(.nav-user)) {
  display: none !important;
}

/* 5) Pull .nav-user (email + sign-out) out of the in-flow top nav and
      fix it to the top-right of the viewport, matching the home page's
      #auth-nav-area position exactly. */
.nav-user {
  position: fixed !important;
  top: 14px !important;
  right: 16px !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  align-self: auto !important;
}

/* 5b) The .nav wrapper is now visually empty on account/portfolio
       (links hidden, user block fixed). Collapse it so it leaves no
       gap above the page heading. */
.nav:has(.nav-user) {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

/* 5c) Mobile: tighten the offset to match index.html's mobile override
       (#auth-nav-area { top:10px; right:10px; gap:6px }). */
@media (max-width: 600px) {
  .nav-user {
    top: 10px !important;
    right: 10px !important;
    gap: 6px !important;
  }
}

/* 6) Restyle .nav-signout to match the home page #auth-nav-btn pill
      EXACTLY — including home's CSS-source-order quirk where the
      light-mode background rule sits after the dark-mode @media block
      in index.html, so light-mode `rgba(60,64,67,0.08)` actually wins
      in both modes. We mirror that here: keep the light-mode bg in
      both modes, only swap color + border in dark mode.
      Prefix `html body` to boost specificity to (0,1,3) so we beat any
      inline `button.nav-signout { ... !important }` rules (0,1,1) and
      glass.css `.nav-signout { ... !important }` rules (0,1,0). */
html body button.nav-signout,
html body .nav-signout {
  background: rgba(60, 64, 67, 0.08) !important;
  border: 1px solid rgba(60, 64, 67, 0.2) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #3c4043 !important;
  cursor: pointer;
  white-space: nowrap !important;
  transition: background 0.15s !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}
html body button.nav-signout:hover,
html body .nav-signout:hover {
  background: rgba(60, 64, 67, 0.14) !important;
  border-color: rgba(60, 64, 67, 0.2) !important;
}

@media (prefers-color-scheme: dark) {
  html body button.nav-signout,
  html body .nav-signout {
    color: #f5f9ff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
}

@media (max-width: 600px) {
  html body button.nav-signout,
  html body .nav-signout {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}

/* 7) Match home's #auth-user-info styling for the email shown next to
      the sign-out button. */
.nav-email {
  font-size: 13px !important;
  color: #5f6368 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (prefers-color-scheme: dark) {
  .nav-email {
    color: #9aa0a6 !important;
  }
}
@media (max-width: 600px) {
  .nav-email {
    max-width: calc(100vw - 130px) !important;
    font-size: 11px !important;
  }
}