/*
 * Gitlog Theme
 * Cactus-inspired (github.com/probberechts/hexo-theme-cactus)
 * With warm orange palette
 */

/* ============================================
   1. FONTS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');

/* ============================================
   2. CSS VARIABLES
   ============================================ */

body {
  /* Typography - fluid sizing with clamp() */
  --font-text-theme: 'Fira Code', 'Menlo', 'Meslo LG', monospace;
  --font-monospace-theme: 'Fira Code', 'Menlo', monospace;
  --font-interface-theme: 'Fira Code', 'Menlo', monospace;
  /* Scales from 16px (mobile) to 18px (desktop) smoothly */
  --font-text-size: clamp(1rem, 0.925rem + 0.3vw, 1.125rem);

  /* Color palette (warm orange on dark) */
  --cactus-bg: #222129;
  --cactus-bg-light: #2a2930;
  --cactus-bg-code: #2e2d36;
  --cactus-text: #c9cacc;
  --cactus-accent: #FFA86A;
  --cactus-accent-hover: #ffbc8a;
  --cactus-link: #FFA86A;
  --cactus-link-hover: #ffbc8a;
  --cactus-muted: #908d8d;
  --cactus-border: #555560;
  --cactus-quote: #ffcc99;

  /* Map to Obsidian variables */
  --background-primary: var(--cactus-bg);
  --background-primary-alt: var(--cactus-bg-light);
  --background-secondary: var(--cactus-bg);
  --background-secondary-alt: var(--cactus-bg-light);
  --background-modifier-border: var(--cactus-border);

  --text-normal: var(--cactus-text);
  --text-muted: var(--cactus-muted);
  --text-faint: #666670;
  --text-accent: var(--cactus-accent);
  --text-accent-hover: var(--cactus-accent-hover);
  --text-on-accent: var(--cactus-bg);

  --link-color: var(--cactus-link);
  --link-color-hover: var(--cactus-link-hover);
  --link-external-color: var(--cactus-link);
  --link-external-color-hover: var(--cactus-link-hover);
  --link-unresolved-color: var(--cactus-muted);

  --interactive-normal: var(--cactus-bg);
  --interactive-hover: var(--cactus-bg-light);
  --interactive-accent: var(--cactus-accent);
  --interactive-accent-hover: var(--cactus-accent-hover);

  --code-normal: var(--cactus-text);
  --code-background: var(--cactus-bg-code);

  --h1-color: var(--cactus-text);
  --h2-color: var(--cactus-text);
  --h3-color: var(--cactus-text);
  --h4-color: var(--cactus-text);
  --h5-color: var(--cactus-text);
  --h6-color: var(--cactus-text);
}

/* ============================================
   3. PUBLISH CONTAINER VARIABLES
   ============================================ */

.published-container {
  /* Responsive width: 95% on mobile, max 58rem on desktop */
  --page-width: clamp(20rem, 95vw, 58rem);
  --page-padding: clamp(0.75rem, 2vw, 1.5rem);

  --page-title-font: 'Fira Code', monospace;
  --page-title-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --page-title-weight: 600;
  --page-title-color: var(--cactus-text);
  --page-title-line-height: 1.25;

  /* Hide sidebars */
  --sidebar-left-width: 0;
  --sidebar-left-border-width: 0;
  --sidebar-right-width: 0;
  --sidebar-right-border-width: 0;
}

/* ============================================
   4. FORCE DARK MODE
   ============================================ */

.theme-light {
  --background-primary: var(--cactus-bg);
  --background-secondary: var(--cactus-bg);
  --text-normal: var(--cactus-text);
  --text-muted: var(--cactus-muted);
  --text-accent: var(--cactus-accent);
  --interactive-accent: var(--cactus-accent);
}

/* ============================================
   5. GLOBAL RESET & BASE
   ============================================ */

html {
  border-top: 2px solid var(--cactus-accent);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--cactus-bg);
  color: var(--cactus-text);
  font-weight: 400;
  line-height: 1.725;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide all scrollbars */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

