/* Custom CSS for MkDocs Material Theme - Intelligent Textbooks */
/* Understanding Dementia - Custom Color Theme */
/* Color palette derived from cover artwork - see docs/learning-graph/color-theme.md */

/* ============================================
   COLOR THEME VARIABLES
   ============================================
   Complete color system for Understanding Dementia textbook
*/

:root {
    /* Primary Blues */
    --color-primary: #4A5FBF;
    --color-primary-light: #9BA8E3;
    --color-primary-mid: #6B7FD7;
    --color-primary-dark: #2B3E7E;
    --color-primary-sky: #B8C5F2;

    /* Secondary Purples */
    --color-secondary: #7B6BB8;
    --color-secondary-light: #C8B8E8;
    --color-secondary-dark: #8E7BA8;

    /* Accent Colors */
    --color-accent-yellow: #F9D76A;
    --color-accent-pink: #C87B9A;
    --color-accent-coral: #E89B7E;
    --color-accent-soft-coral: #F4B89E;

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-off-white: #F9F7F4;
    --color-cream: #F2EFE9;
    --color-beige: #E8D8C4;
    --color-sand: #D4B896;
    --color-gray-light: #E5E5E8;
    --color-gray-medium: #8B8B95;
    --color-gray-dark: #3A3A44;

    /* Semantic Colors */
    --color-text-primary: var(--color-gray-dark);
    --color-text-secondary: var(--color-gray-medium);
    --color-text-heading: var(--color-primary-dark);
    --color-link: var(--color-primary-mid);
    --color-link-hover: var(--color-primary);
    --color-link-visited: var(--color-secondary);

    --color-background: var(--color-white);
    --color-background-alt: var(--color-off-white);
    --color-background-accent: var(--color-cream);

    --color-border: var(--color-gray-light);
    --color-border-focus: var(--color-primary);

    --color-success: var(--color-primary-mid);
    --color-info: var(--color-primary-mid);
    --color-warning: var(--color-accent-yellow);
    --color-care: var(--color-accent-pink);
    --color-support: var(--color-accent-coral);

    /* MkDocs Material Theme Integration */
    --md-primary-fg-color: var(--color-primary);  /* Royal Blue */
    --md-primary-fg-color--light: var(--color-primary-light);  /* Periwinkle */
    --md-primary-fg-color--dark: var(--color-primary-dark);  /* Navy Blue */
    --md-accent-fg-color: var(--color-accent-yellow);  /* Sunshine Yellow */

    /* Additional Material theme colors */
    --md-typeset-a-color: var(--color-link);
    --md-code-bg-color: var(--color-off-white);
}

/* ============================================
   HEADER LOGO SIZING
   ============================================
*/

.md-header__button.md-logo {
    margin: 0;
    padding: 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 50px;
    width: 50px;
}

/* ============================================
   IFRAME CONTAINER FOR MICROSIMS
   ============================================
*/

.iframe-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

iframe {
    width: 100%;
    border: solid 2px var(--md-primary-fg-color);
}

/* ============================================
   LIST STYLING UTILITIES
   ============================================
   Use <div class="upper-alpha" markdown> to wrap ordered lists
   for A, B, C, D styling. Requires md_in_html extension.
*/

.upper-alpha ol {
    list-style-type: upper-alpha;
}

.lower-alpha ol {
    list-style-type: lower-alpha;
}

.upper-roman ol {
    list-style-type: upper-roman;
}

.lower-roman ol {
    list-style-type: lower-roman;
}

/* ============================================
   PROMPT ADMONITION WITH COPY BUTTON
   ============================================
   For copyable prompt blocks. Usage:
   !!! prompt "Prompt Title"
       Your prompt text here
*/

.admonition.prompt {
    position: relative;
}

.admonition.prompt .copy-button {
    position: absolute;
    top: 4px;
    right: 6px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 0.3rem 0.3rem;
    cursor: pointer;
    font-size: 0.7rem;
}

.admonition.prompt .copy-button:hover {
    background-color: var(--color-primary-dark);
}

/* ============================================
   CUSTOM ADMONITION COLORS
   ============================================
*/

/* Example admonition (Cornflower Blue) */
.md-typeset .admonition.example,
.md-typeset details.example {
    border-color: var(--color-primary-mid);
}

.md-typeset .example > .admonition-title,
.md-typeset .example > summary {
    background-color: rgba(107, 127, 215, 0.1);
}

.md-typeset .example > .admonition-title::before,
.md-typeset .example > summary::before {
    background-color: var(--color-primary-mid);
}

