/* The site header (resources/views/partials/site-header.php) — used by every public page.
   Everything is scoped under .site-header, so it can be dropped into any page without clashing. */
.site-header {
  --sh-primary: #1d4ed8;
  --sh-border: #e2e8f0;
  --sh-text: #0f172a;
  --sh-muted: #64748b;
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.5rem; padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sh-border);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  font-family: inherit;
}
.site-header * { box-sizing: border-box; }
.site-header a { text-decoration: none; }

.site-header .sh-brand {
  display: flex; align-items: center; gap: 0.75rem;
  min-width: 0; color: var(--sh-text);
  flex: 1 1 auto;
}
.site-header .sh-brand img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.site-header .sh-title {
  display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--sh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.site-header .sh-title span {
  background: linear-gradient(135deg, #1d4ed8, #0284c7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.site-header .sh-tagline {
  display: block; font-size: 0.78rem; font-weight: 600; color: var(--sh-muted); margin-top: 0.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.site-header .sh-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.site-header .sh-links { display: flex; align-items: center; gap: 0.5rem; }

.site-header .sh-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 0.85rem;
  border-radius: 999px; border: 1px solid var(--sh-border); background: #ffffff; color: #334155;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.site-header .sh-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.site-header .sh-pill:hover { filter: brightness(0.97); }
.site-header .sh-pill:focus-visible, .site-header .sh-menu:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
.site-header .sh-pill[aria-current="page"] { box-shadow: inset 0 0 0 1.5px currentColor; }
.site-header .sh-pill.frame { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.site-header .sh-pill.ref { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.site-header .sh-pill.committee { background: #faf5ff; color: #6d28d9; border-color: #e9d5ff; }
/* Same colours as the Photo Frame page: frame blue, leaderboard green, representatives white, committee purple */
.site-header .sh-pill.fb { background: #1877F2; color: #ffffff; border-color: #1877F2; width: 38px; padding: 0; justify-content: center; }
.site-header .sh-pill.fb .sh-label { display: none; }

.site-header .sh-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 1rem; border-radius: 12px;
  font-size: 0.85rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; flex-shrink: 0;
}
.site-header .sh-btn svg { width: 16px; height: 16px; }
.site-header .sh-btn.login { background: #ffffff; color: #0f172a; border-color: var(--sh-border); }
.site-header .sh-btn.cta { background: linear-gradient(135deg, #D6A84F, #B8860B); color: #ffffff; box-shadow: 0 4px 14px rgba(214, 168, 79, 0.35); }
.site-header .sh-btn:hover { filter: brightness(0.97); }

.site-header .sh-menu {
  display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--sh-border);
  background: #ffffff; color: #0f172a; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.site-header .sh-menu svg { width: 22px; height: 22px; }
.site-header .sh-menu .sh-close { display: none; }
.site-header .sh-menu[aria-expanded="true"] { background: #eff6ff; border-color: #bfdbfe; color: var(--sh-primary); }
.site-header .sh-menu[aria-expanded="true"] .sh-open { display: none; }
.site-header .sh-menu[aria-expanded="true"] .sh-close { display: block; }

/* Backdrop overlay when mobile menu is open */
.site-header .sh-backdrop {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 95;
  opacity: 0; transition: opacity 0.2s ease;
}
.site-header.menu-open .sh-backdrop {
  display: block; opacity: 1;
}

/* Tablets & phones: links fold into a dropdown under the header (same as the Photo Frame page) */
@media (max-width: 1180px) {
  .site-header .sh-menu { display: inline-flex; }
  .site-header .sh-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0.5rem; padding: 0.75rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); background: #ffffff;
    border-bottom: 1px solid var(--sh-border); box-shadow: 0 16px 30px rgba(15, 23, 42, 0.15);
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    z-index: 101;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  .site-header .sh-links::-webkit-scrollbar {
    width: 5px;
  }
  .site-header .sh-links::-webkit-scrollbar-track {
    background: transparent;
  }
  .site-header .sh-links::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
  }
  .site-header .sh-links.open { display: flex; }
  .site-header .sh-pill, .site-header .sh-pill.fb {
    width: 100%; height: 48px; padding: 0 1rem; border-radius: 12px; justify-content: flex-start;
    font-size: 0.95rem; flex-shrink: 0;
  }
  .site-header .sh-pill.fb .sh-label { display: inline; }
}

/* Prevent body scrolling when mobile menu is open */
html.sh-menu-open,
body.sh-menu-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Intermediate tablet / mobile view */
@media (max-width: 768px) {
  .site-header .sh-tagline, .site-header .sh-btn { display: none; }
  .site-header .sh-links.open .sh-phone-only { display: inline-flex; }
  .site-header .sh-pill.cta { background: linear-gradient(135deg, #D6A84F, #B8860B); color: #ffffff; border-color: transparent; font-weight: 700; }
}

.site-header .sh-phone-only { display: none; }
.site-header .sh-brand > span { min-width: 0; }

@media (max-width: 560px) {
  .site-header { padding-left: 0.85rem; padding-right: 0.85rem; gap: 0.5rem; }
  .site-header .sh-brand { gap: 0.5rem; }
  .site-header .sh-tagline, .site-header .sh-btn { display: none; }
  .site-header .sh-title {
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: normal;
  }
  .site-header .sh-title span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
  }
  .site-header .sh-brand img { width: 36px; height: 36px; }
  .site-header .sh-menu { width: 42px; height: 42px; }
}

/* Page extras that sit in the header (Photo Frame page: help button, language switch) */
.site-header .sh-pill.help { background: #fffbeb; color: #b45309; border-color: #fcd34d; }
.site-header .sh-pill.bulk { background: #f8fafc; }
@media (max-width: 560px) {
  .site-header .sh-extra-hide-phone { display: none; }
}