/* New Color Theme - Mossy Creek Palette */
:root {
  /* New Color Palette */
  --midnight-green: #035453;        /* Primary dark green */
  --volcano-glow: #E4572E;       /* Accent red */
  --snow: #FFFBFA;      /* Light cream */
  --mossy-khaki: #C6C596;        /* Medium khaki */
  --raisin-black: #232023;       /* Dark text */
  --rainforest-glow: #1B4D3E;    /* Bright green */
  --vanilla-pearl: #FFF7E7;      /* Light cream */
  --creamy-beige: #ECDCC3;       /* Warm beige */
  
  /* Neo-Brutalism specific variables */
  --brutalist-border: 4px;
  --brutalist-shadow: 8px 8px 0px;
  --brutalist-shadow-large: 12px 12px 0px;
  --brutalist-radius: 0px;
}

/* Neo-Brutalism Core Styles */
.brutalist-card {
  border: var(--brutalist-border) solid var(--raisin-black);
  box-shadow: var(--brutalist-shadow) var(--raisin-black);
  border-radius: var(--brutalist-radius);
  background: var(--snow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brutalist-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--brutalist-shadow-large) var(--raisin-black);
}

.brutalist-button {
  border: var(--brutalist-border) solid var(--raisin-black);
  box-shadow: var(--brutalist-shadow) var(--raisin-black);
  border-radius: var(--brutalist-radius);
  background: var(--volcano-glow);
  color: var(--snow);
  padding: 12px 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brutalist-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--raisin-black);
  background: var(--midnight-green);
}

.brutalist-nav {
  border-bottom: var(--brutalist-border) solid var(--raisin-black);
  background: var(--snow);
  box-shadow: 0 var(--brutalist-border) 0 var(--raisin-black);
}

.brutalist-nav-item {
  border: var(--brutalist-border) solid var(--raisin-black);
  background: var(--creamy-beige);
  color: var(--raisin-black);
  padding: 8px 16px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.2s ease;
  margin: 0 4px;
}

.brutalist-nav-item:hover {
  background: var(--volcano-glow);
  color: var(--snow);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--raisin-black);
}

.brutalist-hero {
  background: var(--snow);
  border: var(--brutalist-border) solid var(--raisin-black);
  border-left: 12px solid var(--volcano-glow);
  padding: 3rem 2rem; /* Increased vertical padding for better breathing room */
  margin: 2rem 0; /* Increased margin for neo-brutalism boldness */
}

.brutalist-typography h1 {
  font-size: 2rem; /* Mobile-first: smaller size for phones */
  font-weight: 900;
  line-height: 0.95; /* Slightly adjusted for mobile readability */
  text-transform: uppercase;
  letter-spacing: -1px; /* Reduced letter spacing for mobile */
  margin-bottom: 1rem;
  color: var(--raisin-black);
  text-shadow: 2px 2px 0px var(--volcano-glow); /* Smaller shadow for mobile */
}

/* Responsive h1 - tablet and up */
@media (min-width: 640px) {
  .brutalist-typography h1 {
    font-size: 2.75rem; /* Medium screens */
    letter-spacing: -1.5px;
    text-shadow: 3px 3px 0px var(--volcano-glow);
  }
}

@media (min-width: 1024px) {
  .brutalist-typography h1 {
    font-size: 3.5rem; /* Original size for desktop */
    line-height: 0.9;
    letter-spacing: -2px;
    text-shadow: 4px 4px 0px var(--volcano-glow);
  }
}

.brutalist-typography h2 {
  font-size: 1.5rem; /* Mobile-first: smaller size for phones */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px; /* Reduced letter spacing for mobile */
  margin-bottom: 1rem;
  color: var(--midnight-green);
}

/* Responsive h2 - tablet and up */
@media (min-width: 640px) {
  .brutalist-typography h2 {
    font-size: 2rem; /* Medium screens */
    letter-spacing: -0.75px;
  }
}

@media (min-width: 1024px) {
  .brutalist-typography h2 {
    font-size: 2.5rem; /* Original size for desktop */
    letter-spacing: -1px;
  }
}

