/* =============================================================
   CYTEWORKS — GLOBAL STYLESHEET
   Mobile-first. Zero !important. Clean cascade.
   Design tokens mirror theme.json presets.
   ============================================================= */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
   All custom properties defined here once.
   Components reference these — never hardcode
   hex values inside component selectors.
   ───────────────────────────────────────────── */

:root {
  /* Color */
  --cw-navy:          #0C1828;
  --cw-primary:       #0068B6;
  --cw-primary-mid:   #3B9BE8;
  --cw-primary-light: #E6F2FB;
  --cw-primary-dark:  #00467A;
  --cw-white:         #FFFFFF;
  --cw-off-white:     #F4F6F9;
  --cw-surface:       #FFFFFF;
  --cw-surface-alt:   #F8FAFC;
  --cw-text:          #1A202C;
  --cw-muted:         #374151;
  --cw-border:        #E2E8F0;

  /* Typography */
  --cw-font-heading:     'Barlow Condensed', sans-serif;
  --cw-font-body:        'DM Sans', sans-serif;
  --cw-weight-light:     300;
  --cw-weight-regular:   400;
  --cw-weight-medium:    500;
  --cw-weight-semibold:  600;
  --cw-weight-bold:      700;
  --cw-weight-extrabold: 800;

  /* Spacing */
  --cw-space-2xs:    4px;
  --cw-space-xs:     8px;
  --cw-space-sm:     16px;
  --cw-space-md:     24px;
  --cw-space-lg:     32px;
  --cw-space-xl:     48px;
  --cw-space-2xl:    64px;
  --cw-space-section: 80px;

  /* Layout */
  --cw-container:    1200px;
  --cw-container-sm: 800px;
  --cw-gutter:       20px;

  /* Border radius */
  --cw-radius-sm:   4px;
  --cw-radius-md:   8px;
  --cw-radius-lg:   16px;
  --cw-radius-pill: 100px;

  /* Shadows */
  --cw-shadow-card:    0 2px 12px rgba(0,0,0,0.08);
  --cw-shadow-lifted:  0 4px 24px rgba(0,0,0,0.12);
  --cw-shadow-overlay: 0 8px 32px rgba(0,0,0,0.24);

  /* Transitions */
  --cw-ease:    0.2s ease;
  --cw-ease-md: 0.3s ease;

  /* Z-index scale */
  --cw-z-header:  1000;
  --cw-z-overlay: 9000;
  --cw-z-modal:   9100;

  /* Line height */
  --cw-leading-tight:   1.1;
  --cw-leading-snug:    1.25;
  --cw-leading-normal:  1.5;
  --cw-leading-relaxed: 1.75;

  /* Letter spacing */
  --cw-tracking-eyebrow: 1.5px;
  --cw-tracking-wide:    0.5px;
}

/* Desktop token adjustments */
@media (min-width: 960px) {
  :root {
    --cw-gutter: 40px;
  }
}


/* ─────────────────────────────────────────────
   2. RESET + BASE
   Minimal opinionated reset. Not a full
   normalize — just the decisions we care about.
   ───────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:             18px;
  scroll-behavior:       smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust:      100%;
}

body {
  font-family:        var(--cw-font-body);
  font-size:          1rem;
  font-weight:        var(--cw-weight-regular);
  line-height:        var(--cw-leading-relaxed);
  color:              var(--cw-text);
  background-color:   var(--cw-white);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:         hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--cw-font-heading);
  font-weight:  var(--cw-weight-extrabold);
  line-height:  var(--cw-leading-tight);
  color:        inherit;
  text-wrap:    balance;
}

h1 { font-size: clamp(2rem, 6vw, 3.75rem); text-transform: uppercase; }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); text-transform: uppercase; }
h3 { font-size: clamp(1.25rem, 3vw, 1.875rem); text-transform: uppercase; }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* Paragraphs */
p {
  font-size:   1rem;
  line-height: var(--cw-leading-relaxed);
  color:       inherit;
}

p + p { margin-top: var(--cw-space-sm); }

/* Links */
a {
  color:           var(--cw-primary);
  text-decoration: none;
  transition:      color var(--cw-ease);
}

