/* =========================================================
   Free Online Tools — enhancement layer
   Loads AFTER app.css. Extends the existing teal/navy/serif
   system instead of replacing it.
   - Shared rules (tool cards, sections, chips, reveal) apply
     to both .is-hub (tools/hub.php) and .is-home (root index).
   - Hero rules are per-page: .home-hero (hub) vs .wow-hero
     (root home), since the root home page's hero classes
     had no styling at all before this file.
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .is-hub *, .is-home *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.is-hub :focus-visible, .is-home :focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes drift-a{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(-24px, 26px); }
}
@keyframes drift-b{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(20px, -18px); }
}

/* ---------------------------------------------------------
   Hub page hero (assets/css/app.css already gives .home-hero
   its navy→teal gradient) — add depth + motion on top.
   --------------------------------------------------------- */
.is-hub .home-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1.2px, transparent 0),
    linear-gradient(165deg, #102a43 0%, #1b3a4b 58%, #155e59 140%);
  background-size: 24px 24px, auto;
}

.is-hub .home-hero h1{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em;
}
.is-hub .home-hero h1 [data-count]{ font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   Root home page hero (.wow-hero) — was completely unstyled.
   Mirrors the hub hero so both pages feel like one product.
   --------------------------------------------------------- */
.is-home .wow-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 56px 20px 44px;
  text-align: center;
  color: #fff;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1.2px, transparent 0),
    linear-gradient(165deg, #102a43 0%, #1b3a4b 58%, #155e59 140%);
  background-size: 24px 24px, auto;
}

.is-home .wow-hero .hero-inner{ max-width: 720px; margin: 0 auto; }

.is-home .wow-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #d5e3e6;
  font-size: .85rem;
  font-weight: 600;
}
.is-home .wow-kicker i{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #99f6e4;
  box-shadow: 0 0 0 4px rgba(153,246,228,.2);
}

