/* Bandsintown legal pages — shared stylesheet.
   Typography tuned for long-form legal text: generous measure, clear hierarchy,
   and a print stylesheet so a policy can be exported cleanly for counsel. */

:root {
  --accent: #00d6c1;
  --accent-ink: #00786c;
  --fg: #16181d;
  --fg-muted: #5b616e;
  --bg: #ffffff;
  --bg-sunken: #f6f7f9;
  --rule: #e3e6ea;
  --measure: 44rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg: #e8eaee; --fg-muted: #a0a7b4; --bg: #14161a;
    --bg-sunken: #1b1e24; --rule: #2b3038; --accent-ink: #4ee7d6;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
}
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--fg); color: var(--bg);
  padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }


/* Logo sits top right. The asset is a 1500x307 wordmark displayed at 190x39,
   so it stays sharp on high-density screens. A light-on-dark variant is swapped
   in via <picture>, because the supplied artwork is black and would disappear
   against the dark theme. */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { display: block; width: 158px; height: auto; }
/* The policy navigation is collapsed at every width and opens as a dropdown
   over the page, so the header stays one row tall and the sticky offsets below
   do not have to account for an expanded nav. */
.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .9rem; font-weight: 600; background: var(--bg-sunken);
  color: var(--fg); border: 1px solid var(--rule); border-radius: .5rem;
  padding: .5rem .9rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.nav-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #04231f; }
.nav-toggle-icon { font-size: 1rem; line-height: 1; }

.site-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg-sunken); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
  max-height: calc(100vh - 4rem); overflow-y: auto;
}
.site-nav.is-open { display: block; }
.site-nav .wrap { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-top: 1.1rem; padding-bottom: 1.2rem; }
.nav-group { min-width: 0; }
.nav-group > h2 {
  margin: 0 0 .15rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--fg-muted);
}
.nav-group .nav-note { margin: 0 0 .5rem; font-size: .78rem; color: var(--fg-muted); }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.nav-list a {
  display: block; padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
  font-size: .88rem; border: 1px solid var(--rule); background: var(--bg); color: var(--fg);
}
.nav-list a:hover { border-color: var(--accent); }
.nav-list a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #04231f; font-weight: 600; }

/* ---------- layout ---------- */
.doc-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
.doc-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; padding-top: 2.5rem; padding-bottom: 4rem; align-items: start; }
.toc { position: sticky; top: 5.75rem; max-height: calc(100vh - 8rem); overflow-y: auto; font-size: .86rem; }
.toc > h2 { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--fg-muted); margin: 0 0 .6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc li > a { display: block; padding: .22rem 0 .22rem .8rem; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--fg-muted); }
.toc li > a:hover { color: var(--fg); }
.toc a.is-active { color: var(--fg); border-left-color: var(--accent); font-weight: 600; }
.toc .lvl-3 > a { padding-left: 1.6rem; font-size: .82rem; }
.toc .lvl-4 > a { padding-left: 2.4rem; font-size: .8rem; }

/* ---------- document ---------- */
.doc { max-width: var(--measure); }
.doc-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: .85rem; color: var(--fg-muted); }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pill-global { background: var(--accent); color: #04231f; }
.pill-platform { background: var(--bg-sunken); color: var(--fg-muted); border: 1px solid var(--rule); }

.doc h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 1.25rem; text-transform: none; }
.doc h2 { font-size: 1.16rem; margin: 2.75rem 0 .85rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); letter-spacing: -.01em; }
.doc h3 { font-size: 1.02rem; margin: 2rem 0 .6rem; }
.doc h4 { font-size: .95rem; margin: 1.5rem 0 .5rem; color: var(--fg-muted); }
.doc h2:target, .doc h3:target, .doc p:target { scroll-margin-top: 5.75rem; }
.doc p { margin: 0 0 1.05rem; }
.doc ul, .doc ol { margin: 0 0 1.05rem; padding-left: 1.4rem; }
.doc li { margin-bottom: .45rem; }
.doc strong { font-weight: 650; }
.doc a { overflow-wrap: anywhere; }
.doc table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5rem;
  font-size: .88rem; display: block; overflow-x: auto;
}
.doc thead th { background: var(--bg-sunken); text-align: left; }
.doc th, .doc td { border: 1px solid var(--rule); padding: .5rem .65rem; vertical-align: top; }

/* Opt-out call to action carried over from the source page's button block. */
.doc a.cta {
  /* Block with auto side margins rather than a text-align rule on the parent:
     centres the button without depending on :has() support. */
  display: block; width: fit-content; margin: 1.25rem auto 1.75rem; padding: .6rem 1.4rem;
  background: var(--accent); color: #04231f; border-radius: 999px;
  font-weight: 650; font-size: .92rem; text-decoration: none;
  border: 1px solid transparent;
}
.doc a.cta:hover { background: transparent; border-color: var(--accent); color: var(--accent-ink); }
.doc a.cta:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Uniform closing copyright notice, rendered for every policy document. */
.doc-copyright {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.doc-copyright p { margin: 0; font-size: .82rem; letter-spacing: .02em; color: var(--fg-muted); }
.doc-copyright strong { font-weight: 650; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); background: var(--bg-sunken); padding: 2.5rem 0; font-size: .88rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
/* Policies holds several groups, so give it a wider share once there is room. */
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.9fr 1fr 1.1fr; } }

/* Two columns: the long Terms of Use list on the left, the remaining groups
   stacked on the right. The stack is its own container so its groups pack
   tightly rather than being spread by the height of the left column. */
.footer-groups {
  display: grid; grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
  gap: 1.15rem 1.75rem; align-items: start;
}
.footer-stack { display: grid; gap: 1.15rem; align-items: start; }
.footer-group p.muted { margin-bottom: .4rem; }

@media (max-width: 30rem) { .footer-groups { grid-template-columns: 1fr; } }
.footer-col h2 { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--fg-muted); margin: 0 0 .7rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-index { margin-top: .9rem !important; padding-top: .7rem !important; border-top: 1px solid var(--rule); }
.footer-col li { margin-bottom: .35rem; }
.footer-col p { margin: 0 0 .4rem; }
.muted { color: var(--fg-muted); }

/* ---------- responsive ---------- */
@media (max-width: 62rem) {
  .doc-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .toc { position: static; max-height: none; border: 1px solid var(--rule); border-radius: .6rem; padding: 1rem; background: var(--bg-sunken); }
}
@media (max-width: 40rem) {
  body { font-size: 16px; }
  .logo img { width: 124px; }
  .site-nav .wrap { flex-direction: column; gap: 1.25rem; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .toc, .skip { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .doc-layout { display: block; padding: 0; }
  .doc { max-width: none; }
  .doc h2 { page-break-after: avoid; }
  .doc a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .doc table, .doc li, .doc p { page-break-inside: avoid; }
  .doc-copyright { border-top: 1px solid #999; page-break-inside: avoid; }
}

/* ---------- embed (/embed/...) ----------
   The document alone, for an iframe in another product. Always light: an
   iframe on a light host page in a dark-mode browser would otherwise render
   light text on the host's white. Transparent so it sits on the host page. */
html.embed { color-scheme: light; scroll-behavior: auto; }
html.embed body { background: transparent; }
.embed-main { padding: 1.25rem; }
.embed-main .doc { max-width: var(--measure); margin: 0 auto; }
.embed-main .doc h2:target, .embed-main .doc h3:target, .embed-main .doc p:target { scroll-margin-top: 1rem; }