/* Las Vegas overrides.
   Loaded after base.css. Equal specificity, so source order decides. */

/* ---------------------------------------------------------------------------
   Reading size on desktop.  Pastel #80, #83, #87, #89.

   Zach reported the subcopy as hard to read on desktop four separate times. He
   is right, and the cause is that the type scale has no desktop step at all:
   measured at 1440px, --fs-body computed to 15px and --fs-body-sm to 13px,
   exactly the same values a 390px phone gets. A scale that never grows is
   comfortable on the device it was set for and cramped on every larger one.

   Scoped to >=1024px deliberately. The complaint is about desktop, the phone
   layout was not in question, and leaving it alone means this cannot regress
   the one size that was already working.

   Only the two tokens are touched. Every component sets its line-height as a
   ratio, so they follow on their own and nothing needs chasing individually.

   This lives in the Vegas child rather than in unrivaled-base because the base
   theme is shared with Rocker B and Unrivaled Baseball, and neither has asked
   for it. If the other two properties later agree, this belongs upstream in
   base.css and should be deleted from here rather than copied.
--------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --fs-body: 17px;      /* was 15px */
    --fs-body-sm: 15px;   /* was 13px - also lifts .btn and the card meta */
  }
}

/* ---------------------------------------------------------------------------
   Buttons and inline links.  Pastel #89.

   These two do not read from the type scale: base.css sets .btn to a literal
   13px and .us-link to 14px, so lifting the tokens above left them behind.
   Measured after that change, body copy was 17px and the button beside it was
   still 13px, which made the button look like a caption.

   The pill grows with the label. A 15px uppercase label in a 44px pill sits
   tight against the edges, and the taller target is worth having anyway.
--------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .btn {
    font-size: 15px;   /* was 13px */
    height: 48px;      /* was 44px */
    /* The bottom value is NOT spacing: see --cap-shift in base.css. It has to
       be restated because this shorthand would otherwise drop it. */
    padding: 0 30px var(--cap-shift);   /* was 0 26px */
  }

  .us-link { font-size: 15px; }  /* was 14px */
}

/* ---------------------------------------------------------------------------
   Navigation.  Pastel #87, pinned on .site-header__inner.

   The token lift above reached the mega panel links, which read from
   --fs-body-sm and went 13px to 15px, but not the top level items: base.css
   sets .nav-link to a literal 14px. So the panel grew and the bar above it did
   not, which is the wrong way round.

   Checked for wrapping at 1024px, the narrowest width this rule applies at,
   since five items plus the logo and the family line share that row.
--------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-link { font-size: 15px; }  /* was 14px */
}

/* ---------------------------------------------------------------------------
   Story module on /batting-cages/.  Pastel #96.

   base.css pins a story that carries a list to align-items:start. On this page
   that leaves 156px of text beside a 650px column of photo and list, so the
   text sits at the top of an 810px row and everything under it is empty. That
   is the whitespace Zach is asking about.

   Centring the short column against the tall one reads as deliberate rather
   than unfinished. Held in the Vegas child because the start alignment was a
   considered choice in the base theme, and the page that makes it look wrong
   is this one.

   The doubled class is not a typo. Block stylesheets are enqueued by ACF when
   the block renders, which puts inc/blocks/story/style.css AFTER this file in
   source order, so an equal-specificity override here silently loses. Repeating
   the class wins on specificity instead of relying on order.
--------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .story__inner.story__inner:has(.story__list) { align-items: center; }
}

/* ---------------------------------------------------------------------------
   Mobile menu logo.  Pastel #109, "LOGO feels small on mobile?".

   base.css sets it to 34px. Doubled to 68px for Las Vegas only: this logo is a
   horizontal lockup with the wordmark stacked inside it, so it loses legibility
   at a height that suits a simpler mark. Rocker B's is a different shape and
   has not asked for this.

   The close button beside it is 44px, so the header row grows with the logo.
   Checked that the row still lays out and the menu still scrolls.
--------------------------------------------------------------------------- */
.mobile-menu__logo img { height: 68px; }  /* was 34px */

