/* =================================================================== */
/*    PARTIAL: THEMES                                                  */
/*    Contains: Workshop (Default) and Light theme definitions.        */
/* =================================================================== */

/* ------------------- */
/*      LIGHT THEME    */
/* ------------------- */
.theme-light {
    /* Main Backgrounds */
    --smoky-black: hsl(0, 0%, 96%); /* Light Gray page background */
    --eerie-black2: hsl(0, 0%, 100%); /* White card background */
    --eerie-black1: hsl(0, 0%, 98%);
    --onyx: hsl(0, 0%, 90%);
    --jet: hsl(0, 0%, 85%);

    /* Text Colors */
    --white1: hsl(0, 0%, 25%);
    --white2: hsl(0, 0%, 20%);
    --light-gray: hsl(0, 0%, 45%);
    --light-gray70: hsla(0, 0%, 45%, .7);

    /* Accent Colors - Kept Gold for Decorative Elements (Underlines, Progress Bars) */
    --orange-yellow-crayola: hsl(45, 100%, 72%);
    --vegas-gold: hsl(45, 54%, 58%);
    --text-gradient-yellow: linear-gradient(to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));
    
    --bittersweet-shimmer: hsl(0, 43%, 51%);
    --accent-glow-color: hsla(45, 100%, 72%, 0.25);

    /* Gradients (Light backgrounds) */
    --bg-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 95%) 3%, hsl(0, 0%, 90%) 97%); /* Light gradient */
    --bg-gradient-jet: linear-gradient(to bottom right, hsla(0, 0%, 95%, .251) 3%, hsla(0, 0%, 90%, 0) 100%), hsl(0, 0%, 98%);
    --border-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 85%) 0%, hsla(0, 0%, 85%, 0) 50%);
    --bg-gradient-yellow1: linear-gradient(to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%);
    --bg-gradient-yellow2: linear-gradient(135deg, hsla(45, 100%, 71%) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(0, 0%, 98%);

    /* Map Filter */
    --mapbox-filter: grayscale(1);

    /* Navbar Background for Light Theme */
    --navbar-bg: hsla(0, 0%, 98%, .75);
    --logo-color: hsl(0, 0%, 20%);
}

.theme-light .mapbox iframe {
    filter: var(--mapbox-filter);
}

