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

   Desktop-only. Hidden on screens below 1000px — the banner doesn't work
   well stacked vertically on phones, and the account dashboard is the
   primary purpose of that page on mobile, not marketing.

   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

   Typography matches the account page:
     Headline   36px  (matches the "Hey" account welcome)
     Tagline    18px
     Button     22px
     Font       "Medium LL" (inherited from the site body font)

   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;
}

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

/* 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;
}

.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;
}

.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__cta-wrap {
  margin-top: 8px;
}

.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;
}

.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;
  }
}