/*
 * Buscando a Memo — Landing Page Styles
 *
 * @package buscandoamemo
 * @version 1.0.0
 *
 * Consumes CSS custom properties from style.css (:root).
 * Sections: Header, Hero, Story Hook, Features, Product, Testimonials, CTA Final, Footer.
 */

/* =========================================================================
   1. HEADER — Fixed top bar, glass morphism, ON AIR animation
   ========================================================================= */

.bam-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 40px);
  height: 64px;
  background: rgba(6, 27, 53, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}

.bam-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.bam-header__logo-img {
  display: inline-flex;
  align-items: center;
  height: 36px;
  max-width: 160px;
}

.bam-header__logo-img img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}

.bam-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.bam-header__logo-text {
  font-family: 'Lilita One', cursive;
  font-size: 1.25rem;
  color: var(--memo-orange);
  letter-spacing: 1px;
  margin: 0;
  line-height: 1;
}

.bam-header__logo-text a {
  color: inherit;
  text-decoration: none;
}

.bam-header__on-air {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 48, 48, 0.15);
  border: 1px solid rgba(255, 48, 48, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--show-red);
}

.bam-header__on-air a {
  color: inherit;
  text-decoration: none;
  margin-block-start: 0;
}

.bam-header__on-air-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--show-red);
  animation: bam-on-air-pulse 1.5s ease-in-out infinite;
}

.bam-header__on-air span:not(.bam-header__on-air-dot) {
  margin-block-start: 0;
}

@keyframes bam-on-air-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.bam-header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--memo-orange);
}

/* The two links sit in their own container so they keep one gap between them and one gap to
   the account and cart controls. Without it the row is a single run of four items and every
   space in it is the same, so the links read as part of the control cluster. */
.bam-header__links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.bam-header__nav a {
  text-decoration: none;
}

.bam-header__nav a:hover,
.bam-header__nav .wc-block-mini-cart__quantity-badge:hover {
  color: var(--memo-deep-orange);
}

/* "Nuevo" badge for the Programa de afiliados link. CSS-only by design: it is anchored to
   where the link actually renders — the plugin's header anchor (class bam-program-link,
   injected by buscandoamemo-ref) and the footer link list (matched by its real permalink) —
   and touches nothing when the link is absent. The chip is absolutely positioned at the
   link's top-right, so it adds no inline width: the header links row is flex-nowrap and
   already clips at small viewports (see the gap-saving rules below), which is exactly why
   the badge must not widen the row. Dark ink on --memo-orange is the same pair
   .bam-hero__cta already uses (8.03:1). Screen readers fold the chip text into the link's
   accessible name ("Programa de afiliados Nuevo"), which is intentional for a promo label.
   Geometry (validated): absolute positioning keeps the chip out of flow, so the flex-nowrap
   header row width is unchanged at 320px; top:-0.7em puts the chip bottom above the link's
   glyph tops (chip bottom ≈ +2.7px vs glyph tops +7px at 16px), avoiding clipped letters. */
.bam-header__links a.bam-program-link,
.bam-footer__nav a[href*="/programa-de-afiliados/"] {
  position: relative;
}

.bam-header__links a.bam-program-link::after,
.bam-footer__nav a[href*="/programa-de-afiliados/"]::after {
  content: "Nuevo";
  position: absolute;
  /* -0.7em keeps the whole chip above the link's ascender line (its bottom sits
     below the glyph tops otherwise, clipping "d"/"o" descenders of the label). */
  top: -0.9em;
  right: -0.9em;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  background: var(--memo-orange);
  color: var(--dark);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.51em;
  letter-spacing: 0.4px;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}



/* =========================================================================
   2. HERO — "EN VIVO" — Two-column, gradient bg, character float, bubbles
   ========================================================================= */

.bam-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px clamp(20px, 5vw, 80px) 60px;
  background: linear-gradient(160deg, var(--midnight-ocean) 0%, var(--deep-ocean) 50%, #0a4f7a 100%);
  overflow: hidden;
}

.bam-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(22, 198, 232, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.bam-hero::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(247, 147, 30, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.bam-hero__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.bam-hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bam-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: rgba(255, 48, 48, 0.15);
  border: 1px solid rgba(255, 48, 48, 0.3);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--show-red);
}

.bam-hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--show-red);
  animation: bam-on-air-pulse 1.5s ease-in-out infinite;
}

