/*
  Playful Pop theme
  This is the default site direction. The shared HTML and content stay in one
  place while this layer changes the type, composition and energy.
*/

html[data-theme="playful"] {
  --cream: #fff;
  --cream-deep: #fff;
  --yellow: #6ddbd2;
  --blue: #ddf7f4;
  --blue-mid: #82c9c4;
  --ink-soft: #4f6077;
}

html[data-theme="playful"][data-accent="lilac"] {
  --yellow: #b8a2ff;
  --blue: #ece7ff;
  --blue-mid: #a99ae2;
  --ink-soft: #5a5680;
}

html[data-theme="playful"][data-accent="coral"] {
  --yellow: #ff8174;
  --blue: #ffe8e4;
  --blue-mid: #e8a59f;
  --ink-soft: #665473;
}

html[data-theme="playful"][data-accent="aqua"] {
  --yellow: #6ddbd2;
  --blue: #ddf7f4;
  --blue-mid: #82c9c4;
  --ink-soft: #4f6077;
}

html[data-theme="playful"] body {
  --shadow: 8px 8px 0 var(--navy);
  background: #fff;
}

html[data-theme="playful"] .site-header {
  background: rgba(255, 255, 255, .97);
}

html[data-theme="playful"] :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

html[data-theme="playful"] .section--blue { background: #fff; }

html[data-theme="playful"] .display,
html[data-theme="playful"] .home-hero h1,
html[data-theme="playful"] .page-hero h1,
html[data-theme="playful"] .section-heading h2,
html[data-theme="playful"] .price-card h2,
html[data-theme="playful"] .service-photo-band h2,
html[data-theme="playful"] .about-copy h2,
html[data-theme="playful"] .loyalty-card h2,
html[data-theme="playful"] .final-cta h2,
html[data-theme="playful"] .cta-panel h2 {
  font-family: "Bowlby One SC", Impact, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

html[data-theme="playful"] .display em,
html[data-theme="playful"] .home-hero h1 em,
html[data-theme="playful"] .page-hero h1 em,
html[data-theme="playful"] .section-heading h2 em,
html[data-theme="playful"] .price-card h2 em,
html[data-theme="playful"] .service-photo-band h2 em,
html[data-theme="playful"] .about-copy h2 em,
html[data-theme="playful"] .loyalty-card h2 em,
html[data-theme="playful"] .final-cta h2 em,
html[data-theme="playful"] .cta-panel h2 em {
  font-style: normal;
  font-weight: 400;
}

html[data-theme="playful"] .eyebrow {
  gap: 8px;
  margin-bottom: 16px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--yellow);
  padding: 7px 14px;
  font-family: "Titan One", Impact, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .08em;
}

html[data-theme="playful"] .eyebrow::before {
  content: "🐾";
  font-size: .9rem;
}

/* Home hero */
html[data-theme="playful"] .home-hero--editorial .home-hero__content {
  min-height: 700px;
  grid-template-columns: 1fr;
  gap: 18px;
  justify-items: center;
  padding-block: 48px 58px;
  text-align: center;
}

html[data-theme="playful"] .editorial-hero__copy {
  grid-row: 2;
  width: min(100%, 980px);
}

html[data-theme="playful"] .editorial-hero__art {
  grid-row: 1;
  min-height: 150px;
  width: 180px;
}

html[data-theme="playful"] .editorial-hero__art::before,
html[data-theme="playful"] .editorial-hero__note {
  display: none;
}

html[data-theme="playful"] .editorial-hero__portrait {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 34px;
  background: var(--cream);
  box-shadow: 7px 7px 0 var(--navy);
  transform: rotate(-4deg);
}

html[data-theme="playful"] .editorial-hero__portrait img {
  height: 100%;
  object-fit: cover;
}

html[data-theme="playful"] .editorial-hero__sparkle {
  left: -12px;
  top: 54px;
  display: block;
  font-size: 2.7rem;
}

html[data-theme="playful"] .editorial-hero__kicker {
  margin-bottom: 20px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--yellow);
  padding: 7px 14px;
  font-family: "Titan One", Impact, sans-serif;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
}

html[data-theme="playful"] .home-hero--editorial h1 {
  max-width: 980px;
  margin-inline: auto;
  font-family: "Bowlby One SC", Impact, sans-serif;
  font-size: clamp(4.2rem, 8.6vw, 7.6rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.055em;
  text-shadow: 6px 6px 0 var(--blue);
}

html[data-theme="playful"] .home-hero--editorial h1 em {
  font-weight: 400;
}

html[data-theme="playful"] .home-hero--editorial p {
  max-width: 650px;
  margin: 22px auto 28px;
  color: var(--ink, var(--navy));
  font-size: 1.08rem;
  line-height: 1.58;
}

html[data-theme="playful"] .home-hero .button-row,
html[data-theme="playful"] .editorial-hero__proof {
  justify-content: center;
}

html[data-theme="playful"] .editorial-hero__proof {
  margin-top: 30px;
  color: var(--ink, var(--navy));
}

html[data-theme="playful"] .home-hero .button--navy {
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--navy);
  color: var(--ink, var(--navy));
}

/* Inner-page heroes */
html[data-theme="playful"] .page-hero {
  background: #fff;
  padding-block: 78px 72px;
  text-align: center;
}

html[data-theme="playful"] .page-hero__inner {
  display: grid;
  justify-items: center;
}

html[data-theme="playful"] .page-hero h1 {
  max-width: 1050px;
  margin-inline: auto;
  font-size: clamp(4rem, 8vw, 6.8rem);
  line-height: .88;
  text-shadow: 6px 6px 0 var(--blue);
}

