<script setup lang="ts">
// experimenta header with branding
</script>

<template>
  <header class="header-wrapper">
    <div class="header-content">
      <NuxtLink to="/" class="logo">
        <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="logo-svg" />
      </NuxtLink>
    </div>
  </header>
</template>

<style scoped>
.header-wrapper {
  background: rgba(46, 16, 101, 0.95);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 100;
  padding: 30px 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo-svg {
  width: 300px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
  .logo-svg {
    width: 250px;
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .logo-svg {
    width: 200px;
  }
}
</style>
