/* ======================================================
   WorkflowAdvisors.nyc — v2.8  (2025‑07‑15 navbar & spacing)
   ====================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --slate-900:#0f172a;--slate-800:#1e293b;--slate-700:#334155;
  --slate-600:#475569;--slate-400:#94a3b8;--slate-200:#e2e8f0;
  --slate-50:#f8fafc;--cyan-400:#38bdf8;--cyan-300:#7dd3fc;
  --cyan-500:#0ea5e9;--radius:0.5rem;--shadow:0 2px 4px hsl(0 0% 0%/.15);
  --max-width:68rem;--gutter:clamp(1rem,4vw,2rem);
}

/* ---------- Global Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;background:var(--slate-900);color:var(--slate-50);overflow-x:hidden;}
img,svg{max-width:100%;display:block;}
a{color:var(--cyan-400);text-decoration:none;transition:color .2s;}
a:hover{color:var(--cyan-300);}

.hidden{display:none!important;}

/* ---------- Universal Content Container ---------- */
main>section:not(.hero),footer>.footer-inner,.contact-form-wrapper{
  max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter);}
  
/* ================================================= NAVBAR ================================================= */
header.navbar{
  position:fixed;inset:0 auto auto 0;width:100%;
  display:flex;align-items:center;gap:1.25rem;
  background:hsla(215,32%,17%,.95);backdrop-filter:saturate(180%) blur(8px);
  padding:0.25rem var(--gutter);min-height:48px;z-index:1000;
}

/* logo block now horizontal */
.logo{display:flex;align-items:center;gap:0.5rem;}
.logo img{height:28px;width:auto;}
.tagline{font-size:0.75rem;color:var(--slate-400);white-space:nowrap;}

nav{margin-left:auto;display:flex;gap:1rem;}
nav a{font-size:0.8rem;color:var(--slate-50);position:relative;padding:0.25rem 0;}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--cyan-400);transition:width .2s;}
nav a:hover::after{width:100%;}

/* ================================================= HERO ================================================= */
.hero{--overlay:hsla(215,32%,10%,.85);
  background:linear-gradient(var(--overlay),var(--overlay)),url("/images/hero-bg.jpg") center/cover fixed;
  padding-block:6rem 5rem;}
.hero .content{max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;}
.hero h1{font-size:clamp(2.5rem,5vw+1rem,4.5rem);font-weight:700;}
.hero p{font-size:1.0625rem;color:var(--slate-200);}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:0.65rem 1.25rem;border-radius:var(--radius);
  font-weight:600;font-size:0.95rem;white-space:nowrap;cursor:pointer;text-align:center;
  transition:transform .15s,box-shadow .15s;}
.btn-primary{background:linear-gradient(135deg,var(--cyan-400),var(--cyan-500));
  color:var(--slate-900);box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 8px hsl(0 0% 0%/.25);}

/* ================================================= TYPOGRAPHY & SPACING ================================================= */
section h2{font-size:1.75rem;margin:3.5rem 0 1rem;color:var(--slate-50);}
section h3{font-size:1.25rem;margin:2rem 0 0.75rem;color:var(--slate-200);}

/* Indent all lists (bullet & ordered) */
section ul,section ol{padding-left:1.25rem;margin-left:0;list-style-position:outside;}

/* ---------- Data Tables ---------- */
.table-wrapper{overflow-x:auto;margin-top:1.5rem;}
.table-wrapper table{width:100%;border-collapse:collapse;min-width:640px;background:var(--slate-800);}
.table-wrapper th,.table-wrapper td{border:1px solid var(--slate-700);padding:0.75rem;text-align:left;}
.table-wrapper th{background:var(--slate-700);color:var(--slate-50);font-weight:600;}
/* ---- Custom widths for first column ---- */
.benefits-table th:first-child,
.benefits-table td:first-child,
.services-table th:first-child,
.services-table td:first-child{
  width:50%;          /* adjust until you like the gap */
  padding-right:1.25rem; /* pushes the second col away */
  white-space:nowrap; /* keeps short labels on one line */
}

