/*
 * login.css: the public login pages (index.php / index_file.php, the
 * ActivTrax marketing home page, and Clubs_Login.php).
 *
 * Loads after css/atx-ui.css. Keeps the long-standing www.activtrax.com look
 * (sky-blue band, yellow menu, white panel over a gray page, black footer,
 * dark slideshow panels) on atx-ui tokens and components, mobile first.
 * The page colors below are the only place this file picks palette values;
 * this marketing page intentionally differs from the navy app shell.
 */

body.atx-home {
  --atx-home-band: var(--atx-blue-400);
  --atx-home-page: var(--atx-color-surface-sunken);
  --atx-home-menu: var(--atx-color-brand-accent);
  --atx-home-menu-text: var(--atx-gray-700);
  --atx-home-dark: var(--atx-gray-900);
  --atx-home-dark-text: var(--atx-gray-300);
  --atx-home-max: 62.5rem;            /* 1000px, the old page width */
  --atx-home-overlap: var(--atx-space-6);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--atx-home-page);
}

/* --- Band: logo and the yellow menu ------------------------------------- */
.atx-home__band {
  background: var(--atx-home-band);
  padding: var(--atx-space-3) var(--atx-gutter) calc(var(--atx-home-overlap) + var(--atx-space-3));
}
.atx-home__band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--atx-space-3);
  max-width: var(--atx-home-max);
  margin: 0 auto;
}
.atx-home__logo { display: flex; align-items: center; min-height: var(--atx-touch-target); }
.atx-home__logo img { display: block; width: 9rem; height: auto; }
.atx-home__menu {
  display: flex;
  padding: 0 var(--atx-space-2);
  background: var(--atx-home-menu);
  border-radius: var(--atx-radius-md);
  box-shadow: var(--atx-shadow-sm);
}
.atx-home__menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--atx-touch-target);
  padding: 0 var(--atx-space-3);
  color: var(--atx-home-menu-text);
  font-size: var(--atx-text-sm);
  font-weight: var(--atx-weight-semibold);
  text-decoration: none;
}
.atx-home__menu a:hover { color: var(--atx-color-text); text-decoration: underline; }

/* --- White panel ------------------------------------------------------- */
.atx-home__panel {
  flex: 1 0 auto;
  width: calc(100% - 2 * var(--atx-space-2));
  max-width: var(--atx-home-max);
  margin: calc(var(--atx-home-overlap) * -1) auto 0;
  padding: var(--atx-space-4) var(--atx-gutter) var(--atx-space-6);
  background: var(--atx-color-surface);
  border-radius: var(--atx-radius-lg) var(--atx-radius-lg) 0 0;
  box-shadow: var(--atx-shadow-sm);
}
.atx-home__panel--narrow > * {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- Login form ---------------------------------------------------------- */
.atx-home__top > * { max-width: 28rem; margin-left: auto; margin-right: auto; }
.atx-login__title { text-align: center; }
.atx-login__submit {
  width: 100%;
  min-height: 3rem;
  font-size: var(--atx-text-lg);
}
.atx-login__extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--atx-space-4);
  margin-top: var(--atx-space-2);
}
.atx-login__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--atx-touch-target);
}
.atx-login__hint {
  margin-top: var(--atx-space-4);
  color: var(--atx-color-text-muted);
  font-size: var(--atx-text-sm);
  text-align: center;
}

/* --- Hero: slideshow picture and the two marketing panels ---------------- */
.atx-home__hero {
  margin: var(--atx-space-5) calc(var(--atx-gutter) * -1) 0;
}
.atx-home__slides { overflow: hidden; }
.atx-home__slide { display: none; }

/* Phones: the middle slide, cropped to the people; its headline as text */
.atx-home__slide:nth-child(2) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 12% 50%;
}
.atx-home__tagline {
  margin: var(--atx-space-4) var(--atx-gutter) 0;
  font-size: var(--atx-text-lg);
  font-weight: var(--atx-weight-semibold);
  line-height: var(--atx-leading-tight);
  color: var(--atx-gray-700);
}

.atx-home__tabs {
  display: grid;
  gap: var(--atx-space-4);
  margin: var(--atx-space-4) var(--atx-gutter) 0;
}
.atx-home__tab {
  padding: var(--atx-space-4);
  background: var(--atx-home-dark);
  color: var(--atx-color-on-brand);
  border-radius: var(--atx-radius-lg);
}
.atx-home__tab-title {
  margin: 0;
  color: var(--atx-color-on-brand);
  font-size: var(--atx-text-2xl);
}
.atx-home__tab-sub {
  margin: var(--atx-space-1) 0 0;
  color: var(--atx-home-dark-text);
  font-size: var(--atx-text-sm);
}
.atx-home__tab-body { margin-top: var(--atx-space-3); }
.atx-home__tab-body p { font-size: var(--atx-text-sm); }

