/*
Theme Name: ExecNets
Theme URI: https://execnets.com
Author: Executive Network Services, Inc.
Description: Custom theme for Executive Network Services, Inc. (ExecNets) — managed IT, cybersecurity, and support. Built for native WordPress block-editor content.
Version: 1.0
Text Domain: execnets
*/

/* ============================================================
   Design tokens (same palette/type system as the static site)
   ============================================================ */

:root{
  --navy-900:#0B2545;
  --navy-800:#122E56;
  --navy-700:#16356D;
  --navy-500:#2A5090;
  --navy-300:#7C93BC;
  --paper:#F7FAFC;
  --paper-dim:#EEF2F7;
  --slate:#5B6B85;
  --slate-light:#8593A8;
  --line:#DCE3EE;
  --line-dark:#28406B;
  --signal:#E8A33D;
  --signal-dark:#C9821F;
  --signal-light:#FBEBD1;
  --white:#FFFFFF;

  --chamfer: 16px;
  --chamfer-sm: 10px;

  --font-display:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--navy-900);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }

:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
}

.container, .wp-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--signal);
  display:inline-block;
}

/* ---------- Chamfer utility ---------- */
.chamfer{
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.chamfer-sm{
  clip-path: polygon(0 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm), 100% 100%, 0 100%);
}

/* ---------- Signal bar divider ---------- */
.signal-bar{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:20px;
}
.signal-bar span{
  display:block;
  width:4px;
  background:var(--navy-300);
  opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .signal-bar span{ animation: pulse 2.6s ease-in-out infinite; }
}
@keyframes pulse{
  0%,100%{ transform:scaleY(1); }
  50%{ transform:scaleY(.7); }
}

/* ---------- Buttons (also styles WP core Button block) ---------- */
.btn, .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.98rem;
  padding:16px 28px;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
  white-space:nowrap;
  border-radius:0;
}
.btn:hover, .wp-block-button__link:hover{ transform:translateY(-2px); }
.btn-primary, .wp-block-button.btn-primary .wp-block-button__link{
  background:var(--signal);
  color:var(--navy-900) !important;
}
.btn-primary:hover{ background:var(--signal-dark); }
.btn-outline .wp-block-button__link, a.btn-outline{
  background:transparent;
  color:var(--white) !important;
  border:2px solid rgba(255,255,255,.5);
}
.btn-ghost .wp-block-button__link, a.btn-ghost{
  background:transparent;
  color:var(--navy-700) !important;
  border:2px solid var(--navy-700);
}
.btn-sm{ padding:10px 18px; font-size:.85rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(247,250,252,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 32px;
  max-width:1180px;
  margin:0 auto;
  gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img.logo-lockup{ height:34px; width:auto; }
.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  font-size:.94rem;
  font-weight:600;
  color:var(--navy-800);
}
.nav-links ul{ display:flex; gap:32px; }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--signal);
  transition:width .2s ease;
}
.nav-links a:hover::after, .nav-links .current-menu-item a::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-phone{
  font-family:var(--font-mono);
  font-size:.92rem;
  font-weight:500;
  color:var(--navy-700);
  white-space:nowrap;
}
@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-phone{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding:96px 0 64px; }
.hero h1{
  font-size:clamp(2.6rem, 5.6vw, 4.4rem);
  color:var(--navy-900);
  margin-bottom:22px;
}
.hero .accent{ color:var(--navy-500); }
.hero p.lead, .hero p{
  font-size:1.18rem;
  color:var(--slate);
  max-width:600px;
}
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:36px;
}
.hero-stats .stat{ flex:1 1 160px; padding-right:28px; }
.hero-stats .stat .num{
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:500;
  color:var(--navy-700);
  display:block;
}
.hero-stats .stat .label{
  font-size:.82rem;
  color:var(--slate);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ---------- Sections ---------- */
.section-pad{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); color:var(--navy-900); }
.section-head p{ color:var(--slate); font-size:1.08rem; margin-top:16px; }
.section-alt{ background:var(--paper-dim); }

/* ---------- Service cards (WP Columns block) ---------- */
.service-grid.wp-block-columns{
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  flex-wrap:wrap;
}
.service-card.wp-block-column{
  background:var(--paper);
  padding:38px 32px;
  min-width:260px;
}
.service-card h3{ font-size:1.22rem; color:var(--navy-900); margin-bottom:12px; }
.service-card p{ color:var(--slate); font-size:.98rem; }

/* ---------- CTA banner (WP Group block) ---------- */
.cta-banner.wp-block-group{
  background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  color:var(--white);
  padding:72px 32px;
}
.cta-banner h2{ color:var(--white); font-size:clamp(1.8rem, 3.4vw, 2.5rem); }
.cta-banner p{ color:rgba(255,255,255,.72); margin-top:14px; }