.bam-hero__title {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.bam-hero__subtitle,
.bam-hero__tension-line {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 520px;
}

.bam-hero__tension-line {
  font-style: italic;
}

.bam-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bam-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 0 32px;
  background: var(--memo-orange);
  /* Dark ink, not white. White on --memo-orange measures 2.30:1. Reaching 4.5
     with white text would mean darkening the button to a muted brown and losing
     the vivid brand orange, which is the one moment the design cannot afford
     to lose. The brand's own --dark on the same orange gives 8.03:1, so the
     button keeps its exact colour and simply reads dark-on-orange -- a bolder,
     higher-contrast treatment of the same element. Hover (#E85D04) holds at
     5.27:1. */
  color: var(--dark);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(247, 147, 30, 0.3);
}

.bam-hero__cta .wp-block-button__link {
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  /* SC 2.5.8: the vertical rhythm moved here. The wrapper owned the 14px and
     the <a> was only 29.4px tall. The link now carries the full 14px, making
     the real target 57.4px, without altering the pill's outward size. */
  padding: 14px 0;
}

.bam-hero__cta:hover {
  background: var(--memo-deep-orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(247, 147, 30, 0.4);
}

.bam-hero__meta {
  margin-block-start: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.8rem;
  /* 0.4 composited to 2.72:1 against the LIGHTEST stop of the hero gradient
     (#0a4f7a, the 100% end of the 160deg sweep) -- i.e. it fails somewhere
     along the sweep, not everywhere, which is why it slipped a viewport-only
     audit. 0.7 measures 5.15:1 at the worst point in the gradient. */
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

.bam-hero__character {
  margin-block-start: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bam-hero__character-img {
  width: clamp(220px, 25vw, 450px);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
  /* animation: bam-float 4s ease-in-out infinite; */
}

/* @keyframes bam-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
} */

/* Bubbles — slow rising, varied sizes */
.bam-hero__bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.bam-hero__bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(22, 198, 232, 0.25), rgba(22, 198, 232, 0.04));
  border: 1px solid rgba(22, 198, 232, 0.18);
}

.bam-hero__bubble:nth-child(1) {
  width: 90px;
  height: 90px;
  bottom: -120px;
  left: 8%;
  animation: bam-bubble-rise 11s ease-in-out infinite 1.5s;
}

.bam-hero__bubble:nth-child(2) {
  width: 48px;
  height: 48px;
  bottom: -120px;
  left: 28%;
  animation: bam-bubble-rise 14s ease-in-out infinite 4s;
}

.bam-hero__bubble:nth-child(3) {
  width: 130px;
  height: 130px;
  bottom: -160px;
  right: 12%;
  animation: bam-bubble-rise 18s ease-in-out infinite 2.5s;
}

.bam-hero__bubble:nth-child(4) {
  width: 38px;
  height: 38px;
  bottom: -120px;
  right: 34%;
  animation: bam-bubble-rise 9s ease-in-out infinite 6s;
}

@keyframes bam-bubble-rise {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  75% {
    opacity: 0.65;
  }
  95% {
    transform: translateY(calc(-100vh - 200px)) translateX(24px) scale(1.05);
    opacity: 0.2;
  }
  100% {
    transform: translateY(calc(-100vh - 240px)) translateX(24px) scale(1.05);
    opacity: 0;
  }
}

/* Scroll indicator */
.bam-hero__scroll {
  margin-block-end: 24px !important;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  animation: bam-scroll-bounce 2s ease-in-out infinite;
}

.bam-hero__scroll p {
  margin: 0;
}

.bam-hero__scroll:hover {
  color: var(--cyan);
}

.bam-hero__scroll-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

@keyframes bam-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* Smooth anchor scrolling, offset for the fixed header */
html {
  scroll-behavior: smooth;
}

.bam-story,
.bam-features,
.bam-product,
.bam-testimonials,
.bam-faq,
.bam-cta {
  scroll-margin-top: 80px;
  margin-block-start: 0;
}

/* =========================================================================
   3. STORY HOOK — "MEMO INVESTIGA" — Cream bg, quote block
   ========================================================================= */

.bam-story {
  position: relative;
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px);
  background: var(--cream);
  color: var(--dark);
}

.bam-story::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--memo-orange), var(--memo-gold), var(--cyan));
}

