/* ============================================================================
 * LEMON website — Diesel-Data.com / DSD Information Center theme
 * ----------------------------------------------------------------------------
 * Drop-in replacement for src/html/style.css. Targets LEMON's existing
 * markup (.theme-colors.header, .branding, .breadcrumb-part, .main,
 * .li-folder, .folder-icon, .theme-colors.footer, .other-announcement, etc.)
 * and re-skins it in Curtis's dark + yellow DSD aesthetic.
 *
 * To tweak: edit the custom properties under `:root` below. Everything else
 * downstream resolves from those tokens.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    --bg:            #0A0A0A;
    --bg-elev:       #141414;       /* lists, tables, code blocks            */
    --bg-elev-2:     #1a1a1a;       /* th, gradient endpoints                */
    --bg-hover:      #1f1f1f;       /* table row hover                       */
    --border:        #2a2a2a;       /* hairline dividers                     */
    --text:          #E8E8E8;
    --text-muted:    #888;
    --text-dim:      #C0C0C0;       /* blockquotes                           */
    --accent:        #FFD100;       /* DSD yellow — headings, links, brand   */
    --accent-hover:  #FFE855;
    --serif:         'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display:       'Bebas Neue', sans-serif;
    --mono:          Consolas, 'Cascadia Code', Monaco, monospace;
}

/* ============================================================================
 * BASE
 * ============================================================================ */

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
}

a, a:visited {
    color: var(--accent);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    color: var(--accent);
    letter-spacing: 0.04em;
    font-weight: 400;
    margin: 1.6rem 0 0.9rem 0;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.95rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

pre, code {
    background: var(--bg-elev);
    color: var(--accent);
    border-radius: 3px;
    padding: 0.2em 0.4em;
    font-family: var(--mono);
    font-size: 0.92em;
}
pre {
    padding: 1rem;
    overflow-x: auto;
    border-left: 3px solid var(--accent);
}
blockquote {
    border-left: 4px solid var(--accent);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: var(--bg-elev);
    color: var(--text-dim);
}

/* ============================================================================
 * HEADER / FOOTER (.theme-colors is applied to both)
 * ============================================================================ */

.theme-colors {
    background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg) 100%);
    color: var(--text);
    font-family: var(--serif);
    font-size: 1rem;
}
.theme-colors a,
.theme-colors a:visited {
    color: var(--accent);
    text-decoration: none;
}
.theme-colors a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.header {
    padding: 1.2rem 2rem;
    line-height: 1.8;
    border-bottom: 3px solid var(--accent);
}

/* "<b>Site Name</b>: slogan" — Bebas brand, slogan in muted body font */
.branding {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.branding b {
    font-family: var(--display);
    font-size: 2.1rem;
    color: var(--accent);
    letter-spacing: 0.08em;
    font-weight: 400;
    margin-right: 0.25rem;
    vertical-align: -2px;
}

.breadcrumb-part {
    white-space: nowrap;
}

.footer {
    padding: 1.2rem 2rem;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 3px solid var(--accent);
    color: var(--text-muted);
    font-size: 0.9em;
}

/* ============================================================================
 * MAIN CONTENT AREA
 * ============================================================================ */

.main {
    padding: 1.5rem 2rem 6rem 2rem;
    max-width: 70rem;
}

/* The lists on index pages are the visual centerpiece — give them the
   yellow-bar treatment like the DSD theme uses. */
.main ul, .main ol {
    background: var(--bg-elev);
    border-left: 4px solid var(--accent);
    padding: 0.9rem 1rem 0.9rem 2.5rem;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
    list-style: disc;
}
/* nested lists inside a list shouldn't get their own bar — reset them */
.main ul ul, .main ul ol, .main ol ul, .main ol ol {
    background: transparent;
    border-left: none;
    padding: 0.2rem 0 0.2rem 1.4rem;
    margin: 0.25rem 0;
    border-radius: 0;
}

li {
    line-height: 1.4;
    margin: 0.35rem 0;
    list-style-image: none; /* prevent inheritance inside folders */
}

/* ============================================================================
 * FOLDER ICONS — recolored via CSS mask so black SVGs become yellow on dark
 * ----------------------------------------------------------------------------
 * LEMON's icons (folder.svg, wrench.svg, etc.) are pure black <path>s. On a
 * dark background they're invisible. CSS mask paints them in --accent without
 * needing to edit the SVG files.
 * ============================================================================ */

.li-folder {
    list-style: none;
    position: relative;
}
.li-folder::marker { content: ""; }
.li-folder::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0.45rem;
    vertical-align: -3px;
    background-color: var(--accent);
    -webkit-mask: url('icons/folder.svg') no-repeat center / contain;
            mask: url('icons/folder.svg') no-repeat center / contain;
}
.li-folder.li-folder-open::before {
    -webkit-mask-image: url('icons/folder-open.svg');
            mask-image: url('icons/folder-open.svg');
}

