/*
Theme Name: CAPE Social Media Content Calendar
Theme URI: https://calendar.capeafrique.org
Author: CAPE Afrique
Author URI: https://capeafrique.org
Description: Thème WordPress officiel autonome pour le calendrier marketing et réseaux sociaux de CAPE Afrique. Conçu pour les entrepreneurs, PME, ONG, freelances et responsables communication en Afrique et dans le monde. Intègre la gestion des événements marketing, filtres multi-critères, emplacements Google AdSense modulaires, capture Brevo, Schema.org et optimisation SEO d'exception.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cape-content-calendar
Domain Path: /languages
Tags: news, calendar, social-media, marketing, africa, responsive-layout, custom-colors, custom-menu, translation-ready, grid-layout, e-commerce

CAPE Content Calendar Theme - Designed & Developed for calendar.capeafrique.org
*/

/* ==========================================================================
   DESIGN SYSTEM & CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
  --cape-primary: #1e3a8a;       /* Deep Navy Blue */
  --cape-primary-hover: #1e40af;
  --cape-accent: #f59e0b;        /* Warm Amber / Gold */
  --cape-accent-hover: #d97706;
  --cape-bg: #f8fafc;            /* Crisp light slate background */
  --cape-surface: #ffffff;
  --cape-border: #e2e8f0;
  --cape-text-main: #0f172a;
  --cape-text-muted: #64748b;
  --cape-radius: 12px;
  --cape-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --cape-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --cape-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   BASE RESET & TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--cape-font-sans);
  background-color: var(--cape-bg);
  color: var(--cape-text-main);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cape-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.site-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  background: var(--cape-surface);
  border-bottom: 1px solid var(--cape-border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--cape-shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cape-primary);
}

.brand-badge {
  background: #dbeafe;
  color: var(--cape-primary);
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ==========================================================================
   ADSENSE SLOTS & WIDGETS
   ========================================================================== */
.adsense-slot-container {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: var(--cape-radius);
  text-align: center;
}

.adsense-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cape-text-muted);
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   CALENDAR & EVENT CARDS
   ========================================================================== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.event-card {
  background: var(--cape-surface);
  border: 1px solid var(--cape-border);
  border-radius: var(--cape-radius);
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cape-shadow-md);
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.event-date-badge {
  background: var(--cape-bg);
  border: 1px solid var(--cape-border);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cape-text-main);
}

.event-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.event-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.hashtag-pill {
  font-size: 0.75rem;
  background: #f1f5f9;
  color: #475569;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* ==========================================================================
   FOOTER & BREVO NEWSLETTER
   ========================================================================== */
.site-footer {
  background: #0f172a;
  color: #f8fafc;
  padding: 4rem 0 2rem;
  margin-top: 4rem;
}

.newsletter-box {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border-radius: 16px;
  padding: 3rem;
  color: white;
  text-align: center;
  margin-bottom: 3rem;
}

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  max-width: 500px;
  margin: 1.5rem auto 0;
}

.newsletter-input {
  flex: 1;
  padding: 0.85rem 1.2rem;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
}

.newsletter-button {
  background: var(--cape-accent);
  color: #0f172a;
  border: none;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.newsletter-button:hover {
  background: var(--cape-accent-hover);
}