/*
 Theme Name:   Divi Child
 Theme URI:    https://columbia-learning-society.com
 Description:  Columbia Learning Society child theme
 Author:       Columbia Learning Society
 Author URI:   https://columbia-learning-society.com
 Template:     Divi
 Version:      1.0.0
*/

/* ================================================
   Paste your cls-global.css contents below here
   ================================================ */

  /*
 * ═══════════════════════════════════════════════════════════════════
 *  COLUMBIA LEARNING SOCIETY - Global Stylesheet
 *  Version: 1.0 · April 2026
 *
 *  HOW TO USE IN DIVI / WORDPRESS:
 *  Option A (Recommended): Add to child theme style.css
 *  Option B: Divi → Theme Options → Custom CSS (paste entire file)
 *  Option C: Divi → Theme Customizer → Additional CSS
 *
 *  This file covers:
 *  1. CSS custom properties (brand tokens)
 *  2. Typography overrides
 *  3. Button styles
 *  4. Card components
 *  5. Divi module overrides
 *  6. Utility classes
 *  7. Responsive breakpoints
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────
   1. BRAND TOKENS
   ───────────────────────────────────────────────────────── */
:root {
  /* Columbia brand colours (from official Brand Guide 2024) */
  --cls-red:          #D12329;   /* Piercing Red - primary */
  --cls-red-dark:     #a81b20;
  --cls-red-light:    rgba(209, 35, 41, 0.08);
  --cls-red-mid:      rgba(209, 35, 41, 0.18);

  --cls-navy:         #003258;   /* Effervescent Blue - accent */
  --cls-navy-mid:     #004480;
  --cls-navy-light:   rgba(0, 50, 88, 0.07);

  --cls-grey:         #a0a2a4;   /* Suzu Grey - accent */
  --cls-black:        #000000;

  /* Extended palette (UI use only - not in official brand guide) */
  --cls-gold:         #c47c1a;
  --cls-gold-light:   rgba(196, 124, 26, 0.1);
  --cls-green:        #047857;
  --cls-green-light:  rgba(4, 120, 87, 0.08);

  /* Text */
  --cls-text:         #1a2b3c;
  --cls-text-muted:   #556677;
  --cls-text-light:   #8899aa;

  /* Backgrounds */
  --cls-bg:           #ffffff;
  --cls-bg-light:     #f7f9fb;
  --cls-bg-mid:       #eef2f6;

  /* Borders */
  --cls-border:       rgba(0, 0, 0, 0.10);
  --cls-border-mid:   rgba(0, 0, 0, 0.18);

  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.07);
  --shadow-sm:  0 1px 8px rgba(0,0,0,0.09);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

  /* Transitions */
  --transition: all 0.2s ease;
}

/* ─────────────────────────────────────────────────────────
   2. TYPOGRAPHY OVERRIDES
   Divi uses its own heading styles - these override them
   ───────────────────────────────────────────────────────── */