a:hover { color: var(--cw-primary-dark); }
a:focus-visible {
  outline:        2px solid var(--cw-primary);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Lists */
ul, ol { list-style: none; }

/* Images */
img, video, svg {
  max-width: 100%;
  height:    auto;
  display:   block;
}

/* Form elements */
button, input, textarea, select {
  font-family: inherit;
  font-size:   inherit;
}

button { cursor: pointer; }

/* Skip link */
.skip-link {
  position:  absolute;
  top:       -100%;
  left:      var(--cw-space-sm);
  z-index:   var(--cw-z-overlay);
  background: var(--cw-primary);
  color:     var(--cw-white);
  padding:   var(--cw-space-xs) var(--cw-space-sm);
  border-radius: var(--cw-radius-sm);
  font-size: 0.875rem;
  font-weight: var(--cw-weight-semibold);
}

.skip-link:focus { top: var(--cw-space-xs); }


/* ─────────────────────────────────────────────
   3. LAYOUT UTILITIES
   ───────────────────────────────────────────── */

/* Constrained container */
.cw-container {
  max-width:    var(--cw-container);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--cw-gutter);
  padding-right: var(--cw-gutter);
  width: 100%;
}

.cw-container--sm {
  max-width: var(--cw-container-sm);
}

/* Section padding */
.cw-section {
  padding-top:    var(--cw-space-section);
  padding-bottom: var(--cw-space-section);
}

/* Two-column prose + sidebar layout */
.cw-page-body {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--cw-space-2xl);
  align-items:           start;
}

@media (min-width: 960px) {
  .cw-page-body {
    grid-template-columns: 1fr 360px;
  }
}

/* Flex utility classes */
.cw-flex         { display: flex; }
.cw-flex-col     { flex-direction: column; }
.cw-items-center { align-items: center; }
.cw-justify-between { justify-content: space-between; }
.cw-gap-sm       { gap: var(--cw-space-sm); }
.cw-gap-md       { gap: var(--cw-space-md); }
.cw-gap-lg       { gap: var(--cw-space-lg); }

/* Screen reader only */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0,0,0,0);
  white-space: nowrap;
  border:   0;
}


/* ─────────────────────────────────────────────
   4. TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────── */

.cw-eyebrow {
  font-family:    var(--cw-font-body);
  font-size:      0.75rem;
  font-weight:    var(--cw-weight-semibold);
  letter-spacing: var(--cw-tracking-eyebrow);
  text-transform: uppercase;
  color:          var(--cw-primary-mid);
  margin-bottom:  var(--cw-space-xs);
}

.cw-eyebrow--light {
  color: rgba(255,255,255,0.7);
}

.cw-lead {
  font-size:   1.125rem;
  font-weight: var(--cw-weight-light);
  line-height: var(--cw-leading-relaxed);
  color:       var(--cw-muted);
}

.cw-lead--light {
  color: rgba(255,255,255,0.80);
}

.cw-text-muted  { color: var(--cw-muted); }
.cw-text-white  { color: var(--cw-white); }
.cw-text-primary { color: var(--cw-primary); }

/* Body text colors on dark backgrounds */
.on-dark p,
.on-dark li {
  color: rgba(255,255,255,0.85);
}


/* ─────────────────────────────────────────────
   5. BUTTON SYSTEM
   No !important. Clean specificity.
   Minimum 44px height for mobile tap targets.
   ───────────────────────────────────────────── */

.cw-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--cw-space-xs);
  min-height:      48px;
  padding:         0 var(--cw-space-md);
  border-radius:   var(--cw-radius-sm);
  font-family:     var(--cw-font-body);
  font-size:       0.875rem;
  font-weight:     var(--cw-weight-semibold);
  letter-spacing:  var(--cw-tracking-wide);
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  border:          2px solid transparent;
  transition:      background var(--cw-ease), color var(--cw-ease), border-color var(--cw-ease), box-shadow var(--cw-ease);
}

.cw-btn:focus-visible {
  outline:        2px solid var(--cw-primary);
  outline-offset: 2px;
}

/* Primary — solid blue */
.cw-btn--primary {
  background:   var(--cw-primary);
  color:        var(--cw-white);
  border-color: var(--cw-primary);
}

