/**
 * SPDX-FileCopyrightText: Copyright (c) 2023, 2026 The Lethe Authors
 * SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception OR LGPL-2.1-or-later
 */

/* ============================================================================
   DOXYGEN EXCEPTION MESSAGE STYLING
   ============================================================================ */

/**
 * Styles exception messages generated by Doxygen documentation system.
 * Creates a light gray info box with subtle border for displaying errors/warnings.
 */
div.doxygen-generated-exception-message {
    color: black;
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    padding: 5px;
    font-size: 95%;
}

/* ============================================================================
   PAGE LAYOUT CONFIGURATION
   ============================================================================ */

/**
 * Allows content to expand to full window width instead of being constrained
 * to a maximum width. This makes the documentation responsive and full-width.
 */
html {
    --content-maxwidth: auto;
}

/**
 * Defines the height of the top navigation bar as a CSS custom property
 * for reuse throughout the stylesheet.
 * JavaScript will update this dynamically based on actual header height.
 */
:root {
    --topbar-h: 64px;
}

/**
 * Adds padding to the body to prevent content from being hidden behind
 * the fixed navigation bar. JavaScript will adjust this dynamically.
 */
body {
    padding-top: var(--topbar-h) !important;
}

/**
 * Responsive padding based on screen size
 */
@media (max-width: 1650px) {
    :root {
        --topbar-h: 120px;
    }
    body {
        padding-top: 120px !important;
    }
}

@media (max-width: 1040px) and (min-width: 801px){
    :root {
        --topbar-h: 140px;
    }
    body {
        padding-top: 140px !important;
    }
}

@media (max-width: 800px) {
    :root {
        --topbar-h: 120px;
    }
    body {
        padding-top: 120px !important;
    }
}

/* ============================================================================
   FIXED TOP NAVIGATION BAR
   ============================================================================ */

/**
 * Fixes the top navigation menu to the viewport so it stays visible when scrolling.
 * Uses high z-index to ensure it appears above all other page content.
 */
#top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/**
 * Adds extra padding for anchor links to account for the fixed header,
 * ensuring linked sections aren't hidden behind the top bar.
 */
:target {
    scroll-margin-top: calc(var(--topbar-h) + 24px);
}

/* ============================================================================
   GITHUB WIDGET STYLING
   ============================================================================ */

/**
 * Allows the GitHub widget to be multi-line in the menu bar.
 * Overrides default single-line height restrictions.
 */
#main-menu > li > a.lethe-github-widget,
#top a.lethe-github-widget {
    height: auto !important;
    line-height: normal !important;
}

/**
 * Additional spacing and layout for the widget in the top bar.
 */
#top a.lethe-github-widget {
    padding: 4px 8px !important;
    display: inline-flex !important;
    align-items: flex-start !important;
}

/**
 * Ensures all child elements use normal line height.
 */
#top a.lethe-github-widget * {
    line-height: normal !important;
}

/**
 * Main GitHub widget container.
 * Two-row flexbox layout with rounded corners and hover effects.
 * COMPACT SIZE at all screen widths.
 */
.lethe-github-widget {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
    margin-right: 12px;
    padding: 4px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--page-foreground-color);
    background: transparent;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    font-size: 0.85em;
}

.lethe-github-widget:hover {
    background: rgba(255, 255, 255, 0.04);
}

/**
 * Widget rows: first contains icon + repo name, second contains stats.
 */
.lgw-row1,
.lgw-row2 {
    display: inline-flex;
    align-items: center;
    position: static !important;
}

.lgw-row1 {
    gap: 6px;
    font-size: 0.95em;
}

.lgw-row2 {
    justify-content: center;
    align-self: center;
    gap: 6px;
    font-size: 0.85em;
    opacity: 0.9;
}

/**
 * Individual stat items (stars, forks) with icon and text.
 */
.lgw-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

/**
 * Vertical separator between stats.
 */
.lgw-sep {
    width: 1px;
    height: 14px;
    background: var(--separator-color);
    opacity: 0.8;
}

/**
 * Icon sizing: smaller icons for compact widget
 */
