/* 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:68px;
  --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;
  /* backdrop-filter is deliberately not animated. While a header has any backdrop-filter it becomes the
     containing block of the fixed mobile menu inside it, so a 0.4s fade of the filter kept the opening menu
     squeezed into the pill for 0.4s before it jumped to full screen (and the same on close). */
  transition:background .4s,border-color .4s,box-shadow .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. */
/* The header re-blurs the page under it on every scroll frame; a 20px blur made scrolling stutter on laptops.
   10px with a denser fill looks the same behind the pill and costs the GPU far less. */
.nav.scrolled,
.nav.no-print{
  background:rgba(16,16,38,.8);
  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(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
}
/* 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}
/* Federation emblem in the pill (the shared size in site-footer.css is for pages without the pill). */
.nav .logo-mark.logo-emblem{width:58px;height:58px}
@media (min-width:961px){.nav .nav-inner{padding:0 12px 0 18px}}
/* Phones: the pages hide the name under 480px. In the pill it fits as a two-line lockup next to the mark
   ("Fitness / Federation"), with a slightly tighter language switch. Below 360px only the mark stays. */
@media (max-width:480px){
  .nav .nav-inner{gap:10px}
  .nav .logo{gap:9px;min-width:0}
  .nav .logo-mark{width:40px;height:40px}
  .nav .logo-mark.logo-emblem{width:48px;height:48px}
  .nav .logo-text{display:flex;min-width:0}
  .nav .logo-text b{width:min-content;white-space:normal;font-size:.98rem;line-height:.98;letter-spacing:.02em}
  .nav .logo-text small{display:none}
  .nav .nav-right{gap:8px}
  .nav .lang button{padding:6px 8px}
}
@media (max-width:359px){.nav .logo-text{display:none}}
/* 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.
   - No backdrop blur: a full-screen blur over the page (and the playing hero video) made the menu open with
     a stutter, and Safari drew the blurred backing a few frames after the menu itself. A solid backing with
     soft glows looks the same behind the large links and costs nothing to show.
   - Only opacity animates, and visibility flips at once on open, so the first frame is already the menu.
   - Page scroll is blocked by the menu itself (it fills the screen and takes no pan), instead of locking the
     root element, which made Safari re-lay out the whole page on the same tap.
   - Bottom padding clears the home indicator and Safari's floating bottom toolbar. */
@media (max-width:960px){
  .nav-menu{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:
      radial-gradient(ellipse 90% 50% at 100% 0%,rgba(255,46,154,.16),transparent 70%),
      radial-gradient(ellipse 80% 45% at 0% 100%,rgba(34,211,238,.10),transparent 70%),
      #0B0B1A;
    transition:opacity .22s ease,visibility 0s linear .22s;
    overscroll-behavior:contain;
    touch-action:none;
    padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
  }
  /* iOS 26 Safari shows the page under its see-through address bar and bottom toolbar, outside the menu.
     The page behind the open menu is hidden, so those bars show only the dark page background. */
  body.menu-open > :not(.nav){visibility:hidden}
  /* No pink glow under the Join button at the bottom of the menu. */
  .menu-foot .btn-fill,.menu-foot .btn-fill:hover{box-shadow:none}
  /* Opening: the backing shows at once and only the links slide in. Fading the whole menu let Safari draw the
     animating links (their own layers) at full strength before the backing caught up. Closing still fades. */
  .nav-menu.open{transition:visibility 0s}
  .nav-menu.open .nav-links li{animation-duration:.35s}
  /* Slightly smaller links than the pages' own size. */
  .nav-menu .nav-links a{font-size:clamp(2.2rem,10.2vw,3.1rem)}
}
/* The pages lock body overflow while the menu is open. On touch screens the menu already blocks the pan,
   so the body keeps its normal overflow (a mouse wheel still needs the lock, so it stays elsewhere). */
@media (max-width:960px) and (hover:none){
  body.menu-open{overflow:visible;overflow-x:clip}
}

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

/* No focus ring after a tap or click (site-footer.js sets .is-pointer; Tab removes it, so keyboard users keep
   the ring). The club bubbles draw theirs with :focus-within, which a tap triggers too. */
.is-pointer :focus-visible,
.is-pointer .bub:focus-within{outline:none !important}

/* 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)}
}