/* ============================================
   La Cantine Solidaire - Brand Styling
   Custom colors and typography for Elementor
   ============================================ */

:root {
  /* Primary Colors */
  --color-primary-dark: #2D5A57;
  --color-primary-light: #3d7a77;
  --color-secondary-coral: #F4967A;
  --color-secondary-coral-dark: #E87A61;

  /* Neutral Colors */
  --color-background: #FAFAF8;
  --color-text-dark: #3A3A3A;
  --color-text-light: #6B6B6B;
  --color-border: #E8E8E8;
  --color-white: #FFFFFF;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-body: 16px;
  --font-size-large: 18px;
  --line-height-body: 1.6;
}

/* ============================================
   Global Styles
   ============================================ */

body {
  background-color: var(--color-background);
  color: var(--color-text-dark);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* Links */
a {
  color: var(--color-secondary-coral);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-secondary-coral-dark);
}

/* ============================================
   Header & Navigation
   ============================================ */

.site-header,
.elementor-location-header {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.site-header a,
.elementor-location-header a {
  color: var(--color-white);
}

.site-header a:hover,
.elementor-location-header a:hover {
  color: var(--color-secondary-coral);
}

/* Navigation Menu */
.main-menu,
.site-navigation {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.main-menu a,
.site-navigation a {
  color: var(--color-white);
  font-size: var(--font-size-body);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.main-menu a:hover,
.site-navigation a:hover {
  background-color: rgba(244, 150, 122, 0.1);
  color: var(--color-secondary-coral);
}

/* ============================================
   Footer
   ============================================ */

.site-footer,
.elementor-location-footer {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.site-footer a,
.elementor-location-footer a {
  color: var(--color-white);
}

.site-footer a:hover,
.elementor-location-footer a:hover {
  color: var(--color-secondary-coral);
}

.copyright-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
   Buttons
   ============================================ */

.btn,
.button,
.elementor-button {
  background-color: var(--color-secondary-coral);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 4px;
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-family-sans);
  font-weight: 500;
}

.btn:hover,
.button:hover,
.elementor-button:hover {
  background-color: var(--color-secondary-coral-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 150, 122, 0.3);
}

.btn-primary,
.button-primary {
  background-color: var(--color-secondary-coral);
}

.btn-secondary,
.button-secondary {
  background-color: var(--color-primary-dark);
}

.btn-secondary:hover,
.button-secondary:hover {
  background-color: var(--color-primary-light);
}

/* ============================================
   Headings
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
  color: var(--color-text-dark);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: 2rem;
  margin-bottom: var(--spacing-lg);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
}

/* ============================================
   Cards & Sections
   ============================================ */

.card,
.elementor-column {
  background-color: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* Full-width sections with colored backgrounds */
.section-primary {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.section-primary h1,
.section-primary h2,
.section-primary h3 {
  color: var(--color-white);
}

.section-secondary {
  background-color: var(--color-secondary-coral);
  color: var(--color-white);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.section-secondary h1,
.section-secondary h2,
.section-secondary h3 {
  color: var(--color-white);
}

.section-light {
  background-color: var(--color-background);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

/* ============================================
   Forms
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--spacing-md);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  transition: border-color 0.3s ease;
  width: 100%;
  max-width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-secondary-coral);
  box-shadow: 0 0 0 3px rgba(244, 150, 122, 0.1);
}

.form-group,
.elementor-field-group {
  margin-bottom: var(--spacing-lg);
}

label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-dark);
}

/* ============================================
   Images & Media
   ============================================ */

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

.image-wrapper {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Utility Classes
   ============================================ */

.text-primary {
  color: var(--color-primary-dark);
}

.text-secondary {
  color: var(--color-secondary-coral);
}

.text-white {
  color: var(--color-white);
}

.bg-primary {
  background-color: var(--color-primary-dark);
}

.bg-secondary {
  background-color: var(--color-secondary-coral);
}

.bg-light {
  background-color: var(--color-background);
}

.padding-lg {
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.margin-bottom-lg {
  margin-bottom: var(--spacing-2xl);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .section-primary,
  .section-secondary,
  .section-light {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .main-menu {
    gap: var(--spacing-md);
  }

  .main-menu a,
  .site-navigation a {
    padding: var(--spacing-sm) var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .section-primary,
  .section-secondary,
  .section-light {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

/* ============================================
   Elementor Specific Overrides
   ============================================ */

.elementor-heading-title {
  color: var(--color-text-dark);
}

.elementor-heading-title.section-primary {
  color: var(--color-white);
}

.elementor-image img {
  border-radius: 8px;
}

.elementor-widget-text-editor {
  color: var(--color-text-dark);
}

.elementor-widget-button .elementor-button {
  background-color: var(--color-secondary-coral);
  border-color: var(--color-secondary-coral);
}

.elementor-widget-button .elementor-button:hover {
  background-color: var(--color-secondary-coral-dark);
  border-color: var(--color-secondary-coral-dark);
}