/* =============================================================================
   PAGES — shared page banner + about/contact layouts
   Conditionally loaded on is_page() via inc/setup.php
   All values reference tokens from style.css :root
   ============================================================================= */


/* =============================================================================
   PAGE BANNER (shared by About and Contact)
   ============================================================================= */

/* Tinted light — matches .archive-header; the newsletter strip is the
   site's single intentional dark section (brand v4). */
.page-banner {
  background: var(--mfc-bg-secondary);
  padding: var(--mfc-space-16) 0;
  border-bottom: 0.5px solid var(--mfc-border);
}

.page-banner .eyebrow {
  display: block;
  margin-bottom: var(--mfc-space-3);
}

.page-banner__title {
  font-size: var(--mfc-text-5xl);
  font-weight: 800;
  color: var(--mfc-text);
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin: 0 0 var(--mfc-space-4);
}

.page-banner__subtitle {
  font-size: var(--mfc-text-xl);
  color: var(--mfc-text-secondary);
  max-width: 560px;
  line-height: 1.5;
  margin: 0;
}


/* =============================================================================
   ABOUT PAGE — story section
   ============================================================================= */

.about-story__inner {
  max-width: var(--mfc-content-width);
}

.about-story__headline {
  font-size: var(--mfc-text-3xl);
  font-weight: 800;
  color: var(--mfc-text);
  letter-spacing: -0.02em;
  margin: 0 0 var(--mfc-space-6);
}


/* =============================================================================
   ABOUT PAGE — values section
   ============================================================================= */

.about-values__heading {
  font-size: var(--mfc-text-3xl);
  font-weight: 800;
  color: var(--mfc-text);
  letter-spacing: -0.02em;
  margin: 0 0 var(--mfc-space-10);
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mfc-space-6);
}

.about-value-card {
  background: var(--mfc-bg);
  border: 1px solid var(--mfc-border);
  border-radius: var(--mfc-radius-lg);
  padding: var(--mfc-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--mfc-space-3);
}

.about-value-card__num {
  font-size: var(--mfc-text-sm);
  font-weight: 800;
  color: var(--mfc-electric);
  letter-spacing: 0.06em;
  line-height: 1;
}

.about-value-card__title {
  font-size: var(--mfc-text-xl);
  font-weight: 700;
  color: var(--mfc-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.about-value-card__body {
  font-size: var(--mfc-text-base);
  color: var(--mfc-text-secondary);
  line-height: 1.65;
  margin: 0;
}


/* =============================================================================
   CONTACT PAGE — layout
   ============================================================================= */

.contact-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--mfc-space-16);
  align-items: start;
}

/* Empty state when form ID is not set */
.contact-form-placeholder {
  padding: var(--mfc-space-12) var(--mfc-space-8);
  border: 1.5px dashed var(--mfc-border-strong);
  border-radius: var(--mfc-radius-lg);
  text-align: center;
  color: var(--mfc-text-tertiary);
  font-size: var(--mfc-text-sm);
}

/* Sidebar */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--mfc-space-6);
  padding-top: var(--mfc-space-1);
}

.contact-info__heading {
  font-size: var(--mfc-text-xl);
  font-weight: 700;
  color: var(--mfc-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.contact-info__email {
  display: inline-flex;
  align-items: center;
  font-size: var(--mfc-text-base);
  font-weight: 600;
  color: var(--mfc-forest);
  text-decoration: none;
  word-break: break-all;
  transition: color var(--mfc-transition);
}

.contact-info__email:hover {
  color: var(--mfc-pop);
}

.contact-info__prose {
  border-top: 0.5px solid var(--mfc-border);
  padding-top: var(--mfc-space-6);
}


/* =============================================================================
   SOCIAL LINKS
   ============================================================================= */

.social-links {
  display: flex;
  flex-direction: column;
  gap: var(--mfc-space-2);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mfc-space-3);
  padding: var(--mfc-space-3) var(--mfc-space-4);
  font-size: var(--mfc-text-sm);
  font-weight: 600;
  color: var(--mfc-text-secondary);
  text-decoration: none;
  border: 1.5px solid var(--mfc-border);
  border-radius: var(--mfc-radius-md);
  transition:
    color var(--mfc-transition),
    border-color var(--mfc-transition),
    background-color var(--mfc-transition);
}

.social-link:hover {
  color: var(--mfc-deep);
  border-color: var(--mfc-forest);
  background: var(--mfc-bg-secondary);
}

.social-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--mfc-forest);
}


/* =============================================================================
   WPFORMS OVERRIDES
   Makes WPForms fields match the Electric Forest design system.
   ============================================================================= */

.wpforms-form .wpforms-field input[type="text"],
.wpforms-form .wpforms-field input[type="email"],
.wpforms-form .wpforms-field input[type="tel"],
.wpforms-form .wpforms-field input[type="url"],
.wpforms-form .wpforms-field textarea,
.wpforms-form .wpforms-field select {
  border: 1.5px solid var(--mfc-border-strong) !important;
  border-radius: var(--mfc-radius-md) !important;
  font-family: inherit !important;
  font-size: var(--mfc-text-base) !important;
  color: var(--mfc-text) !important;
  background: var(--mfc-bg) !important;
  padding: var(--mfc-space-3) var(--mfc-space-4) !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}

.wpforms-form .wpforms-field input:focus,
.wpforms-form .wpforms-field textarea:focus,
.wpforms-form .wpforms-field select:focus {
  border-color: var(--mfc-forest) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfc-forest) 15%, transparent) !important;
}

.wpforms-form .wpforms-field-label,
.wpforms-form .wpforms-field-label-inline {
  font-family: inherit !important;
  font-size: var(--mfc-text-sm) !important;
  font-weight: 700 !important;
  color: var(--mfc-text) !important;
  letter-spacing: 0.01em !important;
  margin-bottom: var(--mfc-space-2) !important;
}

.wpforms-form .wpforms-submit-container .wpforms-submit {
  background: var(--mfc-deep) !important;
  color: var(--mfc-electric) !important;
  border: none !important;
  font-family: inherit !important;
  font-size: var(--mfc-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: var(--mfc-space-3) var(--mfc-space-8) !important;
  border-radius: var(--mfc-radius-md) !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.wpforms-form .wpforms-submit-container .wpforms-submit:hover {
  background: var(--mfc-deep-mid) !important;
}

/* Confirmation message */
.wpforms-confirmation-container-full {
  border-left: 3px solid var(--mfc-electric) !important;
  background: var(--mfc-electric-surface) !important;
  border-radius: var(--mfc-radius-md) !important;
  padding: var(--mfc-space-5) var(--mfc-space-6) !important;
  font-size: var(--mfc-text-base) !important;
  color: var(--mfc-deep) !important;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
  .page-banner {
    padding: var(--mfc-space-12) 0;
  }

  .page-banner__title {
    font-size: var(--mfc-text-3xl);
  }

  .page-banner__subtitle {
    font-size: var(--mfc-text-base);
  }

  .contact-body {
    grid-template-columns: 1fr;
    gap: var(--mfc-space-10);
  }
}