/* Custom CSS for cluster documentation */

/* ============================================ */
/* Inline code (backticks: `code`)              */
/* ============================================ */
/* Target inline code but NOT code blocks */
.md-typeset td code,
.md-typeset th code {
    font-size: 0.95em !important;
    padding: 0.1em 0.4em;
}

/* ============================================ */
/* Code blocks (triple backticks: ```code```)  */
/* ============================================ */
/* Keep default size for multiline code blocks */
.highlight code,
pre code {
    font-size: 0.85em; /* Default Material theme size */
}

/* ============================================ */
/* Tables                                       */
/* ============================================ */
/* .md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
    font-size: 0.7rem;
} */

/* Optional: Uncomment to also increase code block font size */
/*
.highlight code,
pre code {
    font-size: 0.9em;
}
*/

/* ============================================ */
/* Compute nodes — gray text for old hostnames  */
/* ============================================ */
.gray-text {
    color: #757575;
    font-size: 0.85em;
    font-style: italic;
}

/* ============================================ */
/* Credits — favicon and screencap sizing       */
/* ============================================ */
img[alt="favicon"] {
    vertical-align: middle;
    height: 1rem;
}
img[alt="screencap"] {
    height: 150px;
    margin: 15px;
}

/* ============================================ */
/* Credits — logo banner                        */
/* ============================================ */
.logo-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin: 2rem 0;
}
.logo-banner img {
    height: 120px;
}

/* ============================================ */
/* Home — cluster highlights grid               */
/* ============================================ */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.highlight-card {
    text-align: center;
    padding: 1.2rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--md-default-fg-color--lightest);
}
.highlight-card .number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--md-primary-fg-color);
}
.highlight-card .label {
    font-size: 0.85rem;
    color: var(--md-default-fg-color--light);
}

/* ============================================ */
/* Buttons — icon + text vertical alignment     */
/* ============================================ */
.md-typeset .md-button .twemoji {
    vertical-align: middle;
}
.md-typeset .md-button .twemoji svg {
    height: 1.4em;
    width: 1.4em;
}