/*
 * legacy.css — layout for the captured markup on the inner pages.
 *
 * The 38 inner pages were imported as the reference's rendered HTML, so they
 * carry Lemon's class names (`t4s-timeline-*`, `t4s_ratio`, `t4s-container`)
 * but none of the paid theme's stylesheets. Unstyled, a two-column timeline
 * collapses into one column and every image loses its box.
 *
 * This is our own implementation of the geometry, measured from the reference
 * rather than copied from the theme. The values come from the reference's
 * rendered output — a 50/50 column split, 30px gutters, a 2px dotted rule down
 * the centre, a green year chip — not from its source files.
 *
 * Only the rules the captured markup actually needs are defined; the theme's
 * full sheet would drag in hundreds of unrelated selectors.
 */

/* ------------------------------------------------------------------ ratio box */

/*
 * Lemon's aspect-ratio wrapper: the parent reserves the height, the image fills
 * it. `--aspect-ratioapt` is written inline on each instance by the capture.
 */
.t4s_ratio {
  position: relative;
  display: block;
  width: 100%;
  padding-top: calc(100% / var(--aspect-ratioapt, 1));
  overflow: hidden;
}

.t4s_ratio > img,
.t4s_ratio > span > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vertical alignment helpers the capture emits alongside it. */
.t4s_position_8 > img { object-position: center; }

/* The loader span belonged to the theme's lazy-load script, which is not part of
   this build; without it the span paints a stray background rectangle. */
.lazyloadt4s-loader { display: none !important; }

/* ------------------------------------------------------------------- timeline */

.t4s-timeline-wrapper {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}

.t4s-timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  border-left: 2px solid #e1e1e1;
}

.t4s-timeline__line-dashed .t4s-timeline-line { border-left-style: dashed; }
.t4s-timeline__line-dotted .t4s-timeline-line { border-left-style: dotted; }

