/*
 * Element and layout styles. Every value is a token from tokens.css - no
 * literal colours, spacing or type sizes here.
 *
 * Mobile-first, one breakpoint at 720px.
 */

* {
  box-sizing: border-box;
}

/* Reserve the scrollbar gutter so the centred column does not shift between
   pages that scroll and pages that do not. */
html {
  scrollbar-gutter: stable;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
}

h1 {
  font-size: var(--text-title1-size);
  line-height: var(--text-title1-line);
  font-weight: var(--text-title1-weight);
  letter-spacing: var(--text-title1-tracking);
  margin: 0 0 var(--space-md);
}

h2 {
  font-size: var(--text-title2-size);
  line-height: var(--text-title2-line);
  font-weight: var(--text-title2-weight);
  letter-spacing: var(--text-title2-tracking);
  margin: var(--space-lg) 0 var(--space-md);
}

h3 {
  font-size: var(--text-title3-size);
  line-height: var(--text-title3-line);
  font-weight: var(--text-title3-weight);
  margin: var(--space-lg) 0 var(--space-sm);
}

/* Paper and underlined, never an accent colour - the app carries no accent hue. */
a {
  color: var(--on-surface);
  text-decoration: underline;
}

.card {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Content column: centred, capped width, responsive side padding. */
.content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 720px) {
  .content {
    padding: 0 var(--space-lg);
  }
}

/* Header: wordmark left, nav right, both inside the content column so they
   line up with the page copy. */
.site-brand {
  display: inline-flex;
  text-decoration: none;
}
.site-header {
  padding: var(--space-xl) 0 var(--space-md);
}

.site-header .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-nav {
  display: flex;
  gap: var(--space-md);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*
 * Narrow screens collapse the nav behind a menu button. Without JavaScript
 * the button never appears and the links stay in the header.
 */
.nav-toggle {
  display: none;
  padding: var(--space-sm);
  margin: calc(-1 * var(--space-sm));
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--on-surface);
  cursor: pointer;
}

.nav-toggle svg {
  display: block;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-open,
.nav-toggle[aria-expanded="false"] .nav-toggle-close {
  display: none;
}

@media (max-width: 719px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  /* While the menu is open the header pins to the top of the viewport so the
     wordmark and close button stay in place however far the page had
     scrolled. The menu is a child of the header, so both sit above it. */
  .js .nav-open .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }

  .js .nav-open .site-brand,
  .js .nav-open .nav-toggle {
    position: relative;
    z-index: 2;
  }

  .js .site-nav {
    display: none;
  }

  /* The open menu covers the page below the header. */
  .js .site-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    gap: var(--space-lg);
    padding: calc(var(--space-xxl) + var(--space-xl) + var(--space-md)) var(--space-md) var(--space-xl);
    background: var(--surface);
    font-size: var(--text-title2-size);
    line-height: var(--text-title2-line);
    letter-spacing: var(--text-title2-tracking);
  }

  .js .nav-open {
    overflow: hidden;
  }
}

/*
 * Nav links are undecorated and dimmed; the page you are on is the one at
 * full strength. An underline is reserved for pointer and keyboard focus,
 * so it always means "this is what you are about to follow" rather than
 * "this is a link" - which, in a nav, is not news.
 */
.site-nav a {
  color: var(--on-surface-muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--on-surface);
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  color: var(--on-surface);
  font-weight: 600;
}

/*
 * CMS body copy (about, privacy). Spacing matches
 * rubbishapp-mobile/src/theme/html.ts, which styles the same CKEditor
 * output for react-native-render-html - edit both when either changes.
 */
.prose {
  max-width: 65ch;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 var(--space-md);
}

.prose li {
  margin-bottom: var(--space-sm);
}

.prose h2 {
  margin: var(--space-lg) 0 var(--space-md);
  font-weight: 700;
}

.prose h3 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-weight: 600;
}

.prose h4 {
  margin: var(--space-md) 0 var(--space-sm);
  font-weight: 600;
}

