/* claudelint VitePress Theme — Warm Anthropic-Inspired Palette
 *
 * Design principle: Match Claude Code docs — warm neutral palette with
 * near-black text for ALL interactive elements (links, nav, sidebar).
 * Terracotta accent used ONLY for hero name and CTA buttons.
 *
 * --vp-c-brand-1 is set to text color (NOT terracotta) because VitePress
 * uses it for nav active, sidebar active, content links, edit link,
 * prev/next pager, outline indicator, etc. — all of which should be dark.
 */

/* Self-hosted Source Serif 4 (variable, weights 400-600) */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cl-font-heading: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;

  /* Brand = dark text (VitePress uses this for links, nav, sidebar, etc.) */
  --vp-c-brand-1: #1a1a19;
  --vp-c-brand-2: #2c2a22;
  --vp-c-brand-3: #3d3929;
  --vp-c-brand-soft: rgba(26, 26, 25, 0.06);

  /* Backgrounds: warm off-white */
  --vp-c-bg: #faf9f5;
  --vp-c-bg-alt: #f5f3ee;
  --vp-c-bg-elv: #ffffff;
  --vp-c-bg-soft: #f0ede6;

  /* Text: warm near-blacks and grays */
  --vp-c-text-1: #1a1a19;
  --vp-c-text-2: #5c5a52;
  --vp-c-text-3: #8a887f;

  /* Borders: warm grays */
  --vp-c-divider: #e8e6dc;
  --vp-c-border: #d4d2c8;
  --vp-c-gutter: #e8e6dc;

  /* Hero name: terracotta (the ONE place accent color appears prominently) */
  --vp-home-hero-name-color: #d97757;

  /* CTA buttons: dark (matches Anthropic's black button style) */
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: #ffffff;
  --vp-button-brand-bg: #1a1a19;
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: #ffffff;
  --vp-button-brand-hover-bg: #2c2a22;
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: #ffffff;
  --vp-button-brand-active-bg: #3d3929;

  /* Custom blocks: use text color, not terracotta */
  --vp-c-tip-1: #5c5a52;
  --vp-c-tip-2: #3d3929;
  --vp-c-tip-3: #8a887f;
  --vp-c-tip-soft: rgba(92, 90, 82, 0.08);

  --vp-c-info-1: #5c5a52;
  --vp-c-info-2: #3d3929;
  --vp-c-info-3: #8a887f;
  --vp-c-info-soft: rgba(92, 90, 82, 0.08);

  --vp-c-warning-1: #8a7a52;
  --vp-c-warning-2: #6b5d3a;
  --vp-c-warning-3: #a89a72;
  --vp-c-warning-soft: rgba(138, 122, 82, 0.08);

  --vp-c-danger-1: #8a5252;
  --vp-c-danger-2: #6b3a3a;
  --vp-c-danger-3: #a87272;
  --vp-c-danger-soft: rgba(138, 82, 82, 0.08);

  /* Terminal: warm palette for light mode */
  --cl-terminal-bg: #302b26;
  --cl-terminal-chrome: #29241f;

  /* Severity/status dot colors (shared by RuleBadge, RuleCard, RuleHeader) */
  --cl-severity-error: #dc2626;
  --cl-severity-warning: #d97706;
  --cl-severity-info: #64748b;
  --cl-status-fixable: #16a34a;
  --cl-status-configurable: #64748b;
}