/* ---------- Trust grid (WP Columns block) ---------- */
.trust-grid.wp-block-columns{ gap:48px; }
.trust-item .num{
  font-family:var(--font-mono);
  color:var(--signal-dark);
  font-size:.85rem;
  letter-spacing:.08em;
  display:block;
  margin-bottom:10px;
}
.trust-item h3{ font-size:1.28rem; color:var(--navy-900); margin-bottom:12px; }
.trust-item p{ color:var(--slate); }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.75); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand img{ height:34px; margin-bottom:16px; }
.footer-brand p{ color:rgba(255,255,255,.55); font-size:.92rem; max-width:280px; }
.footer-col h4{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; }
.footer-col ul li{ margin-bottom:12px; font-size:.94rem; }
.footer-col ul li a:hover{ color:var(--signal); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:.84rem; color:rgba(255,255,255,.45); }
.footer-bottom a:hover{ color:var(--signal); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding:64px 0 56px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(2.2rem, 4.6vw, 3.2rem); color:var(--navy-900); }
.page-hero p{ color:var(--slate); font-size:1.08rem; max-width:600px; margin-top:18px; }

/* ---------- Service detail rows ---------- */
.service-detail{ padding:44px 0; border-bottom:1px solid var(--line); }
.service-detail .tag{ font-family:var(--font-mono); font-size:.8rem; color:var(--signal-dark); letter-spacing:.08em; }
.service-detail h3{ font-size:1.7rem; color:var(--navy-900); margin-top:10px; margin-bottom:16px; }
.service-detail p{ color:var(--slate); font-size:1.02rem; max-width:720px; }
.service-detail ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; margin-top:18px; }
.service-detail ul li{ font-size:.95rem; color:var(--navy-800); padding-left:22px; position:relative; }
.service-detail ul li::before{ content:"✓"; position:absolute; left:0; color:var(--signal-dark); font-weight:700; }
@media (max-width: 700px){ .service-detail ul{ grid-template-columns:1fr; } }

/* ---------- Contact cards ---------- */
.contact-card{ background:var(--white); border:1px solid var(--line); padding:30px; margin-bottom:16px; }
.contact-card .label{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:8px; }
.contact-card .value{ font-family:var(--font-display); font-size:1.4rem; color:var(--navy-900); }
.contact-card .value a:hover{ color:var(--signal-dark); }
.industries-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.industries-row span{ font-family:var(--font-mono); font-size:.78rem; color:var(--navy-700); background:var(--paper-dim); border:1px solid var(--line); padding:7px 12px; }

/* ---------- Contact form ---------- */
.execnets-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.execnets-form .form-group{ margin-bottom:20px; }
.execnets-form label{ display:block; font-size:.88rem; font-weight:600; color:var(--navy-800); margin-bottom:8px; }
.execnets-form input, .execnets-form textarea, .execnets-form select{
  width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--white);
  font-family:var(--font-body); font-size:.96rem; color:var(--navy-900);
}
.execnets-form input:focus, .execnets-form textarea:focus, .execnets-form select:focus{
  outline:2px solid var(--navy-500); border-color:var(--navy-500);
}
@media (max-width:700px){ .execnets-form .form-row{ grid-template-columns:1fr; } }

/* ---------- Legal / privacy page (native block content) ---------- */
.legal-content{ max-width:800px; }
.legal-content h2{ font-size:1.4rem; color:var(--navy-900); margin-top:44px; margin-bottom:14px; }
.legal-content p, .legal-content li{ color:var(--slate); font-size:1rem; margin-bottom:14px; }
.legal-content ul{ padding-left:22px; list-style:disc; }
.legal-content .updated{ font-family:var(--font-mono); font-size:.82rem; color:var(--slate-light); display:block; margin-bottom:36px; }

/* ---------- Fluent Forms brand styling ----------
   Targets Fluent Forms' default markup. If a future plugin update
   changes class names, inspect the field in browser dev tools and
   adjust the selectors below accordingly. */
.fluentform{
  font-family: var(--font-body);
}
.fluentform .ff-el-group{
  margin-bottom: 20px;
}
.fluentform .ff-el-input--label label,
.fluentform label{
  display:block;
  font-size:.88rem;
  font-weight:600;
  color: var(--navy-800);
  margin-bottom:8px;
}
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control{
  width:100%;
  padding:13px 14px !important;
  border:1px solid var(--line) !important;
  background: var(--white);
  font-family: var(--font-body);
  font-size:.96rem;
  color: var(--navy-900);
  border-radius:0 !important;
  box-shadow:none !important;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus{
  outline:2px solid var(--navy-500);
  border-color: var(--navy-500) !important;
  box-shadow:none !important;
}
.fluentform .ff-btn,
.fluentform button[type="submit"],
.fluentform input[type="submit"]{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-weight:700;
  font-size:.98rem;
  padding:16px 28px !important;
  border:none !important;
  background: var(--signal) !important;
  color: var(--navy-900) !important;
  cursor:pointer;
  border-radius:0 !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform .15s ease, background .15s ease;
}
.fluentform .ff-btn:hover,
.fluentform button[type="submit"]:hover{
  background: var(--signal-dark) !important;
  transform: translateY(-2px);
}
/* Two-column layout for paired fields (Name/Company, Email/Phone) —
   in the Fluent Forms editor, set these fields' "Column Width" to 50%
   under each field's Advanced Options to get this side-by-side layout. */
.fluentform .ff-t-container{
  display:flex;
  flex-wrap:wrap;
  gap:0 18px;
}

/* ---------- WP core block compatibility ---------- */
.wp-block-columns{ display:flex; gap:2rem; }
.wp-block-column{ flex:1; }
.wp-block-buttons{ display:flex; gap:16px; flex-wrap:wrap; }
.wp-block-group{ padding:0; }
.alignwide, .alignfull{ max-width:1180px; margin-left:auto; margin-right:auto; }