/* ===================================================================
 *  NebuSpot site styles
 *
 *  main.css is audivision.in's stylesheet with its blues swapped for the
 *  NebuSpot cyans (#007799 -> #007799, #00546b -> #00546b,
 *  #ccddff -> #e6f8fd, #5b93ff -> #01bcee, #9dbcff -> #7fdcf6); nothing
 *  else in it differs. Everything NebuSpot-specific lives here and loads
 *  after it.
 * =================================================================== */


/* -------------------------------------------------------------------
 * Header logo: the square NebuSpot mark instead of the Audivision eye.
 * ------------------------------------------------------------------- */

.header-logo a {
  width: 52px;
  height: 52px;
  background-image: url("../images/nebuspot-logo-128.png");
  background-size: 52px 52px;
}

@media only screen and (max-width: 768px) {
  .header-logo a {
    width: 46px;
    height: 46px;
    background-size: 46px 46px;
  }
}


/* -------------------------------------------------------------------
 * Hero: the street scene. The woman and the shelter are already
 * centre-right, clear of the text column, so there is no zoom.
 * ------------------------------------------------------------------- */

.hero-photo-only .hero-photo {
  /* keep the woman, her phone and the marker in frame */
  object-position: 50% 45%;
}

.hero-photo-only .hero-frame .hero-photo {
  transform: none;
}

@media only screen and (max-width: 768px) {
  .hero-photo-only .hero-photo {
    /* the narrow crop centres on the woman and the marker */
    object-position: 66% 50%;
  }
}


/* -------------------------------------------------------------------
 * Intro paragraphs under a centred section header.
 * ------------------------------------------------------------------- */

.nebu-intro {
  max-width: 800px;
  margin: 3.6rem auto 0;
  color: #2b2b2b;
  text-align: center;
}

.nebu-intro a {
  text-decoration: underline;
}

#impact .impact-how {
  padding-bottom: 3rem;
}


/* -------------------------------------------------------------------
 * How it works: the steps and features are real lists, laid out with
 * the same block grid as the Audivision feature cards.
 * ------------------------------------------------------------------- */

#solution {
  min-height: 0;
}

.solution-features .features-list {
  margin-left: 0;
  list-style: none;
}

.solution-features .features-list > li {
  display: block;
}

.nebu-step-number {
  color: #007799;
  font-family: "montserrat-bold", sans-serif;
}

.nebu-more {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.nebu-more .features-list {
  padding-top: 3rem;
}

.nebu-subhead {
  padding: 0 20px;
  font-family: "montserrat-regular", sans-serif;
  font-size: 2.4rem;
  color: #151515;
}

.solution-features .feature h4 {
  font-family: "montserrat-regular", sans-serif;
  font-size: 1.9rem;
  line-height: 1.5;
  color: #151515;
  margin-bottom: 1.5rem;
}

/* three steps in one row on desktop, one per row on phones */
@media only screen and (max-width: 1024px) and (min-width: 601px) {
  .nebu-steps.block-m-1-2 .bgrid {
    width: 33.33333%;
  }
  .nebu-steps.block-m-1-2 .bgrid:nth-child(n) {
    clear: none;
  }
}


/* -------------------------------------------------------------------
 * How it differs from QR: one card per question, the QR answer above the
 * NebuSpot one. A definition list keeps the two answers paired for
 * screen readers.
 * ------------------------------------------------------------------- */

#different {
  background: #f9f9f9;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#different .lead {
  color: #2b2b2b;
  margin-top: 3.6rem;
  max-width: 900px;
}

.nebu-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 1rem 20px 0;
  padding: 0;
  list-style: none;
}

.nebu-compare-item {
  display: block;
  margin: 0;
  padding: 2.8rem 3rem 1rem;
  background: #ffffff;
  border: 1px solid #dfe3ea;
  border-radius: 1rem;
}

.nebu-compare-item h3 {
  margin-bottom: 1.6rem;
  font-family: "montserrat-medium", sans-serif;
  font-size: 2.1rem;
  color: #151515;
}

.nebu-compare-item dl {
  margin: 0;
}

.nebu-compare-item dt {
  margin: 0 0 .4rem;
  font-family: "montserrat-medium", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
}

.nebu-compare-item dd {
  margin: 0 0 2rem;
  font-size: 1.7rem;
  line-height: 1.6;
  color: #2b2b2b;
}

.nebu-compare-item dt.nebu-qr {
  color: #5a5a5a;
}

.nebu-compare-item dt.nebu-ns {
  color: #007799;
}

/* the NebuSpot answer gets a blue rule so the pairs read at a glance */
.nebu-compare-item dt.nebu-ns,
.nebu-compare-item dt.nebu-ns + dd {
  padding-left: 1.4rem;
  border-left: 4px solid #007799;
}

.nebu-compare-item dt.nebu-ns {
  margin-bottom: 0;
  padding-top: .2rem;
  padding-bottom: .4rem;
}

.nebu-compare-item dt.nebu-ns + dd {
  padding-bottom: .4rem;
}

