/* ================================================================
   mushrooms.css — Styling for the Nutriofia Mushroom Hub
   ================================================================ */

:root {
    /* 🌞 Light Theme */
    --bg-color: #fdfbf7;      
    --text-color: #3e2723;    
    --card-bg: #ffffff;       
    --card-border: #d7ccc8;   /* Slightly darker tan for thicker border */
    --accent-color: #6d4c41;  /* Darker brown for muted text */
    --ad-panel-bg: #f4f0e6;   
    --table-border: #d7ccc8;
}

[data-theme="dark"] {
    /* 🌙 Dark Theme (High Contrast) */
    --bg-color: #1e1412;      /* Very dark brown/black background */
    --text-color: #ffffff;    /* Pure white for headings and main text */
    --card-bg: #2c1e1c;       /* Distinct dark card background */
    --card-border: #795548;   /* Noticeable brown border */
    --accent-color: #e8dfdb;  /* Bright cream for muted/secondary text */
    --ad-panel-bg: #241816;   
    --table-border: #5c433e;
}

/* Base Application */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography & Links */
h1, h2, h3, h4, h5, h6 {

}
.text-muted {
    color: var(--accent-color) !important;
}

/* Card Styling - Now with Thicker Borders */
.mushroom-card {
    background-color: var(--card-bg);
    border: 3px solid var(--card-border); /* Thicker border as requested */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Also update the hover effect for your toggle button if it used it */
.theme-toggle-btn:hover {
    background-color: var(--ad-panel-bg);
}

/* Rename this from .ad-panel to .promo-panel to bypass adblockers */
.promo-panel {
    background-color: var(--ad-panel-bg);
    border: 3px dashed var(--card-border); 
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-color);
}



/* Table Styling */
.table {
    color: var(--text-color);
    border-color: var(--table-border);
}
.table thead th {
    border-bottom: 2px solid var(--table-border);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 2px solid var(--card-border);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}
.theme-toggle-btn:hover {
    background-color: var(--ad-panel-bg);
}
/* Force Mushroom Card Titles to be white in Dark Mode */
[data-theme="dark"] .mushroom-card h3.card-title.h5 {
    color: #ffffff !important;
}