/*
Theme Name: CSI Diocese Theme
Theme URI: https://csidiaspora.org
Author: CSI Diaspora Diocese
Author URI: https://csidiaspora.org
Description: A custom WordPress theme for the Church of South India Diaspora Diocese. Features church locator with interactive mapping, event management, and resource center. Color scheme extracted from official CSI logo (royal blue, gold, purple, red). Uses only free plugins (ACF, The Events Calendar, Contact Form 7). Built with modern PHP, JavaScript, and responsive design principles.
Version: 1.2.4
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: csi-diocese
Tags: church, diocese, custom-post-types, events, maps, leaflet, responsive, accessibility-ready, free-plugins

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* =========================================
   CSS VARIABLES - Design System
   Colors extracted from CSI Diaspora Diocese Logo
   ========================================= */
:root {
  /* Primary Color Palette - From Logo */
  --color-primary: #1E5BA8;      /* Royal Blue (outer ring) */
  --color-secondary: #6B2C5C;    /* Purple/Maroon (cross) */
  --color-accent: #FFB81C;       /* Golden Yellow (trinity symbol & bands) */
  --color-red: #C8102E;          /* Red (inner ring) */
  --color-background: #FAFAF9;   /* Warm Stone/Paper */
  --color-text: #1C1917;         /* Soft Black */
  
  /* Semantic Colors */
  --color-primary-light: #3A7BC8;
  --color-primary-dark: #174178;
  --color-accent-light: #FFD54F;
  --color-accent-dark: #CC9517;
  
  /* Grayscale */
  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-600: #4B5563;
  --color-gray-900: #111827;
  
  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  
  /* Spacing Scale */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-2xl: 4rem;     /* 64px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Container Max Width */
  --container-width: 1280px;
}

/* =========================================
   RESET & BASE STYLES
   ========================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.5rem; }  /* 40px */
h2 { font-size: 2rem; }    /* 32px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.5rem; }  /* 24px */
h5 { font-size: 1.25rem; } /* 20px */
h6 { font-size: 1rem; }    /* 16px */

p {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

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

a:hover {
  color: var(--color-accent);
}

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

/* =========================================
   UTILITY CLASSES
   ========================================= */
.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive breakpoints aligned with Tailwind defaults */
/* Mobile-first approach */

@media (min-width: 640px) {  /* sm */
  h1 { font-size: 3rem; }
}

@media (min-width: 768px) {  /* md */
  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

@media (min-width: 1024px) { /* lg */
  h1 { font-size: 3.5rem; }
}