/* -------------------------- */
/*   ONE MAN'S WORKSHOP THEME   */
/* -------------------------- */
.theme-workshop {
    /* Main Backgrounds - Dark and industrial */
    --smoky-black: hsl(220, 10%, 15%); /* Page Background Color ONLY */
    --eerie-black2: hsla(220, 10%, 20%, 0.95); /* 95% opaque charcoal for a deeper feel */
    --eerie-black1: hsl(220, 10%, 22%);
    --onyx: hsl(220, 10%, 30%);
    --jet: hsl(220, 10%, 25%);

    /* Text Colors - High contrast */
    --white1: hsl(0, 0%, 98%);
    --white2: hsl(0, 0%, 100%);
    --light-gray: hsl(0, 0%, 80%);
    --light-gray70: hsla(0, 0%, 80%, .7);

    /* Accent Colors - Your Brand's Orange (#f36f21) */
    --orange-yellow-crayola: #f36f21;
    --vegas-gold: #d9631e; /* A slightly darker orange for hovers */
    --text-gradient-yellow: linear-gradient(to right, #f36f21, #e6691f);
    --bittersweet-shimmer: hsl(0, 100%, 67%); /* Red for errors */
    --accent-glow-color: hsla(22, 89%, 54%, 0.25);

    /* Gradients */
    --bg-gradient-onyx: linear-gradient(to bottom right, hsl(220, 10%, 25%) 3%, hsl(220, 10%, 22%) 97%);
    --bg-gradient-jet: linear-gradient(to bottom right, hsla(220, 10%, 22%, .5) 3%, hsla(220, 10%, 20%, 0) 100%), var(--eerie-black1);
    --border-gradient-onyx: linear-gradient(to bottom right, hsl(220, 10%, 30%) 0%, hsla(220, 10%, 30%, 0) 50%);
    --bg-gradient-yellow1: linear-gradient(to bottom right, #f36f21 0%, hsla(22, 89%, 54%, 0) 50%);
    --bg-gradient-yellow2: linear-gradient(135deg, hsla(22, 89%, 54%, .25) 0%, hsla(22, 89%, 54%, 0) 60%), var(--eerie-black1);

    /* Navbar Background */
    --navbar-bg: hsla(220, 10%, 20%, .75);

    /* Map Filter */
    --mapbox-filter: grayscale(.8) contrast(1.1);
    --logo-color: hsl(0, 0%, 98%);
}

.theme-workshop .mapbox iframe {
    filter: var(--mapbox-filter);
}

/* --- Theme-based Fixes --- */

/* Fixes for avatar backgrounds in preserved themes */
.theme-light .avatar-box,
.theme-light .testimonials-avatar-box,
.theme-light .modal-avatar-box,
.theme-workshop .avatar-box,
.theme-workshop .testimonials-avatar-box,
.theme-workshop .modal-avatar-box {
    background: var(--border-gradient-onyx);
}

/* Filter for client logos on light theme */
.theme-light .clients-item img {
  filter: invert(1);
}

/* Fix for sidebar logo toggling */
.sidebar-logo .logo-light-theme {
  display: none;
}
html.theme-light .sidebar-logo .logo-light-theme {
  display: block;
}
html.theme-light .sidebar-logo .logo-dark-theme {
  display: none;
}

/* ==========================================================================
   LIGHT THEME SPECIFIC OVERRIDES (High Contrast Text, Gold Decor)
   ========================================================================== */

/* 1. Sidebar Icons (Email, Location, etc.) -> Dark Olive */
.theme-light .icon-box {
    color: #565322; 
}

/* 2. Navbar Link Text (Active/Hover) -> Dark Olive */
/* Note: The underline uses ::after which inherits the Gold variable, so it stays Gold */
.theme-light .navbar-link:hover,
.theme-light .navbar-link.active {
    color: #565322;
}

/* 3. Headings (Catalog, Product Gallery, Post Titles) -> Dark Olive */
.theme-light .h1, 
.theme-light .h2, 
.theme-light .h3, 
.theme-light .h4, 
.theme-light .h5,
.theme-light .article-title {
    color: #565322;
}

/* 4. Sidebar Tagline "One Man, Many Tools!" -> Dark Olive */
.theme-light .info-content .title {
    color: #565322;
    border-color: #565322; /* Ensure border matches text */
}

/* 5. Catalog Category Filters (Active Text) -> Dark Olive */
.theme-light .filter-item button.active {
    color: #565322;
}

/* 6. Price/Category Text in Modal and Grid -> Dark Olive */
/* We use !important to override the inline style applied by JS in the modal */
.theme-light .project-category {
    color: #565322 !important;
}

/* 7. Buttons Text Color -> Dark Olive */
.theme-light .form-btn {
    color: #565322;
}

/* 8. Modal Close Button -> Dark Olive */
.theme-light .modal-close-btn {
    color: #565322;
    background: var(--onyx); /* Keep background light grey */
}

/* 9. Product Tags (e.g., "Fiber Laser") -> Dark Olive */
.theme-light .tech-tag {
    color: #565322 !important;
    /* Optionally ensure background allows readability */
    background: var(--onyx); 
}

/* 10. Grid Item Titles on Hover -> Dark Olive */
.theme-light .project-item > a:hover .project-title,
.theme-light .blog-post-item > a:hover .blog-item-title {
    color: #565322;
}

/* 11. Grid Item "Eye" Overlay Icon -> Dark Olive */
.theme-light .project-item-icon-box {
    color: #565322;
}