/**
 * Theme Toggle Component Styles
 * 
 * Styles for the light/dark mode toggle and related theme styles
 */

/* Base theme styles for body */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
}

/* Grid layout for homepage content */
.homepage-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* Header styles - maintain site-wide consistency */
.site-header {
    height: 110px; /* Increased from 80px to 100px */
    background-color: rgb(26, 26, 26); /* Change to your desired color */
    position: relative;
    z-index: 95;
}

.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Header controls positioning */
.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    top: 10px; /* Adjust vertical position while keeping X axis */
}

/* Search icon wrapper */
.search-icon-wrapper {
    position: relative;
}

/* Theme toggle component */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
}

.theme-toggle-button {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--color-toggle-background, rgba(200, 200, 200, 0.6));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    outline: none;
}

/* Light mode background for theme toggle button */
body.light-mode .theme-toggle-button {
    background-color: #ffffffc4;
}

.theme-toggle-button:hover {
    background: #fcd00aff;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Remove default focus ring on mouse click */
.theme-toggle-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Apply gold outline only when focused with keyboard */
.theme-toggle-button:focus-visible {
    box-shadow: 0 0 0 2px #fcd00aff;
    outline: none;
}

/* SVG Icon Positioning */
#light-icon,
#dark-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
}

/* Theme Toggle Mode Label */
.mode-label {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

/* Control visibility of icons based on theme */
#light-icon, #dark-icon {
    transition: opacity 0.3s ease;
}

.light-mode #light-icon {
    opacity: 0;
    visibility: hidden;
}

.light-mode #dark-icon {
    opacity: 1;
    visibility: visible;
}

.dark-mode #light-icon {
    opacity: 1;
    visibility: visible;
}

.dark-mode #dark-icon {
    opacity: 0;
    visibility: hidden;
}

.dark-mode .theme-toggle-button {
    background-color: #ffffffc4;
}

.dark-mode .theme-toggle-button:hover {
    background-color: #fcd00aff;
}

/* Light/Dark Theme Application */
body.light-mode {
    /* Light mode variables applied via CSS in colors.css */
}

body.dark-mode {
    /* Dark mode variables applied via CSS in colors.css */
}

/* Dark mode specific header background */
body.dark-mode .site-header {
    background-color: #121212ff;
}

/* Theme transition effects */
body,
.site-header,
.main-navigation,
.hero-section,
.market-ticker,
.footer,
.premium-section {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Responsive header adjustments */
@media (max-width: 768px) {
    .site-header {
        height: 90px; /* Slightly smaller on tablets but still larger than original */
    }
}

@media (max-width: 480px) {
    .site-header {
        height: 80px; /* Return to original size on mobile */
    }
}