/* =========================================================
   Banner Message
   --------------------------------------------------------------------------
   Token-aligned, scheme-based messaging component.

   Uses existing design-system tokens only.
   Local --banner-* variables are component-scoped, not global tokens.
========================================================= */


/* Base ------------------------------------------------------------------- */

.fts-banner-message {
  --banner-bg: var(--color-surface);
  --banner-text: var(--color-text);
  --banner-heading: var(--color-text);
  --banner-icon: var(--color-accent);
  --banner-border: var(--color-accent);
  --banner-link: var(--color-link);
  --banner-link-hover: var(--color-link-hover);

  --banner-icon-size: 24px;
  --banner-gap: 10px;

  padding: 10px 10px 10px 16px;
  color: var(--banner-text);
  background: var(--banner-bg);
  border-left: 4px solid var(--banner-border);
}


/* Schemes ---------------------------------------------------------------- */

/*
 * Schemes only update local component variables.
 * Backgrounds use soft tints of the scheme color against the system surface.
 */

.fts-banner-message.scheme-default {
  --banner-bg: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  --banner-text: var(--color-text);
  --banner-heading: var(--color-heading);
  --banner-icon: var(--color-accent);
  --banner-border: var(--color-accent);
  --banner-link: var(--color-accent);
  --banner-link-hover: var(--color-text);
}

.fts-banner-message.scheme-blue {
  --banner-bg: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  --banner-text: var(--color-text);
  --banner-heading: var(--color-heading);
  --banner-icon: var(--color-accent);
  --banner-border: var(--color-accent);
  --banner-link: var(--color-text);
  --banner-link-hover: var(--color-accent);
}

.fts-banner-message.scheme-green {
  --banner-bg: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  --banner-text: var(--color-text);
  --banner-heading: var(--color-success);
  --banner-icon: var(--color-success);
  --banner-border: var(--color-success);
  --banner-link: var(--color-text);
  --banner-link-hover: var(--color-success);
}

.fts-banner-message.scheme-orange {
  --banner-bg: color-mix(in srgb, var(--color-warning) 15%, var(--color-surface));
  --banner-text: var(--color-text);
  --banner-heading: var(--color-warning);
  --banner-icon: var(--color-warning);
  --banner-border: var(--color-warning);
  --banner-link: var(--color-text);
  --banner-link-hover: var(--color-warning);
}


.fts-banner-message.scheme-red {
  --banner-bg: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface));
  --banner-text: var(--color-text);
  --banner-heading: var(--color-danger);
  --banner-icon: var(--color-danger);
  --banner-border: var(--color-danger);
  --banner-link: var(--color-text);
  --banner-link-hover: var(--color-danger);
}


/* Layout ----------------------------------------------------------------- */

.fts-banner-message-inner {
  display: grid;
  grid-template-columns: var(--banner-icon-size) 1fr;
  gap: var(--banner-gap);
  align-items: start;
}

/* Collapse to single column when no icon is present. */
.fts-banner-message:not(:has(.fts-banner-message-icon)) .fts-banner-message-inner {
  grid-template-columns: 1fr;
}


/* Icon ------------------------------------------------------------------- */

.fts-banner-message-icon {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fts-banner-message-icon i {
  display: inline-block;
  font-size: var(--banner-icon-size);
  line-height: 1;
  color: var(--banner-icon);
  transform: none !important;
}


/* Text ------------------------------------------------------------------- */

.fts-banner-message-heading {
  margin: 0;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  font-family: var(--font-serif);
  font-size: 1.25rem !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.2;
  letter-spacing: 0.025em;
  color: var(--banner-heading) !important;
}

.fts-banner-message-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem !important;
  line-height: 1.25 !important;
  color: var(--banner-text);
}

.fts-banner-message-heading + .fts-banner-message-body {
  margin-top: 0.125rem;
}


/* Alignment modifiers ---------------------------------------------------- */

.fts-banner-message.align-center .fts-banner-message-text,
.fts-banner-message.align-center .fts-banner-message-link {
  text-align: center;
}


/* Link placement --------------------------------------------------------- */

.fts-banner-message-link {
  margin-top: 0.125rem;
  margin-left: 0 !important;
  text-align: left;
}

/* Offset link to align with text when icon is present. */
.fts-banner-message:has(.fts-banner-message-icon) .fts-banner-message-link {
  margin-left: calc(var(--banner-icon-size) + var(--banner-gap)) !important;
}

/* Notes do not offset links. */
.fts-banner-message.is-note .fts-banner-message-link {
  margin-left: 0 !important;
}


/* Links ------------------------------------------------------------------ */

.fts-banner-message .fts-banner-message-link a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4em;

  color: var(--banner-link) !important;
  font-size: 0.775rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  transition:
    color var(--fts-btn-transition) ease,
    transform var(--fts-btn-transition) ease;
}

.fts-banner-message .fts-banner-message-link a::after {
  content: "→";
  display: inline-block;
  transform: translateY(-0.02em);
  transition: transform var(--fts-btn-transition) ease;
}

.fts-banner-message .fts-banner-message-link a:hover,
.fts-banner-message .fts-banner-message-link a:focus-visible {
  color: var(--banner-link-hover) !important;
  text-decoration: none;
  transform: translateX(2px);
}

.fts-banner-message .fts-banner-message-link a:hover::after,
.fts-banner-message .fts-banner-message-link a:focus-visible::after {
  transform: translate(0.15rem, -0.02em);
}

.fts-banner-message .fts-banner-message-link a:focus-visible {
  outline: var(--fts-focus-width) solid currentColor;
  outline-offset: var(--fts-focus-offset);
}


/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fts-banner-message .fts-banner-message-link a {
    transition: none;
  }

  .fts-banner-message .fts-banner-message-link a:hover,
  .fts-banner-message .fts-banner-message-link a:focus-visible {
    text-indent: 0;
  }
}