/*
Theme Name: Toolbox AI Solutions
Theme URI: https://toolboxaisolutions.com
Author: Toolbox AI Solutions
Author URI: https://toolboxaisolutions.com
Description: A practical WordPress theme for Toolbox AI Solutions, built for full page building with Elementor. Strict three-color palette taken from the logo. Includes dedicated templates for individual services, FAQ, About Us, and Contact.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Elementor tested up to: 3.24
Elementor Pro tested up to: 3.24
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toolbox-ai
*/

/* ==========================================================================
   DESIGN TOKENS

   STRICT PALETTE — three colors, nothing else:
     #C45A33  rust      (logo: the bracket stroke, 1 of 4 paths)
     #1F1B17  charcoal  (logo: the other 3 paths)
     #FFFFFF  white     (paper)

   Greys, hairlines and tints are NOT separate colors: they are charcoal or
   rust at reduced opacity over white. No fourth hue appears in this file.
   ========================================================================== */
:root{
  --rust:#C45A33;
  --charcoal:#1F1B17;
  --white:#FFFFFF;

  /* Surfaces: white, or charcoal at a whisper of opacity. */
  --paper:var(--white);
  --paper-raised:rgba(31,27,23,.022);
  --paper-tint:rgba(196,90,51,.045);

  /* Hairlines: charcoal, thin. */
  --line:rgba(31,27,23,.13);
  --line-strong:rgba(31,27,23,.26);
  --line-dark:rgba(255,255,255,.16);

  /* Text: charcoal at three weights. Opacities picked for WCAG AA on white. */
  --ink:var(--charcoal);
  --ink-soft:rgba(31,27,23,.72);   /* 6.75:1 */
  --ink-muted:rgba(31,27,23,.62);  /* 4.80:1 */

  --radius:4px;
  --radius-lg:10px;
  --shadow-tool:0 1px 0 rgba(31,27,23,.04), 0 18px 40px -28px rgba(31,27,23,.45);

  --container:1240px;
  --gutter:clamp(20px, 5vw, 64px);

  /* Type: a heavy geometric display face against a neutral text face,
     with mono reserved for labels, ticks and structural marks. */
  --font-display:"Archivo Black", "Arial Black", "Archivo", "Helvetica Neue", Impact, sans-serif;
  --font-body:"Inter", "Segoe UI", Arial, sans-serif;
  --font-mono:"IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}


/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--rust);text-decoration:none;}
a:hover{text-decoration:underline;}
ul{margin:0;padding:0;}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--charcoal);
  line-height:.98;
  margin:0 0 .5em;
  font-weight:900;          /* Archivo Black ships one weight; 900 keeps
                               system fallbacks heavy if the webfont fails */
  letter-spacing:-0.02em;
  text-transform:uppercase;
}
h3,h4,h5{line-height:1.1;letter-spacing:-0.01em;}
/* Body-copy headings inside editor content stay sentence case and readable. */
.tb-content-area h2,.tb-content-area h3{text-transform:none;letter-spacing:-.01em;line-height:1.15;}
p{margin:0 0 1.1em;}
figure{margin:0;}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;}
button{font-family:inherit;}

/* ==========================================================================
   LAYOUT PRIMITIVES (safe alongside Elementor's own containers)
   ========================================================================== */
.tb-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.tb-section{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(48px,8vw,96px);}
.tb-eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust);font-weight:600;margin-bottom:14px;
}
.tb-eyebrow::before{content:"";width:16px;height:2px;background:var(--rust);display:inline-block;}
.screen-reader-text{position:absolute !important;left:-9999px;}
.skip-link{position:absolute;left:-9999px;background:var(--charcoal);color:var(--white);padding:10px 16px;z-index:999;}
.skip-link:focus{left:12px;top:12px;}

/* ==========================================================================
   SITE HEADER — pegboard rail
   ========================================================================== */
.tb-site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
}
.tb-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);max-width:var(--container);margin:0 auto;gap:20px;
}
.tb-brand{display:flex;align-items:center;gap:12px;color:var(--charcoal);}
.tb-brand:hover{text-decoration:none;}
.tb-brand svg,.tb-brand img{width:34px;height:34px;flex:none;}
.tb-brand-name{
  font-family:var(--font-display);font-weight:900;font-size:17px;color:var(--charcoal);
  letter-spacing:-.01em;text-transform:uppercase;
}
.tb-brand-name span{color:var(--rust);}

