/* ==========================================================================
   828 Mega Mums — sitewide announcement bar

   Loaded on EVERY page. Moved out of homepage.css so it is no longer gated
   behind is_front_page().

   Layout contract:
   - The bar is a normal in-flow block at the very top of the page, so it
     SCROLLS AWAY with the page. Nothing here is fixed or sticky.
   - Its top padding is what clears the floating fixed header, which is why
     .mm-site-header-spacer is suppressed whenever the bar is present.
   - Colors and text-size multipliers come from the Customizer as inline
     custom properties set in includes/announcement-bar.php.

   Text sizing:
   - Each breakpoint sets a designed base size (--mm-status-base etc).
   - The Customizer multiplies it (--mm-announcement-*-scale, default 1).
   - So changing a size in the admin keeps the responsive behavior intact
     instead of pinning the bar to one fixed pixel value.

   Do not reference WooCommerce, RedNao, product wizard, or cart selectors here.
   ========================================================================== */

.mm-announcement-bar-wrap {
  position: relative;
  z-index: 20;
  width: 100%;
  /* Top padding clears the fixed floating header. It is derived from the live
     header height so a wrapped two-line nav can never overlap this bar.
     On the homepage this padding is the ONLY thing clearing the header,
     because .mm-site-header-spacer is suppressed there. */
  padding: calc(var(--mm-header-height, 84px) + var(--mm-header-gap, 24px)) 32px 12px;
  background: transparent;
  transform-origin: center top;
}