*::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* ============================================
   6. LAYOUT & VISIBILITY
   ============================================ */

/* Hide sidebars and footer */
.site-body-left-column,
.site-body-right-column,
.site-footer {
  display: none !important;
}

/* Hide frontmatter and backlinks */
.frontmatter,
pre.frontmatter,
.backlinks {
  display: none !important;
}

/* Fix nested scrollbar issues */
.site-body,
.site-body-center-column,
.render-container {
  overflow: visible !important;
  height: auto !important;
}

/* Center column - responsive width */
.site-body-center-column {
  max-width: clamp(20rem, 95vw, 58rem);
  width: 100%;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(0.75rem, 2vw, 1.5rem);
  box-sizing: border-box;
}

/* Remove default borders/padding and fix overflow */
.markdown-preview-view,
.markdown-rendered {
  border: none;
  padding: 0;
  margin: 0;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* ============================================
   7. PAGE HEADER (title visibility)
   ============================================ */

/* Hide page title on all pages except homepage */
.extra-title {
  display: none !important;
}

/* Show on homepage using :has() to detect .homepage class in sibling */
.publish-renderer:has(.homepage) .extra-title {
  display: block !important;
}

/* ============================================
   8. NAVBAR (first paragraph + hr pattern)
   ============================================ */

/* First paragraph is the nav: **brand** · link · link */
.markdown-rendered > p:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  padding: 0.5rem 0 1.5rem 0;
  margin-bottom: 0;
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  letter-spacing: 0.01em;
}

/* Brand (bold link) */
.markdown-rendered > p:first-child strong {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  margin-right: 0.5em;
}

.markdown-rendered > p:first-child strong a {
  color: var(--cactus-text) !important;
  background: none !important;
}

.markdown-rendered > p:first-child strong a:hover {
  color: var(--cactus-accent) !important;
}

/* Nav links */
.markdown-rendered > p:first-child a {
  color: var(--cactus-accent) !important;
  background: none !important;
}

.markdown-rendered > p:first-child a:hover {
  color: var(--cactus-accent-hover) !important;
}

/* First hr after nav */
.markdown-rendered > p:first-child + hr {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* ============================================
   8. TYPOGRAPHY
   ============================================ */

/* Headings - fluid sizing */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  color: var(--cactus-text);
  font-family: 'Fira Code', monospace;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}

/* Remove underlines from H2 and smaller */
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  border-bottom: none;
  text-decoration: none;
}

.markdown-rendered h1 {
  font-size: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  margin-top: 0;
}

.markdown-rendered h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

/* Cactus-style # prefix for h2 - inline to avoid layout issues */
.markdown-rendered h2::before {
  content: "# ";
  color: var(--cactus-accent);
  font-weight: 600;
}

.markdown-rendered h3 {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
}

.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  font-size: 1rem;
}

/* Paragraphs */
.markdown-rendered p {
  margin-bottom: 1em;
  hyphens: auto;
}

/* ============================================
   9. LINKS (Cactus animated underline)
   ============================================ */

.markdown-rendered a,
.markdown-rendered a.internal-link,
.markdown-rendered a.external-link {
  color: var(--cactus-text);
  text-decoration: none;
  background-image: linear-gradient(
    transparent,
    transparent 5px,
    var(--cactus-text) 5px,
    var(--cactus-text)
  );
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: 0 bottom;
  transition: background-image 0.2s ease;
}

.markdown-rendered a:hover {
  color: var(--cactus-text);
  background-image: linear-gradient(
    transparent,
    transparent 4px,
    var(--cactus-link) 4px,
    var(--cactus-link)
  );
}

/* Nav links don't need underline animation */
.markdown-rendered .nav a,
.markdown-rendered .nav-brand a,
.markdown-rendered .nav-links a {
  background-image: none !important;
}

/* ============================================
   10. LISTS
   ============================================ */

