/* Adapted from the authorized FreePair 20260920 LocalSiteHeader handoff.
   NACH supplies canonical links/branding; result entry remains unavailable. */
.site-header.top-line { display: block; flex: 0 0 auto; background: #131A21; color: #F8FAFC; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.site-header .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.site-header .identity { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; min-width: 0; }
.site-header .organizer { width: 100px; flex-shrink: 0; text-align: center; }
.site-header .organizer a { display: block; color: #B9C4CE; text-decoration: none; }
.site-header .organizer a[href]:hover { text-decoration: underline; }
.site-header .organizer-name, .site-header .event-details { margin-top: 6px; font-size: .75rem; line-height: 1.35; color: #B9C4CE; overflow-wrap: anywhere; }
.site-header .event-heading { min-width: 0; text-align: center; }
.site-header #eventName { margin: 0; text-align: center; font-size: clamp(1.7rem, 3.4vw, 3.4rem); line-height: 1.08; color: #fff; overflow-wrap: anywhere; white-space: normal; }
.site-header #eventSubtitle { font-size: .75rem; white-space: normal; overflow-wrap: anywhere; }
.site-header .qr-links { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
.site-header .qr-links:empty { display: none; }
.site-header .qr-links figure { margin: 0; width: 100px; text-align: center; }
.site-header .qr-links img { width: 100px; height: 100px; border-radius: 8px; background: #fff; cursor: zoom-in; }
.site-header figcaption { font-size: .72rem; margin-top: 4px; color: #B9C4CE; }
.site-header figcaption a { color: inherit; text-decoration: none; }
.site-header figcaption a:hover { text-decoration: underline; }
.site-header .mode-panel { display: grid; grid-template-columns: minmax(0, 240px) 100px; gap: 0 10px; align-items: center; width: 350px; max-width: 100%; justify-self: end; }
.site-header .powered-by { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #B9C4CE; font-size: .68rem; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.site-header .powered-by:hover { text-decoration: underline; }
.site-header .powered-by img { width: 36px; height: 36px; padding: 3px; border-radius: 6px; background: #fff; }
.site-header .logo-card { width: 100px; height: 100px; display: grid; place-items: center; border-radius: 12px; border: 1px solid #415260; background: #18232C; color: #B9C4CE; overflow: hidden; text-align: center; font-size: .78rem; line-height: 1.1; }
.site-header img { width: 100%; height: 100%; object-fit: contain; }
.site-header .mode-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; padding: 4px; border: 1px solid #8294A3; border-radius: 999px; background: #0B1218; }
.site-header .mode-thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2); background: #E8EEF4; border-radius: 999px; }
.site-header .mode-switch button { min-width: 0; min-height: 48px; margin: 0; padding: 6px; border: 0; border-radius: 999px; font: 700 .82rem system-ui, sans-serif; color: #D3DEE7; background: transparent; cursor: pointer; touch-action: manipulation; }
.site-header .mode-switch button[aria-checked="true"] { color: #101820; }
.site-header .mode-switch button:disabled { opacity: .55; cursor: not-allowed; }
.site-header .mode-switch button:focus-visible, .site-header a:focus-visible, .site-header .qr-preview-button:focus-visible { outline: 3px solid #69BBFF; outline-offset: 3px; }
.site-header .mode-help { grid-column: 1; text-align: center; color: #B9C4CE; font-size: .85rem; margin: 6px 0 0; }
@media (max-width: 1100px) {
    .site-header .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    .site-header .event-heading { grid-column: 1 / -1; grid-row: 1; }
    .site-header .identity { grid-column: 1; grid-row: 2; }
    .site-header .mode-panel { grid-column: 2; grid-row: 2; }
}
@media (max-width: 600px) {
    .site-header .hero { grid-template-columns: minmax(0, 1fr) auto minmax(0, auto) auto minmax(0, 1fr); gap: 12px 8px; }
    .site-header .identity, .site-header .mode-panel { display: contents; }
    .site-header .event-heading { grid-column: 1 / -1; grid-row: 1; }
    .site-header .organizer { grid-column: 2; grid-row: 2; width: 88px; align-self: start; }
    .site-header .qr-links { grid-column: 3; grid-row: 2; min-width: 0; max-width: calc(100vw - 232px); justify-content: center; align-self: start; }
    .site-header .powered-by { grid-column: 4; grid-row: 2; width: 88px; align-self: start; gap: 6px; font-size: .75rem; }
    .site-header .powered-by img { width: 88px; height: 88px; padding: 8px; }
    .site-header .mode-switch { grid-column: 1 / -1; grid-row: 3; width: min(100%, 350px); justify-self: center; }
    .site-header .mode-help { grid-column: 1 / -1; grid-row: 4; margin: 0; }
    .site-header .logo-card { width: 88px; height: 88px; border-radius: 8px; }
    .site-header .qr-links img, .site-header .qr-links figure { width: 88px; }
    .site-header .qr-links img { height: 88px; }
    .site-header figcaption { margin-top: 6px; font-size: .75rem; line-height: 1.35; }
    .site-header #eventName { font-size: 1.8rem; }
}