/*
 * Theme Name:        SOAR Outreach
 * Theme URI:         https://soaroutreach.com
 * Description:       A custom child theme for SOAR Outreach built on Hello Elementor. Includes branded sticky header, 4-column footer, Hope Horizon design system tokens, and full Elementor editor compatibility.
 * Author:            SOAR Outreach
 * Author URI:        https://soaroutreach.com
 * Template:          hello-elementor
 * Version:           1.0.0
 * License:           GNU General Public License v3 or later
 * License URI:       https://www.gnu.org/licenses/gpl-3.0.html
 * Text Domain:       soar-outreach
 * Tags:              custom-header, custom-footer, elementor, nonprofit
 */

/* =========================================================
   1. HOPE HORIZON DESIGN TOKEN SYSTEM
   ========================================================= */

:root {
  /* --- Brand Colors --- */
  --clr-primary:             #0C4492;  /* Deep Navy — headlines, active states */
  --clr-primary-container:   #305DAB;  /* Tech Blue — icons, accents, hover */
  --clr-primary-fixed:       #D8E2FF;  /* Soft Light Blue — badge backgrounds */
  --clr-primary-fixed-dim:   #AEC6FF;  /* Highlight state for light blue */

  --clr-secondary:           #426900;  /* Forest Green — success / dark accents */
  --clr-secondary-container: #B6F268;  /* Vibrant Yellow-Green — main CTAs */
  --clr-secondary-fixed:     #B9F46A;  /* High-impact CTA Yellow-Green */

  --clr-tertiary-container:  #4E672B;  /* Dark Forest Green — stat card BGs */
  --clr-tertiary-fixed:      #CEEDA1;  /* Sage Green — soft tint backgrounds */
  --clr-tertiary-fixed-dim:  #B3D088;  /* Muted sage accent */

  --clr-surface:             #F9F9FF;  /* Primary soft blue-white background */
  --clr-surface-container-low:   #F1F3FF;  /* Hero section background */
  --clr-surface-container:       #E8EDFF;  /* Card / list container */
  --clr-surface-container-high:  #E0E8FF;  /* Banner callouts */
  --clr-surface-container-highest: #D8E2FF; /* Global footer background */
  --clr-alt-bg:              #F8FAFD;  /* Alternate section background */

  --clr-on-surface:          #001A41;  /* Regal Navy — primary heading text */
  --clr-on-surface-variant:  #334155;  /* Slate Charcoal — body paragraph text */
  --clr-outline-variant:     #C3C6D3;  /* Border / divider color */

  /* --- Typography --- */
  --font-heading: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Type Scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   48px;

  /* Font Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line Heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* --- Spacing (Base-8 scale) --- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;

  /* --- Border Radius --- */
  --radius-sm:  8px;   /* Buttons, inputs, tags */
  --radius-md:  12px;  /* Small badges */
  --radius-lg:  16px;  /* Event cards */
  --radius-xl:  24px;  /* Bento cards, program blocks */
  --radius-2xl: 32px;  /* Hero images */
  --radius-full: 9999px; /* Pills / circles */

  /* --- Shadows --- */
  --shadow-card:  0 8px 24px rgba(17, 47, 94, 0.08);
  --shadow-card-hover: 0 16px 40px rgba(17, 47, 94, 0.12);
  --shadow-btn:   0 4px 15px rgba(12, 68, 146, 0.15);
  --shadow-header: 0 1px 0 rgba(195, 198, 211, 0.3);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Container --- */
  --container-max: 1280px;
  --container-pad: var(--space-3);
  --section-pad:   var(--space-10);
}

/* =========================================================
   2. GLOBAL RESETS & BASE STYLES
   ========================================================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--clr-on-surface-variant);
  background-color: var(--clr-surface);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--clr-on-surface);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  font-weight: var(--fw-bold);
}

p {
  margin: 0 0 var(--space-2);
  line-height: var(--lh-relaxed);
}

a {
  color: var(--clr-primary-container);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--clr-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   3. ELEMENTOR INTEGRATION OVERRIDES
   ========================================================= */

/* Ensure Elementor sections inherit our font stack */
.elementor-section,
.elementor-container,
.elementor-widget-wrap {
  font-family: var(--font-body);
}

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading);
}

/* Remove default page title from Hello Elementor on Elementor-built pages */
.elementor-page .page-header,
.elementor-page .page-title {
  display: none;
}

/* Ensure body padding accounts for our sticky header */
body.has-soar-header {
  padding-top: 0;
}