/* BITS Perth tools - compatibility layer.
   The tools were written against the old site stylesheet. These rules
   reproduce only the utility classes they use, scoped to .bits-tool and
   mapped onto the block theme's design tokens. */

.bits-tool{--t-navy:var(--wp--preset--color--navy,#0a1628);--t-blue:var(--wp--preset--color--blue,#1565c0);
  --t-cyan:var(--wp--preset--color--cyan,#00acc1);--t-light:var(--wp--preset--color--light,#f4f7fb);
  --t-white:#fff;--t-gray:var(--wp--preset--color--gray,#6b7280);--t-dark:var(--wp--preset--color--dark,#111827);
  --t-border:var(--wp--preset--color--border,#e5e7eb);--t-radius:12px;--t-pill:100px}

/* CRITICAL: the old main.js revealed these via IntersectionObserver.
   That file is gone, so without this the tools render invisible. */
.bits-tool .animate-on-scroll{opacity:1!important;transform:none!important}

.bits-tool .container{width:100%;max-width:1200px;margin-inline:auto}
.bits-tool .section{padding:2.5rem 0}
.bits-tool .section-sm{padding:1.5rem 0}
.bits-tool .bg-light{background:var(--t-light)}
.bits-tool .bg-white{background:var(--t-white)}
.bits-tool .text-center{text-align:center}
.bits-tool .mt-1{margin-top:1rem}.bits-tool .mt-2{margin-top:2rem}
.bits-tool .mb-1{margin-bottom:1rem}.bits-tool .mb-2{margin-bottom:2rem}

.bits-tool .section-header{text-align:center;margin-bottom:2.25rem}
.bits-tool .section-header p{max-width:600px;margin:.75rem auto 0;font-size:1.05rem;color:var(--t-gray)}
.bits-tool .section-label{display:inline-block;background:rgba(21,101,192,.1);color:var(--t-blue);
  font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.35rem 1rem;border-radius:var(--t-pill);margin-bottom:.75rem}

.bits-tool .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 2rem;border-radius:var(--t-pill);font-weight:600;font-size:.95rem;
  cursor:pointer;border:none;text-decoration:none;transition:background .3s,transform .3s,box-shadow .3s}
.bits-tool .btn-primary{background:var(--t-blue);color:#fff}
.bits-tool .btn-primary:hover{background:var(--t-navy);transform:translateY(-2px);box-shadow:0 8px 25px rgba(21,101,192,.35)}
.bits-tool .btn-outline{background:transparent;color:var(--t-blue);border:2px solid var(--t-blue)}
.bits-tool .btn-outline:hover{background:var(--t-blue);color:#fff}
.bits-tool .btn-lg{padding:1rem 2.5rem;font-size:1rem}
.bits-tool .btn-sm{padding:.5rem 1.25rem;font-size:.85rem}
.bits-tool .btn-group{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* seo-tool keeps its hero (the URL input lives inside it) */
.bits-tool .hero-inner{background:linear-gradient(135deg,#0a1628 0%,#1565c0 100%);
  color:#fff;border-radius:var(--t-radius);padding:2.5rem 1.5rem;margin-bottom:2rem}
.bits-tool .hero-inner h1,.bits-tool .hero-inner h2,.bits-tool .hero-inner p{color:#fff}
.bits-tool .hero-content{max-width:760px;margin-inline:auto;text-align:center}
.bits-tool .hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);color:#fff;padding:.4rem 1rem;border-radius:var(--t-pill);
  font-size:.83rem;font-weight:500;margin-bottom:1rem}

.bits-tool .trust-items{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;margin-top:1.25rem}
.bits-tool .trust-item{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;color:var(--t-dark)}
.bits-tool .trust-item i{color:var(--t-blue)}

.bits-tool .cta-section{background:var(--t-navy);color:#fff;border-radius:var(--t-radius);padding:2.5rem 1.5rem}
.bits-tool .cta-section h2,.bits-tool .cta-section h3,.bits-tool .cta-section p{color:#fff}

/* Form controls inside tools, matched to the site forms */
.bits-tool input,.bits-tool select,.bits-tool textarea{font:inherit}
.bits-tool :focus-visible{outline:2px solid var(--t-cyan);outline-offset:2px}

@media(max-width:640px){
  .bits-tool .section{padding:1.75rem 0}
  .bits-tool .btn-group{flex-direction:column}
  .bits-tool .btn{width:100%}
}