/*@import "tailwindcss";*/

@font-face {
  font-family: "Red Hat Text";
  src: url('/fonts/red-hat-text/RedHatText-VariableFont_wght.woff2') format(woff2) tech(variations);
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Text";
  src: url('/fonts/red-hat-text/RedHatText-VariableFont_wght.woff2') format(woff2) tech(variations);
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url('/fonts/jetbrains-mono/JetBrainsMono-VariableFont_wght.woff2') format(woff2) tech(variations);
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url('/fonts/jetbrains-mono/JetBrainsMono-Italic-VariableFont_wght.woff2') format(woff2) tech(variations);
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Main color palette  #470c29*/
  --color-background: #0f1729;
  --color-text: #e2e8f0;
  --color-primary: #38bdf8;
  --color-button-hover: var(--color-accent);
  --color-secondary: #ff79c6;
  /*--color-accent: #22d3ee;*/
  --color-accent: #39F7F4;
  --color-dark: #020617;
  --color-card: #1e293b;
  --color-code-bg: #0f1629;
  --color-code-text: #a5f3fc;
  --color-muted: #94a3b8;
  --color-border-sharp: #e2e8f0;
  --color-border-subtle: #334155;
  --color-shadow: 223deg 75% 3%;
  --color-shadow-light: #0000001a;
  --color-theme-toggle: #fb0;
  --color-orchid: #b91fb8;
  --color-dark-magenta: #470c29;
  --color-brick: #942309;
  --color-dark-orange: #F87313;

  /* Shadows */
  --shadow-elevation-low:
    0px 0.4px 0.5px hsl(var(--color-shadow) / 0.21),
    0px 0.6px 0.7px -0.8px hsl(var(--color-shadow) / 0.28),
    0px 1.4px 1.7px -1.7px hsl(var(--color-shadow) / 0.35);
  --shadow-elevation-medium:
    0px 0.4px 0.5px hsl(var(--color-shadow) / 0.22),
    0px 1.3px 1.6px -0.6px hsl(var(--color-shadow) / 0.28),
    0px 3px 3.7px -1.1px hsl(var(--color-shadow) / 0.33),
    0px 6.8px 8.5px -1.7px hsl(var(--color-shadow) / 0.38);
  --shadow-elevation-high:
    0px 0.1px 0.1px hsl(var(--color-shadow) / 0.21),
    0px 0.8px 0.9px -0.1px hsl(var(--color-shadow) / 0.23),
    0px 1.4px 1.6px -0.4px hsl(var(--color-shadow) / 0.26),
    0px 2.3px 2.6px -0.8px hsl(var(--color-shadow) / 0.28),
    0px 3.7px 4.2px -1.1px hsl(var(--color-shadow) / 0.3),
    0px 5.8px 6.5px -1.5px hsl(var(--color-shadow) / 0.33),
    0px 7.9px 10px -1.8px hsl(var(--color-shadow) / 0.35),
    0px 9.5px 14.7px -2.2px hsl(var(--color-shadow) / 0.38);
  /* Animations */
  --transition-speed: 0.3s;
  /* Padding */
  --padding-none: 0px;
  --padding-xs: 1rem;
  --padding-s: 1.5rem;
  --padding-md: 2.5rem;
  --padding-lg: 4rem;
  --padding-xl: 6rem;
  /* Background */
  --background: url('/img/mesh-gradient-dark.svg');
}

@media (max-width: 768px) {
  :root {
    --padding-xs: .75rem;
    --padding-s: 1rem;
    --padding-md: 1.5rem;
    --padding-lg: 2.5rem;
    --padding-xl: 4rem;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "JetBrains Mono", "SF Mono", -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.6;
  color: var(--color-text); 
  background-blend-mode: multiply;
  background: no-repeat fixed 18% /cover var(--background);
}

main {
  flex: 1 0 auto;
  /*allows main to grow but not shrink */
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-speed) ease;
  position: relative
}

a:hover {
  color: var(--color-accent);
}