/* ---------------------------------------------------------------------------
   Event cards.  Pastel #112, #116, #129.

   Three asks about the same card: the date should carry the whole range and be
   bigger, and the CTA should be the pill rather than an arrow link.

   The span itself is a render change in unrivaled-base — the card now prefers
   the stored date range over the start date, the same precedence the table has
   always used. Only the sizing and the pill are here.

   Property-scoped because Rocker B renders these same cards on its /baseball/
   page and is in client review with other stakeholders; a pill arriving there
   unasked is the kind of change a reviewer reads as a decision. If Rocker B
   later wants it, this moves to inc/blocks/pevents/style.css and comes out of
   here rather than being copied.

   Doubled classes throughout: inc/blocks/pevents/style.css is enqueued by ACF
   when the block renders, so it lands AFTER this file and an equal-specificity
   rule here loses on source order.
--------------------------------------------------------------------------- */
.card__tag.card__tag {
  font-size: 15px;          /* was --fs-body-sm, 13px before the desktop step */
  color: var(--accent-deep);
  letter-spacing: .06em;
}
.tone--navy .card__tag.card__tag { color: var(--accent-decor); }

/* The arrow link becomes the pill. The card is already one big anchor, so this
   stays a span dressed as a button — nesting a real control inside the anchor
   would give a keyboard two stops for one destination. */
.evcard__cta.evcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 0;
  margin-top: auto;
  height: 40px;
  padding: 0 22px var(--cap-shift);   /* bottom value: see --cap-shift in base.css */
  border-top: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--color-navy);
  font-weight: var(--weight-bold);
  transition: background var(--transition-fast), color var(--transition-fast);
}
/* The mark belonged to the arrow link. A pill does not need it, and the gap it
   sat in is closed above. */
.evcard__cta.evcard__cta .brand-arrow { display: none; }
.tone--navy .evcard__cta.evcard__cta { background: var(--accent-decor); color: var(--color-navy); }
a.evcard:hover .evcard__cta.evcard__cta { background: var(--btn-invert-bg); color: var(--btn-invert-fg); opacity: 1; }

/* The rail restates the arrow link's own spacing — inc/blocks/pevents/style.css
   gives .pevents__rail .evcard__cta a 14px top padding and a hairline above it,
   which is right for a text link under a rule and wrong for a pill: on the home
   page it pushed the label to the bottom of the capsule and drew a line across
   its top. Pastel #135.

   Left in the base theme rather than removed, because Rocker B's rail still
   renders the arrow link and needs both. Three classes here, not two: the rail
   rule is also (0,2,0) and is enqueued after this file, so a tie loses. */
.pevents__rail .evcard__cta.evcard__cta { padding-top: 0; border-top: 0; }

/* The status chip, inverted. Pastel #136.

   Gold on navy rather than the default navy on gold: the chip sits on a
   photograph, where a solid gold plate competes with the image for the first
   look, and the card's own CTA is already gold. Navy gives the photo back and
   leaves one gold object per card. Measured 5.8:1, so the 10px label still
   clears AA.

   The live and results variants keep their own colours. Live is deliberately
   the loudest thing on the card and a finished event is deliberately the
   quietest; neither is the chip Ben pinned. They are named in the :not rather
   than left to source order, because each is a single class and would lose to
   the doubled one here.

   Named, not matched on the "evcard__status--" prefix: the stage vocabulary is
   upcoming / live / results (see unrivaled_base_event_stage), and `upcoming`
   carries a modifier class while having no colours of its own - a prefix match
   excludes the one chip this rule exists for. */
