/* ==========================================================================
   ETHOS.RESKit — Forschungszentrum Jülich Brand Theme
   ========================================================================== */

/* -- FZJ Brand Colors ----------------------------------------------------
   Shared across the ETHOS docs sites (GeoKit, GLAES, TSAM, FINE, RESKit); keep
   this block identical in each repo's extra.css. */
:root {
    --md-primary-fg-color: #023d6b;
    --md-primary-fg-color--light: #0a5a9e;
    --md-primary-fg-color--dark: #012845;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #ffffffb3;
    --md-accent-fg-color: #21918c;
    --md-accent-fg-color--transparent: #21918c1a;
    --md-accent-bg-color: #ffffff;
    --md-accent-bg-color--light: #ffffffb3;
    --md-typeset-a-color: #35b0ab;
}

.md-typeset a {
    color: #35b0ab;
}

.md-typeset a:hover {
    color: #21918c;
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #023d6b;
    --md-primary-fg-color--light: #0a5a9e;
    --md-primary-fg-color--dark: #012845;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #ffffffb3;
    --md-accent-fg-color: #35b0ab;
    --md-accent-fg-color--transparent: #35b0ab1a;
    --md-typeset-a-color: #35b0ab;
}

/* Improve table styling */
.md-typeset table:not([class]) {
    font-size: 0.85rem;
}

/* -- Home page logo row ---------------------------------------------------
   The home page is generated from README.md by
   docs/scripts/gen_index_from_readme.py, which sizes its logos with the HTML
   `width` attribute because that is what GitHub honours. Material's
   ".md-typeset img" rule (specificity 0,1,1) sets `height: auto`, so these
   rules re-assert a size at specificity 0,2,0. Keep in sync with LOGO_BLOCKS
   in the generator script.

   Widths are in PERCENT, not pixels. Because every ETHOS docs site uses the
   same Material grid and sidebars, a given percentage is the same rendered
   width on all of them, which is what keeps the ICE-2 header the same size
   across FINE, GeoKit, GLAES, TSAM and RESKit. Keep `.hero-logo--jsa` at 65.8%
   in each repo's extra.css.

   `height: auto` resolves the logo's height from its own aspect ratio (the
   ICE-2 header is 568.23x81.38, 6.98:1).

   Dark mode is handled by swapping to JSA-Header-dark.svg via the
   "#only-light"/"#only-dark" fragments rather than a CSS
   `filter: brightness(0) invert(1)` on the light logo — README_assets ships a
   purpose-made dark variant, so inverting the light one is unnecessary. */
.md-typeset .hero-logo--jsa {
    width: 65.8%;
    height: auto;
}

/* Acknowledgement logo at the foot of the page — sits alone, so a fixed width
   (matching the README's width="200") rather than a share of the row. */
.md-typeset .hero-logo--helmholtz {
    width: 200px;
    height: auto;
}

/* -- Institutional footer -------------------------------------------------
   Shared across the ETHOS docs sites; keep identical in each repo. */
.footer-institutional {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
    width: 100%;
    flex-wrap: wrap;
}

.footer-institutional__logos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

/* Material's ".md-typeset img" rule (specificity 0,1,1) forces height:auto on
   images inside the footer meta. We scope under ".md-footer" (specificity
   0,2,0) so our sizing wins — otherwise the Helmholtz SVG, which has only a
   viewBox and no intrinsic width/height, is forced to height:auto, collapses
   to 0, and disappears. Height-based sizing keeps the two logos aligned and
   symmetric. The footer is always dark, so the JSA logo is inverted to white. */
.md-footer .footer-logo--jsa {
    height: 60px;
    width: auto;
    filter: brightness(0) invert(1);
}

.md-footer .footer-logo--helmholtz {
    height: 33px;
    width: auto;
}

.footer-institutional__text {
    font-size: 0.7rem;
    line-height: 1.6;
}

.footer-institutional__text p {
    margin: 0.2rem 0;
}

.footer-institutional__text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.footer-institutional__text a:hover {
    text-decoration-color: inherit;
}