/* ==========================================================================
   Salesforce Personalization Guide — Main Stylesheet
   Design spec: handoff.md §4.1–§4.7
   ========================================================================== */

/* ---------- CSS Custom Properties (§4.1 Color Palette) ---------- */
:root {
  --color-primary:        #002855;
  --color-primary-hover:  #001A3A;
  --color-accent:         #04844B;
  --color-bg:             #FFFFFF;
  --color-surface:        #F3F3F3;
  --color-text:           #181818;
  --color-text-secondary: #444444;
  --color-text-muted:     #706E6B;
  --color-border:         #DDDBDA;
  --color-code-bg:        #1E1E1E;
  --color-code-text:      #D4D4D4;

  /* Donation / Buy Me a Latte */
  --color-donate:         #FF813F;
  --color-donate-hover:   #E5712E;
  --color-donate-card-bg: #FFF8F0;
  --color-donate-card-border: #FFD6B3;

  /* Callout colors */
  --callout-tip-border:   #04844B;
  --callout-tip-bg:       #F0FAF0;
  --callout-important-border: #DD7A01;
  --callout-important-bg: #FFFBF0;
  --callout-warning-border: #C23934;
  --callout-warning-bg:   #FFF0F0;
  --callout-note-border:  #002855;
  --callout-note-bg:      #EDF2F8;
  --callout-validation-border: #7526C2;
  --callout-validation-bg: #F5F0FF;

  /* Layout */
  --navbar-height: 56px;
  --sidebar-width: 260px;
  --content-max-width: 860px;

  /* Font stacks (§4.2) */
  --font-body: 'Inter', 'Salesforce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 16px); }

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typography (§4.2) ---------- */
h1 { font-size: 32px; font-weight: 700; line-height: 1.3; margin: 0 0 16px; }
h2 { font-size: 26px; font-weight: 600; line-height: 1.35; margin: 40px 0 16px; }
h3 { font-size: 21px; font-weight: 600; line-height: 1.4; margin: 32px 0 12px; }
h4 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 28px 0 10px; }

h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* ---------- Links (§4.7) ---------- */
.article a { text-decoration: none; }
.article a:hover { text-decoration: underline; }

/* ---------- Lists (§4.7) ---------- */
ul, ol { margin: 0 0 16px; padding-left: 1.5em; }
li { margin-bottom: 6px; }
li > ul, li > ol { margin-top: 6px; margin-bottom: 0; }

/* ---------- Horizontal Rules (§4.7) ---------- */
hr { border: none; border-top: 1px solid var(--color-border); margin: 32px 0; }

/* ---------- Images (§4.7) ---------- */
.article img { max-width: 100%; height: auto; display: block; margin: 16px auto; border-radius: 4px; }

/* ---------- Inline Code (§5.7) ---------- */
code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.5;
}

/* ---------- Code Blocks (§4.3) ---------- */
pre {
  position: relative;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: 6px;
  padding: 16px;
  margin: 0 0 16px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.6;
  font-size: 14px;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Language label (top-right) */
pre .code-lang {
  position: absolute;
  top: 6px;
  right: 48px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

/* Copy button (top-right) */
pre .copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 1px solid #555;
  color: #aaa;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
pre .copy-btn:hover { background: #333; color: #fff; }
pre .copy-btn.copied { border-color: var(--color-accent); color: var(--color-accent); }

/* ==========================================================================
   TABLES (§4.4)
   ========================================================================== */
.table-wrapper { overflow-x: auto; margin: 0 0 16px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

thead th {
  background: var(--color-surface);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
}

tbody td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}

tbody tr:nth-child(even) { background: #F9F9F9; }
tbody tr:nth-child(odd)  { background: var(--color-bg); }

/* ==========================================================================
   CALLOUT BOXES (§4.5)
   ========================================================================== */
.callout {
  border-left: 4px solid var(--color-border);
  background: var(--color-surface);
  padding: 14px 18px;
  margin: 0 0 16px;
  border-radius: 0 6px 6px 0;
}
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }

.callout-tip       { border-left-color: var(--callout-tip-border);       background: var(--callout-tip-bg); }
.callout-important { border-left-color: var(--callout-important-border); background: var(--callout-important-bg); }
.callout-warning   { border-left-color: var(--callout-warning-border);   background: var(--callout-warning-bg); }
.callout-note      { border-left-color: var(--callout-note-border);      background: var(--callout-note-bg); }
.callout-validation{ border-left-color: var(--callout-validation-border); background: var(--callout-validation-bg); }

.callout-label {
  font-weight: 600;
  display: inline;
}

/* ==========================================================================
   NAVBAR (§4.6 Top Navigation Bar)
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  height: var(--navbar-height);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.navbar-inner::-webkit-scrollbar { display: none; }

.navbar-brand {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  margin-right: 20px;
  flex-shrink: 0;
}
.navbar-brand:hover { color: #fff; text-decoration: none; }

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.hamburger-line {
  display: block;
  width: 24px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  margin: 4px 0;
  transition: transform 0.3s, opacity 0.3s;
}

/* Nav list */
.navbar-menu {
  display: flex;
  align-items: center;
  flex: 1;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nav-item {
  position: relative;
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 0 9px;
  height: var(--navbar-height);
  line-height: var(--navbar-height);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s;
}
.nav-link:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; }

.dropdown-arrow {
  font-size: 12px;
  margin-left: 4px;
  transition: transform 0.2s;
}

/* Dropdown (§2 dropdown behaviour — hover on desktop) */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  z-index: 1001;
}

.dropdown-menu li a {
  display: block;
  padding: 8px 18px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.15s;
}
.dropdown-menu li a:hover { background: var(--color-surface); color: var(--color-primary); text-decoration: none; }

/* Desktop: show dropdown on hover */
@media (min-width: 1200px) {
  .has-dropdown:hover > .dropdown-menu { display: block; }
  .has-dropdown:hover > .nav-link .dropdown-arrow { transform: rotate(180deg); }
}

/* ==========================================================================
   SIDEBAR (§4.6 Sidebar Table of Contents)
   ========================================================================== */
.page-wrapper {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - var(--navbar-height) - 200px);
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg);
}

