/* --- NEW: Color Variables (Now as RGB components) --- */
:root {
    --accent-red-rgb: 255, 185, 185;
    --accent-orange-rgb: 255, 207, 181;
    --accent-yellow-rgb: 255, 227, 143;
    --accent-green-rgb: 158, 242, 164;
    --accent-cyan-rgb: 166, 243, 235;
    --accent-blue-rgb: 165, 200, 244;
    --accent-purple-rgb: 221, 176, 235;
    --accent-gray-rgb: 187, 188, 188;
    --accent-white-rgb: 255, 255, 255;
    --accent-none-rgb: 255, 255, 255; /* Will be handled by transparency */
}

body {
    /* Set the requested background color */
    background-color: #F1F2F2;
    margin: 0;
    /* REMOVED overflow: hidden to prevent clipping 3D tilt */
    cursor: default; /* Show the default cursor */
    font-family: 'Inter', Arial, sans-serif;
}
canvas {
    /* Ensure the canvas is flush against the edges */
    display: block;
    /* Make it a fixed background */
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* --- NEW: Base Glass Style --- */
/* This class ONLY handles the visual look */
.glass-panel {
    /* The Glass Effect */
    background: rgba(255, 255, 255, 0.15); /* Semi-transparent base */
    backdrop-filter: blur(12px) saturate(150%); /* The "frosted glass" effect */
    
    /* Shiny Highlight */
    background-image: linear-gradient(to top left, 
        rgba(255, 255, 255, 0.3), 
        rgba(255, 255, 255, 0.1)
    );

    /* Border and Shape */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px; /* Rounded corners */

    /* Depth and Interaction */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Make transform transition faster for a responsive feel */
    transition: box-shadow 0.2s ease-in-out, background 0.2s ease-in-out, transform 0.1s ease-out;
}

/* --- REMOVED: Glass Button Styles --- */
/* The .glass-button class and its hover/active states are no longer needed */


/* --- UPDATED: Header Style --- */
/* This class adds header-specific styles */
.app-header {
    /* It's positioned on top of the layout */
    position: absolute;
    top: 0;
    left: 0;
    right: 0; /* Full width */
    z-index: 10; /* Make sure it's on top of the layout */
    
    border-radius: 0; /* No rounded corners for a header bar */
    padding: 24px 35px; /* Your padding */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes logo and search apart */
    cursor: default; 
}

.header-logo {
    height: 35px; /* Control the logo size */
    width: auto;
}

/* NEW: Container for left-side header items */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* NEW: Mobile-only Sidebar Toggle Button */
.sidebar-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.sidebar-toggle svg {
    width: 24px;
    height: 24px;
    stroke: #302e2f;
    stroke-width: 2.5;
}

/* --- UPDATED: Search Bar Styles --- */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    /* Animated properties */
    width: 40px;
    height: 40px;
    border-radius: 20px; /* Starts as a circle */
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;

    /* Copied from .glass-panel */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(150%);
    background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    
    /* So dropdown appears correctly */
    z-index: 20; 
}