.mm-announcement-bar {
  /* Designed sizes for this breakpoint. Overridden further down. */
  --mm-status-base: 1.05rem;
  --mm-urgency-base: 1.02rem;
  --mm-action-base: 0.92rem;
  /* Designed icon size for the Call/Text buttons. The Customizer multiplies
     this, exactly like the text controls, so desktop and phone can each be
     tuned without touching code. */
  --mm-icon-base: 1.15em;
  --mm-icon-scale-active: var(--mm-announcement-icon-scale, 1);
  --mm-action-scale-active: var(--mm-announcement-action-scale, 1);

  /* Which status multiplier is live right now. Desktop and tablet use the
     desktop control; the phone breakpoint swaps in its own. */
  --mm-status-scale-active: var(--mm-announcement-status-scale, 1);

  /* Matches the floating header's edges exactly at every desktop width:
     the header is capped at 1744px and this wrapper's 32px side padding
     lines up with the header's own 32px inset. Lower this one number if
     you ever want the bar narrower than the navigation above it. */
  width: min(100%, 1744px);
  /* Trimmed from 62px/16px. The old values were tuned for the original very
     round pill shape and left a lot of dead vertical space now that the bar
     is squarer -- which matters more since the nav above it can wrap. */
  min-height: 50px;
  margin: 0 auto;
  padding: 9px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 20px;
  border: 1px solid rgba(159, 63, 105, 0.16);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(143, 79, 104, 0.12);
  background: var(--mm-announcement-bg, #DC6496);
  color: var(--mm-announcement-text, #FFFFFF);
  font-family: var(--font-body, 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif);
  text-align: center;
}

.mm-announcement-bar p { margin: 0; }

/* ---- One line of copy: STATUS - URGENCY ---------------------------------- */
.mm-announcement-bar__message {
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
  color: var(--mm-announcement-text, #FFFFFF);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.mm-announcement-bar__status {
  font-size: calc(var(--mm-status-base) * var(--mm-status-scale-active, 1));
  font-weight: 700;
}

.mm-announcement-bar__sep {
  margin-inline: 6px;
  font-size: calc(var(--mm-urgency-base) * var(--mm-announcement-urgency-scale, 1));
  opacity: 0.7;
}

.mm-announcement-bar__urgency {
  font-size: calc(var(--mm-urgency-base) * var(--mm-announcement-urgency-scale, 1));
  font-weight: 500;
  opacity: 0.94;
}

/* Desktop and tablet show the status and urgency as two separate lines, which
   is how this bar was designed. They were previously inline with a middot
   between them, so on anything narrower than a wide desktop they soft-wrapped
   into a ragged block instead of two clean lines.

   Because ::after is pinned to bottom:0 of this flex column, making it a
   column automatically puts the gold underline beneath the URGENCY line only,
   which is what was wanted -- and it still falls under the status line on
   phones, where urgency is hidden. No extra selector needed. */
@media (min-width: 701px) {
  .mm-announcement-bar__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .mm-announcement-bar__sep { display: none; }
}

/* Two status lines exist only when the phone wording differs from desktop.
   Whichever one is hidden is display:none, so screen readers skip it and
   the text is never read or announced twice. */
.mm-announcement-bar__status--desktop { display: inline; }
.mm-announcement-bar__status--mobile { display: none; }

.mm-announcement-bar__message::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(88%, 420px);
  height: 3px;
  border-radius: 999px;
  background: var(--mm-announcement-accent, #F4D38A);
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
}

/* ---- ACTION slot: real tel: and sms: tap targets ------------------------- */
.mm-announcement-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mm-announcement-bar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Squarer and tighter. 9px matches the Shop Mums / Shop Garters buttons in
     the identity bridge section, and the pill radius always looked oversized
     next to them. */
  min-height: 38px;
  padding: 6px 13px;
  border: 1px solid var(--mm-announcement-accent, #F4D38A);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--mm-announcement-text, #FFFFFF);
  font-size: calc(var(--mm-action-base) * var(--mm-action-scale-active, 1));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
}

.mm-announcement-bar__action svg {
  /* Size now comes from --mm-icon-base multiplied by the Customizer control,
     so it is adjustable per breakpoint under
     Appearance > Customize > Announcement Bar.
     Still expressed in `em` so it also tracks the button text size. */
  width: calc(var(--mm-icon-base) * var(--mm-icon-scale-active, 1));
  height: calc(var(--mm-icon-base) * var(--mm-icon-scale-active, 1));
  min-width: 13px;
  min-height: 13px;
  fill: currentColor;
  flex-shrink: 0;
}

.mm-announcement-bar__action:hover,
.mm-announcement-bar__action:focus-visible {
  background: var(--mm-announcement-accent, #F4D38A);
  color: #2C1A1D;
  transform: translateY(-1px);
}

.mm-announcement-bar__action:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* Desktop shows the full number; phones show the short verb. */
.mm-announcement-bar__action-short { display: none; }
.mm-announcement-bar__action-full { display: inline; }

/* ---- Entrance animation -------------------------------------------------- */
.mm-announcement-bar-wrap.has-pop-underline {
  animation: mm-announcement-double-pop 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.mm-announcement-bar.has-pop-underline .mm-announcement-bar__message::after {
  transform: translateX(-50%) scaleX(0);
  animation: mm-announcement-underline 0.7s ease-out 0.55s both;
}

@keyframes mm-announcement-double-pop {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.94); }
  35%  { opacity: 1; transform: translateY(0) scale(1.045); }
  55%  { transform: translateY(0) scale(0.985); }
  75%  { transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mm-announcement-underline {
  from { transform: translateX(-50%) scaleX(0); }
  to   { transform: translateX(-50%) scaleX(1); }
}

/* ---- Breakpoints --------------------------------------------------------- */
@media (max-width: 1100px) {
  .mm-announcement-bar-wrap { padding-inline: 16px; padding-bottom: 8px; }
  .mm-announcement-bar {
    --mm-status-base: 1rem;
    --mm-urgency-base: 0.96rem;
    --mm-action-base: 0.9rem;
    width: 100%;
    padding: 8px 20px;
    gap: 5px 16px;
    border-radius: 20px;
  }
}

/* Phone layout: short status line on top, two thumb-sized buttons below. */
@media (max-width: 700px) {
  .mm-announcement-bar {
    --mm-status-base: 0.95rem;
    --mm-action-base: 0.92rem;

    /* Phone gets its own status size control. If that field was left blank,
       PHP passes the desktop value through, so this stays in sync on its own. */
    --mm-status-scale-active: var(--mm-announcement-status-scale-mobile, var(--mm-announcement-status-scale, 1));

    /* Phone gets its own icon and button-text controls, each falling back to
       the desktop value when left blank. */
    --mm-icon-base: 1.05em;
    --mm-icon-scale-active: var(--mm-announcement-icon-scale-mobile, var(--mm-announcement-icon-scale, 1));
    --mm-action-scale-active: var(--mm-announcement-action-scale-mobile, var(--mm-announcement-action-scale, 1));

    /* The single biggest source of height on a phone. 5px top and bottom is
       enough to keep the text off the rounded edge and nothing more. */
    padding: 5px 12px;
    gap: 4px;
    border-radius: 20px;
    min-height: 0;
  }

  /* The wrapper's bottom padding stacks on top of the bar's own padding and
     was adding another 12px of dead space under the buttons. */
  .mm-announcement-bar-wrap { padding-bottom: 8px; }

  .mm-announcement-bar__message {
    width: 100%;
    /* Just enough room for the gold underline, no more. */
    padding-bottom: 5px;
  }

  /* Swap to the phone wording when a separate one has been entered. */
  .mm-announcement-bar__status--desktop { display: none; }
  .mm-announcement-bar__status--mobile { display: inline; }

  /* The urgency half is the first thing to go. Status plus two tap targets
     is the whole job of this bar on a phone. */
  .mm-announcement-bar__sep,
  .mm-announcement-bar__urgency { display: none; }

  .mm-announcement-bar__actions {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  .mm-announcement-bar__action {
    /* Was flex:1 1 0 with a 190px cap, which forced both buttons to stretch to
       the full cap regardless of their content. They now size to their text.

       The previous pass changed the shape but left min-height at 44px, so the
       buttons stayed exactly as tall as before -- that is why the padding fix
       looked like it had not applied. 36px plus the padding below lands the
       real tapped area right around 40px, which is still a comfortable target
       while looking properly sized against the text. */
    flex: 0 1 auto;
    min-height: 36px;
    max-width: none;
    padding: 4px 10px;
    gap: 6px;
  }
  .mm-announcement-bar__action-short { display: inline; }
  .mm-announcement-bar__action-full { display: none; }
}

@media (max-width: 520px) {
  .mm-announcement-bar-wrap { padding-inline: 12px; }
  .mm-announcement-bar { --mm-status-base: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-announcement-bar-wrap.has-pop-underline,
  .mm-announcement-bar.has-pop-underline .mm-announcement-bar__message::after {
    animation: none;
  }
  .mm-announcement-bar-wrap.has-pop-underline {
    opacity: 1;
    transform: none;
  }
  .mm-announcement-bar.has-pop-underline .mm-announcement-bar__message::after {
    transform: translateX(-50%) scaleX(1);
  }
  .mm-announcement-bar__action { transition: none; }
}