/* Hugo Blog Awesome specific targeting - DESKTOP ONLY */
@media (min-width: 769px) {
    .container,
    .container-fluid,
    .mx-auto,
    article,
    .post,
    .single {
        max-width: 1400px !important;
        width: 95% !important;
    }

    /* Target Bootstrap container classes that might be used */
    .container-lg,
    .container-xl {
        max-width: 1400px !important;
    }

    /* Target header/navigation area */
    header,
    nav,
    .navbar,
    .header,
    .site-header,
    .top-nav,
    .navigation {
        max-width: 1400px !important;
        width: 95% !important;
        margin: 0 auto;
    }

    /* If the header has its own container */
    header .container,
    nav .container,
    .navbar .container {
        max-width: 1400px !important;
        width: 95% !important;
    }
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .container,
    .container-fluid,
    .mx-auto,
    article,
    .post,
    .single,
    header,
    nav,
    .navbar,
    .header,
    .site-header,
    .top-nav,
    .navigation {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Target Bootstrap container classes for mobile */
    .container-lg,
    .container-xl {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* If the header has its own container */
    header .container,
    nav .container,
    .navbar .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Ensure body allows proper scrolling when zoomed */
    body {
        touch-action: pan-x pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-x: hidden !important;
    }
    
    /* Allow proper zoom and pan */
    html {
        touch-action: pan-x pan-y pinch-zoom !important;
        overflow-x: hidden !important;
    }
}

/* Make code blocks utilize full width and left-aligned */
pre {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Target any wrapper containers around code blocks */
.highlight,
.code-block,
.language-bash,
div[class*="highlight"],
div[class*="code"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure code blocks don't break layout and are left-aligned */
code {
    text-align: left !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Target all code-related elements for left alignment */
pre code,
.highlight,
.highlight pre,
.highlight code,
.chroma,
.chroma pre,
.chroma code {
    text-align: left !important;
}

/* Fix flexbox alignment in code spans without breaking display */
pre code span[style*="display:flex"],
pre span[style*="display:flex"] {
    justify-content: flex-start !important;
}

/* For really wide screens, you might want even more width */
@media (min-width: 1600px) {
    .container,
    .content,
    .post-content,
    main {
        max-width: 1600px !important;
    }
}

/* Ultra-wide screens */
@media (min-width: 2000px) {
    .container,
    .content, 
    .post-content,
    main {
        max-width: 1800px !important;
    }
}

.anchorjs-link {
  color: inherit;
  margin-left: 0.5rem;
  text-decoration: none;
  opacity: 0.3;
  font-size: 0.9em;
  transition: opacity 0.2s;
}

h2:hover .anchorjs-link,
h3:hover .anchorjs-link {
  opacity: 1;
  color: inherit; 
}