a:not(.site-title, .tag, .btn, .social-link, nav a, .featured-post-link):after,
.featured-post h3:after,
.post-item h2:after,
.read-more:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0.1rem;
  bottom: -4px;
  left: 0;
  background-color: var(--color-accent);
  transition: width var(--transition-speed) ease;
}

a:not(.site-title, .tag, nav a, .featured-post-link):hover:after,
.featured-post:hover h3:after,
.post-item:hover h2:after,
.read-more:hover:after {
  width: 100%;
}

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

h1 {
  display: inline-block;
  font-size: clamp(1.9rem, 1.293rem + 1.619vw, 2.75rem);
  background: linear-gradient(90deg, var(--color-primary) 0, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.8rem;
}

p {
  font-family: "Red Hat Text", sans-serif;
  font-weight: 455;
}

/* Header */
header#site-header {
  background-color: color-mix(in srgb, var(--color-background), transparent 35%);
  display: flex;
  min-height: 5.6rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-top: 4px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.site-title {
  font-size: clamp(1.12rem, 0.849rem + 0.724vw, 1.5rem);
  font-weight: 700;
  background: linear-gradient(90deg, var(--color-primary) 0, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  padding: .5rem 0;
}

.site-title:after,
.site-title:before {
  font-family: sans-serif;
  opacity: .5;
  -webkit-text-fill-color: var(--color-primary);
  position: absolute;
}

.site-title:before {
  content: "<";
  left: -1rem
}

.site-title:after {
  content: ">";
  right: -1rem
}

nav li {
  margin-left: 1.5rem;
}

nav.main-nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0.1rem;
  bottom: -10px;
  left: 0;
  background-color: var(--color-accent);
  transition: width var(--transition-speed) ease;
}

nav.main-nav a:hover::after {
  width: 100%
}

/* progress bar styles */
#progress-bar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-primary);
  z-index: 999;
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: var(--color-dark-orange);
  z-index: 1000;
}

/* Tags Styling */
.tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem 0.5rem 0;
  background-color: var(--color-light);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.tag:hover {
  background-color: var(--color-primary);
  color: white;
}

.tags-list {
  display: grid;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0;
  max-width: fit-content;
}

.tag-link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--color-light);
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border-radius: 1rem;
  background-color: var(--color-card);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.tag-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-light);
}

.tag-header h1 {
  margin-bottom: 0.5rem;
}

.tag-header p {
  margin-bottom: 1.5rem;
}

/* Post Items */
/*Styling Heading hover for the cards*/
.featured-posts-section {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.featured-post h3,
.post-item h2,
span.read-more {
  position: relative;
  display: inline-block;
}

.posts-list {
  display: grid;
  row-gap: 2rem;
}

.post-item {
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--color-card), transparent 50%);
  backdrop-filter: blur(50px);
  border: 1px solid var(--color-border-subtle);
  /*box-shadow: 0 4px 6px rgba(0, 0, 0, .1);*/
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.post-item:hover,
.featured-post:hover {
  transform: translateY(-5px);
  /*box-shadow: 0 10px 20px rgba(0, 0, 0, .2);*/
  box-shadow: var(--shadow-elevation-high);
  border-color: var(--color-primary);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.post-item h2 {
  margin: 0.5rem 0;
  background: linear-gradient(90deg, var(--color-primary) 0, var(--color-secondary) 100%);
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.post-item time {
  display: block;
  color: var(--color-muted);
  font-size: .875rem;
  font-family: 'SF Mono', monospace;
  margin-bottom: 1rem;
}

.read-more {
  font-weight: 600;
  display: inline-flex;
  align-items: center
}

/*.read-more:after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform var(--transition-speed) ease;
}

.read-more:hover:after {
  transform: translateX(5px);
}
*/
/* Single Post */

article.post {
  margin-top: 2.5rem;
}

.post {
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: color-mix(in srgb, var(--color-card), transparent 50%);
  backdrop-filter: blur(50px);
}

.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.post-header h1 {
  font-size: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem);
  margin-bottom: 0.5rem;
}

.post-header time {
  display: block;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-family: 'SF Mono', monospace;
}

.post-content {
  margin-bottom: 2rem;
}

.post-content h2 {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 0.5rem;
  color: var(--color-primary);
}

.post-content h3 {
  color: var(--color-secondary);
}

.post-content p,
.post-content ul,
.post-content ol {
  margin-bottom: 1.5rem;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
}

.post-content pre {
  background-color: var(--color-code-bg);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--color-primary);
}