.is-home .wow-hero h1{
  margin: 0 0 14px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.is-home .wow-hero h1 em{
  color: #99f6e4;
  font-style: italic;
}

.is-home .wow-hero .lede{
  margin: 0 0 26px;
  color: #d5e3e6;
  font-size: 1.05rem;
  line-height: 1.6;
}

.is-home .wow-hero .wow-search{
  max-width: 560px;
  margin: 0 auto 22px;
}

.is-home .wow-stats{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  font-size: .9rem;
  color: #b7c7d1;
}
.is-home .wow-stats b{ color: #fff; }

.is-home .wow-hero .hero-inner{
  animation: hero-rise .6s cubic-bezier(.22,.9,.32,1) both;
}

/* ---------------------------------------------------------
   Search box — shared, both pages
   --------------------------------------------------------- */
.is-hub .search-box, .is-home .search-box{
  transition: box-shadow .25s ease, transform .2s ease;
}
.is-hub .search-box:focus-within, .is-home .search-box:focus-within{
  box-shadow: 0 0 0 4px rgba(153,246,228,.25), var(--shadow);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   Chips (hub page only has these) — springier active state
   --------------------------------------------------------- */
.is-hub .chip{
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.is-hub .chip:hover{ transform: translateY(-1px); }
.is-hub .chip.is-active{ animation: chip-pop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes chip-pop{
  0%{ transform: scale(.94); }
  60%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}

/* ---------------------------------------------------------
   Section headers — shared. Hub uses .section-head h2,
   root home uses .home-section h2 directly.
   --------------------------------------------------------- */
.is-hub .section-head h2,
.is-home .home-section h2{
  position: relative;
  padding-left: 14px;
}
.is-hub .section-head h2::before,
.is-home .home-section h2::before{
  content: "";
  position: absolute;
  left: 0; top: .15em; bottom: .15em;
  width: 4px;
  border-radius: 3px;
  background: var(--accent);
}

.js-ready .cat-section{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.cat-section.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.cat-section.is-filtered-out{ display: none; }

/* ---------------------------------------------------------
   Tool cards — shared across hub + home
   --------------------------------------------------------- */
.is-hub .tool-card, .is-home .tool-card{
  position: relative;
  overflow: hidden;
}

.js-ready .tool-card{
  opacity: 0;
  transform: translateY(14px);
}

.is-hub .tool-card::before, .is-home .tool-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #99f6e4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.is-hub .tool-card:hover::before, .is-home .tool-card:hover::before{ transform: scaleX(1); }

.is-hub .tool-card img, .is-hub .tool-card .thumb-ph,
.is-home .tool-card img, .is-home .tool-card .thumb-ph{
  transition: transform .3s cubic-bezier(.22,.9,.32,1);
}
.is-hub .tool-card:hover img, .is-hub .tool-card:hover .thumb-ph,
.is-home .tool-card:hover img, .is-home .tool-card:hover .thumb-ph{
  transform: scale(1.06) rotate(-1deg);
}

.is-hub .tool-card .btn-secondary, .is-home .tool-card .btn-secondary{
  transition: background .18s ease, gap .18s ease, color .18s ease;
}
.is-hub .tool-card .btn-secondary::after, .is-home .tool-card .btn-secondary::after{
  content: "→";
  display: inline-block;
  transition: transform .18s ease;
}
.is-hub .tool-card:hover .btn-secondary::after, .is-home .tool-card:hover .btn-secondary::after{
  transform: translateX(3px);
}

.tool-card.is-hidden{ display: none; }

.js-ready .tool-card.is-visible{
  animation: card-in .45s cubic-bezier(.22,.9,.32,1) forwards;
}
@keyframes card-in{
  to{ opacity: 1; transform: translateY(0); }
}

@media (min-width: 1400px){
  .is-hub .tool-grid, .is-home .tool-grid{ grid-template-columns: repeat(5, 1fr); }
}

.is-hub .empty-state.is-visible, .is-home .empty-state.is-visible{
  animation: hero-rise .35s ease both;
}

/* ---------------------------------------------------------
   Site footer — sitewide (not page-scoped), matches the
   hero's navy/teal depth instead of sitting flat underneath.
   --------------------------------------------------------- */
.site-footer{
  position: relative;
  overflow: hidden;
}

.site-footer::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(153,246,228,.5), transparent);
}

.site-footer::after{
  content: "";
  position: absolute;
  bottom: -120px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,118,110,.35), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.site-footer .footer-top{
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.site-footer .brand-footer{
  transition: transform .18s ease, color .18s ease;
}
.site-footer .brand-footer:hover{
  transform: translateY(-1px);
  color: #99f6e4;
}
.site-footer .brand-footer img{
  border-radius: 8px;
  transition: box-shadow .2s ease;
}
.site-footer .brand-footer:hover img{
  box-shadow: 0 0 0 3px rgba(153,246,228,.25);
}

.site-footer .footer-nav a{
  position: relative;
  padding-bottom: 2px;
}
.site-footer .footer-nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: #99f6e4;
  transition: width .2s ease;
}
.site-footer .footer-nav a:hover::after{ width: 100%; }

.site-footer p{
  font-size: .92rem;
  line-height: 1.6;
}

.site-footer .site-footer-inner > p:last-child{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #8fa3ae;
  font-size: .85rem;
}

@media (max-width: 640px){
  .site-footer .footer-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .site-footer .footer-nav{ gap: 12px 16px; }
}

/* ---------------------------------------------------------
   Site header — sitewide (not page-scoped). Echoes the
   footer's teal accents so header ↔ footer feel like the
   same product, not two different styles.
   --------------------------------------------------------- */
.site-header{
  position: relative;
}
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15,118,110,.35), transparent);
}

.site-header .brand{
  transition: transform .18s ease, color .18s ease;
}
.site-header .brand:hover{ transform: translateY(-1px); }
.site-header .brand img{
  border-radius: 8px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.site-header .brand:hover img{
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: rotate(-4deg);
}

.site-header .site-nav a:not(.nav-cta){
  position: relative;
  padding-bottom: 2px;
}
.site-header .site-nav a:not(.nav-cta)::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width .2s ease;
}
.site-header .site-nav a:not(.nav-cta):hover::after{ width: 100%; }

.site-header .nav-cta{
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.site-header .nav-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,118,110,.28);
}

.site-header .nav-toggle{
  transition: border-color .15s ease, color .15s ease;
}
.site-header .nav-toggle:hover{
  border-color: var(--accent);
  color: var(--accent);
}

/* animate the mobile dropdown instead of an abrupt display swap */
@media (max-width: 720px){
  .site-header .site-nav{
    display: flex;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .site-header .site-nav.is-open{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease;
  }
}