/*
Theme Name: Smartt (Bricks Child)
Theme URI: https://smartt.ca
Description: Bricks child theme for Smartt — carries the shared design tokens, buttons, typography, and nav/footer/mega-menu component styles used across all site pages. Built for a phased migration: pages start as pasted HTML in the native WordPress content field, refactored into native Bricks elements over time.
Author: Smartt
Template: bricks
Version: 0.1.0
Text Domain: smartt-bricks-child
*/

/* ============================================================
   SMARTT GLOBAL DESIGN SYSTEM
   Base tokens + shared structural components + design primitives
   extracted & normalized from 32 canonical site pages, July 2026.

   WHAT LIVES HERE vs WHAT STAYS PAGE-SPECIFIC:
   - Tokens, reset, buttons, typography rhythm, and the nav/footer/
     utility-bar/mega-menu components below are shared by every page
     and belong here, once, globally.
   - Page-specific accent tokens (e.g. --security, --infra, --door-ai)
     and one-off component CSS (e.g. .assess-console, .problem-grid)
     stay local to each page's pasted <style> block for now, and get
     migrated into native Bricks global classes as pages are refactored.
   ============================================================ */

:root{
  --red:#E4032E;
  --navy:#232D5C;
  --ink:#17181C;
  --body:#4A5568;
  --soft:#F5F6F8;
  --line:#E5E8EE;
  --mono:'IBM Plex Mono',monospace;
  --bg:#FFFFFF;
  --navy-deep:#181F42; /* footer background — was undefined on 28/32 live pages, added here */
}

/* ---- base reset & primitives (majority value across 32 pages) ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:var(--red);color:#fff;font-weight:600;font-size:14.5px;padding:13px 24px;white-space:nowrap;flex-shrink:0;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(228,3,46,.28)}
.btn.sm{padding:10px 20px;font-size:14px}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.58);color:#fff}

/* ---- typography & section rhythm ---- */
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.14}
section{padding:84px 0}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.kicker::before{content:"";width:26px;height:2px;background:var(--red)}
.center{text-align:center}
.center .kicker::after{content:"";width:26px;height:2px;background:var(--red)}
.sec-sub{color:var(--body);max-width:70ch;font-size:16.5px;margin-top:14px}
.center .sec-sub{margin-left:auto;margin-right:auto}

