/*
 * Magna-Power brand overrides for sphinxawesome_theme.
 *
 * Each rule uses Tailwind's design tokens (CSS custom properties from the
 * upstream theme's compiled theme.css). The trailing comment shows the
 * equivalent Tailwind utility / @apply directive -- these rules produce
 * identical output to what `@apply <class>` would compile to.
 *
 * Note: we can't use `@apply` directly because the upstream theme ships a
 * pre-compiled Tailwind bundle and there's no Tailwind/PostCSS build step
 * processing this file before Sphinx serves it.
 */

/* Self-hosted Inter (variable woff2) to match magna-power.com. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-italic.woff2') format('woff2');
}

/* Brand colors + font */
:root {
    --color-brand: oklch(0.6475 0.1467 220.67);  /* Magna-Power blue #29a8e0 */
    --color-links: oklch(0.6475 0.1467 220.67);
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Left nav width: 270px (md) / 310px (lg), up from the theme's 220/240. */
@media (min-width: 48rem) {  /* md: */
    .flex-1 > .container.md\:grid {
        grid-template-columns: 270px minmax(0, 1fr);     /* @apply md:grid-cols-[270px_minmax(0,1fr)] */
    }
}
@media (min-width: 64rem) {  /* lg: */
    .flex-1 > .container.md\:grid {
        grid-template-columns: 310px minmax(0, 1fr);     /* @apply lg:grid-cols-[310px_minmax(0,1fr)] */
    }
}

/* Right "On this page" nav: 270px, down from the theme's 300px. */
@media (min-width: 80rem) {  /* xl: */
    main.xl\:grid {
        grid-template-columns: 1fr 270px;
    }
}

/* Offset :target scrolling for the sticky header — all target types, not just sections. */
html {
    scroll-padding-top: 5rem;                            /* header 3.5rem + gap */
}
#content section,
#content .sig {
    scroll-margin-top: 0;                                /* don't stack with scroll-padding above */
}

/* Scroll-spy active entry in the left sidebar (set by build-finished hook). */
#left-sidebar a[data-current="true"] {
    background-color: var(--color-accent);
    color: var(--color-accent-foreground);
    font-weight: var(--font-weight-medium);
}

/* Version badge at the bottom of the left sidebar. */
.mpe-sidebar-snapshot {
    margin-top: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--text-xs--line-height, 1rem);
    font-style: italic;
    opacity: 0.6;
}

/* Shrink the landing-page "Table of Contents" heading. */
#content section#table-of-contents > h1 {
    font-size: var(--text-2xl, 1.5rem);
    line-height: var(--text-2xl--line-height, 2rem);
}

/* Heading spacing — give subsection headings room to breathe. */
#content h1 { margin-top: calc(var(--spacing) * 12); }  /* @apply mt-12 */
#content h2 { margin-top: calc(var(--spacing) * 10); }  /* @apply mt-10 */
#content h3,
#content h4 { margin-top: calc(var(--spacing) * 8); }   /* @apply mt-8  */

/* The first heading on a page hugs the top — no extra margin. */
#content > section:first-child > :is(h1, h2, h3, h4):first-child,
#content > :is(h1, h2, h3, h4):first-child {
    margin-top: 0;                                       /* @apply mt-0 */
}

/* Paragraph readability */
#content p {
    margin-bottom: calc(var(--spacing) * 4);             /* @apply mb-4 */
    line-height: var(--leading-relaxed, 1.625);          /* @apply leading-relaxed */
}

/* List spacing — tighten the theme's defaults.
 *
 * The theme's compiled theme.css adds:
 *   #content ul:not(.search), #content ul:not(.search) p, #content ul:not(.search)>li {
 *     margin-top: calc(var(--spacing) * 6);   // mt-6 → 24px between every li/p
 *   }
 * That's far too loose for technical documentation. We override with matching
 * specificity to bring the gap down to mt-1.
 */
#content ul:not(.search),
#content ul:not(.search) p,
#content ul:not(.search) > li {
    margin-top: calc(var(--spacing) * 1);                /* @apply mt-1 */
}

