.iframe-container {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Responsive iframe wrapper for example embeds.
   Single sizing rule: expand to the available width up to 600px,
   and to the available height between 400px and 600px. */
.example-iframe {
    display: block;
    width: min(100%, 600px);
    max-width: 600px;
    height: clamp(400px, 80vh, 600px);
    min-height: 400px;
    max-height: 600px;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
}

@media (orientation: portrait) {
    .example-iframe.square {
        height: auto;
        aspect-ratio: 1 / 1;
        min-height: 300px !important;
        max-height: none;
    }
}

/* Keep the reload button aligned to the iframe's right edge, not the container's. */
.iframe-container .iframe-reload-btn {
    right: calc(50% - min(50%, 300px) + 8px);
}

.iframe-reload-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--md-default-bg-color, #fff);
    color: var(--md-default-fg-color, #333);
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.iframe-container:hover .iframe-reload-btn {
    opacity: 0.7;
}

.iframe-reload-btn:hover {
    opacity: 1 !important;
}

/* Suppress nav transitions while restoring open sections on page load.
   Applied briefly by nav-persistence.js then immediately removed. */
.md-nav--instant-restore,
.md-nav--instant-restore * {
    transition: none !important;
    animation: none !important;
}

/* Make primary section headings in the sidebar easier to scan. */
[data-md-color-scheme="default"] .md-nav--primary>.md-nav__list>.md-nav__item--section>.md-nav__link {
    color: #1f2a44;
    font-weight: 700;
}

[data-md-color-scheme="slate"] .md-nav--primary>.md-nav__list>.md-nav__item--section>.md-nav__link {
    color: #dfe6ff;
    font-weight: 700;
}