.bam-story__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bam-story__label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* Ink variant: --ocean-blue is 4.15:1 on --cream, under the 4.5 required for
     text this size. Same hue, shaded to 5.38:1. */
  color: var(--ocean-blue-ink);
}

.bam-story__heading {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.2;
  color: var(--dark);
  margin: 0;
}

.bam-story__description {
  font-size: 1.15rem;
  line-height: 1.85;
  color: rgba(23, 19, 19, 0.78);
  max-width: 660px;
  margin: 0 auto;
}

.bam-story__quote {
  position: relative;
  margin: 24px auto 0;
  padding: 28px 36px;
  max-width: 600px;
  border-left: 4px solid var(--memo-orange);
  background: rgba(247, 147, 30, 0.06);
  border-radius: 0 12px 12px 0;
  text-align: left;
}

.bam-cta__container .bam-story__quote {
  margin: 0 auto;
  border-left: 4px solid #fff;
  text-align: left;
}

.bam-story__quote-text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--dark);
  margin: 0 0 14px;
}

.bam-story__quote-author {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  /* Ink variant: --memo-orange is 1.97:1 on the quote's tinted cream panel.
     Saturated orange can never reach 4.5:1 on a light surface, so the byline
     uses the deeper shade of the same hue (5.22:1). The quote's own left border
     still uses the bright --memo-orange, so the section keeps its accent. */
  color: var(--orange-ink);
  margin: 0;
}

/* =========================================================================
   4. FEATURES — "ADENTRO DEL LIBRO" — 3-col grid, glassmorphism cards
   ========================================================================= */

.bam-features {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px);
  background: linear-gradient(180deg, var(--deep-ocean) 0%, var(--midnight-ocean) 100%);
}

.bam-features__container {
  max-width: 1200px;
  margin: 0 auto;
}

.bam-features__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bam-features__label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}

.bam-features__heading {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  color: #fff;
  margin: 0;
}

.bam-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bam-features__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.bam-features__card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(247, 147, 30, 0.3);
  transform: translateY(-4px);
}

.bam-features__card-icon {
  font-size: 2.8rem;
  line-height: 1;
}

.bam-features__card-title {
  font-family: 'Lilita One', cursive;
  font-size: 1.4rem;
  color: var(--memo-gold);
  margin: 0;
}

.bam-features__card-desc {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* =========================================================================
   5. PRODUCT SHOWCASE — "EL LIBRO" — Two-column, price badge
   ========================================================================= */

.bam-product {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px);
  background: #fff;
  color: var(--dark);
}

.bam-product > .wp-block-group {
  margin-bottom: clamp(40px, 5vw, 60px);
}

.bam-product__container {
  max-width: 1200px;
  margin: 24px auto 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.bam-product__label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ocean-blue);
  margin-bottom: 10px;
}

.bam-product__heading {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  color: var(--dark);
  margin: 0;
}

.bam-product__cover {
  position: relative;
  display: flex;
  justify-content: center;
}

.bam-product-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border: 2px dashed rgba(8, 126, 164, 0.35);
  border-radius: 24px;
  padding: 32px;
  background: rgba(22, 198, 232, 0.05);
  color: rgba(23, 19, 19, 0.45);
  text-align: center;
}

.bam-product-placeholder span:first-child {
  font-size: 3rem;
  line-height: 1;
}

.bam-product-placeholder span:last-child {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  max-width: 220px;
}

