/*
 * NuTS Custom Color Scheme
 * Based on the original nuts.univ-nantes.io website
 */

/* GitHub's colors (Primer, https://primer.style/foundations/color): neutral
   backgrounds, pink links and buttons, per theme. The
   illustrations, shown on both, take mid shades of Primer's scales. Declared on
   the scheme too, so that the colors defined per theme below resolve */
:root,
[data-md-color-scheme] {

    /* Shared by both themes: mid shades of Primer's scales, as in the
       illustrations (illustrations/ascii_earth.py) */
    --gh-blue: #218bff;  /* blue-4 */
    --gh-green: #2da44e;  /* green-4 */
    --gh-pink: #db61a2;  /* pink, dark theme shade: readable on both */

    /* Headings: plain text, as on GitHub */
    --nuts-h2-color: var(--md-default-fg-color);
    --nuts-h3-color: var(--md-default-fg-color);
    --nuts-h4-color: var(--md-default-fg-color);

    /* Primary colors */
    --md-primary-fg-color--light: var(--nuts-main);
    --md-primary-fg-color--dark: var(--nuts-accent);
    --md-primary-bg-color: #ffffff;

    /* Accent colors (hover) */
    --md-accent-fg-color: var(--nuts-link);
    --md-accent-fg-color--transparent: color-mix(in srgb, var(--nuts-link) 10%, transparent);

    /* Links */
    --md-typeset-a-color: var(--nuts-link);

    /* Syntax highlighting (GitHub's "prettylights") */
    --md-code-hl-keyword-color: var(--gh-hl-keyword);
    --md-code-hl-string-color: var(--gh-hl-string);
    --md-code-hl-number-color: var(--gh-hl-constant);
    --md-code-hl-special-color: var(--gh-hl-keyword);
    --md-code-hl-function-color: var(--gh-hl-function);
    --md-code-hl-constant-color: var(--gh-hl-constant);
    --md-code-hl-name-color: var(--md-code-fg-color);
    --md-code-hl-operator-color: var(--gh-hl-keyword);
    --md-code-hl-punctuation-color: var(--md-code-fg-color);
    --md-code-hl-comment-color: var(--md-default-fg-color--light);
    --md-code-hl-variable-color: var(--gh-hl-variable);
    --md-code-hl-generic-color: var(--gh-hl-function);
}

