/**
 * COMMONWEALTH THEME
 * Applied to all pages EXCEPT Chef's Canvas (the Sanctuary)
 * 
 * This stylesheet provides:
 * - Part 1: Dark body & header (black background, white text, Dali Burgundy accents)
 * - Part 2: Universal light footer (white background, dark text)
 * 
 * Chef's Canvas (chefs-canvas.html) is excluded from this theme and remains pristine.
 */

/* ========================================================================
   PART 1: DARK BODY & HEADER
   Applied to: html, body, header, main sections
   ======================================================================== */

html,
body {
  background-color: #000000 !important;
  color: #ffffff !important;
  margin: 0;
  padding: 0;
}

/* Header Styling */
header,
.main-header,
nav {
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px);
  color: #ffffff !important;
}

/* Navigation Links */
header a,
nav a {
  color: #ffffff !important;
}

header a:hover,
nav a:hover {
  color: #5D0002 !important; /* Dali Burgundy accent */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

/* Main Content Areas */
main,
section,
article,
.section {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Text Elements */
p,
span,
div:not(footer *) {
  color: #ffffff !important;
}

/* Links in Body */
main a,
section a,
article a {
  color: #5D0002 !important; /* Dali Burgundy */
}

main a:hover,
section a:hover,
article a:hover {
  color: #ffffff !important;
}

/* Buttons & CTAs */
.btn,
button {
  background-color: #5D0002 !important;
  color: #ffffff !important;
  border: none;
}

.btn:hover,
button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Hero Sections */
.hero,
.hero-section {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Cards & Panels */
.card,
.panel,
.box {
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid #333333;
}

/* Tables */
table {
  background-color: #000000 !important;
  color: #ffffff !important;
}

th {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

td {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #333333;
}

/* Forms */
input,
textarea,
select {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #333333;
}

input::placeholder,
textarea::placeholder {
  color: #888888 !important;
}

/* ========================================================================
   PART 2: UNIVERSAL LIGHT FOOTER
   Overrides dark theme for footer section only
   Applied to: footer and all child elements
   ======================================================================== */

footer {
  background-color: #ffffff !important;
  color: #555555 !important;
  border-top: 1px solid #e5e5e5 !important;
  padding: 2rem 0;
  margin-top: 4rem;
}

/* Footer Headings */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #333333 !important;
  font-weight: 600;
}

/* Footer Links */
footer a {
  color: #5D0002 !important; /* Dali Burgundy */
  text-decoration: none;
}

footer a:hover {
  color: #000000 !important;
  text-decoration: underline;
}

/* Footer Text */
footer p,
footer span,
footer div,
footer ul,
footer li {
  color: #555555 !important;
}

/* Footer Lists */
footer ul {
  list-style: none;
  padding: 0;
}

footer li {
  margin-bottom: 0.5rem;
}

/* Social Icons */
footer .social-icons a,
footer .social-links a {
  color: #5D0002 !important;
}

footer .social-icons a:hover,
footer .social-links a:hover {
  color: #000000 !important;
}

/* Footer Buttons */
footer button,
footer .btn {
  background-color: #5D0002 !important;
  color: #ffffff !important;
}

footer button:hover,
footer .btn:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Copyright Section */
footer .copyright,
footer .footer-bottom {
  color: #888888 !important;
  font-size: 0.875rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e5e5;
}

/* ========================================================================
   RESPONSIVE DESIGN
   ======================================================================== */

@media (max-width: 768px) {
  footer {
    padding: 1.5rem 0;
  }
  
  footer h1,
  footer h2,
  footer h3 {
    font-size: 1.25rem !important;
  }
}

/* ========================================================================
   END OF COMMONWEALTH THEME
   ======================================================================== */