/* Custom CSS for Cybersecurity Writeups Website */
/* Premium Docs Aesthetic — GitHub Dark / Vercel inspired */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ========================================================
   LIGHT MODE
   ======================================================== */
:root {
  --md-text-font: 'Outfit', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --md-code-font: 'JetBrains Mono', SFMono-Regular, Consolas, Menlo, monospace;

  /* Light Mode Palette */
  --md-primary-fg-color: #0f172a;         /* Slate 900 — header bg */
  --md-primary-fg-color--dark: #020617;
  --md-accent-fg-color: #4f46e5;         /* Indigo 600 */
  --md-accent-fg-color--transparent: rgba(79, 70, 229, 0.1);
  --md-typeset-a-color: #2563eb;         /* Blue 600 — clear link color */
}

/* ========================================================
   DARK MODE — Every element must be legible
   ======================================================== */
body[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #161b22;         /* Header background */
  --md-primary-fg-color--dark: #0d1117;
  --md-primary-bg-color: #f0f6fc;         /* Header text — near-white */
  --md-accent-fg-color: #58a6ff;         /* GitHub Blue accent */
  --md-accent-fg-color--transparent: rgba(88, 166, 255, 0.15);

  --md-default-bg-color: #0d1117;        /* Page background */
  --md-default-bg-color--page: #0d1117;
  --md-default-bg-color--light: #161b22;

  --md-default-fg-color: #e6edf3;        /* Primary text — bright for readability */
  --md-default-fg-color--light: #8b949e;
  --md-default-fg-color--lighter: #484f58;
  --md-default-fg-color--lightest: #21262d;

  --md-code-bg-color: #161b22;
  --md-code-fg-color: #e6edf3;

  --md-typeset-a-color: #58a6ff;         /* Links — GitHub Blue, always visible */
  --md-typeset-color: #e6edf3;           /* Body text */

  --md-footer-bg-color: #0d1117;
  --md-footer-bg-color--dark: #010409;
  --md-footer-fg-color: #8b949e;
  --md-footer-fg-color--light: #484f58;
}

/* ========================================================
   SCROLLBAR
   ======================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--md-default-bg-color);
}

::-webkit-scrollbar-thumb {
  background: rgba(139, 148, 158, 0.35);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 148, 158, 0.6);
}

/* ========================================================
   TYPOGRAPHY — Headings
   ======================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: #0f172a !important;              /* Slate 900 — strong dark in light mode */
}

/* Light mode h1 */
h1 {
  font-size: 2.2rem !important;
  margin-bottom: 1.5rem !important;
  color: #0f172a !important;
}

h2 {
  font-size: 1.6rem !important;
  margin-top: 2rem !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  padding-bottom: 8px;
  color: #1e293b !important;              /* Slate 800 */
}

h3 {
  font-size: 1.3rem !important;
  color: #1e293b !important;
}

h4, h5, h6 {
  color: #334155 !important;              /* Slate 700 */
}

/* Dark mode — force ALL headings to be white / near-white */
body[data-md-color-scheme="slate"] h1,
body[data-md-color-scheme="slate"] h2,
body[data-md-color-scheme="slate"] h3,
body[data-md-color-scheme="slate"] h4,
body[data-md-color-scheme="slate"] h5,
body[data-md-color-scheme="slate"] h6,
body[data-md-color-scheme="slate"] .md-typeset h1,
body[data-md-color-scheme="slate"] .md-typeset h2,
body[data-md-color-scheme="slate"] .md-typeset h3,
body[data-md-color-scheme="slate"] .md-typeset h4,
body[data-md-color-scheme="slate"] .md-typeset h5,
body[data-md-color-scheme="slate"] .md-typeset h6 {
  color: #f0f6fc !important;
}

body[data-md-color-scheme="slate"] h1,
body[data-md-color-scheme="slate"] .md-typeset h1 {
  border-left: none !important;
}

body[data-md-color-scheme="slate"] h2,
body[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: rgba(139, 148, 158, 0.2);
}

/* ========================================================
   LINKS — Always visually distinct and clickable
   ======================================================== */

/* Light mode links */
.md-typeset a {
  color: #2563eb !important;              /* Blue 600 — strong contrast */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.md-typeset a:hover {
  color: #1d4ed8 !important;              /* Blue 700 on hover */
  border-bottom-color: #1d4ed8;
}

/* Dark mode links */
body[data-md-color-scheme="slate"] .md-typeset a {
  color: #58a6ff !important;              /* GitHub Blue — bright, unmissable */
  border-bottom: 1px solid rgba(88, 166, 255, 0.3);
}

