/* ==========================================================================
   LGD Read More — collapsible product description
   Values for --lgd-rm-max / --lgd-rm-fade-h / --lgd-rm-fade-color are written
   inline on .lgd-rm by PHP from the settings screen.
   ========================================================================== */

/* Colours resolve from the theme Customizer through the --lgd-* variables
   published site-wide by the LGD Product SEO Additions mu-plugin. Fallbacks
   mirror the current theme_mod values so the plugin is still on-brand if used
   standalone. Nothing here is a hardcoded design choice. */
.lgd-rm {
  --lgd-rm-max: 30em;
  --lgd-rm-fade-h: 9em;
  --lgd-rm-fade-color: #fff;
  --lgd-rm-accent: var(--lgd-brand, #dd3333);
  --lgd-rm-accent-hover: var(--lgd-brand-hover, #ad2727);
  --lgd-rm-on-accent: var(--lgd-brand-ink, #ffffff);
  --lgd-rm-ink: var(--lgd-primary, #132436);
  --lgd-rm-line: #e2e5e8;
  /* Follow the theme's own button radius (0 on this install) so the toggle
     reads as a site button rather than a foreign pill. */
  --lgd-rm-radius: var(--lgd-btn-radius, 0px);
  position: relative;
}

/* --------------------------------------------------------------------------
   The clip. max-height + overflow:hidden keeps every word in the DOM and in
   the accessibility tree — no display:none, no AJAX. That is what keeps the
   content indexable and selectable.
   -------------------------------------------------------------------------- */
.lgd-rm__clip {
  position: relative;
  max-height: var(--lgd-rm-max);
  overflow: hidden;
}

.lgd-rm.is-expanded .lgd-rm__clip {
  max-height: none;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Gradient fade: transparent at the top, solid at the bottom, sitting flush
   with the bottom edge of the clipped box. Anchored to the clip (not the
   outer wrapper) so it never overlaps the button.
   -------------------------------------------------------------------------- */
.lgd-rm__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: block;
  height: var(--lgd-rm-fade-h);
  pointer-events: none;
  /* `transparent` rather than rgba(255,255,255,0): gradients interpolate in
     premultiplied alpha, so this fades cleanly to ANY --lgd-rm-fade-color
     without the grey cast a hard-coded white start would give a dark theme. */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--lgd-rm-fade-color) 92%,
    var(--lgd-rm-fade-color) 100%
  );
  /* Fallback for the rare engine without inset-inline. */
  left: 0;
  right: 0;
}

.lgd-rm.is-expanded .lgd-rm__fade {
  display: none;
}

/* --------------------------------------------------------------------------
   Toggle button
   -------------------------------------------------------------------------- */
.lgd-rm__actions {
  display: flex;
  justify-content: center;
  margin: 0.35rem 0 0.5rem;
}

/* Deliberately matches the theme's own buttons: solid brand red, white label,
   theme button radius, darkening to color_hover on hover — the same
   color_button -> color_hover pair the theme uses for Add to Cart.
   The `.lgd-rm` prefix is not decorative: the theme ships global `button`
   rules that otherwise win, which would leave this button's appearance an
   accident of load order rather than a decision. */
.lgd-rm .lgd-rm__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 1.6rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lgd-rm-on-accent);
  background: var(--lgd-rm-accent);
  border: 1.5px solid var(--lgd-rm-accent);
  border-radius: var(--lgd-rm-radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.lgd-rm .lgd-rm__toggle:hover,
.lgd-rm .lgd-rm__toggle:focus-visible {
  color: var(--lgd-rm-on-accent);
  background: var(--lgd-rm-accent-hover);
  border-color: var(--lgd-rm-accent-hover);
}

.lgd-rm .lgd-rm__toggle:focus-visible {
  outline: 2px solid var(--lgd-rm-ink);
  outline-offset: 2px;
}

.lgd-rm__chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.lgd-rm.is-expanded .lgd-rm__chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Expand animation. Animating max-height to a JS-measured pixel value keeps
   this compositor-friendly and avoids the classic max-height:9999px snap.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lgd-rm.is-animating .lgd-rm__clip {
    transition: max-height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* While animating, is-expanded is already applied but the height is still
   growing — keep the clip hidden or the tail of the content spills out. */
.lgd-rm.is-animating .lgd-rm__clip {
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Print: never truncate.
   -------------------------------------------------------------------------- */
@media print {
  .lgd-rm__clip {
    max-height: none !important;
    overflow: visible !important;
  }
  .lgd-rm__fade,
  .lgd-rm__actions {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Forced-colours / high-contrast: a gradient conveys nothing there, and can
   render as an opaque band that hides text.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .lgd-rm__fade {
    display: none;
  }
  .lgd-rm__toggle {
    border: 1px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }
}