/*
 * CISCO LIVE INSPIRED OVERRIDE
 * Applied on top of sn-vanguard base CSS.
 * Colors: Cisco Navy #0d1e3a · Cisco Blue #049fd9 · White #ffffff
 * Font: Inter throughout (drops Playfair/Source Serif)
 */

/* ── Colour tokens ─────────────────────────────────────────────────────── */
:root {
  --accent:       #049fd9;
  --accent-light: #e0f4fb;
  --ink:          #0d1e3a;
  --ink-light:    #3a4a5c;
  --muted:        #7a8fa6;
  --rule:         #0d1e3a;
  --rule-light:   #dde4ec;
  --cream:        #f5f7fa;

  --cisco-navy:   #0d1e3a;
  --cisco-blue:   #049fd9;
  --cisco-dark:   #071529;

  /* Use Inter for everything — Cisco is a sans-serif brand */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;
}

body { background: var(--cream); }

/* ── Dark masthead ─────────────────────────────────────────────────────── */
.sn-masthead {
  background: var(--cisco-navy);
  border-bottom: none;
}
.sn-masthead-top {
  border-bottom: 3px solid var(--cisco-blue);
}
.sn-masthead-nav a {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.sn-masthead-nav a:hover { color: var(--cisco-blue); }
.sn-logo {
  color: #ffffff;
  font-size: clamp(22px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
}
.sn-logo:hover { color: var(--cisco-blue); }
.sn-tagline { color: rgba(255,255,255,0.45); }
.sn-masthead-meta {
  border-top-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
}

/* ── Dark nav bar ──────────────────────────────────────────────────────── */
.sn-nav {
  background: var(--cisco-dark);
  border-bottom: 2px solid var(--cisco-blue);
}
.sn-nav-list a {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-bottom: 3px solid transparent;
  padding: 12px 16px;
}
.sn-nav-list a:hover {
  color: var(--cisco-blue);
  border-bottom-color: var(--cisco-blue);
  background: rgba(4, 159, 217, 0.08);
}

/* ── Main content area ─────────────────────────────────────────────────── */
.sn-main { background: var(--cream); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.sn-hero-section, .sn-hero-section a { color: var(--cisco-blue); }
.sn-hero-title { font-weight: 800; letter-spacing: -0.5px; }
.sn-hero-title a:hover { color: var(--cisco-blue); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sn-sidebar-label {
  color: var(--cisco-blue);
  border-bottom-color: var(--cisco-blue);
  font-size: 10px;
  letter-spacing: 1.5px;
}
.sn-sidebar-title a:hover { color: var(--cisco-blue); }

/* ── Section labels ────────────────────────────────────────────────────── */
.sn-section-label {
  color: var(--cisco-blue);
  border-bottom-color: var(--cisco-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Story cards — Cisco-style with blue top accent border ─────────────── */
.sn-card {
  background: #ffffff;
  border-top: 3px solid var(--cisco-blue);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(13, 30, 58, 0.08);
  transition: box-shadow 0.15s, transform 0.15s;
  overflow: hidden;
}
.sn-card:hover {
  box-shadow: 0 4px 16px rgba(13, 30, 58, 0.14);
  transform: translateY(-2px);
}
.sn-card-body { padding: 0 14px 14px; }
.sn-card-thumb-wrap { margin-bottom: 0; }
.sn-card-thumb { margin-bottom: 0; border-radius: 0; }
.sn-card-section { color: var(--cisco-blue); font-size: 10px; margin-top: 12px; }
.sn-card-section:hover { color: var(--cisco-blue); }
.sn-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.sn-card-title a { color: var(--ink); }
.sn-card-title a:hover { color: var(--cisco-blue); }
.sn-card-excerpt { font-size: 12px; color: var(--ink-light); }

/* ── Section rule ──────────────────────────────────────────────────────── */
.sn-rule { border-top-color: var(--rule-light); }

/* ── Article / post page ───────────────────────────────────────────────── */
.sn-post-section { color: var(--cisco-blue); border-bottom-color: var(--cisco-blue); }
.sn-post-title { font-weight: 800; letter-spacing: -0.5px; }
.sn-post-content h2 { color: var(--ink); }
.sn-post-content blockquote {
  border-top-color: var(--cisco-blue);
  color: var(--cisco-blue);
}
.sn-post-content a { color: var(--cisco-blue); }
.sn-post-tag {
  background: var(--accent-light);
  color: var(--cisco-blue);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.sn-footer {
  background: var(--cisco-navy);
  color: rgba(255,255,255,0.6);
  border-top: 3px solid var(--cisco-blue);
}
.sn-footer a { color: rgba(255,255,255,0.6); }
.sn-footer a:hover { color: var(--cisco-blue); }
.sn-footer-copy { color: rgba(255,255,255,0.4); }

/* ── Tag page heading ──────────────────────────────────────────────────── */
.sn-tag-header { border-left-color: var(--cisco-blue); }
.sn-tag-name { color: var(--ink); }

/* ── Error / 404 page ──────────────────────────────────────────────────── */
.sn-error-code { color: var(--cisco-blue); opacity: 0.25; }

/* ── Centered masthead (no side navs) ──────────────────────────────────── */
.sn-masthead-top--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 16px;
  grid-template-columns: unset;
}
.sn-masthead-top--centered .sn-logo {
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: -1.5px;
}