.bam-product__cover .wp-block-image {
  position: relative;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.bam-product__cover .wp-block-image img.bam-product__cover-img {
  max-width: 360px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.bam-product__price-badge {
  position: absolute;
  bottom: 9px;
  right: -3px;
  background: #000000;
  color: var(--memo-gold);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.23rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px 0 0 999px;
  border: 1px solid var(--memo-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.bam-product__details {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bam-product__description {
  margin-block-start: 0;
  font-size: 1.12rem;
  line-height: 1.85;
  color: rgba(23, 19, 19, 0.75);
}

.bam-product__specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bam-product__specs li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  color: rgba(23, 19, 19, 0.8);
}

.bam-product__specs li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(22, 198, 232, 0.12);
  color: var(--ocean-blue);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.bam-product__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bam-product__btn,
.bam-product__cta {
  display: inline-flex;
  align-items: center;
  padding: 0 32px;
  background: var(--memo-orange);
  /* Same correction as .bam-hero__cta: 8.03:1 instead of 2.30:1, and the button
     keeps the exact brand orange. */
  color: var(--dark);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(247, 147, 30, 0.3);
}

.bam-product__btn .wp-block-button__link,
.bam-product__cta .wp-block-button__link {
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  /* SC 2.5.8: same correction as .bam-hero__cta -- the 14px moved from the
     wrapper to the link so the real target is 57.4px, not 29.4px. */
  padding: 14px 0;
}

.bam-product__btn:hover,
.bam-product__cta:hover {
  background: var(--memo-deep-orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(247, 147, 30, 0.4);
}

.bam-product__preview {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--ocean-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bam-product__preview:hover {
  color: var(--deep-ocean);
}

/* =========================================================================
   6. TESTIMONIALS — "EL PUBLICO RESPONDE" — scroll-snap carousel
   ========================================================================= */

.bam-testimonials {
  /* Single source of truth for the horizontal rhythm. The section padding and
     the track's negative margin / snap padding all read this var, so the track
     can bleed past the content column while the first and last card still line
     up with it exactly. */
  --bam-testimonials-gutter: clamp(20px, 5vw, 80px);
  --bam-testimonials-gap: 28px;
  padding: clamp(60px, 8vw, 100px) var(--bam-testimonials-gutter);
  background: linear-gradient(180deg, var(--midnight-ocean) 0%, var(--deep-ocean) 100%);
}

.bam-testimonials__container {
  max-width: 1200px;
  margin: 0 auto;
}

.bam-testimonials__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bam-testimonials__label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}

.bam-testimonials__heading {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  color: #fff;
  margin: 0;
}

/* --- Carousel shell ------------------------------------------------------ */

.bam-testimonials__carousel {
  position: relative;
}

/* --- Track -------------------------------------------------------------- */

.bam-testimonials__track {
  display: flex;
  gap: var(--bam-testimonials-gap);
  overflow-x: auto;
  overflow-y: hidden;
  /* iOS momentum scrolling for touch drags on the track. */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* No CSS scroll-behavior here on purpose: the "auto" value of
     scrollBy({behavior}) means "instant", but it would silently inherit
     scroll-behavior: smooth if we set it. Motion belongs to the JS, which
     downgrades it to "auto" for prefers-reduced-motion users. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Bleed past the 1200px column so a card is never clipped by the section
     edge, with matching padding so the visible first/last card still sits
     flush with the content column. */
  margin-inline: calc(-1 * var(--bam-testimonials-gutter));
  padding-inline: var(--bam-testimonials-gutter);
  /* Paints the snapport the same distance, so scroll-snap-align: start lines
     the first card up with the content edge instead of the raw scrollport. */
  scroll-padding-inline: var(--bam-testimonials-gutter);
  /* Breathing room for the card hover lift so the transform is not clipped. */
  padding-block: 4px 10px;
}

.bam-testimonials__track::-webkit-scrollbar {
  display: none;
}

/* Customizer fallback: no reviews, so nothing to scroll. Wraps into rows and
   shows every testimonial at once — no JS, no chrome, no hidden content. */
.bam-testimonials__track--static {
  flex-wrap: wrap;
  /* Both axes, not just overflow-x: a `visible` inline value is coerced to
     `auto` when the block axis is `hidden`, which would keep it a scroller. */
  overflow: visible;
  scroll-snap-type: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 0;
}

/* --- Slides ------------------------------------------------------------- */

.bam-testimonials__slide {
  /* Three cards on desktop. The basis subtracts both gaps so three cards plus
     their three gaps fill the row exactly, with no orphan gap on the right.
     Breakpoints 1024px (two up) and 640px (one up) live in the media queries
     at the end of this section. */
  flex: 0 0 calc((100% - (2 * var(--bam-testimonials-gap))) / 3);
  min-width: 0;
  scroll-snap-align: start;
  /* Row-level default stretches every slide to the tallest card in the
     carousel. This is what keeps the review footers on a shared baseline
     despite review text ranging from ~200 to ~340 characters. */
  display: flex;
  margin-block-start: 0;
}

.bam-testimonials__card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 36px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Fills the slide on both axes; the slide owns the basis and the height. */
  flex: 1 1 auto;
  min-width: 0;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.bam-testimonials__card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

.bam-testimonials__card::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: 'Lilita One', cursive;
  font-size: 4rem;
  line-height: 1;
  color: rgba(247, 147, 30, 0.2);
  pointer-events: none;
}

/* --- Stars -------------------------------------------------------------- */

.bam-testimonials__stars {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--memo-gold);
  /* Top-right, clear of the ::before quote glyph pinned to the top-left. */
  align-self: flex-end;
}

.bam-testimonials__star {
  display: block;
}

.bam-testimonials__star--empty {
  color: rgba(255, 255, 255, 0.16);
}

/* --- Review body -------------------------------------------------------- */

.bam-testimonials__card-text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* --- Footer ------------------------------------------------------------- */

.bam-testimonials__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
  /* Absorbs whatever height the review above it did not use, so the author
     and date pin to the bottom of every card no matter how long the quote is. */
  margin-top: auto;
  padding-top: 2px;
}

.bam-testimonials__card-author {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--memo-gold);
  margin: 0;
}

.bam-testimonials__date {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  /* The previous comment here claimed 0.5 alpha "clears 4.5:1 against the
     section gradient". It does not: composited over the gradient's lightest
     stop (--deep-ocean #063B63) it measures 4.08:1. 0.6 measures 5.21:1. */
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  white-space: nowrap;
}

/* --- Controls ----------------------------------------------------------- */

.bam-testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Wraps if a long review list ever outgrows a narrow row of dots. */
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 40px);
}

