/*
Theme Name: AfroshineExo
Theme URI: https://afroshineglobal.com
Author: Afroshine Global Solutions
Author URI: https://afroshineglobal.com
Description: A fully editable custom WordPress theme for Afroshine Global Solutions. Pick any colour scheme from the Customizer, add unlimited pages, point every button to any URL, and edit all content from the admin — no code editing required. Includes a built-in (open) scheduler section and full-bio team popups.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
License URI: https://afroshineglobal.com
Text Domain: afroshine-exo
Tags: business, technology, ai, iot, corporate, one-page, customizer, color-scheme

--- COLOR PALETTE ---
Primary Blue:   #1565C0
Accent Blue:    #2196F3
Dark Navy:      #0A1628
Light BG:       #F0F4FF
White:          #FFFFFF
Text Dark:      #1A1A2E
Text Muted:     #6B7280
Success:        #10B981
*/

/* =====================================================
   AFROSHINEEXO THEME — BASE STYLES
   Colours are controlled from: Appearance > Customize > Colour Scheme
   (the :root values below are only fallback defaults — the live
    palette is injected as an inline <style> by inc/colors.php).
   All section content is managed via WordPress admin.
   ===================================================== */

:root {
  --color-primary:     #1565C0;
  --color-accent:      #2196F3;
  --color-navy:        #0A1628;
  --color-bg-light:    #F0F4FF;
  --color-bg-section:  #F8FAFF;
  --color-white:       #FFFFFF;
  --color-text:        #1A1A2E;
  --color-muted:       #6B7280;
  --color-border:      #E2E8F0;
  --color-card-bg:     #FFFFFF;
  --color-success:     #10B981;
  --color-badge-bg:    #E3F2FD;
  --color-badge-text:  #1565C0;

  --font-heading: 'Sora', 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', sans-serif;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  --shadow-card: 0 4px 24px rgba(21, 101, 192, 0.08);
  --shadow-hover: 0 12px 40px rgba(21, 101, 192, 0.16);

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1200px;
  --gap:        2rem;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-badge {
  display: inline-block;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.2rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 600px;
  line-height: 1.7;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-header .section-subtitle {
  margin: 0 auto;
}

section {
  padding: 5rem 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.8rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(21,101,192,0.3);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Cards */
.card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}