/* Lawrence Tutorial Services: styles for the interactions in /js/site.js.
   Uses the template's own colour tokens, radii and button shadow. */

.lts-menu {
  position: fixed;
  left: 16px;
  right: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background-color: var(--token-7bbaafe9-06f3-4286-8b9e-1f6b96128a55, rgb(255, 255, 255));
  border: 1px solid var(--token-dbb48573-48d8-403f-ad86-7009a5265b2f, rgba(20, 38, 29, 0.2));
  border-radius: 20px;
  box-shadow: 0px 4px 0px 0px var(--token-dbb48573-48d8-403f-ad86-7009a5265b2f, rgba(20, 38, 29, 0.2));
}
.lts-menu[hidden] { display: none; }
.lts-menu p.framer-text { margin: 0; --framer-text-color: var(--token-ba50d2e5-600e-4acb-b91c-6cca2f86f1d6, rgb(20, 38, 29)); }
.lts-menu a[aria-current="page"] { text-decoration: underline; }

.lts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  text-decoration: none;
  background-color: var(--token-9be2179a-d4c3-4b1c-a57e-66ad0ebb844d, rgb(232, 114, 44));
  border: 1px solid var(--token-23b59c71-bcd9-4239-8358-53b6c3cc209e, rgb(178, 110, 69));
  border-radius: 100px;
  box-shadow: 0px 4px 0px 0px var(--token-23b59c71-bcd9-4239-8358-53b6c3cc209e, rgb(178, 110, 69));
}
.lts-btn p.framer-text {
  margin: 0;
  white-space: nowrap;
  --framer-text-color: var(--token-7bbaafe9-06f3-4286-8b9e-1f6b96128a55, rgb(255, 255, 255));
}

.lts-wa-float { display: none; }
@media (max-width: 809.98px) {
  .lts-wa-float {
    display: inline-flex;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 55;
  }
  body { padding-bottom: 84px; }
}

[data-framer-name="Question"] { cursor: pointer; }
[data-framer-name="Menu Button"] [data-framer-name="01"],
[data-framer-name="Menu Button"] [data-framer-name="02"] { transition: transform 0.25s ease; }

/* Text wordmark in the navigation (replaces the template's logo image). */
.lts-wordmark {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  text-decoration: none;
}
/* The wordmark stands in for a logo, so it carries a logo's weight and a
   slightly tighter track than body text. */
/* Framer's text presets drive weight through --framer-font-weight inside a
   long, highly specific selector list, so set the variable as well as the
   property and repeat the class to out-rank it. */
.lts-wordmark .framer-text.framer-text {
  --framer-font-weight: 700;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lts-wordmark .framer-text { margin: 0; --framer-text-color: var(--token-ba50d2e5-600e-4acb-b91c-6cca2f86f1d6, rgb(20, 38, 29)); }

/* Framer scopes its own layout rules with an extra class (.framer-tGarp .x),
   so each override below repeats its class to match that specificity; site.css
   is linked after the generated styles, so equal specificity wins on order. */

/* The "what your child gets" grid carries five promises, not the template's
   four. The fifth sits on its own row and spans the full width so the block
   still reads as a finished grid rather than an orphaned card. */
.lts-grid-span.lts-grid-span { grid-column: 1 / -1; }

/* "Which one is your child?" carries three cards where the template's mentor
   grid carried four. */
.lts-cols-3.lts-cols-3 { grid-template-columns: repeat(3, minmax(50px, 1fr)); }

/* Two blocks carry one more card than the template's grid was built for:
   the problem list has five worries and the student quotes have four. Widen
   the row at desktop so neither leaves a single card stranded on its own line;
   below 1200px the template's own tablet and phone rules still apply. */
@media (min-width: 1200px) {
  .lts-cols-5.lts-cols-5 { grid-template-columns: repeat(5, minmax(50px, 1fr)); }
  .lts-cols-4.lts-cols-4 { grid-template-columns: repeat(4, minmax(50px, 1fr)); }
}

/* The student note reuses the template's rating pill, which is built for one
   short line and sets white-space:pre. This copy is a full sentence, so let it
   wrap and keep it inside the container instead of running off both edges. */
.lts-note.lts-note,
.lts-note.lts-note > div,
.lts-note.lts-note p.framer-text,
.lts-note.lts-note .framer-text { white-space: normal; }
/* The inner rich-text block is a flex item that sizes to max-content, so it
   must be told to take the pill's width rather than the sentence's. */
.lts-note.lts-note > div { flex: 1 1 auto; width: 100%; max-width: 100%; }
.lts-note.lts-note {
  flex: 1 1 auto;
  width: 100%;
  justify-content: center;
  text-align: center;
}
/* Its wrapper sizes to content, which collapses once the text is allowed to
   wrap, so give it the full row to centre within. */
.lts-note-wrap.lts-note-wrap {
  width: min(900px, 100%);
  margin-inline: auto;
  justify-content: center;
  overflow: visible;
}


/* Footer: the template's paper-plane trail is pinned at a fixed 613px from the
   left, which was clear of its original six-item menu. This footer's Pages
   column sits further left, so the plane landed across "Classes" and "About".
   Scale the decoration with the viewport so it stays in the empty space under
   the brand line at every width. */
@media (min-width: 810px) {
  /* Its width is derived from this height (the artwork is 678x387), so scaling
     the height is what pulls the plane back out of the link column. */
  .framer-du8q9 .framer-1979d54.framer-1979d54 { height: clamp(170px, 19vw, 350px); }
}

/* Parents' testimonials run longer than the template's placeholder quotes, and
   the card clamps text to eight lines without hiding the overflow, so the words
   spilled over the name. Let these quotes run in full, and make the coloured
   panel fill the card so a row of them still lines up. */
.lts-quotes-full .framer-cdxwmx {
  -webkit-line-clamp: unset;
  display: block;
}
.lts-quotes-full .framer-1iwjxpo {
  height: 100%;
  place-content: space-between flex-start;
  gap: 32px;
}

/* Drawn avatars, not photographs: these parents and students sent no pictures,
   and the brief rules out presenting stock faces as real people. */
.lts-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  min-width: 48px;
}
.lts-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
/* On the class cards the avatar leads the card, so it sits a little larger
   and carries a ring in the card's own background colour. */
