/**
 * ============================================================
 * Gizmeon — Shell CSS
 *
 * Loaded on EVERY page. Contains nav, footer, buttons, page-head,
 * section labels, and CTA — the chrome that wraps page-specific content.
 *
 * Design tokens (--cyan, --pink, --black*, --bl*, --ff-*, --g-gradient)
 * come from style.css and are globally available.
 * ============================================================
 */

/* ============================================================
   PARENT THEME OVERRIDES
   Essentials parent theme applies aggressive img/link styles.
   These body-class-scoped rules use !important to defeat them.
   ============================================================ */
body.gizmeon-active .gz-logo img,
body.gz-home-active .gz-logo img,
body.gz-about-active .gz-logo img,
body.gz-contact-active .gz-logo img,
body.gz-policy-active .gz-logo img,
body.gizmeon-active .gz-footer-logo img,
body.gz-home-active .gz-footer-logo img,
body.gz-about-active .gz-footer-logo img,
body.gz-contact-active .gz-footer-logo img,
body.gz-policy-active .gz-footer-logo img {
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: 40px !important;
  display: block !important;
}

body.gizmeon-active .gz-footer-logo img,
body.gz-home-active .gz-footer-logo img,
body.gz-about-active .gz-footer-logo img,
body.gz-contact-active .gz-footer-logo img,
body.gz-policy-active .gz-footer-logo img {
  height: 42px !important;
}

/* Nav CTA — force button styling over parent theme link styles */
body.gizmeon-active .gz-nav-cta,
body.gz-home-active .gz-nav-cta,
body.gz-about-active .gz-nav-cta,
body.gz-contact-active .gz-nav-cta,
body.gz-policy-active .gz-nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--ff-b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--black) !important;
  background: var(--cyan) !important;
  padding: 11px 22px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  border: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
body.gizmeon-active .gz-nav-cta:hover,
body.gz-home-active .gz-nav-cta:hover,
body.gz-about-active .gz-nav-cta:hover,
body.gz-contact-active .gz-nav-cta:hover,
body.gz-policy-active .gz-nav-cta:hover {
  opacity: 0.88 !important;
  color: var(--black) !important;
  background: var(--cyan) !important;
}

/* Prevent nav items wrapping onto multiple lines */
body.gizmeon-active .gz-nav-item > a,
body.gz-home-active .gz-nav-item > a,
body.gz-about-active .gz-nav-item > a,
body.gz-contact-active .gz-nav-item > a,
body.gz-policy-active .gz-nav-item > a {
  white-space: nowrap !important;
}

/* Reset any parent theme container widths on the nav */
body.gizmeon-active .gz-nav,
body.gz-home-active .gz-nav,
body.gz-about-active .gz-nav,
body.gz-contact-active .gz-nav,
body.gz-policy-active .gz-nav {
  width: 100% !important;
  max-width: 100% !important;
}
body.gizmeon-active .gz-nav-inner,
body.gz-home-active .gz-nav-inner,
body.gz-about-active .gz-nav-inner,
body.gz-contact-active .gz-nav-inner,
body.gz-policy-active .gz-nav-inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 16px 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
}

/* ============================================================
   GIZMEON DESIGN SYSTEM v1.0
   Extracted so every page loads the same chrome + tokens.
   In WordPress this becomes style.css + assets/css/shell.css
   ============================================================ */

/* ============================================================
   NAV — sticky, with dropdowns
   ============================================================ */
