/* Styles adaptés pour le site de M. Crowley */

a:has(img):hover {
    text-decoration: none;
}

button:not(.icon-button),
details {
    --radius: 0.5em;
    border-radius: var(--radius);
}

button:not(.icon-button),
summary {
    color: var(--sidebar-fg);
    background-color: var(--sidebar-bg);
}

button:not(.icon-button):hover,
summary:hover {
    color: var(--sidebar-active);
}

button:not(.icon-button) {
    padding: 1em 2em;
    text-align: center;
    display: block;
    margin: 1em 10px;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

details {
    background-color: var(--quote-bg);
    border: 1px solid var(--theme-popup-border);
    padding: 0.5em 0.5em 0;
}

details[open] {
    padding: 0.5em;
}

details[open] > summary {
    margin-bottom: 0.5em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

details > summary > :is(div, p) {
    display: inline;
}

details:has(+ :not(details)) {
    margin-bottom: 1em;
}

summary {
    font-weight: bold;
    display: block;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0.5em;
    margin: -0.5em -0.5em 0;
}

blockquote {
   border-radius : 0.5em;
}

iframe {
    aspect-ratio: 16/10;
    width: 80%;
    min-width: 300px;
    max-width: 516px;
    display: block;
    margin: auto;
    overflow-x: scroll;
}

iframe[src*="trinket"],
iframe.interactive-code {
    max-width: 100%;
}

img,
.language-mermaid,
.mermaid > svg {
    background-color: var(--quote-bg);
    border-radius: 0.5em;
    padding: 0.5em;
    display: block;
    margin: 0 auto;
    max-width: calc(100% - 1em);
    min-width: 0;
}

.tile-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: inherit;
    --margin: 1em;
    --half-margin: calc(var(--margin) / 2);
}

.tile-box > .tile-box {
    border: 1px solid var(--searchresults-border-color);
    box-shadow: 2px 2px 3px var(--searchbar-shadow-color);
    background-color: inherit;
}

.tile-box > .tile-box > :first-child:is(h1, h2, h3, h4) {
    margin-top: 0;
}

.tile-box > button {
    align-self: flex-start;
    margin: var(--margin) auto;
}

.tile-box > div {
    border: 1px solid var(----sidebar-header-border-color);
    margin: 0;
    padding: var(--half-margin);
    flex: 1;
    min-width: 0;
}

.tile-box > div > :first-child:is(h2, h3, h4, p) {
    margin-top: var(--half-margin);
}

.code-compare {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: var(--half-margin);
}

.code-compare > div {
    border: 1px solid var(--theme-popup-border);
    border-radius: var(--radius);
    padding: 0 var(--half-margin);
    flex: 1;
    min-width: 0;
}

.code-compare > div > :first-child:is(h2, h3, h4) {
    margin-top: var(--half-margin);
}

.code-compare > div > :first-child:is(p) {
    margin-top: var(--margin);
}

/* Styles pour les numéros de ligne */
.hljs-ln {
    border-collapse: collapse;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

.hljs-ln td {
    margin: 0 !important;
    padding: 0;
    border: none !important;
}

.hljs-ln td:first-child {
    border-right: 1px solid var(--sidebar-non-existant) !important;
}

/* Désactiver l'alternance des couleurs de rangées */
.hljs-ln tr,
.hljs-ln tr:nth-child(odd),
.hljs-ln tr:nth-child(even) {
    background-color: transparent !important;
}

.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: right;
    color: var(--sidebar-non-existant) !important;
    vertical-align: top;
    padding-right: 4px !important;
}

.hljs-ln-code {
    padding-left: 8px !important;
    white-space: pre;
}

/* S'assurer que le pre contenant le tableau ne centre pas */
pre:has(.hljs-ln) {
    text-align: left;
}

@media (min-width: 800px) {
    .tile-box > div {
        flex-basis: calc(33% - 1.33 * var(--half-margin) - 1);
    }
}

@media (min-width: 600px) {
    .tile-box {
        flex-flow: row wrap;
        align-items: flex-start;
    }

    .tile-box > div {
        flex-basis: calc(50% - 1.5 * var(--half-margin) - 1);
    }

    .code-compare {
        flex-flow: row wrap;
        align-content: center;
    }
}