.t4s-timeline-line .t4s-line-dot {
  position: absolute;
  left: calc(50% - 5px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e1e1e1;
}
.t4s-timeline-line .t4s-line-dot.t4s-dot-start { top: -4px; }
.t4s-timeline-line .t4s-line-dot.t4s-dot-end { bottom: -4px; }

.t4s-timeline-breakpoint {
  margin-bottom: 50px;
  text-align: center;
}

.t4s-timeline-breakpoint-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 8px 25px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  background-color: var(--accent-color, #009a44);
}

.t4s-timeline-inner {
  position: relative;
  margin-bottom: 50px;
}

.t4s-timeline-item-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  border: solid 2px #fff;
  border-radius: 50%;
  background-color: var(--accent-color, #009a44);
  z-index: 1;
}

.t4s-item-position-left,
.t4s-item-position-right {
  display: flex;
  align-items: center;
}
.t4s-item-position-right { flex-direction: row-reverse; }

.t4s-timeline-col {
  position: relative;
  flex: 1 1 50%;
  max-width: 50%;
  width: 50%;
  padding: 30px 30px 15px;
  background-color: #fff;
  box-sizing: border-box;
}

/* The gutters also decide which half each block sits in: `row-reverse` mirrors
   the visual order, so the margins are written per side, not per column. */
.t4s-item-position-left .t4s-timeline-col-primary { margin-right: 30px; text-align: right; }
.t4s-item-position-left .t4s-timeline-col-secondary { margin-left: 30px; text-align: left; }
.t4s-item-position-right .t4s-timeline-col-primary { margin-left: 30px; text-align: left; }
.t4s-item-position-right .t4s-timeline-col-secondary { margin-right: 30px; text-align: right; }

.t4s-timeline-content .t4s-timeline-subheading,
.t4s-timeline-content .t4s-timeline-heading { margin-bottom: 10px; }

.t4s-timeline-content .t4s-timeline-subheading {
  color: var(--accent-color, #009a44);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.t4s-timeline-content .t4s-timeline-heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}

.t4s-timeline-description { font-size: 15px; line-height: 1.7; }
.t4s-timeline-description p { margin: 0 0 10px; }

/* The little diamond joining each card to the centre rule. */
.t4s-timeline-arrow {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 18px;
  height: 18px;
  font-size: 0;
  line-height: 0;
  background: #fff;
  transform: rotate(45deg);
}

.t4s-item-position-left .t4s-timeline-col-primary .t4s-timeline-arrow {
  left: calc(100% - 9px);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}
.t4s-item-position-left .t4s-timeline-col-secondary .t4s-timeline-arrow,
.t4s-item-position-right .t4s-timeline-col-primary .t4s-timeline-arrow {
  right: calc(100% - 9px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  border-left: 1px solid rgba(0, 0, 0, 0.07);
}
.t4s-item-position-right .t4s-timeline-col-secondary .t4s-timeline-arrow {
  left: calc(100% - 9px);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

/* ------------------------------------------------------- captured containers */

/*
 * Pages captured from the reference carry `t4s-container`. Ours is Blocksy's,
 * which caps the width at a different value than the reference's, so the
 * measured one wins on these pages only — it is scoped to page content so it
 * cannot reach the header or footer.
 */
.t4s-page .t4s-container,
.entry-content .t4s-container {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/* `t4s-rte` is the theme's typography scope for rich text. */
.t4s-rte h2 { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.t4s-rte h3 { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.t4s-rte h5 { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 10px; }
.t4s-rte p { margin: 0 0 12px; }
.t4s-rte img { max-width: 100%; height: auto; }

/* -------------------------------------------------------- accordion (FAQ pages) */

/*
 * The captured FAQ pages are a list of `.t4s-tab-wrapper` blocks, each an
 * `<a class="t4s-accor-title" href="#id">` opening the `.t4s-tab-content` with
 * that id. The theme drove it with its own script; ours is in interactions.js
 * and works off `data-t4s-tab-item`, which the capture already emits.
 *
 * The first wrapper renders `t4s-active` — the reference opens the first answer
 * by default, and with every panel closed the page reads as an empty list.
 */
.t4s-tab-wrapper {
  border-bottom: 1px solid #e6e6e6;
}

.t4s-accor-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  color: var(--heading-color, #000);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.t4s-accor-title:hover { color: var(--accent-color, #009a44); }

.t4s-accor-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The theme used an icon font for the +/−; a pseudo-element avoids shipping it. */
.t4s-accor-icon {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.t4s-accor-icon::before,
.t4s-accor-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.t4s-accor-icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.t4s-accor-icon::after { top: 0; left: 6px; width: 2px; height: 14px; }
.t4s-active .t4s-accor-icon::after { display: none; }

.t4s-accor-item-nav { flex: 0 0 auto; }

/*
 * Scoped to the accordion. Both this and the homepage's product tabs use the
 * class `t4s-tab-content`, and an unscoped `display:none` hid the homepage's
 * tab panels as well — the tabbed-products section measured 119px at tablet
 * against the reference's 1225px, i.e. the whole grid had been switched off.
 */
.t4s-tab-wrapper .t4s-tab-content {
  display: none;
  padding: 0 4px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-color, #333);
}
.t4s-tab-wrapper.t4s-active .t4s-tab-content { display: block; }

/* -------------------------------------------------------------------- gallery */

/* The grid itself comes from the generated layout layer; this is the card. */
.t4s-gallery-item { cursor: pointer; }

.t4s-gallery-item .t4s-img-wrap {
  border: 1px solid #e6e6e6;
  background: #fff;
}

/* ------------------------------------------------------------------ responsive */

/*
 * Below 768px the reference stacks each pair and centres it, drops the gutters,
 * and keeps the centre rule behind the cards.
 */
@media (max-width: 768px) {
  .t4s-timeline-inner { flex-wrap: wrap; margin-top: 30px; }
  .t4s-item-position-left,
  .t4s-item-position-right {
    flex-wrap: wrap;
    text-align: center;
    padding: 30px 30px 15px;
  }

  .t4s-timeline-item-dot { top: -30px; }

  .t4s-item-position-left .t4s-timeline-col,
  .t4s-item-position-right .t4s-timeline-col {
    position: static;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .t4s-timeline-col .t4s-timeline-arrow { display: none; }
  .t4s-timeline-breakpoint { margin-bottom: 30px; }
  .t4s-timeline-breakpoint-title { padding: 6px 18px; font-size: 14px; }
}