/* =============================================================================
   F2 chrome reskin for the builder (1E, light). Loaded AFTER style.css.
   Recolors the builder CHROME to the storefront F2 tokens and swaps the header/
   footer to match the site, so Shop → builder is coherent. Touches ONLY chrome:
   the shadowbox preview/output, form logic, capture, cart, and PowerPoint are
   untouched (the USMC vars remapped here are used only in chrome, never in the
   shadowbox output, which stays regulation-accurate with its own colors/images).
   ============================================================================= */

/* Remap the USMC chrome accents to the exact storefront tokens. (Scarlet stays as
   the semantic error red.) These vars are used only by chrome selectors. */
:root {
  --usmc-navy: #032268;
  --usmc-gold: #EEC011;
  --f2-navy: #032268;
  --f2-navy-deep: #04163F;
  --f2-gold: #EEC011;
  --f2-offwhite: #F4F4F3;
}

/* Always reserve the scrollbar gutter (mirrors the storefront) so the centered
   header words land at the exact same horizontal position as every other page,
   independent of page height / password-gate state. */
html { overflow-y: scroll; }

/* Chrome headings adopt Oswald (form/inputs keep their usability styling). */
.form-header h2,
.card-header h3 { font-family: 'Oswald', 'Montserrat', sans-serif; font-weight: 500; letter-spacing: -0.01em; }
.form-header h2 { font-size: 2rem; }

/* Action buttons: compact so all three fit the form column (no horizontal scrollbar).
   Scoped to .button-group so other .btn usages (modals) are unaffected. */
.button-group { gap: .55rem; }
.button-group .btn {
  min-width: 0;               /* allow flex items to shrink below content width */
  padding: .62rem .55rem;
  font-size: .8rem;
  letter-spacing: .2px;
  gap: .35rem;
  line-height: 1.15;
}
.button-group .btn .btn-icon { width: 17px; height: 17px; flex: none; }

/* ---- Shared F2 site header (replaces .app-header content; matches Site.astro) -- */
.f2-bhead { position: sticky; top: 0; z-index: 1000; background: var(--f2-navy); }
.f2-bhead-inner {
  /* Match the storefront shell (Site.astro .f2-shell) so the header words line
     up with every other page: max-width 1200 + the same clamped gutter. */
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 0.5rem + 3vw, 3rem); min-height: 74px;
  display: flex; align-items: center; gap: 1.5rem;
}
.f2-bbrand { margin-right: auto; text-decoration: none; }
.f2-bbrand span {
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .04em;
  color: #fff; font-size: 1.5rem; text-transform: uppercase;
}
.f2-bnav { display: flex; align-items: center; gap: 2rem; }
.f2-bnav a {
  font-family: 'Epilogue', system-ui, sans-serif; color: #fff; font-size: 1.05rem;
  font-weight: 400; text-decoration: none; transition: color .16s ease; white-space: nowrap;
}
.f2-bnav a:hover { color: var(--f2-gold); }
@media (max-width: 820px) {
  .f2-bnav { gap: 1.1rem; }
  .f2-bnav a { font-size: .95rem; }
  .f2-bbrand span { font-size: 1.25rem; }
}
@media (max-width: 620px) {
  .f2-bhead-inner { padding: 0 1.1rem; flex-wrap: wrap; min-height: 0; padding-block: .7rem; gap: .5rem 1.1rem; }
  .f2-bnav { width: 100%; gap: .9rem 1.1rem; flex-wrap: wrap; }
}