.brutalist-project-card {
  border: var(--brutalist-border) solid var(--raisin-black);
  box-shadow: var(--brutalist-shadow) var(--raisin-black);
  background: var(--vanilla-pearl);
  border-left: 8px solid var(--rainforest-glow);
  transition: all 0.2s ease;
  padding: 1.5rem; /* Added consistent internal padding */
  margin-bottom: 1.5rem; /* Added margin for card separation */
}

.brutalist-project-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0px var(--raisin-black);
  border-left-color: var(--volcano-glow);
}

.brutalist-blog-card {
  border: var(--brutalist-border) solid var(--raisin-black);
  box-shadow: var(--brutalist-shadow) var(--raisin-black);
  background: var(--snow);
  transition: all 0.2s ease;
  margin-bottom: 2rem; /* Increased for better section separation */
  padding: 1.5rem; /* Added consistent internal padding */
}

.brutalist-blog-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px var(--raisin-black);
}

.brutalist-tag {
  border: 2px solid var(--raisin-black);
  background: var(--mossy-khaki);
  color: var(--raisin-black);
  padding: 6px 14px; /* Slightly increased padding for better touch targets */
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin: 0 0.5rem 0.5rem 0; /* Added consistent margin for tag spacing */
  display: inline-block; /* Ensure consistent spacing behavior */
}

.brutalist-footer {
  border-top: var(--brutalist-border) solid var(--raisin-black);
  background: var(--raisin-black);
  color: var(--snow);
  margin-top: 3rem;
}

/* Dark mode brutalist styles */
.dark .brutalist-card {
  border-color: var(--vanilla-pearl);
  box-shadow: var(--brutalist-shadow) var(--vanilla-pearl);
  background: var(--midnight-green);
  color: var(--vanilla-pearl);
}

.dark .brutalist-card:hover {
  box-shadow: var(--brutalist-shadow-large) var(--vanilla-pearl);
}

.dark .brutalist-nav {
  border-color: var(--vanilla-pearl);
  background: var(--midnight-green);
  box-shadow: 0 var(--brutalist-border) 0 var(--vanilla-pearl);
}

.dark .brutalist-nav-item {
  border-color: var(--vanilla-pearl);
  background: var(--rainforest-glow);
  color: var(--vanilla-pearl);
}

.dark .brutalist-nav-item:hover {
  background: var(--volcano-glow);
  box-shadow: 4px 4px 0px var(--vanilla-pearl);
}

.dark .brutalist-hero {
  background: var(--midnight-green);
  border-color: var(--vanilla-pearl);
  color: var(--vanilla-pearl);
}

.dark .brutalist-typography h1 {
  color: var(--vanilla-pearl);
  text-shadow: 2px 2px 0px var(--volcano-glow); /* Mobile shadow */
}

/* Responsive dark mode h1 shadows */
@media (min-width: 640px) {
  .dark .brutalist-typography h1 {
    text-shadow: 3px 3px 0px var(--volcano-glow);
  }
}

@media (min-width: 1024px) {
  .dark .brutalist-typography h1 {
    text-shadow: 4px 4px 0px var(--volcano-glow);
  }
}

.dark .brutalist-typography h2 {
  color: var(--vanilla-pearl);
}

.dark .brutalist-project-card {
  border-color: var(--vanilla-pearl);
  box-shadow: var(--brutalist-shadow) var(--vanilla-pearl);
  background: var(--rainforest-glow);
  color: var(--vanilla-pearl);
}

.dark .brutalist-project-card:hover {
  box-shadow: 10px 10px 0px var(--vanilla-pearl);
}

.dark .brutalist-blog-card {
  border-color: var(--vanilla-pearl);
  box-shadow: var(--brutalist-shadow) var(--vanilla-pearl);
  background: var(--rainforest-glow);
  color: var(--vanilla-pearl);
}

.dark .brutalist-blog-card:hover {
  box-shadow: 8px 8px 0px var(--vanilla-pearl);
}

/* Override Tailwind colors with new palette */
.text-primary,
.dark .dark\:text-white,
.text-blue-dark {
  color: var(--raisin-black) !important;
}

