/* =================================================================
 * Tech Guardian — Consistency Overlay v1
 * -----------------------------------------------------------------
 * Loaded in <head> via the tg-consistency mu-plugin (with high
 * priority so it overrides the page inline <style> blocks where
 * needed via specificity + targeted !important on specific props).
 *
 * Goal: align nav, footer, common chrome, common cards, headings,
 * and primary buttons to the iMessage-blue + glossy-glass system —
 * WITHOUT trampling sections that are already premium (the new
 * .tg-svc3 section, the policies-and-terms FX page, etc.).
 *
 * NEVER blanket-rewrites colors. Each rule is targeted by class.
 * =================================================================*/

/* ===== Tokens (used by selectors below) ===== */
:root{
  --tg-blue:        #0A84FF;
  --tg-blue-soft:   #6EB8FF;
  --tg-blue-deep:   #007AFF;
  --tg-bg-1:        #05090f;
  --tg-bg-2:        #0a1118;
  --tg-card-bg:     linear-gradient(180deg,rgba(10,20,40,0.86),rgba(8,14,26,0.90));
  --tg-card-border: 1px solid rgba(10,132,255,0.22);
  --tg-card-shadow: inset 0 1px 0 rgba(255,255,255,0.05),0 10px 36px rgba(0,0,0,0.35);
  --tg-card-blur:   18px;
}