body[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #79c0ff !important;              /* Lighter blue on hover */
  border-bottom-color: #79c0ff;
}

/* Sidebar nav links should NOT have underlines */
.md-nav a,
.md-tabs a,
.md-header a,
.md-footer a,
.md-source a {
  border-bottom: none !important;
}

/* Active sidebar styles consolidated at the bottom of the file */

/* Table of contents links (right sidebar) */
body[data-md-color-scheme="slate"] .md-nav--secondary a {
  color: #8b949e !important;
  border-bottom: none !important;
}

body[data-md-color-scheme="slate"] .md-nav--secondary a:hover {
  color: #58a6ff !important;
}

body[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: #58a6ff !important;
  background-color: transparent !important;
}

/* ========================================================
   DARK MODE — Body text, paragraphs, lists
   ======================================================== */
body[data-md-color-scheme="slate"] .md-typeset,
body[data-md-color-scheme="slate"] .md-typeset p,
body[data-md-color-scheme="slate"] .md-typeset li,
body[data-md-color-scheme="slate"] .md-typeset td,
body[data-md-color-scheme="slate"] .md-typeset th,
body[data-md-color-scheme="slate"] .md-typeset blockquote {
  color: #c9d1d9 !important;
}

/* Bold text slightly brighter */
body[data-md-color-scheme="slate"] .md-typeset strong,
body[data-md-color-scheme="slate"] .md-typeset b {
  color: #e6edf3 !important;
}

/* Italic text */
body[data-md-color-scheme="slate"] .md-typeset em,
body[data-md-color-scheme="slate"] .md-typeset i {
  color: #c9d1d9 !important;
}

/* ========================================================
   CODE BLOCKS
   ======================================================== */
.md-typeset pre {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(139, 148, 158, 0.15) !important;
}

.md-typeset code {
  border-radius: 4px;
  padding: 2px 6px;
}

/* Dark mode inline code */
body[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(139, 148, 158, 0.2);
}

/* ========================================================
   TABLES
   ======================================================== */
.md-typeset table:not([class]) {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-collapse: collapse;
}

.md-typeset table:not([class]) th {
  font-weight: 500;
}

/* Light mode table header */
:root .md-typeset table:not([class]) th {
  background-color: #0f172a !important;
  color: white !important;
}

/* Dark mode table header */
body[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #21262d !important;
  color: #e6edf3 !important;
}

body[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-bottom: 1px solid rgba(139, 148, 158, 0.15);
}

body[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
  background-color: rgba(88, 166, 255, 0.04);
}

/* ========================================================
   ADMONITIONS / CALLOUT BLOCKS
   ======================================================== */
