/* ============================================================
   Silver Ford Pickups — sfp.css
   Loaded on all /sfp/ pages in addition to site.css.
   Brand colors are CSS variables — swap values here when
   real branding/logo is finalized; no other changes needed.
   ============================================================ */


/* ============================================================
   SFP brand tokens
   ============================================================ */

:root {
  --sfp-bg:         #090e12;              /* near-black, blue-teal tinted */
  --sfp-surface:    #111c26;              /* card / panel background */
  --sfp-border:     #1e3244;             /* border color */
  --sfp-accent:     #6aa4b2;             /* steel teal — matches promo palette */
  --sfp-accent-dk:  #4a8494;             /* darker accent for hover states */
  --sfp-text:       #dce8ec;             /* body text — cool off-white */
  --sfp-muted:      #6a8898;             /* secondary / metadata text */
  --sfp-accent-a20: rgba(106,164,178,.20);
  --sfp-accent-a35: rgba(106,164,178,.35);
  --sfp-accent-a10: rgba(106,164,178,.10);
}


/* ============================================================
   SFP base overrides
   ============================================================ */

.sfp-page body,
body.sfp-page {
  background: var(--sfp-bg);
  color: var(--sfp-text);
}


/* ============================================================
   SFP nav / header
   ============================================================ */

.sfp-nav .nav-link { color: var(--sfp-text); }

.sfp-nav .nav-link.current { text-decoration: underline !important; }


/* ============================================================
   SFP hero
   ============================================================ */

.sfp-hero { padding: 2rem 0; }

.sfp-hero__img {
  width: 100%;
  max-width: 520px;
  border-radius: .5rem;
  display: block;
}

.sfp-hero__copy { max-width: 60ch; }

.sfp-hero__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  margin-bottom: .4em;
  color: var(--sfp-text);
}

.sfp-hero__sub {
  font-size: 1.1rem;
  color: var(--sfp-muted);
  margin-bottom: 1.2rem;
}


/* ============================================================
   SFP cards / surfaces
   ============================================================ */

.sfp-card {
  background: var(--sfp-surface);
  border: 1px solid var(--sfp-border);
  border-radius: 12px;
  padding: 1rem;
}


/* ============================================================
   SFP buttons
   ============================================================ */

.btn-sfp {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
  background: var(--sfp-accent);
  color: #090e12;
  text-decoration: none;
}
.btn-sfp:hover { background: var(--sfp-accent-dk); color: #dce8ec; }


/* ============================================================
   SFP schedule overrides
   (inherits .sched-* from site.css; these adjust palette only)
   ============================================================ */

.sfp-page .sched-card {
  --card-bg: var(--sfp-surface);
  --card-bd: var(--sfp-border);
}

.sfp-page .sched-filter-btn.active {
  background: var(--sfp-accent);
  color: #090e12;
  border-color: var(--sfp-accent);
}


/* ============================================================
   SFP EPK
   ============================================================ */

.sfp-epk-section { margin: 2rem 0; }
.sfp-epk-section h2 {
  font-size: 1.4rem;
  border-bottom: 1px solid var(--sfp-border);
  padding-bottom: .4rem;
  margin-bottom: 1rem;
}