/* ============================================================
GLOBAL THEME VARIABLES
Maps theme.css vars to Material's CSS custom properties.
--md-primary-fg-color is set to text color (not accent) to
prevent Material bleeding purple into admonition icons.
============================================================ */
:root {
--md-primary-fg-color:          #ede8f5;
--md-primary-fg-color--light:   #d96af7;
--md-primary-fg-color--dark:    #9b2ec4;
--md-accent-fg-color:           #c53ef5;
--md-default-bg-color:          #0b0910;
--md-default-fg-color:          #ede8f5;
--md-default-fg-color--light:   #7a7090;
--md-default-fg-color--lighter: #7a7090;
--md-code-bg-color:             #110e19;
--md-code-fg-color:             #ede8f5;
}

/* ============================================================
HEADER
Left-anchored purple gradient fading to background.
============================================================ */
.md-header {
background: linear-gradient(90deg, #9900cc 0%, #0b0910 100%);
border-bottom: 1px solid rgba(197, 62, 245, 0.22);
}
.md-header__title,
.md-header__topic {
color: #ede8f5;
}

/* ============================================================
LINKS
============================================================ */
.md-typeset a {
color: #c53ef5;
}

/* ============================================================
HIGHLIGHTED TEXT  (==text== requires pymdownx.mark)
============================================================ */
.md-typeset mark {
background-color: rgba(197, 62, 245, 0.3);
color: #ede8f5;
}

/* ============================================================
BOLD TEXT
**text** → purple
**`code`** → warning red, distinguished from regular bold
============================================================ */
.md-typeset strong,
.md-typeset b,
.md-typeset dt {
color: #c53ef5;
}
.md-typeset strong code {
color: #ff5252;
font-weight: 700 !important;
font-size: 1em;
}

/* ============================================================
DETAILS / COLLAPSIBLE BLOCKS
Animations apply to all <details> blocks
============================================================ */

/* CONTENT ANIMATION TARGET */
.md-typeset details > p {
opacity: 0;
transform: translateY(-6px);
max-height: 0;
overflow: hidden;

transition:
 opacity 0.35s ease,
 transform 0.35s ease,
 max-height 0.35s ease;

will-change: opacity, transform, max-height;

user-select: none;
-webkit-user-select: none;
}

/* OPEN STATE */
.md-typeset details[open] > p {
opacity: 1;
transform: translateY(0);
max-height: 200px; /* fallback only, JS can override */
}

/* OPENING STATE */
.md-typeset details.opening > p {
opacity: 1;
transform: translateY(0);
max-height: 200px;
}

/* CLOSING STATE */
.md-typeset details.closing > p {
opacity: 0;
transform: translateY(-6px);
max-height: 0;
}

/* ============================================================
DETAILS / INFO & QUESTION BLOCK STYLING (colors, borders, hover, focus)
Specific to .info only
============================================================ */
.md-typeset details.info {
border: 1px solid rgba(197, 62, 245, 0.28) !important;
box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.12);
border-radius: 6px;
overflow: hidden;
}

.md-typeset details.info:hover {
border-color: rgba(197, 62, 245, 0.45) !important;
box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.22);
}

.md-typeset details.info:focus-within {
border-color: var(--md-accent-fg-color);
box-shadow:
 0 0 0 2px rgba(197, 62, 245, 0.35),
 0 0 12px rgba(197, 62, 245, 0.18);
}

.md-typeset details.info > summary {
background-color: rgba(197, 62, 245, 0.1) !important;
border-bottom: 1px solid rgba(197, 62, 245, 0.18) !important;
cursor: pointer;
user-select: none;
}

.md-typeset details.info > summary::before,
.md-typeset details.info > summary::after {
background-color: #c53ef5 !important;
}

.md-typeset details.question {
border: 1px solid rgba(197, 62, 245, 0.28) !important;
box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.12);
border-radius: 6px;
overflow: hidden;
}

