/*
  The hero's tertiary supplier link — `.hero-supplier`, rendered by `heroSection()`
  in build.mjs from `HERO.supplierLink` in content/copy.js.

  ── Why this is a file and not a block in home.css ──────────────────────────

  It is the only element on the homepage that belongs to another page. home.css is
  5,800 lines about the buyer's homepage, and six rules about the supply side's one
  line are easier to find, argue with and delete from here. Loaded after home.css
  in `homePage`'s `styles` array, so it can lean on the hero's own tokens without
  fighting specificity.

  ── The whole design brief is "not a third button" ──────────────────────────

  The hero's priority order is fixed at six items, and this is the sixth: headline,
  proposition, benefits, Start free brief, Schedule a call, then this. Rank 6 must
  not compete with buyer acquisition. So the pattern is a text link, and every
  property below is either the absence of a button property or an understatement of
  one:

    no background, no border, no radius   — the two above it are a 54px blue slab
                                            and a 54px outlined slab
    --t-small (14px)                      — against the buttons' --t-lead (17–19px)
    weight 400                            — against their 600
    --fg-soft                             — against #ffffff on --lot-blue

  Nothing here is `!important` and nothing overrides `.btn`, because it is not a
  `.btn`. If this element ever needs a `.btn` class to look right, the answer is
  that it is the wrong element.

  ── Colour ──────────────────────────────────────────────────────────────────

  --fg-soft is 55% white on the hero's near-black — 6.0:1, comfortably past AA for
  14px text, and the same token the globe's fallback note takes two elements down.
  It is a neutral, not a hue: the hero already carries one accent (the blue slab)
  and one meaning-bearing colour system (orange for physical movement), and a
  coloured tertiary link would either borrow a meaning it does not have or invent a
  fourth.

  Hover and focus lift it to full --fg and add the underline it does not carry at
  rest. That is the whole interaction: brighter, plus a line. No fill appearing on
  hover, which would be the moment it turned into a button.
*/

.hero-supplier {
  position: relative;
  /* Above the globe canvas, like every other child of `.hero-copy`. */
  z-index: 4;
  /*
    16px under the button row. Far enough that it reads as a separate line rather
    than as a caption clinging to the ghost button, close enough that it is still
    part of the hero's action group and not a stray sentence — and well inside the
    34–60px `.hero-steps` opens with, so the reading order down the column stays
    buttons → link → hairline → the three steps.
  */
  margin: 16px 0 0;
  /*
    Its own measure, and a short one. The label is three words; a paragraph-width
    box around it only widens the hit area into empty space to the right.
  */
  max-width: 28em;
  font-size: var(--t-small);
  line-height: 1.4;
}

.hero-supplier a {
  /*
    Flex for two reasons: it blockifies the arrow's span, which is what lets it be
    transformed on hover, and it puts the space before the arrow here rather than
    in the markup. A leading space *inside* the span collapses away — it is at the
    start of that box's own inline formatting context — so the markup version of
    this rendered "Apply→" with the glyph touching the word.
  */
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-body);
  font-weight: 400;
  /*
    Not `--font-mono` and not uppercased. Mono capitals are this design system's
    voice for a *control* — the bar's button, the section eyebrows, `.link`, every
    field label on /suppliers. This is a sentence, in the same face and case as the
    two buttons above it, one size down.
  */
  text-transform: none;
  color: var(--fg-soft);
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.hero-supplier a:hover,
.hero-supplier a:focus-visible {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/*
  The arrow nudges on hover, the same 3px `.link::after` moves in base.css. It is
  the one flourish, and it is the same flourish the rest of the site already makes.
*/
.hero-supplier a span {
  transition: transform var(--dur-fast) var(--ease);
}

.hero-supplier a:hover span {
  transform: translateX(3px);
}

/*
  At the width where the two buttons stack, the label must not break across two
  lines — "Supplier?" alone above "Apply →" reads as two links. `Leverancier?
  Aanmelden →` is 24 characters and fits a 320px column at 14px, so nowrap is safe
  in both languages; it is here as a guard rather than as a fix for a break either
  string currently takes.
*/
@media (max-width: 560px) {
  .hero-supplier a {
    white-space: nowrap;
  }
}