/* ==========================================================================
   lelu.uk - Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (for future dark mode support)
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg: #f5f5f5;
  --color-text: #000;
  --color-text-muted: #666;
  --color-link: #000;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* Spacing */
  --content-max-width: 800px;
  --content-padding: 2rem;
  --section-spacing: 2.5rem;
  
  /* Font sizes */
  --font-size-logo: 3rem;
  --font-size-section-header: 1.25rem;
  --font-size-body: 1rem;
  --font-size-small: 0.9rem;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  
  /* Background pattern - aligned so top-left of image starts at viewport position */
  background-image: url('/images/background-dots_3k.png');
  background-repeat: no-repeat;
  /* background-position: calc(100% - 500px) 150px; */
  background-position: 0 0;
  background-size: 3056px 3005px;
  background-attachment: fixed;
  
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

p {
  margin: 0 0 1rem 0;
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--content-padding);
}

/* --------------------------------------------------------------------------
   Logo / Site Header
   -------------------------------------------------------------------------- */
.site-logo {
  font-size: var(--font-size-logo);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-text);
  display: inline-block;
  margin-bottom: 4rem;
}

.site-logo:hover {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Home Page Sections
   -------------------------------------------------------------------------- */
.home-section {
  margin-bottom: var(--section-spacing);
}

.home-section h2 {
  font-size: var(--font-size-section-header);
  font-weight: var(--font-weight-medium);
  text-transform: lowercase;
  margin-bottom: 0.75rem;
}

.home-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1.5rem;
}

.home-section li {
  margin-bottom: 0.25rem;
}

.home-section a {
  font-weight: var(--font-weight-regular);
}

/* External link icon */
.external-link::after {
  content: ' ↗';
  font-size: 0.8em;
}

/* About section paragraph */
.home-section p {
  margin-left: 1.5rem;
  max-width: 550px;
}

/* Contact section - no bullet style */
.contact-info {
  margin-left: 1.5rem;
}