/* Same treatment for ordered lists (the theme applies the rule via a separate
 * selector that we mirror here). */
#content ol,
#content ol p,
#content ol > li {
    margin-top: calc(var(--spacing) * 1);                /* @apply mt-1 */
}

/* Restore docutils alpha/roman list markers (compiled theme forces decimal). */
#content ol.upperalpha { list-style-type: upper-alpha; }
#content ol.loweralpha { list-style-type: lower-alpha; }
#content ol.upperroman { list-style-type: upper-roman; }
#content ol.lowerroman { list-style-type: lower-roman; }

/* The paragraph Sphinx wraps around list-item content shouldn't add bottom
 * margin — the li's own spacing handles the gap. */
#content li > p:only-child {
    margin-bottom: 0;                                    /* @apply mb-0 */
}

/* Nested lists hug their parent item. */
#content li > :is(ul, ol) {
    margin-top: calc(var(--spacing) * 1);                /* @apply mt-1 */
    margin-bottom: 0;                                    /* @apply mb-0 */
}

/* Tighter table cells: less vertical padding, centered content. */
#content table td,
#content table th {
    padding-top: calc(var(--spacing) * 1);               /* 4px */
    padding-bottom: calc(var(--spacing) * 1);            /* 4px */
    vertical-align: middle;
}
#content table :is(td, th) > p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Safety-symbol tables: fixed symbol column so descriptions align left. */
#content table.table-symbol {
    width: 100%;
    table-layout: fixed;
}
#content table.table-symbol td:first-child {
    width: 96px;
    text-align: center;
}
#content table.table-symbol td:last-child {
    text-align: left;
}

/* docutils ".. container::" divs also match Tailwind's .container layout utility; reset to a plain block. */
#content .docutils.container {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* French translations: docutils turns the language-fr container class into lang="fr". */
#content [lang="fr"] {
    font-style: italic;
}

/* Invert content diagrams/symbols in dark mode (they ship as black line-art). */
html.dark #content img[src$=".svg"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Reduce admonition vertical padding (was 16px all round). */
.admonition {
    padding-top: calc(var(--spacing) * 2);               /* 8px */
    padding-bottom: calc(var(--spacing) * 2);            /* 8px */
}
.admonition > :last-child {
    margin-bottom: 0;
}

/* ISO 7010 W001 safety-alert icon before Warning/Caution titles. */
.warning > .admonition-title::before,
.caution > .admonition-title::before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.4em;
    vertical-align: -0.2em;
    background-image: url("../images/iso7010-w001-warning.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Image lightbox (js/lightbox.js); mirrors the magna-power.com modal.twig. */
#content .mpe-zoomable { cursor: zoom-in; }

.mpe-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99;                                         /* above header (40) and sidebar (50) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mpe-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.mpe-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgb(255 255 255 / 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html.dark .mpe-lightbox__backdrop {
    background-color: rgb(0 0 0 / 0.7);
}
.mpe-lightbox__figure {
    position: relative;
    width: min(1400px, 92vw);                            /* full width, cap 1400px */
    max-height: 90vh;
    transform: scale(0.96);
    transition: transform 0.25s ease;
}
.mpe-lightbox.is-open .mpe-lightbox__figure {
    transform: scale(1);
}
.mpe-lightbox__img {
    display: block;
    width: 100%;
    max-height: 85vh;
    height: auto;
    object-fit: contain;
    padding: 1rem;
    background-color: #fff;                              /* keep black line-art SVGs visible */
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}
.mpe-lightbox__close {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 9999px;
    background-color: #fff;
    color: #334155;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);
    cursor: pointer;
}
.mpe-lightbox__close:hover { background-color: #f1f5f9; }

/* :menuselection: renders as an inline box (1px border + radius from the theme).
   Our front-panel keystroke sequences are long enough to wrap, and an inline box
   fragments at the line break, drawing a half-open border per line. inline-block
   makes it one box that wraps internally, so the border encloses the whole
   sequence. The line-height and padding keep wrapped rows from crowding. */
.menuselection {
    display: inline-block;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    line-height: 1.6;
}