/* ============================================================
   Visual Media Concepts — brand overrides
   Loaded AFTER shared.css and home.css to win the cascade.
   Goal: editorial, neutral, all-sans aesthetic matching the
   Pixieset "Hudson" template. Primary type = Izmir (geometric
   sans-serif). Falls back to DM Sans (Google Fonts), then Inter,
   then the system stack. Self-host Izmir later for an exact match.
   ============================================================ */

/* ---------- Type stack ---------- */
:root {
  --font-display: 'Izmir', 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body:    'Izmir', 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-kicker:  'Izmir', 'DM Sans', 'Inter', -apple-system, sans-serif;
}

html, body { font-family: var(--font-body); }

/* ---------- Palette: warm editorial neutrals ---------- */
:root {
  --bg:        #fafaf7;          /* warm off-white */
  --bg-card:   #ffffff;
  --bg-alt:    #f0eeea;          /* warm light gray */
  --bg-deep:   #ffffff;
  --bg-elev-2: #f6f5f1;
  --bg-elev-3: #f0eeea;
  --border:    rgba(0,0,0,0.09);
  --text:      #141414;          /* near-black */
  --text-muted:#6b6b6b;
  --accent:    #141414;          /* monochrome accent = near-black */
  --line:      rgba(0,0,0,0.09);
  --ink-2:     #2a2a2a;
  --ink-3:     #6b6b6b;
}

[data-theme="dark"] {
  --bg:        #161618;          /* neutral dark, NOT blue-tinted */
  --bg-card:   #1f1f22;
  --bg-alt:    #23232a;
  --bg-deep:   #0f0f10;
  --bg-elev-2: #1a1a1d;
  --bg-elev-3: #23232a;
  --border:    rgba(255,255,255,0.10);
  --text:      #f4f4f4;
  --text-muted:#a0a0a0;
  --accent:    #f4f4f4;          /* white-on-dark mono accent */
  --line:      rgba(255,255,255,0.10);
  --ink-2:     #d4d4d4;
  --ink-3:     #a0a0a0;
}

/* ---------- Body ---------- */
body { background: var(--bg); color: var(--text); }

/* ---------- Nav ---------- */
.nav-v2 {
  position: static;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 18px 32px;
  /* Override home.css's grid layout — use flex so we can right-align the
     nav-links + theme-toggle + hamburger as a single group. */
  display: flex;
  align-items: center;
  gap: 28px;
  grid-template-columns: none;
}
.nav-v2 .nav-logo { margin-right: auto; }   /* pushes everything after it to the right */
[data-theme="dark"] .nav-v2 { background: rgba(22, 22, 24, 0.85); }
.nav-v2.is-scrolled { background: rgba(250, 250, 247, 0.95); }
[data-theme="dark"] .nav-v2.is-scrolled { background: rgba(22, 22, 24, 0.95); }

.nav-v2 .nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--text);
}
/* Hide the old SVG logos (no longer used) and the brand-text node */
.nav-v2 .nav-logo .logo-light,
.nav-v2 .nav-logo .logo-dark,
.foot-l .logo-light,
.foot-l .logo-dark { display: none !important; }

/* Wordmark PNG — white on transparent. Invert for light mode.
   Specificity bumped to override home.css's `.nav-v2 .nav-logo img { width:24px; height:24px; }`
   which would otherwise squish a 500x179 wordmark into a 24x24 square.
   object-fit: contain reserves the 160x77 slot to match visualmediaconcepts.com
   without distorting our 500x179 source image. */
.nav-v2 .nav-logo .vmc-logo {
  display: block;
  width: 160px;
  height: 77px;
  object-fit: contain;
  object-position: left center;
  filter: invert(1);            /* light mode (default): renders black */
}
.foot-v2 .foot-l .vmc-logo {
  display: block;
  width: auto;
  height: 28px;
  object-fit: contain;
  filter: invert(1);
}
[data-theme="dark"] .nav-v2 .nav-logo .vmc-logo,
[data-theme="dark"] .foot-v2 .foot-l .vmc-logo { filter: none; }

.foot-v2 .foot-l .vmc-logo-foot { height: 24px; opacity: 0.85; }
.nav-v2 .nav-links a {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav-v2 .nav-links a:hover,
.nav-v2 .nav-links a.is-active { color: var(--text); }

.mobile-menu a {
  font-family: var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

/* ---------- Page hero (no techy decoration) ---------- */
.page-hero { padding: 140px 24px 80px; background: var(--bg); }
.page-hero-grid,
.page-hero-glow { display: none !important; }

.section-kicker {
  font-family: var(--font-kicker);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 300;            /* Izmir reads elegant at light weights */
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(44px, 6vw, 84px);
  color: var(--text);
}
/* Kill the gradient italic serif accent */
.section-title span {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--text) !important;
  font-style: normal !important;
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-style: italic !important; /* subtle italic emphasis, no serif */
}

.section-sub,
.page-hero-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Buttons (solid mono, no blue) ---------- */
.ml-btn,
.ml-btn-primary {
  font-family: var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;             /* Hudson favors sharp edges */
}
.ml-btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  box-shadow: none;
}
.ml-btn-primary:hover {
  background: transparent;
  color: var(--accent);
  filter: none;
  transform: none;
}
.ml-btn-lg { padding: 16px 32px; font-size: 12px; }

/* ---------- Gear-specific overrides ---------- */
.gear-disclosure p {
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: 0;
}

.gear-toc a {
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 16px;
}
.gear-toc a:hover { color: var(--text); border-color: var(--text); }

.gear-category-head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 3.5vw, 40px);
}
.gear-category-head .gear-category-blurb {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

.gear-card {
  border-radius: 0;            /* sharp, editorial */
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.gear-card:hover {
  border-color: var(--text);
  box-shadow: none;
  transform: translateY(-2px);
}
.gear-card-thumb { border-radius: 0; background: var(--bg-alt); }
.gear-card-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
}
.gear-card-why {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}
.gear-card-tag {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--text-muted);
}
.gear-card-btn {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 12px 14px;
}
.gear-card-btn:hover {
  background: transparent;
  color: var(--accent);
  filter: none;
  transform: none;
}

/* ---------- CTA (kill blue glow + grid) ---------- */
.cta-v2 {
  background: var(--bg-alt);
  padding: 100px 24px;
}
.cta-grid,
.cta-glow,
.cta-mark { display: none !important; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
  font-size: clamp(36px, 5vw, 64px);
}
.cta-title span {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--text) !important;
  font-style: italic;
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
}
.cta-body {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 16px;
}
.cta-meta {
  font-family: var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- Footer ---------- */
.foot-v2 {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 32px;
  font-family: var(--font-body);
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--text-muted);
}
.foot-v2 a { color: var(--text-muted); }
.foot-v2 a:hover { color: var(--text); }