.bam-testimonials__nav {
  margin-block-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: comfortably above the 24px AA minimum target size. */
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--memo-gold);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.2s ease;
}

.bam-testimonials__nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  margin-block-start: 0;
}

.bam-testimonials__nav:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.bam-testimonials__nav:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none;
}

.bam-testimonials__nav-icon {
  display: block;
  pointer-events: none;
}

/* --- Dots --------------------------------------------------------------- */

.bam-testimonials__dots {
  margin-block-start: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bam-testimonials__dot {
  /* 24px hit area (AA 2.5.8) around a 10px visual dot drawn by ::after. */
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  margin-block-start: 0;
}

.bam-testimonials__dot::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  background: transparent;
  /* 0.42 alpha clears the 3:1 UI-component contrast floor for the inactive
     dot, which is its only non-colour affordance. */
  border: 1px solid rgba(255, 255, 255, 0.42);
  transition: background-color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.bam-testimonials__dot:hover::after {
  border-color: rgba(255, 255, 255, 0.7);
}

.bam-testimonials__dot[aria-current='true']::after {
  background: var(--memo-gold);
  border-color: var(--memo-gold);
  transform: scale(1.15);
}

.bam-testimonials__dot:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 0;
}

/* --- Breakpoints -------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Two cards per row on tablet. The static fallback track reuses the same
     basis, so the empty state keeps the old two-column layout for free. */
  .bam-testimonials__slide {
    flex-basis: calc((100% - var(--bam-testimonials-gap)) / 2);
  }
}

@media (max-width: 640px) {
  /* One card per row on mobile: the longest review needs the full width. */
  .bam-testimonials__slide {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bam-testimonials__track {
    /* Defence in depth: the JS already passes behavior: 'auto', but a plugin
       or future edit adding scroll-behavior: smooth must not override it. */
    scroll-behavior: auto !important;
  }

  .bam-testimonials__card,
  .bam-testimonials__nav,
  .bam-testimonials__dot::after {
    transition: none;
  }

  .bam-testimonials__card:hover,
  .bam-testimonials__nav:hover:not(:disabled) {
    transform: none;
  }
}

/* =========================================================================
   7. FAQ — warm editorial break after the ocean-blue reader reviews
   ========================================================================= */

.bam-faq {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px);
  background: var(--cream);
  color: var(--dark);
}

.bam-faq__header {
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.bam-faq__label {
  margin: 0;
  color: var(--memo-deep-orange);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bam-faq__heading {
  margin: 0;
  color: var(--dark);
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
}

.bam-faq__list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid rgba(23, 19, 19, 0.18);
}

.bam-faq__item {
  border-bottom: 1px solid rgba(23, 19, 19, 0.18);
}

.bam-faq__question {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 18px 4px;
  color: var(--dark);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.bam-faq__question::-webkit-details-marker {
  display: none;
}

.bam-faq__question::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--memo-deep-orange);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}

.bam-faq__item[open] .bam-faq__question::after {
  content: '\2212';
}