/* Inline category icons (wrench, tools-and-equipment, download, etc.) come
   in as <img class="folder-icon">. CSS `filter` recolors them to --accent
   without touching the SVG files. Filter chain derived for #FFD100. */
.folder-icon {
    height: 20px;
    width: 20px;
    margin-right: 6px;
    vertical-align: -5px;
    filter: brightness(0) saturate(100%) invert(75%) sepia(82%) saturate(905%) hue-rotate(2deg) brightness(106%) contrast(101%);
}

.hidden  { display: none; }
.selected { background: rgba(255, 0, 0, 0.5); }

/* ============================================================================
 * INDENTATION (functional — preserve as-is from upstream)
 * ============================================================================ */

.indent-1 { white-space: pre; tab-size: 2;  }
.indent-2 { white-space: pre; tab-size: 4;  }
.indent-3 { white-space: pre; tab-size: 6;  }
.indent-4 { white-space: pre; tab-size: 8;  }
.indent-5 { white-space: pre; tab-size: 10; }
.indent-6 { white-space: pre; tab-size: 12; }
.indent-7 { white-space: pre; tab-size: 14; }
.indent-8 { white-space: pre; tab-size: 16; }
.indent-9 { white-space: pre; tab-size: 18; }
.indent-right-align { white-space: pre; tab-size: 100; }

/* ============================================================================
 * HIGHLIGHTED REGIONS (functional overlays on wiring diagrams — do not alter)
 * ============================================================================ */

.oxe-image {
    position: relative;
    display: inline-block;
    max-width: none;
}
.oxe-image .big-img {
    max-width: none !important;
    width: initial !important;
}
.oxe-region {
    position: absolute;
    display: block;
    background: rgba(25, 122, 250, .3);
}