.gz-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(5,6,10,0.75);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bl);
}
.gz-nav-inner{
  max-width:1400px;margin:0 auto;
  padding:16px 52px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.gz-logo{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0;line-height:0;transition:opacity 0.2s}
.gz-logo:hover{opacity:0.85}
.gz-logo img{height:36px;width:auto;display:block}
.gz-logo .accent{
  background:var(--g-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.gz-nav-links{
  display:flex;gap:38px;list-style:none;align-items:center;margin:0;padding:0;
}
.gz-nav-item{position:relative}
.gz-nav-item > a{
  font-family:var(--ff-b);
  font-size:13.5px;
  font-weight:400;
  letter-spacing:-0.005em;
  color:rgba(245,245,248,0.72);
  text-decoration:none;transition:color 0.2s;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 0;
  line-height:1;
}
.gz-nav-item > a:hover{color:var(--white)}
.gz-nav-item.has-dd > a::after{
  content:'';
  width:8px;height:8px;
  border-right:1.5px solid rgba(245,245,248,0.4);
  border-bottom:1.5px solid rgba(245,245,248,0.4);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform 0.2s,border-color 0.2s;
  margin-left:4px;
}
.gz-nav-item.has-dd:hover > a::after{
  transform:rotate(-135deg) translate(-2px,-2px);
  border-color:var(--cyan);
}

.gz-nav-dd{
  position:absolute;top:100%;left:-16px;
  min-width:280px;
  background:var(--black2);
  border:1px solid var(--bl2);
  border-radius:10px;
  padding:14px;
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity 0.2s,transform 0.2s;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
  z-index:5;
}
.gz-nav-item:hover .gz-nav-dd{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
.gz-nav-dd-h{
  font-size:9.5px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(245,245,248,0.32);padding:10px 12px 6px;
}
.gz-nav-dd a{
  display:flex;flex-direction:column;
  padding:10px 12px;border-radius:6px;
  color:rgba(245,245,248,0.75);text-decoration:none;
  transition:background 0.15s;
}
.gz-nav-dd a:hover{background:rgba(255,255,255,0.04);color:var(--white)}
.gz-nav-dd a .t{font-size:13.5px;font-weight:600;line-height:1.2;margin-bottom:2px}
.gz-nav-dd a .d{font-size:11.5px;font-weight:300;color:rgba(245,245,248,0.4);line-height:1.35}

.gz-nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-b);
  font-size:13px;font-weight:500;letter-spacing:-0.005em;
  color:var(--black);background:var(--cyan);
  padding:11px 22px;border-radius:6px;
  text-decoration:none;transition:opacity 0.2s,transform 0.2s;
  line-height:1;white-space:nowrap;
}
.gz-nav-cta:hover{opacity:0.9;color:var(--black);transform:translateY(-1px)}

/* ============================================================
   BUTTONS — reusable
   Body-class scoped with !important to defeat parent theme's
   aggressive `a { color: var(--cyan) }` rule which was making
   .gz-btn-primary text invisible (cyan on cyan).
   ============================================================ */
.gz-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-b);font-size:13px;font-weight:600;letter-spacing:-0.005em;
  padding:14px 28px;border-radius:6px;cursor:pointer;
  transition:opacity 0.2s,border-color 0.2s,background 0.2s,transform 0.2s,color 0.2s;
  text-decoration:none;border:none;
  line-height:1;white-space:nowrap;
}

body.gizmeon-active .gz-btn-primary,
body.gz-home-active .gz-btn-primary,
body.gz-about-active .gz-btn-primary,
body.gz-contact-active .gz-btn-primary,
body.gz-policy-active .gz-btn-primary,
.gz-btn-primary{
  color:var(--black) !important;
  background:var(--cyan) !important;
  border:none !important;
}
body.gizmeon-active .gz-btn-primary:hover,
body.gz-home-active .gz-btn-primary:hover,
body.gz-about-active .gz-btn-primary:hover,
body.gz-contact-active .gz-btn-primary:hover,
body.gz-policy-active .gz-btn-primary:hover,
.gz-btn-primary:hover{
  opacity:0.9 !important;
  color:var(--black) !important;
  background:var(--cyan) !important;
  transform:translateY(-1px);
}