.dark {
  /* Brand = light text (mirrors light-mode strategy: brand-1 is the text color,
     not an accent. Official Claude Code docs dark mode uses white/cream for
     links, sidebar, nav — no orange accent on interactive elements.) */
  --vp-c-brand-1: #e8e6dc;
  --vp-c-brand-2: #d4d2c8;
  --vp-c-brand-3: #f0eee6;
  --vp-c-brand-soft: rgba(232, 230, 220, 0.08);

  --vp-c-bg: #1a1a19;
  --vp-c-bg-alt: #141413;
  --vp-c-bg-elv: #242420;
  --vp-c-bg-soft: #242420;

  --vp-c-text-1: #e8e6dc;
  --vp-c-text-2: #a8a69d;
  --vp-c-text-3: #6e6c64;

  --vp-c-divider: #2e2e2a;
  --vp-c-border: #3c3c36;
  --vp-c-gutter: #2e2e2a;

  --vp-home-hero-name-color: #e08b6e;

  --vp-button-brand-text: #1a1a19;
  --vp-button-brand-bg: #e8e6dc;
  --vp-button-brand-hover-text: #1a1a19;
  --vp-button-brand-hover-bg: #f0eee6;
  --vp-button-brand-active-text: #1a1a19;
  --vp-button-brand-active-bg: #d4d2c8;

  --vp-c-tip-1: #a8a69d;
  --vp-c-tip-2: #8a887f;
  --vp-c-tip-3: #6e6c64;
  --vp-c-tip-soft: rgba(168, 166, 157, 0.08);

  --vp-c-info-1: #a8a69d;
  --vp-c-info-2: #8a887f;
  --vp-c-info-3: #6e6c64;
  --vp-c-info-soft: rgba(168, 166, 157, 0.08);

  --vp-c-warning-1: #c4b88a;
  --vp-c-warning-2: #a89a72;
  --vp-c-warning-3: #8a7a52;
  --vp-c-warning-soft: rgba(196, 184, 138, 0.08);

  --vp-c-danger-1: #c48a8a;
  --vp-c-danger-2: #a87272;
  --vp-c-danger-3: #8a5252;
  --vp-c-danger-soft: rgba(196, 138, 138, 0.08);

  /* Severity/status dot colors (dark mode) */
  --cl-severity-error: #f87171;
  --cl-severity-warning: #fbbf24;
  --cl-severity-info: #94a3b8;
  --cl-status-fixable: #4ade80;
  --cl-status-configurable: #94a3b8;

  /* Search: subtle warm border + terracotta accents (matches Anthropic) */
  --vp-local-search-result-selected-border: var(--vp-c-border);
  --vp-local-search-result-selected-bg: var(--vp-c-bg-soft);
  --vp-local-search-highlight-bg: #d4a574;
  --vp-local-search-highlight-text: #1a1a19;

  /* Dark mode nav accent (terracotta for sidebar/nav indicators only) */
  --cl-dark-accent: #d4a574;
}

/* ===== Typography: Serif Headings ===== */

.vp-doc h1,
.vp-doc h2,
.vp-doc h3,
.vp-doc h4 {
  font-family: var(--cl-font-heading);
}