.dark .text-primary,
.dark .dark\:text-white {
  color: var(--vanilla-pearl) !important;
}

.text-secondary,
.text-green,
.hover\:text-secondary:hover,
.hover\:text-green:hover,
.group:hover .group-hover\:text-secondary,
.group:hover .group-hover\:text-green {
  color: var(--volcano-glow) !important;
}

.bg-primary,
.dark .dark\:bg-primary {
  background-color: var(--midnight-green) !important;
}

.bg-secondary,
.bg-green {
  background-color: var(--rainforest-glow) !important;
}

.bg-green-light {
  background-color: var(--snow) !important;
}

.bg-yellow-light,
.bg-yellow-lighter {
  background-color: var(--creamy-beige) !important;
}

.bg-grey-lightest {
  background-color: var(--vanilla-pearl) !important;
}

.bg-grey-light {
  background-color: var(--mossy-khaki) !important;
}

.border-primary {
  border-color: var(--midnight-green) !important;
}

.border-secondary,
.border-green {
  border-color: var(--volcano-glow) !important;
}

.border-grey-lighter {
  border-color: var(--mossy-khaki) !important;
}

.dark .dark\:border-secondary,
.dark .dark\:border-green-light {
  border-color: var(--rainforest-glow) !important;
}

/* Hover states */
.hover\:bg-green:hover {
  background-color: var(--volcano-glow) !important;
}

.hover\:border-secondary:hover {
  border-color: var(--volcano-glow) !important;
}

/* Group hover states */
.group:hover .group-hover\:bg-yellow {
  background-color: var(--rainforest-glow) !important;
}

/* Focus states */
.focus\:border-secondary:focus,
.focus\:ring-secondary:focus {
  border-color: var(--volcano-glow) !important;
  --tw-ring-color: var(--volcano-glow) !important;
}

/* Prose styles - for blog content */
.prose {
  color: var(--raisin-black) !important;
}

.prose :where(a):not(:where([class~=not-prose] *)) {
  color: var(--volcano-glow) !important;
}

.prose :where(a):not(:where([class~=not-prose] *)):hover {
  color: var(--midnight-green) !important;
}

.prose :where(blockquote):not(:where([class~=not-prose] *)) {
  background-color: var(--snow) !important;
  border: var(--brutalist-border) solid var(--raisin-black) !important;
  border-left: 8px solid var(--volcano-glow) !important;
  box-shadow: var(--brutalist-shadow) var(--raisin-black) !important;
  color: var(--raisin-black) !important;
  margin: 1.5rem 0 !important;
  padding: 1.5rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  quotes: none !important;
}

.prose :where(blockquote p):not(:where([class~=not-prose] *)) {
  margin: 0 !important;
  color: var(--raisin-black) !important;
}

.prose :where(h1,h2,h3,h4,h5,h6):not(:where([class~=not-prose] *)) {
  color: var(--midnight-green) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.5px !important;
}

.prose :where(ul>li):not(:where([class~=not-prose] *)):before {
  background-color: var(--volcano-glow) !important;
}

.prose :where(strong):not(:where([class~=not-prose] *)) {
  color: var(--midnight-green) !important;
  font-weight: 800 !important;
}

.prose :where(code):not(:where([class~=not-prose] *)) {
  background-color: var(--creamy-beige) !important;
  color: var(--raisin-black) !important;
  padding: 0.25rem 0.5rem !important;
  border: 2px solid var(--raisin-black) !important;
  font-weight: 600 !important;
}

/* Dark mode prose */
.dark .dark\:prose-dark {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(a):not(:where([class~=not-prose] *)) {
  color: var(--rainforest-glow) !important;
}

.dark .dark\:prose-dark :where(a):not(:where([class~=not-prose] *)):hover {
  color: var(--volcano-glow) !important;
}

.dark .dark\:prose-dark :where(h1,h2,h3,h4,h5,h6):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.5px !important;
}

.dark .dark\:prose-dark :where(ul>li):not(:where([class~=not-prose] *)):before {
  background-color: var(--rainforest-glow) !important;
}

