/**
 * Section Background Styles - Kahuna the Elder Theme
 * Dynamic background system based on post category/section
 */

/* ============================================================================
   Main Page / Library Background
   ============================================================================ */

body.section-main-page,
body.category-main-page {
  /* Background now handled in layout.css */
}

.template-part-hero.section-main-page {
  /* Background removed - use page background */
}

.wp-block-kahunatheelder-hero.hero-section {
  /* Hero background is dark overlay, 20px padding around image */
}

.hero-content.section-main-page h1,
.hero-content.section-main-page p {
  color: white;
}

.site-title.section-main-page {
  color: #D4AF37;
}

/* Section accent color */
.section-main-page .sidebar-widget {
  border-left-color: #D4AF37;
}

.section-main-page .post-item {
  border-left-color: #D4AF37;
}

/* ============================================================================
   Arnathia Background
   ============================================================================ */

body.section-arnathia,
body.category-arnathia {
  /* Background now handled in layout.css */
}

.template-part-hero.section-arnathia {
  /* Background removed - use page background */
}

.wp-block-kahunatheelder-hero.hero-section {
  /* Hero background is dark overlay */
}

.hero-content.section-arnathia h1,
.hero-content.section-arnathia p {
  color: white;
}

.site-title.section-arnathia {
  color: #9B8C6E;
}

.section-arnathia .sidebar-widget {
  border-left-color: #9B8C6E;
}

.section-arnathia .post-item {
  border-left-color: #9B8C6E;
}

.section-arnathia .post-title,
.section-arnathia .page-title {
  color: #707973;
}

/* ============================================================================
   Videos Background
   ============================================================================ */

body.section-videos,
body.category-videos {
  /* Background now handled in layout.css */
}

.template-part-hero.section-videos {
  /* Background removed - use page background */
}

.wp-block-kahunatheelder-hero.hero-section {
  /* Hero background is dark overlay */
}

.hero-content.section-videos h1,
.hero-content.section-videos p {
  color: white;
}

.site-title.section-videos {
  color: #4A90A4;
}

.section-videos .sidebar-widget {
  border-left-color: #4A90A4;
}

.section-videos .post-item {
  border-left-color: #4A90A4;
}

.section-videos .post-title,
.section-videos .page-title {
  color: #6D2332;
}

/* ============================================================================
   Social Media Background
   ============================================================================ */

body.section-social,
body.category-social-media {
  /* Background now handled in layout.css */
}

.template-part-hero.section-social {
  /* Background removed - use page background */
}

.wp-block-kahunatheelder-hero.hero-section {
  /* Hero background is dark overlay */
}

.hero-content.section-social h1,
.hero-content.section-social p {
  color: white;
}

.site-title.section-social {
  color: #B87A3B;
}

.section-social .sidebar-widget {
  border-left-color: #B87A3B;
}

.section-social .post-item {
  border-left-color: #B87A3B;
}

.section-social .post-title,
.section-social .page-title {
  color: #452C23;
}

/* ============================================================================
   Archive/Category Page Backgrounds
   ============================================================================ */

.archive-background {
  padding: var(--space-2xl) var(--space-xl);
  margin: -var(--space-2xl) -var(--space-xl) 0 -var(--space-xl);
  border-radius: 0;
}

.archive-background.main-page {
  background: linear-gradient(180deg, rgba(42, 41, 55, 0.1) 0%, transparent 100%);
}

.archive-background.arnathia {
  background: linear-gradient(180deg, rgba(112, 121, 115, 0.1) 0%, transparent 100%);
}

.archive-background.videos {
  background: linear-gradient(180deg, rgba(109, 35, 50, 0.1) 0%, transparent 100%);
}

.archive-background.social {
  background: linear-gradient(180deg, rgba(69, 44, 35, 0.1) 0%, transparent 100%);
}

/* ============================================================================
   Accent Color Classes (For selective elements)
   ============================================================================ */

.accent-main {
  color: #D4AF37;
}

.accent-arnathia {
  color: #9B8C6E;
}

.accent-videos {
  color: #4A90A4;
}

.accent-social {
  color: #B87A3B;
}

