/* ═══════════════════════════════════════════
 * Apexfito Hero Carousel — Full‑bleed Overlay
 * Loaded separately from main apexfito-custom.css
 * ═══════════════════════════════════════════ */

/* ── Reset Kadence content-area spacing on homepage ── */
.home .content-area {
  margin: 0 !important;
}
.home .entry-content-wrap {
  padding: 0 !important;
}
.home .content-bg.single-entry {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.home .content-container.site-container {
  padding: 0 !important;
}

/* ── Reset conflicting grid layout ── */
.apx-hero.apx-hero-carousel {
  display: block !important;
  grid: unset !important;
  grid-template-columns: unset !important;
  gap: unset !important;
  align-items: unset !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 660px !important;
  height: 660px !important;
  background: #1a1a2e !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Slide ── */
/* All slides stacked on top of each other, hidden by opacity */
.apx-hero-carousel .apx-hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.apx-hero-carousel .apx-hero-slide.active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* ── Background image — full‑bleed ── */
.apx-hero-carousel .apx-hero-slide .apx-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  display: block !important;
  max-width: none !important;
}

/* ── Gradient overlay ── */
.apx-hero-carousel .apx-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(10,10,20,0.35) 0%,
    rgba(10,10,20,0.18) 45%,
    rgba(10,10,20,0.05) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

/* ── Text copy ── */
.apx-hero-carousel .apx-hero-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 620px !important;
  padding: 100px 60px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  color: #fff !important;
  pointer-events: none !important;
  background: none !important;
  border: none !important;
  gap: 0 !important;
}
.apx-hero-carousel .apx-hero-copy * {
  pointer-events: auto !important;
}

/* ── Eyebrow ── */
.apx-hero-carousel .apx-eyebrow {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #b22f1e !important;
  margin-bottom: 12px !important;
}

/* ── Headline ── */
.apx-hero-carousel .apx-hero-copy h1 {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 18px 0 !important;
  color: #fff !important;
  text-align: left !important;
}

/* ── Lead ── */
.apx-hero-carousel .apx-lead {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 24px 0 !important;
}

/* ── Action buttons ── */
.apx-hero-carousel .apx-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

.apx-hero-carousel .apx-btn {
  display: inline-block !important;
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all .2s !important;
  background: #b22f1e !important;
  color: #fff !important;
  border: 2px solid #b22f1e !important;
}
.apx-hero-carousel .apx-btn:hover {
  background: #d93d29 !important;
  border-color: #d93d29 !important;
}
.apx-hero-carousel .apx-btn-secondary {
  background: transparent !important;
  border-color: rgba(255,255,255,0.6) !important;
  color: #fff !important;
}
.apx-hero-carousel .apx-btn-secondary:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
}

/* ── Badges ── */
.apx-hero-carousel .apx-hero-badges {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.apx-hero-carousel .apx-badge {
  display: inline-block !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
}

/* ═══════════════════════════════════════════
   Arrow buttons — subtle, minimal
   ═══════════════════════════════════════════ */
.apx-hero-arrows {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.apx-hero-arrows .apx-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  background: rgba(0,0,0,0.12) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .3s !important;
  border-radius: 0 !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  opacity: 0.7 !important;
}

.apx-hero-arrows .apx-arrow:hover {
  opacity: 1 !important;
  background: rgba(0,0,0,0.05) !important;
  transform: translateY(-50%) scale(1.3) !important;
}

.apx-hero-arrows .apx-arrow-prev { left: 8px !important; }
.apx-hero-arrows .apx-arrow-next { right: 8px !important; }

/* ── Navigation dots ── */
.apx-hero-nav {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  gap: 10px !important;
  pointer-events: none !important;
}
.apx-hero-nav .apx-nav-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 10px !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  background: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  padding: 0 !important;
  transition: all .3s !important;
}
.apx-hero-nav .apx-nav-dot.active {
  width: 32px !important;
  background: #b22f1e !important;
  border-color: #b22f1e !important;
}
.apx-hero-nav .apx-nav-dot:hover { border-color: #fff !important; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .apx-hero.apx-hero-carousel,
  .apx-hero-carousel .apx-hero-slide {
    min-height: 530px !important;
    height: 530px !important;
  }
  .apx-hero-carousel .apx-hero-copy {
    padding: 60px 24px !important;
    max-width: 100% !important;
  }
  .apx-hero-carousel .apx-hero-copy h1 { font-size: 30px !important; }
  .apx-hero-carousel .apx-lead { font-size: 13px !important; }
  .apx-hero-carousel .apx-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .apx-hero-carousel .apx-btn {
    text-align: center !important;
    width: auto !important;
    min-width: 220px !important;
  }
  .apx-hero-carousel .apx-hero-copy h1 { margin-bottom: 22px !important; }
  /* 手机端可手动滑动，隐藏左右箭头按钮 */
  .apx-hero-arrows { display: none !important; }
}

