@font-face {
    font-family: 'California Oranges';
    src: url('font/CaliforniaOrangesSlanted.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

:root {
  --clr-brown: rgb(212, 108, 72);
  --clr-grey: #b7c1c1;
  --clr-tan: rgb(241, 233, 219);
  --clr-teal: rgb(63, 127, 142);
  --clr-yellow: rgb(232, 211, 27);
  --boxed-width: 1100px;
  --tra-short: 250ms;
}
body {
  margin: 0;
  font-family: Poppins;
  font-size: 16px;
  line-height: 1.7;
}
body.privacy {
  margin: 1em max(1em, 10vw);
}
a {
  text-underline-offset: 2px;
}
h2 {
  font-family: 'California Oranges';
  font-size: 3em;
  font-weight: normal;
  font-style: italic;
  line-height: 0.7;
}
h3 {
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.2;
}
details {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1.5em;
  > summary {
    font-weight: 600;
    margin-bottom: 0.5em;
    margin-left: -1.5em;
    list-style: none;
    display: flex;
    gap: 1em;
    justify-content: space-between;
    @media (min-width: 740px) {
      gap: 0.5em;
      justify-content: start;
    }
    align-items: start;
    &::marker {content: '';}
    &::after {
      content: '';
      display: inline-block;
      position: relative;
      top: 7px;
      width: 0.75em;
      aspect-ratio: 1;
      background-image: url(img/arrow-right.svg);
      background-size: contain;
      background-repeat: no-repeat;
      flex-shrink: 0;
    }
    /*
    &::marker, ** Latest Chrome, Edge, Firefox **
    &::-webkit-details-marker ** Safari ** {
      display: none;
    }
    */
  }
  &[open] > summary::after {
    background-image: url(img/arrow-down.svg);
  }
  .a {
    font-weight: 600;
    color: var(--clr-brown);
  }
}
iframe {
  display: block;
}

/* other generic styles */
.block-image {
  margin-left: 0;
  margin-right: 0;
  > img {
    display: block;
    max-width: 100%;
  }
  &.stretch img {width: 100%;}
}
.boxed {
  padding-left: max(1em, 5vw, calc((100% - var(--boxed-width)) / 2));
  padding-right: max(1em, 5vw, calc((100% - var(--boxed-width)) / 2));
}
section {
  padding-top: 3em;
  padding-bottom: 3em;
}
:is(section, .strip-content-margins) {
  > :first-child {margin-top: 0;}
  > :last-child {margin-bottom: 0;}
}
:is(#retailer-links-source, .retailer-links, .scale-links) a {
  img {transition: var(--tra-short);}
  &:hover > img {transform: scale(1.05);}
}

/* specific sections */
section.top-strip {
  padding: 0.75em 2em 0.5em;
  .title {
    height: 40px;
    display: block;
  }
}

section.splash {
  background-image: url(img/banner.webp);
  background-size: cover;
  background-position: 90% 25%;
  padding: 3em 2em 5em;
  color: white;
  @media (min-width: 740px) {
    padding: 3em 2em;
  }
  > div {
    display: grid;
    gap: 2em 1em;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    .cover, .title {
      width: 100%;
    }
    .text {
      grid-column: 1 / span 2;
      text-align: center;
    }
    @media (min-width: 740px) {
      grid-template-columns: auto auto;
      .cover, .title {
        width: 300px;
      }
      .cover {
        grid-row: 1 / span 2;
      }
      .title {align-self: end;}
      .text {
        grid-column: unset;
        text-align: unset;
        align-self: start;
      }
    }
    @media (min-width: 1000px) {
      width: max-content;
      margin-left: auto;
      margin-right: auto;
      .cover, .title {
        width: 350px;
      }
    }
  }
  h2 {color: var(--clr-yellow);}
  p {font-size: 1.2em;}
}

section.buy {
  padding-top: 2em;
  padding-bottom: 0;
  display: grid;
  gap: 1.5em 1em;
  @media (min-width: 740px) {
    grid-template-columns: 1fr 1fr;
  }
  > div {
    background-color: white;
    border-radius: 1em;
    box-shadow: 4px 4px 4px rgb(0 0 0 / 0.1);
    padding: 1.5em 1em 0.5em;
    container-type: inline-size;
    &:first-child {
      @media (max-width: 740px) {margin-top: -4em;}
    }
  }
  h3 {
    color: teal;
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5em;
  }
  img {
    display: block;
    pointer-events: none;
  }
  .print-retailers, .audio-retailers {
    display: grid;
    grid-template-columns: 22cqw auto;
    gap: 1em;
    > img {width: 100%;}
    > div {
      display: flex;
      gap: 1em 6cqw; /* 2em */
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      img {
        width: 18cqw; /* 6em */
        &.wider {width: 24cqw;} /* 8em */
      }
    }
  }
  .availability {
    text-align: center;
    font-size: 0.85em;
    line-height: 1.3;
    margin: 2em 0 0;
    color: #666;
  }
}

section.video {
  display: grid;
  gap: 1.25em;
  align-items: center;
  h2 {
    margin-bottom: 0;
  }
  iframe {
    width: 100%;
    aspect-ratio: 16/9;
  }
  .text {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    > * {margin: 0;}
  }
  h3 {
    @media (max-width: 500px) {font-size: 1.25em;}
  }
  @media (min-width: 740px) {
    grid-template-columns: 3fr 2fr;
    gap: 2em;
    h2 {
      grid-column: 2;
      align-self: end;
    }
    .video {grid-row: 1 / span 2;}
    .text {align-self: start;}
  }
}

section.about {
  background-color: var(--clr-tan);
  padding-left: max(1em, 5vw);
  padding-right: max(1em, 5vw);
  position: relative;
  > :first-child {display: none;}
  @media (min-width: 740px) {
    padding-left: max(30%, calc((100% - var(--boxed-width)) / 2));
    padding-right: max(1em, calc((100% - var(--boxed-width)) / 2));
    > :first-child {
      display: initial;
      position: absolute;
      margin: 0;
      top: 0;
      left: 0;
      bottom: 0;
      width: 25%;
      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left;
      }
    }
  }
}

section.author {
  h2 {margin-bottom: 0.4em;}
  img {width: 100%;}
  @media (min-width: 740px) {
    padding-bottom: 1em;
    display: grid;
    align-items: center;
    grid-template-columns: 2fr 3fr;
    gap: 2em;
    h2 {
      margin: 0;
      align-self: end;
    }
    figure {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
    p {
      margin: 0;
      align-self: start;
    }
  }      
}

section.why {
  background-color: var(--clr-teal);
  color: white;
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    max-width: 80%;
  }
  ul {padding-left: 20px;}
  @media (min-width: 740px) {
    background-color: unset;
    padding-bottom: 5em;
    > div {
      padding: 2em;
      background-color: var(--clr-teal);
      display: grid;
      grid-template-columns: 1fr 2fr;
      align-items: center;
    }
    img {
      grid-column: 1;
      grid-row: 1 / span 2;
      margin-top: -4em;
      margin-bottom: -5em;
    }
    h2 {
      margin: 0;
      align-self: end;
    }
    ul {
      padding-left: 40px;
      align-self: start;
    }
  }
}

section.featured {
  background-color: var(--clr-teal);
  color: white;
  display: flex;
  gap: 2em;
  flex-direction: column;
  align-items: start;
  @media (min-width: 1000px) {
    flex-direction: row;
    align-items: center;
  }
  h2 {
    margin: 0;
    white-space: nowrap;
  }
  .media-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
  }
}

