@charset "UTF-8";

/*
 * Homepage owner. Loaded only by Views/Home/Index.cshtml, after the shared modules.
 * Composition: a poster on a daylight court. The owner's square photograph stands at the centre and the
 * serif headline stands vertically on either side of it. Sections below are numbered by the shared
 * .ma-section-head in moonarrow-storefront.css.
 * Text never sits on the photograph, so any bright or dark square image reads the same.
 * Shared pieces (buttons, .text-link, product card, empty state, footer) stay in their owners.
 */

.moonarrow-site {
  overflow-x: clip;
  color: var(--moonarrow-color-brand-ink);
  background: #fff;
}

.moonarrow-site .ma-shell {
  width: 100%;
  max-width: var(--moonarrow-shell-max);
  margin-inline: auto;
  padding-inline: var(--moonarrow-shell-gutter);
}

/* ---------- Hero: a poster on a daylight court ---------- */
/* Wide screens: the owner's square photograph stands at the centre of the court and the headline is set
   vertically in serif on either side of it, like a match poster. The eyebrow crowns the poster; the intro
   and actions sit along the floor. Phones and tablets stack the same pieces: headline, square, intro,
   actions. Text never sits on the carousel photo, so any bright or dark square image reads the same.
   .ma-hero-copy is only a source-order wrapper (display: contents); its children are placed directly. */
.moonarrow-site .ma-hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(2rem, 5vh, 3.25rem);
  color: var(--moonarrow-color-brand-ink);
  background:
    url("/images/branding/moonarrow-hero-court-clean-left-20261001.png") 82% bottom / cover no-repeat,
    linear-gradient(180deg, var(--moonarrow-color-daylight-wash-top) 0%, var(--moonarrow-color-daylight-wash) 100%);
  border-bottom: 1px solid var(--moonarrow-color-hairline);
}

/* Court light: a firm veil behind the stacked headline that opens toward the floor. */
.moonarrow-site .ma-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0.3) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 30%);
}

.moonarrow-site .ma-hero-court {
  --ma-hero-media: min(100%, 34rem);
  display: grid;
  width: 100%;
  max-width: var(--moonarrow-shell-max);
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.5rem;
  margin-inline: auto;
  padding-inline: var(--moonarrow-shell-gutter);
}

.moonarrow-site .ma-hero-copy {
  display: contents;
}

.moonarrow-site .ma-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: var(--moonarrow-color-gold-text);
  font-size: var(--moonarrow-type-support);
  font-weight: 700;
  letter-spacing: var(--moonarrow-tracking-kicker);
}

.moonarrow-site .ma-hero-eyebrow::before {
  width: 2.25rem;
  height: 1px;
  flex: none;
  content: "";
  background: var(--moonarrow-color-gold);
}

.moonarrow-site .ma-hero h1 {
  margin: 0;
  color: var(--moonarrow-color-brand-ink);
  font-family: var(--moonarrow-font-serif-display);
  font-size: clamp(2.35rem, 7.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.08em;
}

.moonarrow-site .ma-hero-line {
  display: block;
  word-break: keep-all;
}

/* The answering half of the headline is set in text-safe logo gold. */
.moonarrow-site .ma-hero-line--answer {
  margin-top: 0.1em;
  color: var(--moonarrow-color-gold-text);
}

/* The intro shares the headline serif at every width; wide screens also set it vertically. */
.moonarrow-site .ma-hero-intro {
  max-width: 30rem;
  margin: 0.5rem 0 0;
  color: var(--moonarrow-color-brand-ink-soft);
  font-family: var(--moonarrow-font-serif-display);
  font-size: max(1.0625rem, 17px);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.06em;
  /* Owner-edited copy: break at CJK punctuation into balanced lines, never mid-word unless it would overflow. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.moonarrow-site .ma-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.moonarrow-site .ma-hero-actions .btn-primary {
  min-width: 11.5rem;
  min-height: 56px;
  justify-content: space-between;
  gap: 2.5rem;
  box-shadow: var(--moonarrow-shadow-hero-action);
}

/* The secondary action is a quiet underlined link: the shared sweep becomes a gold underline. */
.moonarrow-site .ma-hero-actions .btn-outline-primary {
  min-height: 44px;
  gap: 0.85rem;
  padding: 0;
  color: var(--moonarrow-color-brand-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
}

.moonarrow-site .ma-hero-actions .btn-outline-primary::before {
  inset: auto 0 -1px;
  height: 2px;
  background: var(--moonarrow-color-gold);
}

.moonarrow-site .ma-hero-actions .btn-outline-primary:not(:disabled, .disabled):is(:hover, :focus-visible) {
  color: var(--moonarrow-color-gold-text);
  background: transparent;
  box-shadow: none;
}

.moonarrow-site .ma-hero-actions .btn-outline-primary:focus-visible {
  outline: 3px solid var(--moonarrow-color-gold);
  outline-offset: 4px;
}

/* ---------- The photograph: always a 1:1 frame, cropped exactly as the owner set it ---------- */
.moonarrow-site .ma-hero-media {
  position: relative;
  z-index: 1;
  width: var(--ma-hero-media);
  justify-self: center;
}

.moonarrow-site .ma-hero-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--moonarrow-color-brand-blue);
  /* No mat or hairline: the square floats on the court by one long soft shadow. */
  box-shadow: var(--moonarrow-shadow-hero-poster);
}

.moonarrow-site .ma-hero-frame .carousel-inner,
.moonarrow-site .ma-hero-frame .carousel-item,
.moonarrow-site .ma-hero-photo {
  width: 100%;
  height: 100%;
}

.moonarrow-site .ma-hero-photo {
  display: block;
}

.moonarrow-site .ma-hero .home-carousel-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--home-crop-x, 50%) var(--home-crop-y, 50%);
  transform: scale(var(--home-crop-zoom, 1));
  transform-origin: var(--home-crop-x, 50%) var(--home-crop-y, 50%);
}

