/* Startbild i helskärm. Ligger under logga och meny, över griden. */

.hero {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--hero-bg);
  cursor: pointer;
  transition: opacity var(--hero-fade) ease, visibility var(--hero-fade);
}
.hero[hidden] { display: none; }
.hero.is-leaving { opacity: 0; visibility: hidden; }

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: var(--hero-fit);
  object-position: var(--hero-position);
  opacity: 0;
  animation: hero-in var(--hero-fade) ease forwards;
}
@keyframes hero-in { to { opacity: 1; } }

/* menyn döljs medan startbilden visas och tonas in när man går vidare till griden (loggan syns) */
.site-nav, .nav-toggle, .header-bar { transition: opacity var(--hero-fade) ease, visibility var(--hero-fade); }
/* loggan kan döljas på startbilden (Inställningar > Startsida) och tonas in vid griden */
.logo { transition: opacity var(--hero-fade) ease, visibility var(--hero-fade); }
html.hero-maybe .logo,
html.hero-open .logo { transition: none; opacity: var(--hero-logo-opacity); visibility: var(--hero-logo-visibility); }

html.hero-maybe .site-nav, html.hero-maybe .nav-toggle, html.hero-maybe .header-bar,
html.hero-open .site-nav,
html.hero-open .nav-toggle,
html.hero-open .header-bar { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }

/* griden går inte att scrolla medan startbilden visas */
html.hero-open, html.hero-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hero, .hero-img { transition: none; animation: none; opacity: 1; }
}

/* Text mitt på startbilden: rubrik 1, rubrik 2 och bildtext, utan bakgrund */
.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: var(--hero-text-items, center);
  justify-content: var(--hero-text-justify, center);
  gap: var(--hero-text-gap);
  padding: var(--hero-text-padding, 24px);
  text-align: var(--hero-text-align, center);
  color: var(--hero-text-color);
  text-shadow: var(--hero-text-shadow);
  pointer-events: none;
  opacity: 0;
  animation: hero-in var(--hero-fade) ease 200ms forwards;
}
.hero-text [hidden] { display: none; }
.hero-h1, .hero-h2 { white-space: nowrap; max-width: none; }   /* alltid en rad; krymps vid behov av KJHeroFit */
.hero-h1, .hero-h2, .hero-caption {
  padding: var(--hero-box-padding);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-h1 {
  margin: 0;
  background: var(--hero-h1-bg);
  color: var(--hero-h1-color, inherit);
  font-size: var(--hero-h1-size);
  font-weight: var(--hero-h1-weight);
  letter-spacing: var(--hero-h1-letter-spacing);
  text-transform: var(--hero-h1-transform);
  line-height: 1.05;
}
.hero-h2 {
  margin: 0;
  background: var(--hero-h2-bg);
  color: var(--hero-h2-color, inherit);
  font-size: var(--hero-h2-size);
  font-weight: var(--hero-h2-weight);
  letter-spacing: var(--hero-h2-letter-spacing);
  line-height: 1.3;
}
.hero-caption {
  margin: .6em 0 0;
  background: var(--hero-caption-bg);
  color: var(--hero-caption-color, inherit);
  font-size: var(--hero-caption-size);
  letter-spacing: var(--hero-caption-letter-spacing);
  text-transform: var(--hero-caption-transform);
}
/* bildtexten längst ner i stället för under rubrikerna */
.hero.caption-bottom .hero-caption {
  position: absolute;
  left: var(--hero-cap-left, 50%); bottom: var(--hero-caption-bottom);
  transform: translateX(var(--hero-cap-shift, -50%));
  max-width: calc(100% - 48px);
  margin: 0;
}

@media (max-width: 640px) {
  .hero-text { padding: 16px; }
  .hero-h1 { font-size: calc(var(--hero-h1-size) * var(--hero-mobile-scale)); }
  .hero-h2 { font-size: calc(var(--hero-h2-size) * var(--hero-mobile-scale)); }
}

/* Uppe till vänster: texten ligger och ser ut exakt som logotexten i headern (header.css), så att övergången till griden blir sömlös */
.hero.place-top-left .hero-text {
  padding: var(--logo-top) var(--logo-left);
  font-family: var(--logo-font, var(--font-family));
  gap: var(--logo-text-gap);
}
.hero.place-top-left .hero-h1,
.hero.place-top-left .hero-h2 {
  font-size: var(--logo-text-size);
  line-height: var(--logo-text-line-height);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--nav-transform);
  padding: var(--logo-text-padding);
}
.hero.place-top-left .hero-h1 { font-weight: var(--hero-h1-weight); }
.hero.place-top-left .hero-h2 {
  font-size: calc(var(--logo-text-size) * var(--logo-line2-factor, 0.55));
  font-weight: var(--hero-h2-weight);
  text-transform: var(--logo-text-line2-transform);
  letter-spacing: var(--hero-h2-letter-spacing);
}
@media (max-width: 640px) {
  .hero.place-top-left .hero-text { padding: var(--logo-top) var(--logo-left); }
  .hero.place-top-left .hero-h1 { font-size: var(--logo-text-size-mobile); }
  .hero.place-top-left .hero-h2 { font-size: calc(var(--logo-text-size-mobile) * var(--logo-line2-factor, 0.55)); }
}