.search-input {
    height: 100%;
    width: 100%;
    border: none;
    background: transparent; /* Input is transparent */
    box-sizing: border-box;
    outline: none; /* No ugly focus ring */

    /* Font Styles */
    font-family: 'Georgia', serif;
    font-weight: normal;
    font-size: 16px;
    color: #302e2f;
    
    /* Animation */
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

/* Placeholder text style */
.search-input::placeholder {
    color: #302e2f;
    opacity: 0.7;
    font-family: 'Georgia', serif;
    font-weight: normal;
    font-style: italic;
}

.search-btn {
    height: 40px; /* UPDATED: Match container height */
    width: 40px; /* UPDATED: Match container width */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Position it over the input */
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease-in-out;
}

.search-btn svg {
    width: 20px;
    height: 20px;
    stroke: #302e2f;
    stroke-width: 2;
}

/* --- Search Bar Active State --- */
.search-container.active {
    width: 250px;
    border-radius: 8px; /* Becomes a rectangle */
}

.search-container.active .search-input {
    opacity: 1;
    padding: 0 45px 0 15px; /* Make room for icon on right */
}

/* --- NEW: Search Results Dropdown --- */
.search-results-dropdown {
    position: absolute;
    top: 50px; /* Below the search bar */
    right: 0;
    width: 250px;
    padding: 12px 24px;
    background-color: rgba(255, 255, 255, 0.92); /* 67% opacity */
    display: none; /* Hidden by default */
}

.search-result-item {
    display: block;
    font-family: 'Georgia', serif;
    color: #302e2f;
    font-size: 16px;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(48, 46, 47, 0.1);
    cursor: pointer;
    transition: transform 0.1s ease-out;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    transform: translateX(5px);
    font-weight: bold;
}
/* --- End Search Bar --- */

/* --- NEW: Page Layout System --- */
.page-layout {
    display: grid;
    /* Create a 300px sidebar and a main area that takes the rest */
    grid-template-columns: 300px 1fr;
    gap: 24px;
    
    /* Fill the screen and add padding */
    height: 100vh;
    box-sizing: border-box; /* Include padding in the 100vh */
    padding: 24px;
    /* Add top padding to clear the absolute-positioned header */
    /* Header padding (24*2) + logo (35) + gap (24) = 107 */
    padding-top: 107px; 
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto; /* Lets the sidebar scroll if it gets too full */
    background-color: #dadcdc; /* Set sidebar background to new color */
    /* Add padding to match the layout's gap */
    padding: 24px;
    /* Adjust margin to account for new padding */
    margin: -24px; 
}

/* NEW: Mobile-only Close Button (inside sidebar) */
.sidebar-close {
    display: none; /* Hidden on desktop */
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
}
.sidebar-close svg {
    width: 24px;
    height: 24px;
    stroke: #302e2f;
    stroke-width: 2.5;
}

/* NEW: Container for dynamic info boxes */
#info-box-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.main-content {
    overflow-y: auto; /* Lets the main content scroll */
}

/* --- NEW: Table of Contents Box --- */
.toc-box {
    padding: 12px 24px;
    background-color: rgba(255, 255, 255, 0.67); /* 67% opacity */
    max-width: 250px; /* Match other sidebar items */
}
.toc-link {
    display: block;
    font-family: 'Georgia', serif;
    color: #302e2f;
    font-size: 16px;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(48, 46, 47, 0.1);
    cursor: pointer;
    transition: transform 0.1s ease-out;
}
.toc-link:last-child {
    border-bottom: none;
}
.toc-link:hover {
    transform: translateX(5px);
    font-weight: bold;
}
.toc-box h3 { /* Title for the TOC */
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-weight: bold;
    color: #302e2f;
    margin: 0 0 10px 0;
    text-align: center;
}
/* --- End TOC Box --- */


/* --- UPDATED: Info Box Styles --- */
/* This class adds info-box-specific styles */
.info-box {
    padding: 12px 24px;
    max-width: 250px;
    cursor: pointer; /* Add cursor pointer back for tilt */
    background-color: rgba(255, 255, 255, 0.67); /* 67% opacity */
    
    /* NEW: Set default accent color to white */
    --info-accent-rgb: var(--accent-white-rgb);
}

/* NEW: Rules to set accent color based on data-color attribute */
.info-box[data-color="red"]    { --info-accent-rgb: var(--accent-red-rgb); }
.info-box[data-color="orange"] { --info-accent-rgb: var(--accent-orange-rgb); }
.info-box[data-color="yellow"] { --info-accent-rgb: var(--accent-yellow-rgb); }
.info-box[data-color="green"]  { --info-accent-rgb: var(--accent-green-rgb); }
.info-box[data-color="cyan"]   { --info-accent-rgb: var(--accent-cyan-rgb); }
.info-box[data-color="blue"]   { --info-accent-rgb: var(--accent-blue-rgb); }
.info-box[data-color="purple"] { --info-accent-rgb: var(--accent-purple-rgb); }
.info-box[data-color="gray"]   { --info-accent-rgb: var(--accent-gray-rgb); }
.info-box[data-color="white"]  { --info-accent-rgb: var(--accent-white-rgb); }
.info-box[data-color="none"]   { --info-accent-rgb: var(--accent-none-rgb); }
.info-box[data-color="default"] { --info-accent-rgb: var(--accent-white-rgb); }