.bam-faq__question:focus-visible {
  outline: 2px solid var(--ocean-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.bam-faq__answer {
  padding: 0 48px 20px 4px;
  color: rgba(23, 19, 19, 0.78);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}

.bam-faq__answer p {
  margin: 0;
}

.bam-faq__answer p + p {
  margin-top: 1em;
}

/* =========================================================================
   8. CTA FINAL — "MEMO RECOMIENDA" — Orange bg, white button
   ========================================================================= */

.bam-cta {
  position: relative;
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px);
  background: var(--memo-orange);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.bam-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.bam-cta__container {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.bam-cta__heading, .bam-cta__subheading {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  color: #fff;
  margin: 0;
}

.bam-cta__subheading {
  margin-block-start: 0;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

.bam-cta__description, .bam-cta__subdescription {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  margin: 0;
}

.bam-cta__subdescription {
  font-style: italic;
}

.bam-cta__button {
  display: inline-flex;
  align-items: center;
  padding: 0 40px;
  background: #fff;
  color: var(--memo-orange);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.bam-cta__button .wp-block-button__link {
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  /* SC 2.5.8: same correction as the hero/product CTAs -- 16px moved from the
     wrapper so the real target is 64px, not 32px. */
  padding: 16px 0;
}

.bam-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   8. FOOTER — Dark bg, muted text, centered
   ========================================================================= */

.bam-footer {
  padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 80px);
  background: var(--dark);
  /* 0.4 measured 3.81:1 on --dark -- under 4.5 for the inherited body text.
     0.55 measures 6.19:1 and still reads clearly softer than the 0.7 headings,
     so the footer keeps its visual hierarchy. */
  color: rgba(255, 255, 255, 0.55);
}

.bam-footer__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.bam-footer__logo-text {
  font-family: 'Lilita One', cursive;
  font-size: 1.25rem;
  color: var(--memo-orange);
  margin: 0;
}

.bam-footer__tagline {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  /* 0.45 measured 4.51:1 -- a rounding-error's margin over the 4.5 threshold.
     Raised to the footer's 0.55 base for real headroom (6.19:1). */
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 500px;
  font-style: italic;
}

.bam-footer__nav {
  margin: 8px 0 0;
  max-width: 100%;
}

/* The row is laid out here, on the list, rather than on the <nav> above it: the <nav> has
   exactly one child, so a gap declared on it would sit between the nav and the list and
   space nothing. The list is what holds the items.

   list-style is on BOTH the list and the items, and deliberately not display: none. The
   whole point of keeping nav > ul > li > a is that a screen reader announces a navigation
   list of five instead of five loose anchors; hiding the items to lose the bullet takes the
   links out of the accessibility tree with the dot, and nothing about that fails or logs --
   the link is simply gone for anyone not looking at the screen. Removing the marker is the
   only version of this change that is not also a regression. */
.bam-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bam-footer__nav-item {
  list-style: none;
}

.bam-footer__nav a {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bam-footer__nav a:hover {
  color: var(--memo-orange);
}

.bam-footer__copyright {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  /* Was 0.3, which composites to #5D5A5A on --dark = 2.70:1 -- the worst
     offender in the report. 0.55 gives 6.19:1. */
  color: rgba(255, 255, 255, 0.55);
  margin: 8px 0 0;
}

.bam-footer__copyright-text,
.bam-footer__copyright .wp-block-site-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: inherit;
  color: inherit;
  margin: 0;
}

/* SC 2.5.8: the bare inline line-box of these two footer links measured 22px
   (logo-text, on *page_id) and 15px (copyright-title). Padding grows the real
   hit area to >= 24px without moving the text -- inline-block makes the
   padding part of the clickable box. */
.bam-footer__logo-text a,
.bam-footer__copyright p a {
  display: inline-block;
  padding: 2px 0;
}

.bam-footer__copyright p a {
  padding: 5px 0 4px;
}

/* --- Footer mobile nav -----------------------------------------------------
   Home renders the footer nav with overlayMenu:"mobile", which collapses the
   links behind a 24px trigger at small widths. The trigger moved to the fixed
   header, and the footer links here are always visible instead -- the nav
   never traps its links behind a trigger at any width. */
.bam-footer__nav .wp-block-navigation__responsive-container-open {
  display: none !important;
}

@media (max-width: 600px) {
  .bam-footer__nav.is-responsive .wp-block-navigation__responsive-container {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bam-footer__nav.is-responsive .wp-block-navigation__responsive-container
    ul.wp-block-navigation__container {
    flex-direction: row !important;
    justify-content: center !important;
  }
}

@media (max-width: 340px) {
  /* At 320 the fixed header still clips the account / mini-cart icons past the
     viewport edge (cluster right edge measured 346px). Slim the chrome: the
     logo text wraps two lines here, so a smaller font costs nothing visually. */
  .bam-header {
    padding: 0 14px;
  }

  .bam-header__logo {
    gap: 8px;
  }

  .bam-header__logo-text {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
  }

  .bam-header__nav {
    gap: 10px;
  }

  .bam-header__links {
    gap: 10px;
  }
}

/* =========================================================================
   RESPONSIVE — 768px breakpoint (tablet)
   ========================================================================= */

@media (max-width: 768px) {
  /* Header */
  .bam-header__nav {
    gap: 12px;
  }

  .bam-header__links {
    gap: 12px;
  }

  /* Hero */
  .bam-hero {
    padding: 100px 20px 80px;
    min-height: auto;
  }

  .bam-hero__container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .bam-hero__text {
    align-items: center;
    order: 2;
  }

  .bam-hero__badge {
    align-self: center;
  }

  .bam-hero__subtitle {
    max-width: 100%;
  }

  .bam-hero__actions {
    justify-content: center;
  }

  .bam-hero__character {
    order: 1;
  }

  .bam-hero__character-img {
    width: clamp(180px, 40vw, 260px);
  }

  .bam-hero__scroll {
    display: none;
  }

  /* Story */
  .bam-story {
    padding: clamp(40px, 6vw, 60px) 20px;
  }

  .bam-story__quote,
  .ff-message-success,
  #fluentform_1_success,
  .ff_form_not_render,
  #ff_form_1 {
    padding: 20px 24px;
  }

  /* Features */
  .bam-features {
    padding: clamp(40px, 6vw, 60px) 20px;
  }

  .bam-features__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Product */
  .bam-product {
    padding: clamp(40px, 6vw, 60px) 20px;
  }

  .bam-product__container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .bam-product__cover {
    order: 1;
  }

  .bam-product__details {
    order: 2;
    align-items: center;
  }

  .bam-product__actions {
    justify-content: center;
  }

  /* Testimonials */
  .bam-testimonials {
    /* Keep the gutter var in sync with the padding below, otherwise the track's
       negative margin and snap padding would no longer match the section. */
    --bam-testimonials-gutter: 20px;
    --bam-testimonials-gap: 20px;
    padding: clamp(40px, 6vw, 60px) 20px;
  }

  .bam-testimonials__card {
    padding: 30px 24px 26px;
  }

  /* FAQ */
  .bam-faq {
    padding: clamp(40px, 6vw, 60px) 20px;
  }

  /* CTA */
  .bam-cta {
    padding: clamp(40px, 6vw, 60px) 20px;
  }

  /* Footer */
  .bam-footer {
    padding: clamp(30px, 5vw, 40px) 20px;
  }
}

/* =========================================================================
   RESPONSIVE — 600px breakpoint (narrow phones)
   Logo + book badge on the first row; account / cart / program link on the
   second. One row cannot hold all five at this width — the program anchor is
   pushed past the viewport edge — so the header wraps rather than dropping
   any of the elements the header is required to carry.
   ========================================================================= */
@media (max-width: 600px) {
  .bam-header {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .bam-header-inner {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .bam-header__nav {
    width: 100%;
    justify-content: flex-end;
  }

  /* Clear the taller two-row fixed header. */
  .bam-hero {
    padding-top: 150px;
  }
}

/* =========================================================================
   RESPONSIVE — 480px breakpoint (small mobile)
   ========================================================================= */

@media (max-width: 480px) {
  .bam-hero__title {
    font-size: 1.65rem;
  }

  .bam-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .bam-hero__cta {
    /* width: 100%; */
    justify-content: center;
  }

  .bam-story__heading {
    font-size: 1.5rem;
  }

  .bam-features__heading,
  .bam-testimonials__heading,
  .bam-product__heading,
  .bam-cta__heading {
    font-size: 1.5rem;
  }

  /* Testimonials carousel: one card already fills the row here, so tighten the
     chrome instead of the cards. */
  .bam-testimonials__card {
    padding: 26px 20px 22px;
  }

  .bam-testimonials__controls {
    gap: 6px;
    margin-top: 22px;
  }

  .bam-testimonials__nav {
    /* SC 2.5.8: previously 40px here, which the audit flagged as under the
       44px AA recommendation. Keep the arrows at the desktop 44px on mobile. */
    width: 44px;
    height: 44px;
  }

  .bam-testimonials__dots {
    gap: 0;
  }

  .bam-product__cta {
    width: 100%;
    justify-content: center;
  }

  .bam-cta__button {
    width: 100%;
    justify-content: center;
  }

  .bam-footer__nav-list {
    gap: 16px;
  }
}

/* =========================================================================
   CONTACT — Fluent Forms success message styled like the story quote
   ========================================================================= */

.ff-message-success,
.fluentform .ff-message-success,
#fluentform_1_success {
  position: relative;
  margin: 0;
  padding: 28px 36px;
  border: 0;
  border-left: 4px solid var(--memo-orange);
  background: rgba(247, 147, 30, 0.06);
  border-radius: 0 12px 12px 0;
  text-align: left;
  box-shadow: none;
}

.ff-message-success p,
.fluentform .ff-message-success p {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--dark);
  margin: 0 0 14px;
}

.ff-message-success p:last-child,
.fluentform .ff-message-success p:last-child {
  font-size: 0.95rem;
  font-weight: 600;
  font-style: normal;
  color: var(--memo-orange);
  margin: 0;
}

/* =========================================================================
   CONTACT — Fluent Forms "form not rendered" error styled like the story
   quote but with error colors
   ========================================================================= */

.ff_form_not_render,
.fluentform .ff_form_not_render,
#ff_form_1 {
  position: relative;
  margin: 0;
  padding: 28px 36px;
  border: 0;
  border-left: 4px solid var(--show-red);
  background: rgba(255, 48, 48, 0.06);
  border-radius: 0 12px 12px 0;
  text-align: left;
  box-shadow: none;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--dark);
}

.ff_form_not_render {
  margin-block-start: 24px !important;
}

.ff_form_not_render p,
.fluentform .ff_form_not_render p {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--dark);
  margin: 0 0 14px;
}

.ff_form_not_render p:last-child,
.fluentform .ff_form_not_render p:last-child {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--show-red);
  margin: 0;
}