/* Background color classes */
.bg-main {
  background-color: #2A2937;
  color: #F5DEB3;
}

.bg-arnathia {
  background-color: #707973;
  color: #E8D5C4;
}

.bg-videos {
  background-color: #6D2332;
  color: #E8D5D0;
}

.bg-social {
  background-color: #452C23;
  color: #D4B399;
}

/* Light color classes for text overlays */
.bg-main-light {
  background-color: #F5DEB3;
  color: #2A2937;
}

.bg-arnathia-light {
  background-color: #E8D5C4;
  color: #707973;
}

.bg-videos-light {
  background-color: #E8D5D0;
  color: #6D2332;
}

.bg-social-light {
  background-color: #D4B399;
  color: #452C23;
}

/* ============================================================================
   Decorative Elements & Borders
   ============================================================================ */

.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-main-accent), transparent);
  margin: var(--space-2xl) 0;
}

/* Section-specific dividers */
.section-main-page .section-divider {
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.section-arnathia .section-divider {
  background: linear-gradient(90deg, transparent, #9B8C6E, transparent);
}

.section-videos .section-divider {
  background: linear-gradient(90deg, transparent, #4A90A4, transparent);
}

.section-social .section-divider {
  background: linear-gradient(90deg, transparent, #B87A3B, transparent);
}

/* ============================================================================
   Featured Content Highlight Box
   ============================================================================ */

.featured-highlight {
  padding: var(--space-lg);
  border-radius: 8px;
  border: 2px solid var(--color-main-accent);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
  margin: var(--space-lg) 0;
}

.section-arnathia .featured-highlight {
  border-color: #9B8C6E;
  background: linear-gradient(135deg, rgba(155, 140, 110, 0.05) 0%, rgba(155, 140, 110, 0.02) 100%);
}

.section-videos .featured-highlight {
  border-color: #4A90A4;
  background: linear-gradient(135deg, rgba(74, 144, 164, 0.05) 0%, rgba(74, 144, 164, 0.02) 100%);
}

.section-social .featured-highlight {
  border-color: #B87A3B;
  background: linear-gradient(135deg, rgba(184, 122, 59, 0.05) 0%, rgba(184, 122, 59, 0.02) 100%);
}

/* ============================================================================
   Category Tags / Badges
   ============================================================================ */

.post-category-tag {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-main-accent);
  color: white;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-right: var(--space-sm);
  transition: var(--transition-smooth);
}

.post-category-tag:hover {
  background: #B8860B;
  text-decoration: none;
}

.section-arnathia .post-category-tag {
  background: #9B8C6E;
}

.section-arnathia .post-category-tag:hover {
  background: #7a6d56;
}

.section-videos .post-category-tag {
  background: #4A90A4;
}

.section-videos .post-category-tag:hover {
  background: #3a7088;
}

.section-social .post-category-tag {
  background: #B87A3B;
}

.section-social .post-category-tag:hover {
  background: #975e2b;
}

/* ============================================================================
   Breadcrumbs
   ============================================================================ */

.breadcrumbs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-size: 0.875rem;
  color: #666;
}

.breadcrumbs a {
  color: var(--color-main-accent);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.breadcrumbs a:hover {
  color: #2A2937;
  text-decoration: underline;
}

.breadcrumbs span {
  color: #999;
}

/* ============================================================================
   Background Image Support
   ============================================================================ */

.background-image-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.1;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Section-specific background images */
.background-image-container.main-page {
  background-image: url('/wp-content/themes/kahunatheelder/assets/images/backgrounds/home.png');
}

.background-image-container.arnathia {
  background-image: url('/wp-content/themes/kahunatheelder/assets/images/backgrounds/arnathia.png');
}

.background-image-container.videos {
  background-image: url('/wp-content/themes/kahunatheelder/assets/images/backgrounds/videos.jpg');
}

.background-image-container.social {
  background-image: url('/wp-content/themes/kahunatheelder/assets/images/backgrounds/social.webp');
}

/* On mobile, disable fixed background for performance */
@media (max-width: 768px) {
  .background-image-container {
    background-attachment: scroll;
  }
}