.md-typeset .admonition {
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition {
  background-color: #161b22 !important;
  border-color: rgba(139, 148, 158, 0.25) !important;
}

/* ========================================================
   SIDEBAR
   ======================================================== */
body[data-md-color-scheme="slate"] .md-sidebar {
  border-right-color: rgba(139, 148, 158, 0.1);
}

/* Redundant overrides removed, styled in the unified section below */

/* ========================================================
   SEARCH BAR
   ======================================================== */
body[data-md-color-scheme="slate"] .md-search__input {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(139, 148, 158, 0.3);
}

body[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: #484f58 !important;
}

/* ========================================================
   MERMAID DIAGRAMS
   ======================================================== */
.mermaid {
  background-color: transparent !important;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(139, 148, 158, 0.1);
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

/* ========================================================
   HEADER
   ======================================================== */
.md-header {
  backdrop-filter: blur(12px) !important;
  background-color: rgba(15, 23, 42, 0.95) !important;
}

body[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(13, 17, 23, 0.95) !important;
  border-bottom: 1px solid rgba(139, 148, 158, 0.1);
}

/* Header title text in dark mode */
body[data-md-color-scheme="slate"] .md-header__title {
  color: #f0f6fc !important;
}

body[data-md-color-scheme="slate"] .md-header .md-header__button,
body[data-md-color-scheme="slate"] .md-header .md-icon {
  color: #f0f6fc !important;
}

/* ========================================================
   CONTENT AREA — subtle card effect in dark mode
   ======================================================== */
body[data-md-color-scheme="slate"] .md-content {
  background-color: #0d1117;
}

/* Horizontal rules */
body[data-md-color-scheme="slate"] .md-typeset hr {
  border-color: rgba(139, 148, 158, 0.15);
}

/* ========================================================
   FOOTER
   ======================================================== */
body[data-md-color-scheme="slate"] .md-footer {
  background-color: #010409 !important;
  border-top: 1px solid rgba(139, 148, 158, 0.1);
}

body[data-md-color-scheme="slate"] .md-copyright {
  color: #484f58 !important;
}

/* ========================================================
   MODERN SIDEBAR (SonarQube/Stripe Aesthetic)
   ======================================================== */

.md-sidebar--primary {
  padding-top: 0.5rem;
}

.md-nav {
  /* Inherits 'Outfit' font family naturally, just adjusting scale and spacing */
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}

/* Ensure the TOC toggle label is completely hidden */
.md-nav__link[for="__toc"],
label.md-nav__link[for="__toc"] {
  display: none !important;
}

/* Parent Category/Folder items (collapsible headers) */
.md-nav__item--nested > .md-nav__link:not([for="__toc"]) {
  font-weight: 600 !important;
  color: #334155 !important; /* Slate 700 */
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  font-size: 0.74rem !important;
}

body[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav__link:not([for="__toc"]) {
  color: #cbd5e1 !important; /* Slate 300 */
}

/* Sidebar Links (Leaf nodes/pages) */
.md-nav__link:not([for="__toc"]) {
  color: #475569 !important; /* Slate 600 */
  transition: all 0.15s ease !important;
  border-radius: 4px !important;
  padding: 0.35rem 0.55rem !important;
  margin: 0.12rem 0 !important; /* Increased margin for highlight separation */
  display: flex;
  align-items: center;
  font-size: 0.72rem !important;
}

/* Ensure list items themselves have distinct vertical separation to prevent overlaps */
.md-sidebar--primary .md-nav__item {
  margin-bottom: 0.12rem !important;
}

body[data-md-color-scheme="slate"] .md-nav__link:not([for="__toc"]) {
  color: #94a3b8 !important; /* Slate 400 */
}

/* Hover effect on links */
.md-nav__link:not([for="__toc"]):hover {
  background-color: #f1f5f9 !important; /* Slate 100 */
  color: #0f172a !important; /* Slate 900 */
}

body[data-md-color-scheme="slate"] .md-nav__link:not([for="__toc"]):hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #f8fafc !important; /* Slate 50 */
}

/* Active Leaf Page Highlight */
.md-nav__link.md-nav__link--active:not([for="__toc"]),
.md-nav__link.md-nav__link--active:not([for="__toc"]) .md-ellipsis {
  color: #2563eb !important; /* Deep Blue */
  font-weight: 600 !important;
}

.md-nav__link.md-nav__link--active:not([for="__toc"]) {
  background-color: #eff6ff !important; /* Light blue tint */
}

/* Active Leaf Page Highlight (Dark Mode) */
body[data-md-color-scheme="slate"] .md-nav__link.md-nav__link--active:not([for="__toc"]),
body[data-md-color-scheme="slate"] .md-nav__link.md-nav__link--active:not([for="__toc"]) .md-ellipsis {
  color: #38bdf8 !important; /* Sky Blue */
}

body[data-md-color-scheme="slate"] .md-nav__link.md-nav__link--active:not([for="__toc"]) {
  background-color: rgba(56, 189, 248, 0.1) !important;
}

/* Adjust nested items indentation for clear visual hierarchy */
.md-nav__list .md-nav__list {
  padding-left: 0.5rem !important;
  border-left: 1px solid #e2e8f0;
  margin-left: 0.6rem;
}

body[data-md-color-scheme="slate"] .md-nav__list .md-nav__list {
  border-left-color: rgba(255, 255, 255, 0.08);
}

/* ========================================================
   MERMAID DIAGRAM TEXT LEGIBILITY FIX
   ======================================================== */

/* Respect inline color styles (like color:#fff or color:rgb(255,255,255)) regardless of browser serialization format */

/* Class-based HTML text nodes inside foreignObject */
svg [style*="color:#fff"] .nodeLabel,
svg [style*="color: #fff"] .nodeLabel,
svg [style*="color:#ffffff"] .nodeLabel,
svg [style*="color: #ffffff"] .nodeLabel,
svg [style*="color:rgb(255,255,255)"] .nodeLabel,
svg [style*="color: rgb(255, 255, 255)"] .nodeLabel,
svg [style*="color:#fff"] .label *,
svg [style*="color: #fff"] .label *,
svg [style*="color:#ffffff"] .label *,
svg [style*="color: #ffffff"] .label *,
svg [style*="color:rgb(255,255,255)"] .label *,
svg [style*="color: rgb(255, 255, 255)"] .label *,

/* SVG native text and tspan elements */
svg [style*="color:#fff"] text,
svg [style*="color: #fff"] text,
svg [style*="color:#ffffff"] text,
svg [style*="color: #ffffff"] text,
svg [style*="color:rgb(255,255,255)"] text,
svg [style*="color: rgb(255, 255, 255)"] text,
svg [style*="color:#fff"] tspan,
svg [style*="color: #fff"] tspan,
svg [style*="color:#ffffff"] tspan,
svg [style*="color: #ffffff"] tspan,
svg [style*="color:rgb(255,255,255)"] tspan,
svg [style*="color: rgb(255, 255, 255)"] tspan,

/* Sibling elements (when style is on the sibling rect container instead of the parent) */
svg .node [style*="color:#fff"] ~ .label *,
svg .node [style*="color: #fff"] ~ .label *,
svg .node [style*="color:#ffffff"] ~ .label *,
svg .node [style*="color: #ffffff"] ~ .label *,
svg .node [style*="color:rgb(255,255,255)"] ~ .label *,
svg .node [style*="color: rgb(255, 255, 255)"] ~ .label *,
svg .node [style*="color:#fff"] ~ text,
svg .node [style*="color: #fff"] ~ text,
svg .node [style*="color:#ffffff"] ~ text,
svg .node [style*="color: #ffffff"] ~ text,
svg .node [style*="color:rgb(255,255,255)"] ~ text,
svg .node [style*="color: rgb(255, 255, 255)"] ~ text,
svg .node [style*="color:#fff"] ~ tspan,
svg .node [style*="color: #fff"] ~ tspan,
svg .node [style*="color:#ffffff"] ~ tspan,
svg .node [style*="color: #ffffff"] ~ tspan,
svg .node [style*="color:rgb(255,255,255)"] ~ tspan,
svg .node [style*="color: rgb(255, 255, 255)"] ~ tspan {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Fallback: Direct hex mappings for the specific colored nodes we defined */
svg .node [style*="fill:#2563eb"] ~ .label *,
svg .node [style*="fill: #2563eb"] ~ .label *,
svg .node [style*="fill:rgb(37, 99, 235)"] ~ .label *,
svg .node [style*="fill: rgb(37, 99, 235)"] ~ .label *,

svg .node [style*="fill:#0891b2"] ~ .label *,
svg .node [style*="fill: #0891b2"] ~ .label *,
svg .node [style*="fill:rgb(8, 145, 178)"] ~ .label *,
svg .node [style*="fill: rgb(8, 145, 178)"] ~ .label *,

svg .node [style*="fill:#7c3aed"] ~ .label *,
svg .node [style*="fill: #7c3aed"] ~ .label *,
svg .node [style*="fill:rgb(124, 58, 237)"] ~ .label *,
svg .node [style*="fill: rgb(124, 58, 237)"] ~ .label *,

svg .node [style*="fill:#d97706"] ~ .label *,
svg .node [style*="fill: #d97706"] ~ .label *,
svg .node [style*="fill:rgb(217, 119, 6)"] ~ .label *,
svg .node [style*="fill: rgb(217, 119, 6)"] ~ .label *,

svg .node [style*="fill:#ea580c"] ~ .label *,
svg .node [style*="fill: #ea580c"] ~ .label *,
svg .node [style*="fill:rgb(234, 88, 12)"] ~ .label *,
svg .node [style*="fill: rgb(234, 88, 12)"] ~ .label *,

svg .node [style*="fill:#ca8a04"] ~ .label *,
svg .node [style*="fill: #ca8a04"] ~ .label *,
svg .node [style*="fill:rgb(202, 138, 4)"] ~ .label *,
svg .node [style*="fill: rgb(202, 138, 4)"] ~ .label *,

svg .node [style*="fill:#059669"] ~ .label *,
svg .node [style*="fill: #059669"] ~ .label *,
svg .node [style*="fill:rgb(5, 150, 105)"] ~ .label *,
svg .node [style*="fill: rgb(5, 150, 105)"] ~ .label *,

svg .node [style*="fill:#dc2626"] ~ .label *,
svg .node [style*="fill: #dc2626"] ~ .label *,
svg .node [style*="fill:rgb(220, 38, 38)"] ~ .label *,
svg .node [style*="fill: rgb(220, 38, 38)"] ~ .label *,

svg .node [style*="fill:#475569"] ~ .label *,
svg .node [style*="fill: #475569"] ~ .label *,
svg .node [style*="fill:rgb(71, 85, 105)"] ~ .label *,
svg .node [style*="fill: rgb(71, 85, 105)"] ~ .label * {
  color: #ffffff !important;
  fill: #ffffff !important;
}