/* =========================================================================
   UTILITY — Skip to content (accessibility)
   =========================================================================
   The skip link is emitted by bam_skip_to_content() in functions.php with
   class="skip-link screen-reader-text", and core ships a generic :focus
   treatment in its wp-block-template-skip-link inline stylesheet (grey
   #eee/#444). We restate the resting state and own the :focus state here so
   the affordance is brand-correct and does not depend on a core inline
   stylesheet that is registrable/removable.

   Specificity note: core's rule is `.skip-link.screen-reader-text:focus`
   (0,3,0). These selectors are written at the same specificity and this
   stylesheet is enqueued after core's inline <style>, so the cascade order
   decides and the theme wins. Do not "simplify" these to `.skip-link:focus`
   (0,2,0) — that would lose to core.
   ========================================================================= */

.skip-link.screen-reader-text {
  position: absolute !important;
  top: -100px;
  left: 8px;
  z-index: 100000;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 24px;
  overflow: visible;
  clip-path: none;
  background: var(--memo-deep-orange, #E85D04);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 3px solid var(--memo-gold, #FFB21C);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 18px rgba(6, 27, 53, 0.35);
}

/* The single state that matters: visible, on screen, and on top. */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  top: 0;
  outline: 3px solid var(--memo-cyan, #16C6E8);
  outline-offset: 2px;
}

/* Skip-link target must not hide under the sticky header (WCAG 2.4.11). */
#wp--skip-link--target {
  scroll-margin-top: 96px;
}

/* Third-party widget contrast.
 *
 * Complianz renders its accept button as white text on the brand orange #f7931e.
 * That pair measures 2.29:1, but at 15px normal weight WCAG AA requires 4.5:1,
 * which is the sole failing item in `color-contrast`. White can never reach 4.5:1
 * on that orange, so the fix is to invert the foreground rather than darken the
 * brand colour. A Lighthouse run only catches this when the consent banner is
 * actually painted, so treat a green color-contrast audit as unproven until the
 * banner is on screen. */
.cmplz-btn.cmplz-accept {
  color: #1a1a1a !important;
  background-color: #f7931e;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}