.md-typeset details.question:hover {
border-color: rgba(197, 62, 245, 0.45) !important;
box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.22);
}

.md-typeset details.question:focus-within {
border-color: var(--md-accent-fg-color);
box-shadow:
 0 0 0 2px rgba(197, 62, 245, 0.35),
 0 0 12px rgba(197, 62, 245, 0.18);
}

.md-typeset details.question > summary {
background-color: rgba(197, 62, 245, 0.1) !important;
border-bottom: 1px solid rgba(197, 62, 245, 0.18) !important;
cursor: pointer;
user-select: none;
}

.md-typeset details.question > summary::before,
.md-typeset details.question > summary::after {
background-color: #c53ef5 !important;
}

/* ============================================================
HEADINGS AND SIDEBAR
============================================================ */
.md-typeset h1 {
color: #c53ef5; 
}

.md-sidebar {
background-color: #0b0910 !important;
}

.md-nav__link {
color: #ede8f5 !important;
}

.md-nav__link--active {
color: #c53ef5 !important;
}

.md-nav__link:hover {
color: #c53ef5 !important;
}

/* ============================================================
BASE CUSTOM BLOCK
============================================================ */
.md-typeset .custom-block {
border: 1px solid rgba(197, 62, 245, 0.28);
box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.12);
border-radius: 6px;
padding: 1em 1.2em;
margin: 1.5em 0;
background-color: rgba(11, 9, 16, 0.75);
color: var(--md-default-fg-color);
/* transition: border-color 0.3s ease, box-shadow 0.3s ease; */
}

.md-typeset .custom-block:hover {
border-color: rgba(197, 62, 245, 0.45);
box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.22);
}

.md-typeset .custom-block .block-title {
font-weight: 700;
color: #c53ef5;
margin-bottom: 0.6em;
}

/* ============================================================
CUSTOM BLOCK VARIANTS
============================================================ */

/* Info / Note */
.md-typeset .custom-block.info {
border-color: rgba(197, 62, 245, 0.28);
background-color: rgba(11, 9, 16, 0.5);
}
.md-typeset .custom-block.info .block-title {
color: #c53ef5;
}

/* Tip / Success */
.md-typeset .custom-block.tip {
border-color: rgba(96, 255, 182, 0.5);
background-color: rgba(10, 20, 15, 0.5);
}
.md-typeset .custom-block.tip .block-title {
color: #60ffb6;
}

/* Warning / Danger */
.md-typeset .custom-block.warning {
border-color: rgba(255, 82, 82, 0.5);
background-color: rgba(30, 10, 10, 0.5);
}
.md-typeset .custom-block.warning .block-title {
color: #ff5252;
}

/* Optional: smaller subtle block for inline notes */
.md-typeset .custom-block.subtle {
border-color: rgba(197, 62, 245, 0.15);
background-color: rgba(11, 9, 16, 0.3);
padding: 0.8em 1em;
font-size: 0.95em;
}

/* ============================================================
BUTTON LINKS  (.md-button override)
============================================================ */
.md-typeset .md-button {
  border: 1px solid rgba(197, 62, 245, 0.45);
  border-radius: 6px;
  color: #ede8f5 !important;
  background-color: rgba(11, 9, 16, 0.75);
  box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.12);
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.md-typeset .md-button:hover {
  border-color: rgba(197, 62, 245, 0.85);
  background-color: rgba(197, 62, 245, 0.12);
  box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.35), 0 0 12px rgba(197, 62, 245, 0.18);
  color: #ede8f5 !important;
}

.md-typeset .md-button--primary {
  border-color: #c53ef5;
  color: #c53ef5 !important;
}

.md-typeset .md-button--primary:hover {
  background-color: rgba(197, 62, 245, 0.18);
  box-shadow: 0 0 0 1px rgba(197, 62, 245, 0.55), 0 0 14px rgba(197, 62, 245, 0.22);
  color: #ede8f5 !important;
}