body.gizmeon-active .gz-btn-ghost,
body.gz-home-active .gz-btn-ghost,
body.gz-about-active .gz-btn-ghost,
body.gz-contact-active .gz-btn-ghost,
body.gz-policy-active .gz-btn-ghost,
.gz-btn-ghost{
  color:rgba(245,245,248,0.85) !important;
  background:transparent !important;
  border:1px solid var(--bl2) !important;
}
body.gizmeon-active .gz-btn-ghost:hover,
body.gz-home-active .gz-btn-ghost:hover,
body.gz-about-active .gz-btn-ghost:hover,
body.gz-contact-active .gz-btn-ghost:hover,
body.gz-policy-active .gz-btn-ghost:hover,
.gz-btn-ghost:hover{
  border-color:var(--cyan) !important;
  color:var(--cyan) !important;
  background:transparent !important;
}

/* ============================================================
   REUSABLE PAGE-HEAD BLOCK (for corporate + service pages)
   ============================================================ */
.gz-ph{
  position:relative;
  padding:100px 52px 80px;
  border-bottom:1px solid var(--bl);
  overflow:hidden;
}
.gz-ph::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 20% 10%,rgba(38,214,255,0.06),transparent 60%),
    radial-gradient(ellipse 700px 400px at 80% 90%,rgba(255,91,209,0.05),transparent 60%);
  pointer-events:none;
}
.gz-ph-inner{
  position:relative;z-index:1;
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;
}
.gz-ph-crumbs{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:400;color:rgba(245,245,248,0.35);
  margin-bottom:22px;
}
.gz-ph-crumbs a{color:rgba(245,245,248,0.45);text-decoration:none;transition:color 0.2s}
.gz-ph-crumbs a:hover{color:var(--cyan)}
.gz-ph-crumbs .sep{color:rgba(245,245,248,0.2)}
.gz-ph-lbl{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:22px;
  padding:7px 13px;
  background:rgba(38,214,255,0.08);
  border:1px solid rgba(38,214,255,0.2);
  border-radius:3px;
}
.gz-ph-lbl::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
}
.gz-ph-h{
  font-family:var(--ff-d);font-size:clamp(44px,6vw,84px);
  letter-spacing:1px;line-height:0.95;color:var(--white);
  margin-bottom:24px;
}
.gz-ph-h .cy{color:var(--cyan)}
.gz-ph-h .pk{color:var(--pink)}
.gz-ph-h em{
  font-family:var(--ff-s);font-style:italic;font-weight:400;
  letter-spacing:-0.01em;
  background:var(--g-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.gz-ph-sub{
  font-size:16px;font-weight:300;color:rgba(245,245,248,0.65);
  line-height:1.75;margin-bottom:32px;max-width:580px;
}
.gz-ph-sub strong{color:var(--white);font-weight:500}
.gz-ph-ctas{display:flex;gap:12px;flex-wrap:wrap}
.gz-ph-media{
  position:relative;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--bl2);
  aspect-ratio:4/3;
}
.gz-ph-media img{width:100%;height:100%;object-fit:cover}
.gz-ph-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(38,214,255,0.08),transparent 40%,rgba(255,91,209,0.05));
  mix-blend-mode:overlay;pointer-events:none;
}

/* ============================================================
   SECTION LABELS — reusable pattern
   ============================================================ */
