/* ============================================
   HERO.CSS - Hero-seksjoner
   ============================================ */

/* === BASE HERO SECTION === */
.hero-section {
  background-color: #9ADBE8;
  background-image: url("../../images/frontpage-hero-blue.2948310c4b04.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text);
  padding: var(--spacing-3xl) 0;
}


/* Kompakt variant når det vises resultater */
.hero-section.with-results {
  padding: var(--spacing-xl) 0;
}

.hero-section.with-results .welcome-info {
  display: none;
}

#page-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}


/* === DASHBOARD HERO === */
.dashboard-hero-wrapper {
  background-color: transparent;
  padding: var(--spacing-xl) 0;
}

.dashboard-hero-wrapper.with-results {
  padding: var(--spacing-lg) 0;
}

.dashboard-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-xl) 0 var(--spacing-lg);
}

.hero-title {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--color-text);
  margin: var(--spacing-xs) 0 0;
}

.hero-subtitle {
  color: var(--color-text-light);
  margin: 0;
}