/* ============================================================================
 * TABLES
 * ============================================================================ */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    background: var(--bg-elev);
    border-radius: 4px;
    overflow: hidden;
}
th, td {
    border-bottom: 1px solid var(--border);
    padding: 0.55rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
th {
    background: var(--bg-elev-2);
    color: var(--accent);
    font-family: var(--display);
    letter-spacing: 0.08em;
    font-weight: 400;
    border-bottom: 2px solid var(--accent);
}
tr:hover td { background: var(--bg-hover); }

/* ============================================================================
 * IMAGES — give them a white card so black-line schematics remain legible
 * ============================================================================ */

img {
    max-width: 100%;
    height: auto;
    background: #fff;
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(255, 209, 0, 0.08);
}
/* Don't card-wrap recolored UI icons */
.folder-icon,
.ICON {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.big-img {
    max-width: 50rem;
}
@media only screen and (hover: none) {
    html .big-img { max-width: 100%; }
}

/* ============================================================================
 * LEMON CONTENT CLASSES (text emphasis, notes, image holders, captions)
 * ============================================================================ */

.clsEmphBOLD { font-weight: bold; color: #fff; }
.NOTE        { font-style: italic; color: var(--text-dim); }
.NOTE_label  { font-weight: bold; color: var(--accent); }
.ICON        { height: 1em; vertical-align: -0.15em; }

.imageHolder { margin-top: 1em; }
.imageCaption {
    font-size: 1.5em;
    font-family: var(--display);
    color: var(--accent);
    letter-spacing: 0.04em;
}
.imageHolder img {
    display: block;
    max-width: 50rem;
}
.svgImageHolder {
    page-break-before: always;
    page-break-after: always;
}

/* Article SVGs: see upstream comment — width must be in absolute units to
   allow touch zoom. Media queries adjust for narrower viewports. */
.clsArticleSvg { width: 80rem; }
@media only screen and (max-width: 75rem) {
    .imageHolder img.clsArticleSvg { width: 50rem; }
}
@media only screen and (hover: none) {
    html .imageHolder img.clsArticleSvg { width: 100%; }
    html .imageHolder img             { max-width: 100%; }
}

/* ============================================================================
 * WARNINGS / ANNOUNCEMENTS (recolored for the dark theme)
 * ============================================================================ */

.other-warning {
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
    border-radius: 0 6px 0 6px;
    color: #111;            /* dark text on the pastel backgrounds            */
}
.other-variant      { background: #b6d8ea; }    /* "also applies to..."       */
.other-car          { background: #f0a040; }    /* "see also other vehicle"   */
.other-announcement {                            /* sticky banner via env var  */
    background: linear-gradient(90deg, var(--accent) 0%, #FFE855 100%);
    color: #111;
    font-weight: 500;
    border-radius: 4px;
}
.other-announcement a, .other-announcement a:visited {
    color: #111;
    text-decoration: underline;
}

/* ============================================================================
 * ABOUT PAGE (about.html ships its own structure)
 * ============================================================================ */

.about-body {
    padding: 2rem 5vw;
    background: var(--bg);
    color: var(--text);
}
.about-h1 {
    font-size: 6rem;
    font-weight: normal;
    font-family: var(--display);
    color: var(--accent);
    letter-spacing: 0.04em;
}
.about-content {
    line-height: 1.5;
    min-width: 6rem;
    max-width: 100%;
    width: 30rem;
    font-size: 1.5em;
    margin-bottom: 1.5rem;
    margin-left: 3vw;
    text-justify: justify;
}

/* ============================================================================
 * RESPONSIVE — narrow viewports get tighter padding
 * ============================================================================ */

@media (max-width: 640px) {
    .header, .footer { padding: 1rem 1rem; }
    .main            { padding: 1rem 1rem 6rem 1rem; }
    .branding b      { font-size: 1.7rem; }
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.55rem; }
    h3 { font-size: 1.25rem; }
}

/* ============================================================================
 * PRINT — fall back to plain black-on-white so printed manuals are readable
 * and toner-cheap
 * ============================================================================ */

@media print {
    html, body {
        background: #fff !important;
        color: #000 !important;
        padding: 0 !important;
    }
    a, a:visited, h1, h2, h3, h4, h5, h6 { color: #000 !important; }
    .main { padding: 0 !important; max-width: 100% !important; }
    .main ul, .main ol {
        background: transparent;
        border-left: 2px solid #999;
        border-radius: 0;
    }
    th {
        background: #eee !important;
        color: #000 !important;
        border-bottom-color: #999 !important;
    }
    tr:hover td { background: transparent !important; }
    img { background: transparent; box-shadow: none; padding: 0; }
    .theme-colors {
        background: #fff !important;
        color: #000 !important;
    }
    .header { border-bottom: 2px solid #999 !important; }
    .footer { border-top:    2px solid #999 !important; position: static !important; }
    .branding b { color: #000 !important; }
    .li-folder::before, .folder-icon {
        filter: brightness(0) saturate(100%);  /* solid black */
        background-color: #000;
    }
}

/* ============================================================================
 * DSD SHELL — two-pane layout: persistent sidebar + iframe content
 * ----------------------------------------------------------------------------
 * Active only on the shell page (body#dsd-shell). Iframe-loaded content
 * pages get body.embedded via JS, which hides their own header/footer so
 * we don't double up on chrome.
 * ============================================================================ */

/* When an inner page is loaded in the iframe, hide its built-in header/footer
   — the shell already shows those. The .embedded class is added by script.js. */
body.embedded .theme-colors,
body.embedded .header,
body.embedded .footer {
    display: none !important;
}
body.embedded .main {
    padding: 1rem 1.5rem 2rem 1.5rem;
    max-width: none;
}
body.embedded {
    min-height: auto;
}

/* ----- shell layout ----- */
body.dsd-shell-body {
    margin: 0;
    padding: 0;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;             /* iframe and sidebar handle their own scrolling */
    display: flex;
    flex-direction: column;
}

.dsd-shell-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.5rem;
    border-bottom: 3px solid var(--accent);
}
.dsd-shell-header .branding {
    margin-bottom: 0;
}

/* hamburger button — hidden on desktop, shown on mobile */
#dsd-hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    transition: background .15s ease;
}
#dsd-hamburger:hover { background: rgba(255, 209, 0, 0.1); }
#dsd-hamburger .dsd-hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

.dsd-shell-body-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 0;                /* let children scroll */
}

.dsd-shell-footer {
    flex: 0 0 auto;
    position: static;             /* override the absolute-positioned .footer */
    padding: 0.7rem 1.5rem;
    border-top: 3px solid var(--accent);
}

/* ----- sidebar ----- */
.dsd-sidebar {
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.8rem 0.4rem 2rem 0.4rem;
    font-size: 0.9rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-elev);
}
.dsd-sidebar::-webkit-scrollbar          { width: 8px; }
.dsd-sidebar::-webkit-scrollbar-track    { background: var(--bg-elev); }
.dsd-sidebar::-webkit-scrollbar-thumb    { background: var(--accent); border-radius: 4px; }

.dsd-tree {
    display: block;
}
.dsd-tree-makes {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border-left: none;
    border-radius: 0;
}
.dsd-tree-makes > li {
    margin: 0;
    padding: 0;
}
.dsd-tree-link {
    display: block;
    color: var(--text);
    padding: 0.4rem 0.9rem;
    border-radius: 3px;
    text-decoration: none;
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    transition: background .12s ease, color .12s ease;
}
.dsd-tree-link:hover {
    color: var(--accent-hover);
    background: rgba(255, 209, 0, 0.08);
    text-decoration: none;
}
.dsd-tree-link.dsd-tree-active {
    color: var(--bg);
    background: var(--accent);
}

/* ----- iframe content area ----- */
.dsd-content {
    background: var(--bg);
    overflow: hidden;
    min-height: 0;
}
#dsd-content-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg);
    display: block;
}

/* ----- welcome page inside iframe ----- */
.dsd-welcome-body {
    background: var(--bg);
    color: var(--text);
    padding: 3rem 2rem;
}
.dsd-welcome h1 {
    font-size: 2.6rem;
    margin-top: 0;
}
.dsd-welcome p {
    font-size: 1.1rem;
    color: var(--text-dim);
    max-width: 40rem;
}
.dsd-welcome-hint {
    color: var(--text-muted);
    font-size: 0.95rem;
    display: none;
}

/* ----- responsive: mobile sidebar collapses behind a hamburger ----- */
@media (max-width: 900px) {
    #dsd-hamburger {
        display: inline-flex;
    }
    .dsd-shell-body-grid {
        grid-template-columns: 1fr;
    }
    .dsd-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(85vw, 360px);
        z-index: 50;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .dsd-sidebar.dsd-sidebar-open {
        transform: translateX(0);
    }
    .dsd-welcome-hint {
        display: block;
    }
}

/* ============================================================================
 * HIDE BUNDLE / .ZIP DOWNLOAD LINKS — pre-rendered into the .mtbl page HTML,
 * so we suppress them client-side. Belt-and-suspenders selectors catch the
 * variants we've seen across LEMON-style and CHARM-style pages.
 * ============================================================================ */
.main li:has(a[href*="/bundle/"]) { display: none !important; }
.main a[href*="/bundle/"]         { display: none !important; }
.main img[src$="icons/download.svg"] { display: none !important; }