.post-content code {
  font-family: 'SF Mono', monospace;
  color: var(--color-code-text);
}

.post-content blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1.5rem;
  color: var(--color-muted);
}

.post-footer {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin: 0 0.25rem 0.5rem 0;
  background-color: var(--color-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 20px;
  font-size: 0.75rem;
  transition: all var(--transition-speed) ease;
}

.tag:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-primary);
}

/* Footer */
footer {
  margin-top: 3rem;
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.875rem;
  flex-shrink: 0;
}

footer p {
  position: relative;
  display: inline-block;
}

footer p:before,
footer p:after {
  font-family: "SF Mono", monospace;
  color: var(--color-primary);
  opacity: 0.6;
  font-weight: 600;
}

footer p:before {
  content: "{ ";
}

footer p:after {
  content: " }";
}

/* Code highlighting styles */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6272a4;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ff79c6;
}

.token.boolean,
.token.number {
  color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #f1fa8c;
}

.token.keyword {
  color: #8be9fd;
}

.token.regex,
.token.important {
  color: #ffb86c;
}

/* Hero Section */
.hero {
  display: flex;
  align-items: center;
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('/img/hero-bg.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 6rem 2rem;
  max-width: -webkit-fill-available;
  width: 100%;
  min-height: 40vh;
}

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

.hero h1 {
  margin-bottom: 1rem
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: .9
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap
}

.btn {
  font-family: inherit;
  border: inherit;
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.5rem;
  border-radius: .25rem;
  font-weight: 600;
  transition: .4s;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-dark)
}

.btn-primary:hover {
  background-color: var(--color-button-hover);
  color: var(--color-dark);
}

.btn-secondary {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary)
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

/* Intro Section */
.intro-section {
  margin-bottom: 4rem
}

.intro-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: center
}


.intro-text h2 {
  margin-bottom: 1rem
}

.intro-text p {
  margin-bottom: 1.5rem
}

.social-links {
  display: flex;
  gap: 1rem
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-card);
  transition: .2s
}

.social-link:hover {
  background-color: var(--color-primary);
  color: #fff
}

.intro-image img {
  width: 300px;
  height: 300px;
  max-width: 300px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .1)
}


/* Featured Posts */
.section-heading {
  text-align: center;
  font-size: 2rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 395px), 1fr));
  gap: 2rem;
}

.featured-post {
  border-radius: 0.5rem;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);*/
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: color-mix(in srgb, var(--color-card), transparent 50%);
  backdrop-filter: blur(50px);
  border: 1px solid var(--color-border-subtle);
}

.featured-post-content {
  padding: 1.5rem;
}

.featured-post h3 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem 0;
}

.featured-post time {
  display: block;
  font-size: 0.875rem;
  color: #718096;
  margin-bottom: 0.75rem;
}

.featured-post p,
.post-excerpt {
  margin-bottom: 1rem;
  color: var(--color-text);
}

.view-all {
  text-align: center;
  margin-top: 2rem;
}

/* CTA Section */
.cta-section {
  text-align: center;
}

.cta-section h2 {
  margin-bottom: 1rem;
}

.cta-section p {
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-form {
  display: flex;
  max-width: 400px;
  margin: 0 auto;
  gap: 1rem;
}

form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-sharp);
  border-radius: 0.25rem;
  font-size: 1rem;
  color: black;
  background: white;
}