.dark .dark\:prose-dark :where(blockquote):not(:where([class~=not-prose] *)) {
  background-color: var(--rainforest-glow) !important;
  border: var(--brutalist-border) solid var(--vanilla-pearl) !important;
  border-left: 8px solid var(--volcano-glow) !important;
  box-shadow: var(--brutalist-shadow) var(--vanilla-pearl) !important;
  color: var(--vanilla-pearl) !important;
  margin: 1.5rem 0 !important;
  padding: 1.5rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  quotes: none !important;
}

.dark .dark\:prose-dark :where(blockquote p):not(:where([class~=not-prose] *)) {
  margin: 0 !important;
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(strong):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
  font-weight: 800 !important;
}

.dark .dark\:prose-dark :where(code):not(:where([class~=not-prose] *)) {
  background-color: var(--midnight-green) !important;
  color: var(--vanilla-pearl) !important;
  padding: 0.25rem 0.5rem !important;
  border: 2px solid var(--vanilla-pearl) !important;
  font-weight: 600 !important;
}

/* Twitter card styles */
.twitter-card {
  background-color: var(--creamy-beige) !important;
}

.twitter-card .twitter-card-title {
  color: var(--raisin-black) !important;
}

.twitter-card .twitter-card-source {
  color: var(--raisin-black) !important;
}

.twitter-card .twitter-card-btn {
  border-color: var(--midnight-green) !important;
  color: var(--midnight-green) !important;
}

.twitter-card .twitter-card-btn:hover {
  background-color: var(--midnight-green) !important;
  color: var(--vanilla-pearl) !important;
}

/* Fill current for SVGs */
.fill-current {
  fill: currentColor !important;
}

/* Navigation underline animation */
.group:hover .group-hover\:h-2 {
  background-color: var(--rainforest-glow) !important;
}

/* Blog category color classes */
.bg-green {
  background-color: var(--rainforest-glow) !important;
}

.bg-primary {
  background-color: var(--midnight-green) !important;
}

.bg-secondary {
  background-color: var(--volcano-glow) !important;
}

.bg-grey-light {
  background-color: var(--mossy-khaki) !important;
}

.bg-yellow-light {
  background-color: var(--creamy-beige) !important;
}

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

.text-snow {
  color: var(--snow) !important;
}

.text-primary {
  color: var(--raisin-black) !important;
}

.text-green {
  color: var(--rainforest-glow) !important;
}

.text-green-dark {
  color: var(--midnight-green) !important;
}

/* Dark mode text-green-light override for "All posts" link */
.dark .dark\:text-green-light {
  color: var(--volcano-glow) !important;
}

/* Dark mode override */
.dark .dark\:bg-midnight-green {
  background-color: var(--midnight-green) !important;
}

.dark .dark\:text-grey-light {
  color: var(--mossy-khaki) !important;
}

.dark .text-grey-light {
  color: var(--mossy-khaki) !important;
}

.dark .dark\:border-grey-lighter {
  border-color: var(--rainforest-glow) !important;
}

/* Fix for text-grey in dark mode */
.text-grey {
  color: var(--raisin-black) !important;
}

.dark .text-grey {
  color: var(--mossy-khaki) !important;
}