.prose a {
  color: var(--on-surface);
  text-decoration: underline;
}

.prose strong,
.prose b {
  font-weight: 700;
}

.prose em,
.prose i {
  font-style: italic;
}

/* Footer */
.site-footer {
  margin-top: var(--space-xxl);
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--surface-line);
  color: var(--on-surface-muted);
  font-size: var(--text-footnote-size);
  line-height: var(--text-footnote-line);
  font-weight: var(--text-footnote-weight);
}

.site-footer .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.footer-copyright {
  margin: 0;
  text-align: right;
}

.footer-credit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--on-surface-muted);
  text-decoration: none;
}

.footer-credit:hover,
.footer-credit:focus-visible {
  color: var(--on-surface);
  text-decoration: underline;
}

/*
 * Home hero: copy above the phone on narrow screens, side by side from the
 * breakpoint up.
 */
.hero {
  display: grid;
  gap: var(--space-xl);
  justify-items: center;
  padding: var(--space-lg) 0 var(--space-xl);
}

/*
 * Two columns: the bin beside the headline on the first row, then the subhead
 * and the badges across both. Left-aligned at every width - it never centres.
 */
.hero-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-lg);
  text-align: left;
}

.hero-copy .hero-subhead,
.hero-copy .badges {
  grid-column: 1 / -1;
}

/* The badge row centres on the subhead rather than on the column, so the
   two read as one block however wide the subhead runs. */
.hero-copy .hero-subhead {
  width: fit-content;
  margin-inline: auto;
}

.hero-copy .badges {
  justify-content: center;
}

/*
 * The bin leads the copy, as it does on the share card. Decorative: the
 * headline beside it says the same thing in words, so it carries an empty
 * alt rather than a description a screen reader would hear twice.
 */
.hero-mark {
  display: block;
  width: auto;
  height: var(--hero-mark-height);
}

.hero h1 {
  font-size: var(--text-hero-size);
  line-height: var(--text-hero-line);
  font-weight: var(--text-display-large-weight);
  letter-spacing: var(--text-hero-tracking);
  margin: 0 0 var(--space-sm);
}

.hero-subhead {
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  font-weight: var(--text-hero-subhead-weight);
  color: var(--paper-raised);
  margin: var(--space-xl) 0;
}

@media (min-width: 720px) {
  .hero {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-xxl);
    padding: var(--space-xl) 0 var(--space-xxl);
  }

  .hero-copy {
    column-gap: var(--space-xl);
  }

  .hero-mark {
    height: var(--hero-mark-height-large);
  }

  .hero-subhead {
    font-size: var(--text-title3-size);
    line-height: var(--text-title3-line);
  }

  .hero-phone {
    --phone-width: var(--phone-width-large);
  }

  .hero h1 {
    font-size: var(--text-hero-size-large);
    line-height: var(--text-hero-line-large);
    letter-spacing: var(--text-hero-tracking-large);
  }
}

/* Store badges. The gap keeps Apple's required clear space (a quarter of the
   badge height) around its plate. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.badges a,
.badges span {
  display: inline-flex;
}

.badge {
  display: block;
  height: var(--badge-height);
  width: auto;
}

/*
 * A rendered device rather than a CSS-drawn frame: the image carries its own
 * bezel, angle and transparent margin, so it only needs a width. It scales
 * down with the column on narrow screens.
 */
.hero-phone img {
  display: block;
  width: var(--phone-width);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* The three selling points, one card each, side by side once there is room.
   Each card carries a small gold icon at its top-right. */
.points {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 720px) {
  .points {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}

.points .card h2 {
  margin-top: 0;
}

.card-icon {
  flex: none;
  width: var(--card-icon-size);
  height: var(--card-icon-size);
}

.points .card p {
  margin: 0;
}

.covers {
  margin: var(--space-xl) 0 var(--space-xxl);
  text-align: center;
  color: var(--on-surface-muted);
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-line);
  font-weight: var(--text-subhead-weight);
}