.sidebar-inner {
  position: sticky;
  top: var(--navbar-height);
  max-height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  padding: 24px 16px;
}

/* TOC */
.toc-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li { margin: 0; }

.toc a {
  display: block;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  border-radius: 0 4px 4px 0;
}
.toc a:hover { color: var(--color-primary); background: var(--color-surface); text-decoration: none; }
.toc a.active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; background: #E8EEF5; }

/* Indent H3 items in TOC */
.toc .toc-h3 { padding-left: 22px; font-size: 12px; }

/* ==========================================================================
   DONATION CARD (sidebar)
   ========================================================================== */
.donate-card {
  margin-top: 24px;
  padding: 16px;
  background: var(--color-donate-card-bg);
  border: 1px solid var(--color-donate-card-border);
  border-radius: 8px;
  text-align: center;
}

.donate-card-emoji { font-size: 28px; display: block; margin-bottom: 8px; }
.donate-card-heading { font-size: 14px; font-weight: 600; color: var(--color-text); margin: 0 0 10px; }

.donate-btn-sidebar {
  display: inline-block;
  background: var(--color-donate);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.2s;
}
.donate-btn-sidebar:hover { background: var(--color-donate-hover); color: #fff; text-decoration: none; }

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */
.content {
  flex: 1;
  min-width: 0;
  padding: 24px 40px 48px;
  max-width: var(--content-max-width);
}

.article { margin-bottom: 40px; }

/* ==========================================================================
   BREADCRUMBS (§4.6)
   ========================================================================== */
.breadcrumbs {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

.breadcrumbs a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumbs .breadcrumb-sep { margin: 0 6px; color: var(--color-text-muted); }
.breadcrumbs .breadcrumb-current { color: var(--color-text-muted); }

/* ==========================================================================
   PREVIOUS / NEXT NAVIGATION (§3, §4.6)
   ========================================================================== */
.prev-next {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 24px;
}

.prev-next-btn {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 48%;
}
.prev-next-btn:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,40,85,0.12); text-decoration: none; color: var(--color-text); }

.prev-next-btn .pn-direction {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.prev-next-btn .pn-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary);
}
.prev-next-btn.pn-prev { align-items: flex-start; }
.prev-next-btn.pn-next { align-items: flex-end; margin-left: auto; }

/* ==========================================================================
   DONATION CTA (end of page)
   ========================================================================== */
.donate-cta {
  text-align: center;
  padding: 24px;
  margin: 8px 0 0;
  border-top: 1px solid var(--color-border);
}
.donate-cta p { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 12px; }

