/* Entity hero toolbar + follower line — shared between team / league /
   player / match detail pages. Pairs with:
     - templates/components/entity/_hero_nav.html.twig (team/league/player)
     - templates/pages/match/_hero_nav.html.twig (match)
     - templates/components/entity/_follower_line.html.twig

   B.2 sticky-only model (2026-05-16, ALL entity pages): the hero-nav
   stays pinned at the top of the viewport (`position: sticky; top: 0`
   on body.team-page / league-page / player-page / match-page — see
   entity-sticky.css). The crest + name title in the nav is always
   visible on team / league / player (`.hero-nav__compact-title`). On
   match, a `.hero-nav__match-title` (home crest + score + away crest +
   status chip) is hidden by default and fades in once the nav sticks
   (`.is-stuck`). The big `.entity-hero-expanded` scrolls away naturally
   in both cases — no `.compact` toggle, no JS during scroll. */

@layer components {
  /* ---------- Hero nav toolbar ---------- */

  .hero-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    height: var(--hero-nav-height, 56px);
    box-sizing: border-box;

    /* Transparent by design — the surrounding `.entity-hero` owns the
       team gradient, which needs to read through the nav too. Fallback
       to page bg when the nav is used outside an entity hero. */
    background: transparent;
  }

  /* Slim title — logo + team name inline with the back button. Always
     visible on the entity pages (team / league / player) — the sticky
     hero-nav is the user's persistent context as they scroll past the
     big hero. Match nav omits this element entirely (its own partial
     leaves the center slot empty), so no scoping is needed here. */
  .hero-nav__compact-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .hero-nav__compact-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .hero-nav__compact-name {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* ---------- Match nav compact title ----------
     Sits in the centre of the match `.hero-nav`. Hidden at scroll=0
     so the big `.entity-hero-expanded` underneath owns the
     home/score/away presentation; fades in once `.is-stuck` lands so
     the user keeps the score context after the big hero scrolls away.

     Transition is opacity + transform + visibility — visibility ramps
     last so click targets disengage as the title fades out (matters if
     the title ever wraps an anchor; today it's static spans). */
  .hero-nav__match-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    /* Left-aligned to match the entity slim title — the back arrow
       sits at the left edge and the title chips follow immediately
       after, same shape team / league / player use. */
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
      opacity 220ms ease,
      visibility 220ms ease,
      transform 220ms ease;
  }

  .hero-nav.is-stuck .hero-nav__match-title {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .hero-nav__match-crest {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .hero-nav__match-score {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .hero-nav__match-score-side {
    font-variant-numeric: tabular-nums;
  }

  .hero-nav__match-score-sep {
    opacity: 0.6;
    font-weight: 500;
  }

  /* Status chip — colour-coded variants reuse the same palette as
     `.match-status-badge` in match-detail.css but shrunk for the
     slim nav. Padding stays generous (3px 6px) so the chip reads as
     a pill, not a label. */
  .hero-nav__match-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-family: Manrope, sans-serif;
    font-size: 10px;
    font-weight: var(--weight-bold, 700);
    line-height: 1.4;
    border-radius: 8px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .hero-nav__match-status.ft {
    background: rgb(107 114 128 / 20%);
  }

  .hero-nav__match-status.live {
    background: rgb(239 68 68 / 20%);
    color: var(--color-live);
  }

  .hero-nav__match-status.live::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--color-live);
    border-radius: 50%;
    /* Reuse the `match-live-pulse` keyframes declared in match-detail.css. */
    animation: match-live-pulse 1.5s ease-in-out infinite;
  }

  .hero-nav__match-status.ht {
    background: rgb(251 191 36 / 12%);
    color: #fbbf24;
  }

  .hero-nav__match-status.postponed {
    background: rgb(245 158 11 / 20%);
    color: #f59e0b;
  }

  /* Reduced motion — the fade keeps but transform settles instantly so
     no perceived motion. */
  @media (prefers-reduced-motion: reduce) {
    .hero-nav__match-title {
      transition-duration: 1ms;
      transform: none;
    }

    .hero-nav__match-status.live::before {
      animation: none;
    }
  }

  .header-back {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    color: var(--color-text);
  }

  .header-back svg {
    width: 24px;
    height: 24px;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .header-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-text);
  }

  .header-btn:active {
    opacity: 0.7;
  }

  .header-btn svg {
    width: 22px;
    height: 22px;
  }

  /* ---------- Follow button (always-icon variant) ----------
     B.2 sticky model: the hero-nav is always slim, so the follow CTA
     stays in its 40 × 40 icon-only form to match the neighbouring
     `.header-btn` buttons (bell / search / kebab). The "Seguir" label
     is hidden visually but kept in the DOM for screen readers — same
     a11y contract the compact-toggle variant had. */
  .entity-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 9px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 10px;
    color: var(--color-text);
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 200ms ease;
  }

  .entity-follow-btn:active {
    transform: scale(0.94);
  }

  /* 22 px icon size matches neighbouring `.header-btn` SVGs so the
     toolbar reads uniformly. 9 px padding + 22 px icon = 40 × 40
     footprint. */
  .entity-follow-star {
    width: 22px;
    height: 22px;
    stroke: currentcolor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
  }

  /* Visually hide the label but keep it for assistive tech. */
  .entity-follow-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Following state — only the star itself fills with the accent colour.
     No chip background / border: the button stays a bare icon button; the
     star simply goes from white outline to solid green. */
  .entity-follow-btn.following .entity-follow-star {
    fill: var(--color-accent);
    stroke: var(--color-accent);
  }

  /* Match hero follow star (separate `.match-follow-btn` in the match nav) —
     same treatment: white outline → solid green when followed. */
  .match-follow-btn.following .match-follow-star {
    fill: var(--color-accent);
    stroke: var(--color-accent);
  }

  /* ---------- Follower line (below H1) ---------- */

  .entity-follower-line {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary);
    letter-spacing: 0.2px;
  }

  .entity-follower-star {
    font-size: 19px;
    line-height: 1;
  }

  .entity-follower-count {
    font-weight: 600;
  }

  .entity-follower-label {
    font-weight: 400;
  }
}