/**
 * @file
 * Sticky CTA component styles: a translucent panel pinned flush to the bottom
 * of the viewport, rounded on its top two corners only.
 */

.ln-sticky-cta {
  /**
   * 80% white as designed. #cf0000 on 80% white over a dark photo is ~3.95:1
   * and fails AA at 18px; set the alpha to 1 to make the panel opaque.
   */
  --ln-sticky-cta-bg: rgba(255, 255, 255, 0.8);

  /* Only does anything while the fill above is translucent. */
  --ln-sticky-cta-blur: 30px;
  --ln-sticky-cta-fg: var(--ln-color-red, #cf0000);
  --ln-sticky-cta-radius: 16px;
  --ln-sticky-cta-padding: 16px;
  --ln-sticky-cta-max-inline-size: 384px;

  /* 1.3 rather than the inherited leading: the line is a headline. */
  --ln-sticky-cta-copy-size: 18px;
  --ln-sticky-cta-copy-weight: 500;
  --ln-sticky-cta-copy-leading: 1.3;
  --ln-sticky-cta-copy-gap: 12px;

  --ln-sticky-cta-actions-gap: 16px;
  --ln-sticky-cta-button-padding-block: 12px;

  /* Centred, no offset. An outer box-shadow is clipped to outside the border
     box, so it does not darken the translucent fill. */
  --ln-sticky-cta-shadow: 0 0 40px rgba(0, 0, 0, 0.15);

  /* Inset from the right edge on desktop; there is no block inset, as the panel
     is flush to the bottom. */
  --ln-sticky-cta-inset-inline: 24px;

  /* Above page content, below Drupal's dialogs (which start at 1260). */
  --ln-sticky-cta-z-index: 100;

  position: fixed;
  z-index: var(--ln-sticky-cta-z-index);
  inset-block-end: 0;
  inset-inline-end: var(--ln-sticky-cta-inset-inline);
  inline-size: fit-content;
  max-inline-size: min(
    var(--ln-sticky-cta-max-inline-size),
    calc(100vw - (2 * var(--ln-sticky-cta-inset-inline)))
  );

  /**
   * visibility, not opacity alone: a hidden element is out of the tab order, so
   * a keyboard user cannot tab into invisible buttons. Not display:none —
   * sticky-cta.js reads offsetHeight before the panel is ever shown.
   */
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out,
    visibility 0.25s;
}

.ln-sticky-cta.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ln-sticky-cta__panel {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: var(--ln-sticky-cta-copy-gap);
  padding: var(--ln-sticky-cta-padding);
  /* Top corners only — the panel is flush to the bottom of the viewport. */
  border-radius: var(--ln-sticky-cta-radius) var(--ln-sticky-cta-radius) 0 0;
  background-color: var(--ln-sticky-cta-bg);
  /* -webkit- first: Safari only dropped the prefix in 18. */
  -webkit-backdrop-filter: blur(var(--ln-sticky-cta-blur));
  backdrop-filter: blur(var(--ln-sticky-cta-blur));
  box-shadow: var(--ln-sticky-cta-shadow);
}

/**
 * An unsupported backdrop-filter is ignored, which would leave 80% white over
 * an unsoftened backdrop, so raise the opacity where the blur cannot happen.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ln-sticky-cta__panel {
    background-color: rgba(255, 255, 255, 0.95);
  }
}

/**
 * Class doubled to (0,2,0) so it outranks the container-inherit rule in
 * css/editor-styles.css, which would otherwise left-align this centred copy.
 * Cohesion styles bare <p>, so margin, leading and weight are restated on the
 * element rather than set on the panel and inherited.
 */
.ln-sticky-cta__copy.ln-sticky-cta__copy {
  margin: 0;
  color: var(--ln-sticky-cta-fg);
  font-family: var(--ln-font-sans, Outfit, sans-serif);
  font-size: var(--ln-sticky-cta-copy-size);
  font-weight: var(--ln-sticky-cta-copy-weight);
  line-height: var(--ln-sticky-cta-copy-leading);
  text-align: center;
  text-wrap: balance;
}

.ln-sticky-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--ln-sticky-cta-actions-gap);
}

/**
 * Button overrides at (0,2,0), so they beat .ln-button and the 62rem min-width
 * rule in button.css whichever file parses first. --ln-cta-min-width's 224px
 * would put the pair at 464px inside a 384px panel, so it is dropped here.
 */
.ln-sticky-cta .ln-button {
  --ln-button-min-width: 0;

  padding-block: var(--ln-sticky-cta-button-padding-block);
  white-space: nowrap;
}

/* Phone: the same panel, widened to the page gutter, buttons still centred. */
@media (max-width: 47.99rem) {
  .ln-sticky-cta {
    --ln-sticky-cta-inset-inline: 8px;

    inset-inline: var(--ln-sticky-cta-inset-inline);
    inline-size: auto;

    /**
     * vw, not a percentage: any ancestor with transform, filter,
     * backdrop-filter, perspective, contain: paint or will-change becomes the
     * containing block for a fixed element, and a percentage resolves to it.
     */
    max-inline-size: calc(100vw - (2 * var(--ln-sticky-cta-inset-inline)));
  }

  .ln-sticky-cta__panel {
    /**
     * Perf watch: a 30px backdrop blur across the full viewport width,
     * recomputed every scroll frame, is the expensive case. If it janks,
     * `background-color: #fff` here disables it.
     */
    padding-block-end: calc(var(--ln-sticky-cta-padding) + env(safe-area-inset-bottom, 0px));
  }

  .ln-sticky-cta__actions {
    flex-wrap: nowrap;
  }
}

/* Below ~340px the two labels stop fitting side by side, so they stack. */
@media (max-width: 21.25rem) {
  .ln-sticky-cta__actions {
    align-self: stretch;
    flex-direction: column;
  }

  .ln-sticky-cta .ln-button {
    inline-size: 100%;
  }
}

/**
 * Room at the end of the page for the bar, sized from the height sticky-cta.js
 * publishes. Unconditional rather than tied to .is-visible, so the page height
 * does not change mid-scroll.
 */
@media (max-width: 47.99rem) {
  body:has(.ln-sticky-cta) {
    padding-block-end: var(--ln-sticky-cta-height, 96px);
  }
}

/**
 * Hide Site Studio's own sticky advertise button from the master template.
 *
 * Scoped by ATTACHMENT, not by selector: SDC only loads this file when the
 * component renders, which is why there is no :has() guard, unlike the body
 * rule above.
 */
#sticky-btn {
  display: none;
}

/**
 * Layout Builder: un-pin the panel so it renders inline in its section.
 * Un-pinned rather than hidden — a hidden block cannot be configured, moved or
 * removed.
 */
.layout-builder .ln-sticky-cta {
  position: static;
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  inline-size: fit-content;
  max-inline-size: var(--ln-sticky-cta-max-inline-size);
}

@media (prefers-reduced-motion: reduce) {
  .ln-sticky-cta {
    transition: none;
    transform: none;
  }
}