/*
Theme Name: Workitecture
Theme URI: https://workitecture.ai
Author: HR Data Labs LLC
Author URI: https://hrdatalabs.com
Description: Marketing theme for Workitecture.ai, built to match the shared HR Data Labs design system used across hrdatalabs.com, hrdatalabs.ai, and countycompsurvey.com. Implements the hero / stats bar / capability cards / persona grid / footer pattern with Workitecture's product content.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: workitecture
*/

/* -------------------------------------------------
   0. Design tokens
------------------------------------------------- */
:root{
  --wa-navy: #0C447C;
  --wa-navy-dark: #042C53;
  --wa-navy-light: #E6F1FB;
  --wa-green: #3B6D11;
  --wa-green-light: #EAF3DE;
  --wa-ink: #1F2328;
  --wa-gray: #5F5E5A;
  --wa-gray-light: #F1EFE8;
  --wa-border: #E1DFD8;
  --wa-white: #FFFFFF;
  --wa-radius-card: 12px;
  --wa-radius-btn: 8px;
  --wa-max: 1180px;
  --wa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}

/* -------------------------------------------------
   1. Reset / base
------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--wa-font);
  color: var(--wa-ink);
  background: var(--wa-white);
  font-size: 16px;
  line-height: 1.6;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--wa-navy); text-decoration: none; }
a:hover{ text-decoration: underline; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ margin: 0 0 0.5em; font-weight: 600; line-height: 1.25; color: var(--wa-ink); }
p{ margin: 0 0 1em; }

.wa-container{
  max-width: var(--wa-max);
  margin: 0 auto;
  padding: 0 24px;
}

.wa-eyebrow{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wa-navy);
  margin-bottom: 14px;
  display: block;
}

.wa-section{ padding: 64px 0; }
.wa-section--tight{ padding: 40px 0; }
.wa-section-title{ font-size: 28px; margin-bottom: 12px; }
.wa-section-lead{ color: var(--wa-gray); max-width: 640px; margin-bottom: 36px; font-size: 17px; }
.wa-center{ text-align: center; }

/* -------------------------------------------------
   2. Buttons
------------------------------------------------- */
.wa-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--wa-radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.wa-btn:hover{ text-decoration: none; transform: translateY(-1px); }
.wa-btn--primary{ background: var(--wa-navy); color: #fff; }
.wa-btn--primary:hover{ background: var(--wa-navy-dark); color: #fff; }
.wa-btn--secondary{ background: transparent; color: var(--wa-ink); border-color: var(--wa-border); }
.wa-btn--secondary:hover{ border-color: var(--wa-navy); color: var(--wa-navy); }
.wa-btn--on-dark{ background: #fff; color: var(--wa-navy); }
.wa-btn--on-dark-outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

/* -------------------------------------------------
   3. Header
------------------------------------------------- */
.wa-header{
  border-bottom: 1px solid var(--wa-border);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  z-index: 500;
}
.wa-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--wa-max);
  margin: 0 auto;
  gap: 24px;
}
.wa-logo{ display: flex; align-items: center; gap: 10px; }
.wa-logo img{ max-height: 36px; width: auto; }
.wa-logo__text{ display: flex; flex-direction: column; line-height: 1.15; }
.wa-logo__text strong{ font-size: 16px; }
.wa-logo__text span{ font-size: 11px; color: var(--wa-gray); }

.wa-nav{ display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.wa-nav ul{ display: flex; gap: 28px; }
.wa-nav a{ color: var(--wa-ink); font-size: 14.5px; font-weight: 500; }
.wa-nav a:hover{ color: var(--wa-navy); }
.wa-nav .menu-item-has-children{ position: relative; }
.wa-nav .sub-menu{
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-card);
  padding: 10px;
  min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.wa-nav .menu-item-has-children:hover .sub-menu{ display: block; }
.wa-nav .sub-menu li a{ display: block; padding: 8px 10px; border-radius: 6px; }
.wa-nav .sub-menu li a:hover{ background: var(--wa-navy-light); text-decoration: none; }

.wa-menu-toggle{ display: none; background: none; border: none; font-size: 24px; cursor: pointer; }

@media (max-width: 900px){
  .wa-nav{ display: none; }
  .wa-menu-toggle{ display: block; }
  .wa-header--open .wa-nav{
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--wa-border); padding: 16px 24px; gap: 12px;
  }
  .wa-header--open .wa-nav ul{ flex-direction: column; gap: 10px; }
  .wa-header--open .wa-nav .sub-menu{ position: static; border: none; box-shadow: none; padding: 4px 0 4px 12px; display: block; }
}

/* -------------------------------------------------
   4. Hero
------------------------------------------------- */
.wa-hero{ padding: 64px 0 48px; background: linear-gradient(180deg, var(--wa-navy-light) 0%, #fff 100%); }
.wa-hero__grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.wa-hero h1{ font-size: 42px; line-height: 1.15; max-width: 620px; }
.wa-hero__sub{ font-size: 18px; color: var(--wa-gray); max-width: 540px; margin-bottom: 28px; }
.wa-hero__ctas{ display: flex; gap: 14px; flex-wrap: wrap; }
.wa-hero__media img{ border-radius: var(--wa-radius-card); border: 1px solid var(--wa-border); }
@media (max-width: 900px){
  .wa-hero__grid{ grid-template-columns: 1fr; }
  .wa-hero h1{ font-size: 32px; }
}

/* -------------------------------------------------
   5. Stats bar
------------------------------------------------- */
.wa-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--wa-border); border-bottom: 1px solid var(--wa-border);
  background: #fff;
}
.wa-stats__item{ text-align: center; padding: 28px 16px; border-left: 1px solid var(--wa-border); }
.wa-stats__item:first-child{ border-left: none; }
.wa-stats__num{ font-size: 26px; font-weight: 700; color: var(--wa-navy); }
.wa-stats__label{ font-size: 12.5px; color: var(--wa-gray); margin-top: 4px; }
@media (max-width: 700px){
  .wa-stats{ grid-template-columns: repeat(2, 1fr); }
  .wa-stats__item:nth-child(3){ border-left: none; }
}

/* -------------------------------------------------
   6. Card grids
------------------------------------------------- */
.wa-grid{ display: grid; gap: 20px; }
.wa-grid--3{ grid-template-columns: repeat(3, 1fr); }
.wa-grid--4{ grid-template-columns: repeat(4, 1fr); }
.wa-grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){
  .wa-grid--3, .wa-grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .wa-grid--2, .wa-grid--3, .wa-grid--4{ grid-template-columns: 1fr; }
}

