/**
 * GermanWords.online - Custom Simple Theme
 * Version: 4.0
 *
 * A clean, modern, and simple stylesheet to override Bootstrap 5,
 * providing a unique identity with full light and dark mode support.
 */

/* --- 1. FONT IMPORTS --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap');

/* --- 2. THEME & COLOR VARIABLES --- */
:root {
    /* Color Palette */
    --color-primary: #0D3B66; /* Deep Navy Blue */
    --color-secondary: #F4D35E; /* Soft Gold */
    --color-accent: #EE964B; /* Warm Orange */
    --color-bg-light: #F8F9FA; /* A very light gray, almost white */
    --color-text-light: #212529;

    /* Bootstrap Variable Overrides (Light Mode) */
    --bs-body-bg: var(--color-bg-light);
    --bs-body-color: var(--color-text-light);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 13, 59, 102;
    --bs-secondary: #6c757d; /* Standard muted gray for text */
    --bs-border-radius: 0.375rem; /* Standard Bootstrap rounding */
    --bs-font-sans-serif: 'Open Sans', sans-serif;
    --bs-card-bg: #FFFFFF;
    --bs-card-border-color: #dee2e6;
    --bs-tertiary-bg: #FFFFFF;
}

[data-bs-theme="dark"] {
    /* Dark Mode Palette */
    --color-bg-dark: #121212;
    --color-card-dark: #1E1E1E;
    --color-text-dark: #EAEAEA;
    
    /* Bootstrap Variable Overrides (Dark Mode) */
    --bs-body-bg: var(--color-bg-dark);
    --bs-body-color: var(--color-text-dark);
    --bs-secondary: #adb5bd;
    --bs-tertiary-bg: var(--color-card-dark);
    --bs-card-bg: var(--color-card-dark);
    --bs-card-border-color: #343a40;
    --bs-border-color: #343a40;
}

/* --- 3. TYPOGRAPHY & BASE STYLES --- */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

a {
    color: var(--bs-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent);
}

/* --- 4. BUTTONS --- */
.btn {
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
}

/* --- 5. CARDS --- */
.card {
    border: 1px solid var(--bs-card-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .card:hover {
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.card-title a {
    text-decoration: none;
}
.card-title a:hover {
    text-decoration: underline;
}

/* --- 6. FORMS --- */
.form-control:focus, .form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.25rem rgba(244, 211, 94, 0.4);
}

/* --- 7. FOOTER --- */
.site-footer {
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 2rem 0;
    margin-top: 4rem;
}

.site-footer a {
    color: var(--bs-secondary-color);
}
.site-footer a:hover {
    color: var(--bs-primary);
}

/* --- 8. UTILITIES & ICONS --- */
/* Dark/Light mode icon visibility */
.icon-moon { display: block; }
.icon-sun { display: none; }
[data-bs-theme="dark"] .icon-moon { display: none; }
[data-bs-theme="dark"] .icon-sun { display: block; }