/* ==========================================================================
   RanKnight — Heraldry layer
   Subtle "modern heraldry" design system, loaded LAST on every page so its
   accents sit on top of the base/page styles. Grounded in the existing brand:
   the Spartan-helmet mark, the shield glyph, and the gold/steel palette.
   Devices: (1) shield marker on eyebrows, (2) faint helmet-crest watermark in
   heroes, (3) gold-hairline crest frame on a page's signature card.
   Everything honors prefers-reduced-motion (no motion here) and stays behind
   content (watermarks are decorative, pointer-events:none, aria-hidden by nature).
   ========================================================================== */

:root {
  /* Filled shield, used as a CSS mask so it inherits the element's colour */
  --crest-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202l8%203v5.5c0%205-3.5%208.6-8%2010.1-4.5-1.5-8-5.1-8-10.1V5z'/%3E%3C/svg%3E");
  /* Gold-filled shield, used as a background image (holds a number on top) */
  --crest-fill-gold: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23F2A900'%20d='M12%202l8%203v5.5c0%205-3.5%208.6-8%2010.1-4.5-1.5-8-5.1-8-10.1V5z'/%3E%3C/svg%3E");
  /* Helmet crest watermark (gold PNG the client supplied) */
  --crest-watermark: url("../assets/images/brand/ranknight-helmet-icon-gold.png");
}

/* ---- 1. Heraldic eyebrow marker — REMOVED ---------------------------------
   The small shield tick before every eyebrow was pulled at the client's request
   (read as clutter). Eyebrows now render as clean letter-spaced labels. The
   other heraldic devices (hero watermark, crest card, process badges, banner
   divider) stay. ----------------------------------------------------------- */

/* ---- 2. Hero crest watermark ----------------------------------------------
   A faint helmet emblem bleeding off the top-right of every hero, like a crest
   behind a banner. Kept behind content and very low opacity. ---------------- */
.page-hero,
.hero { position: relative; }
.hero { overflow: hidden; }

.page-hero::after,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -2.5rem;
  right: -3rem;
  width: min(46vw, 25rem);
  aspect-ratio: 1 / 1;
  background: var(--crest-watermark) center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
/* Keep hero content above the watermark */
.page-hero .container,
.hero .container { position: relative; z-index: 1; }

/* On the home hero the proof map already occupies the right column, so pull the
   crest to sit behind the copy instead and soften it further. */
@media (min-width: 900px) {
  .hero::after { right: 42%; opacity: 0.04; }
}

/* ---- 3. Signature "crest" card --------------------------------------------
   The one card a page is built around gets a metallic-gold hairline and a small
   shield watermark in the corner — a shield-on-the-wall feel. ---------------- */
.crest-card {
  position: relative;
  border-color: color-mix(in srgb, var(--gold) 42%, var(--color-border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent);
}
.crest-card::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
  background: currentColor;
  -webkit-mask: var(--crest-mask) center / contain no-repeat;
  mask: var(--crest-mask) center / contain no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

/* ---- 4. Shield-badge rank numbers on process steps ------------------------
   Each step in a 3-step "campaign" gets a small gold shield stamped with its
   rank number — a heraldic sequence. Site-wide (also styles local-seo). ----- */
.process { counter-reset: rank; }
.process__step { counter-increment: rank; }
.process__step .process__icon { position: relative; overflow: visible; }
.process__step .process__icon::after {
  content: counter(rank);
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  width: 1.45rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  padding-bottom: 0.12rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--ink);
  background: var(--crest-fill-gold) center / contain no-repeat;
}

/* ---- 5. Banner divider ----------------------------------------------------
   A centred gold hairline with a shield at its middle — a pennant between
   sections. Drop <div class="banner-divider" aria-hidden="true"></div> in. -- */
.banner-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) 0;
  color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.banner-divider::before,
.banner-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 12rem;
  background: linear-gradient(var(--_dir, 90deg), transparent, color-mix(in srgb, var(--gold) 45%, transparent));
}
.banner-divider::after { --_dir: 270deg; }
.banner-divider__crest {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--crest-mask) center / contain no-repeat;
  mask: var(--crest-mask) center / contain no-repeat;
}