/* MEDICINE WHEEL PALETTE - ACCESSIBILITY TUNED */
:root {
    /* Background Colors (Vibrant) */
    --bg-red: #C62828;     /* Deep Red */
    --bg-yellow: #FFD600;  /* Bright Yellow (Use BLACK text on this) */
    --bg-black: #121212;   /* True Black */
    --bg-white: #FFFFFF;   /* Pure White */
    --bg-water: #004D40;   /* Deep Teal (Use WHITE text on this) */

    /* Text Colors (High Contrast on White) */
    --text-red: #B71C1C;    /* Darker Red for text readability */
    --text-yellow: #827717; /* Dark Ochre/Olive for text readability (Pure yellow is unreadable on white) */
    --text-black: #000000;  /* Pure Black */
    --text-water: #004D40;  /* Deep Teal */
    --text-main: #111111;   /* High Contrast Body Copy */
}

body {
    font-family: 'Lato', sans-serif;
    background-color: #FAFAFA;
    color: var(--text-main);
    overflow-x: hidden;
    /* Subtle texture instead of gradient to keep contrast high */
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}

h1, h2, h3, h4 {
    font-family: 'Cinzel', serif;
    font-weight: 900; /* Maximum weight for headers */
}

    /* Utility Classes for Colors */
    .text-mw-red { color: var(--text-red); }
    .text-mw-yellow { color: var(--text-yellow); }
    .text-mw-black { color: var(--text-black); }
    .text-mw-water { color: var(--text-water); }

    .bg-mw-red { background-color: var(--bg-red); color: white; }
    .bg-mw-yellow { background-color: var(--bg-yellow); color: black; } /* CRITICAL: Yellow bg gets black text */
    .bg-mw-black { background-color: var(--bg-black); color: white; }
    .bg-mw-water { background-color: var(--bg-water); color: white; }
    .bg-mw-white { background-color: white; color: black; }

    .border-mw-red { border-color: var(--bg-red); }
    .border-mw-yellow { border-color: var(--bg-yellow); }
    .border-mw-black { border-color: var(--bg-black); }

/* CSS Medicine Wheel Graphic - High Contrast Borders */
.medicine-wheel {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid black; /* Black border for definition */
    position: relative;
    overflow: hidden;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    background: white;
}
.mw-quadrant {
    width: 50%;
    height: 50%;
    position: absolute;
}
.mw-north { top: 0; left: 0; background-color: white; border-right: 2px solid black; border-bottom: 2px solid black; }
.mw-east { top: 0; right: 0; background-color: var(--bg-yellow); border-bottom: 2px solid black;}
.mw-south { bottom: 0; right: 0; background-color: var(--bg-red); border-left: 2px solid black;}
.mw-west { bottom: 0; left: 0; background-color: var(--bg-black); }

/* Chart Container Styling */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    max-height: 400px;
}

@media (min-width: 768px) {
    .chart-container {
        height: 400px;
    }
}

/* Timeline Styling */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--bg-black);
    transform: translateX(-50%);
}

/* Smooth Scroll */
html { scroll-behavior: smooth; }

/* Focus states for accessibility */
a:focus {
    outline: 3px solid var(--text-water);
    outline-offset: 2px;
}