/* Extra Mormor - Static CSS */

:root {
  /* KORREKTA FÄRGER från live-siten */
  --primary-orange: #9FA65A;
  --primary-blue: #507B6A;
  --secondary-green: #6B7A5C;
  --secondary-light-blue: #A4998E;
  --secondary-very-light-blue: #F8F6F3;
  --neutral-dark: #1A1A1A;
  --neutral-gray: #333333;
  --neutral-light: #F8F8F8;
  --neutral-white: #FFFFFF;
  
  /* Tillgänglighetsfärger */
  --text-primary: #1A1A1A;
  --text-secondary: #333333;
  --text-light: #555555;
}

/* Font families */
.font-primary { 
  font-family: 'Inter', sans-serif; 
}

.font-secondary { 
  font-family: 'Playfair Display', serif; 
}

/* Color utilities */
.text-primary-orange { color: var(--primary-orange); }
.text-primary-blue { color: var(--primary-blue); }
.text-secondary-green { color: var(--secondary-green); }

.bg-primary-orange { background-color: var(--primary-orange); }
.bg-primary-blue { background-color: var(--primary-blue); }
.bg-secondary-green { background-color: var(--secondary-green); }
.bg-secondary-light-blue { background-color: var(--secondary-light-blue); }
.bg-secondary-very-light-blue { background-color: var(--secondary-very-light-blue); }

/* Accessibility colors */
.text-accessible { color: var(--text-primary); }
.text-accessible-secondary { color: var(--text-secondary); }
.text-accessible-light { color: var(--text-light); }

/* Hero sections - INGA URL ENCODING PROBLEM! */
.hero-section {
  background-image: url('https://pub-6a68ab42031a43bf9e32106d2908da84.r2.dev/images/em_hero.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(159, 166, 90, 0.85) 0%, rgba(80, 123, 106, 0.75) 100%);
  z-index: 1;
}

.recruitment-hero {
  background-image: url('https://pub-6a68ab42031a43bf9e32106d2908da84.r2.dev/images/em_hero.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.recruitment-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(159, 166, 90, 0.85) 0%, rgba(80, 123, 106, 0.75) 100%);
  z-index: 1;
}

.hero-overlay {
  background: linear-gradient(135deg, rgba(159, 166, 90, 0.85) 0%, rgba(80, 123, 106, 0.75) 100%);
}

/* Hero text styling */
.hero-text { 
  color: #FFFFFF; 
  text-shadow: 0 2px 4px rgba(0,0,0,0.7); 
  font-weight: 600;
}

.hero-subtext { 
  color: #FFFFFF; 
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); 
}

/* Button styles */
.btn-gradient {
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-blue) 100%);
  color: white;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(159, 166, 90, 0.3);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-blue);
  border: 2px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: white;
  border-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Card effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Pulse animation */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Mobile menu */
#mobile-menu {
  display: none;
}

#mobile-menu.show {
  display: block;
}

/* Form styling */
input:focus, textarea:focus, select:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--primary-orange);
}

/* Success/Error messages */
.message-success {
  background-color: #10B981;
  color: white;
}

.message-error {
  background-color: #EF4444;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section {
    background-attachment: scroll;
  }
  
  .recruitment-hero {
    background-attachment: scroll;
  }
  
  #mobile-menu-button {
    display: block;
  }
  
  .hidden-mobile {
    display: none;
  }
}