/* Metallic gold text, site-wide.
 *
 * The brand gold is one flat colour, #b59a40. Flat is what a gold INK looks like; it is
 * not what gold looks like. Metal reads as metal because its brightness changes across
 * the surface — a dark edge, a bright band where the light catches, a paler reflection
 * beyond it. One hex value cannot do that, so gold type on screen came out muddy.
 *
 * HOW IT WORKS. The text is painted with a gradient instead of a colour:
 * `background-clip: text` clips a background image to the glyphs, and
 * `-webkit-text-fill-color: transparent` lets it show through.
 *
 * RESTRAINT IS THE WHOLE POINT. The first attempt tiled a hard shadow-to-white sweep
 * every 230px with a brushed grain over it. Every word landed on a different part of the
 * cycle, so a sentence came out striped — some words pale, some brown — and it read as a
 * gimmick rather than as material. This version does one slow pass across the line with a
 * narrow range: warm gold, a single soft highlight through the middle, warm gold again.
 * It is barely a gradient up close, and at a glance it is the difference between printed
 * ink and a struck edge. If it ever looks decorative, it is wrong.
 *
 * THE SWEEP RUNS ACROSS, NOT DOWN. A gradient with any vertical component is stretched
 * over the whole element, so on a three-line paragraph the first line came out white and
 * the last came out brown. A horizontal sweep shades every line identically, which is
 * what a flat metal surface does.
 *
 * CONTRAST. Gold on the brand navy measures 4.21:1 — under the 4.5:1 WCAG AA minimum for
 * normal text, which is why the dashboard's lede is set large and bold to qualify as
 * large text at 3:1. Every stop below is at or brighter than #b59a40, so the metallic
 * version can only improve on that, never undercut it. Keep it that way: a darker stop
 * added for "depth" costs legibility on a page agents read at arm's length.
 *
 * FALLBACKS. `color` is set first, so a browser without background-clip: text shows flat
 * brand gold and nothing is lost. Printing does the same on purpose — a gradient built to
 * catch a screen's light prints as washed-out beige on paper, and the flyer is a printed
 * document first.
 */

.gold-metal,
/* Every gold-text element on the site, listed here rather than repeated inline in four
   stylesheets. If you add gold type somewhere, add it here or give it .gold-metal. */
.lede,                      /* dashboard: the as-of line under the headline */
.lede-date,                 /* dashboard: the same line, phone widths */
.headline .asof,            /* flyer: "Current as of ..." in the masthead */
.agent-strip .label,        /* flyer: the contact strip's caption */
.agent-strip .agent-lines .row b,
.toolbar .hint b,           /* forms: the emphasised half of the toolbar hint */
.doc-sub {                  /* forms and contract: the document subtitle */
  color: #cfa945;
  /* One pass across the element, not a repeating tile: every line gets the same slow
     warm-to-bright-to-warm shift, and no word sits on a hard edge. */
  background-image: linear-gradient(92deg,
    #c69f3c 0%,
    #dcb75a 26%,
    #f2e2af 46%,
    #e6c976 62%,
    #cda743 82%,
    #c69f3c 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* A hairline of depth, not a drop shadow. Anything heavier reads as an effect; a
     text-shadow cannot be used at all, since it would paint behind transparent glyphs. */
  filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.30));
}

/* Gold on a light background is a different problem: the bright stops disappear into the
   paper. This one runs from deep antique gold to a single warm highlight, so it still
   reads as metal without turning into cream. */
.gold-metal-ink,
.total-row .amount {
  color: #8a6b1f;
  background-image: linear-gradient(92deg,
    #856518 0%,
    #a8842a 28%,
    #c8a343 48%,
    #9c7a24 70%,
    #856518 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold SURFACES — the buttons that are a gold block rather than gold type. Same problem,
   same fix, minus the clipping: a flat fill reads as mustard, a swept one as a brass
   plate. The label goes navy because white on bright gold is about 2:1 and unreadable at
   a glance; dark type on metal is how a real plate is engraved anyway. */
.gold-surface,
.flyer-btn,                 /* dashboard: Print Flyer */
.tab-button.print-link,
.print-btn {                /* flyer: Print / Save PDF */
  background-color: #c9a33d;
  /* A brushed plate: light along the top edge, settling through the body. No grain, no
     second highlight — a button is a small object and anything more turns into glare. */
  background-image: linear-gradient(178deg,
    #e6c977 0%,
    #cfa945 42%,
    #bd9433 100%);
  color: #2b2208;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(23, 58, 99, 0.18);
}

.gold-surface:hover,
.flyer-btn:hover,
.print-btn:hover {
  filter: brightness(1.05);
}

/* A browser that cannot clip a background to text would render these transparent — i.e.
   invisible — so the fill is put back explicitly. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-metal, .lede, .lede-date, .headline .asof, .agent-strip .label,
  .agent-strip .agent-lines .row b, .toolbar .hint b, .doc-sub {
    -webkit-text-fill-color: #b59a40;
    background-image: none;
    filter: none;
  }

  .gold-metal-ink, .total-row .amount {
    -webkit-text-fill-color: #8a6b1f;
    background-image: none;
    filter: none;
  }
}

@media print {
  .gold-metal, .lede, .lede-date, .headline .asof, .agent-strip .label,
  .agent-strip .agent-lines .row b, .toolbar .hint b, .doc-sub {
    background-image: none;
    -webkit-text-fill-color: #b59a40;
    color: #b59a40;
    filter: none;
  }

  .gold-metal-ink, .total-row .amount {
    background-image: none;
    -webkit-text-fill-color: #8a6b1f;
    color: #8a6b1f;
    filter: none;
  }
}