/**
 * MODULE: 404-section.css
 *
 * Purpose:
 *  - Full-width hero-like section with background image
 *  - Responsive text and button centered
 *  - All sizing/color controlled via inline CSS variables from PHP
 */

.atx-404-section {
  position: relative;
  width: 100%;
  padding-top: var(--atx-404-pad-top);
  padding-bottom: var(--atx-404-pad-bottom);
  padding-left: var(--atx-404-pad-x);
  padding-right: var(--atx-404-pad-x);

  /* configurable hero height */
  min-height: var(--atx-404-min-h);

  text-align: var(--atx-404-text-align);
  background-image: var(--atx-404-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay for readability */
.atx-404-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  z-index: 0;
}

.atx-404-section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--atx-404-max-width-inner);
  margin: 0 auto;

  /* NEW ↓ */
  transform: translateY(33%);
}


.atx-404-section__headline {
  color: var(--atx-404-headline-color);
  font-size: var(--atx-404-headline-fs);
  font-weight: var(--atx-404-headline-fw);
  margin-bottom: var(--atx-404-headline-mb);
  margin-top: 3rem !important;
  text-transform: none;
}

.atx-404-section__bodytext {
  color: var(--atx-404-body-color);
  font-size: var(--atx-404-body-fs);
  line-height: var(--atx-404-body-lh);
  margin-bottom: var(--atx-404-body-mb);
}

.atx-404-section__cta {
  margin: 0;
}

/* Button now uses global atx-btn system.
   Keep ONLY hero-specific tweaks here. */
.atx-404-section__button {
  min-width: var(--atx-404-cta-min-w);

  /* smooth transitions */
  transition:
    transform 0.18s ease,
    font-size 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
  will-change: transform, font-size, box-shadow, color, background-color;
}

/* Hover / focus / active states:
   - Keep Åre red
   - Keep white text
   - Add soft shadow “lift”
   - Gentle scale & slight font-size bump
*/
.atx-404-section__button:hover,
.atx-404-section__button:focus,
.atx-404-section__button:active {
  transform: scale(1.06);
  font-size: calc(var(--btn-font-lg) * 1.05);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  /* NEW ↓ */
  color: var(--are-red) !important;
  background-color: #ffffff !important;
}

/* Optional: prevent browser link color overrides */
.atx-404-section__button:visited {
  color: var(--btn-primary-text);
}