/* Import Roboto Mono and Bebas Neue from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Mono:wght@300;400;500;600;700&display=swap');


/* Language switching */
.en-content {
    display: none !important;
}

.et-content {
    display: block;
}

body[lang="en"] .en-content {
    display: block;
}

body[lang="en"] .et-content {
    display: none;
}

/* Color scheme */
:root {
    --sage-green: #92aa8f;
    --beige-bg: #e3dab4;
    --sage-green-hover: #7d9879; /* Darker version for hover states */
}

body {
    background-color: var(--beige-bg);
    font-family: 'Roboto Mono', monospace;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.text-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.03em;
}

/* Hero section styling */
.hero-section {
    background-color: var(--sage-green); /* Changed to sage green */
    min-height: 70vh; /* Reduced from 80vh */
    display: flex;
    align-items: center; /* This will vertically center the container content */
}

/* Background utility classes */
.bg-sage {
    background-color: var(--sage-green);
}

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

/* Button styling */
.inline-block.bg-blue-600,
.inline-block.bg-gray-600 {
    background-color: var(--sage-green) !important;
    border: none;
}

.inline-block.bg-blue-600:hover,
.inline-block.bg-gray-600:hover,
.inline-block.hover\:bg-blue-700:hover,
.inline-block.hover\:bg-gray-700:hover {
    background-color: var(--sage-green-hover) !important;
}

/* Add this class for new buttons */
.btn-sage {
    background-color: var(--sage-green);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.2s;
}

.btn-sage:hover {
    background-color: var(--sage-green-hover);
}

/* Language switch */
.language-switch {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
}

/* Key information section with runners background */
.key-info-section {
    background-image: url('/images/runners.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: soft-light;
    position: relative;
}

.key-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--beige-bg);
    opacity: 0.85;
    z-index: -1;
}

.key-info-section > * {
    position: relative;
    z-index: 1;
}