/* The public pages share a link language without underlines, including states
   and child labels. Keep keyboard outlines from the base styles intact. */
body:has(.public-navigation) :is(a, button),
body:has(.public-navigation) :is(a, button) * {
  text-decoration: none !important;
}

body:has(.public-navigation) :is(.privacy-page, .lesson-data-notice, .recruitment-data-notice, .recruitment-error-summary) a {
  color: #82664B;
  font-weight: 500;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

body:has(.public-navigation) :is(.privacy-page, .lesson-data-notice, .recruitment-data-notice, .recruitment-error-summary) a:hover {
  color: #514031;
  background: #EAE0D3;
}

.public-navigation-links a[aria-current=page] {
  color: #82664B;
}

.public-navigation-links a:hover {
  color: #82664B;
}

:is(.studio-footer, .information-footer) a:hover {
  color: #C2A68A;
}

:is(.information-contact-card a, .information-text-link, .reviews-back, .reviews-google, .full-review > a, .studio-map-retry):hover {
  color: #82664B;
}

.integral-site .review-read-more,
.review-read-more {
  color: #82664B;
  border-radius: 8px;
}

.integral-site .reviews-track > .review-card {
  box-shadow: 0 4px 12px rgb(41 41 41 / 12%);
}

.integral-site .review-read-more:hover,
.review-read-more:hover {
  color: #514031;
  background: #EAE0D3;
}

/* One generated FAQ body is used on the home, its dialog, and the FAQ page. */
.public-faq,
.integral-site .public-faq {
  border: 1px solid #D4BFA8;
  border-radius: 22px;
  background: #FFFEFB;
  color: #514D4B;
  font-family: var(--body-font);
  overflow: hidden;
}

.public-faq details,
.integral-site .public-faq details {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #E4D8CA;
  border-radius: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

.public-faq details:last-child,
.integral-site .public-faq details:last-child {
  border-bottom: 0;
}

.public-faq details[open],
.integral-site .public-faq details[open] {
  background: #F1E9DE;
  border-bottom-color: #C2A68A;
}

.public-faq summary,
.integral-site .public-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 21px 20px;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  transition: background .18s ease, color .18s ease;
}

.public-faq summary::-webkit-details-marker,
.integral-site .public-faq summary::-webkit-details-marker {
  display: none;
}

.public-faq summary:hover,
.integral-site .public-faq summary:hover {
  background: #F1E9DE;
}

.public-faq details[open] > summary,
.integral-site .public-faq details[open] > summary {
  color: #76583C;
  box-shadow: inset 0 -1px 0 #C2A68A;
}

.public-faq summary:focus-visible,
.integral-site .public-faq summary:focus-visible {
  outline: 3px solid #82664B;
  outline-offset: -4px;
  border-radius: 10px;
}

.public-faq summary span,
.integral-site .public-faq summary span {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.public-faq summary svg,
.integral-site .public-faq summary svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #82664B;
  stroke-width: 1.5;
  transform: rotate(0deg);
  transition: transform .22s ease, color .18s ease;
}

.public-faq details[open] summary svg,
.integral-site .public-faq details[open] summary svg {
  color: #76583C;
  transform: rotate(45deg);
}

.public-faq details > p,
.integral-site .public-faq details > p {
  margin: 0;
  padding: 20px 20px 24px;
  color: #514D4B;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.content-dialog[data-content-kind="faq"] .public-faq details > p {
  padding-top: 20px;
  padding-bottom: 24px;
}

.public-faq details[open] > p {
  animation: fleming-faq-answer .22s ease both;
}

@keyframes fleming-faq-answer {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Related review actions share the same understated shape and SVG arrow. */
.studio-google-link,
.studio-testimonials-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-height: 50px;
  margin: 28px auto 0;
  padding: 12px 18px;
  border: 1px solid #C2A68A;
  border-radius: 999px;
  background: #FFFEFB;
  color: #514D4B;
  font: 400 16px/1.4 var(--body-font);
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}

.studio-google-link img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.studio-google-link span,
.studio-testimonials-link span {
  min-width: 0;
}

.studio-google-link svg,
.studio-testimonials-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.studio-google-link:hover,
.studio-testimonials-link:hover {
  border-color: #82664B;
  background: #EDE4D9;
}

@media (min-width: 700px) {
  .public-faq summary,
  .integral-site .public-faq summary {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-faq summary,
  .public-faq summary svg,
  .integral-site .public-faq summary,
  .integral-site .public-faq summary svg,
  .studio-google-link,
  .studio-testimonials-link {
    transition: none;
  }

  .public-faq details[open] > p {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}