.markdown-rendered ul,
.markdown-rendered ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.markdown-rendered li {
  margin-bottom: 0.35em;
}

.markdown-rendered li::marker {
  color: var(--cactus-accent);
}

/* Post list styling */
.markdown-rendered .post-list {
  list-style: none;
  padding-left: 0;
}

.markdown-rendered .post-list li {
  margin-bottom: 0.75em;
}

.markdown-rendered .post-date {
  color: var(--cactus-muted);
  font-size: 0.85rem;
  margin-right: 0.5em;
}

/* ============================================
   11. BLOCKQUOTES (Cactus style)
   ============================================ */

.markdown-rendered blockquote {
  margin: 1.5em 0;
  padding: 0.5em 1em;
  border: none;
  background: transparent;
  color: var(--cactus-quote);
  font-weight: 500;
  font-style: normal;
  position: relative;
}

.markdown-rendered blockquote::before {
  content: "\201C";
  position: absolute;
  left: -0.25em;
  top: -0.25em;
  color: var(--cactus-quote);
  font-size: 2.5em;
  line-height: 1;
  opacity: 0.5;
}

.markdown-rendered blockquote p {
  margin: 0;
}

/* ============================================
   12. CODE
   ============================================ */

/* Inline code */
.markdown-rendered code {
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
  background-color: var(--cactus-bg-code);
  color: var(--cactus-text);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

/* Code blocks */
.markdown-rendered pre {
  background-color: var(--cactus-bg-code);
  color: var(--cactus-text);
  padding: 1em;
  border-radius: 3px;
  border-left: 3px solid var(--cactus-accent);
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.9em;
  line-height: 1.5;
  max-width: 100%;
}

.markdown-rendered pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

/* ============================================
   13. HORIZONTAL RULES
   ============================================ */

.markdown-rendered hr {
  border: none;
  border-top: 1px solid var(--cactus-border);
  margin: 2em 0;
}

/* ============================================
   14. TABLES
   ============================================ */

.markdown-rendered table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9em;
  display: block;
  overflow-x: auto;
}

.markdown-rendered th {
  border-bottom: 2px solid var(--cactus-border);
  padding: 0.75em;
  text-align: left;
  color: var(--cactus-text);
  font-weight: 600;
}

.markdown-rendered td {
  border-bottom: 1px solid var(--cactus-border);
  padding: 0.75em;
}

/* ============================================
   15. IMAGES
   ============================================ */

.markdown-rendered img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
}

/* ============================================
   16. MOBILE HEADER
   ============================================ */

.site-header {
  background: var(--cactus-bg);
  border-bottom: 1px solid var(--cactus-border);
}

.site-header-text {
  color: var(--cactus-text);
  font-family: 'Fira Code', monospace;
}

/* ============================================
   17. RESPONSIVE
   ============================================ */

@media only screen and (max-width: 30rem) {
  /* Wrap navbar on very small screens */
  .markdown-rendered > p:first-child {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 500px) {
  /* Maximize width on mobile */
  .published-container {
    --page-width: 100vw;
    --page-padding: 0;
  }

  .site-body-center-column {
    max-width: 100%;
    padding: 1rem 0;
  }

  /* Override Obsidian's default 24px horizontal padding */
  .markdown-preview-sizer {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ============================================
   18. SPECIAL ELEMENTS
   ============================================ */

/* Strong/Bold in accent color */
.markdown-rendered strong,
.markdown-rendered b {
  color: var(--cactus-accent);
  font-weight: 600;
}

/* Emphasis */
.markdown-rendered em,
.markdown-rendered i {
  font-style: italic;
}

/* Mark/highlight */
.markdown-rendered mark {
  background-color: rgba(255, 168, 106, 0.3);
  color: var(--cactus-text);
  padding: 0.1em 0.2em;
}

/* Footnotes */
.markdown-rendered .footnotes {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid var(--cactus-border);
  font-size: 0.85em;
  color: var(--cactus-muted);
}