:root {
    --rave-radius: 16px;
    --rave-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

/* Smooth anchor jump (safe with sticky headers) */
.section[id] { scroll-margin-top: 80px; }

/* ================= HERO ================ */
.rave-hero {
    border-radius: var(--rave-radius);
    padding: 32px 18px;
    margin: 0 0 24px;
    box-shadow: var(--rave-shadow);
    background:
            radial-gradient(1200px 480px at 10% -10%, rgba(99,102,241,0.18), rgba(59,130,246,0.10) 40%, transparent 70%),
            linear-gradient(160deg, rgba(99,102,241,0.06), rgba(59,130,246,0.06));
    border: 1px solid var(--pst-color-border);
}
/* Beat the theme reset on containers that also have .docutils.container */
.rave-hero.docutils.container { padding-left: 16px !important; padding-right: 16px !important; }
.rave-hero .sd-col { display:flex; flex-direction:column; justify-content:center; }
.rave-hero .docutils { margin-bottom: 0 !important; }

.rave-hero-img,
.rave-hero img { width:100%; max-width:520px; height:auto; border-radius:12px; }
html[data-theme="dark"] .bd-content img.rave-hero-img { background:transparent !important; filter:none !important; }

.rave-buttons { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
@media (min-width:768px){ .rave-buttons{ flex-wrap:nowrap; } }
.rave-buttons .sd-btn { border-radius:999px; padding:10px 16px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.rave-buttons .sd-btn:hover { text-decoration:none; }

/* ================= CARDS ================ */
.rave-cards .sd-card { height:100%; margin-bottom:0 !important; }
.rave-cards .sd-col > .sd-card,
.sd-card.rave-card {
    border-radius: var(--rave-radius);
    border: 1px solid var(--pst-color-border);
    background: var(--pst-color-surface);
    box-shadow: var(--rave-shadow);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.rave-cards .sd-col > .sd-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.12);
    border-color: var(--pst-color-primary);
}
.rave-cards .sd-card-title { font-weight:700; margin-bottom:4px; font-size:.9rem; }
.rave-cards .sd-card-text { font-size:.9rem; }
.rave-cards .sd-card-body p:last-child { margin-bottom:0; }

/* ================= ADMONITIONS (Why Rave) ================ */
.admonition.rave-admonition{
    border: 1px solid var(--pst-color-border) !important;
    border-left: 4px solid var(--pst-color-primary) !important;
    border-radius: 12px;
    background: var(--pst-color-surface) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
    margin-bottom: 14px;
}
.admonition.rave-admonition > .admonition-title{
    background: transparent !important;
    border-bottom: 1px solid var(--pst-color-border);
    margin: 0;
    padding: .6rem .9rem;
    font-weight: 700;
}
/* Remove theme's pseudo icon; keep space tidy */
.bd-content .admonition.rave-admonition > .admonition-title::after,
.bd-content details.admonition.rave-admonition > summary::after {
    content: none !important;
    display: none !important;
}
.admonition.rave-admonition > .admonition-title { padding-left: .9rem !important; }
.admonition.rave-admonition > p { margin: 0; padding: .75rem .95rem 1rem; }
html[data-theme="dark"] .admonition.rave-admonition{
    background: color-mix(in srgb, var(--pst-color-primary) 4%, transparent) !important;
}
/* If you put a real FA icon inside the title, keep it aligned */
.admonition.rave-admonition > .admonition-title .fa-solid,
.admonition.rave-admonition > .admonition-title .fas {
    font-size: 1rem;
    margin-right: .5rem;
    color: var(--pst-color-primary);
    line-height: 1;
    vertical-align: -0.12rem;
    opacity: .95;
}

/* ================= ARCH IMAGE ================ */
.rave-arch{
    display:block;
    margin:8px auto 16px;
    border-radius:12px;
    border:1px solid var(--pst-color-border);
    background: var(--pst-color-surface);
    box-shadow: var(--rave-shadow);
}

/* ================= TABS ================ */
.sd-tab-set{ --rave-tab-radius:12px; margin-top:6px; }
.sd-tab-set > label.sd-tab-label{ border-radius: var(--rave-tab-radius) var(--rave-tab-radius) 0 0 !important; }
.sd-tab-set > .sd-tab-content{
    border-radius: 0 12px 12px 12px;
    border: 1px solid var(--pst-color-border);
    background: var(--pst-color-surface);
    box-shadow: var(--rave-shadow);
}

/* ================= CODE BLOCKS ================ */
.highlight pre{ border-radius:12px; padding:16px 18px; }