/* === Header wordmark === */
/* branding.js fills .menu-title with two <img> tags side-by-side:
   the X mark on the left and the EXFER text on the right.
   Both render at the same height so each letter ≈ the X mark height
   (the X mark image is square, EXFER text image is a strip).            */

.menu-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    line-height: 1;
}
.menu-title-mark,
.menu-title-text {
    height: 22px;
    width: auto;
    display: block;
    user-select: none;
}

/* mdBook's default menu-bar is ~50px tall — 36px-high images fit
   comfortably with 7px breathing room top/bottom.                       */

/* Light themes — invert the white wordmark to dark glyphs */
html.light .menu-title-mark,
html.light .menu-title-text,
html.rust  .menu-title-mark,
html.rust  .menu-title-text {
    filter: invert(1) hue-rotate(180deg);
}

/* Visually hidden text kept for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Narrow viewports — slightly smaller wordmark to leave room for icons */
@media (max-width: 600px) {
    .menu-title-mark,
    .menu-title-text { height: 18px; }
    .menu-title { gap: 10px; }
}

/* === Hero on the landing page === */

.exfer-hero {
    margin: 1rem auto 2rem auto;
    text-align: center;
    padding: 0.5rem 0;
}
.exfer-hero img {
    max-width: 560px;
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    user-select: none;
}
@media (max-width: 600px) {
    .exfer-hero img { width: 90%; }
}

/* Light themes — invert the white wordmark to dark glyphs */
html.light .exfer-hero img,
html.rust  .exfer-hero img {
    filter: invert(1) hue-rotate(180deg);
}

/* === Agent-prompt card ===
   The "give this to your AI agent" feature. Designed to stand out
   visually as the answer to "I don't want to read 40 pages of docs". */

.agent-prompt-card {
    margin: 1.5rem 0 2.5rem 0;
    border: 1px solid var(--links, #58a6ff);
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            rgba(88, 166, 255, 0.08) 0%,
            rgba(88, 166, 255, 0.02) 100%);
    overflow: hidden;
}
.agent-prompt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--quote-border, #30363d);
    background: rgba(88, 166, 255, 0.04);
}
.agent-prompt-head .agent-prompt-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fg, #e6edf3);
}
.agent-prompt-head .agent-prompt-sub {
    font-size: 12px;
    color: var(--icons, #8b949e);
    flex: 1;
    margin: 0 12px;
}
.agent-prompt-copy {
    background: var(--links, #58a6ff);
    color: #0d1117;
    border: 1px solid var(--links, #58a6ff);
    border-radius: 4px;
    padding: 6px 12px;
    font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 120ms;
    white-space: nowrap;
}
.agent-prompt-copy:hover { filter: brightness(1.1); }
.agent-prompt-copy.copied {
    background: #3fb950;
    border-color: #3fb950;
}
.agent-prompt-body {
    margin: 0;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fg, #e6edf3);
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 320px;
    overflow-y: auto;
}
.agent-prompt-foot {
    padding: 10px 16px;
    font-size: 12px;
    color: var(--icons, #8b949e);
    border-top: 1px solid var(--quote-border, #30363d);
}
.agent-prompt-foot a { color: var(--links, #58a6ff); }

/* Compact head on narrow screens */
@media (max-width: 600px) {
    .agent-prompt-head {
        flex-wrap: wrap;
    }
    .agent-prompt-head .agent-prompt-sub {
        flex-basis: 100%;
        margin: 0;
    }
}

/* === Brand asset tiles === */

.brand-tile {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    flex-wrap: wrap;
}
.brand-tile img {
    flex-shrink: 0;
    display: block;
    user-select: none;
}
.brand-tile-meta {
    flex: 1;
    min-width: 240px;
    font-size: 13px;
    color: var(--icons, #8b949e);
    line-height: 1.7;
}
.brand-tile-meta a {
    color: var(--links, #58a6ff);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.brand-tile-meta a:hover { text-decoration: underline; }

/* === Language toggle in the right-buttons cluster === */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    padding: 0 8px;
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
    text-decoration: none !important;
    color: var(--icons, #8b949e);
    background: transparent;
}
.lang-toggle:hover {
    color: var(--fg, #e6edf3);
    background: rgba(255, 255, 255, 0.06);
}
html.light .lang-toggle:hover,
html.rust  .lang-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
}