/* Custom styles for Challanger landing page */
/* Tailwind CDN handles most styling — this file is for overrides only */

html {
  scroll-behavior: smooth;
}

/* Big Shoulders Display is tightly set by default — open it up a bit */
.font-heading {
  letter-spacing: 0.03em;
}

/* FAQ details marker */
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  list-style: none;
}

details .faq-chevron {
  transition: transform 0.25s;
}

details[open] .faq-chevron {
  transform: rotate(180deg);
}

/* FAQ cards slide open (browsers without ::details-content just open instantly) */
:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

/* Module pages (competitions, trainings, locations, wellness, club).
   Each page puts its module-* class on <body>; the colour pair matches the
   module cards on the home page. */
.module-competitions { --module-from: #9a4f17; --module-to: #e8ab2c; }
.module-trainings    { --module-from: #7a1a1f; --module-to: #e21e22; }
.module-locations    { --module-from: #3b5412; --module-to: #7bb526; }
.module-locations .text-module { color: var(--module-to); } /* dark green reads too heavy on the grey cards */
.module-wellness     { --module-from: #135a52; --module-to: #0f8f84; }
.module-club         { --module-from: #853214; --module-to: #f0761a; }

.bg-module { background-image: linear-gradient(135deg, var(--module-from), var(--module-to)); }
.text-module { color: var(--module-from); }
.text-module-light { color: var(--module-to); }


/* Module pages: tablet in the hero lifts, turns towards you and catches
   a sweep of light on hover. The shine is masked to the tablet's own shape. */
.tablet-stage { perspective: 1600px; }
.tablet,
.tablet-glow { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.8s ease; }
.tablet { transform-origin: 55% 60%; }
.tablet-stage:hover .tablet { transform: translateY(-14px) rotateX(5deg) rotateY(-7deg) scale(1.03); }
.tablet-stage:hover .tablet-glow { opacity: 0.65; transform: scale(1.1); }
.tablet-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
  transition: background-position 1.2s ease, opacity 0.4s ease;
}
.tablet-stage:hover .tablet-shine { background-position: -20% 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tablet, .tablet-glow, .tablet-shine { transition: none; }
  .tablet-stage:hover .tablet { transform: none; }
}

/* Language switcher in the nav. The list is a popover (no JS): it opens in
   the browser's top layer, so the header band's clip-path cannot cut it off,
   and a click anywhere else closes it. It hangs under its button where the
   browser supports anchor positioning, and opens centred where it does not. */
.lang-btn { cursor: pointer; }
.lang-btn:focus { outline: none; }
.lang-btn:focus-visible { background-color: rgba(255, 255, 255, 0.15); }
.lang-menu { border: 0; padding-left: 0; padding-right: 0; }
@supports (anchor-name: --a) {
  /* Hang the list so its flags sit in one column under the button's flag:
     items are padded 16px, the button 12px (8px between lg and xl). Where
     that would run off the screen (phones), right-align it to the button. */
  .lang-menu { margin: 0.5rem 0 0; inset: auto; top: anchor(bottom); left: calc(anchor(left) - 4px); position-try-fallbacks: --lang-menu-right; }
  @media (min-width: 1024px) and (max-width: 1279px) {
    .lang-menu { left: calc(anchor(left) - 8px); }
  }
}
@position-try --lang-menu-right { left: auto; right: anchor(right); top: anchor(bottom); }
.lang-switch .lang-chevron { transition: transform 0.2s; }
.lang-switch:has(.lang-menu:popover-open) .lang-chevron { transform: rotate(180deg); }
.lang-switch a[aria-current="true"] { font-weight: 700; color: #1c2d95; }

/* Log in dropdown in the nav: the same popover pattern as the language
   switcher, hanging under its button's left edge. */
.login-btn { cursor: pointer; }
.login-btn:focus { outline: none; }
.login-btn:focus-visible { background-color: rgba(255, 255, 255, 0.15); }
.login-menu { border: 0; padding-left: 0; padding-right: 0; }
@supports (anchor-name: --a) {
  .login-menu { margin: 0.5rem 0 0; inset: auto; top: anchor(bottom); left: anchor(left); }
}
.login-switch .login-chevron { transition: transform 0.2s; }
.login-switch:has(.login-menu:popover-open) .login-chevron { transform: rotate(180deg); }

/* The band under the main menu (home, module, pricing, contact, blog and
   legal pages). Desktop keeps the inline clip-path on the element itself;
   on phones the slope is gentler and the point sits on the left, under the
   logo. */
@media (max-width: 767px) {
  .hero-band, .hero-band-center {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 22% 100%, 0 calc(100% - 20px)) !important;
  }
}

/* The mobile menu is a popover like the language list: it opens in the top
   layer (the header band's clip-path cannot cut it off), hangs under the
   menu button, and closes on a click anywhere else. No border; both menus
   are white at 90% (bg-white/90 in the markup). */
.mobile-menu { border: 0; margin: 0; position: fixed; inset: 5.5rem 1rem auto auto; }
@media (min-width: 640px) { .mobile-menu { right: 2rem; } }
@supports (anchor-name: --a) {
  /* Hang it under the menu button, flush with the page's right gutter. */
  .mobile-menu { margin: 0.5rem 0 0; top: anchor(bottom); }
}

/* "Challanger before / now" on the home page: side by side on desktop the
   left panel points into the right one; stacked on phones the top panel
   points down into the notch of the bottom one. */
@media (max-width: 767px) {
  .before-shape { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px)) !important; }
  .now-shape { clip-path: polygon(0 0, 50% 40px, 100% 0, 100% 100%, 0 100%) !important; }
}

/* No browser focus ring on a tapped question (it drew an orange border on
   phones); keyboard users still get a quiet navy one. */
details summary:focus { outline: none; }
details summary:focus-visible { outline: 2px solid rgba(28, 45, 149, 0.4); outline-offset: -2px; border-radius: 0.75rem; }

/* The closing "Your club, all in one place" band on the home page: on phones
   its top edge slopes less than on desktop (where it drops 90px). */
@media (max-width: 767px) {
  .cta-band { clip-path: polygon(0 20px, 10% 0, 100% 40px, 100% calc(100% - 40px), 78% 100%, 0 calc(100% - 40px)) !important; }
}

/* Topic list on the contact form: the same popover as the language menu,
   hung under its button and as wide as the button. */
.topic-btn { cursor: pointer; }
.topic-menu { border: 0; margin: 0; box-sizing: border-box; }
@supports (anchor-name: --a) {
  .topic-menu { margin: 0.25rem 0 0; inset: auto; top: anchor(bottom); left: anchor(left); width: anchor-size(width); }
}
.topic-switch .topic-chevron { transition: transform 0.2s; }
.topic-switch:has(.topic-menu:popover-open) .topic-chevron { transform: rotate(180deg); }
.topic-menu [aria-current="true"] { font-weight: 700; color: #1c2d95; }