/* Enhanced dark mode prose styling */
.dark .dark\:prose-dark :where(strong):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(em):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(code):not(:where([class~=not-prose] *)) {
  background-color: var(--rainforest-glow) !important;
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(blockquote):not(:where([class~=not-prose] *)) {
  background-color: var(--rainforest-glow) !important;
  border-color: var(--volcano-glow) !important;
  color: var(--vanilla-pearl) !important;
}

/* Blockquote tweaks for actual dark mode usage with Tailwind Typography (prose-invert)
   - Use volcano glow for the left border accent
   - Use primary green for the blockquote text in dark mode
*/
/* Dark mode blockquote inside Tailwind Typography (prose-invert)
   - Give it a dark background and light text to differ from light mode
   - Keep the accent border volcano-glow
*/
.dark .prose.prose-invert :where(blockquote):not(:where([class~=not-prose] *)) {
  background-color: var(--midnight-green) !important;
  color: var(--vanilla-pearl) !important;
  border-left-color: var(--volcano-glow) !important;
  border-color: var(--volcano-glow) !important;
}

/* Ensure all prose text elements are visible in dark mode */
.dark .dark\:prose-dark :where(p):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(li):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

/* Dark mode styling */
.dark .dark\:bg-rainforest-glow {
  background-color: var(--rainforest-glow) !important;
}

.dark .dark\:text-vanilla-pearl {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:text-volcano-glow {
  color: var(--volcano-glow) !important;
}

.dark .dark\:border-vanilla-pearl {
  border-color: var(--vanilla-pearl) !important;
}

.dark .dark\:hover\:text-volcano-glow:hover {
  color: var(--volcano-glow) !important;
}

/* Ensure volcano-glow hover states work properly */
.hover\:text-volcano-glow:hover {
  color: var(--volcano-glow) !important;
}

/* Blog title styling - ensure volcano-glow is used consistently */
.text-secondary {
  color: var(--volcano-glow) !important;
}

.dark .text-secondary {
  color: var(--volcano-glow) !important;
}

.dark .dark\:text-secondary {
  color: var(--volcano-glow) !important;
}

/* Explicit utility classes for direct color name usage */
.bg-volcano-glow { background-color: var(--volcano-glow) !important; }
.text-volcano-glow { color: var(--volcano-glow) !important; }
.bg-vanilla-pearl { background-color: var(--vanilla-pearl) !important; }
.text-vanilla-pearl { color: var(--vanilla-pearl) !important; }
.bg-midnight-green { background-color: var(--midnight-green) !important; }
.text-midnight-green { color: var(--midnight-green) !important; }
.bg-rainforest-glow { background-color: var(--rainforest-glow) !important; }
.text-rainforest-glow { color: var(--rainforest-glow) !important; }

/* Copy button hover/focus helpers */
.btn-copy { transition: filter .15s ease, opacity .15s ease; }
.btn-copy:hover { filter: brightness(1.1); }
.btn-copy:active { filter: brightness(0.95); }
.btn-copy:focus { outline: 2px solid var(--volcano-glow); outline-offset: 2px; }

/* Improved spacing utilities for neo-brutalism layout */
.brutalist-section {
  margin: 3rem 0; /* Consistent section spacing */
}

.brutalist-section:first-child {
  margin-top: 1.5rem; /* Reduced top margin for first section */
}

.brutalist-section:last-child {
  margin-bottom: 1.5rem; /* Reduced bottom margin for last section */
}

/* Container padding improvements for mobile */
@media (max-width: 640px) {
  .brutalist-hero {
    padding: 2rem 1.5rem; /* Reduced padding on mobile for better fit */
    margin: 1.5rem 0; /* Reduced margin on mobile */
  }
  
  .brutalist-project-card,
  .brutalist-blog-card {
    padding: 1.25rem; /* Slightly reduced padding on mobile */
  }

  /* Mobile-specific improvements for section titles */
  .brutalist-section .brutalist-card .flex.items-center.justify-between {
    flex-direction: column; /* Stack items vertically on mobile */
    align-items: flex-start; /* Align to start for better mobile layout */
    gap: 1rem; /* Add gap between title and button */
  }
  
  .brutalist-section .brutalist-card .flex.items-center.justify-between > a {
    align-self: flex-end; /* Align button to right even when stacked */
  }

  /* Ensure section titles with icons don't overflow on mobile */
  .brutalist-section .brutalist-card .flex.items-center:first-child {
    flex-wrap: wrap; /* Allow wrapping if needed */
    gap: 0.75rem; /* Consistent gap between icon and title */
  }
}

/* Grid spacing improvements */
.brutalist-grid {
  display: grid;
  gap: 1.5rem; /* Consistent gap for all grid layouts */
}

@media (min-width: 768px) {
  .brutalist-grid {
    gap: 2rem; /* Larger gap on desktop for better spacing */
  }
}