/* Updated color scheme and design system to match screenshot style */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Custom color palette matching the screenshot */
:root {
  --cream: #f5f1e8;
  --forest-green: #2b5f4f;
  --forest-green-dark: #1e4538;
  --sky-blue: #c8e6f5;
  --coral: #e57a60;
  --coral-dark: #d06a50;
}

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

.bg-forest-green {
  background-color: var(--forest-green);
}

.bg-forest-green-dark {
  background-color: var(--forest-green-dark);
}

.bg-sky-blue {
  background-color: var(--sky-blue);
}

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

.text-coral {
  color: var(--coral);
}

.hover\:bg-coral:hover {
  background-color: var(--coral);
}

.hover\:bg-coral-dark:hover {
  background-color: var(--coral-dark);
}

.hover\:text-coral:hover {
  color: var(--coral);
}

.hover\:text-coral-dark:hover {
  color: var(--coral-dark);
}

.border-coral {
  border-color: var(--coral);
}

.focus\:border-coral:focus {
  border-color: var(--coral);
}

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

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

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

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
}

.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}

/* Expandable card effect */
.expandable-card {
  transition: all 0.4s ease;
}

.expandable-card.expanded {
  background-color: #1c1c1c;
  transform: scale(1.02);
}

.expandable-card:hover {
  background-color: #2a2a2a;
}

/* Rotate card effect */
.rotate-card {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.rotate-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Team card effect */
.team-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Fade in animation */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Focus styles */
input:focus,
textarea:focus,
button:focus,
a:focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--coral);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--coral-dark);
}

/* Form styling */
input,
textarea {
  font-family: inherit;
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

button,
a {
  cursor: pointer;
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Cookie popup shadow */
#cookiePopup {
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
}

/* Mobile menu transition */
#mobileMenu {
  transition: all 0.3s ease;
}

/* Success/error states */
.border-green-500 {
  border-color: #22c55e !important;
}

.border-red-500 {
  border-color: #ef4444 !important;
}

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

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }
}

/* Print styles */
@media print {
  header,
  footer,
  #cookiePopup,
  button {
    display: none;
  }

  body {
    background: white;
    color: black;
  }
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Added smooth hover transitions for all interactive elements */
a,
button,
.flip-card,
.expandable-card,
.rotate-card,
.team-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced shadow effects */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-2xl:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Gradient overlays for team cards */
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-black {
  --tw-gradient-from: #000;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.to-transparent {
  --tw-gradient-to: transparent;
}