/**
 * Soil Physics Lab Color Palette 2025
 * Pantone Color of the Year: Cloud Dancer
 * Revised: 2025-12-04 - Softer, More Organic Palette
 *
 * Color Philosophy:
 * - Muted, earthy tones for scholarly, approachable feel
 * - Hematite evokes soil horizons - perfect for soil physics
 * - Gentle blues suggest water without corporate harshness
 * - Natural greens and warm grays create organic harmony
 */

:root {
  /* ====================
     PRIMARY PALETTE
     ==================== */

  /* Primary Background - Cloud Dancer: Warm off-white, natural */
  --cloud-dancer: #F0EEE9;  /* Official Pantone Cloud Dancer 11-4201 */

  /* Primary Accent - Blue Fusion: Authoritative but soft */
  --blue-fusion: #4A5D6E;

  /* Secondary Accent - Baltic Sea: Gentle sky blue */
  --baltic-sea: #7BB8DB;

  /* Earth Tones - Hematite: Soil-inspired brown */
  --hematite: #7A706A;

  /* Neutral - Cloud Cover: Warm gray */
  --cloud-cover: #A9A198;

  /* Natural Highlight - Veiled Vista: Soft sage green */
  --veiled-vista: #C8E0C8;

  /* Warm Accent - Golden Mist: Muted gold */
  --golden-mist: #D9CF9A;

  /* Subtle Accent - Quiet Violet: Soft mauve */
  --quiet-violet: #9D8CA8;

  /* ====================
     FUNCTIONAL ASSIGNMENTS
     ==================== */

  /* Backgrounds - Minimal contrast, tonal harmony */
  --bg-primary: var(--cloud-dancer);
  --bg-secondary: #F6F4EE;  /* Just barely lighter */
  --bg-footer: #EBE8E0;  /* Slightly darker than background */
  --bg-subtle: #F8F6F2;  /* Almost imperceptible difference */
  --bg-card: #F9F7F3;  /* Whisper of difference */
  --nav-bg: #EAE7DF;  /* Blends with background, slightly darker */

  /* Text - Subtle, not harsh */
  --text-primary: #5A5550;  /* Soft dark brown, not black */
  --text-secondary: #8B8580;  /* Muted mid-tone */
  --text-light: #A9A39E;  /* Very light text */
  --text-inverse: #F0EEE9;  /* Cloud Dancer for dark backgrounds */
  --text-muted: #9B968F;  /* Barely there */

  /* Interactive Elements - Gentle, not bold */
  --nav-text: #6A6560;  /* Soft brown for nav */
  --nav-hover: #D9CF9A;  /* Golden Mist - very subtle */
  --nav-active: #C5BDB0;  /* Barely noticeable active state */

  /* Links - Understated */
  --link-primary: #7A706A;  /* Hematite - earthy, soft */
  --link-hover: #9D8CA8;  /* Quiet Violet - gentle shift */

  /* Buttons - Minimal contrast */
  --btn-primary-bg: #D9D6CE;  /* Soft warm gray */
  --btn-primary-text: #5A5550;  /* Soft dark text */
  --btn-primary-hover: #C5BDB0;  /* Slightly darker */
  --btn-cta-bg: #E8E3D8;  /* Almost invisible */
  --btn-cta-text: #6A6560;  /* Soft brown */
  --btn-cta-hover: #D4CEC0;  /* Whisper darker */
  --btn-secondary-bg: transparent;  /* No background */
  --btn-secondary-text: #7A706A;  /* Hematite */

  /* Accents & Borders - Barely there */
  --border-subtle: #E8E5DD;  /* Almost invisible */
  --border-accent: #DDD9CC;  /* Hint of warmth */
  --accent-warm: #D9CF9A;  /* Golden Mist - very gentle */
  --accent-feature: #E0DDD5;  /* Barely perceptible */
  --accent-earth: #C5BDB0;  /* Soft earth tone */

  /* Shadows - Ultra subtle, like paper on paper */
  --shadow-sm: 0 1px 3px rgba(90, 85, 80, 0.03);
  --shadow-md: 0 2px 6px rgba(90, 85, 80, 0.04);
  --shadow-lg: 0 4px 12px rgba(90, 85, 80, 0.05);
}

/* ====================
   GLOBAL APPLICATION
   ==================== */

body {
  background-color: var(--cloud-dancer) !important;  /* Match page background - no artifacts */
  color: var(--text-primary);
}

/* Main content areas */
.full {
  background-color: var(--bg-primary);
}

/* Alternating sections */
.full.alt-bg {
  background-color: var(--bg-subtle);
}

/* ====================
   TYPOGRAPHY - HEADINGS
   ==================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

h3 {
  color: var(--text-primary) !important;
  font-weight: 500;
}

h4 {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* ====================
   NAVIGATION
   ==================== */

.top-bar,
.contain-to-grid {
  background-color: var(--nav-bg) !important;
}

.top-bar-section ul li > a {
  color: var(--nav-text) !important;
}

