/* ============================================================
   747 Wholesale — Theme Layer
   Base: the ORIGINAL Webflow export, untouched.
   This file adds ONLY the approved items:
     1. New solid buttons + sheen circle sized to fill wide buttons
     2. Homepage hero gradient panel + cutout pallet image
     3. Darker brand blue on italic text spans
     4. White tile cards with hover lift + blue hover outline
     5. Contact sections: light logo-matched blue gradient,
        identical on the band and the phone/email strip
     6. Nav: Contact as a button; current page in blue,
        slightly heavier
     7. Subtle hover animation on the nav logo
     8. Subtle hover animation on the footer contact blocks
     9. Footer logo: same hover animation as the nav logo
   Nothing else. Footer at rest is untouched.
   ============================================================ */

/* ---------- 1. Buttons ---------- */

.button-with-circle-icon,
.button-with-circle-icon.white {
  background-color: #182031;
  border: 2px solid #182031;
  border-radius: 8px;
  box-shadow: 0 10px 24px -12px rgba(16, 34, 61, .45);
  text-transform: none;
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}

/* white fill sweeps up from the bottom on hover (and retreats on leave) */
.button-with-circle-icon::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 100%;
  width: 260%;
  aspect-ratio: 1;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -30%) scale(0);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.button-with-circle-icon:hover::before {
  transform: translate(-50%, -30%) scale(1);
}

.button-with-circle-icon:hover,
.button-with-circle-icon.white:hover {
  border-color: #1156c0;
  box-shadow: 0 8px 18px -10px rgba(17, 86, 192, .32);
  transform: translateY(-1px);
}

.button-with-circle-icon .button-text {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .3s ease;
}

.button-with-circle-icon:hover .button-text {
  color: #1156c0;
}

/* the hover swap slides text up exactly 125% of its own height; anchoring
   the incoming copy at 50% + 0.75x its line-height (1.89vw) makes it land
   dead center: 50% + 0.75h - 1.25h = 50% - h/2. Position must be re-declared
   absolute because the z-index rule above sets the texts relative. */
.button-with-circle-icon .button-text.move-down {
  position: absolute;
  top: calc(50% + 1.4175vw);
}

/* Hero primary button: blue at rest; same white-sweep hover as the rest */
.hero-block .button-with-circle-icon {
  background-color: #1156c0;
  border-color: #1156c0;
}

/* Sheen circle enlarged so the 2x hover scale washes the full
   width of even the widest buttons (was 6.944vw -> ended short).
   At rest it still sits below the button, so nothing shows until hover. */
.circle-absolute {
  min-width: 12vw;
  max-width: 12vw;
  min-height: 12vw;
  max-height: 12vw;
}

/* ---------- 2. Homepage hero: full-width warehouse photo ---------- */

/* Full width like the contact band: the container holding the hero and the
   stats strip loses its side padding. The inner paddings below absorb that
   exact amount, so the text and the stats stay where they were. */
.container.padding-4-5rem:has(> .hero-wrapper) {
  padding-left: 0;
  padding-right: 0;
}

/* desktop: text edges locked as a share of the window, so the text keeps the
   exact position from John's screenshot (13.52% in) at every window size
   instead of sliding in and out (the old rem part didn't scale) */
.hero-image.latest-posts-details-flex.bg {
  padding-left: 13.52vw;
  padding-right: 11.52vw;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: #dfe7ef;
  background-image:
    linear-gradient(90deg, rgba(250, 252, 255, .90) 0%, rgba(250, 252, 255, .87) 15%, rgba(250, 252, 255, .80) 28%, rgba(250, 252, 255, .70) 37%, rgba(250, 252, 255, .58) 43%, rgba(250, 252, 255, .40) 48%, rgba(250, 252, 255, .22) 52%, rgba(250, 252, 255, .08) 56%, rgba(250, 252, 255, 0) 59%),
    url('../images/hero-warehouse-wide.jpg');
  background-position: left center, right center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat, no-repeat;
}

/* the photos carry the pallet and the arrow */
.hero-image.latest-posts-details-flex.bg .arrow-wraooer,
.hero-image.latest-posts-details-flex.bg .box-wrapper {
  display: none;
}

