/* ==========================================================================
   THEME VARIABLES
   ========================================================================== */
:root {
    --mm-black: #000A0B;

    --mm-blue: #0540EF;
    --mm-blue-tonal: #1A52F9;

    --mm-ivory: #EAE4DF;
    --mm-ivory-tonal: #F9F9F9;

    --mm-sage: #B8C8C8;
    --mm-sage-tonal: #C4D5D5;

    --mm-steel: #223146;
    --mm-steel-tonal: #273A55;
}


/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
nav.breadcrumbs span,
.yoast-breadcrumbs span {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.yoast-breadcrumb span a {
    color: var(--mm-steel-tonal);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.yoast-breadcrumb span:last-child a,
.yoast-breadcrumbs .breadcrumb_last {
    font-weight: 500;
    color: var(--mm-blue);
}

/* ==========================================================================
  GLOBAL BACKGROUND
========================================================================== */

body,
main.main {
    background-color: var(--mm-ivory-tonal);
}

/* ==========================================================================
  SEARCH FORM
========================================================================== */

form.search-form {
    .search__input {
        border: 1px solid var(--mm-ivory);
        border-left: none;
    }

    .search__button {
        border: 1px solid var(--mm-sage);
        background: var(--mm-sage);
        color: var(--mm-blue);
    }

    &:hover,
    &:focus-within {
        border-color: var(--mm-blue);
    }

    &:hover .search__button,
    &:focus-within .search__button,
    .search__button:hover {
        background: var(--mm-blue);
        color: var(--mm-sage);
        border-color: var(--mm-blue);
    }

    .search__input:hover,
    .search__input:focus-visible,
    &:focus-within .search__input {
        border-color: var(--mm-blue);
    }
}

/* ==========================================================================
  SINGLE ARTICLE PAGE
========================================================================== */
article header h1 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* ==========================================================================
CATEGORIES HIGHLIGHT
========================================================================== */

/* Square thumb on mobile */
.categories-highlight--mobile .article-card a:has(img) {
  aspect-ratio: 1 / 1;
  inline-size: 100px;
  block-size: 100px;
  min-inline-size: 100px;
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */
.lh-title.lh-title {
    font-family: "new-science-extended", "new-science-fallback", system-ui, sans-serif;
}