/* Project content styling (non-vendor). Load last in HTML_EXTRA_STYLESHEET.

   Sidebar expand arrows always visible (theme fades them in only on row
   hover via --side-nav-arrow-opacity: 0). */
html {
    --side-nav-arrow-opacity: 1;
}
/* Older doxygen (<1.10) draws tree arrows as coloured text glyphs; tint them
   like the sidebar text. Newer doxygen uses span.arrowhead (see colours-*). */
#nav-tree .arrow {
    color: var(--side-nav-foreground);
}

/* Sidebar (nav-tree) selected entry + burger icon: structural rules shared by
   all colour variants; each colours-*.css supplies the --side-nav-* colours. */
#nav-tree .selected {
    background-color: var(--side-nav-selected-background) !important;
}
#nav-tree .selected,
#nav-tree .selected a {
    color: var(--side-nav-foreground) !important;
}
#nav-tree .selected::after {
    background: var(--side-nav-foreground);
}
/* Expand arrows and burger icon follow the sidebar text colour (theme defaults
   arrows to --primary-light-color, faint on the nav). */
.selected span.arrowhead,
#nav-tree span.arrowhead {
    border-color: var(--side-nav-foreground);
}
.main-menu-btn-icon,
.main-menu-btn-icon::before,
.main-menu-btn-icon::after {
    background: var(--side-nav-foreground);
}

/* Tree root = project name (already shown in the sidebar header): hide its row
   via opacity (display:none drops the selected-item highlight). */
#nav-tree-contents > ul > li:first-child > div.item {
    opacity: 0;
    pointer-events: none;
}

/* .page-banner — full-width banner above the page title (emitted by
   theme/header.html on every page). Shown on all pages with a default image;
   override per page with a [data-page="<Page Title>"] rule. */
.page-banner {
    display: block;
    width: 100%;
    height: 560px;
    /* cancel #doc-content padding-top so the banner sits flush at the top */
    margin: calc(80px - var(--top-height)) 0 1rem;
    background: center / cover no-repeat url("chip-2beferro.jpg");
}
/* Per-page banner image (keyed by page title). Only 6 chip photos exist, so
   the first six pages are unique and Software/Contact reuse two of them. */
.page-banner[data-page="DTU Asynchronous IC Laboratory"] { background-image: url("chip-2beferro.jpg"); }
.page-banner[data-page="Research"]           { background-image: url("chip-dynapse2.jpg"); }
.page-banner[data-page="Chips"]              { background-image: url("chip-speck1.jpg"); }
.page-banner[data-page="People"]             { background-image: url("chip-texel.jpg"); }
.page-banner[data-page="Teaching"]           { background-image: url("chip-cognigr1.jpg"); }
.page-banner[data-page="Available Projects"] { background-image: url("chip-dynapcnn.jpg"); }
.page-banner[data-page="Software & Tools"]   { background-image: url("chip-2beferro.jpg"); }
.page-banner[data-page="Contact"]            { display: none; }

/* .chip — chip entry layout: photo left, description right. Stacks to a
   single column on narrow screens. Wrapper emitted by the \chip / \endchip
   aliases (see Doxyfile). order:-1 pulls the photo ahead of the description
   and the stray empty paragraph the markdown wrapper leaves behind. */
.chip {
    display: flex;
    align-items: flex-start;
}
.chip > p:first-child {
    flex: 1;
    margin: 0;
}
.chip > p {
    margin: 0;
}
.chip .image {
    flex: 0 0 55%;
    order: -1;
    margin: 0 1.5rem 0 0;
}
.chip .image img {
    width: 100%;
    height: auto;
}
@media (max-width: 600px) {
    .chip {
        flex-direction: column;
    }
    .chip .image {
        order: 0;
        flex-basis: auto;
        margin: 0 0 1rem;
    }
}