.top-bar-section ul li > a:hover {
  background-color: var(--nav-hover) !important;
}

.top-bar-section ul li.active > a {
  background-color: var(--nav-active) !important;
  color: var(--text-inverse) !important;
}

/* Dropdown backgrounds */
.top-bar-section .dropdown {
  background: var(--bg-secondary) !important;
}

.top-bar-section .dropdown li a {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.top-bar-section .dropdown li:hover a {
  background: var(--veiled-vista) !important;
  color: var(--blue-fusion) !important;
}

/* ====================
   LINKS
   ==================== */

a {
  color: var(--link-primary);
}

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

/* ====================
   BUTTONS
   ==================== */

.btn,
.button {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: none !important;
}

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

/* Call to Action buttons */
.btn-cta {
  background-color: var(--btn-cta-bg) !important;
  color: var(--btn-cta-text) !important;
  font-weight: 600 !important;
}

.btn-cta:hover {
  background-color: var(--btn-cta-hover) !important;
  color: var(--text-inverse) !important;
}

/* Light/Secondary buttons - minimal, editorial style */
.btn-light,
.btn-secondary {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-accent) !important;
  font-size: 0.85rem !important;
  padding: 3px 11px !important;
  text-transform: none !important;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

.btn-light:hover,
.btn-secondary:hover {
  background-color: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--text-secondary) !important;
}

/* ====================
   CARDS
   ==================== */

.card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  border-width: 1px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Transparent background for collapse wrapper cards */
.collapse .card.card-body {
  background-color: transparent !important;
  box-shadow: none !important;
}

.card:hover {
  box-shadow: var(--shadow-lg) !important;  /* More noticeable shadow on hover */
  transform: translateY(-4px) !important;  /* Subtle lift effect */
}

.card-footer {
  background-color: var(--bg-subtle) !important;
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

/* Card links - subtle, editorial style */
.card-body h4 a {
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card-body h4 a:hover {
  color: var(--link-primary) !important;
}

/* Featured cards */
.card-featured {
  border-left: 4px solid var(--golden-mist) !important;
}

/* Card headers - subtle contrast for better definition */
.card-header {
  background-color: var(--nav-bg) !important;  /* #EAE7DF - more visible contrast */
  color: var(--text-primary) !important;  /* #5A5550 - soft brown */
  border-bottom: 1px solid var(--border-accent) !important;  /* #DDD9CC - slightly darker */
  font-weight: 500;
  padding: 16px 20px;
}

/* ====================
   SECTIONS & HEADERS
   ==================== */

.section-header h2,
.section-title {
  color: var(--text-primary) !important;
}

/* Section header underline - subtle but visible */
.modSectionHeader .special-title h2::after {
  background: var(--border-accent) !important;  /* #DDD9CC - hint of warmth, more visible */
  height: 1px !important;
}

/* Section tagline */
.section-tagline {
  color: var(--text-secondary) !important;
  font-weight: 300 !important;
}

/* Section backgrounds */
.shadowed {
  background-color: var(--bg-subtle) !important;
}

.border-top-light {
  border-top-color: var(--border-subtle) !important;
}

/* ====================
   FOOTER
   ==================== */

footer,
#footer {
  background-color: var(--bg-footer) !important;
  color: var(--text-primary) !important;  /* #5A5550 - soft brown for visibility */
}

/* Footer paragraphs - ensure visibility */
#footer p {
  color: var(--text-primary) !important;
}

footer a {
  color: var(--link-primary) !important;  /* #7A706A - Hematite, matches main content */
}

footer a:hover {
  color: var(--link-hover) !important;  /* #9D8CA8 - Quiet Violet */
}

/* Footer social icons - minimalist palette */
#footer ul.socials i {
  background: var(--hematite) !important;  /* #7A706A - earthy brown */
  color: var(--cloud-dancer) !important;  /* Official Pantone Cloud Dancer */
}

#footer ul.socials a:hover i {
  background: var(--golden-mist) !important;  /* #D9CF9A - muted gold */
  color: var(--text-primary) !important;  /* #5A5550 - soft brown text */
}

/* ====================
   FEATURED ELEMENTS
   ==================== */

.featured,
.highlight {
  border-left: 4px solid var(--veiled-vista);
  padding-left: 20px;
}

/* Awards, publications highlights */
.accent-border {
  border-color: var(--golden-mist) !important;
}

/* ====================
   CAROUSEL
   ==================== */

.horizontal-carousel__slide {
  box-shadow: var(--shadow-lg) !important;
}

.carousel__slide {
  box-shadow: var(--shadow-lg) !important;
}

/* ====================
   FORMS & INPUTS
   ==================== */

input[type="text"],
input[type="email"],
textarea,
select {
  border-color: var(--border-subtle) !important;
  background-color: var(--bg-secondary) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--baltic-sea) !important;
  box-shadow: 0 0 0 3px rgba(123, 184, 219, 0.1) !important;
}