/* Light theme: GitHub light */
[data-md-color-scheme="default"] {

    /* Home page hero, behind the transparent globe video */
    --nuts-hero-background: #f6f8fa;  /* canvas.subtle */
    --nuts-hero-text: #1f2328;

    --md-primary-fg-color: var(--nuts-hero-background);
    --md-default-bg-color: #ffffff;  /* page, lighter than the hero */
    --nuts-bar-background: var(--nuts-hero-background);  /* header and mobile menu title, like the hero and banners */
    --nuts-bar-text: var(--nuts-hero-text);
    --nuts-border: #d1d9e0;
    --nuts-link: #bf3989;  /* pink (sponsors) */
    --nuts-main: var(--nuts-link);  /* buttons, in the pink of the theme */
    --nuts-main-hover: #99286e;
    --nuts-accent: #bf3989;  /* hero buttons */
    --nuts-note: #1a7f37;
    --md-default-fg-color: #1f2328;
    --md-default-fg-color--light: #59636e;
    --md-default-fg-color--lighter: color-mix(in srgb, #59636e 45%, transparent);
    --md-default-fg-color--lightest: color-mix(in srgb, #59636e 15%, transparent);
    --md-code-bg-color: #f6f8fa;
    --md-code-fg-color: #1f2328;
    /* Footer: light gray like the header, rather than Material's black */
    --md-footer-bg-color: var(--nuts-hero-background);
    --md-footer-bg-color--dark: var(--nuts-hero-background);
    --md-footer-fg-color: #1f2328;
    --md-footer-fg-color--light: #59636e;
    --md-footer-fg-color--lighter: #818b98;
    --gh-hl-keyword: #cf222e;
    --gh-hl-string: #0a3069;
    --gh-hl-constant: #0550ae;
    --gh-hl-function: #8250df;
    --gh-hl-variable: #953800;
}

/* Dark theme: GitHub dark */
[data-md-color-scheme="slate"] {

    /* Home page hero */
    --nuts-hero-background: #151b23;  /* canvas.subtle */
    --nuts-hero-text: #f0f6fc;

    --md-primary-fg-color: var(--nuts-hero-background);
    --md-default-bg-color: #0d1117;  /* page, darker than the hero */
    --nuts-bar-background: var(--nuts-hero-background);  /* header and mobile menu title, like the hero and banners */
    --nuts-bar-text: var(--nuts-hero-text);
    --nuts-border: #3d444d;
    --nuts-link: #db61a2;  /* pink (sponsors) */
    --nuts-main: var(--nuts-link);  /* buttons, in the pink of the theme */
    --nuts-main-hover: #bf3989;
    --nuts-accent: #db61a2;  /* hero buttons */
    --nuts-note: #3fb950;
    --md-default-fg-color: #f0f6fc;
    --md-default-fg-color--light: #9198a1;
    --md-default-fg-color--lighter: color-mix(in srgb, #9198a1 45%, transparent);
    --md-default-fg-color--lightest: color-mix(in srgb, #9198a1 15%, transparent);
    --md-typeset-color: #f0f6fc;
    --md-typeset-a-color: var(--nuts-link);
    --md-code-bg-color: #151b23;
    --md-code-fg-color: #f0f6fc;
    /* Footer: dark gray like the header */
    --md-footer-bg-color: var(--nuts-hero-background);
    --md-footer-bg-color--dark: var(--nuts-hero-background);
    --md-footer-fg-color: #f0f6fc;
    --md-footer-fg-color--light: #9198a1;
    --md-footer-fg-color--lighter: #656c76;
    --gh-hl-keyword: #ff7b72;
    --gh-hl-string: #a5d6ff;
    --gh-hl-constant: #79c0ff;
    --gh-hl-function: #d2a8ff;
    --gh-hl-variable: #ffa657;
}

/* The page behind the page, and the native window scrollbars (Safari shows
   both around the site): same color and color scheme as the page, per theme.
   Material only sets them on body, where the theme is, so html follows it
   with :has() */
html:has(body[data-md-color-scheme="default"]) {
    background-color: #ffffff;
    color-scheme: light;
}

html:has(body[data-md-color-scheme="slate"]) {
    background-color: #0d1117;
    color-scheme: dark;
}

/* Custom styling for info admonitions */
.md-typeset .admonition.info,
.md-typeset details.info {
    border-color: var(--nuts-main);
}

.md-typeset .info>.admonition-title,
.md-typeset .info>summary {
    background-color: color-mix(in srgb, var(--nuts-main) 10%, transparent);
    border-color: var(--nuts-main);
}

/* Note admonitions */
.md-typeset .admonition.note,
.md-typeset details.note {
    border-color: var(--nuts-note);
}

.md-typeset .note>.admonition-title,
.md-typeset .note>summary {
    background-color: color-mix(in srgb, var(--nuts-note) 10%, transparent);
}

.md-typeset .admonition.note>.admonition-title::before,
.md-typeset .note>summary::before {
    background-color: var(--nuts-note);
}

/* Header and navigation */
.md-header {
    background-color: var(--nuts-bar-background) !important;
    color: var(--nuts-bar-text);
}

/* Navigation tabs inside the header (overrides/partials/header.html):
   shown on wide screens, where they replace the site title */
.md-header__tabs {
    display: none;
    flex-grow: 1;
    height: 2.4rem;
    overflow: hidden;
}

.md-header__tabs .md-tabs__link {
    margin-top: 0.6rem;
}

@media screen and (min-width: 76.25em) {
    .md-header__tabs {
        display: block;
    }

    .md-header__title {
        display: none;
    }
}

.md-tabs {
    background-color: var(--md-primary-fg-color--light) !important;
    color: #ffffff;
}

.md-tabs__link {
    font-size: 0.8rem !important;
}

.md-header__topic {
    font-size: 0.9rem !important;
}


/* Buttons ({ .md-button } and { .md-button .md-button--primary } in Markdown).
   Material colors them with --md-primary-fg-color, the light gray of the
   header here: selectors as specific as Material's, to win over them */
.md-typeset .md-button {
    color: var(--nuts-main);
    border-color: var(--nuts-main);
}

.md-typeset .md-button--primary {
    background-color: var(--nuts-main);
    color: #ffffff;
    border-color: var(--nuts-main);
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
    background-color: var(--nuts-main-hover);
    color: #ffffff;
    border-color: var(--nuts-main-hover);
}


/* Search field of the light header: white background and dark text, instead
   of Material's translucent black with light text */
@media screen and (min-width: 60em) {
    [data-md-color-scheme="default"] .md-search__input {
        background-color: #ffffff;
        color: var(--md-default-fg-color);
    }

    [data-md-color-scheme="default"] .md-search__input::placeholder,
    [data-md-color-scheme="default"] .md-search__icon {
        color: var(--md-default-fg-color--light);
    }
}

/* Search highlighting */
.md-search-result__meta {
    background-color: var(--nuts-main);
}

/* Typography */
.md-typeset h1 {
    font-size: 4rem;
    font-weight: 100;
}

.md-typeset h2 {
    font-weight: 700;
}

/* Links in pink, underlined on hover, as on GitHub. Material's
   palette sets the link color on body[data-md-color-scheme][data-md-color-primary]:
   a more specific selector is needed to override it */
body[data-md-color-scheme][data-md-color-primary] {
    --md-typeset-a-color: var(--nuts-link);
}

.md-typeset a:focus,
.md-typeset a:hover {
    color: var(--nuts-link);
    text-decoration: underline;
}

/* Paragraphs and list items at the same size */
.md-typeset p,
.md-typeset li {
    font-size: 1rem;
    line-height: 1.45;
}

/* Partner Institutions Section */
.mdx-partners {
    padding: 2rem;
}

.mdx-partners__content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Partner logos, in the text color of the footer */
.mdx-partners__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: center;
    justify-content: center;
}

.mdx-partners__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--md-footer-fg-color);
}

/* CNRS logo, no filter: the official white version in the dark theme, its two
   colors swapped (blue disc, white letters) in the light theme */
.mdx-partners__logo img.mdx-partners__cnrs {
    height: 4rem;
    width: auto;
}

[data-md-color-scheme="default"] .mdx-partners__cnrs--dark,
[data-md-color-scheme="slate"] .mdx-partners__cnrs--light {
    display: none;
}

.mdx-partners__label {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* Headings always start below floated images (align=left/right) */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    clear: both;
}

/* Image next to text, text vertically centered on the image */
.md-typeset .figure-text {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.md-typeset .figure-text>div {
    flex: 1;
    min-width: 0;
}

/* Image on the left (image right after the heading in the Markdown) */
.md-typeset .figure-text--left {
    flex-direction: row-reverse;
}

.md-typeset .figure-text>div> :first-child {
    margin-top: 0;
}

.md-typeset .figure-text>p:has(> img:only-child),
.md-typeset .figure-text>p:has(> video:only-child) {
    flex: 0 0 45%;
    margin: 0;
}

.md-typeset .figure-text>p>img,
.md-typeset .figure-text>p>video {
    display: block;
    width: 100%;
    height: auto;
}

/* Stack text and image on narrow screens, text first */
@media screen and (max-width: 44.9375em) {
    .md-typeset .figure-text,
    .md-typeset .figure-text--left {
        flex-direction: column;
    }
}

/* Home page: more breathing room between sections */
.md-typeset .home-content h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.md-typeset .home-content .figure-text {
    gap: 2.5rem;
    margin: 1.5rem 0;
}

.md-typeset .home-content .figure-text>p>img {
    border-radius: 0.4rem;
}

@media screen and (max-width: 44.9375em) {
    .md-typeset .home-content .figure-text {
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
}


/* ------------------------------------------------------------------ */
/* Inner pages                                                         */
/* ------------------------------------------------------------------ */

/* Title banner (overrides/main.html): the colors of the home page hero */
.page-hero {
    background-color: var(--nuts-hero-background);
    color: var(--nuts-hero-text);
    padding: 2.5rem 0;
}

.page-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0 1.2rem;
}

.page-hero h1 {
    margin: 0;
    color: var(--nuts-hero-text);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.page-hero p {
    margin: 1rem 0 0;
    max-width: 40rem;
    font-size: 1.1rem;
    line-height: 1.45;
    opacity: 0.85;
}

.page-hero p.page-hero__abstract {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.55;
    opacity: 0.8;
}

.page-hero__video {
    flex: 0 0 auto;
    width: 20rem;
    aspect-ratio: 1;
}

/* The banner already shows the title */
body:has(.page-hero) .md-content__inner>h1:first-of-type {
    display: none;
}

/* Phones: title, then the globe below it, centered */
@media screen and (max-width: 44.9375em) {
    .page-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .page-hero h1 {
        font-size: 1.8rem;
    }

    .page-hero__video {
        align-self: center;
        width: min(14rem, 70vw);
    }
}

/* Headings in plain text, as on GitHub */
.md-typeset h2 {
    color: var(--nuts-h2-color);
}

.md-typeset h3 {
    color: var(--nuts-h3-color);
}

.md-typeset h4 {
    color: var(--nuts-h4-color);
}

body:has(.page-hero) .md-typeset h2 {
    margin-top: 2.5rem;
    font-weight: 600;
}

/* Quotes */
.md-typeset blockquote {
    border-left: none;
    background: var(--md-accent-fg-color--transparent);
    border-radius: 0.4rem;
    padding: 0.6rem 1rem;
    color: var(--md-default-fg-color);
}

/* Tables, close to plain Markdown: no frame, no vertical lines, a rule under
   the header and thin lines between rows */
.md-typeset table:not([class]) {
    font-size: 0.88rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Tables span the full width of the text. Material shows them as inline
   blocks, as wide as their content; its scroll wrapper still lets wide tables
   scroll sideways on phones */
.md-typeset .md-typeset__scrollwrap {
    margin-left: 0;
    margin-right: 0;
}

.md-typeset .md-typeset__table {
    display: block;
    width: 100%;
    padding: 0;
}

.md-typeset .md-typeset__table table:not([class]) {
    display: table;
    width: 100%;
}

.md-typeset table:not([class]) th {
    background: none;
    color: var(--md-default-fg-color);
    border: none;
    border-bottom: 1px solid var(--nuts-border);
}

.md-typeset table:not([class]) td {
    border: none;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* Wider side margins on tablet and desktop (phones keep the default) */
@media screen and (min-width: 60em) {

    .md-content__inner,
    .page-hero__inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media screen and (min-width: 76.25em) {

    .md-content__inner,
    .page-hero__inner {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* Never nest the page's table of contents in the navigation sidebar
   (Material does it on medium screens and phones when the TOC is hidden) */
.md-nav--primary .md-nav__link[for="__toc"],
.md-nav--primary .md-nav__link[for="__toc"]~.md-nav {
    display: none !important;
}

.md-nav--primary .md-nav__link[for="__toc"]+.md-nav__link {
    display: flex !important;
}

/* Collapsed navigation (mobile drawer): title bar like the header */
.md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--nuts-bar-background);
    color: var(--nuts-bar-text);
}

/* Compact tables: wrap one in <div class="compact" markdown> to tighten its
   rows, the other tables keep their spacing */
.md-typeset .compact table:not([class]) th,
.md-typeset .compact table:not([class]) td {
    padding: 0.35em 0.8em;
}

/* Cell text level with the middle of the thumbnails */
.md-typeset table:not([class]) td {
    vertical-align: middle;
}

/* Thumbnails in tables (Rencontres page) */
.md-typeset table:not([class]) td img {
    display: block;
    width: 8rem;
    max-width: none;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 0.3rem;
}

/* Photo at the top of a page (right under its title): full width, e.g. the
   pages of the rencontres */
.md-typeset h1 + p > img:only-child {
    display: block;
    width: 100%;
    max-height: 32rem;
    object-fit: cover;
    border-radius: 0.4rem;
}

/* Logo (overrides/partials/logo.html): darker shades in the light theme */
.md-header__button.md-logo img {
    height: 1.6rem;
}

/* Material shows logo images with `display: block` (header, mobile menu):
   hide the variant of the other theme with priority */
img.nuts-logo--light,
[data-md-color-scheme="default"] img.nuts-logo--default {
    display: none !important;
}

[data-md-color-scheme="default"] img.nuts-logo--light {
    display: block !important;
}

/* Blog index: the type of a post (overrides/partials/post.html) as a small
   label in the yellow of the globes, and excerpt titles in pink, like the
   other links */
.md-post__type {
    padding: 0.1em 0.5em;
    border-radius: 1em;
    background-color: color-mix(in srgb, #d4a72c 25%, transparent);
    color: var(--md-default-fg-color);
    font-size: 0.85em;
}

.md-post--excerpt .md-typeset h2 a {
    color: var(--nuts-link);
}