.cw-btn--primary:hover,
.cw-btn--primary:focus {
  background:   var(--cw-primary-dark);
  border-color: var(--cw-primary-dark);
  color:        var(--cw-white);
}

/* Secondary — outline */
.cw-btn--secondary {
  background:   transparent;
  color:        var(--cw-white);
  border-color: rgba(255,255,255,0.5);
}

.cw-btn--secondary:hover,
.cw-btn--secondary:focus {
  border-color: var(--cw-white);
  color:        var(--cw-white);
  background:   rgba(255,255,255,0.08);
}

/* Secondary on light backgrounds */
.cw-btn--secondary-dark {
  background:   transparent;
  color:        var(--cw-primary);
  border-color: var(--cw-primary);
}

.cw-btn--secondary-dark:hover {
  background:   var(--cw-primary);
  color:        var(--cw-white);
}

/* Ghost — text only */
.cw-btn--ghost {
  background:   transparent;
  color:        var(--cw-primary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.cw-btn--ghost:hover { color: var(--cw-primary-dark); }

/* Full width */
.cw-btn--full { width: 100%; }

/* Button group */
.cw-btn-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--cw-space-sm);
  align-items: center;
}


/* ─────────────────────────────────────────────
   6. FORM ELEMENTS (Gravity Forms integration)
   Gravity Forms-specific styles live in
   /blocks/gravity-form/style.css but the
   base input styles are here.
   ───────────────────────────────────────────── */

.cw-input,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
  display:          block;
  width:            100%;
  min-height:       48px;
  padding:          12px 14px;
  background:       var(--cw-surface-alt);
  border:           1px solid var(--cw-border);
  border-radius:    var(--cw-radius-sm);
  font-family:      var(--cw-font-body);
  font-size:        1rem;
  color:            var(--cw-text);
  line-height:      1.5;
  transition:       border-color var(--cw-ease), box-shadow var(--cw-ease);
  outline:          none;
  appearance:       none;
  -webkit-appearance: none;
}

.cw-input:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--cw-primary);
  box-shadow:   0 0 0 3px rgba(0,104,182,0.12);
}

.gform_wrapper textarea {
  min-height: 120px;
  resize:     vertical;
}

/* GF label */
.gform_wrapper .gfield_label,
.gform_wrapper label {
  display:        block;
  font-size:      0.75rem;
  font-weight:    var(--cw-weight-semibold);
  letter-spacing: var(--cw-tracking-eyebrow);
  text-transform: uppercase;
  color:          var(--cw-muted);
  margin-bottom:  6px;
}

/* GF submit */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper input.gform_button[type="submit"] {
  display:         flex;
  width:           100%;
  min-height:      48px;
  padding:         0 var(--cw-space-md);
  background:      var(--cw-primary);
  color:           var(--cw-white);
  border:          none;
  border-radius:   var(--cw-radius-sm);
  font-family:     var(--cw-font-body);
  font-size:       0.875rem;
  font-weight:     var(--cw-weight-semibold);
  letter-spacing:  var(--cw-tracking-wide);
  cursor:          pointer;
  transition:      background var(--cw-ease);
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper input.gform_button[type="submit"]:hover {
  background: var(--cw-primary-dark);
}

/* GF field spacing */
.gform_wrapper .gfield { margin-bottom: var(--cw-space-sm); }

/* GF validation */
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  font-size:   0.8125rem;
  color:       #DC2626;
  margin-top:  4px;
}

/* GF confirmation */
.gform_confirmation_wrapper {
  background:    var(--cw-primary-light);
  border-left:   3px solid var(--cw-primary);
  border-radius: 0 var(--cw-radius-sm) var(--cw-radius-sm) 0;
  padding:       var(--cw-space-md);
  font-size:     0.9375rem;
  color:         var(--cw-primary-dark);
}


/* ─────────────────────────────────────────────
   7. CARD SYSTEM
   ───────────────────────────────────────────── */

.cw-card {
  background:    var(--cw-surface);
  border:        1px solid var(--cw-border);
  border-radius: var(--cw-radius-md);
  padding:       var(--cw-space-lg);
  transition:    border-color var(--cw-ease), box-shadow var(--cw-ease);
}

.cw-card--hover:hover {
  border-color: var(--cw-primary);
  box-shadow:   var(--cw-shadow-card);
}

