/* =====================================================================
   site.css — custom storefront additions on top of main.css / auth.css /
   responsive.css.

   This file is the single home for in-progress CSS edits made by the
   dev team while the designer continues to iterate on the upstream
   main.css / auth.css / responsive.css source files. Keeping the
   changes here means we don't conflict with the designer's upcoming
   work — anything in this file is layered on top via the cascade
   because the layout loads it AFTER the source files.

   Sections:
     MAIN         — additions that extend main.css tokens / utilities
     AUTH         — additions that extend auth.css page styles
     ACCOUNT      — additions that extend account.css page styles
     RESPONSIVE   — additions that extend responsive.css breakpoints
   ===================================================================== */


/* ---------- MAIN ---------------------------------------------- */

/* ww-spinner — Inline loading-state spinner injected by
   setButtonLoading in js/general.js. Self-contained CSS-only
   animation so the auth / storefront pages (which don't load
   Tailwind) get the same rotating ring as the Manage admin area.
   The spinner inherits currentColor so it matches any button colour
   (dark CTA, light link, etc.). */
.ww-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  animation: ww-spin 0.75s linear infinite;
}

.ww-spinner__track {
  opacity: 0.25;
}

.ww-spinner__head {
  opacity: 0.75;
}

@keyframes ww-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ww-select search — filter box injected at the top of any
   [data-ww-select][data-search] menu (Signup + My Account Update
   country lists) by Page_JS/Shared/select-search.js. Mirrors the
   .form-input border/typography tokens from main.css so it reads as
   part of the same design system. */
.ww-select__search {
  padding: 4px 8px 8px;
}

.ww-select__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--field-border, rgba(31, 41, 51, 0.16));
  border-radius: var(--field-radius, 4px);
  background: #fff;
  color: var(--field-ink, #1f2933);
  font-family: inherit;
  font-size: 14px;
  line-height: 18px;
}

.ww-select__search-input:focus {
  outline: none;
  border-color: #1f2933;
}

.ww-select__search-input::placeholder {
  color: rgba(31, 41, 51, 0.4);
}


/* ---------- AUTH ----------------------------------------------- */

/* Hidden attribute — make sure all "hidden by attribute" auth-page
   blocks truly hide. The original auth.css only listed .auth-other;
   the others (.auth-alert, .auth-section, .form-group) need the same
   [hidden] rule or they render an empty band on the page. */
.auth-other[hidden],
.auth-alert[hidden],
.auth-section[hidden],
.form-group[hidden] {
  display: none !important;
}


/* ---------- ACCOUNT -------------------------------------------- */

/* Log Out on the My Account dashboard — account.css styles the
   .account-logout element as an <a>; it is rendered as a <button>
   inside a POST form so it can carry an antiforgery token to
   /Login/Logout (HttpPost only). The form takes over the account.css
   width/max-width rules targeted at .account-logout, and the button
   resets browser defaults so it looks identical to the mockup link. */
.account-panel--details > .account-logout-form {
  width: 100%;
  max-width: 640px;
  margin: 0;
}

.account-logout {
  appearance: none;
  background: transparent;
  font: inherit;
  padding: 0;
}


/* ---------- RESPONSIVE ----------------------------------------- */

/* ----- Header auth buttons --------------------------------------

   header-auth__login / header-auth__signup (motorsports.css) are
   styled for the DARK landing heroes: white "Log In" text next to a
   white "Sign Up" pill. Two pages surface them outside that context
   and need the pairing corrected:

   1. LIGHT SECTION HEADERS (About / HowItWorks / FAQ / Catalog / Help
      — .site-header--light on a white/soft hero): the white treatment
      is invisible there. Both links flip to the ink-on-light pairing:
      "Log In" becomes a ghost button (transparent bg, 1px ink border)
      and "Sign Up" becomes the solid ink button — same heights, radius
      and typography as the landing pair so the header rhythm is kept.
      Site-scoped to the four light-hero pages via their body classes
      so the dark Motorsports/Yachting landings keep the Figma white
      pair.

   2. MOBILE NAV (responsive.css .mobile-nav__login): the panel pairs
      a plain-text "Log In" link with the dark .mobile-nav__signup
      button, so the two actions read as unequal. "Log In" gets the
      same ghost-button treatment to match its Sign Up sibling. */

/* 1 — light section headers: ghost Log In + solid ink Sign Up */
.about-page .site-header--light .header-auth__login,
.hiw-page .site-header--light .header-auth__login,
.faq-page .site-header--light .header-auth__login,
.catalog-page .site-header--light .header-auth__login,
.help-page .site-header--light .header-auth__login,
.hfy-page .site-header--light .header-auth__login,
.hfy-form-page .site-header--light .header-auth__login,
.pd-page .site-header--light .header-auth__login,
.sys-page .site-header--light .header-auth__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border: 1px solid rgba(31, 41, 51, 0.24);
  border-radius: 2px;
  color: #1f2933;
}

.about-page .site-header--light .header-auth__login:hover,
.hiw-page .site-header--light .header-auth__login:hover,
.faq-page .site-header--light .header-auth__login:hover,
.catalog-page .site-header--light .header-auth__login:hover,
.help-page .site-header--light .header-auth__login:hover,
.hfy-page .site-header--light .header-auth__login:hover,
.hfy-form-page .site-header--light .header-auth__login:hover,
.pd-page .site-header--light .header-auth__login:hover,
.sys-page .site-header--light .header-auth__login:hover {
  color: rgba(31, 41, 51, 0.7);
  border-color: rgba(31, 41, 51, 0.4);
}

.about-page .site-header--light .header-auth__signup,
.hiw-page .site-header--light .header-auth__signup,
.faq-page .site-header--light .header-auth__signup,
.catalog-page .site-header--light .header-auth__signup,
.help-page .site-header--light .header-auth__signup,
.hfy-page .site-header--light .header-auth__signup,
.hfy-form-page .site-header--light .header-auth__signup,
.pd-page .site-header--light .header-auth__signup,
.sys-page .site-header--light .header-auth__signup {
  background: #1f2933;
  color: #fff;
}

.about-page .site-header--light .header-auth__signup:hover,
.hiw-page .site-header--light .header-auth__signup:hover,
.faq-page .site-header--light .header-auth__signup:hover,
.catalog-page .site-header--light .header-auth__signup:hover,
.help-page .site-header--light .header-auth__signup:hover,
.hfy-page .site-header--light .header-auth__signup:hover,
.hfy-form-page .site-header--light .header-auth__signup:hover,
.pd-page .site-header--light .header-auth__signup:hover,
.sys-page .site-header--light .header-auth__signup:hover {
  background: rgba(31, 41, 51, 0.7);
  color: #fff;
}

/* 2 — mobile nav: ghost Log In matching the dark Sign Up button.
      Same breakpoint responsive.css uses for the .mobile-nav panel. */
@media (max-width: 1279px) {
  .mobile-nav__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(31, 41, 51, 0.24);
    border-radius: 2px;
    background: transparent;
    color: #1f2933;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
  }

  .mobile-nav__login:hover {
    color: rgba(31, 41, 51, 0.7);
    border-color: rgba(31, 41, 51, 0.4);
  }
}