/*
*********************************************************************************************
* File: themes.css
* Author: Madhurima Rawat
* Date: November 02, 2026
* Description: This stylesheet defines the visual themes for the "Madhurima Mindscape" blog.
*              It includes custom CSS variables for different themes such as Sunset Vibes, 
*              Ocean Breeze, Lavender Dream, and more. Each theme adjusts the color palette, 
*              backgrounds, and other UI elements to provide a personalized user experience.
*              This file allows dynamic theme switching via JavaScript.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/Madhurima-Mindscape
* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section.
* Comments:
*     - Themes are defined using CSS custom properties (variables) scoped to theme-specific classes.
*     - Each theme controls key elements: header, footer, box shadows, icon circles, and text colors.
*     - Default styles are defined in the base `body` and global element rules.
*     - Themes can be toggled using JavaScript by adding corresponding class names to the `body`.
*     - Theming supports accessibility by using strong contrast and clean color palettes.
* Dependencies:
*     - Font Awesome 5.15.4: Icon styles referenced in theme-specific elements.
*     - Bootstrap 4.6.1: Grid layout and responsive structure assumed in design.
*     - Custom JavaScript (index.js): Handles theme switching logic and interaction.
*********************************************************************************************
*/

/* ==== Default Theme Variables (used globally unless overridden by theme) ==== */
root,
body {
    --footer-color: #db4583;
    --circle-bg: #ff9a8b;
    --header-bg: linear-gradient(to right, #f8c471, #db4583, #b0e6b2);
    --circle-color: white;
    --h2-color: #db4583;
    --box-bg-color: rgba(0, 0, 0, 0.4);
    --box-bg-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    --blockquote-border: 5px solid var(--h2-color);
    --blockquote-text-shadow: none;
    --text-color: black;
    --background-color: transparent;
    --dropcap-color: var(--h2-color);
    --post-action-color: white;
    --post-action-hover: rgb(131, 131, 228);
    --post-save-color: var(--h2-color);
    --post-save-hover: black;
    --comment-box-color: #f8c471;
    --comment-box-text-color: var(--text-color);
    --error-code-highlight: var(--circle-bg);
    --error-link-color: var(--h2-color);
}

/* ==== Typography Styling ==== */
h2 {
    color: var(--h2-color);
    /* Main heading color (e.g., section titles) */
}

section h3 {
    color: var(--h2-color);
    /* Subsection heading color */
    font-weight: bold;
    /* Makes h3 stand out */
}

/* ==== Global Text Color ==== */
body {
    color: var(--text-color);
    /* Default text color for readability */
}

/* ==== Blockquote Styling ==== */
blockquote {
    border-left: var(--blockquote-border);
    /* Emphasized left border for quotes */
    color: var(--text-color);
    /* Inherits body text color */
    text-shadow: var(--blockquote-text-shadow);
}

/* ==== Path Items (Icon Cards) Styling ==== */
.path-item {
    color: white;
    /* Text inside the item */
    border: 2px solid #82898f;
    /* Subtle border */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    /* Glowing effect */
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
}

/* Ensures theme overrides apply to path-item within a section */
.path-section .path-item {
    color: white;
    box-shadow: var(--box-bg-shadow);
    background: var(--box-bg-color);
}

/* ==== Footer Section Styling ==== */
.footer-section {
    background-color: var(--footer-color);
    /* Footer background */
    color: white;
    /* Footer text color */
}

/* ==== Icon Circle Styling (inside path items) ==== */
.path-item i {
    background-color: var(--circle-bg);
    /* Icon circle background */
    color: var(--circle-color);
    /* Icon color */
}

/* ==== Header Section Styling ==== */
.header {
    background: var(--header-bg);
    /* Gradient background for header */
    background-color: var(--background-color);
}

.image-caption,
.footer-social-links a:hover {
    color: var(--text-color);
}

.image-caption:hover {
    color: var(--footer-color);
}

.post-action-btn {
    color: var(--text-color);
    border-color: var(--h2-color);
}

.post-action-btn i {
    color: inherit;
}

.post-action-btn:hover {
    color: var(--post-action-color);
    background: var(--h2-color);
    filter: drop-shadow(0 0 4px var(--post-action-hover));
}

/* Highlight saved posts with a glowing outline and no fill */
.post-action-btn.is-saved {
    color: var(--post-action-color);
    border-color: var(--post-save-color);
    background-color: var(--h2-color);
}

/* Highlight the saved icon */
.post-action-btn.is-saved:hover {
    color: var(--post-action-color);
}

.comment-panel {
    background: var(--comment-box-color);
    border-color: var(--h2-color);
    color: var(--text-color);
}

.comment-panel h3 {
    color: var(--h2-color);
}

.comment-send-btn,
.saved-read-link {
    background-color: var(--h2-color);
    color: var(--post-action-color);
}

.comment-send-btn:hover,
.saved-read-link:hover {
    background-color: color-mix(in srgb, var(--h2-color) 75%, white);
}

.saved-read-link:hover {
    color: var(--post-save-hover);
}

/* Apply the theme text color to all comment box content */
#comment-template,
#comment-name,
.comment-panel .post-action-note,
#post-comment-form label,
.comment-panel>p,
#comment-name::placeholder,
#custom-comment,
#custom-comment::placeholder,
.saved-remove-button {
    color: var(--text-color);
}

.comment-panel select,
.comment-panel select option,
.comment-panel input,
.comment-panel input::placeholder {
    color: var(--comment-box-text-color) !important;
}

.saved-empty p,
.saved-card-description,
.saved-card-date {
    color: var(--text-color);
}

.saved-explore-link {
    color: var(--h2-color);
}

.saved-explore-link:hover {
    color: color-mix(in srgb, var(--h2-color) 75%, black);
}

/* Explore the blog page */

.explore-container .explore-section h3,
.explore-card-content h4 {
    color: var(--h2-color);
}

.path-card-content p {
    color: var(--text-color);
}

.explore-read-button,
.featured-button {
    color: var(--post-action-color);
    background: var(--h2-color);
}

.path-read-button:hover,
.featured-button:hover {
    background-color: color-mix(in srgb, var(--h2-color) 75%, black);
    color: var(--post-action-color);
}

/* ==== Themes: Custom Variables for Theme Switching ==== */

/* 🌇 Sunset Vibes */
.theme-sunset-vibes {
    --footer-color: #ff7653;
    --circle-bg: #feb47b;
    --header-bg: linear-gradient(to right, #ff7e5f, #ff4e50);
    --h2-color: whitesmoke;
    --box-bg-color: #f26440;
    --post-action-color: #333;
    --comment-box-color: #FFA078;
    --error-code-highlight: #f67555;
}

/* 🌊 Ocean Breeze */
.theme-ocean-breeze {
    --footer-color: #456b84;
    --circle-bg: #eaecc6;
    --header-bg: linear-gradient(to right, #2bc0e4, #4b82a7, #eaecc6);
    --circle-color: #333;
    --h2-color: #4b82a7;
    --box-bg-color: #4b82a7;
    --box-bg-shadow: 0 0 15px rgba(236, 22, 86, 0.6);
    --blockquote-border: 5px solid #22536b;
    --dropcap-color: #22536b;
    --comment-box-color: transparent;
}

/* 🌸 Lavender Dream */
.theme-lavender-dream {
    --footer-color: #a57cf6;
    --header-bg: linear-gradient(to right, #c2a6ff, #a57cf6);
    --circle-color: beige;
    --h2-color: #954ba7;
    --box-bg-color: #a57cf6;
    --box-bg-shadow: 0 0 15px rgba(236, 22, 86, 0.6);
    --comment-box-color: transparent;
    --error-link-color: #9c70f5;
}

/* 🌌 Mysterious Night */
.theme-mysterious-night {
    --footer-color: #333333;
    --circle-bg: #d1d1d176;
    --header-bg: linear-gradient(to right, #d1d1d176, #333333);
    --h2-color: bisque;
    --box-bg-color: #333;
    --text-color: whitesmoke;
    --background-color: #333;
    --blockquote-text-shadow: 1px 2px 4px color-mix(in srgb, var(--text-color) 25%, transparent);
    --post-action-color: #333;
    --post-action-hover: whitesmoke;
    --comment-box-color: #4c454576;
    --comment-box-text-color: black;
}