.cw-card--dark {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}


/* ─────────────────────────────────────────────
   8. AREA PILL SYSTEM
   ───────────────────────────────────────────── */

.cw-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.cw-pill {
  display:         inline-block;
  background:      var(--cw-primary-light);
  border:          1px solid var(--cw-primary);
  border-radius:   var(--cw-radius-pill);
  color:           var(--cw-primary);
  font-size:       0.8125rem;
  font-weight:     var(--cw-weight-medium);
  padding:         6px 14px;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--cw-ease), color var(--cw-ease);
}

.cw-pill:hover {
  background: var(--cw-primary);
  color:      var(--cw-white);
}


/* ─────────────────────────────────────────────
   9. FAQ ACCORDION
   ───────────────────────────────────────────── */

.cw-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.cw-faq-item {
  border:        1px solid var(--cw-border);
  border-radius: var(--cw-radius-sm);
  overflow:      hidden;
  background:    var(--cw-surface);
}

.cw-faq-q {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--cw-space-sm);
  padding:         var(--cw-space-md) var(--cw-space-md);
  background:      transparent;
  border:          none;
  font-family:     var(--cw-font-body);
  font-size:       1rem;
  font-weight:     var(--cw-weight-semibold);
  color:           var(--cw-text);
  text-align:      left;
  cursor:          pointer;
  transition:      background var(--cw-ease), color var(--cw-ease);
  min-height:      56px;
}

.cw-faq-q:hover { background: var(--cw-surface-alt); }

.cw-faq-q svg {
  flex-shrink: 0;
  width:  20px;
  height: 20px;
  color:  var(--cw-primary);
  transition: transform var(--cw-ease-md);
}

.cw-faq-item.is-open .cw-faq-q svg {
  transform: rotate(180deg);
}

.cw-faq-a {
  display:     none;
  padding:     0 var(--cw-space-md) var(--cw-space-md);
  font-size:   0.9375rem;
  line-height: var(--cw-leading-relaxed);
  color:       var(--cw-muted);
}

.cw-faq-item.is-open .cw-faq-a {
  display: block;
}


/* ─────────────────────────────────────────────
   10. BREADCRUMB
   ───────────────────────────────────────────── */

.cw-breadcrumb {
  font-size:   0.8125rem;
  color:       rgba(255,255,255,0.55);
  margin-bottom: var(--cw-space-sm);
}

.cw-breadcrumb a        { color: rgba(255,255,255,0.55); }
.cw-breadcrumb a:hover  { color: rgba(255,255,255,0.9); }
.cw-breadcrumb .sep     { margin: 0 6px; opacity: 0.4; }
.cw-breadcrumb .current { color: rgba(255,255,255,0.85); }


/* ─────────────────────────────────────────────
   11. STAT NUMBER DISPLAY
   ───────────────────────────────────────────── */

.cw-stat-num {
  font-family:  var(--cw-font-heading);
  font-weight:  var(--cw-weight-extrabold);
  line-height:  1;
  color:        var(--cw-primary);
}

.cw-stat-num sup,
.cw-stat-num sub {
  font-size:      0.45em;
  font-weight:    var(--cw-weight-bold);
  vertical-align: super;
}

.cw-stat-label {
  font-size:      0.75rem;
  font-weight:    var(--cw-weight-semibold);
  letter-spacing: var(--cw-tracking-eyebrow);
  text-transform: uppercase;
  color:          var(--cw-muted);
}


/* ─────────────────────────────────────────────
   12. WORDPRESS BLOCK OVERRIDES
   Minimal overrides to fix FSE defaults.
   ───────────────────────────────────────────── */

/* Remove default block margin */
.wp-site-blocks > * { margin: 0; }

/* Post content area */
.entry-content > * + * { margin-top: var(--cw-space-md); }

/* FSE template alignment */
.wp-block-template-part { display: contents; }

/* Gravity Forms: reset WP block margins */
.wp-block-gravityforms-form { margin: 0; }


/* ─────────────────────────────────────────────
   13. PRINT
   ───────────────────────────────────────────── */

@media print {
  .site-header,
  .site-footer,
  .cw-btn,
  .hamburger { display: none; }
  body { font-size: 12pt; color: #000; }
}