/* Yellow bar under the slideshow, a little wider than the panel */
.atx-home__bar {
  height: 1.75rem;
  margin: var(--atx-space-5) calc((var(--atx-gutter) + var(--atx-space-2)) * -1) 0;
  background: var(--atx-home-menu);
  border-radius: var(--atx-radius-sm);
  box-shadow: var(--atx-shadow-sm);
}

/* Blue info box */
.atx-home__info {
  max-width: 24rem;
  margin: var(--atx-space-5) auto 0;
  padding: var(--atx-space-4) var(--atx-space-5);
  background: var(--atx-color-primary);
  color: var(--atx-color-on-primary);
  border-radius: var(--atx-radius-lg);
}
.atx-home__info p { margin: 0; }

/* --- Footer -------------------------------------------------------------- */
.atx-home__footer {
  padding: var(--atx-space-4) var(--atx-gutter) var(--atx-space-6);
  background: var(--atx-home-dark);
  color: var(--atx-home-dark-text);
  font-size: var(--atx-text-sm);
}
.atx-home__footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--atx-space-4);
  max-width: var(--atx-home-max);
  margin: 0 auto;
}
.atx-home__footer p { margin: 0; }
.atx-home__footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--atx-space-4);
}
.atx-home__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--atx-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.atx-home__footer-links { gap: 0 var(--atx-space-3); }
.atx-home__footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--atx-touch-target);
  color: var(--atx-home-dark-text);
}
.atx-home__footer a:hover { color: var(--atx-color-on-brand); }

/* --- md: full slide picture, two panels side by side ---------------------- */
@media (min-width: 768px) {
  body.atx-home { --atx-home-overlap: var(--atx-space-7); }
  .atx-home__logo img { width: 12.8125rem; }   /* 205px, the logo's own size */
  .atx-home__slide:nth-child(2) { aspect-ratio: auto; }
  .atx-home__tagline {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .atx-home__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atx-home__panel { width: calc(100% - 2 * var(--atx-gutter)); }
}

/* --- lg: login fields on one line at the top right, as before -------------- */
@media (min-width: 992px) {
  .atx-home__top > * { max-width: none; }
  .atx-home__top .atx-login--bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--atx-space-2);
  }
  .atx-login--bar .atx-login__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .atx-login--bar .atx-login__field { width: 13rem; margin-bottom: 0; }
  .atx-login--bar .atx-login__submit { width: auto; min-height: var(--atx-control-height); font-size: var(--atx-text-md); }
  .atx-login--bar .atx-login__extras {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 0;
    font-size: var(--atx-text-sm);
  }
  /* The slide pictures have a white strip at the top: tuck it under the
     login row, as the old page did. */
  .atx-home__top { position: relative; z-index: 1; }
  .atx-home__hero { margin-top: calc(var(--atx-space-5) * -1); }
}

/* Mouse users: the old slideshow. Hovering or focusing a panel raises it and
   slides its picture in; nothing is hidden from touch or keyboard users. */
@media (min-width: 992px) and (hover: hover) {
  .atx-login--bar .atx-check,
  .atx-login--bar .atx-login__link { min-height: 1.5rem; padding: 0; }

  .atx-home__hero {
    position: relative;
    overflow: hidden;
    overflow: clip;
  }
  .atx-home__slides {
    display: flex;
    width: 300%;
    transform: translateX(-33.3333%);
    transition: transform 500ms var(--atx-ease);
  }
  .atx-home__slide,
  .atx-home__slide:nth-child(2) {
    display: block;
    width: 33.3333%;
    height: auto;
    aspect-ratio: auto;
  }
  .atx-home__tabs {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }
  .atx-home__tab {
    position: absolute;
    top: calc(100% - 4.75rem);
    width: 36%;
    min-height: 72%;
    pointer-events: auto;
    background: var(--atx-home-dark);
    background: color-mix(in srgb, var(--atx-home-dark) 85%, transparent);
    border-radius: var(--atx-radius-lg) var(--atx-radius-lg) 0 0;
    transition: top 500ms var(--atx-ease);
  }
  .atx-home__tab--business { left: 9%; }
  .atx-home__tab--individual { right: 9%; }
  .atx-home__tab:hover,
  .atx-home__tab:focus-within { top: 30%; }

  .atx-home__hero:has(.atx-home__tab--business:hover, .atx-home__tab--business:focus-within) .atx-home__slides {
    transform: translateX(0);
  }
  .atx-home__hero:has(.atx-home__tab--individual:hover, .atx-home__tab--individual:focus-within) .atx-home__slides {
    transform: translateX(-66.6667%);
  }
  .atx-home__bar { margin-top: 0; }
}