/* Styles for the four legal pages: Privacy Policy, Terms of Service, Cookie Notice and Accessibility Statement. They keep their own markup and class names; this sheet styles them with the site's tokens. */

/* ===== 1. Page frame: the hero prints first and the breadcrumb after it; the breadcrumb sits above the title, in a row, with the header's scroll offset. ===== */
main:has(> .sb-page-hero) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  background: var(--paper);
}
main:has(> .sb-page-hero)::before { content: ""; grid-column: 1; grid-row: 1 / 3; background: var(--hero-sky); }
main > .sb-breadcrumbs { grid-column: 1; grid-row: 1; position: relative; min-width: 0; }
main > .sb-page-hero { grid-column: 1; grid-row: 2; position: relative; min-width: 0; }
main > .sb-legal { grid-column: 1; grid-row: 3; min-width: 0; }

/* the three containers share one width and gutter with every other page (.wrap and .sb-hero__copy in site.css) */
.sb-breadcrumbs > .sb-container,
.sb-page-hero > .sb-container,
.sb-legal > .sb-container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* ============================================================ 2. BREADCRUMB
   The same look as .sb-breadcrumb (site.css section 7): inline, a slash between crumbs, every link a 44 px target, the current page in navy 600.
   The theme's list is a numbered <ol>, so the numbers and the left padding are removed. */
.sb-breadcrumbs { padding-top: var(--sp-3); }
.sb-breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 var(--sp-4); padding: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--text-soft); }
.sb-breadcrumbs li { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.sb-breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0; color: var(--text-soft); }
.sb-breadcrumbs li:nth-last-child(2)::after { margin-right: 8px; }
.sb-breadcrumbs a { color: var(--text-soft); text-decoration: underline; text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.sb-breadcrumbs a:visited { color: var(--text-soft); }
.sb-breadcrumbs [aria-current] { color: var(--text); font-weight: 600; padding-inline: 0; }
.sb-breadcrumbs li:first-child a { margin-left: -8px; }
@media (min-width: 64em) { .sb-breadcrumbs { padding-top: 24px; } }

/* ============================================================ 3. HERO
   The scale and the spacing of the type-led hero (.sb-hero--type): H1 at --fs-h1, 48 px below on a phone and 64 px from 64em, left aligned (the theme's
   .sb-text-center is overridden), the line under it at lede size. The breadcrumb above supplies the space that the guide pages put above the H1. */
.sb-page-hero { padding-block: 0 var(--sp-7); background: none; color: var(--text); }
.sb-page-hero > .sb-container { text-align: left; }
.sb-page-hero__h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.15; letter-spacing: var(--trk-h1); font-weight: var(--w-display); color: var(--text); max-width: none; }
/* Line height 1.15 for the title: when the heading wraps across its two text nodes the line boxes must not overlap (WCAG 1.4.10). */
.sb-page-hero__h1 em { font-style: normal; font-weight: inherit; }   /* the theme sets a word of the heading in <em>; the design has no italics */
.sb-page-hero__sub { margin: var(--sp-4) 0 0; max-width: 36rem; font-size: var(--fs-lede); line-height: 1.45; color: var(--text); }
@media (min-width: 64em) { .sb-page-hero { padding-block: 0 64px; } }

/* ===== 4. Body text: one reading column, about 70 characters a line at 18 px. ===== */
.sb-legal { background: var(--paper); color: var(--text); padding-block: var(--sp-7) var(--section); }
.sb-legal__body { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); }
.sb-legal__body > * + * { margin-top: var(--sp-4); }
.sb-legal__updated { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
.sb-legal__body h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); }
.sb-legal__body h3 { margin-top: var(--sp-6); font-size: var(--fs-h4); line-height: 1.28; letter-spacing: -.008em; }
.sb-legal__body h2, .sb-legal__body h3 { hyphens: manual; }   /* a short heading wraps at its spaces; site.css hyphenates headings, which cut "compen-sation" at 375 px */
.sb-legal__body .sb-legal__updated + h2 { margin-top: var(--sp-7); }
.sb-legal__body h2 + *, .sb-legal__body h3 + * { margin-top: var(--sp-3); }
.sb-legal__body strong { font-weight: 600; }
.sb-legal__body em { font-style: normal; font-weight: 500; }   /* the design has no italics; emphasis is a step in weight */
.sb-legal__body h2 em, .sb-legal__body h3 em { font-weight: inherit; }

