/* Custom color palette inspired by minimalist design */
:root {
  --cream-50: #f5f3ef;
  --sage-600: #6b7d5c;
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
}

/* Custom font family */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.font-inter {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Custom background colors */
.bg-cream-50 {
  background-color: var(--cream-50);
}

.bg-sage-600 {
  background-color: var(--sage-600);
}

.text-sage-600 {
  color: var(--sage-600);
}

/* Mobile navigation */
.mobile-nav {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav-open {
  display: block;
  max-height: 500px;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

/* Cookie popup */
.cookie-popup {
  position: fixed;
  bottom: -500px;
  right: 20px;
  z-index: 9999;
  transition: bottom 0.5s ease;
}

.cookie-popup-show {
  bottom: 20px;
}

@media (max-width: 640px) {
  .cookie-popup {
    left: 20px;
    right: 20px;
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Form input focus states */
input:focus,
textarea:focus {
  outline: none;
}

/* Custom scrollbar with minimalist design */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cream-50);
}

::-webkit-scrollbar-thumb {
  background: var(--stone-400);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--stone-600);
}

/* Flip card animations */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-front {
  position: relative;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Accordion animations */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion-item.accordion-open .accordion-content {
  max-height: 500px;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

/* Expandable card overlay */
.expandable-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.expandable-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(107, 125, 92, 0.85), rgba(107, 125, 92, 0.95));
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.expandable-card:hover .expandable-overlay {
  opacity: 1;
}

/* Image effects */
img {
  transition: transform 0.6s ease, filter 0.6s ease;
}

.grayscale {
  filter: grayscale(100%);
}

/* Smooth transitions for all interactive elements */
a,
button {
  transition: all 0.3s ease;
}

/* Header shadow on scroll */
header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Typography refinements */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  letter-spacing: -0.02em;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

/* Border utilities */
.border-stone-200 {
  border-color: var(--stone-200);
}

.border-stone-300 {
  border-color: var(--stone-300);
}

.border-stone-700 {
  border-color: var(--stone-700);
}

/* Text color utilities */
.text-stone-400 {
  color: var(--stone-400);
}

.text-stone-500 {
  color: var(--stone-500);
}

.text-stone-600 {
  color: var(--stone-600);
}

.text-stone-700 {
  color: var(--stone-700);
}

.text-stone-800 {
  color: var(--stone-800);
}

.text-stone-900 {
  color: var(--stone-900);
}

/* Background utilities */
.bg-stone-800 {
  background-color: var(--stone-800);
}

.bg-stone-900 {
  background-color: var(--stone-900);
}

/* Responsive utilities */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }
}

/* Print styles */
@media print {
  header,
  footer,
  .cookie-popup {
    display: none;
  }
}

/* Additional animation utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease;
}

/* Backdrop blur effect */
.backdrop-blur-sm {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}