/* ==========================================================================
   Unscarcity — layout utilities + site chrome
   Replaces Bootstrap grid/flex/spacing/components. Pairs with us-tokens.css.
   Vocabulary is intentionally small; compose pages from these + .us-* tokens.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ---- layout primitives ---- */
.us-main { display: block; }
.us-container { max-width: var(--us-max-width); margin: 0 auto; padding-left: var(--us-pad); padding-right: var(--us-pad); }
.us-container--wide { max-width: 1280px; }
.us-section { padding-top: 64px; padding-bottom: 64px; }
.us-section--tight { padding-top: 40px; padding-bottom: 40px; }

/* grid: N equal columns, collapse to 1 on small screens */
.us-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .us-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .us-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* flex helpers */
.us-row { display: flex; align-items: center; gap: 12px; }
.us-row--wrap { flex-wrap: wrap; }
.us-row--between { justify-content: space-between; }
.us-row--center { justify-content: center; }
.us-col { display: flex; flex-direction: column; }
.us-fill { flex: 1 1 auto; }

/* text helpers */
.us-center { text-align: center; }
.us-secondary { color: var(--us-gray); }
.us-measure { max-width: 62ch; }
.us-measure-narrow { max-width: 46ch; }

/* a thin black rule under section headings (replaces border-bottom) */
.us-rule { border: 0; border-top: 2px solid var(--us-black); margin: 0 0 24px; }
.us-h2 { font: 800 var(--us-size-h2)/1.2 var(--us-font-body); margin: 0 0 4px; }
.us-h3 { font: 800 var(--us-size-h3)/1.25 var(--us-font-body); margin: 0 0 6px; }

.us-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- card: flat, square, 2px black border (no shadow, no radius) ---- */
.us-card {
  display: flex; flex-direction: column;
  background: var(--us-white);
  border: 2px solid var(--us-black);
  color: var(--us-black);
  text-decoration: none;
  height: 100%;
}
.us-card__media { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--us-black); }
.us-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
a.us-card:hover { color: var(--us-black); background: var(--us-cream); }
a.us-card:hover .us-h3, a.us-card:hover .us-card__title { text-decoration: underline; }
.us-card__title { font: 800 var(--us-size-ui)/1.3 var(--us-font-body); margin: 0; }
.us-card__num { font-family: var(--us-font-display); font-size: 20px; color: var(--us-orange); line-height: 1; }

/* small black tag/badge */
.us-tag {
  display: inline-block; font: 700 12px/1 var(--us-font-body);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--us-black); color: var(--us-white); padding: 5px 8px;
}

/* ==========================================================================
   Site header (orange field: helmet + wordmark + nav) + hazard divider
   ========================================================================== */
.us-header { background: var(--us-orange); color: var(--us-black); position: sticky; top: 0; z-index: 100; }
.us-header__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 12px var(--us-pad); }
.us-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--us-black); }
.us-brand__glyph { width: 34px; height: 34px; display: block; }
.us-brand__word { font-family: var(--us-font-display); font-size: 22px; letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; }

.us-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.us-nav a { color: var(--us-black); text-decoration: none; font: 700 var(--us-size-ui)/1 var(--us-font-body); }
.us-nav a:hover { text-decoration: underline; }
.us-nav a.is-active { text-decoration: underline; text-underline-offset: 4px; }

/* nav-embedded small button (sign in) */
.us-btn--sm { padding: 9px 14px; font-size: 14px; }

/* user menu: CSS-only via <details> (no Bootstrap JS) */
.us-menu { position: relative; }
.us-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.us-menu > summary::-webkit-details-marker { display: none; }
.us-menu__avatar { width: 32px; height: 32px; border: 2px solid var(--us-black); display: block; }
.us-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: var(--us-white); border: 2px solid var(--us-black); z-index: 200;
}
.us-menu__panel a, .us-menu__header { display: block; padding: 10px 14px; color: var(--us-black); text-decoration: none; font-size: 14px; }
.us-menu__panel a:hover { background: var(--us-cream); }
.us-menu__header { font-weight: 700; border-bottom: 2px solid var(--us-black); }
.us-menu__panel a.is-danger { color: #B00020; border-top: 2px solid var(--us-black); }

/* mobile nav toggle (CSS-only via <details>) — hidden on desktop */
.us-nav-toggle { display: none; }
.us-nav-toggle > summary { list-style: none; cursor: pointer; margin-left: auto; padding: 8px; }
.us-nav-toggle > summary::-webkit-details-marker { display: none; }
.us-burger { display: block; width: 26px; height: 2px; background: var(--us-black); position: relative; }
.us-burger::before, .us-burger::after { content: ""; position: absolute; left: 0; width: 26px; height: 2px; background: var(--us-black); }
.us-burger::before { top: -8px; } .us-burger::after { top: 8px; }

@media (max-width: 860px) {
  .us-nav { display: none; }
  .us-nav-toggle { display: block; margin-left: auto; }
  .us-nav-toggle[open] .us-nav-mobile {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--us-orange); border-top: 2px solid var(--us-black);
    display: flex; flex-direction: column; gap: 0; padding: 4px 0;
  }
  .us-nav-mobile a { padding: 12px var(--us-pad); color: var(--us-black); text-decoration: none; font: 700 var(--us-size-ui) var(--us-font-body); border-bottom: 1px solid rgba(26,26,26,.15); }
}

/* ---- search bar (Ask AI) — square, black-bordered; keeps JS hook classes ---- */
.us-search .ask-ai-card {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--us-white); border: 2px solid var(--us-black); padding: 6px 6px 6px 16px;
}
.us-search .ask-ai-icon { display: inline-flex; color: var(--us-black); flex-shrink: 0; }
.us-search .ask-ai-input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 var(--us-size-ui) var(--us-font-body); padding: 12px 4px; min-width: 0; color: var(--us-black); }
.us-search .ask-ai-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.us-search .ask-ai-btn {
  border: 0; background: var(--us-black); color: var(--us-white);
  font: 700 var(--us-size-ui) var(--us-font-body); padding: 12px 20px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.us-search .ask-ai-btn:hover { background: #000; }
.us-search .ask-ai-btn:disabled { opacity: .55; cursor: not-allowed; }

/* sign-in benefits strip (black) */
.us-strip { background: var(--us-black); color: var(--us-white); }
.us-strip .us-container { padding-top: 10px; padding-bottom: 10px; }
.us-strip a { color: var(--us-white); }

/* ==========================================================================
   Footer (black field)
   ========================================================================== */
.us-footer { background: var(--us-black); color: var(--us-white); }
.us-footer a { color: var(--us-white); text-decoration: none; }
.us-footer a:hover { text-decoration: underline; }
.us-footer__inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 32px; padding-bottom: 32px; }
.us-footer__sep { color: var(--us-gray); margin: 0 8px; }
.us-footer__current { color: var(--us-orange); font-weight: 700; }