/* GovRateCodes brand tokens + logo classes
   Mark: Star card — a federal-navy hotel key card carrying a white star and a
   seal-gold rate band. Drop this in once and use the custom properties everywhere. */

:root {
  --grc-navy: #182d4e;
  --grc-gold: #c9a227;
  --grc-gold-deep: #8a6a14;
  --grc-green: #2e7d54;
  --grc-green-deep: #226647;
  --grc-mist: #e6ebf3;
  --grc-ground: #f6f7f9;
  --grc-white: #ffffff;

  --grc-text: #182d4e;
  --grc-text-muted: #57657e;
  --grc-text-on-ink: #f6f7f9;
  --grc-muted-on-ink: #9fb0ca;

  --grc-font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --grc-wordmark-tracking: -0.02em;

  --grc-radius: 8px;
  --grc-radius-card: 10px;
  --grc-radius-pill: 999px;
  --grc-rule: 1px;
}

/* Wordmark — "GovRate" heavy, "Codes" regular. Never re-weight, never letterspace. */
.grc-wordmark {
  font-family: var(--grc-font);
  font-weight: 800;
  letter-spacing: var(--grc-wordmark-tracking);
  line-height: 1;
  color: var(--grc-text);
  white-space: nowrap;
}
.grc-wordmark span { font-weight: 400; }
.grc-wordmark--on-ink { color: var(--grc-text-on-ink); }

.grc-tagline {
  font-family: var(--grc-font);
  font-weight: 700;
  font-size: 0.26em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grc-green-deep);
}

/* The mark — Star card.
   A navy key card, tilted 8°, star up top and a gold rate band where the code
   lives. Every part is a percentage of one square (the band and star are
   children OF the card, so the tilt carries them), so 16px and 512px are one
   drawing. font-size tracks the size so em-based strokes scale with it. */
.grc-mark {
  --grc-mark: 64px;
  position: relative;
  flex: none;
  width: var(--grc-mark);
  height: var(--grc-mark);
  font-size: var(--grc-mark);
  border-radius: 24%;
  overflow: hidden;
  background: var(--grc-mist);
}
.grc-mark > *, .grc-mark__card > * { position: absolute; box-sizing: border-box; }

.grc-mark__card {
  left: 19%; top: 21%; width: 62%; height: 58%;
  border-radius: 10% / 11%;
  background: var(--grc-navy);
  transform: rotate(-8deg);
}
.grc-mark__star {
  left: 34%; top: 12%; width: 32%; height: 34%;
  background: var(--grc-white);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.grc-mark__band { left: 0; top: 62%; width: 100%; height: 16%; background: var(--grc-gold); }

/* On the dark ground the card lightens; the accents hold. */
.grc-mark--on-ink { background: var(--grc-navy); }
.grc-mark--on-ink .grc-mark__card { background: var(--grc-ground); }
.grc-mark--on-ink .grc-mark__star { background: var(--grc-navy); }
.grc-mark--on-ink .grc-mark__band { background: var(--grc-gold); }

/* One color, for foil and single-plate print. */
.grc-mark--mono { background: var(--grc-text); }
.grc-mark--mono .grc-mark__card { background: var(--grc-text-on-ink); }
.grc-mark--mono .grc-mark__star { background: var(--grc-text); }
.grc-mark--mono .grc-mark__band { background: var(--grc-text); }

/* Below 32px: straighten the card, drop the band, grow the star. */
.grc-mark--simple .grc-mark__card { transform: none; left: 17%; top: 19%; width: 66%; height: 62%; }
.grc-mark--simple .grc-mark__band { display: none; }
.grc-mark--simple .grc-mark__star { left: 27%; top: 22%; width: 46%; height: 50%; }

/* Lockups. Clear space on every side = 25% of the mark. */
.grc-lockup {
  display: flex;
  align-items: center;
  gap: 0.42em;
  font-size: 32px;
  text-decoration: none;
}
.grc-lockup .grc-mark { --grc-mark: 1.15em; }
.grc-lockup__text { display: flex; flex-direction: column; gap: 0.16em; }
.grc-lockup .grc-wordmark { font-size: 1em; }
.grc-lockup--stacked { flex-direction: column; align-items: flex-start; gap: 0.5em; }

/* Site chrome */
.grc-header {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 24px;
  background: var(--grc-white);
  border-bottom: var(--grc-rule) solid color-mix(in srgb, var(--grc-text) 16%, transparent);
}
.grc-band { background: var(--grc-ground); }
.grc-footer { background: var(--grc-navy); color: var(--grc-muted-on-ink); }
.grc-card {
  background: var(--grc-white);
  border: var(--grc-rule) solid color-mix(in srgb, var(--grc-text) 12%, transparent);
  border-radius: var(--grc-radius-card);
  padding: 20px;
}
.grc-input {
  font-family: var(--grc-font);
  font-size: 14px;
  padding: 10px 14px;
  border: var(--grc-rule) solid color-mix(in srgb, var(--grc-text) 22%, transparent);
  border-radius: var(--grc-radius);
  background: var(--grc-white);
  color: var(--grc-text);
}
.grc-input:focus-visible { outline: 2px solid var(--grc-green-deep); outline-offset: 2px; }

.grc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--grc-font);
  font-size: 14px;
  font-weight: 700;
  border: var(--grc-rule) solid var(--grc-text);
  border-radius: var(--grc-radius-pill);
  background: var(--grc-text);
  color: var(--grc-text-on-ink);
  text-decoration: none;
  cursor: pointer;
}
.grc-btn:hover { background: color-mix(in srgb, var(--grc-text) 86%, #000); }
.grc-btn:focus-visible { outline: 2px solid var(--grc-green-deep); outline-offset: 2px; }
.grc-btn--secondary { background: transparent; color: var(--grc-text); }
.grc-btn--secondary:hover { background: var(--grc-ground); }
.grc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--grc-font);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--grc-radius-pill);
  background: var(--grc-ground);
  color: var(--grc-text);
}

/* Links + selection */
a { color: var(--grc-text); text-decoration-color: var(--grc-green-deep); }
a:hover { color: var(--grc-green-deep); }
::selection { background: var(--grc-mist); color: var(--grc-text); }