/* Custom Styles for Zerodown Docs */

/* Reduce all font sizes by 5% */
:root {
    --font-size-multiplier: 0.95;
}

/* Apply the font size reduction to all elements */
html {
    font-size: calc(100% * var(--font-size-multiplier)) !important;
}

h1 { font-size: calc(2.5rem * var(--font-size-multiplier)) !important; }
h2 { font-size: calc(2rem * var(--font-size-multiplier)) !important; }
h3 { font-size: calc(1.75rem * var(--font-size-multiplier)) !important; }
h4 { font-size: calc(1.5rem * var(--font-size-multiplier)) !important; }
h5 { font-size: calc(1.25rem * var(--font-size-multiplier)) !important; }
h6 { font-size: calc(1rem * var(--font-size-multiplier)) !important; }

/* Fix syntax highlighting issues - remove red boxes */
.codehilite .err, 
code .err, 
pre .err {
    border: none !important;
    background-color: transparent !important;
    color: #666 !important;
}

/* Specifically style quotes and colons in code blocks */
code *, pre *, .codehilite * {
    border: none !important;
    box-shadow: none !important;
}

/* Override any potential error styling from Pygments */
.codehilite .p, /* punctuation */
.codehilite .o, /* operator */
.codehilite .s, /* string */
.codehilite .s1, /* single quoted string */
.codehilite .s2 /* double quoted string */ {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Restrict container width slightly more */
.container {
    max-width: 960px; /* Adjust as desired */
}

/* Remove underline from header site title link */
header.container h1 a {
    text-decoration: none;
    color: inherit; /* Ensure it uses the header text color */
}

header.container h1 a:hover {
    text-decoration: none; /* Keep underline off on hover too */
}

/* Hide permalink paragraph symbols */
a.headerlink {
    visibility: hidden;
    font-size: 0.8em;
    color: var(--primary);
}

h1:hover a.headerlink, 
h2:hover a.headerlink, 
h3:hover a.headerlink, 
h4:hover a.headerlink, 
h5:hover a.headerlink, 
h6:hover a.headerlink {
    visibility: visible;
}

/* Fix article styling to not look like a code block */
article, 
main article, 
body main article,
main.container article {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Fix article content styling */
article div, 
main article div, 
article p, 
article h1, 
article h2, 
article h3, 
article h4, 
article h5, 
article h6,
article ul,
article ol,
article li {
    background: transparent !important;
    background-color: transparent !important;
}

/* Force code blocks to display properly */
article pre,
article code,
article .codehilite {
    max-width: 100%;
    overflow-x: auto;
    margin: 1rem 0;
}

/* Reset any extra card styling that might be applied */
.card, 
article.card, 
main article.card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make sure all text has proper contrast against the background */
body, p, li, a, h1, h2, h3, h4, h5, h6 {
    color: var(--pico-color) !important;
}

/* Proper code block styling */
pre {
    background-color: var(--pico-code-background-color) !important;
    padding: 1rem !important;
    border-radius: var(--pico-border-radius) !important;
}