html[data-theme="playful"] .page-hero p {
  max-width: 670px;
  margin-inline: auto;
  color: var(--ink, var(--navy));
}

/* Sections and cards */
html[data-theme="playful"] .section-heading h2 {
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  line-height: .96;
  text-shadow: 4px 4px 0 #fff;
}

html[data-theme="playful"] .section--white .section-heading h2 {
  text-shadow: 4px 4px 0 var(--blue);
}

html[data-theme="playful"] .feature-card h3,
html[data-theme="playful"] .info-card h3,
html[data-theme="playful"] .faq-card h3,
html[data-theme="playful"] .side-card h3 {
  font-family: "Titan One", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
}

html[data-theme="playful"] .feature-card,
html[data-theme="playful"] .info-card,
html[data-theme="playful"] .faq-card,
html[data-theme="playful"] .price-card,
html[data-theme="playful"] .side-card,
html[data-theme="playful"] .contact-art,
html[data-theme="playful"] .about-art,
html[data-theme="playful"] .service-photo-band img {
  box-shadow: var(--shadow);
}

html[data-theme="playful"] .feature-card:nth-child(1) {
  background: var(--blue);
  transform: rotate(-1deg);
}

html[data-theme="playful"] .feature-card:nth-child(2) {
  background: #fff;
  transform: translateY(-10px) rotate(.7deg);
}

html[data-theme="playful"] .feature-card:nth-child(3) {
  background: var(--yellow);
  transform: rotate(-.7deg);
}

html[data-theme="playful"] .price-card {
  background: #fff;
  transform: rotate(-.35deg);
}

html[data-theme="playful"] .price-card h2 {
  font-size: clamp(2rem, 3.7vw, 3rem);
  line-height: .95;
}

html[data-theme="playful"] .service-photo-band h2,
html[data-theme="playful"] .about-copy h2 {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: .95;
  text-shadow: 4px 4px 0 var(--blue);
}

html[data-theme="playful"] .loyalty-card {
  box-shadow: 9px 9px 0 var(--navy);
  transform: rotate(-.6deg);
}

html[data-theme="playful"] .loyalty-card h2 {
  text-shadow: 4px 4px 0 #fff;
}

html[data-theme="playful"] .info-card--navy,
html[data-theme="playful"] .side-card--navy,
html[data-theme="playful"] .cta-panel {
  box-shadow: 8px 8px 0 var(--yellow);
}

html[data-theme="playful"] .cta-panel h2,
html[data-theme="playful"] .final-cta h2 {
  line-height: .95;
}

html[data-theme="playful"] .final-cta {
  background: #fff;
}

html[data-theme="playful"] .final-cta h2 {
  text-shadow: 5px 5px 0 var(--blue);
}

@media (max-width: 940px) {
  html[data-theme="playful"] .home-hero--editorial .home-hero__content {
    gap: 18px;
    padding-block: 42px 60px;
  }

  html[data-theme="playful"] .feature-card:nth-child(n) {
    transform: none;
  }
}

@media (max-width: 700px) {
  html[data-theme="playful"] .home-hero--editorial .home-hero__content {
    width: min(100% - 32px, 1180px);
    padding-block: 34px 50px;
  }

  html[data-theme="playful"] .editorial-hero__art {
    min-height: 128px;
    width: 150px;
  }

  html[data-theme="playful"] .editorial-hero__portrait {
    width: 122px;
    border-radius: 28px;
    box-shadow: 6px 6px 0 var(--navy);
  }

  html[data-theme="playful"] .editorial-hero__sparkle {
    left: -4px;
    top: 45px;
    font-size: 2.2rem;
  }

  html[data-theme="playful"] .editorial-hero__kicker {
    margin-bottom: 17px;
    font-size: .63rem;
  }

  html[data-theme="playful"] .home-hero--editorial h1 {
    font-size: clamp(3.2rem, 15vw, 5.15rem);
    line-height: .9;
    text-shadow: 4px 4px 0 var(--blue);
  }

  html[data-theme="playful"] .home-hero--editorial p {
    margin-block: 20px 24px;
    font-size: .98rem;
  }

  html[data-theme="playful"] .home-hero--editorial .bubble--two,
  html[data-theme="playful"] .home-hero--editorial .bubble--four {
    display: none;
  }

  html[data-theme="playful"] .home-hero--editorial .bubble--one {
    display: block;
    left: 4px;
    top: 195px;
    width: 42px;
    height: 42px;
  }

  html[data-theme="playful"] .home-hero--editorial .bubble--three {
    right: 5px;
    top: 115px;
    width: 52px;
    height: 52px;
  }

  html[data-theme="playful"] .page-hero {
    padding-block: 58px 54px;
  }

  html[data-theme="playful"] .page-hero h1 {
    font-size: clamp(3rem, 13.5vw, 4.5rem);
    line-height: .91;
    text-shadow: 4px 4px 0 var(--blue);
  }

  html[data-theme="playful"] .page-hero .bubble--one {
    display: block;
    left: -16px;
    top: 36%;
    width: 46px;
    height: 46px;
  }

  html[data-theme="playful"] .page-hero .bubble--three {
    right: -10px;
    top: 13%;
    width: 55px;
    height: 55px;
  }

  html[data-theme="playful"] .section-heading h2 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
  }

  html[data-theme="playful"] .price-card,
  html[data-theme="playful"] .loyalty-card {
    transform: none;
  }
}