/* ===========================================================================
   MTA — Política de Privacidade
   Standalone stylesheet for document-style pages. Deliberately independent of
   style.css so the landing page cannot regress.

   NOTE ON FONTS: this file intentionally does NOT import a webfont. style.css
   pulls Roboto from fonts.googleapis.com, which discloses the visitor's IP
   address to a third party on page load. That is inappropriate on a privacy
   policy — and legally contested in the EU. The stack below resolves to Roboto
   locally when installed, and to the platform UI face otherwise. No network
   request, no third party.
   ========================================================================= */

:root {
  /* Sampled from mind-the-app.pdf (slides 02 and 15) */
  --blue-700: #0b4a88;
  --blue-600: #0d5596;
  --blue-500: #1a6fb0;
  --navy-900: #0b4a88;
  --navy-800: #0a3060;
  --navy-700: #0d3d73;
  --mint-400: #1dd3c4;
  --mint-700: #0b6f68;

  --paper: #f7f9fb;
  --paper-edge: #e3eaf1;
  --ink: #14243a;
  --ink-soft: #5a6b7f;

  --font-sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --page: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Both forms are needed: the unprefixed property covers Chromium browsers,
     while Safari still only honours the -webkit- prefix. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  /* Same brand surface as the landing page (mind-the-app.pdf slides 02/15). */
  background-color: var(--blue-600);
  /* Bookends the field with the exact colour of the theme-color meta so
     that Safari's status bar and bottom toolbar, which it tints with that
     value, blend into the page. Same reasoning as assets/style.css. */
  background-image:
    linear-gradient(to bottom,
      var(--blue-600) 0,
      rgba(13, 85, 150, 0) 4.5rem,
      rgba(13, 85, 150, 0) calc(100% - 5rem),
      var(--blue-600) 100%),
    radial-gradient(ellipse 78% 42% at 100% 0%, rgba(5, 178, 189, .95) 0%, rgba(5, 178, 189, 0) 58%),
    radial-gradient(ellipse 72% 38% at 0% 100%, rgba(15, 145, 183, .8) 0%, rgba(15, 145, 183, 0) 58%),
    linear-gradient(155deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--blue-700) 100%);
  background-attachment: fixed;
}

/* --------------------------------------------------------------- utilities */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: #fff;
  color: var(--navy-700);
  padding: .75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--mint-400);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: relative;
  color: #fff;
  padding: clamp(2rem, 5vw, 3.25rem) 1.25rem clamp(4.5rem, 9vw, 7rem);
}

.masthead__inner {
  max-width: var(--page);
  margin: 0 auto;
}

.masthead__home {
  display: inline-block;
  line-height: 0;
  margin-bottom: clamp(2.5rem, 7vw, 4.5rem);
}

.masthead__home img {
  width: clamp(150px, 18vw, 185px);
  height: auto;
}

.masthead__home:hover {
  opacity: .75;
}

.eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c8f5ef;
}

.masthead h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.025em;
  /* max-width: 16ch; */
}

.masthead__meta {
  margin: 1.4rem 0 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .82);
}

/* ------------------------------------------------------------------- shell */

.shell {
  position: relative;
  max-width: var(--page);
  margin: -3rem auto 0;
  padding: 0 1.25rem clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

@media (min-width: 64rem) {
  .shell {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------- toc */

.toc {
  display: none;
}

@media (min-width: 64rem) {
  .toc {
    display: block;
    position: sticky;
    top: 4rem;
    align-self: start;
    /* padding-top: 4rem; */
  }
}

.toc__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c8f5ef;
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}

.toc__link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .4rem;
  padding: .3rem .5rem;
  border-radius: 6px;
  font-size: .85rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}

.toc__link span {
  font-family: var(--font-mono);
  font-size: .72rem;
  /* >= .72 required for 4.5:1 against this background at 11.5px */
  color: rgba(255, 255, 255, .80);
  transition: color .18s ease;
}

.toc__link:hover,
.toc__link.is-active {
  color: #fff;
  background-color: rgba(255, 255, 255, .07);
}

.toc__link:hover span,
.toc__link.is-active span {
  color: var(--mint-400);
}

/* ---------------------------------------------------------- document sheet */

.doc {
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .6);
  counter-reset: sec;
}

