/*
 * About "Why dogs" dialog — Figma "Website" file, "Bottom Sheet_Why dogs"
 * 5123:12691 (375x515, mobile). Opened by "Why we started with dogs" in the
 * solution copy (about-solution.css); behaviour in js/about-why-dogs.js.
 *
 * A native <dialog> shown with showModal(), so it sits in the top layer.
 *   < 768: Figma's bottom sheet: full width at the foot of the viewport,
 *     top corners 24, a grab handle in a 24 header, and the frame's 24 home
 *     indicator mixin as bottom room (or the safe area, if larger).
 *   ≥ 768 (no design; Figma's desktop note asks for "a modal or large
 *     tooltip"): the same content in a centred 480 card, no handle.
 *
 * Fonts: title and button Aeonik Medium (--font-display), text Inter.
 */

.about-why-dogs {
  /* Inter for the Webflow element rules, as each section sets it */
  --_colors---family-paragraph: var(--font-ui);

  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 24rem);
  margin: auto 0 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 24rem 24rem 0 0;
  background-color: #fff;
  color: #575757;
  font-family: var(--font-ui);
}

.about-why-dogs::backdrop {
  background-color: rgba(17, 17, 17, 0.5);
}

.about-why-dogs[open] {
  animation: about-why-dogs-up 0.25s ease-out;
}

@keyframes about-why-dogs-up {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-why-dogs[open] {
    animation: none;
  }
}

/* "Header" mixin: 24 tall, a 44x4 #dedede tab 8 from the top */
.about-why-dogs-handle {
  box-sizing: border-box;
  height: 24rem;
  padding-top: 8rem;
}

.about-why-dogs-handle::before {
  content: "";
  display: block;
  width: 44rem;
  height: 4rem;
  margin: 0 auto;
  border-radius: 4rem;
  background-color: #dedede;
}

/* "Content" 5123:12693: 32/24/16, 24 between the copy and the button,
   then the 24 "Footer" mixin (the home indicator) or the safe area. The
   dialog itself has no padding: js/about-why-dogs.js reads a click on it as
   a backdrop click. */
.about-why-dogs-content {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  padding: 32rem 24rem calc(16rem + max(24rem, env(safe-area-inset-bottom)));
}

/* 16 between the title and the text */
.about-why-dogs-copy {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

/* Figma: Aeonik Medium 20, normal leading, #252525 */
.about-why-dogs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20rem;
  line-height: normal;
  font-weight: 500;
  letter-spacing: 0;
  color: #252525;
}

/* Figma: Inter 14/20, #575757, paragraphs 12 apart */
.about-why-dogs-text p {
  margin: 0;
  font-size: 14rem;
  line-height: 20rem;
  font-weight: 400;
  color: #575757;
}

.about-why-dogs-text p + p {
  margin-top: 12rem;
}

.about-why-dogs-form {
  margin: 0;
}

/* Figma 5123:12731: full width, 52 tall with the hairline inside, #f1efee,
   Aeonik Medium 16/24 #222 */
.about-why-dogs-close {
  display: block;
  width: 100%;
  height: 52rem;
  margin: 0;
  padding: 0 24rem;
  border: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 999px;
  background-color: #f1efee;
  font-family: var(--font-display);
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.about-why-dogs-close:hover {
  background-color: #e8e5e3;
}

.about-why-dogs-close:focus-visible {
  outline: 2px solid #ff5900;
  outline-offset: 2px;
}

/* js/about-why-dogs.js adds this while the dialog is open */
html.about-why-dogs-open,
html.about-why-dogs-open body {
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* ≥ 768 (no design): a centred card                                    */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 768px) {
  /* Keeps the page from shifting where scrollbars take room. Not below
     768, where it would leave a strip beside the full-width sheet. */
  html.about-why-dogs-open {
    scrollbar-gutter: stable;
  }

  .about-why-dogs {
    width: calc(100% - 48rem);
    max-width: 480rem;
    max-height: calc(100dvh - 48rem);
    margin: auto;
    padding: 0;
    border-radius: 24rem;
  }

  .about-why-dogs[open] {
    animation-name: about-why-dogs-in;
  }

  @keyframes about-why-dogs-in {
    from {
      opacity: 0;
      transform: translateY(16rem);
    }
  }

  .about-why-dogs-handle {
    display: none;
  }

  .about-why-dogs-content {
    padding: 32rem;
  }
}