/**
 * Buttons and inline calls to action.
 *
 * Ported from the signed-off mock-up kit (`tokens.css` §5) with the hardcoded
 * padding, radius, size and weight replaced by the `--btn-*` tokens that now
 * carry those same values.
 *
 * THE COLOUR LAW, and it is a law rather than a preference:
 *
 *   red   acts    – one `.btn--primary` per viewport, never two
 *   blue  carries – secondary paths, and the majority of the page
 *   gold  promises – the TAHANAN mark, and the employer track's one CTA
 *   ghost – tertiary
 *
 * A page with two red buttons on screen at once is a defect. If a design seems
 * to need a second, one of them is not actually the page's action.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* `justify-content` centres the label box inside the button; it says nothing
     about the lines inside that box. A `.btn` sitting in a section that
     inherits `text-align: start` therefore rendered a label that wrapped to
     two lines flush to the inline start – "Read the employer procedure" and
     "Verify on dmw.gov.ph" did exactly that below 420px on Home, Why Finas,
     Services and Industries. Centred here once rather than per page. */
  text-align: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border-radius: var(--btn-radius);
  min-height: var(--btn-min-height);   /* large tap target – an accessibility
                                          floor, not a style choice */
  transition:
    transform var(--dur-fast) var(--ease-out-soft),
    box-shadow var(--dur-normal) var(--ease-out-soft),
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
  will-change: transform;
}

.btn svg { width: 1.05em; height: 1.05em; }

/* Red. The one action colour. */
.btn--primary {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-red);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-strong);
  background: var(--red-deep);
}

/* Blue. Secondary paths – "view all", "read the procedure". */
.btn--blue {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-blue);
}
.btn--blue:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand-strong);
  background: var(--blue-deep);
}

/* Ghost, on light grounds. */
.btn--ghost {
  background: transparent;
  color: var(--blue);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--line);
  font-weight: var(--btn-font-weight-secondary);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--blue);
  color: var(--blue-deep);
}

/* Solid white on the blue and navy grounds. */
.btn--on-dark {
  background: var(--white);
  color: var(--navy);
}
.btn--on-dark:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-on-dark);
}

/* Ghost on navy and blue grounds. `--blue` text on a navy band is dark on
   dark, so a dark section uses this rather than `.btn--ghost`. */
.btn--ghost-on-dark {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--on-dark-faint);
  font-weight: var(--btn-font-weight-secondary);
}
.btn--ghost-on-dark:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--white);
  background: var(--on-dark-surface);
}

/* Gold. Reserved for the employer track's single CTA. */
.btn--gold {
  background: var(--gold);
  color: var(--navy);
}
.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-highlight);
}

/* Inline call to action. A real CTA rather than a prose link, so it keeps a
   44px tap target even though it renders as text. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-weight: 700;
  color: var(--blue);
  transition:
    gap var(--dur-fast) var(--ease-out-soft),
    color var(--dur-fast) ease;
}
.link-cta::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.link-cta:hover { color: var(--blue-deep); }
.link-cta:hover::after { transform: translateX(4px); }
.link-cta--on-dark { color: var(--gold); }
.link-cta--on-dark:hover { color: var(--white); }

/* The arrow is directional, so it flips with the document. */
[dir="rtl"] .link-cta::after { content: "←"; }
[dir="rtl"] .link-cta:hover::after { transform: translateX(-4px); }