/* ===== NAV — keep structure, restyle accent + glass background ===== */
nav.nav{background:linear-gradient(180deg,rgba(5,9,15,0.92),rgba(5,9,15,0.78)) !important;border-bottom:1px solid rgba(10,132,255,0.18) !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav.nav .nav-logo .bolt svg path{fill:var(--tg-blue) !important}
nav.nav .nav-logo span{color:var(--tg-blue) !important}
nav.nav .nav-links a{transition:color .25s ease,text-shadow .25s ease}
nav.nav .nav-links > a:hover,
nav.nav .mega-trigger:hover{color:var(--tg-blue-soft) !important;text-shadow:0 0 16px rgba(10,132,255,0.45)}
nav.nav .nav-links a.hl{color:var(--tg-blue-soft) !important}
nav.nav .mega-drop{background:linear-gradient(180deg,rgba(10,15,25,0.96),rgba(5,9,15,0.96)) !important;border:1px solid rgba(10,132,255,0.22) !important;box-shadow:0 18px 48px rgba(0,0,0,0.55),0 0 0 1px rgba(10,132,255,0.10) !important;border-radius:14px !important}
nav.nav .mega-col h4{color:var(--tg-blue) !important;letter-spacing:2px}
nav.nav .mega-col a:hover{color:var(--tg-blue-soft) !important}
nav.nav .nav-book{background:linear-gradient(180deg,rgba(16,22,38,0.92),rgba(5,9,15,0.98)) !important;border:1px solid rgba(10,132,255,0.5) !important;color:#fff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 0 24px rgba(10,132,255,0.32) !important;transition:box-shadow .3s ease,border-color .3s ease !important}
nav.nav .nav-book:hover{border-color:var(--tg-blue) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 0 36px rgba(10,132,255,0.55) !important}

/* ===== Mobile menu — match the same blue glass ===== */
.mobile-menu{background:linear-gradient(180deg,#05090f,#0a1118) !important;border-left:1px solid rgba(10,132,255,0.22) !important}
.mobile-menu a{transition:color .2s ease}
.mobile-menu a:hover{color:var(--tg-blue-soft) !important}
.mobile-menu .mm-head{color:var(--tg-blue) !important;letter-spacing:2px}
.mob-book a{box-shadow:0 0 28px rgba(10,132,255,0.45) !important}

/* ===== Section-label / hero eyebrow ===== */
.sec-label,.hero-eyebrow{color:var(--tg-blue) !important;text-shadow:0 0 18px rgba(10,132,255,0.45)}

/* ===== Hero accent span ===== */
.hero h1 .bl{color:var(--tg-blue) !important;text-shadow:0 0 32px rgba(10,132,255,0.55)}

/* ===== Trust strip ===== */
.trust-strip{background:linear-gradient(180deg,rgba(5,9,15,0.95),rgba(10,17,24,0.95)) !important;border-top:1px solid rgba(10,132,255,0.18) !important;border-bottom:1px solid rgba(10,132,255,0.18) !important}
.trust-item svg polyline,.trust-item svg{stroke:var(--tg-blue) !important}

/* ===== Old "scard" card system — re-skin to glossy glass + iMessage blue ===== */
.scard{position:relative;z-index:2;background:var(--tg-card-bg) !important;border:var(--tg-card-border) !important;box-shadow:var(--tg-card-shadow) !important;backdrop-filter:blur(var(--tg-card-blur)) saturate(1.1) !important;-webkit-backdrop-filter:blur(var(--tg-card-blur)) saturate(1.1) !important;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .35s ease,box-shadow .35s ease !important}
.scard:hover{transform:translateY(-6px) !important;border-color:rgba(10,132,255,0.55) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 14px 42px rgba(10,132,255,0.16) !important;animation:none !important}
.scard h3{color:#fff !important;letter-spacing:1.4px}
.scard-icon{background:linear-gradient(135deg,rgba(10,132,255,0.22),rgba(10,132,255,0.05)) !important;border:1px solid rgba(10,132,255,0.35) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 0 24px rgba(10,132,255,0.18) !important}
.scard-icon svg{stroke:var(--tg-blue-soft) !important;color:var(--tg-blue-soft) !important}
.scard:hover .scard-icon{background:rgba(10,132,255,0.30) !important;box-shadow:0 0 28px rgba(10,132,255,0.45) !important;border-color:rgba(10,132,255,0.7) !important}
.scard:hover .scard-icon svg{filter:drop-shadow(0 0 8px rgba(10,132,255,0.85)) !important}
.scard-reflection,.scard::after{background:linear-gradient(180deg,transparent,rgba(10,132,255,0.05)) !important}
.scard .price-tag{background:rgba(10,132,255,0.10) !important;border:1px solid rgba(10,132,255,0.28) !important;color:var(--tg-blue-soft) !important}

/* ===== Old "btn-info" / "btn-outline" / "btn-ghost" — premium pill ===== */
.btn-info,.btn-outline,.btn-ghost{position:relative;background:rgba(0,0,0,0.35) !important;border:1px solid rgba(10,132,255,0.35) !important;color:var(--tg-blue-soft) !important;border-radius:999px !important;transition:color .3s ease,border-color .3s ease,box-shadow .3s ease !important}
.btn-info:hover,.btn-outline:hover,.btn-ghost:hover{color:#fff !important;border-color:rgba(10,132,255,0.75) !important;box-shadow:0 0 24px rgba(10,132,255,0.35) !important}

/* ===== Old "btn-gold" — keep gold accent but premium-ize the surface ===== */
.btn-gold{position:relative;background:linear-gradient(180deg,#f5c518,#e0a800) !important;border:1px solid rgba(245,197,24,0.7) !important;color:#0a1118 !important;border-radius:999px !important;font-weight:800 !important;box-shadow:0 8px 24px rgba(245,197,24,0.25),inset 0 1px 0 rgba(255,255,255,0.4) !important;transition:transform .25s ease,box-shadow .3s ease !important}
.btn-gold:hover{transform:translateY(-2px) !important;box-shadow:0 12px 32px rgba(245,197,24,0.45),inset 0 1px 0 rgba(255,255,255,0.6) !important}

/* ===== Footer — glassify, blue accents ===== */
footer.footer{background:linear-gradient(180deg,#05090f,#02060c) !important;border-top:1px solid rgba(10,132,255,0.22) !important}
footer.footer .footer-col h4{color:var(--tg-blue) !important;letter-spacing:2px}
footer.footer .footer-col a{transition:color .2s ease}
footer.footer .footer-col a:hover{color:var(--tg-blue-soft) !important}
footer.footer .nav-logo .bolt svg path{fill:var(--tg-blue) !important}
footer.footer .nav-logo span{color:var(--tg-blue) !important}
footer.footer .footer-cta-call{border:1px solid rgba(10,132,255,0.35) !important;color:var(--tg-blue-soft) !important;background:rgba(0,0,0,0.35) !important;border-radius:999px !important;transition:color .3s ease,border-color .3s ease,box-shadow .3s ease !important}
footer.footer .footer-cta-call:hover{color:#fff !important;border-color:var(--tg-blue) !important;box-shadow:0 0 22px rgba(10,132,255,0.35) !important}
footer.footer .footer-cta-book{background:linear-gradient(180deg,#f5c518,#e0a800) !important;border:1px solid rgba(245,197,24,0.7) !important;color:#0a1118 !important;border-radius:999px !important;box-shadow:0 8px 24px rgba(245,197,24,0.25),inset 0 1px 0 rgba(255,255,255,0.4) !important}

/* ===== Section background — keep dark blue-black consistent ===== */
.sec{background:transparent !important}
body{background:#05090f !important}

/* ===== Compare grid (us vs them) — modernize ===== */
.comp-card{position:relative;z-index:2;background:var(--tg-card-bg) !important;border:var(--tg-card-border) !important;box-shadow:var(--tg-card-shadow) !important;backdrop-filter:blur(var(--tg-card-blur)) saturate(1.1) !important;-webkit-backdrop-filter:blur(var(--tg-card-blur)) saturate(1.1) !important}
.comp-card.us{border-color:rgba(10,132,255,0.55) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 14px 42px rgba(10,132,255,0.14) !important}

/* ===== Hamburger color ===== */
.hamburger{color:var(--tg-blue) !important}

/* ===== Headings — consistent blue glow accent ===== */
h2.sec-title span,.sec-title span{color:var(--tg-blue) !important;text-shadow:0 0 28px rgba(10,132,255,0.5) !important}

/* ===== Premium tg-ico icons inherit currentColor — color them blue when in nav/footer chrome ===== */
.scard .tg-ico,.comp-card .tg-ico{color:var(--tg-blue-soft) !important}

/* ===== Mobile call-link in mobile menu — keep blue not cyan ===== */
.mobile-menu a[href^="tel:"]{color:var(--tg-blue) !important}

/* ===== "Specials" / Pricing pages: any "Pricing" sec-label etc. ===== */
.specials-card,.spec-card{position:relative;z-index:2;background:var(--tg-card-bg) !important;border:var(--tg-card-border) !important;box-shadow:var(--tg-card-shadow) !important;backdrop-filter:blur(var(--tg-card-blur)) saturate(1.1) !important;-webkit-backdrop-filter:blur(var(--tg-card-blur)) saturate(1.1) !important}

/* ===== Card readability layering — force cards/content above the FX canvas
 *   The FX canvas is position:fixed z-index:0 mounted on <html>. Any element
 *   with position + z-index >= 1 will sit above it. We also float section
 *   containers so text outside cards stays above particles/lightning too. */
.sec,section,main,.mx{position:relative;z-index:1}
.scard,.comp-card,.specials-card,.spec-card{z-index:2}

/* ===== Mobile — bump opacity further; readability > aesthetic ===== */
@media (max-width:768px){
  .scard,.comp-card,.specials-card,.spec-card{
    background:linear-gradient(180deg,rgba(10,20,40,0.92),rgba(8,14,26,0.95)) !important;
    backdrop-filter:blur(14px) saturate(1.1) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.1) !important;
  }
}

/* =================================================================
 * Wrapped pages (policies-and-terms, specials)
 * The mu-plugin adds body.tg-wrapped on these and renders the canonical
 * TG nav/footer around the content. Hide the default theme chrome.
 * =================================================================*/
body.tg-wrapped #site-header,
body.tg-wrapped header.site-header,
body.tg-wrapped .site-header,
body.tg-wrapped #site-footer,
body.tg-wrapped footer.site-footer,
body.tg-wrapped .site-footer{display:none !important}

body.tg-wrapped #content,
body.tg-wrapped .site-content,
body.tg-wrapped main{padding:0 !important;margin:0 !important;max-width:none !important;background:#05090f}

body.tg-wrapped{margin:0 !important;padding:0 !important;background:#05090f !important;color:#c8ccd4}

/* The TG nav is sticky position; ensure body has no top padding/offset injected by theme */
body.tg-wrapped .entry-content,
body.tg-wrapped .entry-header{margin:0 !important;padding:0 !important;max-width:none !important}

/* Wrapped pages already have their own internal layout (#tg-legal etc).
   Just give the area between nav and footer a comfortable max-width inside
   the existing internal containers — DO NOT impose a global max-width here. */

/* ===== Reduced motion safety ===== */
@media (prefers-reduced-motion:reduce){
  .scard{transition:none !important}
  .scard:hover{transform:none !important}
}
