/* Theme Variables */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --text-color-secondary: #555555;
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --header-footer-bg: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Dark Theme */
body[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f1f1f1;
  --text-color-secondary: #cccccc;
  --link-color: #66b2ff;
  --link-hover-color: #99ccff;
  --header-footer-bg: #1f1f1f;
  --shadow-color: rgba(255, 255, 255, 0.1);
}

/* Green Theme */
body[data-theme="green"] {
  --bg-color: #e8f5e9;
  --text-color: #1b5e20;
  --text-color-secondary: #2e7d32;
  --link-color: #43a047;
  --link-hover-color: #66bb6a;
  --header-footer-bg: #a5d6a7;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

::selection {
  background-color: var(--link-hover-color);
  color: #ffffff;
}

::-moz-selection {
  background-color: var(--link-hover-color);
  color: #ffffff;
}   

/* Apply Colors */
body {
    font-family: "Poppins", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

html, body, p, h1, h2, h3, h4, h5, h6, 
a, span, li, input, textarea, select, button, 
.navbar, .dropdown-item {
    font-family: "Poppins", sans-serif !important;
}

.navbar, footer {
  background-color: var(--header-footer-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color);
}

header, .navbar {
    width: 100%;
    background-color: var(--header-footer-bg) !important;
}

a, .dropdown-item, .nav-link, li, p, h1,h2,h3,h4,h5,h6, span {
  color: var(--text-color) !important;
}

a:hover, .dropdown-item:hover {
  color: var(--link-hover-color) !important;
}

.navbar-nav .dropdown-menu {
  background-color: var(--header-footer-bg) !important;
}

/* Inputs/buttons for theme */
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] button {
  background-color: #1f1f1f;
  color: #f1f1f1;
  border-color: #333;
}

body[data-theme="green"] input,
body[data-theme="green"] textarea,
body[data-theme="green"] select,
body[data-theme="green"] button {
  background-color: #c8e6c9;
  color: #1b5e20;
  border-color: #2e7d32;
}

/* Blog Cards */
.blog-card {
  background-color: var(--header-footer-bg);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px var(--shadow-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.blog-card h4 { color: var(--text-color); }
.blog-card p { color: var(--text-color-secondary); }


/* Theme Switcher Buttons - make them theme aware */
/* Theme Switcher Buttons inside dropdown */
[data-theme-button] {
    background-color: var(--header-footer-bg) !important; /* theme aware bg */
    color: var(--text-color) !important;                 /* theme aware text */
    border: 1px solid var(--shadow-color) !important;   /* theme aware border */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Hover */
[data-theme-button]:hover {
    background-color: var(--shadow-color) !important;
    color: var(--text-color) !important;
}

/* Optional: make the button text bold for visibility */
[data-theme-button] {
    font-weight: 600;
}
 
 
/* PrettyPrint code wrapping */
 /* PrettyPrint styling */
pre.prettyprint {
    display: block;
    background-color: #1e1e1e;       /* dark background */
    color: #dcdcdc;                  /* text color */
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;                /* horizontal scroll if needed */
    overflow-y: hidden;
    max-width: 100%;                 /* ensure it doesn't exceed container */
    box-sizing: border-box;
    white-space: pre-wrap !important; /* wrap long lines */
    word-break: break-word;          /* break long words */
    margin: 0 0 1em 0;
}

/* Make spans inside PrettyPrint inherit wrapping */
pre.prettyprint span {
    white-space: inherit !important;
}

/* Optional: vertical scrollbar if content too tall */
pre.prettyprint::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
pre.prettyprint::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}
pre.prettyprint::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

/* Code inside pre inherits styling */
pre.prettyprint code {
    background: transparent;
    color: inherit;
    font-family: inherit;
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    pre.prettyprint {
        font-size: 13px;
        padding: 10px;
    }
}