.moonarrow-site .ma-hero .home-carousel-image.is-fallback {
  --home-crop-x: 68%;
}

/* Carousel status and controls sit under the square, never on the photograph. */
.moonarrow-site .ma-hero-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.moonarrow-site .ma-hero-count {
  margin: 0;
  color: var(--moonarrow-color-brand-ink);
  font-family: var(--moonarrow-font-latin);
  font-size: max(0.8125rem, 13px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* Fixed slot for the current number, so 01 → 02 never nudges the timer track. */
.moonarrow-site .ma-hero-count [data-home-carousel-current] {
  display: inline-block;
  min-width: 1.6em;
}

.moonarrow-site .ma-hero-count span + span {
  color: var(--moonarrow-color-storefront-muted);
  font-weight: 500;
}

.moonarrow-site .hero-count-rule {
  position: relative;
  display: block;
  flex: 1 1 auto;
  height: 1px;
  overflow: hidden;
  background: var(--moonarrow-color-ink-track);
}

.moonarrow-site .hero-count-rule::after {
  position: absolute;
  inset: 0;
  content: "";
  /* The fill slides in whole (translate is drawn sub-pixel smooth; a scaled edge steps pixel by pixel),
     with a short soft head so the leading edge never reads as a hard notch. */
  background: linear-gradient(90deg, var(--moonarrow-color-gold) calc(100% - 0.75rem), rgba(189, 145, 87, 0));
  transform: translate3d(-100%, 0, 0);
}

.moonarrow-site .ma-hero-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Quiet round controls: a hairline ring that fills navy on hover or keyboard focus. */
.moonarrow-site .ma-hero-buttons button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: var(--moonarrow-color-brand-ink);
  background: transparent;
  border: 1px solid var(--moonarrow-color-ink-control-line);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}

.moonarrow-site .ma-hero-buttons button[hidden] {
  display: none;
}

.moonarrow-site .ma-hero-buttons button:hover,
.moonarrow-site .ma-hero-buttons button:focus-visible {
  color: #fff;
  background: var(--moonarrow-color-brand-ink);
  border-color: var(--moonarrow-color-brand-ink);
}

.moonarrow-site .ma-hero-buttons button:focus-visible {
  outline: 3px solid var(--moonarrow-color-gold);
  outline-offset: 2px;
}

.moonarrow-site .hero-carousel-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moonarrow-site .hero-carousel-toggle .hero-carousel-icon-play {
  fill: currentColor;
  stroke: none;
}

.moonarrow-site .hero-carousel-toggle[data-state="playing"] .hero-carousel-icon-play,
.moonarrow-site .hero-carousel-toggle[data-state="paused"] .hero-carousel-icon-pause {
  display: none;
}

/* Stacked order: eyebrow, headline, square with its controls, intro, actions. */
@media (max-width: 1099.98px) {
  .moonarrow-site .ma-hero-eyebrow { order: 0; }
  .moonarrow-site .ma-hero h1 { order: 1; }
  .moonarrow-site .ma-hero-media { order: 2; margin-top: 0.5rem; }
  .moonarrow-site .ma-hero-intro { order: 3; }
  .moonarrow-site .ma-hero-actions { order: 4; }
}

/* Poster: three columns around the square. The headline stands vertically at its left, both lines in
   one serif block (read right to left, the answer line hung to the bottom); the owner's intro stands at
   its right as vertical prose, breaking at its own punctuation. The square follows the viewport height
   too (header + eyebrow + controls + floor row ≈ 26rem), so the poster fits one screen. */
@media (min-width: 1100px) {
  .moonarrow-site .ma-hero {
    display: grid;
    min-height: min(calc(100svh - 7rem), 56rem);
    align-items: center;
    background-position: center 78%, 0 0;
  }

  /* The floor corner is lifted so the shuttlecock in the photograph stays a quiet part of the court. */
  .moonarrow-site .ma-hero::before {
    background:
      radial-gradient(ellipse 38% 46% at 0% 100%, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0) 100%),
      radial-gradient(ellipse 62% 74% at 50% 46%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.58) 100%),
      linear-gradient(0deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 24%);
  }

  .moonarrow-site .ma-hero-court {
    --ma-hero-media: clamp(22rem, min(34vw, 100svh - 26rem), 32rem);
    grid-template-columns: minmax(0, 1fr) var(--ma-hero-media) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    row-gap: clamp(1.25rem, 3vh, 2rem);
  }

  .moonarrow-site .ma-hero-eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .moonarrow-site .ma-hero-eyebrow::after {
    width: 2.25rem;
    height: 1px;
    flex: none;
    content: "";
    background: var(--moonarrow-color-gold);
  }

  /* The column is exactly as tall as the photograph; the type scales with it so the longer line fits. */
  .moonarrow-site .ma-hero h1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    height: var(--ma-hero-media);
    writing-mode: vertical-rl;
    font-size: calc(var(--ma-hero-media) / 9.4);
    line-height: 1.6;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .moonarrow-site .ma-hero-line--answer {
    margin: 0;
    text-align: end;
  }

  .moonarrow-site .ma-hero-media {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  /* Vertical prose: a gold rule opens the first column; the view sets each phrase of the owner's copy
     (ended by punctuation or a typed space) as its own column, and it only scrolls sideways if it outgrows
     the side column. */
  .moonarrow-site .ma-hero-intro {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    height: calc(var(--ma-hero-media) * 0.62);
    max-width: 100%;
    margin: calc(var(--ma-hero-media) * 0.12) 0 0;
    padding-block-start: 1.5rem;
    overflow-x: auto;
    border-block-start: 1px solid var(--moonarrow-color-gold-line);
    writing-mode: vertical-rl;
    font-size: max(1.1875rem, 19px);
    line-height: 2.3;
    letter-spacing: 0.2em;
    text-wrap: wrap;
  }

  /* One phrase per column; a phrase longer than the column still wraps inside it. */
  .moonarrow-site .ma-hero-phrase {
    display: block;
  }

  /* The actions close the reading on the prose side, under the intro. */
  .moonarrow-site .ma-hero-actions {
    grid-column: 3;
    grid-row: 3;
    justify-self: start;
    align-self: end;
  }
}