/* NEW: Rule to tint the *entire box* if it's .info-box-tinted */
.info-box.info-box-tinted {
    background-color: rgba(var(--info-accent-rgb), 0.35);
}
/* Keep default/none/white tints as the standard white glass */
.info-box.info-box-tinted[data-color="default"],
.info-box.info-box-tinted[data-color="white"],
.info-box.info-box-tinted[data-color="none"] {
    background-color: rgba(255, 255, 255, 0.67); /* 67% opacity */
}


.info-box-title {
    /* Center the title */
    text-align: center;
    margin: 0 0 10px 0; /* Space below the title */
}

/* NEW class for the main title text */
.info-box-title-text {
    display: block; /* So it takes its own line */
    font-size: 16px;
    font-weight: bold;
    font-family: 'Georgia', serif;
    color: #302e2f;
    /* --- Properties for the blur effect --- */
    position: relative; /* To position the ::before pseudo-element */
    isolation: isolate; /* To create a new stacking context */
}

.info-box-content {
    /* Use the button's font, but not bold */
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    color: #302e2f;
}

/* NEW: Make .info-box-content styles apply to children */
.info-box-content p,
.info-box-content ul {
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 10px 0;
    color: #302e2f;
}
.info-box-content ul {
    padding-left: 20px;
}
 .info-box-content li {
    margin-bottom: 5px;
}
/* NEW: Remove bottom margin from stat rows */
.info-box-content p.info-stat-row {
    margin-bottom: 8px;
}
.info-box-content p:last-child {
    margin-bottom: 0;
}

/* --- NEW: Key-Value Pair Styles --- */
.info-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px; /* Ensure p styling is overridden */
    font-family: 'Georgia', serif;
    color: #302e2f;
}
.info-key {
    font-weight: bold;
    padding-right: 10px; /* Space between key and value */
    text-align: left;
    white-space: nowrap; /* Keep key from wrapping */
}
.info-value {
    text-align: left;
    word-break: break-word; /* Allow long values to wrap */
}
/* --- End Key-Value Styles --- */


/* New class for the subtitle */
.info-box-subtitle {
    display: block; /* Puts it on its own line */
    font-style: italic;
    font-weight: normal; /* Overrides the 'bold' from the parent */
    font-size: 16px; /* Matches the title size */
    margin-top: 8px; /* Adds a little space */
    font-family: 'Georgia', serif;
    color: #302e2f;
    /* --- New properties for the blur effect --- */
    position: relative; /* To position the ::before pseudo-element */
    isolation: isolate; /* To create a new stacking context */
}

/* This is the new SHARED blurred color box */
.info-box-title-text::before,
.info-box-subtitle::before {
    content: '';
    position: absolute;
    /* Inset by a few pixels so the blur doesn't hit the edges hard */
    inset: 2px 0px; 
    background: rgb(var(--info-accent-rgb)); /* UPDATED: Use RGB variable */
    /* The blur effect */
    filter: blur(8px);
    opacity: 0.6; /* Make it a bit subtle */
    /* Put it behind the text */
    z-index: -1;
    /* Soften the edges of the blur source */
    border-radius: 4px; 
}

/* NEW: Special rule for "none" color to hide blur */
.info-box[data-color="none"] .info-box-title-text::before,
.info-box[data-color="none"] .info-box-subtitle::before {
    background: transparent;
}