.tb-primary-nav ul{display:flex;gap:2px;align-items:center;list-style:none;}
.tb-primary-nav a{
  display:inline-block;padding:10px 15px;color:var(--ink-soft);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
}
.tb-primary-nav a:hover,.tb-primary-nav .current-menu-item > a{
  color:var(--rust);text-decoration:none;
}
.tb-header-cta{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--charcoal);color:var(--white) !important;padding:11px 20px;border-radius:var(--radius);
  white-space:nowrap;
}
.tb-header-cta:hover{background:var(--rust);text-decoration:none;}

.tb-menu-toggle{
  display:none;background:transparent;border:1.5px solid var(--line-strong);
  color:var(--charcoal);border-radius:var(--radius);padding:8px 10px;cursor:pointer;
}
.tb-menu-toggle span{display:block;width:20px;height:2px;background:var(--charcoal);margin:4px 0;}

@media (max-width:900px){
  .tb-primary-nav{
    position:absolute;left:0;right:0;top:100%;background:var(--white);
    border-bottom:1px solid var(--line);display:none;padding:8px var(--gutter) 18px;
  }
  .tb-primary-nav.is-open{display:block;}
  .tb-primary-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  .tb-primary-nav a{padding:12px 6px;}
  .tb-menu-toggle{display:inline-flex;flex-direction:column;}
  .tb-header-cta{display:none;}
}

/* ==========================================================================
   HERO — white field, monumental type, rust as the payoff word.
   The tick rail down the left edge is the signature: mono measurement
   marks, like the scale printed on a tape measure or a folding rule.
   ========================================================================== */
.tb-hero{
  position:relative;
  background:var(--white);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.tb-hero-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(64px,11vw,148px) var(--gutter) clamp(56px,9vw,116px);
  position:relative;
}

/* Tick rail */
.tb-tickrail{
  position:absolute;left:0;top:0;bottom:0;width:var(--gutter);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-around;
  align-items:center;pointer-events:none;
}
.tb-tickrail span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-muted);opacity:.5;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
@media (max-width:760px){.tb-tickrail{display:none;}}

.tb-hero h1{
  font-size:clamp(38px,8.2vw,104px);
  max-width:19ch;
  margin-bottom:.42em;
}
.tb-hero h1 .rust{color:var(--rust);}
.tb-hero-lede{
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.65;
  color:var(--ink-soft);
  max-width:52ch;
}
.tb-hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

/* Buttons */
.tb-btn{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 26px;border-radius:var(--radius);display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid var(--charcoal);transition:background .16s ease,color .16s ease;
}
.tb-btn:hover{text-decoration:none;}
.tb-btn-primary{background:var(--charcoal);border-color:var(--charcoal);color:var(--white) !important;}
.tb-btn-primary:hover{background:var(--rust);border-color:var(--rust);}
.tb-btn-ghost{background:transparent;color:var(--charcoal) !important;}
.tb-btn-ghost:hover{background:var(--charcoal);color:var(--white) !important;}

/* ==========================================================================
   SERVICE DRAWER TABS (the signature list element — genuinely numbered,
   because these are the seven service "drawers" in the toolbox)
   ========================================================================== */
.tb-services-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
  margin-top:44px;background:var(--white);
}
.tb-service-card{
  background:var(--white);padding:34px 30px 30px;position:relative;
  transition:background .16s ease;
  /* A hairline ring rather than grid-gap showback, so a part-filled last
     row leaves white space instead of a grey block. */
  box-shadow:0 0 0 1px var(--line);
}
.tb-service-card:hover{background:var(--paper-tint);}
.tb-service-card::before{
  content:"";position:absolute;top:0;left:0;width:0;height:3px;background:var(--rust);
  transition:width .22s ease;
}
.tb-service-card:hover::before{width:100%;}
.tb-drawer-num{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);letter-spacing:.16em;
  display:block;margin-bottom:16px;
}
.tb-service-card h3{font-size:20px;margin-bottom:10px;}
.tb-service-card p{color:var(--ink-soft);font-size:15px;margin-bottom:18px;}
.tb-service-card a.tb-card-link{
  font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--rust);
}

