/* Tokens
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  color-scheme: only light;
  --color-ink: #222;
  --color-paper: #fff;
  --color-accent: #11DFC7;
  --color-accent-ink: #075e55; /* accent dark enough for text and buttons on white */
  --color-band: #1c4f4a; /* solid backing behind the photo bands so white text keeps its contrast */
  --font-body: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 4rem;
}

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html { background: var(--color-paper); }
body {
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 1.7rem; /* 17px: phones never get text under 16px */
}
h1, h2, h3, h4, h5, h6 { letter-spacing: normal; }
img { max-width: 100%; height: auto; } /* keep photo proportions when width/height attributes are set */
.button,
button {
  border-radius: 100px;
  min-height: 44px;
  height: auto;
  padding: var(--space-1) var(--space-4);
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.button.button-primary,
button.button-primary {
  background-color: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  color: #fff;
}
.button.button-primary:hover,
button.button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus {
  background-color: #04403a;
  border-color: #04403a;
  color: #fff;
}
a { color: var(--color-accent-ink); }
a:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -10rem;
  z-index: 1000;
  padding: var(--space-1) var(--space-2);
  background: var(--color-paper);
  color: var(--color-ink);
}
.skip-link:focus { top: var(--space-2); }
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.actions .button,
.actions button { margin: 0; }
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 8rem 0 7rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: var(--space-3);
}
.section-heading { font-size: 3rem; }

/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero {
  background-color: var(--color-band);
  background-image: url('../img/background.png');
  background-blend-mode: multiply;
  background-size: cover;
  color: #fff;
  padding-bottom: 5rem;
}
.hero h1 { margin-bottom: var(--space-1); }
.hero-button {
  font-size: 2.4rem;
}
.phone {
  position: relative;
  max-width: 80%;
  margin: 3rem auto -12rem;
}

/* How it works
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Map
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#scan-map {
  width: 100%;
  height: 300px;
}
.map { text-align: left; }
#win-status { min-height: 2em; font-weight: 600; }

/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
  background-color: var(--color-band);
  background-blend-mode: multiply;
  background-image: url('../img/values-bg.jpg');
  background-size: cover;
  color: #fff;
  padding-bottom: 5rem;
}
.value-heading {
  margin-bottom: .5rem;
  color: #11DFC7;
}
.value-description {
  font-weight: 400;
}



/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    width: auto; /* let max-height scale the width too */
    z-index: 3;
  }
  #scan-map { height: 340px; }
  .hero-heading {
    font-size: 2.4rem;
  }
}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 20rem 0 19rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-button {
    font-size: 3.0rem;
  }
  .hero-heading {
    font-size: 3.0rem;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
}

/* Share and footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.share-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  padding: 0;
}
.share-links li { margin: 0; }
.share-links a {
  display: inline-block;
  padding: var(--space-1) 0;
  min-height: 44px;
  box-sizing: border-box;
}
.share-links button { margin: 0; }
.site-footer {
  padding: var(--space-4) 0;
  text-align: center;
}