/* Padelistan v3 · review pass: accessibility, mobile navigation, clearer content */

/* Contrast: the faint grey passes WCAG AA on the dark ground */
:root { --faint: rgba(244, 244, 238, 0.6); }

/* Skip link */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--lime); color: var(--ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tap targets: nav and footer links at least 44 px tall */
.nav nav a, .foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.nav nav { align-items: center; }

/* Mobile menu */
.menu-btn { display: none; }
@media (max-width: 1100px) {
  .nav { gap: 12px; }
  .menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; order: 3;
    width: 44px; height: 44px; padding: 0 11px; border-radius: 12px; cursor: pointer;
    background: rgba(8, 24, 18, .7); border: 1px solid rgba(244, 244, 238, .2);
  }
  .menu-btn span:not(.sr) { display: block; height: 2px; border-radius: 2px; background: var(--white); transition: transform .3s var(--ease); }
  .nav.open .menu-btn span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav.open .menu-btn span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .nav nav#main-nav {
    display: none; position: absolute; left: 12px; right: 12px; top: calc(100% - 4px);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px;
    background: rgba(5, 12, 9, .97); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
  }
  .nav.open nav#main-nav { display: flex; }
  .nav nav#main-nav a { min-height: 52px; padding: 0 14px; font-size: 22px; border-bottom: 1px solid rgba(244, 244, 238, .08); }
  .nav nav#main-nav a:last-child { border-bottom: 0; }
}

/* Hero: the proof strip in one compact row on phones */
@media (max-width: 640px) {
  .proof { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 4px; margin-top: 26px; }
  .proof li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 10px; }
  .proof li + li { border-top: 0; border-left: 1px solid rgba(244, 244, 238, .16); }
  .proof svg { width: 24px; height: 24px; }
  .proof small { font-size: 11.5px; }
  .proof b { font-size: 19px; }
}

/* Find your name: a caption that says what the list is */
.results-cap { margin: 12px 4px 0; font-size: 13px; color: var(--soft); min-height: 1.2em; }

/* Ranking: four category leaders; the date replaces the misleading "live" dot */
.sb-head .upd { font-size: 16px; }
.scoreboard li { padding-top: 16px !important; padding-bottom: 16px !important; }
.scoreboard li .n { font-size: 22px; }

/* Clubs: CTA with its proof */
.cl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.proof-chip { display: flex; align-items: center; gap: 12px; max-width: 30em; margin: 0; font-size: 14px; color: var(--soft); }
.proof-chip b { flex: none; padding: 6px 10px; border-radius: 8px; background: rgba(215, 245, 74, .12); border: 1px solid var(--line); color: var(--lime); font: italic 900 22px/1 var(--display); }

/* Organisers: CTA beside the console's own promise */
.og-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; margin-top: 5vh; }
.og-quote { margin: 0; padding: 16px 22px 16px 26px; max-width: 520px; border-left: 3px solid var(--lime); background: var(--panel); border-radius: 0 12px 12px 0; }
.og-quote blockquote { margin: 0; font: italic 800 clamp(20px, 1.7vw, 26px)/1.1 var(--display); text-transform: uppercase; }
.og-quote figcaption { margin-top: 8px; font-size: 13px; color: var(--soft); }

/* On short screens keep all three ranking rules; the scoreboard now has four rows */
@media (min-width: 1101px) and (max-height: 900px) { .rules li:nth-child(3) { display: block; } .scoreboard li { padding-top: 12px !important; padding-bottom: 12px !important; } }

/* The next section's angled top edge overlaps the bottom of this one by 3.2vw: keep content clear of it */
@media (min-width: 1101px) { .sec { padding-bottom: calc(var(--fold-pad) + 3.2vw); } }
@media (max-width: 1100px) { .sec { padding-bottom: calc(72px + 18px); } }
.search-foot .btn { flex: none; }