@media (max-width: 480px) {
  .apx-hero.apx-hero-carousel,
  .apx-hero-carousel .apx-hero-slide {
    min-height: 460px !important;
    height: 460px !important;
  }
  .apx-hero-carousel .apx-hero-copy { padding: 40px 16px !important; }
  .apx-hero-carousel .apx-hero-copy h1 { font-size: 24px !important; }
  .apx-hero-carousel .apx-btn { min-width: 200px !important; }
  .apx-hero-carousel .apx-hero-badges { display: none !important; }
}

/* ── Carousel full-width override ── */
/* Break carousel out of Kadence theme container to be truly edge-to-edge */
.page-id-96 .apx-hero.apx-hero-carousel {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* ── Gear icons: white icons with shadow on white background ── */
.apx-home-gear-image {
  background: #fff !important;
}
.apx-home-gear-image img {
  /* filter removed — images are photos, not icons */
  max-width: 90% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}
/* ── Gear hub page icons consistency ── */
.apx-gear-img-box {
  background: #fff !important;
}
.apx-gear-img-box img {
  /* filter removed — images are photos, not icons */
  max-width: 90% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ── Mobile: move arrows down so they don't overlap text ── */
@media (max-width: 768px) {
  .apx-hero-arrows .apx-arrow {
    top: auto !important;
    bottom: 80px !important;
    transform: none !important;
  }
}

/* ── Gear section: pure white background ── */
section.apx-section:has(.apx-home-gear-grid) {
  background: #fff !important;
}

/* ── Ensure pure white backgrounds ── */
.apx-home,
.apx-section {
  background: #fff !important;
}

/* ── Mobile header: bigger logo, menu, and nav items ── */
@media (max-width: 767px) {
  /* site-title 字号由 apexfito-custom.css 统一控制 (26px/20px) */
  .mobile-toggle-open-container .menu-toggle-open {
    font-size: 18px !important;
  }
  .mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
    font-size: 26px !important;
  }
  .mobile-navigation ul li {
    font-size: 18px !important;
  }
  .mobile-navigation ul li a {
    padding-top: 1.2em !important;
    padding-bottom: 1.2em !important;
  }
}

/* ── Footer social icons: brand colors on hover for recognition ── */
#colophon .social-button.social-link-facebook:hover {
  color: #1877F2 !important;
}
#colophon .social-button.social-link-twitter:hover {
  color: #000000 !important;
}
#colophon .social-button.social-link-instagram:hover {
  color: #E4405F !important;
}
#colophon .social-button.social-link-youtube:hover {
  color: #FF0000 !important;
}
#colophon .social-button.social-link-tiktok:hover {
  color: #000000 !important;
}

/* ── Footer social icons: brand colors + white bg ── */
#colophon .social-button {
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
}
#colophon .social-link-facebook {
  color: #1877F2 !important;
  background: #fff !important;
}
#colophon .social-link-twitter {
  color: #000000 !important;
  background: #fff !important;
}
#colophon .social-link-instagram {
  color: #E4405F !important;
  background: #fff !important;
}
#colophon .social-link-youtube {
  color: #FF0000 !important;
  background: #fff !important;
}
#colophon .social-link-tiktok {
  color: #000000 !important;
  background: #fff !important;
}
#colophon .social-button:hover {
  opacity: 0.8 !important;
}

/* ── Footer social icons: brand colors + white bg ── */
#colophon .social-button {
  background: transparent !important;
}
#colophon .social-link-facebook {
  color: #1877F2 !important;
  background: #fff !important;
}
#colophon .social-link-twitter {
  color: #000000 !important;
  background: #fff !important;
}
#colophon .social-link-instagram {
  color: #E4405F !important;
  background: #fff !important;
}
#colophon .social-link-youtube {
  color: #FF0000 !important;
  background: #fff !important;
}
#colophon .social-link-tiktok {
  color: #000000 !important;
  background: #fff !important;
}
#colophon .social-button:hover {
  opacity: 0.8 !important;
}

/* ── Footer social icons: black bg + white icons ── */
#colophon .social-button {
  color: #fff !important;
  background: #1b1314 !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#colophon .social-button:hover {
  opacity: 0.8 !important;
}

/* ── Footer social icons: match header style, transparent bg ── */
#colophon .social-button {
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1em !important;
}
#colophon .social-button:hover {
  color: #d93d29 !important;
  background: transparent !important;
  opacity: 1 !important;
}


/* ── Larger page titles across site (+3 font sizes) ── */
.entry-hero .entry-header h1,
.page-title,
.archive-title,
.entry-title {
  font-size: 40px !important;
  line-height: 1.2 !important;
}

@media (max-width: 768px) {
  .entry-hero .entry-header h1,
  .page-title,
  .archive-title,
  .entry-title {
    font-size: 30px !important;
  }
}

@media (max-width: 480px) {
  .entry-hero .entry-header h1,
  .page-title,
  .archive-title,
  .entry-title {
    font-size: 26px !important;
  }
}


/* Similar Posts (entry-related) card titles — keep card-sized, don't inherit 40px page-title */
.entry-related-carousel h3.entry-title {
  font-size: 18px !important;
  line-height: 1.35 !important;
}
@media (max-width: 767px) {
  .entry-related-carousel h3.entry-title {
    font-size: 16px !important;
  }
}