/* ==========================================================================
   GENERIC CONTENT SECTIONS / CARDS (About, process, guardrail notes)
   ========================================================================== */
.tb-band{background:var(--paper-raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.tb-band-dark{background:var(--charcoal);color:var(--white);}
.tb-band-dark h2,.tb-band-dark h3{color:var(--white);}
.tb-band-dark .tb-eyebrow{color:var(--rust);}
.tb-band-dark p{color:rgba(255,255,255,.78);}

.tb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.tb-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:860px){.tb-grid-2,.tb-grid-3{grid-template-columns:1fr;}}

.tb-step-list{list-style:none;counter-reset:tb-step;display:grid;gap:14px;}
.tb-step-list li{
  counter-increment:tb-step;display:grid;grid-template-columns:44px 1fr;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.tb-step-list li::before{
  content:counter(tb-step,decimal-leading-zero);
  font-family:var(--font-mono);color:var(--rust);background:transparent;
  border:1px solid var(--line);width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.06em;
}
.tb-band-dark .tb-step-list li{border-bottom-color:var(--line-dark);}

.tb-card{background:var(--white);border:1px solid var(--line);border-radius:0;padding:30px;}

/* ==========================================================================
   FAQ — stamped drawer labels + accordion (progressive enhancement)
   ========================================================================== */
.tb-faq-list{border-top:1px solid var(--line);}
.tb-faq-item{border-bottom:1px solid var(--line);}
.tb-faq-q{
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--charcoal);
}
.tb-faq-q .tb-faq-plus{
  font-family:var(--font-mono);color:var(--rust);flex:none;transition:transform .18s ease;font-size:20px;
}
.tb-faq-item.is-open .tb-faq-plus{transform:rotate(45deg);}
.tb-faq-a{padding:0 4px 20px;color:var(--ink-soft);max-width:70ch;display:none;}
.tb-faq-item.is-open .tb-faq-a{display:block;}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.tb-contact-form{display:grid;gap:16px;max-width:560px;}
.tb-field label{
  display:block;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:6px;color:var(--ink-muted);
}
.tb-field input,.tb-field textarea,.tb-field select{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper-raised);font-family:var(--font-body);font-size:15px;color:var(--charcoal);
}
.tb-field input:focus,.tb-field textarea:focus,.tb-field select:focus{border-color:var(--rust);}
.tb-contact-form .tb-btn-primary{border:0;width:max-content;cursor:pointer;}
.tb-form-notice{padding:14px 16px;border-radius:var(--radius);font-size:14.5px;}
.tb-form-notice.success{background:var(--paper-raised);border:1px solid var(--line-strong);border-left:4px solid var(--charcoal);border-radius:0;color:var(--charcoal);}
.tb-form-notice.error{background:var(--paper-tint);border:1px solid var(--rust);border-left:4px solid var(--rust);border-radius:0;color:var(--rust);}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.tb-site-footer{background:var(--charcoal);color:rgba(255,255,255,.75);padding:56px 0 26px;}
.tb-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line-dark);}
@media (max-width:760px){.tb-footer-grid{grid-template-columns:1fr;}}
.tb-footer-grid h4{color:var(--white);font-size:13px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.tb-footer-grid ul{list-style:none;display:grid;gap:8px;}
.tb-footer-grid a{color:rgba(255,255,255,.75);}
.tb-footer-grid a:hover{color:var(--rust);}
.tb-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:13px;}
.tb-site-footer .tb-brand-name{color:var(--white);}
.tb-footer-bottom .tb-brand-name{font-size:14px;}

/* ==========================================================================
   ARCHIVE / SINGLE SERVICE (fallback rendering when a page has not been
   customized in Elementor — Elementor's own markup overrides all of this
   automatically once a page/CPT entry is edited & published with it)
   ========================================================================== */
.tb-single-service-hero{background:var(--white);border-bottom:1px solid var(--line);padding:clamp(44px,6vw,76px) 0;}
.tb-service-meta{font-family:var(--font-mono);font-size:12px;color:var(--rust);text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;display:block;}
.tb-content-area{max-width:760px;}
.tb-content-area h2{margin-top:1.4em;}
.tb-content-area ul{margin:0 0 1.2em 1.2em;}
.tb-content-area li{margin-bottom:.4em;}

