/* Post-Webflow overrides (client requests, 2026-07-23) */

/* Hero top bar pinned across the whole page as a centered floating pill.
   Over the hero: translucent glass. After scrolling (.is-scrolled, toggled
   by sticky-nav.js): light cream pill, dark text, solid dark CTA. */

.banner-top.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  background: transparent;
  pointer-events: none; /* the pill re-enables them */
}

/* The pill */
.banner-top.is-fixed .banner-top-flex-wrap {
  pointer-events: auto;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  align-items: center;
  padding: 0.45rem 0.55rem 0.45rem 1.4rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Slimmer logo in the pinned bar */
.banner-top.is-fixed .image-3 {
  min-width: 36px;
  max-width: 36px;
  transition: filter 0.25s ease;
}

.banner-top.is-fixed .subject-text {
  transition: color 0.25s ease;
  white-space: nowrap;
}

/* Rounded CTA inside the pill */
.banner-top.is-fixed .primary-button-inner {
  border-radius: 999px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.banner-top.is-fixed .primary-button-text,
.banner-top.is-fixed .primary-button-text-absolute {
  transition: color 0.25s ease;
}

/* --- Scrolled state: light pill, dark content --- */

.banner-top.is-fixed.is-scrolled .banner-top-flex-wrap {
  background-color: rgba(250, 247, 242, 0.97);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
}

.banner-top.is-fixed.is-scrolled .subject-text {
  color: #1c1c1c;
}

.banner-top.is-fixed.is-scrolled .image-3 {
  filter: brightness(0);
}

.banner-top.is-fixed.is-scrolled .primary-button-inner {
  background-color: #1c1c1c !important;
  border-color: #1c1c1c !important;
}

.banner-top.is-fixed.is-scrolled .primary-button-text,
.banner-top.is-fixed.is-scrolled .primary-button-text-absolute {
  color: #ffffff !important;
}

/* The Webflow hover animation slides a white overlay under the (now forced
   white) label — white on white. In the scrolled pill we disable that overlay
   and darken the button itself instead. */
.banner-top.is-fixed.is-scrolled .primary-button-hover-bg {
  display: none !important;
}

.banner-top.is-fixed.is-scrolled .primary-button:hover .primary-button-inner {
  background-color: #3d3d40 !important;
  border-color: #3d3d40 !important;
}

/* Compact pill on small screens */
@media (max-width: 479px) {
  .banner-top.is-fixed .banner-top-flex-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding-left: 1rem;
  }
}


/* Center links inside the pill nav (Manifest / Journal / Energy of Success) */
.banner-top.is-fixed .pill-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.banner-top.is-fixed .pill-nav-links a {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: color 0.25s ease, opacity 0.15s ease;
}

.banner-top.is-fixed .pill-nav-links a:hover {
  opacity: 1;
  text-decoration: none;
}

.banner-top.is-fixed.is-scrolled .pill-nav-links a {
  color: #1c1c1c;
}

@media (max-width: 767px) {
  .banner-top.is-fixed .pill-nav-links {
    display: none;
  }
}


/* Mobile pill nav (2026-08-02): swap "A Personal Talisman" for an
   "Editorial Journal" link and shorten the CTA to "Create Talisman".
   The pill stretches across the screen (the .container provides 5vw
   gutters at this breakpoint) with the journal link centered between
   the logo and the CTA. Desktop keeps the original — <= 767px only. */
.banner-top .nav-journal-link {
  display: none;
}

@media (max-width: 767px) {
  .banner-top .subject-text {
    display: none;
  }

  /* Edge-to-edge pill; equal-growing sides keep the middle link centered
     without ever overlapping the logo or the CTA on narrow screens */
  .banner-top.is-fixed .banner-top-flex-wrap {
    width: auto;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .banner-top .subject-flex,
  .banner-top .nav-right-wrap {
    flex: none;
  }

  /* Keep the CTA on one line — flexible sides would otherwise wrap it */
  .banner-top .primary-button-text,
  .banner-top .primary-button-text-absolute {
    white-space: nowrap;
  }

  .banner-top .nav-journal-link {
    display: block;
    /* Take the whole gap between logo and CTA and center within it */
    flex: 1 1 0;
    text-align: center;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.92;
    transition: color 0.25s ease;
  }

  .banner-top.is-fixed.is-scrolled .nav-journal-link {
    color: #1c1c1c;
  }

  .banner-top .cta-your {
    display: none;
  }
}


/* ============================================================
   Unified section container (2026-07-25)
   Every homepage section's content sits in the same centered
   1280px container as the About Us section, with the same
   responsive side paddings (2.5rem -> 2rem -> 1.5rem -> 1.25rem). */

/* Wrappers that already carry the 2.5rem side padding — cap width and center */
.section-list-05 .container-28,          /* FAQ */
.section-form-02 .container-25,          /* Have questions? form + footer */
.section-info-11 .container-43,          /* To go deeper */
.section-content-03-new .container-37 {  /* Gift Card */
  max-width: 1280px;
}

/* Shrink-to-fit / mis-sized wrappers — force full width inside the cap */
.section-list-02 .container-38,          /* How it works */
.section-info-03 .container-35,          /* Ardor Rituals by numbers */
.section.testimonial .container-42 {     /* What Client Says */
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed grid — Bracelets / Individually Composed */
.section-content-06-new .grid-7 {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Shared inner side padding for wrappers that had none.
   (Steps mirror the container-28/29 responsive paddings; declared here
   because these override selectors outrank site.css media rules.) */
.section-list-02 .container-32,
.section.testimonial .container-42,
.section-content-06-new .grid-7 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

@media (max-width: 991px) {
  .section-list-02 .container-32,
  .section.testimonial .container-42,
  .section-content-06-new .grid-7 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 767px) {
  .section-list-02 .container-32,
  .section.testimonial .container-42,
  .section-content-06-new .grid-7 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 479px) {
  .section-list-02 .container-32,
  .section.testimonial .container-42,
  .section-content-06-new .grid-7 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}