.lgw-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

/**
 * GitHub logo: 20x20px (reduced from 26x26px)
 */
.lgw-gh svg {
    width: 20px;
    height: 20px;
}

/**
 * Repository name styling.
 */
.lgw-name {
    font-weight: 500;
}

/**
 * Stat text with tabular numbers for consistent alignment.
 */
.lgw-text {
    font-variant-numeric: tabular-nums;
    transition: color 0.1s ease;
}

/**
 * Keep GitHub widget in navigation row, prevent wrapping to breadcrumb area.
 * Uses absolute positioning when widget is direct child of #top container.
 * Default position: right: 280px (for screens > 1650px)
 */
#top > #lethe-github-widget {
    position: absolute;
    right: 280px;
    top: 12px;
    margin: 0;
    transform: none;
    z-index: 10000;
}

/**
 * Reposition widget to far right when screen is below 1650px
 * Aligns with the title line on the right side
 */
@media (max-width: 1650px) {
    #top > #lethe-github-widget {
        right: 20px;
    }
}

/**
 * Hide widget between 1850px and 1650px to avoid overlap
 * Widget shows: > 1850px and < 1650px
 * Widget hides: between 1850px - 1650px
 */
@media (max-width: 1850px) and (min-width: 1651px) {
    #lethe-github-widget,
    #lethe-github-widget-container,
    a.lethe-github-widget,
    .lethe-github-widget {
        display: none !important;
    }
}

/**
 * Hide widget on very small screens
 */
@media (max-width: 800px) {
    #lethe-github-widget,
    #lethe-github-widget-container,
    a.lethe-github-widget,
    .lethe-github-widget {
        display: none !important;
    }
}

/**
 * Ensure all widget elements inherit the page foreground color
 * for consistent theming across light and dark modes.
 */
#lethe-github-widget,
#lethe-github-widget:link,
#lethe-github-widget:visited,
#lethe-github-widget *{
    color: var(--header-foreground) !important;
    text-decoration: none !important;
}

/**
 * Apply same hover behavior as .sm-dox a:hover and keep underline off
 */
#lethe-github-widget:hover,
#lethe-github-widget:active {
    background: var(--menu-focus-background) !important;
    color: var(--menu-focus-foreground) !important;
    text-decoration: none !important;
}

/**
 * Ensure all inner spans/icons follow the link color
 */
#lethe-github-widget:hover *,
#lethe-github-widget:active * {
    color: var(--menu-focus-foreground) !important;
}


/* ============================================================================
   FOOTER LOGO AND COPYRIGHT
   ============================================================================ */

/**
 * Show/hide logos based on theme with smooth transition
 */
.chaos-logo {
    transition: opacity 0.3s ease;
}

/**
 * Light mode: show dark logo, hide white logo
 */
.chaos-logo-light {
    display: inline-block;
}

.chaos-logo-dark {
    display: none;
}

/**
 * Dark mode: hide dark logo, show white logo
 */
html.dark-mode .chaos-logo-light,
body[data-theme="dark"] .chaos-logo-light {
    display: none;
}

html.dark-mode .chaos-logo-dark,
body[data-theme="dark"] .chaos-logo-dark {
    display: inline-block;
}

/**
 * Copyright text styling in footer
 */
.chaos-copyright {
    font-size: 0.9em;
    color: var(--page-foreground-color);
    opacity: 0.8;
}

/**
 * Reduce footer element sizes on small screens (< 800px)
 * Makes logo and text smaller to fit better on mobile
 */
@media (max-width: 800px) {
    /* Smaller CHAOS logo */
    .chaos-logo-light,
    .chaos-logo-dark {
        height: 28px !important;
    }

    /* Smaller copyright text */
    .chaos-copyright {
        font-size: 0.75em;
    }

    /* Smaller doxygen logo and text */
    .footer img {
        max-height: 20px !important;
        width: auto !important;
    }

    address.footer small {
        font-size: 0.7em;
    }

    /* Reduce footer padding */
    address.footer {
        padding: 5px 10px !important;
    }
}