.gz-sec-lbl{
  font-size:10.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
}
.gz-sec-lbl.pk{color:var(--pink)}
.gz-sec-h{
  font-family:var(--ff-d);font-size:clamp(36px,4.5vw,60px);
  letter-spacing:1px;line-height:0.95;color:var(--white);
}
.gz-sec-h .cy{color:var(--cyan)}
.gz-sec-h .pk{color:var(--pink)}
.gz-sec-h em{
  font-family:var(--ff-s);font-style:italic;font-weight:400;
  letter-spacing:-0.01em;
  background:var(--g-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.gz-sec-sub{
  font-size:15px;font-weight:300;color:rgba(245,245,248,0.55);
  line-height:1.75;max-width:660px;
}

/* ============================================================
   CTA BLOCK — reusable
   ============================================================ */
.gz-cta{
  padding:120px 52px;
  text-align:center;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--bl);
}
.gz-cta::before{
  content:'';position:absolute;
  width:1000px;height:500px;
  background:radial-gradient(ellipse,rgba(38,214,255,0.07),rgba(255,91,209,0.05) 40%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.gz-cta > *{position:relative;z-index:1}
.gz-cta-lbl{
  font-size:10.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--pink);margin-bottom:18px;
}
.gz-cta-h{
  font-family:var(--ff-d);font-size:clamp(40px,5.5vw,72px);
  letter-spacing:1px;line-height:0.95;color:var(--white);
  margin-bottom:20px;max-width:900px;margin-left:auto;margin-right:auto;
}
.gz-cta-h em{
  font-family:var(--ff-s);font-style:italic;font-weight:400;
  letter-spacing:-0.01em;
  background:var(--g-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.gz-cta-sub{
  font-size:15px;font-weight:300;color:rgba(245,245,248,0.6);
  max-width:600px;margin:0 auto 36px;line-height:1.75;
}
.gz-cta-ctas{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-bottom:26px;
}
.gz-cta-note{
  font-size:12px;font-weight:400;color:rgba(245,245,248,0.32);
  letter-spacing:0.04em;
}

/* ============================================================
   FOOTER — Gizmott-style classes (footer-top, fc-h, fc-links,
   footer-bottom, fcopy, flegals). Shared visual DNA with Gizmott.
   ============================================================ */
.footer-brand-bar{
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  margin-bottom:68px;
}
.site-footer,
footer#colophon,
.gz-footer{
  background:var(--black2);
  padding:0 52px 36px;
  border-top:1px solid var(--bl);
  font-family:var(--ff-b);
}
.site-footer::before{content:none}

.footer-top{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:56px;
  padding-bottom:52px;border-bottom:1px solid var(--bl);
}
.footer-brand{}
.gz-footer-logo{
  display:inline-flex;align-items:center;line-height:0;
  margin-bottom:4px;
}
.gz-footer-logo img{
  height:42px;width:auto;display:block;
}
.fl-tagline{
  font-size:13px;font-weight:300;
  color:rgba(245,245,248,0.28);
  margin-top:14px;line-height:1.72;
  max-width:280px;
}
.fc-h{
  font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(245,245,248,0.22);
  margin-bottom:20px;
}
.fc-links{
  list-style:none;display:flex;flex-direction:column;gap:11px;
  padding:0;margin:0;
}
.fc-links a{
  font-size:13.5px;font-weight:300;
  color:rgba(245,245,248,0.42);
  transition:color 0.2s;text-decoration:none;
}
.fc-links a:hover{color:var(--cyan)}

.footer-bottom{
  max-width:1400px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;flex-wrap:wrap;gap:12px;
}
.fcopy{font-size:12px;color:rgba(245,245,248,0.18)}
.flegals{display:flex;gap:24px;flex-wrap:wrap}
.flegals a{
  font-size:12px;color:rgba(245,245,248,0.18);
  transition:color 0.2s;text-decoration:none;
}
.flegals a:hover{color:var(--cyan)}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:1080px){
  .gz-ph-inner{grid-template-columns:1fr;gap:36px}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:680px){
  .gz-nav-inner{padding:14px 22px}
  .gz-nav-links{display:none}
  .gz-ph{padding:64px 22px 56px}
  .gz-cta{padding:88px 22px}
  .site-footer,
  footer#colophon,
  .gz-footer{padding:0 20px 24px}
  .footer-brand-bar{margin-bottom:40px}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .flegals{gap:16px}
}

/* ============================================================
   GLOBAL LOGO — force transparent background everywhere
   Covers our logo, Customizer logo, parent theme logo, any
   wrapper that might add a background color behind the logo.
   ============================================================ */
body.gizmeon-active .gz-logo,
body.gizmeon-active .gz-logo img,
body.gizmeon-active .gz-footer-logo,
body.gizmeon-active .gz-footer-logo img,
body.gizmeon-active .custom-logo,
body.gizmeon-active .custom-logo-link,
body.gizmeon-active .custom-logo-link img,
body.gizmeon-active .site-branding img,
body.gizmeon-active .site-logo img,
body.gizmeon-active img.custom-logo,
body.gizmeon-active .navbar-brand img,
body.gizmeon-active .logo img{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
}