form input::placeholder {
  font-family: "JetBrains Mono", sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

/* Blog Posts Listing */
.blog-header {
  text-align: center;
  margin-bottom: 3rem;
}

.blog-header h1 {
  margin-bottom: 0.5rem;
}

/* Responsive Adjustments */

@media (max-width: 768px) {
  .hero {
    min-height: 67vw;
  }

  /*
  .hero h1 {
    font-size: 2.5rem;
  }
  */

  .intro-grid {
    grid-template-columns: 1fr;
  }

  .intro-image {
    text-align: center;
    grid-row: 1;
    margin: auto;
  }

  .intro-image img {
    max-width: 200px;
    height: 200px;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 1.5rem;
  }

  .newsletter-form input {
    width: 100%;
  }

  .newsletter-form button {
    align-self: center;
  }
}

/* Responsive */
/*
@media (max-width: 768px) {
  .site-title {
    font-size: 1.25rem;
  }
  
  .site-title:before, .site-title:after {
    display: none;
  }
  
  .post-header h1 {
    font-size: 1.75rem;
  }
  
  .post {
    padding: 1.5rem;
  }
}
*/

/* Custom animations */
/*
@keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }
*/
/* Dark mode toggle */
.theme-toggle {
  background: none;
  border: none;
  fill: var(--color-primary);
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1.25rem;
  display: inline-grid;
  padding: 0;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all var(--transition-speed) ease;
}

.mobile-nav box-icon {
  height: 40px;
  width: 40px;
}

.bx-tada,
.bx-tada-hover:hover {
  -webkit-animation: tada 1.5s ease 1 !important;
  animation: tada 1.5s ease 1 !important;
}

.main-nav .theme-toggle:hover {
  background-color: rgba(56, 189, 248, 0.2);
}

@media not (pointer: coarse) {
  .theme-toggle:hover {
    fill: var(--color-theme-toggle);
  }

  .mobile-menu-toggle:hover .hamburger-icon,
  .mobile-menu-toggle:hover .hamburger-icon:before,
  .mobile-menu-toggle:hover .hamburger-icon:after {
  background-color: var(--color-accent);
}
}

/* Light Theme Color Pallete */
body.light-theme {
  --color-background: #f8fafc;
  --color-text: #0f172a;
  /*--color-primary: #0284c7;*/
  --color-primary: #38a0f8;
  --color-button-hover: #0f81cc;
  --color-secondary: #ae36dd;
  --color-accent: #09DFDC;
  --color-dark: #ffffff;
  --color-card: #f5f6fa;
  --color-code-bg: #d4e6f7;
  --color-code-text: #0f172a;
  --color-muted: #64748b;
  --color-border-subtle: #e2e8f0;
  --color-border-sharp: #334155;
  --color-theme-toggle: #0f172a;
  --color-dark-orange: #F8E513;

  --shadow-elevation-low:
    0px 0.4px 0.5px var(--color-shadow-light),
    0px 0.6px 0.7px -0.8px var(--color-shadow-light),
    0px 1.4px 1.7px -1.7px var(--color-shadow-light);
  --shadow-elevation-medium:
    0px 0.4px 0.5px var(--color-shadow-light),
    0px 1.3px 1.6px -0.6px var(--color-shadow-light),
    0px 3px 3.7px -1.1px var(--color-shadow-light),
    -0.1px 6.8px 8.5px -1.7px var(--color-shadow-light);
  --shadow-elevation-high:
    0px 0.1px 0.1px var(--color-shadow-light),
    0px 0.8px 0.9px -0.1px var(--color-shadow-light),
    0px 1.4px 1.6px -0.4px var(--color-shadow-light),
    0px 2.3px 2.6px -0.8px var(--color-shadow-light),
    0px 3.7px 4.2px -1.1px var(--color-shadow-light),
    0px 5.8px 6.5px -1.5px var(--color-shadow-light),
    0px 7.9px 10px -1.8px var(--color-shadow-light),
    0px 9.5px 14.7px -2.2px var(--color-shadow-light);

    --background: rgb(255, 255, 255) url('/img/mesh-gradient-light.svg');
}

/*
body.light-theme header#site-header {
  background-color: var(--color-background);
  background-color: color-mix(in srgb, var(--color-background), transparent 40%);
}
*/

/* Fix gradient text in light mode */
body.light-theme .site-title {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-theme h1 {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-theme .post-item h2 a {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Other light theme adjustments */
body.light-theme .post {
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.1);
}

body.light-theme .post-item {
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.1);
}

body.light-theme .post-item:hover {
  box-shadow: 0 10px 15px rgba(15, 23, 42, 0.1);
}

/* Code styling in light mode */
body.light-theme .post-content pre {
  background-color: var(--color-code-bg);
}

body.light-theme .post-content code {
  color: var(--color-code-text);
}

/* Light mode syntax highlighting */
body.light-theme .token.comment,
body.light-theme .token.prolog,
body.light-theme .token.doctype,
body.light-theme .token.cdata {
  color: #93a1a1;
}

body.light-theme .token.punctuation {
  color: #586e75;
}

body.light-theme .token.property,
body.light-theme .token.tag,
body.light-theme .token.constant,
body.light-theme .token.symbol,
body.light-theme .token.deleted {
  color: #d33682;
}

body.light-theme .token.boolean,
body.light-theme .token.number {
  color: #6c71c4;
}

body.light-theme .token.selector,
body.light-theme .token.attr-name,
body.light-theme .token.string,
body.light-theme .token.char,
body.light-theme .token.builtin,
body.light-theme .token.inserted {
  color: #2aa198;
}

body.light-theme .token.operator,
body.light-theme .token.entity,
body.light-theme .token.url,
body.light-theme .language-css .token.string,
body.light-theme .style .token.string,
body.light-theme .token.variable {
  color: #586e75;
}

body.light-theme .token.atrule,
body.light-theme .token.attr-value,
body.light-theme .token.function,
body.light-theme .token.class-name {
  color: #b58900;
}

body.light-theme .token.keyword {
  color: #268bd2;
}

body.light-theme .token.regex,
body.light-theme .token.important {
  color: #cb4b16;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 20;
}

.hamburger-icon,
.hamburger-icon:before,
.hamburger-icon:after {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  position: absolute;
  transition: all 0.3s ease;
}

.hamburger-icon {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-icon:before,
.hamburger-icon:after {
  content: '';
}

.hamburger-icon:before {
  top: -8px;
}

.hamburger-icon:after {
  bottom: -8px;
}

/* Active state for hamburger icon (X shape) */
.mobile-menu-toggle.active .hamburger-icon {
  background-color: transparent;
}

.mobile-menu-toggle.active .hamburger-icon:before {
  top: 0;
  transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-icon:after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* Main navigation base styles (shared across all screen sizes) */
#site-header ul {
  display: flex;
  list-style: none;
  align-items: center;
  padding-inline-start: 0;
}

.main-nav li {
  margin-left: 1.5rem;
}

.main-nav a {
  font-weight: 600;
  position: relative;
  font-size: 1.2rem;
}

/* Prevent scrolling when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Mobile menu container - hidden by default at mobile sizes */
.mobile-nav-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-background);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.mobile-nav-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile styles */
@media screen and (max-width: 768px) {
  /* Show mobile toggle and container at mobile breakpoint */
  .mobile-menu-toggle {
    display: block;
  }

  .mobile-nav-container {
    display: block;
  }

  /* Hide the desktop nav in mobile view */
  .main-nav {
    display: none;
  }

  /* Style the mobile nav inside the container */
  .mobile-nav {
    padding-top: 5rem;
  }

  .mobile-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .mobile-nav li {
    margin: 0;
  }

  .mobile-nav a {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    display: block;
  }
}

@media (pointer: coarse) {
  body {
    background-attachment: scroll;
    background-position: 24%;
  }
}