@media (max-width: 575.98px) {
  .moonarrow-site .ma-hero-actions .btn-primary {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ---------- Featured equipment: one rail of shared product cards on white, set off by hairlines ---------- */
.moonarrow-site .ma-featured {
  padding-block: var(--moonarrow-space-section);
  background: #fff;
  border-block: 1px solid var(--moonarrow-color-hairline);
}

/* The rail actions take the heading's right column on wide screens. */
.moonarrow-site .ma-featured-heading {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.moonarrow-site .ma-featured-actions {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: end;
  align-items: center;
  gap: 1rem;
}

/* One row of shared product cards on a native scroll-snap rail. The rail bleeds into the shell
   gutter so cards can travel to the edge, while scroll padding keeps the first card aligned with
   the heading. Touch, trackpad and keyboard scrolling work without the script; the arrow buttons
   are an enhancement revealed only while the row overflows. */
.moonarrow-site .ma-featured-rail {
  --ma-featured-gap: clamp(0.75rem, 1.6vw, 1.25rem);
  --ma-featured-card: min(78%, 20rem);
  display: flex;
  gap: var(--ma-featured-gap);
  margin: 0 calc(var(--moonarrow-shell-gutter) * -1);
  padding: 0.25rem var(--moonarrow-shell-gutter) 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--moonarrow-shell-gutter);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--moonarrow-color-gold) transparent;
  scrollbar-width: thin;
  list-style: none;
}

.moonarrow-site .ma-featured-rail:focus-visible {
  outline: 3px solid var(--moonarrow-color-brand-blue);
  outline-offset: -3px;
}

.moonarrow-site .ma-featured-slide {
  display: flex;
  min-width: 0;
  flex: 0 0 var(--ma-featured-card);
  scroll-snap-align: start;
}

.moonarrow-site .ma-featured-slide > .product-card {
  width: 100%;
}

.moonarrow-site .ma-featured-controls {
  display: flex;
  gap: 0.5rem;
}

.moonarrow-site .ma-featured-controls[hidden] {
  display: none;
}

.moonarrow-site .ma-featured-control {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: var(--moonarrow-color-brand-ink);
  background: #fff;
  border: 1px solid var(--moonarrow-control-border);
  border-radius: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.moonarrow-site .ma-featured-control:not([aria-disabled="true"]):hover,
.moonarrow-site .ma-featured-control:not([aria-disabled="true"]):focus-visible {
  color: #fff;
  background: var(--moonarrow-color-brand-blue);
  border-color: var(--moonarrow-color-brand-blue);
}

.moonarrow-site .ma-featured-control:focus-visible {
  outline: 3px solid var(--moonarrow-color-gold);
  outline-offset: 2px;
}

.moonarrow-site .ma-featured-control[aria-disabled="true"] {
  color: var(--moonarrow-color-storefront-muted);
  cursor: default;
  opacity: 0.45;
}

@media (min-width: 576px) {
  .moonarrow-site .ma-featured-rail {
    --ma-featured-card: calc((100% - var(--ma-featured-gap)) / 2.35);
  }
}

@media (min-width: 992px) {
  .moonarrow-site .ma-featured-rail {
    --ma-featured-card: calc((100% - var(--ma-featured-gap) * 2) / 3);
  }
}

@media (min-width: 1280px) {
  .moonarrow-site .ma-featured-rail {
    --ma-featured-card: calc((100% - var(--ma-featured-gap) * 3) / 4);
  }
}

@media (max-width: 991.98px) {
  .moonarrow-site .ma-featured-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .moonarrow-site .ma-featured-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: space-between;
  }
}

/* ---------- Brands the store carries: a typographic line-up, not a grid of boxes ---------- */
.moonarrow-site .ma-brands {
  padding-block: var(--moonarrow-space-section);
}

.moonarrow-site .ma-brands-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--moonarrow-color-brand-ink);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.moonarrow-site .ma-brands-list li {
  overflow-wrap: anywhere;
}