/* --- UPDATED: Article Box Styles --- */
/* This is no longer a glass panel, just a content area */
.article-box {
    padding: 24px 24px 24px 48px; /* Added more left padding */
    /* You can add a max-width if you like, for readability */
    max-width: 900px;
}
/* These styles will be applied to the HTML generated from Markdown */
.article-box h1 {
    font-family: 'Georgia', serif;
    color: #302e2f;
    margin-top: 0;
    border-bottom: 1px solid rgba(48, 46, 47, 0.2);
    padding-bottom: 10px;
}
/* NEW: Style for subsections */
.article-box h2 {
    font-family: 'Georgia', serif;
    color: #302e2f;
    margin-top: 24px;
    border-bottom: 1px solid rgba(48, 46, 47, 0.1);
    padding-bottom: 5px;
}
.article-box p {
    font-family: 'Inter', Arial, sans-serif; /* Use standard font */
    color: #302e2f;
    line-height: 1.6;
    font-size: 16px;
}
/* NEW: Style for lists */
.article-box ul {
    font-family: 'Inter', Arial, sans-serif;
    color: #302e2f;
    line-height: 1.6;
    font-size: 16px;
    padding-left: 30px;
}
.article-box li {
    margin-bottom: 8px;
}

/* --- NEW: Article Table Styles --- */
.article-box table {
    width: 100%;
    border-collapse: separate; /* Allows for border-radius on cells */
    border-spacing: 0;
    margin: 20px 0;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Clips the thead to the radius */
}
.article-box th {
    /* Apply glass theme to header */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    font-family: 'Georgia', serif;
    color: #302e2f;
    padding: 12px 15px;
    text-align: left;
}
.article-box td {
    font-family: 'Inter', Arial, sans-serif;
    color: #302e2f;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.3); /* Slightly whiter than bg */
    border-bottom: 1px solid rgba(48, 46, 47, 0.1);
}
.article-box tr:last-child td {
    border-bottom: none; /* No border on last row */
}

/* --- NEW: Article Link Styles --- */
.article-box a {
    color: #0056b3; /* A standard link-blue */
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s ease;
}
.article-box a:hover {
    color: #003d80; /* Darker blue on hover */
}

/* --- NEW: Article Image Styles --- */
.article-box img,
.info-box-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- NEW: Audio Link Styles --- */
a.audio-link {
    position: relative;
    padding-left: 22px; /* Make room for icon */
    cursor: pointer;
    color: #0056b3; /* Match other links */
}
a.audio-link:hover {
    color: #003d80;
}
.audio-link-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: #0056b3;
}
a.audio-link:hover .audio-link-icon {
    fill: #003d80;
}
/* Style for when audio is playing */
a.audio-link.playing .audio-link-icon {
    fill: #d93030; /* Red when playing */
}

/* --- NEW: Glass Audio Player Styles --- */
.audio-player-container {
    padding: 15px;
    margin: 20px 0;
}
.audio-player-container audio {
    width: 100%;
}

/* --- NEW: Custom Font Span --- */
/* This is a fallback, but style is applied inline by JS */
.custom-font {
    font-feature-setting: "liga" 0; /* Disables ligatures just in case */
}

/* --- NEW: Sidebar Overlay --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* --- NEW: Mobile Responsive Styles --- */
@media (max-width: 1024px) {
    .sidebar-toggle {
        display: flex; /* Show hamburger button */
    }

    .page-layout {
        grid-template-columns: 1fr; /* Single column layout */
        padding-top: 95px; /* Adjust for smaller header padding */
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh; /* Full height */
        width: 300px;
        max-width: 80%; /* Don't take up full screen */
        z-index: 100;
        margin: 0; /* Reset desktop margin */
        padding: 24px;
        box-sizing: border-box; /* Include padding in width/height */
        
        /* Hide sidebar by default */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    .sidebar.open {
        transform: translateX(0); /* Slide in */
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }

    .sidebar-close {
        display: block; /* Show 'X' button */
    }

    /* Adjust header for mobile */
    .app-header {
        padding: 15px 20px;
    }
}