.evcard__status.evcard__status:not(.evcard__status--live):not(.evcard__status--results) {
  background: var(--color-navy);
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   The events rail.  Pastel #121, #122.

   "Scroll by swiping, not using the bar", and "we don't need bar". The bar is
   the rail's own scrollbar, styled to 6px in the block stylesheet.

   Hiding it needs the drag behaviour that went into the block script alongside
   it, or a mouse user on desktop loses the only way to move the rail: touch and
   trackpad swipe natively, a mouse wheel does not scroll sideways. The cut-off
   card at the right edge stays as the cue that there is more.
--------------------------------------------------------------------------- */
.pevents__rail.pevents__rail {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
}
.pevents__rail.pevents__rail::-webkit-scrollbar { height: 0; width: 0; }
/* The grab cursor replaces the bar as the affordance. */
.pevents__rail.pevents__rail { cursor: grab; }
.pevents__rail.pevents__rail.is-dragging { cursor: grabbing; }

/* ---------------------------------------------------------------------------
   Panel showcase CTA.  Pastel #119, pinned on .psho__head.

   "BIGGER CIRCLE CTAS" — the underlined arrow link in the module header becomes
   the pill, matching the promotion asked for on the event cards.
--------------------------------------------------------------------------- */
.psho__cta.psho__cta {
  gap: 0;
  height: 48px;
  padding: 0 30px;
  border-bottom: 0;
  border-radius: 999px;
  background: var(--accent-decor);
  color: var(--color-navy);
  font-size: 15px;
  font-weight: var(--weight-bold);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.psho__cta.psho__cta .brand-arrow { display: none; }
.psho__cta.psho__cta:hover { background: var(--color-white); color: var(--color-navy); }

/* ---------------------------------------------------------------------------
   Panel captions on /the-fields/.  Pastel #127, pinned on .psho__panel-overlay.

   The description on an open slat carries .text-body-sm, the small step of the
   scale, which left it reading as a footnote against a 600px photo. Lifted to
   the body size beside it; the panel name is a heading already and is left as
   it is.
--------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .psho__panel-desc.psho__panel-desc { font-size: var(--fs-body); }
  .psho__panel-meta.psho__panel-meta { font-size: var(--fs-body-sm); }
}

/* ---------------------------------------------------------------------------
   The contact strip.  Pastel #132, #133.

   Only /contact/ carries an at-a-glance block on this property (checked against
   the database, not assumed), so both rules below land on that one band.

   Height: three items on one row leave the section 122px tall, which reads as a
   rule with words on it rather than a band. 200px with the row centred gives it
   about 67px of air top and bottom, just under the Ready to Play band's 253px.
   A minimum rather than a height, so nothing is clipped: below 1024px the strip
   steps to two rows and then three, and at 210px and 230px it outgrows this on
   its own.

   Colour: the strip's values inherit, and body copy is black site-wide, so the
   phone number and address were landing on pure black. Navy is the brand's
   reading colour and the one Zach asked for.

   Both held here rather than in unrivaled-base: the band is shared with Rocker B
   and Unrivaled Baseball, neither of which has asked, and black values are the
   system's own default rather than an oversight in this block.

   Doubled classes: inc/blocks/aag/style.css is enqueued by ACF at render time,
   so it lands after this file and a single class would lose on source order. */
.aag__inner.aag__inner {
  min-height: 200px;
  align-content: center;
}
.aag__value.aag__value { color: var(--color-navy); }

/* The same call on /getting-here/. Pastel #106: "make text navy for phone
   number and address". The lede and the pairs under it inherit from the page
   the same way the contact strip did, so they were landing on black too. */
.splitrows__lede-value.splitrows__lede-value,
.splitrows__fact-value.splitrows__fact-value { color: var(--color-navy); }
.tone--navy .splitrows__lede-value.splitrows__lede-value,
.tone--navy .splitrows__fact-value.splitrows__fact-value { color: inherit; }

/* Pastel #146: "remove gold highlight, just make white text". The endorsement
   at the foot of the mobile menu was a gold block with navy text, which gave
   the quietest link in the panel the loudest treatment in it. It is a credit
   line, so it is drawn like one.

   Vegas-only: the gold block is the base theme's default and no other property
   has objected to it. */
.mobile-menu__cta {
  background: transparent;
  color: var(--color-white);
}
.mobile-menu__cta:hover {
  background: transparent;
  color: var(--color-white);
  text-decoration: underline;
}

/* Pastel #149: "Remove division count on each day". The badge on each day tab
   counted the divisions playing that night. Only the number is hidden - the
   screen-reader text beside it still reads "7 divisions", so the tab keeps
   telling a screen reader what a sighted reader can see by opening it.

   Hidden rather than removed from inc/blocks/leagues/render.php, because the
   count is a base-theme feature and this is one property's preference. */
.leagues__tab-count { display: none; }