.lts-avatar-lg {
  width: 64px;
  height: 64px;
  min-width: 64px;
  margin-bottom: 4px;
}

/* Testimonial carousel -------------------------------------------------------
   Four long quotes side by side left each one in a narrow column, so the text
   ran very tall. As a carousel each card gets roughly half the row, the words
   fit in a few lines, and the arrows move one card at a time. It is a plain
   scroll-snap scroller, so it still works by swipe or trackpad if the script
   never runs. */
.lts-carousel.lts-carousel {
  display: flex;
  grid-template-columns: none;
  /* the grid this replaces centred its tracks; centring an overflowing flex
     row pushes the first card into left overflow that cannot be scrolled to */
  justify-content: flex-start;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* the cards are tilted and their star pokes above the top edge */
  overflow-y: visible;
}
.lts-carousel.lts-carousel::-webkit-scrollbar { display: none; }
/* Framer wraps breakpoint copies in .ssr-variant, which is display:contents,
   so the real flex items are one level further in. */
.lts-carousel.lts-carousel > *,
.lts-carousel.lts-carousel > .ssr-variant > * {
  flex: 0 0 calc((100% - 30px) / 2);
  scroll-snap-align: start;
  min-width: 0;
}
.lts-carousel.lts-carousel > .ssr-variant { flex: none; }
@media (max-width: 809.98px) {
  .lts-carousel.lts-carousel { gap: 20px; }
  .lts-carousel.lts-carousel > *,
  .lts-carousel.lts-carousel > .ssr-variant > * { flex-basis: 100%; }
}

.lts-carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 28px;
}
.lts-carousel-btn {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 100px;
  background-color: var(--token-a225ace6-638e-469b-9793-3ab54fcf3b3a, rgb(27, 52, 40));
  border: 1px solid var(--token-ba50d2e5-600e-4acb-b91c-6cca2f86f1d6, rgb(20, 38, 29));
  box-shadow: 0px 4px 0px 0px var(--token-ba50d2e5-600e-4acb-b91c-6cca2f86f1d6, rgb(20, 38, 29));
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.lts-carousel-btn:active { transform: translateY(3px); box-shadow: 0px 1px 0px 0px var(--token-ba50d2e5-600e-4acb-b91c-6cca2f86f1d6, rgb(20, 38, 29)); }
.lts-carousel-btn svg { width: 20px; height: 20px; display: block; }
.lts-carousel-btn[disabled] { opacity: 0.32; cursor: default; box-shadow: none; transform: translateY(3px); }
.lts-carousel-count {
  font-size: 14px;
  min-width: 56px;
  text-align: center;
  color: var(--token-e7e6c389-54de-40d3-bd41-8072dc4a41a5, rgb(69, 86, 75));
}