/* From 64em the text takes the two-column form of the guides: each H2 hangs on the left beside its text. */
@media (min-width: 64em) {
  .sb-legal__body { max-width: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; }
  .sb-legal__body > * { grid-column: 6 / -1; min-width: 0; max-width: var(--measure); }
  .sb-legal__body > h2 { grid-column: 1 / span 4; max-width: none; }
  .sb-legal__body > h2, .sb-legal__body > h2 + :not(h2) { margin-top: var(--sp-8); }
  .sb-legal__body > .sb-legal__updated + h2, .sb-legal__body > .sb-legal__updated + h2 + :not(h2) { margin-top: var(--sp-7); }
}
@media (min-width: 80em) {
  .sb-legal__body > * { grid-column: 7 / -1; max-width: none; }
  .sb-legal__body > h2 { grid-column: 1 / span 5; }
}

/* ============================================================ 5. LINKS
   Underlined in every state, link blue on white (7.5:1), visited purple, the one focus ring of the system (3 px, 3 px offset). A long address wraps. */
.sb-legal__body a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.sb-legal__body a:visited { color: var(--link-visited); }
.sb-legal__body a:hover { text-decoration-thickness: 2px; }
.sb-legal__body a:focus-visible, .sb-breadcrumbs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* ===== 6. Lists and tables: bullets kept with a hanging indent; tables use hairline rows and scroll inside their own box rather than widening the page. ===== */
.sb-legal__body ul, .sb-legal__body ol { padding-left: 1.25em; margin-bottom: 0; }
.sb-legal__body ul { list-style: disc; }
.sb-legal__body ol { list-style: decimal; }
.sb-legal__body li { margin: 0; padding-left: .25em; }
.sb-legal__body li + li { margin-top: var(--sp-2); }
.sb-legal__body li::marker { color: var(--sky-text); }
.sb-legal__body li > ul, .sb-legal__body li > ol { margin-top: var(--sp-2); }
.sb-legal__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.5; }
.sb-legal__body th, .sb-legal__body td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.sb-legal__body thead th { font-weight: 600; color: var(--text); border-bottom: 2px solid var(--navy); }
.sb-legal__body tbody th { font-weight: 600; }
.sb-legal__body hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--sp-7); }
.sb-legal__body blockquote { padding-left: var(--sp-4); border-left: 4px solid var(--sky); color: var(--text); }

/* ============================================================ 7. PRINT
   Paper: no pinned header, no gradient, black on white, the address of every outside link printed after it, headings kept with their text. */
@media print {
  main:has(> .sb-page-hero) { display: block; }
  main:has(> .sb-page-hero)::before { display: none; }
  .sb-breadcrumbs, .sb-legal { padding-block: 0; }
  .sb-breadcrumbs { padding-bottom: 8pt; }
  .sb-breadcrumbs ol { margin-bottom: 0; }
  .sb-page-hero { padding-block: 0 12pt; }
  .sb-page-hero__h1 { font-size: 24pt; }
  .sb-page-hero__sub { font-size: 12pt; max-width: none; }
  .sb-legal__body { display: block; max-width: none; font-size: 11pt; line-height: 1.45; }
  .sb-legal__body > *, .sb-legal__body > h2 { grid-column: auto; max-width: none; }
  .sb-legal__body h2 { font-size: 15pt; margin-top: 18pt; break-after: avoid; }
  .sb-legal__body h3 { font-size: 12.5pt; margin-top: 12pt; break-after: avoid; }
  .sb-legal__body p, .sb-legal__body li { orphans: 3; widows: 3; }
  .sb-legal__body li { break-inside: avoid; }
  .sb-legal__body a, .sb-legal__body a:visited { color: #000; }
  .sb-legal__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9.5pt; overflow-wrap: anywhere; }   /* a mailto link is not printed: its address is the link text */
  .sb-legal__updated { border-bottom-color: #000; color: #000; }
}