/* AreaSports Step 09A: WordPress design parity foundation.
   This file intentionally preserves the original WP visual layer and only patches
   Laravel bridge differences that were visible after Steps 04-08. */

:root {
  --areasports-logo-ratio: 715 / 194;
}

html,
body.areasports-body {
  min-height: 100%;
  background: var(--c-bg, #F9F3EF);
}

/* Exact WP logo asset instead of generated AS mark. */
.areasports-brand--image,
.auth-hero__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.areasports-brand--image .areasports-brand__logo {
  display: block;
  width: min(260px, 58vw);
  height: auto;
  object-fit: contain;
}

.auth-hero__logo-link {
  flex: 0 0 auto;
}

.auth-hero__logo {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
}

.auth-back-brand .areasports-brand__mark,
.auth-back-brand .areasports-brand__text,
.areasports-wordmark {
  display: none !important;
}

/* The club login body class in Laravel differs from the old WP template name. */
body.page-template-templatespage-auth-club-php {
  background: #f8fbfc;
}
body.page-template-templatespage-auth-club-php .topbar,
body.page-template-templatespage-auth-club-php .tabbar {
  display: none;
}

/* Auth layout must match WP: logo on the left, title block right on desktop. */
.app-login .auth-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.app-login .auth-hero__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
}

@media (min-width: 720px) {
  .app-login .auth-hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

@media (max-width: 719px) {
  .app-login .auth-hero,
  .app-login .auth-hero__text {
    align-items: center;
    text-align: center;
  }
  .auth-hero__logo {
    max-width: 300px;
  }
}

/* Login/register/recovery terms link styling from WP legal modal behavior. */
.auth-remember a,
.auth-link[data-legal-open],
[data-legal-open] {
  color: var(--auth-primary, #0586c7);
  font-weight: 800;
  text-decoration: none;
}
.auth-remember a:hover,
[data-legal-open]:hover {
  text-decoration: underline;
}

/* Preloader: WP markup, but Laravel page loads can be faster; keep it non-blocking after JS hides it. */
body:not(.areasports-preloader-active) #preloader.preloader {
  pointer-events: none;
}
#preloader.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Keep dashboard shells visually aligned with WP while preserving Laravel route rendering. */
.dashboard-shell {
  width: 100%;
}
.dashboard-shell__header-bar svg {
  display: block;
}
.dashboard-shell__header-action {
  text-decoration: none;
}
.dashboard-shell__header-action svg {
  width: 22px;
  height: 22px;
}

/* WP cards use no browser-default button/link decoration. */
.dashboard-button,
.auth-submit,
.auth-cta,
.plan-card,
.coach-pupil-card,
.club-sidebar__link,
.club-card,
.recipe-card,
.today-workout a {
  -webkit-tap-highlight-color: transparent;
}

/* Club sidebar logo uses the same image family but keeps the compact WP sidebar proportions. */
.club-sidebar__brand .club-sidebar__logo-mark {
  background-image: url('/areasports/legacy/assets/images/logo.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
  width: 64px;
  height: 38px;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

/* Admin/plugin parity assets are copied, but not all plugin admin widgets should override public pages. */
body:not(.areasports-admin-body) .mc-admin,
body:not(.areasports-admin-body) .fitapp-admin-questionnaire {
  display: revert;
}