/* ------------------------------------------------------------------
   Legal documents — Terms, Privacy, Cookies.

   Loaded after trips-meridian.css, so the palette, the type and the
   navigation are already the site's. Nothing here introduces a colour
   or a typeface; it lays out a long document and nothing more.

   The shape is a contents rail beside one readable column. A policy is
   read by somebody hunting for one clause, so the rail stays visible
   and every heading is a link target.
   ------------------------------------------------------------------ */

.legal-page {
  --legal-ink: #f4f1fa;
  --legal-body: rgba(226, 224, 240, .84);
  --legal-quiet: rgba(188, 186, 214, .78);
  --legal-rule: rgba(176, 187, 232, .18);
  --legal-edge: rgba(110, 122, 188, .26);
  --legal-accent: #a78aff;
  --legal-accent-soft: #cdbdff;
  --legal-panel: rgba(13, 25, 56, .58);
}

.legal-doc {
  margin: 0 24px;
  padding: 0;
  color: var(--legal-body);
  background: #0d1938;
}

/* ---------------------------------------------------------- the hero */

.legal-doc__hero {
  padding: 54px 60px 34px;
  border-bottom: 1px solid var(--legal-rule);
  background:
    radial-gradient(circle at 12% 0, rgba(103, 78, 214, .28), transparent 46%),
    #0d1938;
}

.legal-doc__hero h1 {
  max-width: 18ch;
  margin: 8px 0 0;
  color: #fff;
  font: 700 clamp(38px, 5vw, 62px)/1.02 "Playfair Display", Georgia, serif;
  letter-spacing: -.025em;
  text-transform: none;
}

.legal-doc__lead {
  max-width: 66ch;
  margin: 18px 0 0;
  color: rgba(228, 226, 242, .84);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
}