section.reviews {
  background-image: url(img/map-background.webp);
  background-size: cover;
  background-position: center bottom;
  color: white;
  h2 {margin-bottom: 1.25rem;}
  .review-list {
    display: flex;
    gap: max(1.5em, 3vw);
    overflow: auto;
    scroll-snap-type: x mandatory;
    &::-webkit-scrollbar {
      display: none;  /* Chrome and Safari */
    }
    -ms-overflow-style: none;  /* Edge */
    scrollbar-width: none;  /* Firefox */
    font-style: italic;
    font-weight: 300;
    font-size: 0.9;
    line-height: 1.3;
    > * {
      width: 300px;
      max-width: 70%;
      scroll-snap-align: center;
      flex-shrink: 0;
      background: white;
      color: #333;
      border-radius: 1em 1em 1em 0;
      padding: 1.5em;
      text-align: center;
      position: relative;
      margin-bottom: 3em;
      > :first-child {margin-top: 0;}
      > :last-child {
        margin-bottom: 0;
        font-weight: 600;
        color: black;
      }
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 99%;
        width: 50px;
        height: 40px;
        background-image: url(img/speech-bubble-2.svg);
        background-size: contain;
        background-position: top left;
        background-repeat: no-repeat;
      }
    }
  }
}

section.christmas {
  background-image: url(img/christmas-background.webp);
  background-size: cover;
  background-position: right top;
  color: white;
  display: grid;
  gap: 2em 5vw;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  p {
    font-size: clamp(16px, 3vw, 35px);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
  }
  img {
    transform: rotate(-3deg);
  }
}

section.map {
  background-image: url(img/map-background.webp);
  background-size: cover;
  color: white;
  padding-bottom: 0;
  .block-image {background-color: unset;}
}

section.faq {
  summary {
    color: var(--clr-teal);
    font-weight: 600;
    cursor: pointer;
  }
  @media (min-width: 740px) {
    padding-right: calc(25% + 2em);
    background-image: url(img/faq-photos.webp);
    background-repeat: repeat-y;
    background-position: top right;
    background-size: 25%;
  }
}

section.cta-mobile, section.cta-desktop {
  background-color: var(--clr-brown);
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  img {
    display: block;
    pointer-events: none;
  }
  > div:last-child {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

section.cta-mobile {
  @media (min-width: 740px) {display: none;}
  padding: 1em 0.4em 0.4em;
  text-align: center;
  > div:first-child {margin-bottom: 1em;}
  > div:last-child {
    padding: 1em;
    gap: 1em;
    flex-wrap: wrap;
    img {
      width: 18vw; /* 6em */
      &.wider {width: 24vw;} /* 8em */
    }
  }
}

section.footer {
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: center;
  font-size: 0.85em;
  a {color: inherit;}
}

section.cta-desktop {
  display: none;
  opacity: 0;
  transition: opacity var(--tra-short);
  padding: 0.4em 8vw;
  position: sticky;
  bottom: 0;
  @media (min-width: 740px) {display: grid;}
  gap: 1em;
  grid-template-columns: auto 1fr;
  align-items: center;
  > div:first-child {white-space: nowrap;}
  > div:last-child {
    padding: 8px 2vw;
    gap: 1em 3vw;
    a {flex: 1 1 0;}
    img {
      width: 100%;
    }
  }
  &.visible {opacity: 1;}
}

/* overrides */
.brown {color: var(--clr-brown);}
.teal {color: var(--clr-teal);}
.mt0, .m0 {margin-top: 0;}
.mb0, .m0 {margin-bottom: 0;}
.center {text-align: center;}