/* Shared across every Club page: header, footer, content width. One copy so
   the three pages can't drift from each other again — match values pulled
   directly from the main site's own styles.css (--maxw, header height,
   brand-lockup size, footer treatment). */

/* Safety net against horizontal scroll on mobile — matches the root
   styles.css and usa/styles.css, both of which already clip html/body.
   Club pages didn't have this, which is why a stray oversized element
   (e.g. the hero image) could push the whole page wider than the
   viewport and make it scroll sideways instead of just clipping. */
html{overflow-x:clip}
body{overflow-x:clip}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:30px}

/* ==========================================================================
   GLOBAL WORLDHOP.APP NAV — this exact block (selectors + values) is
   duplicated verbatim in the root styles.css and usa/styles.css. All
   three pages must render this pixel-identical: same header height, same
   logo size, same link sizing/gap, same background, same breakpoints. If
   you change ANY value here, make the same change in the other two files.
   ========================================================================== */
/* Fully explicit (padding/display/gap included) so this always wins over
   a legacy .site-header rule elsewhere in the cascade, rather than
   silently inheriting stray values from it — that's what was quietly
   squeezing this header's width down from 1180px to ~640px before. */
.site-header{height:150px;padding:0;display:block;gap:0;background:var(--night);color:var(--cream)}
.site-header .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:30px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-header .brand img{height:120px;width:auto;object-fit:contain}
.site-header nav.links{display:flex;align-items:center;gap:44px}
.site-header nav.links a{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.5px;text-transform:uppercase;color:var(--cream);text-decoration:none;opacity:.82;white-space:nowrap}
.site-header nav.links a:hover{opacity:1}
.site-header nav.links a.active{opacity:1;color:var(--mango)}
.site-header nav.links a.nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;font-size:18px;border-radius:15px;border:2px solid rgba(18,33,49,.7);background:var(--orange);color:var(--cream);box-shadow:0 6px 0 var(--orange-d),0 12px 20px rgba(0,0,0,.22);opacity:1;letter-spacing:.4px;transition:transform .15s ease}
.site-header nav.links a.nav-cta:hover{transform:translateY(-2px);filter:brightness(1.06);opacity:1}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:6px;width:56px;height:56px;padding:14px;background:rgba(255,241,210,.1);border:2px solid rgba(244,233,211,.45);border-radius:15px;cursor:pointer}
.hamburger span{display:block;height:5px;width:100%;border-radius:3px;background:var(--cream)}
.mobile-menu{position:fixed;inset:0;z-index:300;background:linear-gradient(160deg,#081d39,#041225);display:flex;flex-direction:column;padding:26px 24px 40px}
.mobile-menu[hidden]{display:none}
.mm-close{align-self:flex-end;display:grid;place-items:center;width:56px;height:56px;font-size:24px;color:var(--cream);background:rgba(255,241,210,.1);border:2px solid rgba(244,233,211,.45);border-radius:15px;cursor:pointer;line-height:1}
.mm-links{margin:auto 0;display:flex;flex-direction:column;gap:22px;padding:20px 0}
.mm-links a{font-family:var(--font-display);font-weight:400;font-size:36px;color:var(--cream);text-decoration:none;text-transform:uppercase;text-align:center;letter-spacing:.5px}
.mm-links a.active{color:var(--mango)}
.mm-links a.mm-cta{margin-top:20px;font-size:26px;background:var(--orange);color:var(--cream);border:2px solid rgba(18,33,49,.7);border-radius:16px;box-shadow:0 6px 0 var(--orange-d);padding:18px 24px}
.mm-links a.mm-cta.active{color:var(--cream)}

@media(max-width:700px){
  .site-header{height:100px}
  .site-header .brand img{height:64px}
}

/* Recognized members' own header (brand + "My pass/Explore/…" nav + chip)
   is a different, smaller component — untouched by the global nav above. */
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;flex:0 0 auto}
.brand-divider{width:1px;height:56%;align-self:center;background:rgba(255,241,210,.35);margin:0 15px 0 0}
.brand span{font:26px "Lilita One";color:var(--mango)}
.site-header nav:not(.links){display:flex;gap:28px}
.site-header nav:not(.links) a{text-decoration:none;font-size:14px;font-weight:900;opacity:.76;font-family:"Lilita One";letter-spacing:.6px;text-transform:uppercase}
.site-header nav:not(.links) a:hover{opacity:1}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--night);background:var(--cream);font-weight:900;font-size:13px;text-decoration:none;padding:10px 16px;border-radius:99px;border:2px solid rgba(6,29,59,.15)}
.back:hover{background:var(--mango)}