.wa-card{
  background: #fff;
  border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-card);
  padding: 24px;
}
.wa-card--muted{ background: var(--wa-gray-light); border: none; }
.wa-card__icon{ font-size: 26px; margin-bottom: 14px; display: block; }
.wa-card__eyebrow{ font-size: 12px; color: var(--wa-gray); font-weight: 700; letter-spacing: .03em; }
.wa-card h3{ font-size: 17px; margin: 6px 0 8px; }
.wa-card p{ font-size: 14.5px; color: var(--wa-gray); margin: 0; }

.wa-section--alt{ background: var(--wa-gray-light); }

/* -------------------------------------------------
   7. How it works
------------------------------------------------- */
.wa-steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.wa-steps__num{
  width: 36px; height: 36px; border-radius: 50%; background: var(--wa-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 12px;
}
.wa-steps p{ font-size: 14.5px; color: var(--wa-gray); }
@media (max-width: 700px){ .wa-steps{ grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------
   8. Persona grid
------------------------------------------------- */
.wa-persona{ text-align: left; }
.wa-persona .wa-card__icon{ color: var(--wa-navy); }

/* -------------------------------------------------
   9. CTA band
------------------------------------------------- */
.wa-cta-band{ background: var(--wa-navy); color: #fff; padding: 56px 0; text-align: center; }
.wa-cta-band h2{ color: #fff; font-size: 28px; }
.wa-cta-band p{ color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto 24px; }
.wa-cta-band__ctas{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------
   10. Footer
------------------------------------------------- */
.wa-footer{ background: #fff; border-top: 1px solid var(--wa-border); padding: 56px 0 24px; }
.wa-footer__top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.wa-footer__brand p{ color: var(--wa-gray); font-size: 14px; max-width: 280px; }
.wa-footer__brand a.wa-footer__parent{ font-weight: 600; color: var(--wa-navy); }
.wa-footer h4{ font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-gray); margin-bottom: 14px; }
.wa-footer ul li{ margin-bottom: 10px; }
.wa-footer ul li a{ color: var(--wa-ink); font-size: 14.5px; }
.wa-footer ul li a:hover{ color: var(--wa-navy); }
.wa-footer__bottom{
  border-top: 1px solid var(--wa-border);
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--wa-gray);
}
.wa-footer__bottom ul{ display: flex; gap: 18px; }
@media (max-width: 900px){
  .wa-footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .wa-footer__top{ grid-template-columns: 1fr; }
}

/* -------------------------------------------------
   11. Generic page / contact form
------------------------------------------------- */
.wa-page-header{ background: var(--wa-navy-light); padding: 48px 0; }
.wa-page-header h1{ font-size: 34px; margin: 0; }
.wa-page-content{ padding: 56px 0; max-width: 760px; margin: 0 auto; }
.wa-page-content img{ border-radius: var(--wa-radius-card); }

.wa-form{ max-width: 560px; }
.wa-form label{ display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.wa-form input[type=text], .wa-form input[type=email], .wa-form textarea{
  width: 100%; padding: 12px 14px; border: 1px solid var(--wa-border); border-radius: var(--wa-radius-btn);
  font-family: var(--wa-font); font-size: 15px; margin-bottom: 18px;
}
.wa-form textarea{ min-height: 120px; resize: vertical; }
.wa-form .wa-form__consent{ display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--wa-gray); margin-bottom: 18px; }
.wa-form .wa-form__consent input{ margin-top: 3px; }
.wa-form-notice{ padding: 14px 16px; border-radius: var(--wa-radius-btn); margin-bottom: 20px; font-size: 14.5px; }
.wa-form-notice--success{ background: var(--wa-green-light); color: var(--wa-green); }
.wa-form-notice--error{ background: #FCEBEB; color: #A32D2D; }