/* store.css
 * Purpose:  Visual redesign of the guest storefront (store/index.php), 2026-08. Replaces the
 *           stock, unbranded Start Bootstrap "Shop Homepage" look with a design grounded in the
 *           real STI mark — spec-sheet-style layout, structural blue / signal red accents,
 *           condensed display type. See docs/TODO.md "Front-end visual refresh" for the
 *           direction this came from (design concept reviewed/approved by Moses 2026-08-05).
 * Notes:    All custom classes are "sti-"-prefixed on purpose — this page still loads full
 *           Bootstrap CSS (needed for the two modals' positioning/animation), and several
 *           obvious-looking names (.card, .btn-primary) are real Bootstrap component classes.
 *           Prefixing avoids relying on CSS source order to win a cascade fight with them.
 *           Light-only for now — see docs/TODO.md for the deferred site-wide dark mode item;
 *           don't add a bare `@media (prefers-color-scheme: dark)` here on its own, it would
 *           make this one page go dark independently of the rest of the (light-only) site.
 */

:root {
  --sti-ink:      #0B1220;   /* near-black navy ground */
  --sti-paper:    #F5F7FA;   /* cool white ground */
  --sti-surface:  #FFFFFF;
  --sti-blue:     #2440E0;   /* structural blue — refined from the logo's pure blue */
  --sti-red:      #E2362B;   /* signal red — sparing accent */
  --sti-slate:    #5B6472;   /* blue-biased neutral, secondary text */
  --sti-slate-2:  #8A93A3;
  --sti-line:     #E3E7EF;
  --sti-text:     #10192B;

  --sti-display: 'Archivo', 'Arial Black', sans-serif;
  --sti-body:    'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --sti-mono:    'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

/* ============================================================
   BASE
   ============================================================ */
.sti-store * { box-sizing: border-box; }
.sti-store {
  background: var(--sti-paper);
  color: var(--sti-text);
  font-family: var(--sti-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.sti-store h1, .sti-store h2, .sti-store h3 { text-wrap: balance; margin: 0; }
/* Deliberately no blanket ".sti-store a { color: inherit }" here — it was
   here in an earlier draft and, at (0,1,1) specificity, silently beat every
   single-class button/link rule below it (0,1,0) AND Bootstrap's own
   .btn-primary/.btn-info on the two modals, since none of those are
   qualified with an element selector. Caught via screenshot 2026-08-05:
   made the hero's ghost button render invisible (dark text inherited onto
   the dark hero photo). Every <a> on this page sets its own color already
   (nav links, login link, hero buttons) or wraps only an image (the brand
   logo), so there's nothing left that actually needs the fallback. */
.sti-store :focus-visible {
  outline: 2px solid var(--sti-blue);
  outline-offset: 2px;
}
.sti-tabular { font-variant-numeric: tabular-nums; }

.sti-eyebrow {
  font-family: var(--sti-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sti-red);
}

/* ============================================================
   NAV
   ============================================================ */
.sti-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--sti-line);
  background: var(--sti-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.sti-brand { display: flex; align-items: center; gap: 12px; }
.sti-brand img { height: 34px; width: auto; display: block; }
.sti-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sti-nav-links a {
  font-family: var(--sti-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sti-slate);
  transition: color 0.15s ease;
}
.sti-nav-links a:hover { color: var(--sti-blue); }
.sti-nav-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sti-login-link {
  font-family: var(--sti-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--sti-slate);
  border-bottom: 1px solid var(--sti-line);
  padding-bottom: 1px;
}
.sti-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid var(--sti-text);
  color: var(--sti-text);
  font-family: var(--sti-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.sti-cart-btn:hover { background: var(--sti-text); color: var(--sti-paper); }
.sti-cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--sti-red);
  color: #fff;
  font-family: var(--sti-mono);
  font-size: 0.68rem;
  font-weight: 500;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ============================================================
   HERO
   ============================================================ */
.sti-hero {
  position: relative;
  padding: clamp(64px, 13vw, 140px) clamp(20px, 5vw, 56px) clamp(56px, 10vw, 100px);
  overflow: hidden;
  border-bottom: 1px solid var(--sti-line);
  background-color: #0B1220;
  /* Placeholder photo per Moses 2026-08-05 — reuses the real construction
     shot already on the public index.php masthead (img/header-bg.jpg),
     standing in until the team picks a permanent one from the jobsite
     photo library. Swap this url() for the chosen photo; nothing else
     here needs to change. */
  background-image: url("../../img/header-bg.jpg");
  background-size: cover;
  background-position: center 65%;
}
.sti-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6,10,22,0.94) 0%, rgba(6,10,22,0.88) 32%, rgba(6,10,22,0.55) 58%, rgba(6,10,22,0.18) 78%, rgba(6,10,22,0.05) 100%);
}
.sti-hero-inner {
  max-width: 780px;
  position: relative;
  z-index: 2;
}
.sti-hero .sti-eyebrow { display: block; margin-bottom: 18px; color: #FF8177; }
.sti-hero h1 {
  font-family: var(--sti-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  color: #fff;
}
.sti-hero h1 em {
  font-style: normal;
  color: #8DA0FF;
}
.sti-hero p {
  font-size: 1.1rem;
  color: #C7CDDC;
  max-width: 46ch;
  margin-bottom: 32px;
}
.sti-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sti-btn-primary, .sti-btn-ghost {
  font-family: var(--sti-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, border-color .15s ease;
}
.sti-btn-primary { background: var(--sti-blue); color: #fff; }
.sti-btn-primary:hover { transform: translateY(-1px); color: #fff; }
.sti-btn-ghost { border-color: #fff; color: #fff; background: none; }
.sti-btn-ghost:hover { background: #fff; color: #0B1220; }

/* ============================================================
   CATALOG
   ============================================================ */
.sti-catalog {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px) 100px;
}
.sti-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--sti-line);
  padding: 56px 0 16px;
  margin-bottom: 32px;
  scroll-margin-top: 90px;
}
.sti-section-head h2 {
  font-family: var(--sti-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}
.sti-section-head .sti-count {
  font-family: var(--sti-mono);
  font-size: 0.8rem;
  color: var(--sti-slate-2);
  white-space: nowrap;
}
.sti-empty {
  font-family: var(--sti-body);
  color: var(--sti-slate);
  padding: 12px 0 32px;
}

/* Flexbox, not grid — with an item count that can be as small as 4 (the
   suite bundles), a CSS-grid `repeat(auto-fill/fit, minmax(...))` leaves
   genuinely-empty trailing cells in a partial last row, and since this
   background color IS the hairline-divider trick (1px gap revealing it
   between cards), those empty cells rendered as a big solid gray block —
   caught via screenshot 2026-08-05. Flexbox's per-row flex-grow means a
   lone trailing card just stretches to fill its row instead. */
.sti-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--sti-line);
  border: 1px solid var(--sti-line);
  margin-bottom: 8px;
}

.sti-card {
  flex: 1 1 270px;
  background: var(--sti-surface);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 0;
  border-radius: 0;
  border-top: 3px solid var(--sti-blue);
  transition: box-shadow 0.15s ease;
}
.sti-card:hover { box-shadow: inset 0 0 0 1px var(--sti-blue); }
.sti-card--individual { border-top-color: var(--sti-red); }
.sti-card--individual:hover { box-shadow: inset 0 0 0 1px var(--sti-red); }

.sti-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sti-card-icon {
  width: 46px;
  height: auto;
  flex-shrink: 0;
}
.sti-card-name {
  font-family: var(--sti-display);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -0.005em;
}
.sti-card-desc {
  color: var(--sti-slate);
  font-size: 0.92rem;
  flex: 1;
}
.sti-card-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.sti-field label {
  display: block;
  font-family: var(--sti-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sti-slate-2);
  margin-bottom: 5px;
}
.sti-field select, .sti-field input {
  width: 100%;
  font-family: var(--sti-mono);
  font-size: 0.85rem;
  border: 1px solid var(--sti-line);
  border-radius: 0;
  background: var(--sti-paper);
  color: var(--sti-text);
  padding: 8px 9px;
}
.sti-field--qty input { width: 64px; text-align: center; }
.sti-card-add {
  font-family: var(--sti-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--sti-text);
  color: var(--sti-paper);
  border: none;
  border-radius: 0;
  padding: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sti-card-add:hover { background: var(--sti-blue); }
.sti-card--individual .sti-card-add:hover { background: var(--sti-red); }

/* ============================================================
   FOOTER
   ============================================================ */
.sti-footer {
  border-top: 1px solid var(--sti-line);
  padding: 28px clamp(20px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--sti-mono);
  font-size: 0.76rem;
  color: var(--sti-slate-2);
  background: var(--sti-surface);
}

/* ============================================================
   MODALS — light restyle only; structure/behavior stay Bootstrap's
   ============================================================ */
.sti-store .modal-content { border-radius: 0; border: 1px solid var(--sti-line); }
.sti-store .modal-title { font-family: var(--sti-display); font-weight: 900; }

@media (max-width: 640px) {
  .sti-nav-links { display: none; }
  .sti-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}