body,
#page-container,
.et_pb_section,
.et_pb_row,
.et_pb_module {
  font-family: 'Raleway', Arial, sans-serif !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.et_pb_slide_title,
.et_pb_module_header,
.et_pb_blurb_title,
.et_pb_pricing_title {
  font-family: 'Raleway', Arial, sans-serif !important;
  color: var(--cls-text) !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }
h4 { font-weight: 700; }

/* Body text */
p, li, td, input, textarea, select, button {
  font-family: 'Raleway', Arial, sans-serif;
}

/* Blockquotes - use for pull quotes/testimonials */
blockquote,
.et_pb_text blockquote {
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.15em;
  line-height: 1.7;
  color: var(--cls-navy);
  border-left: 4px solid var(--cls-red);
  padding-left: 20px;
  margin: 24px 0;
}

/* Links */
a { color: var(--cls-red); }
a:hover { color: var(--cls-red-dark); }

/* ─────────────────────────────────────────────────────────
   3. BUTTON STYLES
   Use via Divi Button module with custom CSS classes,
   or add class names to Divi's "CSS Class" field
   ───────────────────────────────────────────────────────── */

/* Base button reset */
.cls-btn,
.et_pb_button {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Primary red button */
.et_pb_button,
.cls-btn-primary {
  background: var(--cls-red) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
}
.et_pb_button:hover,
.cls-btn-primary:hover {
  background: var(--cls-red-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(209,35,41,0.35) !important;
}

/* Navy button */
.cls-btn-navy {
  background: var(--cls-navy) !important;
  color: #fff !important;
  border: none !important;
}
.cls-btn-navy:hover {
  background: var(--cls-navy-mid) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Outline button */
.cls-btn-outline {
  background: transparent !important;
  color: var(--cls-red) !important;
  border: 2px solid var(--cls-red) !important;
}
.cls-btn-outline:hover {
  background: var(--cls-red) !important;
  color: #fff !important;
}

/* Large variant */
.cls-btn-lg {
  padding: 17px 34px !important;
  font-size: 17px !important;
}

/* ─────────────────────────────────────────────────────────
   4. DIVI MODULE OVERRIDES
   ───────────────────────────────────────────────────────── */

/* Section spacing */
.et_pb_section {
  padding: 72px 0 !important;
}
.et_pb_section.cls-section-sm {
  padding: 48px 0 !important;
}
.et_pb_section.cls-no-pad {
  padding: 0 !important;
}

/* Row max-width */
.et_pb_row {
  max-width: 1100px !important;
}

/* Blurb module */
.et_pb_blurb .et_pb_main_blurb_image {
  margin-bottom: 16px;
}
.et_pb_blurb_description {
  color: var(--cls-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
.et_pb_blurb_title {
  font-weight: 700 !important;
  color: var(--cls-text) !important;
}

/* Toggle/Accordion */
.et_pb_toggle_title {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--cls-text) !important;
}
.et_pb_toggle_open .et_pb_toggle_title,
.et_pb_toggle_title:hover {
  color: var(--cls-red) !important;
}

/* Divider */
.et_pb_divider .et_pb_divider_internal {
  border-color: var(--cls-border) !important;
}

/* Call to action */
.et_pb_cta {
  border-radius: var(--radius-lg) !important;
}

/* Pricing table */
.et_pb_pricing_table {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
.et_pb_featured_table .et_pb_pricing_heading {
  background: var(--cls-red) !important;
}

/* Forms (Gravity Forms + Divi default) */
.gform_wrapper,
.et_pb_contact_form_container {
  font-family: 'Raleway', Arial, sans-serif !important;
}
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]),
.gform_wrapper select,
.gform_wrapper textarea,
.et_pb_contact_field input,
.et_pb_contact_field textarea {
  border: 1px solid var(--cls-border-mid) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 14px !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 14px !important;
  color: var(--cls-text) !important;
  background: #fff !important;
  transition: border-color 0.2s !important;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
  border-color: var(--cls-red) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(209,35,41,0.1) !important;
}
.gform_wrapper label,
.gfield_label {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--cls-text-muted) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}
.gform_button,
.gform_wrapper input[type=submit] {
  background: var(--cls-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 28px !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.gform_button:hover,
.gform_wrapper input[type=submit]:hover {
  background: var(--cls-red-dark) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────
   5. CARD COMPONENTS
   Add class "cls-card" via Divi module CSS class field
   ───────────────────────────────────────────────────────── */
.cls-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--cls-border);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.cls-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.cls-card-red { border: 2px solid var(--cls-red); }
.cls-card-navy { border: 2px solid var(--cls-navy); background: var(--cls-navy); color: #fff; }
.cls-card-light { background: var(--cls-bg-light); border-color: transparent; }

/* ─────────────────────────────────────────────────────────
   6. UTILITY CLASSES
   ───────────────────────────────────────────────────────── */

/* Backgrounds */
.bg-white     { background: #fff !important; }
.bg-light     { background: var(--cls-bg-light) !important; }
.bg-navy      { background: var(--cls-navy) !important; }
.bg-red       { background: var(--cls-red) !important; }
.bg-red-light { background: var(--cls-red-light) !important; }

/* Text colors */
.text-white   { color: #fff !important; }
.text-red     { color: var(--cls-red) !important; }
.text-navy    { color: var(--cls-navy) !important; }
.text-muted   { color: var(--cls-text-muted) !important; }
.text-gold    { color: var(--cls-gold) !important; }

/* Red accent bar (use as top border on cards/sections) */
.cls-red-bar {
  height: 4px;
  width: 48px;
  background: var(--cls-red);
  border-radius: 2px;
  margin-bottom: 20px;
}
.cls-red-bar-full {
  height: 4px;
  width: 100%;
  background: var(--cls-red);
}

/* Overline label */
.cls-overline {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cls-text-muted);
}

/* Badges */
.cls-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cls-badge-red   { background: var(--cls-red-light); color: var(--cls-red); border: 1px solid rgba(209,35,41,0.2); }
.cls-badge-navy  { background: var(--cls-navy-light); color: var(--cls-navy); border: 1px solid rgba(0,50,88,0.15); }
.cls-badge-gold  { background: var(--cls-gold-light); color: var(--cls-gold); border: 1px solid rgba(196,124,26,0.2); }
.cls-badge-green { background: var(--cls-green-light); color: var(--cls-green); border: 1px solid rgba(4,120,87,0.15); }
.cls-badge-new   { background: var(--cls-red); color: #fff; }

/* Spacing helpers */
.mt-0  { margin-top: 0 !important; }
.mt-sm { margin-top: 12px !important; }
.mt-md { margin-top: 24px !important; }
.mt-lg { margin-top: 48px !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: 12px !important; }
.mb-md { margin-bottom: 24px !important; }
.mb-lg { margin-bottom: 48px !important; }

/* Section headings */
.cls-section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.cls-section-heading .cls-red-bar {
  margin: 0 auto 16px;
}

/* ─────────────────────────────────────────────────────────
   7. GRAVITY FORMS - SCHOLARSHIP APPLICATION STYLES
   Applied automatically to all GF forms on CLS site
   ───────────────────────────────────────────────────────── */

/* Progress bar */
.gf_progressbar {
  background: var(--cls-bg-mid) !important;
  border-radius: 4px !important;
  height: 8px !important;
}
.gf_progressbar_percentage {
  background: var(--cls-red) !important;
  border-radius: 4px !important;
}
.gf_progressbar_title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--cls-text-muted) !important;
  font-size: 13px !important;
}

/* Validation errors */
.gform_validation_container,
.validation_error {
  border: 2px solid var(--cls-red) !important;
  background: var(--cls-red-light) !important;
  color: var(--cls-red) !important;
  border-radius: var(--radius-md) !important;
  font-family: 'Raleway', Arial, sans-serif !important;
}
.gfield_error input,
.gfield_error textarea,
.gfield_error select {
  border-color: var(--cls-red) !important;
}

/* Required asterisk */
.gfield_required {
  color: var(--cls-red) !important;
}

/* Confirmation message */
.gform_confirmation_wrapper {
  background: var(--cls-green-light) !important;
  border: 2px solid var(--cls-green) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  color: var(--cls-green) !important;
}

/* File upload fields */
.ginput_container_fileupload input[type=file] {
  border: 2px dashed var(--cls-border-mid) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  width: 100% !important;
  cursor: pointer;
}
.ginput_container_fileupload input[type=file]:hover {
  border-color: var(--cls-red) !important;
}

/* ─────────────────────────────────────────────────────────
   8. HEADER OVERRIDES
   If using Divi's default header with Columbia colours
   ───────────────────────────────────────────────────────── */
#main-header,
.et_header_style_centered #main-header,
.et-fixed-header {
  background: var(--cls-navy) !important;
  border-bottom: 4px solid var(--cls-red) !important;
}
#main-header .nav li a,
.et-fixed-header .nav li a {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
}
#main-header .nav li a:hover,
.et-fixed-header .nav li a:hover,
#main-header .nav li.current-menu-item > a {
  color: #fff !important;
}
/* Mobile menu */
#et_mobile_nav_menu .nav li a {
  color: var(--cls-text) !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-weight: 600 !important;
}
#et-top-navigation .logo_container a {
  display: flex;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────
   9. FOOTER OVERRIDES
   ───────────────────────────────────────────────────────── */
#main-footer {
  background: var(--cls-navy) !important;
}
#main-footer .footer-widget h4,
#main-footer .footer-widget .footer-widget-title {
  color: rgba(255,255,255,0.5) !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
#main-footer .footer-widget li a,
#main-footer .footer-widget p,
#main-footer .footer-widget {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-family: 'Raleway', Arial, sans-serif !important;
}
#footer-bottom {
  background: rgba(0,0,0,0.2) !important;
}
#footer-bottom #footer-info,
#footer-bottom #footer-nav li a {
  color: rgba(255,255,255,0.35) !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 12px !important;
}

/* ─────────────────────────────────────────────────────────
   10. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .et_pb_section { padding: 52px 0 !important; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
}
@media (max-width: 640px) {
  .et_pb_section { padding: 40px 0 !important; }
  .et_pb_row { padding-left: 20px !important; padding-right: 20px !important; }
  .cls-btn-lg { padding: 13px 24px !important; font-size: 15px !important; }
}
/* ─────────────────────────────────────────────────────────
   11. BROWSER ZOOM FIX
   Divi sets maximum-scale=1 in the viewport meta tag which
   blocks pinch-to-zoom and Ctrl+scroll zoom in browsers.
   This overrides that restriction.
   ───────────────────────────────────────────────────────── */
:root {
  touch-action: auto;
}
html {
  -webkit-text-size-adjust: 100%;
  touch-action: auto;
}

.donations-hero h1,
.donations-hero h2,
.donations-hero h3,
.donations-hero p,
.donations-hero .cls-h1,
.donations-hero .cls-lead {
  color: #ffffff !important;
}