/* ===============================
   SECTION COLOR SYSTEM

   Theme system for sections using data-theme attributes.
   Usage: <section data-theme="yellow">...</section>
   
   NOTE: These are fallback styles. The JavaScript theme system
   will override these with inline styles when active.
================================ */

/* Base Section Styles */
section {
  position: relative;
}

/* Footer also uses theme colors */
footer[data-theme],
.site-footer[data-theme] {
  position: relative;
}

/* Hero sections should not get theme colors - they use video/image backgrounds */
section.hero[data-theme],
.hero[data-theme] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Ensure body and html get nature theme default colors */
body,
body.custom-background,
body.custom-background-image {
  background-color: #f9f6d0 !important; /* Nature theme yellow - hardcoded to ensure it works */
  background-image: none !important;
  color: #00400e !important; /* Nature theme green */
}

html,
html.custom-background {
  background-color: #f9f6d0 !important; /* Nature theme yellow */
}

/* Theme Variants - Only apply if JavaScript theme system hasn't set inline styles */
/* JavaScript will override these with !important inline styles */

section[data-theme="orange-blue"]:not([style*="background-color"]) {
  background: var(--color-light-blue);
  color: var(--color-orange);
}

section[data-theme="teal"]:not([style*="background-color"]) {
  background: var(--color-teal);
  color: var(--color-white);
}

section[data-theme="yellow"]:not([style*="background-color"]) {
  background: var(--color-yellow);
  color: var(--color-green);
}

section[data-theme="red"]:not([style*="background-color"]) {
  background: var(--color-red);
  color: var(--color-white);
}

section[data-theme="coral"]:not([style*="background-color"]) {
  background: var(--color-coral);
  color: var(--color-white);
}

section[data-theme="blue"]:not([style*="background-color"]) {
  background: var(--color-blue);
  color: var(--color-white);
}

section[data-theme="green"]:not([style*="background-color"]),
footer[data-theme="green"]:not([style*="background-color"]),
.site-footer[data-theme="green"]:not([style*="background-color"]) {
  background: var(--color-green);
  color: var(--color-white);
}

/* Footer theme colors - same as sections */
footer[data-theme="orange-blue"]:not([style*="background-color"]),
.site-footer[data-theme="orange-blue"]:not([style*="background-color"]) {
  background: var(--color-light-blue);
  color: var(--color-orange);
}

footer[data-theme="teal"]:not([style*="background-color"]),
.site-footer[data-theme="teal"]:not([style*="background-color"]) {
  background: var(--color-teal);
  color: var(--color-white);
}

footer[data-theme="yellow"]:not([style*="background-color"]),
.site-footer[data-theme="yellow"]:not([style*="background-color"]) {
  background: var(--color-yellow);
  color: var(--color-green);
}

footer[data-theme="red"]:not([style*="background-color"]),
.site-footer[data-theme="red"]:not([style*="background-color"]) {
  background: var(--color-red);
  color: var(--color-white);
}

footer[data-theme="coral"]:not([style*="background-color"]),
.site-footer[data-theme="coral"]:not([style*="background-color"]) {
  background: var(--color-coral);
  color: var(--color-white);
}

footer[data-theme="blue"]:not([style*="background-color"]),
.site-footer[data-theme="blue"]:not([style*="background-color"]) {
  background: var(--color-blue);
  color: var(--color-white);
}