/*
 * global.css — Site-wide utility styles
 *
 * Loaded on every front-end request. Defines shared button components,
 * layout helpers, and baseline overrides. Block-specific styles live in
 * each block's own style.css.
 */

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

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ajcs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color 0.2s ease,
    color            0.2s ease,
    border-color     0.2s ease,
    transform        0.15s ease;
}
.ajcs-btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--ignition-red);
  outline-offset: 3px;
}

/* Primary — cobalt fill */
.ajcs-btn--primary {
  background: var(--wp--preset--color--ignition-red);
  color: #fff;
  border-color: var(--wp--preset--color--ignition-red);
}
.ajcs-btn--primary:hover {
  background: var(--wp--preset--color--forge-crimson);
  border-color: var(--wp--preset--color--forge-crimson);
  color: #fff;
  text-decoration: none;
}

/* Ghost — transparent, platinum border */
.ajcs-btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--platinum);
  border-color: rgba(192, 192, 192, 0.35);
}
.ajcs-btn--ghost:hover {
  color: #fff;
  border-color: rgba(192, 192, 192, 0.75);
  text-decoration: none;
}

/* Header CTA — slightly compact */
.ajcs-mega-header__cta.ajcs-btn {
  padding: 10px 20px;
  font-size: 13px;
}

/* ── Eyebrow component ────────────────────────────────────────────────── */
.ajcs-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ajcs-eyebrow__rule {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}
.ajcs-eyebrow__text { white-space: nowrap; }

.ajcs-eyebrow--platinum { color: var(--wp--preset--color--platinum); }
.ajcs-eyebrow--cobalt   { color: var(--wp--preset--color--ignition-red); }
.ajcs-eyebrow--ivory    { color: var(--wp--preset--color--ivory); }
.ajcs-eyebrow--navy     { color: var(--wp--preset--color--navy-700); }

/* ── Hairline rule ────────────────────────────────────────────────────── */
.ajcs-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(192, 192, 192, 0.15);
  border: none;
}

/* ── Body background default ──────────────────────────────────────────── */
body {
  background-color: var(--wp--preset--color--navy-900);
  color: var(--wp--preset--color--ivory);
}

/* ── Prevent horizontal overflow from marquee / animated elements ─────── */
/*
 * overflow-x: clip clips visual overflow without creating a scroll container,
 * so position:sticky in the header continues to work (unlike overflow:hidden).
 * Both html + body set: mobile Chrome can ignore clip on html alone.
 */
html, body { overflow-x: clip; }