/* Elementor canvas safety: prevent our container widths from fighting
   Elementor's own section widths when a page IS built with Elementor. */
.elementor-page .tb-wrap{max-width:none;padding:0;}

/* ==========================================================================
   BOOKING CTA (contact page, sits above the intake form)
   Palette-compliant: charcoal panel, white type, rust on hover.
   ========================================================================== */
.tb-booking-cta{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:var(--charcoal);padding:34px 36px;margin-bottom:44px;
}
.tb-booking-cta h2{
  color:var(--white);font-size:clamp(22px,2.4vw,30px);margin:0 0 8px;
}
.tb-booking-cta p{
  color:rgba(255,255,255,.78);margin:0;max-width:46ch;font-size:15.5px;
}
.tb-booking-cta .tb-btn-primary{
  background:var(--white);border-color:var(--white);color:var(--charcoal) !important;flex:none;
}
.tb-booking-cta .tb-btn-primary:hover{
  background:var(--rust);border-color:var(--rust);color:var(--white) !important;
}

/* "Or send a message" rule */
.tb-or-divider{
  display:flex;align-items:center;gap:18px;margin:0 0 34px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);
}
.tb-or-divider::before,.tb-or-divider::after{
  content:"";height:1px;background:var(--line);flex:1;
}

/* ==========================================================================
   RETURN CALCULATOR
   Sliders left, results right. Rust reserved for the headline figure and
   the track fill; everything else charcoal on white.
   ========================================================================== */
.tb-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
@media (max-width:900px){.tb-calc-grid{grid-template-columns:1fr;}}

.tb-calc-field{margin-bottom:38px;}
.tb-calc-field:last-child{margin-bottom:0;}
.tb-calc-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;}
.tb-calc-field-head label{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-muted);
}
.tb-calc-field-head output{
  font-family:var(--font-display);font-weight:900;font-size:clamp(22px,2.4vw,30px);
  color:var(--charcoal);line-height:1;
}
.tb-calc-scale{
  display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);
}

/* Range input — styled explicitly for WebKit and Firefox */
.tb-calc input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:rgba(196,90,51,.18);border-radius:3px;outline:none;margin:0;
}
.tb-calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--white);border:2px solid var(--rust);cursor:pointer;
  box-shadow:0 1px 4px rgba(31,27,23,.28);
}
.tb-calc input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--white);
  border:2px solid var(--rust);cursor:pointer;
}
.tb-calc input[type=range]::-moz-range-track{height:6px;background:rgba(196,90,51,.18);border-radius:3px;}
.tb-calc input[type=range]::-moz-range-progress{height:6px;background:var(--rust);border-radius:3px;}
.tb-calc input[type=range]:focus-visible{outline:3px solid var(--rust);outline-offset:6px;}

/* Headline result */
.tb-calc-headline{
  border:1px solid rgba(196,90,51,.35);border-top:4px solid var(--rust);
  background:rgba(196,90,51,.045);padding:30px 32px 26px;margin-bottom:20px;
}
.tb-calc-headline-label{
  display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rust);margin-bottom:12px;
}
.tb-calc-headline strong{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(44px,6.4vw,80px);line-height:.94;color:var(--rust);
  letter-spacing:-.03em;
}
.tb-calc-headline-sub{
  display:block;margin-top:14px;font-family:var(--font-mono);font-size:13px;
  color:var(--ink-soft);line-height:1.5;
}
.tb-calc-headline-sub b{color:var(--charcoal);}

/* Result tiles */
.tb-calc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.tb-calc-tile{background:var(--white);padding:20px 22px;}
.tb-calc-tile-label{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px;
}
.tb-calc-tile strong{
  font-family:var(--font-display);font-weight:900;font-size:clamp(22px,2.6vw,30px);
  color:var(--charcoal);line-height:1;
}

.tb-calc-note{
  margin:22px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);
  padding-left:14px;border-left:2px solid var(--line);
}
.tb-calc-disclaimer{
  margin:14px 0 26px;font-size:12.5px;line-height:1.6;color:var(--ink-muted);
}