/* =========================================================
   Rusty Rhinos - shared site nav styles
   Paired with /shared/nav.js which injects the nav markup.
   ========================================================= */

.site-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--blog-card-bg);
  border-bottom: 1px solid var(--blog-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
}

/* ---- LEFT: logo + event name ---- */

.site-nav-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  /* Establishes the positioning context for the event switcher
     dropdown which is absolutely positioned to hang below it. */
  position: relative;
}

.site-nav-home {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--blog-text);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.site-nav-logo {
  font-family: var(--blog-font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: var(--blog-text);
  flex-shrink: 0;
}

.site-nav-sep {
  color: var(--blog-text-muted);
  opacity: 0.5;
  font-weight: 300;
  flex-shrink: 0;
}

.site-nav-event {
  font-family: var(--blog-font-heading);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--blog-accent);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- EVENT SWITCHER ----
   Clickable breadcrumb wrapping the event name + a chevron. Styled as
   a near-invisible button so it reads as text, with a subtle hover
   backdrop to hint it's interactive. The dropdown menu below lists
   every expedition so readers can jump between sites. */

.site-nav-event-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0.25rem 0.45rem;
  margin: -0.25rem -0.45rem;
  border-radius: 5px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-width: 0;
  transition: background 0.2s ease;
}

.site-nav-event-switcher:hover,
.site-nav-event-switcher[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .site-nav-event-switcher:hover,
[data-theme="dark"] .site-nav-event-switcher[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.07);
}

.site-nav-chevron {
  flex-shrink: 0;
  color: var(--blog-text-muted);
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.site-nav-event-switcher[aria-expanded="true"] .site-nav-chevron {
  transform: rotate(180deg);
}

/* ---- EVENT SWITCHER DROPDOWN ----
   Absolute-positioned panel hanging from .site-nav-left (which is the
   positioning context). Uses the blog card background + blur so it
   feels consistent with the rest of the chrome. Each row carries its
   event's accent colour via --event-accent set inline by nav.js. */

.site-nav-event-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 200;
  min-width: 260px;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-sm, 10px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .site-nav-event-menu {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}

.site-nav-event-menu[hidden] {
  display: none;
}

.site-nav-event-menu-label {
  font-family: var(--blog-font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--blog-text-muted);
  padding: 0.35rem 0.6rem 0.5rem;
}

.site-nav-event-menu-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--blog-text);
  font-family: var(--blog-font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: background 0.15s ease;
}

.site-nav-event-menu-item:hover,
.site-nav-event-menu-item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
}

.site-nav-event-menu-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

[data-theme="dark"] .site-nav-event-menu-item:hover,
[data-theme="dark"] .site-nav-event-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.site-nav-event-menu-item.is-current {
  background: rgba(0, 0, 0, 0.05);
  cursor: default;
}

[data-theme="dark"] .site-nav-event-menu-item.is-current {
  background: rgba(255, 255, 255, 0.06);
}

.site-nav-event-menu-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--event-accent, var(--blog-accent));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .site-nav-event-menu-dot {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.site-nav-event-menu-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--event-accent, var(--blog-text));
}

.site-nav-event-menu-current {
  margin-left: auto;
  font-size: 0.95rem;
  color: var(--event-accent, var(--blog-accent));
  flex-shrink: 0;
}

/* "All expeditions" link back to the portal. Visually separated with
   a top rule and uses a neutral outlined dot so it doesn't read as
   another expedition. */
.site-nav-event-menu-portal {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.6rem 0.55rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--blog-border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--blog-text-muted);
  font-family: var(--blog-font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav-event-menu-portal:hover,
.site-nav-event-menu-portal:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--blog-text);
}

.site-nav-event-menu-portal:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

[data-theme="dark"] .site-nav-event-menu-portal:hover,
[data-theme="dark"] .site-nav-event-menu-portal:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.site-nav-event-menu-dot-portal {
  background: transparent;
  border: 1.5px solid var(--blog-text-muted);
  box-shadow: none;
}

/* ---- RIGHT: social icons + theme toggle ---- */

.site-nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.site-nav-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-nav-social a {
  color: var(--blog-text);
  opacity: 0.65;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.site-nav-social a:hover { opacity: 1; }

/* ---- THEME TOGGLE ---- */

.site-nav-theme-toggle {
  background: none;
  border: none;
  color: var(--blog-text);
  cursor: pointer;
  opacity: 0.65;
  padding: 0;
  padding-left: 0.75rem;
  margin-left: 0.25rem;
  /* Separator between social icons and the theme toggle. Uses a
     deliberately stronger alpha than --blog-border so it stays visible
     in both light and dark modes. Dark mode gets its own override below
     since white-on-dark needs more opacity than black-on-light to read
     at the same visual weight. */
  border-left: 1px solid rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease, border-color 0.3s ease;
}

[data-theme="dark"] .site-nav-theme-toggle {
  border-left-color: rgba(240, 228, 203, 0.3);
}

.site-nav-theme-toggle:hover { opacity: 1; }

/* Show moon in light mode (click to go dark), sun in dark mode (click to go light) */
.site-nav-theme-toggle .icon-sun  { display: none; }
.site-nav-theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .site-nav-theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .site-nav-theme-toggle .icon-moon { display: none; }

/* ---- RESPONSIVE ---- */

@media (max-width: 600px) {
  .site-nav-inner {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
  .site-nav-logo { font-size: 0.85rem; letter-spacing: 1.5px; }
  .site-nav-event { font-size: 0.75rem; }
  /* Hide the social icons on mobile. Five icons + theme toggle + event
     switcher left no room for the "Rusty Rhinos" logo on narrow phones.
     Social links remain accessible from the page footer and each event's
     home page, which is their more natural home anyway. */
  .site-nav-social { display: none; }
  .site-nav-theme-toggle svg { width: 16px; height: 16px; }
  /* With social icons gone, the theme toggle no longer needs its
     left-side separator bar. */
  .site-nav-theme-toggle {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
  .site-nav-event-switcher { gap: 0.3rem; padding: 0.2rem 0.35rem; margin: -0.2rem -0.35rem; }
  .site-nav-event-menu {
    min-width: 240px;
    max-width: calc(100vw - 1.5rem);
  }
  .site-nav-event-menu-item { font-size: 0.74rem; padding: 0.5rem 0.55rem; }
}

/* Very narrow screens - drop the breadcrumb separator to save space.
   The event name stays visible (truncated via ellipsis if needed) so
   the switcher button remains a meaningful tap target. */
@media (max-width: 420px) {
  .site-nav-sep { display: none; }
  .site-nav-event { font-size: 0.7rem; letter-spacing: 0.8px; }
}

/* Some mobile browsers (Brave, iOS Safari) auto-detect digit sequences
   like "360 2026" as phone numbers and wrap them in <a href="tel:...">
   links, even when the format-detection meta tag is present.  Override
   the injected link so it is visually indistinguishable from surrounding
   text and cannot be tapped as a dial shortcut — the text is not a
   phone number.  Intentional tel: links should be added with an explicit
   class (e.g. .tel-link) to opt back in to normal link styling. */
a[href^="tel:"] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
  cursor: text !important;
}