/* ========================================
   CONVOKING4 BRAND CSS VARIABLES
   Updated: January 2026 - Deep Sapphire Edition
   ======================================== */
:root {
  /* Primary Brand Colors - Deep Sapphire Edition */
  --c4-deep-sapphire: #0F2847;
  --c4-brand-red: #A70200;
  
  /* Primary Colors */
  --c4-primary: #2563EB;
  --c4-primary-light: #3B82F6;
  --c4-primary-dark: #1D4ED8;
  --c4-navy: #1E3A5F;
  --c4-navy-dark: #0F1D2F;
  
  /* Six Adaptation Types Colors */
  --c4-survival: #DC2626;
  --c4-stable: #22C55E;
  --c4-improvement: #EAB308;
  --c4-success: #3B82F6;
  --c4-transformation: #8B5CF6;
  --c4-thriving: #14B8A6;
  
  /* Accent Colors */
  --c4-green: #10B981;
  --c4-green-light: #D1FAE5;
  --c4-amber: #F59E0B;
  --c4-amber-light: #FEF3C7;
  --c4-purple: #7C3AED;
  --c4-purple-light: #F5F3FF;
  --c4-red: #EF4444;
  --c4-red-light: #FEE2E2;
  
  /* Neutrals */
  --c4-white: #FFFFFF;
  --c4-text: #1E293B;
  --c4-text-muted: #64748B;
  --c4-text-light: #94A3B8;
  --c4-surface: #F8FAFC;
  --c4-muted: #F1F5F9;
  --c4-border: #E2E8F0;
  
  /* Shadows */
  --c4-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --c4-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --c4-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --c4-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.c4-btn-primary {
  background: var(--c4-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.c4-btn-primary:hover {
  background: var(--c4-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--c4-shadow-lg);
}

.c4-btn-white {
  background: var(--c4-white) !important;
  color: var(--c4-deep-sapphire) !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.c4-btn-white:hover {
  background: var(--c4-surface) !important;
  transform: translateY(-2px);
}

/* ========================================
   PHASE CARD COLORS (UADE)
   ======================================== */
.phase-understand { border-left: 4px solid var(--c4-primary); background: #EFF6FF; }
.phase-align { border-left: 4px solid var(--c4-green); background: #F0FDF4; }
.phase-decide { border-left: 4px solid var(--c4-amber); background: #FEF3C7; }
.phase-evolve { border-left: 4px solid var(--c4-purple); background: #F5F3FF; }
.phase-transform { border-left: 4px solid var(--c4-purple); background: #F5F3FF; }

/* ========================================
   SIX ADAPTATION TYPES
   ======================================== */
.adaptation-survival { background: linear-gradient(135deg, #DC2626, #EF4444); color: white; }
.adaptation-stable { background: linear-gradient(135deg, #16A34A, #22C55E); color: white; }
.adaptation-improvement { background: linear-gradient(135deg, #CA8A04, #EAB308); color: white; }
.adaptation-success { background: linear-gradient(135deg, #2563EB, #3B82F6); color: white; }
.adaptation-transformation { background: linear-gradient(135deg, #7C3AED, #8B5CF6); color: white; }
.adaptation-thriving { background: linear-gradient(135deg, #0D9488, #14B8A6); color: white; }

/* ========================================
   PRESS LINKS
   ======================================== */
.c4-press-link {
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--c4-border);
  border-radius: 8px;
  font-weight: 600;
  color: var(--c4-text-muted);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}
.c4-press-link:hover {
  border-color: var(--c4-primary);
  color: var(--c4-primary);
  transform: translateY(-2px);
}

/* ========================================
   AWARD TROPHY & DIFFERENTIATORS
   ======================================== */
.c4-trophy-img {
  max-width: 200px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.c4-diff-navy { background: var(--c4-navy); }
.c4-diff-sapphire { background: var(--c4-deep-sapphire); }
.c4-diff-blue { background: var(--c4-primary); }
.c4-diff-green { background: var(--c4-green); }

/* ========================================
   CONTACT PAGE - FORM SECTION
   Form ID: 6955
   ======================================== */

/* Form Container */
.c4-contact-form-section {
  background: var(--c4-white);
  padding: 40px;
  border-radius: 24px;
  box-shadow: var(--c4-shadow-xl);
  border: 1px solid var(--c4-border);
  max-width: 600px;
  margin: 0 auto;
}

.c4-contact-form-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c4-deep-sapphire);
  margin-bottom: 8px;
}

.c4-contact-form-section > p {
  font-size: 0.9375rem;
  color: var(--c4-text-muted);
  margin-bottom: 32px;
}

/* WPForms Container Reset */
.c4-contact-form-section .wpforms-container {
  margin: 0;
  padding: 0;
}

/* Form Field Labels */
.c4-contact-form-section .wpforms-field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c4-deep-sapphire);
  margin-bottom: 8px;
}

/* Required Asterisk - Brand Red */
.c4-contact-form-section .wpforms-required-label {
  color: var(--c4-brand-red);
}

/* All Input Fields */
.c4-contact-form-section .wpforms-field input[type="text"],
.c4-contact-form-section .wpforms-field input[type="email"],
.c4-contact-form-section .wpforms-field input[type="number"],
.c4-contact-form-section .wpforms-field textarea,
.c4-contact-form-section .wpforms-field select {
  padding: 14px 16px;
  border: 2px solid var(--c4-border);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--c4-surface);
  transition: all 0.2s ease;
  width: 100%;
}

/* Input Focus State */
.c4-contact-form-section .wpforms-field input[type="text"]:focus,
.c4-contact-form-section .wpforms-field input[type="email"]:focus,
.c4-contact-form-section .wpforms-field input[type="number"]:focus,
.c4-contact-form-section .wpforms-field textarea:focus,
.c4-contact-form-section .wpforms-field select:focus {
  outline: none;
  border-color: var(--c4-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: var(--c4-white);
}

/* Textarea */
.c4-contact-form-section .wpforms-field textarea {
  min-height: 140px;
  resize: vertical;
}

/* Dropdown Select */
.c4-contact-form-section .wpforms-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Name Fields Side by Side */
.c4-contact-form-section .wpforms-field-name .wpforms-field-row {
  display: flex;
  gap: 16px;
}

.c4-contact-form-section .wpforms-field-name .wpforms-field-row .wpforms-field-row-block {
  flex: 1;
}

/* Field Spacing */
.c4-contact-form-section .wpforms-field {
  margin-bottom: 20px;
}

/* ========================================
   CONSENT CHECKBOX STYLING
   ======================================== */
.c4-contact-form-section .wpforms-field-checkbox,
.c4-contact-form-section .wpforms-field-gdpr-checkbox {
  margin-bottom: 20px;
}

.c4-contact-form-section .wpforms-field-checkbox ul,
.c4-contact-form-section .wpforms-field-gdpr-checkbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c4-contact-form-section .wpforms-field-checkbox li,
.c4-contact-form-section .wpforms-field-gdpr-checkbox li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--c4-surface);
  border: 2px solid var(--c4-border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.c4-contact-form-section .wpforms-field-checkbox li:hover,
.c4-contact-form-section .wpforms-field-gdpr-checkbox li:hover {
  border-color: var(--c4-primary);
  background: rgba(37, 99, 235, 0.02);
}

.c4-contact-form-section .wpforms-field-checkbox input[type="checkbox"],
.c4-contact-form-section .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--c4-primary);
  flex-shrink: 0;
}

.c4-contact-form-section .wpforms-field-checkbox label,
.c4-contact-form-section .wpforms-field-gdpr-checkbox label {
  font-size: 0.875rem;
  color: var(--c4-text);
  cursor: pointer;
  line-height: 1.5;
}

/* ========================================
   CUSTOM CAPTCHA STYLING
   ======================================== */
.c4-contact-form-section .wpforms-field-captcha {
  margin-bottom: 24px;
}

.c4-contact-form-section .wpforms-field-captcha .wpforms-field-label {
  margin-bottom: 12px;
}

.c4-contact-form-section .wpforms-field-captcha .wpforms-captcha-question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--c4-surface);
  border: 2px solid var(--c4-border);
  border-radius: 12px;
}

.c4-contact-form-section .wpforms-field-captcha .wpforms-captcha-equation {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c4-deep-sapphire);
  white-space: nowrap;
}

.c4-contact-form-section .wpforms-field-captcha input[type="text"],
.c4-contact-form-section .wpforms-field-captcha input[type="number"] {
  width: 80px !important;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 10px 12px;
}

/* ========================================
   SUBMIT BUTTON
   ======================================== */
.c4-contact-form-section .wpforms-submit-container {
  margin-top: 24px;
}

.c4-contact-form-section .wpforms-submit {
  background: linear-gradient(135deg, var(--c4-primary) 0%, var(--c4-primary-dark) 100%) !important;
  color: var(--c4-white) !important;
  padding: 16px 32px !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  width: 100%;
}

.c4-contact-form-section .wpforms-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

/* ========================================
   FORM NOTES & MESSAGES
   ======================================== */

/* Privacy Note */
.c4-form-note {
  font-size: 0.8125rem;
  color: var(--c4-text-light);
  text-align: center;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Error Messages */
.c4-contact-form-section .wpforms-error {
  font-size: 0.8125rem;
  color: var(--c4-brand-red);
  margin-top: 4px;
}

.c4-contact-form-section .wpforms-field.wpforms-has-error input,
.c4-contact-form-section .wpforms-field.wpforms-has-error textarea,
.c4-contact-form-section .wpforms-field.wpforms-has-error select {
  border-color: var(--c4-brand-red);
}

.c4-contact-form-section .wpforms-field-checkbox.wpforms-has-error li,
.c4-contact-form-section .wpforms-field-gdpr-checkbox.wpforms-has-error li {
  border-color: var(--c4-brand-red);
}

/* Success Message */
.c4-contact-form-section .wpforms-confirmation-container-full {
  background: var(--c4-green-light);
  border: 1px solid var(--c4-green);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.c4-contact-form-section .wpforms-confirmation-container-full p {
  color: #065F46;
  font-weight: 500;
  margin: 0;
}

/* Placeholder Styling */
.c4-contact-form-section .wpforms-field input::placeholder,
.c4-contact-form-section .wpforms-field textarea::placeholder {
  color: var(--c4-text-light);
}

/* Sub-labels */
.c4-contact-form-section .wpforms-field-sublabel {
  font-size: 0.75rem;
  color: var(--c4-text-light);
  margin-top: 4px;
}

/* Description text under fields */
.c4-contact-form-section .wpforms-field-description {
  font-size: 0.8125rem;
  color: var(--c4-text-muted);
  margin-top: 6px;
}

/* ========================================
   CONTACT PAGE - INFO SECTION
   ======================================== */

.c4-contact-item {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 20px;
  background: var(--c4-surface);
  border-radius: 16px;
  border: 1px solid var(--c4-border);
  transition: all 0.2s ease;
}

.c4-contact-item:hover {
  border-color: var(--c4-primary);
  box-shadow: var(--c4-shadow-md);
  transform: translateY(-2px);
}

.c4-contact-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--c4-primary) 0%, var(--c4-primary-dark) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.c4-contact-item-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c4-deep-sapphire);
  margin: 0 0 4px 0;
}

.c4-contact-item-content p {
  font-size: 0.9375rem;
  color: var(--c4-text-muted);
  margin: 0;
}

/* Why Contact Box */
.c4-why-contact {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(135deg, var(--c4-deep-sapphire) 0%, var(--c4-navy) 100%);
  border-radius: 16px;
  color: white;
}

.c4-why-contact h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  margin: 0 0 16px 0;
}

.c4-why-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c4-why-contact li {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 0;
  padding-left: 32px;
  position: relative;
}

.c4-why-contact li::before {
  content: '✓';
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(16, 185, 129, 0.3);
  border-radius: 50%;
  font-size: 0.75rem;
  color: #10B981;
}

/* Social Links */
.c4-contact-social {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--c4-border);
}

.c4-contact-social h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c4-deep-sapphire);
  margin: 0 0 16px 0;
}

.c4-social-links {
  display: flex;
  gap: 12px;
}

.c4-social-link {
  width: 44px;
  height: 44px;
  background: var(--c4-deep-sapphire);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.c4-social-link:hover {
  background: var(--c4-primary);
  transform: translateY(-2px);
  color: #fff;
}

/* ========================================
   FAQ STYLES
   ======================================== */
.c4-faq-item {
  padding: 24px;
  background: var(--c4-white);
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--c4-border);
  transition: all 0.2s ease;
}

.c4-faq-item:hover {
  border-color: var(--c4-primary);
  box-shadow: var(--c4-shadow-md);
}

.c4-faq-question {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c4-deep-sapphire);
  margin-bottom: 12px;
}

.c4-faq-answer {
  font-size: 0.9375rem;
  color: var(--c4-text-muted);
  line-height: 1.7;
}

.c4-faq-answer a {
  color: var(--c4-primary);
  font-weight: 500;
}

.c4-faq-answer a:hover {
  text-decoration: underline;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */
@media (max-width: 600px) {
  .c4-contact-form-section {
    padding: 24px;
    border-radius: 16px;
  }
  
  .c4-contact-form-section .wpforms-field-name .wpforms-field-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .c4-contact-form-section .wpforms-field-captcha .wpforms-captcha-question {
    flex-wrap: wrap;
  }
}