.donate-btn-cta {
  display: inline-block;
  background: var(--color-donate);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.2s;
}
.donate-btn-cta:hover { background: var(--color-donate-hover); color: #fff; text-decoration: none; }

/* ==========================================================================
   NAV BAR DONATE BUTTON
   ========================================================================== */
.donate-btn-nav {
  display: inline-flex;
  align-items: center;
  background: var(--color-donate);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 16px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.donate-btn-nav:hover { background: var(--color-donate-hover); color: #fff; text-decoration: none; }
.donate-btn-nav .donate-btn-emoji { display: none; }

/* ==========================================================================
   AD CONTAINERS
   ========================================================================== */
.ad-container {
  text-align: center;
  margin: 16px auto;
  padding: 0 20px;
  max-width: 1400px;
}
.ad-label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 4px;
}

.ad-header { margin: 16px auto 0; }
.ad-footer { margin: 0 auto 16px; }

.ad-sidebar {
  margin-top: 20px;
  padding: 0;
}

.ad-in-content {
  margin: 24px 0;
  padding: 0;
}

/* ==========================================================================
   FOOTER (§8)
   ========================================================================== */
.site-footer {
  background: #181818;
  color: #AAAAAA;
  padding: 40px 20px;
  text-align: center;
}

.footer-inner {
  max-width: 800px;
  margin: 0 auto;
}

.footer-title {
  font-size: 16px;
  font-weight: 600;
  color: #ddd;
  margin-bottom: 4px;
}
.footer-subtitle {
  font-size: 14px;
  color: #AAAAAA;
  margin-bottom: 16px;
}
.footer-disclaimer {
  font-size: 13px;
  color: #888;
  margin-bottom: 16px;
  line-height: 1.5;
}
.footer-disclaimer a { color: #AAAAAA; text-decoration: underline; }
.footer-disclaimer a:hover { color: #fff; }

.footer-donate { margin-top: 12px; }
.footer-donate a {
  color: var(--color-donate);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.footer-donate a:hover { color: var(--color-donate-hover); text-decoration: underline; }

/* ==========================================================================
   HOMEPAGE STYLES (§7)
   ========================================================================== */
.hero {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 64px 20px 56px;
}

.hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
}

.hero p {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.92;
}

/* Homepage content — full width, no sidebar */
.content-homepage {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 48px;
}

/* Feature Card Grid (§7.3) */
.feature-cards {
  margin: 32px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 16px 0;
}

.feature-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(0,40,85,0.1); }

.feature-icon {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
}
.feature-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}
.feature-body {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.feature-body p {
  margin: 0 0 8px;
}
.feature-body p:last-child {
  margin-bottom: 0;
}
.feature-body ul {
  margin: 4px 0 0;
  padding-left: 1.2em;
  font-size: 13px;
}
.feature-body li {
  margin-bottom: 4px;
}

/* Homepage CTA (§7.4) */
.homepage-cta {
  text-align: center;
  margin: 32px 0 24px;
}
.btn-cta {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-cta:hover { background: var(--color-primary-hover); color: #fff; text-decoration: none; }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (§4.6)
   ========================================================================== */

/* ---- Below 1200px: hide sidebar, use hamburger nav ---- */
@media (max-width: 1199px) {
  .sidebar { display: none; }
  .content { max-width: 100%; padding: 24px 28px 48px; }
  .ad-sidebar { display: none; }
  .donate-card { display: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hamburger visible */
  .hamburger { display: block; }

  /* Navbar menu becomes vertical overlay */
  .navbar-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    background: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    padding: 8px 0;
    z-index: 999;
  }
  .navbar-menu.open { display: flex; }

  .nav-list {
    flex-direction: column;
    padding: 0;
  }

  .nav-item { margin: 0; }

  .nav-link {
    padding: 12px 20px;
    height: auto;
    line-height: 1.4;
    font-size: 15px;
  }

  /* Dropdown on mobile/tablet: toggle on tap */
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: rgba(0,0,0,0.15);
    padding: 0;
  }
  .dropdown-menu li a { color: #fff; padding: 10px 20px 10px 36px; font-size: 14px; }
  .dropdown-menu li a:hover { background: rgba(255,255,255,0.1); color: #fff; }

  .has-dropdown.dropdown-open > .dropdown-menu { display: block; }
  .has-dropdown.dropdown-open > .nav-link .dropdown-arrow { transform: rotate(180deg); }

  /* Donate button in nav */
  .donate-btn-nav { margin: 8px auto; display: block; text-align: center; width: fit-content; }
}

/* ---- Mobile: < 768px ---- */
@media (max-width: 767px) {
  /* Content full width */
  .content { padding: 20px 16px 40px; }
  .content-homepage { padding: 24px 16px 40px; }

  /* Prev/Next stack vertically */
  .prev-next { flex-direction: column; }
  .prev-next-btn { max-width: 100%; }
  .prev-next-btn.pn-next { align-items: flex-start; }

  /* Feature cards — single column */
  .feature-grid { grid-template-columns: 1fr; }

  /* Hero smaller */
  .hero { padding: 40px 16px 36px; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 16px; }
}

/* Hamburger animation when open */
.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   PRISM.JS DARK THEME OVERRIDES (§4.3)
   Applied server-side by the build script; these styles handle token colors.
   Using a VS Code Dark+ inspired palette.
   ========================================================================== */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata       { color: #6A9955; font-style: italic; }
.token.punctuation  { color: #D4D4D4; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted      { color: #B5CEA8; }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted     { color: #CE9178; }
.token.operator,
.token.entity,
.token.url          { color: #D4D4D4; }
.token.atrule,
.token.attr-value,
.token.keyword      { color: #569CD6; }
.token.function,
.token.class-name   { color: #DCDCAA; }
.token.regex,
.token.important,
.token.variable     { color: #D16969; }
.token.important,
.token.bold         { font-weight: bold; }
.token.italic       { font-style: italic; }

/* ==========================================================================
   UTILITY
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}