.vp-doc h1 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vp-doc h2 {
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.VPHero .name,
.VPHero .text {
  font-family: var(--cl-font-heading);
}

.VPHero .text {
  font-size: 56px !important;
  line-height: 1.12 !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.VPHero .tagline {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}

@media (min-width: 960px) {
  .VPHero .text,
  .VPHero .tagline {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 959px) {
  .VPHero .image {
    display: none !important;
  }
}

/* Hero spacing */
.VPHero {
  padding-bottom: 104px !important;
}

.VPHome {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.VPContent.is-home {
  padding-bottom: 0 !important;
}

@media (max-width: 959px) {
  .VPHero {
    padding-bottom: 60px !important;
  }
}

/* ===== Hero: Wider layout, vertically centered, terminal bleeds right ===== */

html {
  overflow-x: hidden !important;
}

@media (min-width: 960px) {
  .VPHero .container {
    max-width: 1400px !important;
    align-items: center !important;
    gap: 96px;
  }

  .VPHero.has-image .main {
    max-width: 640px !important;
  }

  .VPHero .image {
    overflow: visible !important;
  }

  .VPHero .image-container {
    transform: none !important;
    width: auto !important;
    height: auto !important;
  }
}

.VPHero .main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.VPHero .image-container {
  overflow: visible !important;
  display: flex !important;
}

.VPHero .image-container .image-bg {
  display: none;
}

/* ===== Buttons: Rounded rect (not pill) to match Anthropic ===== */

.VPButton {
  border-radius: 10px !important;
}

.VPHero .name .clip {
  background: linear-gradient(135deg, #d97757 0%, #c4683f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .VPHero .name .clip {
  background: linear-gradient(135deg, #e08b6e 0%, #d97757 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Nav Logo ===== */

.VPNavBarTitle .logo {
  height: 17px;
  width: auto;
  margin-right: 7px;
}

/* ===== Nav: Always show bottom border (VitePress hides it on home) ===== */

.VPNavBar .divider-line {
  background-color: var(--vp-c-gutter) !important;
}

/* ===== Nav: Active/hover underline (matches Claude Code docs) ===== */

.VPNavBarMenuLink,
.VPNavBarMenuGroup .text {
  color: var(--vp-c-text-2) !important;
  border-bottom: 2px solid transparent !important;
  transition:
    color 0.25s,
    border-bottom-color 0.25s !important;
}

.VPNavBarMenuLink:hover,
.VPNavBarMenuGroup:hover .text {
  color: var(--vp-c-text-1) !important;
  border-bottom-color: var(--vp-c-border) !important;
}

.VPNavBarMenuLink.active {
  color: var(--vp-c-text-1) !important;
  border-bottom-color: var(--vp-c-text-1) !important;
}

/* ===== Light Mode: Visible sidebar indicator bar ===== */

.VPSidebarItem.is-active > .item .indicator {
  background: var(--vp-c-text-1);
}

/* ===== Dark Mode: Terracotta for nav indicators only ===== */
/* Official Claude docs use orange only for sidebar active + nav active underline,
   NOT for content links. brand-1 stays cream; these overrides add the accent. */

.dark .VPSidebarItem.is-active > .item .text {
  color: var(--cl-dark-accent) !important;
}

.dark .VPSidebarItem.is-active > .item .indicator {
  background: var(--cl-dark-accent);
}

.dark .VPNavBarMenuLink.active {
  border-bottom-color: var(--cl-dark-accent);
}

.dark .VPDocAsideOutline .outline-link.active {
  color: var(--cl-dark-accent) !important;
  transition: color 0.25s;
}

.dark .VPDocAsideOutline .outline-marker {
  background-color: var(--cl-dark-accent) !important;
}

/* ===== Interactive borders: Use theme-consistent borders ===== */

.VPSwitch:hover {
  border-color: var(--vp-c-text-3) !important;
}

/* ===== Search: Use theme-consistent borders ===== */

.DocSearch-Button:hover {
  border-color: var(--vp-c-border) !important;
}

.search-bar:focus-within {
  border-color: var(--vp-c-border) !important;
}

.DocSearch-Form {
  border-color: var(--vp-c-border) !important;
}

/* ===== Pager (prev/next): Use theme-consistent borders ===== */

.pager-link:hover {
  border-color: var(--vp-c-text-3) !important;
}

/* ===== Code Blocks: Hide language label ===== */

.vp-doc [class*='language-'] > span.lang {
  display: none;
}

/* ===== Content Links: Underline treatment ===== */

/* ===== Rules Sidebar: Lighter category headers ===== */

.rules-page .VPSidebarItem.level-0 > .item > .text {
  font-weight: 600;
  color: var(--vp-c-text-2);
}

.rules-page .VPSidebarItem.level-0:not(.collapsed) > .item > .text {
  color: var(--vp-c-text-1);
}

/* ===== Custom Blocks: Left-border only (no background fill) ===== */

.vp-doc .custom-block {
  background-color: transparent;
  border: none;
  border-left: 3px solid var(--vp-c-divider);
  border-radius: 0;
  padding: 8px 16px;
}

.vp-doc .custom-block.tip {
  border-left-color: var(--vp-c-tip-1);
}

.vp-doc .custom-block.warning {
  border-left-color: var(--vp-c-warning-1);
}

.vp-doc .custom-block.danger {
  border-left-color: var(--vp-c-danger-1);
}

.vp-doc .custom-block.info {
  border-left-color: var(--vp-c-info-1);
}

/* ===== Details Blocks: FaqList-inspired collapsible styling ===== */

.vp-doc .custom-block.details {
  border-left: none;
  border-bottom: 1px solid var(--vp-c-divider);
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* Remove bottom divider from last details before a heading or end of section */
.vp-doc .custom-block.details:has(+ :not(.custom-block.details)),
.vp-doc .custom-block.details:last-child {
  border-bottom: none;
}

.vp-doc .custom-block.details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin: 0;
  cursor: pointer;
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vp-c-text-1);
  list-style: none;
}

.vp-doc .custom-block.details summary::-webkit-details-marker {
  display: none;
}

.vp-doc .custom-block.details summary::marker {
  content: '';
}

.vp-doc .custom-block.details summary::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4L10 8L6 12' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4L10 8L6 12' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  color: var(--vp-c-text-3);
  transition: transform 0.2s ease;
}

.vp-doc .custom-block.details[open] summary::before {
  transform: rotate(90deg);
}

.vp-doc .custom-block.details summary:hover {
  color: var(--vp-c-text-2);
}

.vp-doc .custom-block.details > :not(summary) {
  padding-left: 24px;
}

.vp-doc .custom-block.details > :last-child {
  padding-bottom: 14px;
}

.vp-doc a {
  text-decoration: underline;
  text-decoration-color: var(--vp-c-divider);
  text-underline-offset: 3px;
  font-weight: 500;
  transition: text-decoration-color 0.2s;
}

.vp-doc a:hover {
  text-decoration-color: var(--vp-c-text-1);
}