@media only screen and (max-width: 768px) {
  .nebu-compare {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }
  .nebu-compare-item {
    padding: 2.2rem 2rem .6rem;
  }
}


/* -------------------------------------------------------------------
 * App screens: the Play listing screenshots, four across on desktop,
 * two across on tablets and phones.
 * ------------------------------------------------------------------- */

#screens {
  background: #ffffff;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#screens .lead {
  color: #2b2b2b;
  margin-top: 3.6rem;
}

.nebu-screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem;
  margin: 1rem 20px 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.nebu-screens li {
  display: block;
  margin: 0;
  padding: 0;
}

.nebu-screens img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.8rem;
  border-radius: 1.2rem;
}

.nebu-screens h3 {
  margin-bottom: .6rem;
  font-family: "montserrat-medium", sans-serif;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #151515;
}

.nebu-screens p {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #4a4a4a;
}

@media only screen and (max-width: 1024px) {
  .nebu-screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 400px) {
  .nebu-screens {
    gap: 1.6rem;
  }
  .nebu-screens h3 {
    font-size: 1.6rem;
  }
  .nebu-screens p {
    font-size: 1.4rem;
  }
}


/* -------------------------------------------------------------------
 * For venues (reuses #about) and the team section.
 * ------------------------------------------------------------------- */

#about {
  background: #f9f9f9;
}

.nebu-cta {
  margin-top: 1rem;
}

.nebu-cta .button {
  height: auto;
  min-height: 5.4rem;
  line-height: 1.4;
  padding: 1.6rem 3rem;
  white-space: normal;
}

.nebu-cta .button:hover,
.nebu-cta .button:focus {
  background-color: #00546b;
  border-color: #00546b;
  color: #ffffff;
}

#track-record {
  background: #ffffff;
  padding-top: 5rem;
}

#track-record .impact-how {
  padding-top: 0;
  padding-bottom: 0;
}

#track-record .impact-stats {
  margin-bottom: 2rem;
}


/* -------------------------------------------------------------------
 * Footer: three columns, the middle one a list of links.
 * ------------------------------------------------------------------- */

.nebu-footer-links {
  margin: 0 0 2.4rem;
  list-style: none;
}

.nebu-footer-links li {
  display: block;
  padding: 0;
}

/* footer ul a is 0.25 white in main.css (2.4:1); match the other footer links */
.nebu-footer-links a,
.nebu-footer-links a:visited {
  display: inline-block;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.85);
}

.nebu-footer-links a:hover,
.nebu-footer-links a:focus {
  color: #ffffff;
}


/* -------------------------------------------------------------------
 * Hero title in the cyan of the NebuSpot logo (#01bcee), which reads
 * at well over 7:1 on the dark panel behind it.
 * ------------------------------------------------------------------- */

.hero-overlay-title {
  color: #01bcee;
}

.hero-overlay-title::after {
  background-color: #01bcee;
}

/* The NebuSpot tagline is a line longer than audivision.in's, so on
   phones the dark band above the photo is 40px taller to keep the last
   line clear of the photo. */
@media only screen and (max-width: 768px) {
  .hero-frame {
    padding-top: 160px;
  }
  .hero-photo-only .hero-photo {
    height: calc(100vh - 72px - 160px);
  }
  .hero-frame::after {
    background: linear-gradient(180deg,
      rgba(6, 8, 12, 1) 0,
      rgba(6, 8, 12, 1) 160px,
      rgba(6, 8, 12, 0.8) 210px,
      rgba(6, 8, 12, 0.35) 255px,
      rgba(6, 8, 12, 0) 290px);
  }
}


/* -------------------------------------------------------------------
 * Disclaimer on the hero photo, bottom right: the marker is added
 * digitally and the bus stop has no connection with NebuSpot.
 * ------------------------------------------------------------------- */

.hero-disclaimer {
  position: absolute;
  z-index: 2;
  right: 1.6rem;
  bottom: 1.4rem;
  max-width: 46rem;
  margin: 0;
  padding: .4rem .9rem;
  border-radius: .4rem;
  background-color: rgba(0, 0, 0, 0.66);
  font-family: "muli-regular", sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #ffffff;
}

@media only screen and (max-width: 768px) {
  .hero-disclaimer {
    right: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    padding: .3rem .8rem;
    font-size: 1.05rem;
  }
}


/* -------------------------------------------------------------------
 * Cyan theme. Headings are a darker shade of the title cyan (#007799,
 * 5.1:1 on white), card titles darker still (#00546b, 8.5:1), and the
 * underline bars use the title cyan itself. The download band is
 * #007799, so its heading is white; the footer headings on black use
 * the title cyan (8.2:1).
 * ------------------------------------------------------------------- */

#main h2,
#main .nebu-subhead {
  color: #007799;
}

#main h3,
#main h4 {
  color: #00546b;
}

#main h2::before {
  background-color: #01bcee;
}

#main #download h2 {
  color: #ffffff;
}

#main #download h2::before {
  background-color: #ffffff;
}

footer .footer-contact h2 {
  color: #01bcee;
}

.impact-stat-number {
  color: #007799;
}