/* iOS / iPadOS Safari fixes shared by every public page. The server links this after each page's own
   styles (see injectPublicPage), so these rules win over the inline ones at equal specificity. */

/* Dark page: Safari draws its toolbar, address pill and form controls in the dark style, and the area
   behind the status bar, the rubber-band overscroll and the iOS 26 toolbar tint match the page. */
:root{color-scheme:dark}
html{background:#0B0B1A}

/* ============ Floating header ============
   iOS 26 Safari draws the page under the status bar and its floating address bar. When a full-width fixed
   bar touches the top edge, Safari tries to tint that area from it, and the result differed page to page.
   The header is a rounded "pill" that floats below the safe area instead: it never touches the edge, so
   Safari applies its own blur up there on every page, and the header reads as one glass piece.
   Every page offsets its content by --nav-h, so it is set to the pill's bottom edge plus the top inset. */
:root{
  --nav-pill:60px;
  --nav-gap:10px;
  --nav-h:calc(var(--nav-pill) + var(--nav-gap) * 2 + env(safe-area-inset-top, 0px));
}
.nav{
  inset:auto;
  top:calc(env(safe-area-inset-top, 0px) + var(--nav-gap));
  left:max(12px, env(safe-area-inset-left, 0px));
  right:max(12px, env(safe-area-inset-right, 0px));
  max-width:calc(var(--container, 1240px) + 40px);
  margin-inline:auto;
  height:var(--nav-pill);
  padding:0;
  border:1px solid transparent;
  border-radius:22px;
  transition:background .4s,border-color .4s,box-shadow .4s,backdrop-filter .4s;
}
/* Filled state. .scrolled: homepage and members after scrolling, events/rules/contacts always.
   .no-print: the club and member pages, whose header is always filled. */
.nav.scrolled,
.nav.no-print{
  background:rgba(16,16,38,.72);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
}
/* The inner row fills the pill instead of the page container. */
.nav .nav-inner{width:100%;max-width:none;margin:0;padding:0 10px 0 14px}
@media (min-width:961px){.nav .nav-inner{padding:0 12px 0 18px}}
/* The open mobile menu is fixed to the viewport; a backdrop-filter on the header would trap it inside the
   pill (the pages clear it for .nav, which the filled state above outranks). */
body.menu-open .nav.scrolled,
body.menu-open .nav.no-print{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}

/* Landscape iPhone: keep content clear of the notch and the rounded screen corners. */
.container,
.footer .container{
  width:min(100% - 2 * max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), var(--container));
}
@media (max-width:600px){
  .container,
  .footer .container{
    width:min(100% - 2 * max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), var(--container));
  }
}

/* Mobile menu: clear the home indicator and Safari's floating bottom toolbar, and keep a swipe inside
   the menu from scrolling the page behind it. */
@media (max-width:960px){
  .nav-menu{
    padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior:contain;
  }
}

/* Scroll lock. iOS Safari ignores overflow:hidden on <body> alone, so the root is locked too while the
   menu, a club sheet or the lightbox is open. */
html:has(body.menu-open),
html:has(.sheet-back:not([hidden])),
html:has(dialog[open]){overflow:hidden}
.sheet-back{overscroll-behavior:contain}

/* Taps: no grey flash, no 300 ms double-tap-zoom wait on controls. */
html{-webkit-tap-highlight-color:transparent}
a,button,label,summary,select,input,textarea,[role="button"]{touch-action:manipulation}

/* Club cloud: a long press shows no image callout or text selection. */
.cloud-view{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* On touch screens the cloud runs edge to edge instead of being cut at the page gutters. The page clips
   horizontal overflow on html/body, so the wider box adds no sideways scroll. */
@media (hover:none) and (pointer:coarse){
  .cloud-view{
    width:100vw;
    margin-inline:calc(50% - 50vw);
  }
}
/* The sheet is closed by dragging it down. With pan-y Safari takes that drag to scroll the page behind,
   cancels the pointer and the sheet never moves, so the sheet handles every touch itself. */
.sheet{touch-action:none;-webkit-user-select:none;user-select:none}

/* vh on iOS is the height with the toolbars hidden, so 70vh / 55vh boxes overflow when they show. */
@media (hover:none) and (pointer:coarse){
  .cloud-view{height:70svh}
}
.sheet{height:55svh}
.lb{max-height:92svh}
.lb-frame img{max-height:78svh}

/* Low Power Mode blocks autoplay and Safari would draw a big play button over the hero video. */
video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
video::-webkit-media-controls{display:none !important}

/* On touch screens :hover sticks after a tap, which left buttons lifted and links recoloured. */
@media (hover:none){
  .btn:hover,.btn-fill:hover,.btn-outline:hover{transform:none}
  .btn:hover svg{transform:none}
  .btn-fill:hover{box-shadow:0 10px 40px -8px rgba(255,46,154,.7)}
  .btn-fill:hover::before{transform:translateX(-120%)}
  .btn-outline:hover{--b:rgba(255,255,255,.35);color:var(--text);box-shadow:none}
  .btn:active{transform:scale(.97)}
  .link-arrow:hover{color:var(--text);gap:10px}
  .footer .socials a:hover{transform:none;border-color:var(--line);color:inherit;box-shadow:none}
  .footer ul a:hover,.footer address a:hover{color:var(--muted)}
}