/* ==========================================================================
   Statewide Outdoor Blinds — brand palette override for the Evermind template
   Typography is deliberately left untouched; only colour tokens are remapped.

   Source palette scraped from https://statewideoutdoorblinds.com
     brand red        #c82b34   (buttons, CTAs, eyebrows, footer bar)
     brand red dark   #a01922   (hover / pressed)
     brand red light  #f0545d   (red that still reads on near-black)
     ink              #0a0a0a   (body copy, dark sections)
     off-white        #f5f5f6
     light surface    #ededee   (cards, form fields, nav bar)
     neutral dark     #3f3f43   (muted labels, quiet panels)
   ========================================================================== */

:root {
  /* --- remapped template tokens --------------------------------------- */
  --_🎨-color---neutral--light-100: #f5f5f6;          /* was #f4f3ea */
  --_🎨-color---neutral--dark-100: #0a0a0a;           /* was #1a1a17 */
  --_🎨-color---accent--everglow: #c82b34;            /* was #b6e400 */
  --_🎨-color---background--eversand: #ededee;        /* was #e6e8dd */
  --_🎨-color---background--eversand-for-navigation-bar: #f5f5f6e6;
  --_🎨-color---background--everstone: #3f3f43;       /* was #3f403c */
  --_🎨-color---background--semi-transparent-dark: #0a0a0a99;
  --_🎨-color---ui--error: #a01922;

  /* --- additions used by the overrides below -------------------------- */
  --sob-red: #c82b34;
  --sob-red-dark: #a01922;
  --sob-red-on-dark: #f0545d;
  --sob-star: #fb8e28;
}

/* --------------------------------------------------------------------------
   The accent used to be a bright lime that carried dark text. Brand red is a
   dark fill, so anything sitting on the accent flips to the light neutral.
   -------------------------------------------------------------------------- */

.cta-main[data-wf--cta-main--variant="accent"],
.cta-main.submit,
.icon-wrap-40,
.icon-wrap-card-link,
.trust-avatar.last,
.circle-cta-book {
  color: var(--_🎨-color---neutral--light-100);
}

/* The hover copy of the button label is painted by a text-shadow. On an accent
   button both states are now light, so give the shadow copy the same value. */
.cta-main[data-wf--cta-main--variant="accent"] .button-text,
.cta-main.submit .button-text {
  text-shadow: 0 1.5em 0 var(--_🎨-color---neutral--light-100);
}

/* Red text needs lifting when it sits on the near-black sections. */
.hero-home-a-section .eyebrow,
.master-footer .eyebrow,
.eyebrow.light,
.eyebrow.w-variant-d0c116b2-ccca-6779-50e7-85c81eef344c {
  color: var(--_🎨-color---neutral--light-100);
}

.icon-star {
  color: var(--sob-star);
}

/* --------------------------------------------------------------------------
   Small brand details
   -------------------------------------------------------------------------- */

/* The logo is a circular badge rather than a wordmark, so it needs height. */
.logo-nav,
.logo-footer {
  width: auto;
  height: 64px;
}

/* Google-review cards in the testimonial slider */
.sob-review-stars {
  color: var(--sob-star);
  letter-spacing: 2px;
  font-size: 18px;
  line-height: 1;
}

.sob-source-note {
  opacity: .64;
}

/* --------------------------------------------------------------------------
   Layout corrections for the brand content
   -------------------------------------------------------------------------- */

/* "About Us" and "Contact Us" were wrapping onto two lines in the nav bar.
   Desktop only; below 991px the template swaps to the hamburger menu. */
@media screen and (min-width: 992px) {
  .nav-link,
  .dropdown-toggle .nav-link {
    white-space: nowrap;
  }
}

/* Google-review quotes are longer than the template's one-liners, so the card
   needs a full-height scrim rather than a 50% footer gradient. */
.testimonial-large-shadow {
  height: 100%;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_🎨-color---neutral--dark-100) 55%, transparent),
    color-mix(in srgb, var(--_🎨-color---neutral--dark-100) 88%, transparent)
  );
}

/* Same reason: the closing CTA sits over a photo with a bright sky. */
.cta-master {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_🎨-color---neutral--dark-100) 82%, transparent),
    color-mix(in srgb, var(--_🎨-color---neutral--dark-100) 40%, transparent)
  );
}

/* The star tile is the only item left in the trust row, so it should not keep
   the overlap offset that stacked it onto the avatars. */
.trust-avatar.last {
  margin-right: 0;
  border-radius: var(--_🔘-radius---radius--full);
  width: 48px;
}

/* The template's nav carried a single CTA, so `.nav-right` was only given a
   flex row below 991px. We run two (phone + quote), which stacked them on
   desktop — lay them out side by side at every width. */
.nav-right {
  grid-column-gap: var(--spacing--8);
  grid-row-gap: var(--spacing--8);
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

/* The template scrubs the nav pill's width from 100% down to auto as you
   scroll (Webflow interaction i-5feb1932), so the bar narrowed on the way down
   the page. GSAP writes that as an inline style, so `!important` is what it
   takes to hold the pill at full width -- the vendor bundle stays untouched. */
.navbar {
  width: 100% !important;
}

/* The template pinned the testimonial cards to a fixed 640px (460/360 at the
   smaller breakpoints), which left a lot of dead space under our Google
   reviews -- the tallest one only needs ~386px. Let the slider size to its
   content and stretch every card to match the tallest, so they stay a uniform
   height without the padding. The height has to be handed down through the
   collection-list wrappers between the slide and the card. */
.slider-home-a-section .slider.w-slider {
  height: auto;
}

.mask-testimonial-slider-large {
  height: auto;
  align-items: stretch;
  display: flex;
}

.slide-testimonial-large {
  height: auto;
  flex: none;
  display: flex;
}

.slide-testimonial-large .cs-slide,
.slide-testimonial-large .cs-slide > .w-dyn-items,
.slide-testimonial-large .cs-slide > .w-dyn-items > .w-dyn-item {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
}

/* With the card auto-height, the inner content's `height: 100%` no longer
   resolves, so the author row crept up the shorter cards. Flex the column
   instead, so the quote stays at the top and the author row stays pinned to
   the bottom edge on every card. */
.testimonial-card-large {
  height: auto;
  flex-flow: column;
  display: flex;
}

.testimonial-card-inner-content {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
}

.testimonial-large-bottom-tile {
  flex: 1 1 auto;
  justify-content: space-between;
  width: 100%;
}