.doc p {
  margin: 0 0 1rem;
}

.doc a {
  color: var(--navy-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.doc a:hover {
  color: var(--mint-700);
}

/* ---------------------------------------------------------------- sections */

.sec {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  scroll-margin-top: 1.5rem;
  counter-increment: sec;
}

/* First section sits directly under the sheet's own padding. */
.sec:first-child {
  margin-top: 0;
}

.sec > h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .8rem;
  margin: 0 0 1.2rem;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--navy-700);
}

.sec > h2::after {
  content: "";
  grid-column: 1 / -1;
  height: 2px;
  margin-top: .75rem;
  background: linear-gradient(90deg, var(--mint-400) 0 2.75rem, var(--paper-edge) 2.75rem);
}

.sec__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--mint-700);
}

.sec h3 {
  margin: 1.9rem 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy-800);
}

/* ----------------------------------------------------------------- clauses */

/* The source document numbers every paragraph (1.1., 3.9.2.) and the numbers
   are how the policy is cited, so they are generated from counters rather than
   typed into the markup: renumbering on an edit is then impossible to get
   wrong. The prefix is absolutely positioned instead of using ::marker so a
   nested list inside a clause still flows under that clause's text. */

.clauses {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: clause;
}

.clauses > li {
  position: relative;
  margin: 0 0 1.15rem;
  padding-left: 3.1rem;
  counter-increment: clause;
}

.clauses > li::before {
  content: counter(sec) "." counter(clause) ".";
  position: absolute;
  left: 0;
  top: .2rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--mint-700);
}

.clauses > li > p:last-child {
  margin-bottom: 0;
}

.clauses--sub {
  margin-top: .9rem;
  counter-reset: subclause;
}

.clauses--sub > li {
  margin-bottom: .8rem;
  padding-left: 3.6rem;
  counter-increment: subclause;
}

.clauses--sub > li::before {
  content: counter(sec) "." counter(clause) "." counter(subclause) ".";
  color: var(--ink-soft);
  font-weight: 400;
}

.clauses--sub > li:last-child {
  margin-bottom: 0;
}

/* Narrow screens cannot spare 3rem of gutter to a four-character number, so
   the prefix moves onto its own line above the clause. */
@media (max-width: 30rem) {
  .clauses > li,
  .clauses--sub > li {
    padding-left: 0;
  }

  .clauses > li::before,
  .clauses--sub > li::before {
    position: static;
    display: block;
    margin-bottom: .15rem;
  }
}

/* ----------------------------------------------------------------- contact */

.contact {
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.3rem;
  background: #fff;
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--mint-400);
  border-radius: 8px;
  font-style: normal;
  line-height: 1.75;
}

/* ------------------------------------------------------------------ footer */

.footer {
  max-width: var(--page);
  margin: 0 auto;
  /* The trailing space is scroll travel, not just breathing room. A section's
     heading has to be able to rise to the index's detection line near the top
     of the viewport, and the closing sections can only do that if the page can
     still scroll once they are on screen. Hence a viewport-relative bottom:
     the taller the window, the further they have to climb. See
     assets/privacy-toc.js, which copes with whatever travel is left over. */
  padding: 0 1.25rem clamp(4rem, 18vh, 16rem);
  font-size: .85rem;
  color: rgba(255, 255, 255, .78);
}

@media (min-width: 64rem) {
  .footer {
    padding-left: calc(1.25rem + 14rem + 2.75rem);
  }
}

.footer a {
  color: #fff;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer a:hover {
  color: #fff;
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}