.legal-doc__meta {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legal-doc__meta span {
  padding: 6px 12px;
  border: 1px solid var(--legal-edge);
  border-radius: 999px;
  color: var(--legal-quiet);
  background: rgba(9, 18, 42, .6);
}

/* Sibling documents, offered as a strip rather than buried in the footer:
   somebody reading the terms is often looking for the privacy policy. */
.legal-doc__switch {
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-doc__switch a {
  padding: 10px 18px;
  border: 1px solid var(--legal-edge);
  border-radius: 8px;
  color: rgba(233, 231, 245, .86);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(9, 18, 42, .5);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.legal-doc__switch a:hover,
.legal-doc__switch a:focus-visible {
  border-color: rgba(144, 113, 255, .6);
  color: #fff;
  background: rgba(84, 60, 184, .22);
}

.legal-doc__switch a.is-active {
  border-color: rgba(144, 113, 255, .72);
  color: #fff;
  background: rgba(84, 60, 184, .34);
}

/* -------------------------------------------------------- the layout */

.legal-doc__layout {
  padding: 42px 60px 64px;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}

/* --------------------------------------------------- the contents rail */

.legal-doc__contents {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 16px;
}

.legal-doc__contents nav > p {
  margin: 0 0 14px;
  color: var(--legal-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.legal-doc__contents nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  display: grid;
  gap: 2px;
}

.legal-doc__contents nav a {
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  border-radius: 7px;
  color: rgba(226, 224, 240, .78);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .16s ease, background .16s ease;
}

.legal-doc__contents nav a span {
  color: rgba(167, 138, 255, .8);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.legal-doc__contents nav a:hover,
.legal-doc__contents nav a:focus-visible {
  color: #fff;
  background: rgba(84, 60, 184, .22);
}

.legal-doc__aside-card {
  padding: 16px 16px 18px;
  border: 1px solid var(--legal-edge);
  border-radius: 12px;
  background: var(--legal-panel);
}

.legal-doc__aside-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--legal-ink);
  font-size: 14px;
}

.legal-doc__aside-card p {
  margin: 0;
  color: rgba(218, 217, 233, .74);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

.legal-doc__aside-card a { color: var(--legal-accent-soft); overflow-wrap: anywhere; }

/* ------------------------------------------------------ the document */

.legal-doc__body { min-width: 0; }
.legal-doc__body {
  max-width: 74ch;
  font-size: 16px;
  line-height: 1.68;
}

.legal-doc__body > section + section {
  margin-top: 36px;
  padding-top: 34px;
  border-top: 1px solid var(--legal-rule);
}

.legal-doc__body h2 {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  color: #fff;
  font: 700 clamp(22px, 2.2vw, 28px)/1.2 "Playfair Display", Georgia, serif;
  letter-spacing: -.015em;
  text-transform: none;
  scroll-margin-top: 96px;
}

.legal-doc__number {
  color: rgba(167, 138, 255, .85);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.legal-doc__body > section { scroll-margin-top: 96px; }

.legal-doc__body h3 {
  margin: 26px 0 10px;
  color: var(--legal-ink);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.legal-doc__body p { margin: 0 0 14px; }
.legal-doc__body p:last-child { margin-bottom: 0; }

.legal-doc__body strong { color: var(--legal-ink); font-weight: 700; }

.legal-doc__body a {
  color: var(--legal-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal-doc__body a:hover { color: #fff; }

.legal-doc__body :is(ul, ol) {
  margin: 0 0 16px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.legal-doc__body li { padding-left: 4px; }
.legal-doc__body li::marker { color: rgba(167, 138, 255, .75); }

/* A short list of definitions — used for the data and cookie inventories. */
.legal-facts {
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.legal-facts > div {
  padding: 14px 16px;
  border: 1px solid var(--legal-edge);
  border-radius: 10px;
  background: var(--legal-panel);
}

.legal-facts dt {
  margin-bottom: 5px;
  color: var(--legal-ink);
  font-size: 14px;
  font-weight: 700;
}

.legal-facts dd {
  margin: 0;
  color: rgba(218, 217, 233, .78);
  font-size: 14px;
  line-height: 1.55;
}

.legal-facts dd + dd { margin-top: 5px; }

.legal-facts dd b {
  color: rgba(167, 138, 255, .9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* A real table, for the cookie and third-party inventories. Wide content
   scrolls inside its own box so the page body never scrolls sideways. */
.legal-table-wrap {
  margin: 0 0 18px;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--legal-edge);
  border-radius: 12px;
  background: var(--legal-panel);
}

.legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.legal-table :is(th, td) {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--legal-rule);
}

.legal-table tr:last-child :is(th, td) { border-bottom: 0; }

.legal-table th {
  color: var(--legal-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.legal-table td { color: rgba(218, 217, 233, .8); line-height: 1.5; }
.legal-table td:first-child { color: var(--legal-ink); font-weight: 600; }
.legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

/* A pulled-out paragraph for the one thing on the page that matters most. */
.legal-note {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(144, 113, 255, .45);
  border-left-width: 3px;
  border-radius: 10px;
  color: rgba(232, 230, 246, .9);
  background: rgba(84, 60, 184, .18);
}

.legal-note p:last-child { margin-bottom: 0; }

.legal-doc :is(a, button):focus-visible {
  outline: 2px solid var(--legal-accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ narrow */

@media (max-width: 1040px) {
  /* minmax(0, 1fr), not 1fr: a grid item's automatic minimum size is its
     min-content, so the cookie table's min-width: 520px was propagating up
     and scrolling the whole page sideways on a phone. */
  .legal-doc__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 34px 48px; }
  .legal-doc__hero { padding: 40px 34px 28px; }
  .legal-doc__contents {
    position: static;
    padding: 16px 18px;
    border: 1px solid var(--legal-edge);
    border-radius: 12px;
    background: var(--legal-panel);
  }
  .legal-doc__contents nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-doc__aside-card { border: 0; padding: 0; background: none; }
}

@media (max-width: 720px) {
  .legal-doc { margin: 0 8px; }
  .legal-doc__hero { padding: 30px 18px 22px; }
  .legal-doc__layout { padding: 22px 18px 36px; }
  .legal-doc__contents nav ol { grid-template-columns: 1fr; }
  .legal-doc__body { font-size: 15.5px; }
  .legal-doc__body h2 { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
}

@media print {
  .legal-doc { margin: 0; background: #fff; color: #111; }
  .legal-doc__contents, .legal-doc__switch, .trips-shared-nav { display: none; }
  .legal-doc__layout { display: block; padding: 0; }
  .legal-doc__body { max-width: none; }
  .legal-doc__body :is(h2, h3, strong) { color: #000; }
}