.moonarrow-site .ma-brands-list li + li::before {
  margin-inline: 0.85rem;
  color: var(--moonarrow-color-gold);
  content: "/";
  font-weight: 400;
}

.moonarrow-site .ma-brands-toggle {
  min-height: 44px;
  margin-top: 1rem;
  padding: 0;
  color: var(--moonarrow-color-brand-ink);
  background: none;
  border: 0;
  font-size: var(--moonarrow-type-control);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-color: var(--moonarrow-color-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.moonarrow-site .ma-brands-toggle[hidden] {
  display: none;
}

.moonarrow-site .ma-brands-toggle:focus-visible {
  outline: 3px solid var(--moonarrow-color-brand-blue);
  outline-offset: 3px;
}

/* ---------- Performance marquee: outlined latin words drifting under the hero (shared .outline-display) ---------- */
.moonarrow-site .ma-marquee {
  overflow: hidden;
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--moonarrow-color-hairline);
}

.moonarrow-site .ma-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: clamp(1.5rem, 3vw, 3rem);
}

.moonarrow-site .ma-marquee-track > .outline-display {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
}

.moonarrow-site .ma-marquee-track > .ma-marquee-mark {
  color: var(--moonarrow-color-gold);
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  line-height: 1;
}

/* ---------- Brand story: the court closes the page in daylight ---------- */
.moonarrow-site .ma-story {
  padding-block: var(--moonarrow-space-section);
  color: var(--moonarrow-color-brand-ink);
  background: var(--moonarrow-color-paper-warm);
  border-top: 1px solid var(--moonarrow-color-hairline);
}

.moonarrow-site .ma-story-layout {
  display: grid;
  max-width: 44rem;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

/* The lockup artwork has a white ground, so it sits on a white disc like the landing intro mark. */
.moonarrow-site .ma-story-logo {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--moonarrow-shadow-lockup);
}

.moonarrow-site .ma-story h2 {
  margin: 1rem 0 0;
  color: var(--moonarrow-color-brand-ink);
  font-family: var(--moonarrow-font-display);
  font-size: var(--moonarrow-type-display-statement);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-wrap: balance;
}

.moonarrow-site .ma-story h2::after {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: 1.5rem auto 0;
  content: "";
  background: var(--moonarrow-color-gold);
}

.moonarrow-site .ma-story p {
  margin: 0;
  color: var(--moonarrow-color-storefront-muted);
  font-size: max(1rem, 16px);
  line-height: 1.9;
}

.moonarrow-site .ma-story .text-link {
  color: var(--moonarrow-color-brand-ink);
}

.moonarrow-site .ma-story .text-link:hover,
.moonarrow-site .ma-story .text-link:focus-visible {
  color: var(--moonarrow-color-gold-text);
}

.moonarrow-site .ma-story .text-link:focus-visible {
  outline-color: var(--moonarrow-color-brand-ink);
}