/* ==========================================================================
   HEADER DECLUTTER — shared by every Club page, which is why it lives here
   and not in one page's stylesheet.

   The recognized-member header used to carry, on one row: the wordmark, a
   "Club" lockup, a page nav, a "Club member" chip, "Not you? Forget this
   device", AND a "Back to the Club" pill. On a narrow phone that cannot fit
   and wrapped across several lines. Two things moved out:
     - the back link became .hero-back, a circular button above the page's H1
     - "Forget this device" moved into .header-menu, a small corner popover
   The "Club" word came out of the lockup entirely; a dedicated Club mark is
   coming and the divider+word was doing the crowding in the meantime.
   ========================================================================== */
.header-menu{position:relative;margin-left:auto}
.header-menu-toggle{width:40px;height:40px;border:2px solid rgba(255,241,210,.35);border-radius:50%;background:rgba(255,241,210,.08);color:var(--cream);font-size:19px;line-height:1;cursor:pointer}
.header-menu-toggle:hover{background:rgba(255,241,210,.16)}
.header-menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:20;background:var(--white,#fffdf7);border:2px solid var(--ink,#122131);border-radius:14px;box-shadow:0 6px 0 var(--ink,#122131);padding:12px 16px;white-space:nowrap}
.header-menu-panel[hidden]{display:none}
.header-menu-panel a{color:var(--night,#061D3B);font-size:12px;font-weight:900;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Circular back button, sitting above a page's H1 rather than in the header. */
.hero-back{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:20px;border:2px solid rgba(255,241,210,.7);border-radius:50%;background:transparent;color:var(--cream);font-size:20px;text-decoration:none}
.hero-back:hover{background:rgba(255,241,210,.14)}
.hero-back:active{transform:translateY(2px)}
@media(max-width:650px){.hero-back{width:42px;height:42px;margin-bottom:16px}}
/* countries.html puts its heading on the light paper background rather than a
   navy hero, where a cream-on-cream button would be invisible. */
.page-intro .hero-back{border-color:rgba(6,29,59,.3);color:var(--ink)}
.page-intro .hero-back:hover{background:rgba(6,29,59,.07)}

footer.footer{padding:56px 0 40px;background:#020b17;position:relative;text-align:center;margin-top:0}
/* The seam between the section above and the footer is the footer's TOP EDGE,
   and the logo has to be pulled back across BOTH the footer's own padding-top
   AND the distance from the image's top to its visual centre:

       margin-top = -(footer padding-top + 0.479 x rendered height)

   0.479 is the wordmark's real content centre, measured from its drawn pixels
   rather than its canvas (bbox y 96..287 of 400, so the art is not vertically
   centred in the file). Rendered height is width/2, the source being 800x400.
   Here: -(56 + 0.479 x 140) = -123px.
   An earlier fix used -67px, which forgot the 56px padding entirely and so
   pushed the logo further INTO the footer instead of across the seam. If these
   numbers are ever retuned, re-run the formula — do not eyeball it. */
.footer-logo{display:block;text-align:center;margin-top:-123px;margin-bottom:20px}
/* display:block, not inline-block: an inline-block sits on a text baseline and
   picks up a few px of half-leading, which puts the arithmetic above out by an
   amount that changes with font-size. */
.footer-lockup{width:280px;height:auto;margin:0 auto;display:block;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.footer .inner{display:block;text-align:center}
.foot-strap{font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;color:var(--mango);font-size:22px;line-height:1.25;letter-spacing:.4px;margin:0 auto 16px;max-width:30ch}
.footer nav{margin-top:16px}
.footer nav a{font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;font-size:15px;letter-spacing:.5px;color:var(--cream);opacity:.82;margin:0 11px;display:inline-block;text-decoration:none}
.footer nav a:hover{opacity:1}
.foot-copy{margin-top:16px;opacity:.55;text-align:center;color:rgba(255,241,210,.75);font-size:12px}

@media(max-width:860px){
  .site-header nav.links{display:none}
  .hamburger{display:flex}
  .site-header nav:not(.links){display:none}
}
@media(max-width:560px){
  .brand span{font-size:20px;padding-left:9px}
  .wrap{padding-inline:20px}
  /* -(56 + 0.479 x 105) — same formula, narrower render. */
  .footer-lockup{width:210px}
  .footer-logo{margin-top:-106px}
}

/* Desktop-only prev/next arrows for horizontally-scrolling shelves (not
   everyone scrolls with a trackpad swipe or a touchscreen). Hidden on
   touch-sized viewports where the native swipe/scroll is already obvious. */
.cover-shelf-wrap{position:relative}
.shelf-arrow{display:none}
@media(min-width:851px){
  .shelf-arrow{display:grid;place-items:center;position:absolute;top:42%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--white,#fffdf7);border:2px solid var(--ink,#122131);color:var(--ink,#122131);font-size:24px;line-height:1;cursor:pointer;z-index:3;box-shadow:0 4px 0 var(--ink,#122131)}
  .shelf-arrow:hover{background:var(--mango)}
  .shelf-arrow:active{transform:translateY(-50%) translateY(3px);box-shadow:none}
  .shelf-arrow-prev{left:-6px}
  .shelf-arrow-next{right:-6px}
}

/* Recognized (has a saved Club pass on this device) vs guest content —
   driven by the html.is-recognized / html.is-guest class common.js sets
   synchronously, before paint, so there's no flash of the wrong state.
   Put data-recognized-only or data-guest-only on anything that should
   only show in one state; its own display value is left alone in the
   state where it's meant to show.

   Hardened on purpose: guest is the default/fallback state. If common.js
   ever fails to run (a bad deploy, a network hiccup, a future bug), <html>
   ends up with NEITHER class — these rules must not both match at once in
   that case, or every gated element on the page vanishes simultaneously,
   which is exactly what happened when the base-href/script ordering bug
   broke state detection site-wide. Guest content shows by default and is
   hidden only once we're positively confirmed recognized; recognized
   content stays hidden until we're positively confirmed recognized. */
html.is-recognized [data-guest-only]{display:none!important}
html:not(.is-recognized) [data-recognized-only]{display:none!important}

/* "Not you? Forget this device" — a manual sign-out for a magic link
   tapped on a library, school or other shared/borrowed computer. Shown
   only when recognized; grouped with the header's brand/back link on
   each page so it's easy to spot without crowding the guest layout. */
.member-actions{display:flex;align-items:center;gap:14px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.forget-device-link{font-size:11px;font-weight:900;color:rgba(255,241,210,.55);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer}
.forget-device-link:hover{color:rgba(255,241,210,.9)}
@media(max-width:560px){.member-actions{gap:8px}.forget-device-link{font-size:9px}}

/* The recognized-member header (brand + "Club member" chip + "Not you?"
   link, all on one row) runs out of room on narrow phones — there just
   isn't 500px+ to fit all three side by side under ~480px wide. Rather
   than let it overflow, drop the chip/link onto their own centred row
   under the brand once space gets tight. Revisit once the brand mark
   drops the separate "Club" wordmark and frees up room on the row above. */
@media(max-width:480px){
  .site-header:not(.global-nav){height:auto}
  .site-header:not(.global-nav) .wrap{flex-wrap:wrap;row-gap:10px;padding-block:14px}
  .site-header:not(.global-nav) .member-actions{flex-basis:100%;justify-content:center}
}

/* Floating join/gate modal — shared by every Club page. Deliberately
   self-contained (doesn't reach for styles.css's .button-orange etc.)
   since flags.html and colouring.html don't load styles.css. */
.gate-modal-overlay{position:fixed;inset:0;background:rgba(6,29,59,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;opacity:0;transition:opacity .2s;pointer-events:none}
.gate-modal-overlay.open{opacity:1;pointer-events:auto}
.gate-modal{background:var(--white,#fffdf7);border:2px solid var(--ink,#122131);border-radius:24px;box-shadow:0 14px 0 var(--ink,#122131);max-width:420px;width:100%;padding:34px 30px 30px;text-align:center;position:relative;transform:translateY(14px) scale(.97);transition:transform .22s}
.gate-modal-overlay.open .gate-modal{transform:translateY(0) scale(1)}
.gate-modal-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#e8dfcc;font-size:20px;line-height:1;cursor:pointer}
.gate-modal-badge{font-size:38px;margin-bottom:6px}
.gate-modal h3{font-family:"Lilita One";font-weight:400;font-size:26px;margin:0 0 10px;color:var(--night,#061D3B)}
.gate-modal p{font-size:14px;color:#54606a;margin:0 0 22px}
.gate-modal-actions{display:flex;flex-direction:column;gap:12px}
.gate-modal-cta{display:block;border:2px solid var(--ink,#122131);border-radius:14px;padding:13px;font:900 15px "Nunito Sans",sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--ink,#122131)}
.gate-modal-cta:active{transform:translateY(4px);box-shadow:none}
.gate-modal-cta.primary{background:var(--orange,#F26322);color:#fff}
.gate-modal-cta.quiet{background:#e8dfcc;color:var(--night,#061D3B)}

/* Inline "join to unlock" panel that replaces a gated library/grid on
   flags.html and colouring.html for guests — same self-contained
   approach as the modal above. */
.guest-library-panel{background:var(--white,#fffdf7);border:2px dashed var(--ink,#122131);border-radius:22px;padding:44px 30px;text-align:center;margin-top:6px}
.guest-library-panel h3{font-family:"Lilita One";font-weight:400;font-size:28px;margin:0 0 10px}
.guest-library-panel p{max-width:480px;margin:0 auto 22px;color:#54606a;font-size:15px}
.guest-library-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.guest-library-actions a{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink,#122131);border-radius:14px;padding:13px 20px;font:900 14px "Nunito Sans",sans-serif;text-decoration:none;box-shadow:0 5px 0 var(--ink,#122131)}
.guest-library-actions a.primary{background:var(--orange,#F26322);color:#fff}
.guest-library-actions a.secondary{background:#e8dfcc;color:var(--night,#061D3B)}
.guest-library-actions a:active{transform:translateY(4px);box-shadow:none}

/* ==========================================================================
   MEMBERSHIP PILL — replaces the old recognized-member header.

   Every Club page now shows the same global nav as worldhop.app and /books;
   membership is signalled here instead, sitting directly above the page
   heading. "Not you?" lives inside the same pill and opens a yes/cancel
   confirm (Club.openConfirmModal) rather than clearing the pass on one tap.
   ========================================================================== */
.member-pill{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 18px;padding:8px 8px 8px 15px;
  border:1px solid rgba(255,241,210,.28);border-radius:99px;
  background:rgba(255,241,210,.07);
  font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  color:var(--cream);
}
.member-pill > i{
  width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 4px rgba(36,184,166,.16);flex:none;
}
.pill-forget{
  border:0;cursor:pointer;
  margin-left:3px;padding:5px 12px;border-radius:99px;
  background:rgba(255,241,210,.14);color:rgba(255,241,210,.82);
  font:inherit;font-size:11px;letter-spacing:.6px;
}
.pill-forget:hover{background:rgba(255,241,210,.24);color:var(--cream)}
.pill-forget:focus-visible{outline:2px solid var(--mango);outline-offset:2px}

/* The pill lives on the Club home page only — the section pages are already
   inside the Club and do not need to keep announcing it. "Not you? / Forget
   this device" is therefore one click away via the back arrow, not gone. */

@media(max-width:560px){
  .member-pill{font-size:10px;padding-left:12px;gap:7px}
  .pill-forget{font-size:10px;padding:4px 9px}
}

/* ==========================================================================
   CLUB BRANDMARK IN THE NAV

   The Club pages swap the horizontal wordmark for the stacked Club lockup
   (globe + WORLD HOP + CLUB). It is roughly square rather than wide, so at
   the shared 120px nav height it looked small and left the bar half empty —
   this sizes it to fill the space and deliberately overhang the bar.

   It hangs DOWNWARD only. The header sits at the very top of the document, so
   anything overflowing upward is clipped by the viewport edge; the logo is
   therefore pinned near the top of the bar and allowed to run past the bottom
   into the hero. Both surfaces are navy, so the overhang reads as a bigger
   logo rather than as something spilling.

   z-index:50 matters — club/styles.css puts .hero at z-index:2, and without
   this the hero would paint over the part of the logo that overhangs it.

   This block lives in club/common.css, which only Club pages load, so it
   cannot leak onto worldhop.app or /books — those keep the plain WorldHop
   wordmark, which is correct: this mark says CLUB on it.
   ========================================================================== */
.site-header{position:relative;z-index:50;overflow:visible}
/* Only the BRAND is top-aligned. The wrap keeps align-items:center so the nav
   links and hamburger stay vertically centred in the bar — top-aligning the
   whole row would drag those up with it. */
.site-header .brand{align-self:flex-start;margin-top:6px}
.site-header .brand img{height:190px;width:auto}

/* The logo now hangs ~46px past the bar, so the first block on each page needs
   that much clearance or the heading collides with it. Applied to the three
   layouts Club pages actually use. */
.hero,.adventure-hero,.page-intro{padding-top:calc(var(--club-brand-drop,46px) + 18px)}

@media(max-width:860px){
  .site-header .brand img{height:170px}
}
@media(max-width:700px){
  .site-header{height:100px}
  .site-header .brand{margin-top:6px}
  .site-header .brand img{height:132px}
  .hero,.adventure-hero,.page-intro{--club-brand-drop:38px}
}
@media(max-width:480px){
  .site-header .brand img{height:112px}
  .hero,.adventure-hero,.page-intro{--club-brand-drop:18px}
}