.contact-info a {
  display: block;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Article Page
   -------------------------------------------------------------------------- */
.article-header {
  margin-bottom: 3rem;
}

.article-title {
  font-size: 1.75rem;
  font-weight: var(--font-weight-medium);
  margin-bottom: 0.25rem;
  text-transform: lowercase;
}

.article-meta {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* Article content */
.article-content {
  margin-top: 2rem;
}

.article-content h2 {
  font-size: var(--font-size-section-header);
  font-weight: var(--font-weight-medium);
  text-transform: lowercase;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-content h3 {
  font-size: 1.1rem;
  font-weight: var(--font-weight-medium);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.article-content p {
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Images and Figures
   -------------------------------------------------------------------------- */
.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.article-content figure {
  margin: 2rem 0;
  padding: 0;
}

.article-content figure img {
  width: 100%;
  background-color: #d0d0d0;
}

.article-content figcaption {
  font-size: var(--font-size-small);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* Image placeholder styling (for development) */
.image-placeholder {
  background-color: #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #fff;
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Responsive Design
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --font-size-logo: 2.25rem;
    --content-padding: 1.25rem;
    --section-spacing: 2rem;
  }
  
  .site-logo {
    margin-bottom: 3rem;
  }
  
  .article-title {
    font-size: 1.5rem;
  }
  
}

@media (max-width: 480px) {
  :root {
    --font-size-logo: 1.75rem;
    --content-padding: 1rem;
  }
  
  .home-section ul,
  .home-section p,
  .contact-info {
    margin-left: 1rem;
  }
  
}

/* --------------------------------------------------------------------------
   Blockquotes
   -------------------------------------------------------------------------- */
blockquote {
  border: 1px dashed var(--color-text-muted);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 4px;
  background: transparent;
}

blockquote p {
  margin: 0;
}

blockquote p + p {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Code Blocks and Syntax Highlighting
   -------------------------------------------------------------------------- */

/* Inline code */
code {
  background: #f0f0f0;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'SF Mono', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
}

/* Code blocks (pre > code) */
pre {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

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

/* Pygments codehilite wrapper */
.codehilite {
  margin: 1.5rem 0;
}

.codehilite pre {
  margin: 0;
}

/* Syntax highlighting - Light theme (Pygments default-inspired) */
.codehilite .hll { background-color: #ffffcc }
.codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666666 } /* Operator */
.codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #9C6500 } /* Comment.Preproc */
.codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.codehilite .gr { color: #E40000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #008400 } /* Generic.Inserted */
.codehilite .go { color: #717171 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #0044DD } /* Generic.Traceback */
.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #687822 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.codehilite .no { color: #880000 } /* Name.Constant */
.codehilite .nd { color: #AA22FF } /* Name.Decorator */
.codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #0000FF } /* Name.Function */
.codehilite .nl { color: #767600 } /* Name.Label */
.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
.codehilite .mf { color: #666666 } /* Literal.Number.Float */
.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
.codehilite .vc { color: #19177C } /* Name.Variable.Class */
.codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */

/* --------------------------------------------------------------------------
   Strikethrough
   -------------------------------------------------------------------------- */
del, s {
  text-decoration: line-through;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Collapsible Blocks
   -------------------------------------------------------------------------- */
details.collapsible {
  margin: 1.5rem 0;
}

details.collapsible summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Remove default marker in Safari */
details.collapsible summary::-webkit-details-marker {
  display: none;
}

details.collapsible summary::before {
  content: '▶';
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.2s ease;
}

details.collapsible[open] summary::before {
  transform: rotate(90deg);
}

/* Collapsed code block */
details.collapsible-code {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

details.collapsible-code summary {
  font-family: 'SF Mono', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
}

details.collapsible-code[open] summary {
  border-bottom: 1px solid #e0e0e0;
}

details.collapsible-code .codehilite,
details.collapsible-code pre {
  margin: 0;
  border: none;
  border-radius: 0;
}

details.collapsible-code .code-lang {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

/* Collapsed blockquote - styled similar to collapsed code */
details.collapsible-quote {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

details.collapsible-quote summary {
  font-family: 'SF Mono', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
}

details.collapsible-quote[open] summary {
  border-bottom: 1px solid #e0e0e0;
}

details.collapsible-quote blockquote {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 1rem;
  font-family: 'SF Mono', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Side-by-Side Images
   -------------------------------------------------------------------------- */
.image-row {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.image-row figure {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.image-row figure img {
  width: 100%;
}

@media (max-width: 600px) {
  .image-row {
    flex-direction: column;
  }
  
  .image-row figure {
    min-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Image Lightbox/Carousel
   -------------------------------------------------------------------------- */

/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lightbox.active {
  display: flex;
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
  overflow: hidden;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.lightbox-close:hover {
  opacity: 1;
}

/* Navigation arrows */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 20px 15px;
  cursor: pointer;
  transition: background 0.2s;
  opacity: 0.8;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* Image and caption container */
.lightbox-content {
  max-width: 90%;
  max-height: 80%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.lightbox-caption {
  color: #ccc;
  font-style: italic;
  margin-top: 15px;
  font-size: 0.95rem;
  max-width: 600px;
}

/* Counter (e.g., "1 / 5") */
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #888;
  font-size: 0.9rem;
}

/* Hide navigation on single image */
.lightbox.single-image .lightbox-prev,
.lightbox.single-image .lightbox-next,
.lightbox.single-image .lightbox-counter {
  display: none;
}

/* Make article images clickable */
.article-content figure,
.article-content img {
  cursor: zoom-in;
}

/* Lightbox responsive styles */
@media (max-width: 768px) {
  .lightbox-prev,
  .lightbox-next {
    padding: 15px 10px;
    font-size: 24px;
  }
  
  .lightbox-close {
    top: 10px;
    right: 15px;
    font-size: 32px;
  }
  
  .lightbox-content {
    max-width: 95%;
  }
  
  .lightbox-caption {
    font-size: 0.85rem;
    padding: 0 10px;
  }
}