/* ---- shared structural components: utility bar, primary nav, mega-menu, footer ---- */
/* verified byte-identical across all 34 source pages as of the July 2026 sync */
nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
nav .wrap{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:26px;letter-spacing:-.02em;flex-shrink:0}
.logo .a{color:var(--red)}
.utility{background:var(--navy);color:#B9C2DE;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:32px}
.u-item{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 5px #3DDC84}
.u-links{display:flex;gap:22px;align-items:center}
.u-links a{color:#B9C2DE;transition:color .15s}
.u-links a:hover{color:#fff}
.u-links a:hover,.u-links a[aria-current]{color:#fff}
.u-sep{width:1px;height:12px;background:rgba(255,255,255,.2)}
/* utility-bar dropdowns (Clients / Login) — same interaction pattern as the
   main nav's mega-menu, sized down for the compact 32px utility bar */
.u-drop{position:relative}
.u-drop>a{display:flex;align-items:center;gap:4px;cursor:pointer}
.u-drop>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-2px;opacity:.7;transition:transform .15s}
.u-drop:hover>a::after,.u-drop:focus-within>a::after{transform:rotate(225deg);margin-top:1px}
.u-panel{position:absolute;top:100%;left:0;margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 40px -18px rgba(23,24,28,.3);padding:8px;min-width:190px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;z-index:70}
.u-drop:hover .u-panel,.u-drop:focus-within .u-panel{opacity:1;visibility:visible;transform:translateY(0)}
.u-panel a{display:block;padding:8px 10px;border-radius:8px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.u-panel a:hover{background:var(--soft);color:var(--red)}
.navlinks{position:relative}
.navlinks{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:#2A2F3A}
.navlinks a:hover,.navlinks a.on{color:var(--red)}
.navlinks a:hover,.navlinks .on{color:var(--red)}
.navdrop{position:relative}
.navdrop>a{display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.navdrop>a::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6;transition:transform .15s}
.navdrop:hover>a::after,.navdrop:focus-within>a::after{transform:rotate(225deg);margin-top:2px}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -20px rgba(23,24,28,.28);padding:18px;min-width:260px;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;z-index:60}
.navdrop:hover .mega,.navdrop:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
/* first dropdown sits right next to the logo — centering it would push it off
   the left edge of the viewport on narrower windows, so left-align it instead */
.navdrop:first-child .mega{left:0;transform:translateX(0) translateY(8px)}
.navdrop:first-child:hover .mega,.navdrop:first-child:focus-within .mega{transform:translateX(0) translateY(2px)}
.mega a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.mega a:hover{background:var(--soft);color:var(--red)}
.mega a span{font-size:11.5px;font-weight:400;color:var(--body)}
.mega-h{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--draft-d);padding:4px 12px 8px}
.mega-wide{display:grid;grid-template-columns:1fr 1fr 200px;gap:4px 0;min-width:620px}
.mega-wide .mega-col{display:flex;flex-direction:column;padding-right:8px}
.mega-feat{background:var(--soft);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;align-self:stretch}
.mega-feat .mf-stat{font-family:var(--mono);font-weight:600;font-size:22px;color:var(--red);letter-spacing:-.02em;line-height:1}
.mega-feat .mf-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--draft-d)}
.mega-feat p{font-size:12px;color:var(--body);line-height:1.5}
.mf-q{font-size:12px;color:var(--body);line-height:1.5;margin-top:6px}
.mf-pts{list-style:none;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.mf-pts li{font-size:11.5px;color:var(--body);padding-left:12px;position:relative;line-height:1.4}
.mf-pts li::before{content:"";position:absolute;left:0;top:5px;width:4px;height:4px;border-radius:50%;background:var(--red)}
.mega-feat .mf-btn{margin-top:2px;background:var(--red);color:#fff;font-size:12px;font-weight:600;padding:9px 14px;border-radius:999px;text-align:center;padding-top:9px}
.mega-feat .mf-btn:hover{background:var(--ink)}
.mf-sec{margin-top:10px;font-size:11px;font-weight:500;color:var(--draft-d);display:block;transition:color .15s}
.mf-sec:hover{color:var(--red)}
.mega-2col{display:grid;grid-template-columns:1fr 200px;gap:4px 12px;min-width:400px}
.mega-2col .mega-col{display:flex;flex-direction:column}
@media(max-width:900px){.mega{display:none}.mega-wide{min-width:0}}
@media(max-width:900px){.navlinks{display:none}}
@media(max-width:820px){.u-links a.u-optional{display:none}}
/* mobile utility-bar collapse — was present on only 15-23 of 32 pages before this fix */
@media(max-width:680px){.u-links,.u-hide{display:none}}

.sfoot{background:var(--navy-deep);color:#C7CEE6;margin-top:0}
.sfoot .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sfoot-status{border-bottom:1px solid rgba(255,255,255,.08)}
.sfoot-status .wrap{display:flex;justify-content:space-between;align-items:center;height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#8A93C2}
.sfoot-status .s-item{display:flex;align-items:center;gap:8px}
.sfoot-main{padding:56px 0 40px}
.sfoot-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:32px}
.sfoot-brand .logo{font-family:'Poppins',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;color:#fff}
.sfoot-brand .logo .a{color:var(--red)}
.sfoot-brand p{font-size:13px;line-height:1.65;color:#9AA3C7;margin-top:14px;max-width:26ch}
.sfoot-tagline{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5C6699;margin-top:18px}
.sfoot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#5C6699;margin-bottom:16px;font-weight:600}
.sfoot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.sfoot-col a{font-size:13.5px;color:#C7CEE6;transition:color .15s}
.sfoot-col a:hover{color:#fff}
.sfoot-social{display:flex;gap:14px;margin-top:22px}
.sfoot-social a{width:32px;height:32px;border:1px solid rgba(255,255,255,.14);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#9AA3C7;transition:.15s}
.sfoot-social a:hover{border-color:var(--red);color:#fff;background:rgba(228,3,46,.12)}
.sfoot-social svg{width:15px;height:15px}
.sfoot-legal{padding:20px 0}
.sfoot-legal .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;color:#5C6699}
.sfoot-legal .l-links{display:flex;gap:20px}
.sfoot-legal a{color:#8A93C2}
.sfoot-legal a:hover{color:#fff}

/* optional footer CTA banner — used on some pages, not all. Include the
   .sfoot-cta markup only on pages that want it; this just styles it when present. */
.sfoot-cta{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.sfoot-cta .wrap{display:flex;justify-content:space-between;align-items:center;padding:26px 24px;gap:20px;flex-wrap:wrap}
.sfoot-cta h3{color:#fff;font-size:19px;font-weight:600;letter-spacing:-.01em}
.sfoot-cta p{color:#8A93C2;font-size:13px;margin-top:4px}
.btn-cta{background:var(--red);color:#fff;font-size:13.5px;font-weight:600;padding:12px 22px;border-radius:999px;white-space:nowrap;transition:.15s}
.btn-cta:hover{background:#fff;color:var(--navy-deep)}
/* compact variant for the utility bar option — bar is only 32px tall */
.u-cta{margin-left:6px;padding:5px 14px;font-size:11.5px}