/* ================================================= WORKFLOW GALLERY ================================================= */
.workflow-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;margin-top:1.5rem;}
.workflow-gallery figure{background:var(--slate-800);border:1px solid var(--slate-700);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.workflow-gallery img{width:100%;}
.workflow-gallery figcaption{padding:0.75rem;font-size:0.875rem;color:var(--slate-200);
  text-align:center;}

/* ================================================= GRID OVERLAY ================================================= */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(to right,hsla(0,0%,100%,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,hsla(0,0%,100%,.05) 1px,transparent 1px);
  background-size:80px 80px;animation:scrollGrid 40s linear infinite;}
@keyframes scrollGrid{from{background-position:0 0;}to{background-position:80px 80px;}}

/* ================================================= CONTACT FORM & FOOTER ================================================= */
.contact-form-wrapper{padding-block:3.5rem 4rem;}
.contact-form{display:flex;flex-direction:column;gap:1rem;}
.contact-field{display:flex;flex-direction:column;gap:0.25rem;}
label{font-size:0.875rem;color:var(--slate-200);}
input[type=text],input[type=email],textarea{
  padding:0.75rem;border:1px solid var(--slate-600);border-radius:var(--radius);
  font-size:1rem;background:var(--slate-800);color:var(--slate-50);}
input:focus,textarea:focus{outline:2px solid var(--cyan-400);outline-offset:2px;}
textarea{min-height:8rem;resize:vertical;}

footer{background:var(--slate-800);padding-block:2rem;}
.footer-inner{font-size:0.8125rem;text-align:center;color:var(--slate-400);}

/* ================================================= MEDIA QUERIES ================================================= */
@media(max-width:40em){
  nav{
   gap:0.75rem;
   flex-wrap:wrap;
   }
   header.navbar{ flex-wrap:wrap; }
   header.navbar nav{
    flex:1 1 100%;          /* <-- NEW */
    margin-left:0 !important;
    justify-content:center !important;
  }
   nav a{ margin:0 0.5rem; }
   header.navbar nav{ row-gap:2px; }
   .tagline{
      display:none;
   }
   nav a{
      font-size:0.75rem;
   }
  .hero{padding-block:5rem 4rem;}
  .btn{width:100%;}
  .contact-form{gap:0.75rem;}
   /* let the header itself wrap */
  header.navbar{ flex-wrap:wrap; }

  /* full‑width nav, centred, no sideways overflow */
  header.navbar nav{
    flex:1 1 100%;
    margin-left:0 !important;
    justify-content:center !important;
    gap:0.75rem;          /* the ONLY horizontal spacing */
    row-gap:2px;          /* tiny vertical gap between the two rows */
    max-width:100%;       /* clamps width so it never exceeds viewport */
    overflow:hidden;      /* hides any accidental excess */
  }

  /* link reset — kill margins that were causing the overshoot */
  header.navbar nav a{
    margin:0 !important;
    font-size:0.75rem;
  }

  /* hide tagline to save space */
  .tagline{ display:none !important; }

  /* give hero a little more top‑padding so it's safely below the wrapped header */
  .hero{ padding-top:8rem; }
}

/* extra space between the two intro paragraphs */
#about p + p{
  margin-top:1rem;   /* adjust ↑ if you want more or less */
}

/* Belt‑and‑suspenders mobile overrides */
@media(max-width:40em){
  header.navbar .tagline{
    display:none !important;     /* hides tagline on small screens */
  }
  header.navbar nav{
    flex-wrap:wrap !important;   /* lets nav links flow onto 2nd line */
  }
   header.navbar nav{
  max-width:100%;      /* clamps its width to the viewport   */
  overflow-x:hidden;   /* anything wider is clipped, not scrolled */
}
   .hero{
  padding-top:8rem;    /* bump from 6rem → 8rem (adjust to taste) */
}
}

/* ======================================================
   MOBILE NAV ALIGNMENT  (≤ 640 px / 40 em)
   ====================================================== */
@media(max-width:40em){

  /* A — center the block of links */
  header.navbar nav{
    margin-left:0 !important;     /* override the desktop 'auto' push */
    justify-content:center !important;
  }

  /* B — add 2 px vertical gap between the two wrapped rows */
  header.navbar nav a{
    margin-bottom:2px;            /* change or remove to taste */
  }

}