/* Exercise admonition (Purple-Blue) */
.md-typeset .admonition.exercise,
.md-typeset details.exercise {
    border-color: var(--color-secondary);
}

.md-typeset .exercise > .admonition-title,
.md-typeset .exercise > summary {
    background-color: rgba(123, 107, 184, 0.1);
}

.md-typeset .exercise > .admonition-title::before,
.md-typeset .exercise > summary::before {
    background-color: var(--color-secondary);
}

/* Tip admonition (Sunshine Yellow) */
.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-color: var(--color-accent-yellow);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
    background-color: rgba(249, 215, 106, 0.15);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
    background-color: var(--color-accent-yellow);
}

/* Care admonition (Rose Pink) */
.md-typeset .admonition.care,
.md-typeset details.care {
    border-color: var(--color-accent-pink);
}

.md-typeset .care > .admonition-title,
.md-typeset .care > summary {
    background-color: rgba(200, 123, 154, 0.1);
}

.md-typeset .care > .admonition-title::before,
.md-typeset .care > summary::before {
    background-color: var(--color-accent-pink);
}

/* Support admonition (Coral) */
.md-typeset .admonition.support,
.md-typeset details.support {
    border-color: var(--color-accent-coral);
}

.md-typeset .support > .admonition-title,
.md-typeset .support > summary {
    background-color: rgba(232, 155, 126, 0.1);
}

.md-typeset .support > .admonition-title::before,
.md-typeset .support > summary::before {
    background-color: var(--color-accent-coral);
}

/* ============================================
   GRADIENT UTILITIES
   ============================================
*/

.gradient-sky {
    background: linear-gradient(180deg,
        var(--color-primary-sky) 0%,
        var(--color-primary-light) 50%,
        var(--color-primary) 100%);
}

.gradient-purple-blue {
    background: linear-gradient(135deg,
        var(--color-secondary-light) 0%,
        var(--color-secondary) 50%,
        var(--color-primary) 100%);
}

.gradient-subtle {
    background: linear-gradient(180deg,
        var(--color-off-white) 0%,
        var(--color-beige) 100%);
    opacity: 0.5;
}

/* ============================================
   SHADOW UTILITIES
   ============================================
*/

.shadow-subtle {
    box-shadow: 0 2px 4px rgba(43, 62, 126, 0.08);
}

.shadow-medium {
    box-shadow: 0 4px 8px rgba(43, 62, 126, 0.12);
}

.shadow-strong {
    box-shadow: 0 8px 16px rgba(74, 95, 191, 0.15);
}

.shadow-glow {
    box-shadow: 0 0 12px rgba(249, 215, 106, 0.6);
}

/* ============================================
   CARD STYLING
   ============================================
*/

.card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 8px rgba(43, 62, 126, 0.12);
}

.card-featured {
    background: linear-gradient(180deg, var(--color-off-white) 0%, var(--color-white) 100%);
    border: 2px solid var(--color-primary);
    box-shadow: 0 8px 16px rgba(74, 95, 191, 0.15);
}

.card-info {
    background: var(--color-cream);
    border-left: 4px solid var(--color-primary-mid);
}

.card-tip {
    background: rgba(249, 215, 106, 0.1);
    border-left: 4px solid var(--color-accent-yellow);
}

.card-care {
    background: rgba(200, 123, 154, 0.05);
    border-left: 4px solid var(--color-accent-pink);
}

.card-support {
    background: rgba(232, 155, 126, 0.05);
    border-left: 4px solid var(--color-accent-coral);
}

/* ============================================
   BUTTON STYLING
   ============================================
*/

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: var(--color-primary-mid);
    color: var(--color-white);
}

.btn-accent {
    background-color: var(--color-accent-pink);
    color: var(--color-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-accent:hover {
    opacity: 0.9;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================
*/

@media screen and (max-width: 76.1875em) {
    /* Adjustments for tablet and smaller */
    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        height: 40px;
        width: 40px;
    }
}

@media screen and (max-width: 600px) {
    /* Adjustments for mobile */
    iframe {
        height: 400px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================
*/

@media print {
    .md-header,
    .md-sidebar,
    .md-footer {
        display: none;
    }

    .md-content {
        margin: 0;
        padding: 1rem;
    }
}

/* ============================================
   COLOR THEME REFERENCE
   ============================================
   For complete color palette documentation, see:
   docs/learning-graph/color-theme.md

   This includes:
   - Complete color specifications with hex and RGB values
   - Typography color pairings
   - Chapter-specific color coding
   - Learning graph colors
   - Accessibility guidelines (WCAG 2.1 AA compliance)
   - Color blindness considerations
   ============================================
*/