/* The site's one header and footer — the v25 design's (home, legal and every
   other page). Self-contained: everything is scoped to .top and .foot, so
   neither home.css nor styles.css (each with its own .btn, .logo and h2)
   changes them. The header's row is the page's own .shell, so the logo and the
   button line up with each page's content column. Variants: --over (see-through
   over a cover photo: club and event pages, the open-in-app page) and --dark. */

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid rgba(11, 27, 26, .06); }
.top .shell { height: 68px; display: flex; align-items: center; gap: 24px; }
/* Laid out as on otrip.io: the pin and "trip" are inline on one baseline, so the
   pin's -0.14em drop holds and its ring sits level with "rip". (A flex row ignores
   that margin when lining up baselines, which lifted the pin by 0.14em.) */
.top .logo, .foot .logo { display: inline-block; flex: none; font-family: inherit; font-weight: 800; font-size: 30px; letter-spacing: -.03em; line-height: 1; color: #0B1B1A; white-space: nowrap; text-decoration: none; }
.top .logo svg, .foot .logo svg { display: inline-block; vertical-align: baseline; width: .77em; height: .897em; margin: 0 .045em -.14em 0; fill: #0D9488; overflow: visible; }
.top nav { display: none; gap: 26px; margin-inline: auto; }
.top nav a { color: #2E3D3C; font-size: 15px; font-weight: 600; text-decoration: none; }
.top nav a:hover { color: #0F766E; }
.top nav a[aria-current="page"] { color: #0F766E; }
.top .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: #0D9488; color: #FFFFFF; box-shadow: none; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; text-decoration: none; margin-inline-start: auto; }
.top .btn:hover { background: #0F766E; color: #FFFFFF; }
/* The eight page links need ~1,140px to sit with room either side (measured: at
   980-1024 they squeeze to 24px from the logo); narrower screens get the menu. */
@media (min-width: 1140px) {
  .top nav { display: flex; }
  .top .btn { margin-inline-start: 0; }
  .top .top__menu { display: none; }
}

/* Under 1,140px: a round button after "Get the app", the links in a panel under the header. */
.top__menu { flex: none; margin-inline-start: -12px; }
.top__menu summary { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; list-style: none; cursor: pointer; color: #0B1B1A; background: rgba(11, 27, 26, .06); }
.top__menu summary::-webkit-details-marker { display: none; }
.top__menu summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.top__menu .top__close, .top__menu[open] .top__open { display: none; }
.top__menu[open] .top__close { display: block; }
/* gap and margin reset: the panel is a <nav> too, so the wide header's `.top nav` row spacing would apply. */
.top .top__panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0; margin: 0; padding: 6px 20px 14px; background: #FFFFFF; border-top: 1px solid rgba(11, 27, 26, .06); box-shadow: 0 24px 40px -24px rgba(4, 47, 46, .35); }
.top .top__panel a { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 700; color: #0B1B1A; border-bottom: 1px solid rgba(11, 27, 26, .06); }
.top .top__panel a:last-child { border-bottom: 0; }
.top .top__panel a[aria-current="page"] { color: #0F766E; }
.top--over .top__menu summary, .top--dark .top__menu summary { color: #FFFFFF; background: rgba(255, 255, 255, .16); }

.top--over { position: absolute; inset: 0 0 auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.top--over .logo { color: #FFFFFF; }
.top--over .logo svg { fill: #FFFFFF; }
.top--over nav a { color: rgba(255, 255, 255, .9); }
.top--over nav a:hover { color: #FFFFFF; }
.top--over .btn { background: #FFFFFF; color: #0F766E; }
.top--over .btn:hover { background: #F0FDFA; color: #0F766E; }

.top--dark { background: rgba(9, 9, 11, .72); border-bottom-color: rgba(255, 255, 255, .08); }
.top--dark .logo { color: #FFFFFF; }
.top--dark nav a { color: rgba(255, 255, 255, .78); }
.top--dark nav a:hover { color: #FFFFFF; }

.foot { background: #08100F; color: rgba(255, 255, 255, .72); padding-block: 64px 40px; }
.foot .shell { display: grid; gap: 28px; }
.foot .logo { color: #FFFFFF; }
.foot a { text-decoration: none; }
.foot__grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.2fr 2fr; } }
.foot__brand { display: grid; gap: 14px; align-content: start; }
.foot__brand p { margin: 0; color: rgba(255, 255, 255, .6); font-size: 15px; }
.foot__social { display: flex; flex-wrap: wrap; gap: 10px; }
.foot__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); }
.foot__social a:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px; }
.foot__cols h2 { margin: 0 0 12px; font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.foot__cols a { display: block; color: rgba(255, 255, 255, .82); font-size: 15px; font-weight: 600; padding: 5px 0; }
.foot__cols a:hover { color: #FFFFFF; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; }
.foot__base a { color: rgba(255, 255, 255, .8); }