/* SmartersWEB Free Tools — definitive main-site integration
   Loaded after the root public-responsive stylesheet. */

body.free-tools-page {
  background: var(--bg-base, #050a18) !important;
  color: var(--text-primary, #f8fafc);
}

body.free-tools-page::before,
body.free-tools-page::after {
  display: block !important;
}

body.free-tools-page .page {
  background: transparent !important;
}

/* The shared header is fixed and must float over the same dark canvas as the
   rest of SmartersWEB. Reserve its space on main, not inside the tool module. */
body.free-tools-page #main-content {
  padding: 112px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: clip !important;
}

body.free-tools-page .site-header,
body.free-tools-page #site-header {
  top: 1rem !important;
  background: rgba(10, 15, 35, 0.82) !important;
  border-color: rgba(99, 120, 170, 0.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset,
              0 0 0 1px rgba(37,99,235,.06) !important;
  z-index: 1000 !important;
}
body.free-tools-page .site-header.scrolled,
body.free-tools-page #site-header.scrolled {
  top: .6rem !important;
  background: rgba(8,12,28,.94) !important;
}

body.free-tools-page .swft-public-shell {
  padding-top: 0 !important;
  background: #f5f7fb !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* Breadcrumb is part of the dark site chrome, not a detached white strip. */
body.free-tools-page .swft-breadcrumb {
  position: relative !important;
  z-index: 10 !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(7, 14, 32, .94) !important;
  border: 0 !important;
  border-top: 1px solid rgba(99,120,170,.10) !important;
  border-bottom: 1px solid rgba(99,120,170,.18) !important;
  box-shadow: none !important;
}
body.free-tools-page .swft-breadcrumb__inner {
  width: min(1180px, calc(100% - 40px)) !important;
  min-height: 52px !important;
  color: #7f91b8 !important;
  font-size: .78rem !important;
}
body.free-tools-page .swft-breadcrumb a {
  color: #aebddd !important;
}
body.free-tools-page .swft-breadcrumb a:hover {
  color: #7db4ff !important;
}
body.free-tools-page .swft-breadcrumb [aria-current="page"] {
  color: #f8fafc !important;
}
body.free-tools-page .swft-breadcrumb__inner > span[aria-hidden="true"] {
  color: #53678f !important;
}

/* Keep the hero connected directly to the dark breadcrumb. */
body.free-tools-page--directory .ft-hero {
  margin: 0 !important;
  border-top: 0 !important;
}

/* Rebuild the benefits area as intentional cards rather than six loose items
   with the final item stranded on a second row. */
body.free-tools-page--directory .ft-feature-strip {
  margin: 0 !important;
  padding: clamp(56px, 6vw, 84px) 24px !important;
  background:
    linear-gradient(to right, rgba(59,130,246,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59,130,246,.045) 1px, transparent 1px),
    #0b213d !important;
  background-size: 44px 44px !important;
}
body.free-tools-page--directory .ft-feature-strip-inner {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
body.free-tools-page--directory .feature-item {
  min-width: 0 !important;
  min-height: 220px !important;
  padding: 30px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  border: 1px solid rgba(125,180,255,.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(12,29,56,.92), rgba(5,15,33,.82)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025) !important;
}
body.free-tools-page--directory .feature-item .fi-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 0 20px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(96,165,250,.24) !important;
  border-radius: 14px !important;
  background: rgba(37,99,235,.10) !important;
  font-size: 1.65rem !important;
  line-height: 1 !important;
}
body.free-tools-page--directory .feature-item h3 {
  margin: 0 0 9px !important;
  color: #f8fafc !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}
body.free-tools-page--directory .feature-item p {
  margin: 0 !important;
  color: #9db0d0 !important;
  font-size: .88rem !important;
  line-height: 1.7 !important;
}

/* Avoid inherited root animation states hiding or displacing module cards. */
body.free-tools-page .swft-public-shell article,
body.free-tools-page .swft-public-shell section,
body.free-tools-page .swft-public-shell .tool-card,
body.free-tools-page .swft-public-shell .feature-item {
  visibility: visible !important;
  opacity: 1 !important;
}
body.free-tools-page .swft-public-shell article.tool-card[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  body.free-tools-page--directory .ft-feature-strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body.free-tools-page #main-content {
    padding-top: 88px !important;
  }
  body.free-tools-page .swft-breadcrumb,
  body.free-tools-page .swft-breadcrumb__inner {
    min-height: 48px !important;
  }
}

@media (max-width: 620px) {
  body.free-tools-page--directory .ft-feature-strip {
    padding: 42px 16px !important;
  }
  body.free-tools-page--directory .ft-feature-strip-inner {
    grid-template-columns: 1fr !important;
  }
  body.free-tools-page--directory .feature-item {
    min-height: 0 !important;
    padding: 24px 22px !important;
  }
}