/* ==========================================================================
   Freesheart™ — Renewal notice
   A slim, dismissible announcement that sits above the site header while the
   business is being revamped. It lives outside the React root, so it never
   touches page rendering, and it scrolls away so the sticky header behaves
   exactly as before.
   ========================================================================== */

.fh-renewal {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(196, 154, 60, 0.28), transparent 55%),
    radial-gradient(120% 180% at 100% 100%, rgba(184, 92, 42, 0.32), transparent 55%),
    #241812;
  color: #f7f2ea;
  font-family: var(--fh-body-font, "DM Sans", system-ui, sans-serif);
  border-bottom: 1px solid rgba(221, 185, 106, 0.45);
}

.fh-renewal-inner {
  position: relative;
  z-index: 1;
  max-width: var(--fh-shell-max, 1200px);
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  padding-right: calc(clamp(16px, 4vw, 32px) + 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 20px;
  text-align: center;
}

.fh-renewal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ddb96a;
  white-space: nowrap;
}

.fh-renewal-spark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ddb96a;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(221, 185, 106, 0.8);
  animation: fh-renewal-pulse 2.6s ease-in-out infinite;
}

.fh-renewal-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 62ch;
}

.fh-renewal-message strong {
  font-family: var(--fh-display-font, "Cormorant Garamond", Georgia, serif);
  font-size: 1.2em;
  font-weight: 600;
  font-style: italic;
  color: #f3d9a0;
}

.fh-renewal-date {
  white-space: nowrap;
  color: #ddb96a;
  font-weight: 600;
}

.fh-renewal-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #241812;
  background: #ddb96a;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.fh-renewal-link:hover {
  background: #f3d9a0;
  transform: translateY(-1px);
}

.fh-renewal-close {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(8px, 3vw, 24px);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221, 185, 106, 0.4);
  border-radius: 50%;
  background: transparent;
  color: #f7f2ea;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fh-renewal-close:hover {
  background: rgba(221, 185, 106, 0.18);
}

/* A soft drift of gold light behind the copy — purely decorative. */
.fh-renewal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(243, 217, 160, 0.14) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: fh-renewal-shimmer 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fh-renewal-shimmer {
  0% { background-position: 120% 0; }
  60%, 100% { background-position: -120% 0; }
}

@keyframes fh-renewal-pulse {
  0%, 100% { opacity: 0.55; transform: rotate(45deg) scale(0.85); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.1); }
}

@media (max-width: 640px) {
  .fh-renewal-inner {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .fh-renewal-message {
    font-size: 0.9rem;
  }
  .fh-renewal-close {
    top: 10px;
    transform: none;
  }
}

/* Respect the site's reading controls and the OS motion preference. */
@media (prefers-reduced-motion: reduce) {
  .fh-renewal::after,
  .fh-renewal-spark { animation: none; }
}

:root.fh-reduce-motion .fh-renewal::after,
:root.fh-reduce-motion .fh-renewal-spark,
:root.fh-calm .fh-renewal-spark {
  animation: none;
}

:root.fh-calm .fh-renewal {
  background: #241812;
}

:root.fh-calm .fh-renewal::after {
  display: none;
}

:root.fh-contrast .fh-renewal {
  background: #000000;
  color: #ffffff;
  border-bottom: 2px solid #ffe08a;
}

:root.fh-contrast .fh-renewal::after { display: none; }

:root.fh-contrast .fh-renewal-eyebrow,
:root.fh-contrast .fh-renewal-date,
:root.fh-contrast .fh-renewal-message strong {
  color: #ffe08a;
}

:root.fh-contrast .fh-renewal-link {
  background: #ffe08a;
  color: #000000;
}

:root.fh-contrast .fh-renewal-close {
  color: #ffffff;
  border-color: #ffffff;
}

:root.fh-renewal-dismissed .fh-renewal,
.fh-renewal[hidden] {
  display: none;
}

@media print {
  .fh-renewal { display: none; }
}