/* sauna-wellness-footer 1.0.0 · vanilla nabouw van 21st.dev @scrollxui/footer-with-minimal-outline.
   Donker vlak in --m-accent2 met tekst in --m-bg; het reuzenwoordmerk is omlijnde tekst in --m-primary.
   De verborgen beginstand van de entree geldt alleen als module.js de klasse is-armed zet. */
.msm-sauna-wellness-footer {
  --swf-ease: cubic-bezier(0, 0, 0.58, 1);
  --swf-text: color-mix(in srgb, var(--m-bg, #e8ece8) 84%, var(--m-accent2, #263f3b));
  --swf-soft: color-mix(in srgb, var(--m-bg, #e8ece8) 66%, var(--m-accent2, #263f3b));
  --swf-hover: color-mix(in srgb, var(--m-primary, #b46f43) 60%, var(--m-bg, #e8ece8));
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  padding: 80px 32px;
  background: var(--m-accent2, #263f3b);
  color: var(--swf-soft);
  font-family: var(--m-font-body, 'Nunito Sans', ui-sans-serif, system-ui, sans-serif);
  font-size: 0.875rem;
  line-height: 1.43;
}

.msm-sauna-wellness-footer .swf-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 80rem;
  margin: 0 auto;
}

.msm-sauna-wellness-footer .swf-brandrow {
  margin: 0 0 16px;
}

.msm-sauna-wellness-footer .swf-brand {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--m-bg, #e8ece8);
  font-family: var(--m-font-display, 'Spectral', ui-serif, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.msm-sauna-wellness-footer .swf-line {
  max-width: 22rem;
  margin: 8px 0 0 8px;
}

.msm-sauna-wellness-footer .swf-note {
  margin-top: 16px;
}

.msm-sauna-wellness-footer .swf-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
  width: 100%;
  margin-top: 40px;
}

.msm-sauna-wellness-footer .swf-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.msm-sauna-wellness-footer .swf-head {
  margin: 0;
  color: var(--m-bg, #e8ece8);
  font-weight: 700;
}

.msm-sauna-wellness-footer .swf-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--swf-text);
  overflow-wrap: anywhere;
}

.msm-sauna-wellness-footer .swf-list a {
  color: var(--swf-text);
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.msm-sauna-wellness-footer .swf-list a:hover,
.msm-sauna-wellness-footer .swf-brand:hover {
  color: var(--swf-hover);
}

.msm-sauna-wellness-footer a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--swf-hover);
  outline-offset: 3px;
}

/* Het reuzenwoordmerk: transparante vulling met een lijn van 1,5 px. */
.msm-sauna-wellness-footer .swf-mark {
  margin: 80px 0 0;
  color: transparent;
  font-family: var(--m-font-display, 'Spectral', ui-serif, Georgia, serif);
  font-size: clamp(3rem, 15vw, 13rem);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px var(--m-primary, #b46f43);
  -webkit-text-fill-color: transparent;
  user-select: none;
}

/* Entree: alleen met script, één keer bij inview. */
.msm-sauna-wellness-footer.is-armed [data-swf-item] {
  opacity: 0;
  transform: translateY(20px);
}

.msm-sauna-wellness-footer.is-armed [data-swf-mark] {
  opacity: 0;
  transform: translateY(40px);
}

.msm-sauna-wellness-footer.is-armed [data-swf-item].is-in,
.msm-sauna-wellness-footer.is-armed [data-swf-mark].is-in {
  opacity: 1;
  transform: none;
}

.msm-sauna-wellness-footer.is-armed [data-swf-item].is-in {
  transition: opacity 500ms var(--swf-ease) var(--swf-delay, 0ms), transform 500ms var(--swf-ease) var(--swf-delay, 0ms);
}

.msm-sauna-wellness-footer.is-armed [data-swf-mark].is-in {
  transition: opacity 800ms var(--swf-ease), transform 800ms var(--swf-ease);
}

@media (min-width: 640px) {
  .msm-sauna-wellness-footer .swf-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .msm-sauna-wellness-footer .swf-top { padding: 0 32px; }
}

@media (min-width: 1024px) {
  .msm-sauna-wellness-footer .swf-top {
    flex-direction: row;
    gap: 40px;
  }
  .msm-sauna-wellness-footer .swf-about { flex: none; margin-right: 16px; }
  .msm-sauna-wellness-footer .swf-cols {
    grid-template-columns: repeat(4, max-content);
    width: auto;
    margin-top: 0;
  }
  .msm-sauna-wellness-footer .swf-col { max-width: 15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-sauna-wellness-footer.is-armed [data-swf-item],
  .msm-sauna-wellness-footer.is-armed [data-swf-mark] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}