/* =========================================================================
   Account Banner

   Desktop-only. Hidden on screens below 1000px.

   Colours are passed from PHP as inline custom properties on the banner:
     --ab-bg, --ab-headline, --ab-body, --ab-price-faded,
     --ab-btn-bg, --ab-btn-text

   The banner is fully clickable — an absolutely-positioned invisible
   <a> covers the whole card (Hotjar showed users click anywhere on it,
   not just the button). The visible CTA button sits above the overlay
   on the z-stack so it still works directly.

   Button note:
     The WP Customizer sets `.button { background: #674AAC !important }`
     globally. We beat it with higher specificity + !important on the CTA,
     driven by the banner's custom properties.
   ========================================================================= */

.account-notes-banner {
  --ab-bg: #674AAC;
  --ab-headline: #FFD600;
  --ab-body: #FFFFFF;
  --ab-price-faded: rgba(255, 255, 255, 0.45);
  --ab-btn-bg: #FCC400;
  --ab-btn-text: #191919;

  position: relative;
  display: flex;
  gap: 32px;
  padding: 0 40px;
  margin-bottom: 48px;
  background-color: var(--ab-bg);
  color: var(--ab-body);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;                  /* whole card is clickable */
  transition: filter 200ms ease;
}

/* Subtle hover feedback — whole banner lifts a little */
.account-notes-banner:hover {
  filter: brightness(1.04);
}

/* Hide entirely on mobile / small tablet */
@media screen and (max-width: 1000px) {
  .account-notes-banner {
    display: none !important;
  }
}

/* Full-banner clickable overlay ------------------------------------------ */

.account-notes-banner__overlay-link {
  position: absolute;
  inset: 0;                         /* cover the entire banner */
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
}

/* Columns ----------------------------------------------------------------- */

.account-notes-banner__content-col {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 0 32px 80px;
  z-index: 2;
  position: relative;
  pointer-events: none;             /* clicks fall through to overlay */
}

/* ...except on the CTA, which captures its own clicks */
.account-notes-banner__cta-wrap {
  pointer-events: auto;
  margin-top: 8px;
}

.account-notes-banner__img-col {
  flex: 1 1 50%;
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 260px;
  overflow: hidden;
  z-index: 2;
  position: relative;
  pointer-events: none;
}

.account-notes-banner__img-col img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
}

/* Type ------------------------------------------------------------------- */

.account-notes-banner__headline {
  margin: 0;
  font-size: 36px;                  /* matches account page "Hey" */
  line-height: 1.15;
  font-weight: 600;                 /* Medium LL */
  color: var(--ab-headline);
  letter-spacing: -0.01em;
}

.account-notes-banner__tagline {
  font-size: 18px;
  line-height: 1.45;
  color: var(--ab-body);
  max-width: 480px;
  margin: 0;
}

.account-notes-banner__tagline > *:last-child { margin-bottom: 0; }
.account-notes-banner__tagline p { margin: 0; }

/* Pricing (only renders if editor set it) -------------------------------- */

.account-notes-banner__pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ab-body);
  font-weight: 600;
}

.account-notes-banner__price-original {
  color: var(--ab-price-faded);
  font-size: 16px;
  text-decoration: line-through;
}

.account-notes-banner__price-final {
  font-size: 22px;
  line-height: 1;
}

/* CTA -------------------------------------------------------------------- */

.account-notes-banner .account-notes-banner__cta,
.account-notes-banner a.account-notes-banner__cta {
  background-color: var(--ab-btn-bg) !important;
  color: var(--ab-btn-text) !important;
  border: 2px solid #000 !important;

  font-size: 22px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  border-radius: 8px !important;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2 !important;
  position: relative;               /* sits above overlay */
  z-index: 3;
}

.account-notes-banner .account-notes-banner__cta:hover,
.account-notes-banner a.account-notes-banner__cta:hover {
  filter: brightness(0.92);
}

/* Animation -------------------------------------------------------------- */

.account-notes-banner.js-ab-ready .account-notes-banner__img-col img {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.account-notes-banner.js-ab-ready .account-notes-banner__content-col > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.account-notes-banner.js-ab-ready.is-visible .account-notes-banner__img-col img {
  opacity: 1;
  transform: translateX(0);
}

.account-notes-banner.js-ab-ready.is-visible .account-notes-banner__content-col > *:nth-child(1) { transition-delay:  80ms; opacity: 1; transform: translateY(0); }
.account-notes-banner.js-ab-ready.is-visible .account-notes-banner__content-col > *:nth-child(2) { transition-delay: 180ms; opacity: 1; transform: translateY(0); }
.account-notes-banner.js-ab-ready.is-visible .account-notes-banner__content-col > *:nth-child(3) { transition-delay: 280ms; opacity: 1; transform: translateY(0); }
.account-notes-banner.js-ab-ready.is-visible .account-notes-banner__content-col > *:nth-child(4) { transition-delay: 380ms; opacity: 1; transform: translateY(0); }
.account-notes-banner.js-ab-ready.is-visible .account-notes-banner__content-col > *:nth-child(n+5) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .account-notes-banner.js-ab-ready .account-notes-banner__img-col img,
  .account-notes-banner.js-ab-ready .account-notes-banner__content-col > *,
  .account-notes-banner.js-ab-ready.is-visible .account-notes-banner__img-col img,
  .account-notes-banner.js-ab-ready.is-visible .account-notes-banner__content-col > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .account-notes-banner {
    transition: none;
  }
}