/* Shared by index.html and archive.html: mobile menu + poster viewer */

/* Menu button (phones/tablets) */
.nav-menu{display:none;position:relative;z-index:1;width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid rgba(14,16,12,.1);background:rgba(255,255,255,.8);color:#0E100C;cursor:pointer;place-items:center;padding:0;-webkit-tap-highlight-color:transparent}
.nav-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.nav-menu .x{display:none}
.nav.menu-open .nav-menu .bars{display:none}
.nav.menu-open .nav-menu .x{display:block}
.nav-menu:focus-visible,.mnav a:focus-visible{outline:3px solid #4A6700;outline-offset:3px}

.mnav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:2;padding:8px;border-radius:24px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 60px -24px rgba(24,34,0,.4),0 2px 8px rgba(14,16,12,.06)}
.nav.menu-open .mnav{display:grid;gap:2px}
.mnav a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:16px;font-size:17px;font-weight:600;color:#0E100C;text-decoration:none;letter-spacing:-.01em}
.mnav a:hover,.mnav a:active{background:rgba(212,242,63,.35);color:#0E100C}
.mnav a small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4A6700}
.mnav a[aria-current="page"]{background:rgba(212,242,63,.45)}

@media (max-width:1440px){
  .nav .navlinks a{padding:0 10px}
}
@media (max-width:1240px){
  .navlinks{display:none !important}
  .nav-menu{display:grid}
}
@media (max-width:820px){
  .nav{gap:8px}
  .nav .nav-cta{margin-left:auto}
}
@media (max-width:420px){
  .nav .brand span{display:none}
  .nav .brand{padding-right:0}
  .nav .nav-cta{padding:0 14px}
}

/* Poster viewer */
.pv{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.pv[hidden]{display:none}
.pv:not(.open){pointer-events:none}
.pv-scrim{position:absolute;inset:0;background:rgba(14,16,12,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .3s ease}
.pv.open .pv-scrim{opacity:1}
.pv-panel{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(860px,100%);max-height:100%;opacity:0;transform:translateY(24px) scale(.98);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.pv.open .pv-panel{opacity:1;transform:none}
.pv-img{display:block;max-width:100%;max-height:calc(100vh - 140px);max-height:calc(100svh - 140px);width:auto;height:auto;border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);background:#fff}
.pv-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pv-bar a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;font:600 15px/1 -apple-system,BlinkMacSystemFont,"Hanken Grotesk",sans-serif;text-decoration:none;color:#0E100C;background:rgba(255,255,255,.92);border:1px solid #fff}
.pv-bar a.primary{background:linear-gradient(180deg,#EAF8A2 0%,#D4F23F 52%,#B4CF2C 100%);border-color:#A9C52A}
.pv-close{position:absolute;top:-6px;right:-6px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid #fff;background:rgba(255,255,255,.95);color:#0E100C;cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.pv-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.pv-close:focus-visible,.pv-bar a:focus-visible{outline:3px solid #D4F23F;outline-offset:3px}
@media (max-width:820px){
  .pv{padding:12px}
  .pv-panel,.pv.has-site .pv-panel{padding-top:58px}
  .pv-close{top:0;right:0}
  .pv-img{max-height:calc(100svh - 190px);border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .pv-panel,.pv-scrim{transition:none}
}

/* Poster with a website preview card (Beckenbodentraining) */
.pv.has-site .pv-panel{width:min(860px,100%);overflow:auto;overscroll-behavior:contain}
.pv.has-site .pv-img{max-height:calc(100vh - 290px);max-height:calc(100svh - 290px)}
.pv-site[hidden]{display:none}
.pv-site{display:flex;align-items:stretch;gap:0;width:100%;max-width:640px;border-radius:18px;overflow:hidden;background:#fff;color:#0E100C;text-decoration:none;box-shadow:0 20px 40px -24px rgba(0,0,0,.6);border:1px solid #fff}
.pv-site img{width:150px;flex:0 0 150px;object-fit:cover;min-height:100%}
.pv-site-t{display:flex;flex-direction:column;gap:3px;padding:12px 16px;font:500 14px/1.4 -apple-system,BlinkMacSystemFont,"Hanken Grotesk",sans-serif;color:#474C42;min-width:0}
.pv-site-t small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0F7C78}
.pv-site-t b{font-size:17px;color:#0E100C;letter-spacing:-.01em}
.pv-site-t em{font-style:normal;font-weight:700;color:#0F7C78;margin-top:2px}
.pv-site:hover{color:#0E100C}
.pv-site:hover em{text-decoration:underline}
.pv-site:focus-visible{outline:3px solid #D4F23F;outline-offset:3px}
@media (max-width:520px){
  .pv-site img{width:104px;flex-basis:104px}
  .pv-site-t{padding:10px 12px;font-size:13px}
  .pv-site-t b{font-size:15px}
  .pv.has-site .pv-img{max-height:none;width:100%}
}

/* Footer must never widen the page on small phones */
.site-foot .sf-col a{overflow-wrap:anywhere}
@media (max-width:820px){
  .site-foot .sf-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:400px){
  .site-foot .sf-top{grid-template-columns:minmax(0,1fr);gap:28px}
}