/* text + button block: no backing at all, the white fade does that job */
.hero-block.background-blur {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.hero-block .hero-title.flip-from-bottom-animation {
  color: #16386e;
  font-weight: 400;
}

.hero-block .hero-title .italics {
  color: #2e66bd;
  font-weight: 300;
}

/* desktop: +1vw between headline, paragraph and button. The block is centered,
   so this lowers the button by exactly 1vw, landing its bottom edge on the
   bottom edge of the arrow in the photo (measured at 1280, 1440 and 1920 wide). */
@media screen and (min-width: 992px) {
  .hero-block.background-blur {
    row-gap: 2.11vw;
  }
}

/* stats strip under the hero: full-width section, content kept in place */
/* padding as a share of the window (13.5rem at the reference 1304px screen),
   so the three numbers keep their spacing at every desktop size */
.hero-wrapper + .section > .container.padding-9rem {
  padding-left: 16.56vw;
  padding-right: 16.56vw;
  border-radius: 0;
}

/* ---------- 3. Our Model: image + tag corners on the 8px standard ---------- */

.features-image {
  border-radius: 8px;
}

.pop-up-card.top-right.background-blur,
.pop-up-card.top-left.background-blur {
  border-radius: 8px;
}

/* ---------- 4. Tile cards ---------- */

.services-block.background-blur {
  background-color: #ffffff;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 34, 61, .05), 0 4px 14px -6px rgba(16, 34, 61, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.services-block.background-blur:hover {
  border-color: #8fb3e6;
  box-shadow: 0 6px 18px -6px rgba(16, 34, 61, .12), 0 18px 40px -20px rgba(16, 34, 61, .18);
  transform: translateY(-2px);
}

.services-block h4 {
  color: #182031;
  font-size: 1.7vw;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
}

.services-block p {
  color: #4a5568;
  font-weight: 400;
}

/* ---------- 5. Contact sections: logo-matched light blue gradient,
               identical on the band and the phone/email strip ---------- */

.section-contact-form,
.section-contact {
  background-color: #1a5ecf;
  background-image: linear-gradient(135deg, #0f4cb5 0%, #1a5ecf 45%, #3585e3 100%);
}

/* ---------- 6. Nav: current page + Contact button ---------- */

.nav-link.w--current {
  color: #1156c0;
  font-weight: 600;
}

.nav-link[href="contact.html"] {
  background-color: #182031;
  color: #ffffff;
  border-radius: 8px;
  padding-top: .45vw;
  padding-bottom: .45vw;
  margin-left: .5vw;
  transition: background-color .2s ease, color .2s ease;
}

.nav-link[href="contact.html"]:hover {
  background-color: #1156c0;
  color: #ffffff;
}

.nav-link[href="contact.html"].w--current {
  background-color: #1156c0;
  color: #ffffff;
  font-weight: 500;
}

/* ---------- 7. Nav logo hover ---------- */

.logo {
  transition: transform .3s ease;
}

.logo-link-wrapper:hover .logo {
  transform: scale(1.045);
}

/* ---------- 10. Privacy page: title block inset to match the text below on
               tablets and phones (the template made it full width there) ---------- */

@media screen and (max-width: 991px) {
  .utitlities-title-wrapper {
    width: 80%;
  }
}

/* phones: same heading distance below the menu bar as the About and FAQ pages */
@media screen and (max-width: 479px) {
  .utitlities-title-wrapper {
    padding-top: 2rem;
  }
}

/* ---------- 9. Footer logo hover: identical to the nav logo, rest untouched ---------- */

.footer-logo-link-wrapper .footer-logo {
  transition: transform .3s ease;
}

.footer-logo-link-wrapper:hover .footer-logo {
  transform: scale(1.045);
}

/* ---------- 8. Footer contact blocks: hover only, rest untouched ---------- */

.footer-right-flex .footer-link-wrapper {
  transition: transform .25s ease;
}

.footer-right-flex .footer-link-wrapper:hover {
  transform: translateY(-3px);
}

/* brand-safe badge 25% smaller (badge only; contact icons unchanged) */
.footer-flex-bottom .image-footer {
  min-height: 2.25vw;
  max-height: 2.25vw;
}

/* whole block clickable: stretch each link's hit area over its block */
.footer-right-flex .footer-link-wrapper {
  cursor: pointer;
}

.footer-right-flex .footer-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ============================================================
   Breakpoint-matched adjustments (same 991 / 767 / 479 cutoffs)
   ============================================================ */

@media screen and (max-width: 991px) {
  .services-block h4 {
    font-size: 1.45rem;
    line-height: 1.35;
  }

  .nav-link[href="contact.html"] {
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-left: 0;
  }

  /* container padding was 5% here; hero text 2vw inside it.
     Photo slides 8vw right (trimming its right edge) so the paragraph
     clears the arrow; phones override this with the tall photo below. */
  .hero-image.latest-posts-details-flex.bg {
    padding-left: calc(2vw + 5%);
    padding-right: calc(2vw + 5%);
    background-position: left center, calc(100% + 8vw) center;
  }

  /* stats content edge was 5% + 10% of 90% = 14% of the full width */
  .hero-wrapper + .section > .container.padding-9rem {
    padding-left: 14%;
    padding-right: 14%;
  }
}

@media screen and (max-width: 479px) {
  .services-block h4 {
    font-size: 1.2rem;
  }

  .footer-flex-bottom .image-footer {
    min-height: 2.25vw;
    max-height: 5.625vw;
  }

  /* stats content edge was 5% + 3% of 90% = 7.7% of the full width */
  .hero-wrapper + .section > .container.padding-9rem {
    padding-left: 7.7%;
    padding-right: 7.7%;
  }

  /* mobile hero: tall photo, text on top, pallet at the bottom */
  .hero-wrapper {
    background-color: transparent;
    border-radius: 0;
  }

  .hero-image.latest-posts-details-flex.bg {
    justify-content: flex-start;
    min-height: 0;
    /* 81.83vw = boxes-top to photo-bottom; minus the text block's own 3vw bottom
       padding; plus the gap between the button and the boxes */
    padding-bottom: calc(78.83vw + 3.5rem);
    background-color: #fafcff;
    background-image:
      linear-gradient(180deg, rgba(250, 252, 255, .96) 0%, rgba(250, 252, 255, .94) 22%, rgba(250, 252, 255, .91) 38%, rgba(250, 252, 255, .62) calc(100% - 81.83vw - 3rem), rgba(250, 252, 255, 0) calc(100% - 81.83vw)),
      url('../images/hero-warehouse-tall.jpg');
    background-position: center top, center bottom;
    background-size: 100% 100%, cover;
  }

  /* tag corners nest into the image corner on mobile */
  .pop-up-card.top-right.background-blur {
    border-radius: 0 8px 0 8px;
  }

  .pop-up-card.top-left.background-blur {
    border-radius: 8px 0;
  }
}