/* =============================================================
   Stichbook — the top bar and the footer, shared by every page.
   The home page (index.html) loads this with v2.css. The other
   pages (legal, contact, delete account, onboarding) load it with
   styles.css, which still styles their content. So this file keeps
   to itself: its colours and fonts are set on its own blocks rather
   than on :root, and it resets the few things styles.css would
   otherwise leak in (link colour, list bullets, margins).
   From Figma usYmGmmdKBeijQtnqW4ctS frame 1491:3438.
============================================================= */

.topbar, .foot, .subhead {
  --night: #000711;
  --c-ink: #171717;
  --c-blue: #0053e2;
  --c-tint: #f3f7ff;
  --c-gutter: 20px;
  --c-lh: 1.21;
  font-family: "Inter", "Noto Sans Gujarati", "Noto Sans Devanagari", system-ui, sans-serif;
}
.topbar a, .foot a { color: inherit; }
.topbar ul, .foot ul, .foot p { margin: 0; padding: 0; list-style: none; }
.topbar img, .foot img { display: block; max-width: none; }

/* While a non-English language loads (see the inline script in each page's <head>). */
.i18n-wait body { opacity: 0; }
body { transition: opacity .15s ease; }
/* The content pages' own font (styles.css) has no Gujarati or Devanagari; fall through to Noto. */
html:lang(gu) body, html:lang(hi) body { font-family: "Inter", "Noto Sans Gujarati", "Noto Sans Devanagari", system-ui, sans-serif; }

/* ---------- Top bar ---------- */
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 80px;
}
.topbar-brand img { width: 165px; height: 24px; }
.topbar-end { display: flex; align-items: center; gap: 16px; }
.store-badge { display: block; border-radius: 24px; }
.store-badge img { width: 172px; height: 48px; }
.store-badge:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 48px; padding: 0 8px;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: #fff; font: inherit; font-weight: 500; font-size: 16px; line-height: 20.25px; letter-spacing: -0.135px;
}
.lang-btn > img:last-child { margin-left: -2px; transition: transform .15s ease; }
.lang-btn[aria-expanded="true"] > img:last-child { transform: rotate(180deg); }
.lang-btn:focus-visible { outline: 2px solid #fff; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  min-width: 140px; padding: 6px;
  background: #fff; color: var(--c-ink);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.lang-menu li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.lang-menu li:hover, .lang-menu li:focus { background: var(--c-tint); outline: none; }
.lang-menu li[aria-selected="true"] { color: var(--c-blue); }

/* ---------- The other pages: the top bar on the dark band, the page title under it ---------- */
.subhead { background: var(--night); color: #fff; }
.subhead + .page-hero { background: #000711; padding: 32px 0 64px; }   /* a sibling, so it cannot see --night */
.subhead + .page-hero h1 { font-family: "Inter", "Baloo Bhai 2", "Baloo 2", system-ui, sans-serif; font-weight: 700; letter-spacing: -1px; }
.subhead + .page-hero p { color: #c7cbd6; }

/* ---------- Footer ---------- */
.foot { position: relative; background: var(--night); color: #fff; padding: 108px 100px 0; overflow: hidden; }
.foot-row { max-width: 1240px; min-height: 335px; margin: 0 auto; display: flex; align-items: flex-start; gap: 100px; }   /* Figma's row is 335 tall */
.foot-about { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; line-height: var(--c-lh); }
.foot-tag { font-size: 20px; }
.foot-desc { max-width: 391px; margin-top: -12px !important; font-size: 16px; }
/* Not in Figma: the phone and email the old home page carried. */
.foot-reach { display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.foot-reach a { text-decoration: none; opacity: .9; }
.foot-reach a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot-copy { font-size: 18px; max-width: 246px; }
.foot-cols { display: flex; gap: 40px; }
.foot-col { display: flex; flex-direction: column; gap: 16px; font-size: 18px; line-height: var(--c-lh); }
.foot-col:first-child { width: 189px; }
.foot-head { font-weight: 700; }
.foot-col ul { display: flex; flex-direction: column; gap: 14px; }
.foot-col a { text-decoration: none; opacity: .9; }
.foot-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot-col a:focus-visible, .foot-reach a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
.foot-badges { display: flex; flex-direction: column; gap: 19px; margin-left: -20px; }   /* Figma: 80px from the links, not 100 */
.foot-badges .store-badge { border-radius: 12px; }
.foot-badges .store-badge img { width: 246px; height: 69px; }
/* The big wordmark is wider than the footer's padding allows; centre it on the page instead. */
.foot-mark { width: min(1302px, calc(100vw - 2 * var(--c-gutter))); height: auto; margin: 20px 0 0 50%; transform: translateX(-50%); }

@media (max-width: 1240px) {
  .foot { padding-left: 40px; padding-right: 40px; }
  .foot-row { gap: 48px; }
  .foot-badges { margin-left: 0; }
  .foot-badges .store-badge img { width: 172px; height: 48px; }
}
@media (max-width: 1100px) {
  .topbar { padding: 20px 40px; }
  .foot-row { flex-wrap: wrap; }
  .foot-about { flex-basis: 100%; }
}
@media (max-width: 860px) {
  .topbar { padding: 16px var(--c-gutter); }
  .subhead + .page-hero { padding: 16px 0 48px; }
  .foot { padding: 72px var(--c-gutter) 0; }
  .foot-row { flex-direction: column; gap: 40px; min-height: 0; }
  .foot-badges { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .foot-mark { margin-top: 48px; }
}
@media (max-width: 640px) {
  .topbar-end .store-badge { display: none; }
  .foot-cols { gap: 24px; }
  .foot-col:first-child { width: auto; flex: 1; }
  .foot-col { font-size: 16px; }
  .foot-copy { font-size: 16px; }
}