/* Custom styles for Petfolio Knowledge Base */

/* Iframe support - allow iframes to be responsive */
.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    margin: 1em 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.2rem;
}

/* Full width iframe without aspect ratio constraint */
.iframe-full {
    width: 100%;
    min-height: 600px;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.2rem;
    margin: 1em 0;
}

/* HTML content container */
.html-content {
    padding: 1em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.2rem;
    margin: 1em 0;
    background-color: var(--md-code-bg-color);
}

/* Allow raw HTML styling */
.md-typeset .raw-html {
    all: initial;
    font-family: inherit;
}

/* Mermaid diagram styling */
.mermaid {
    text-align: center;
    margin: 1em 0;
}

/* Version selector styling */
.md-version__current {
    font-weight: 500;
}

/* Custom admonition for wireframes */
.md-typeset .admonition.wireframe,
.md-typeset details.wireframe {
    border-color: rgb(68, 138, 255);
}

.md-typeset .wireframe > .admonition-title,
.md-typeset .wireframe > summary {
    background-color: rgba(68, 138, 255, 0.1);
    border-color: rgb(68, 138, 255);
}

.md-typeset .wireframe > .admonition-title::before,
.md-typeset .wireframe > summary::before {
    background-color: rgb(68, 138, 255);
    -webkit-mask-image: var(--md-admonition-icon--note);
    mask-image: var(--md-admonition-icon--note);
}