/* Custom Styles for Sopa de Letras Generator */

/* Color Palette */
:root {
    --brand-teal: #26A69A; /* Main Teal */
    --brand-teal-dark: #004D40; /* Dark Teal for Footer */
    --brand-teal-light: #B2DFDB; /* Light Teal for Gradients/Accents */
    --brand-white: #FFFFFF;
    --brand-text-dark: #333333;
    --brand-text-light: #F5F5F5;
    --gradient-start: var(--brand-teal);
    --gradient-end: var(--brand-teal-light);
}

/* Typography */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--brand-text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure footer sticks to bottom */
}

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

.font-poppins {
    font-family: 'Poppins', sans-serif; /* Assuming Poppins is desired for logo text based on user_global memory */
}

.font-open-sans {
    font-family: 'Open Sans', sans-serif;
}

/* Backgrounds */
.bg-light-teal {
    background-color: #E0F2F1; /* A very light teal for the body background */
}

.bg-brand-teal {
    background-color: var(--brand-teal);
}

.bg-dark-teal {
    background-color: var(--brand-teal-dark);
}

.gradient-background {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

/* Header */
.navbar-brand .text-brand-dark {
    color: var(--brand-teal-dark) !important; /* Make logo text darker for contrast on white header */
}

.navbar .nav-link {
    color: var(--brand-text-dark);
    font-weight: 600;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--brand-teal);
}

.navbar-toggler {
    border-color: var(--brand-teal);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(38, 166, 154, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Theme Toggle */
.form-check-input:checked {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
}

/* Main Content & Cards */
main {
    flex-grow: 1; /* Ensure main content takes available space */
}

.card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.feature-card .card-title {
    color: var(--brand-teal);
}

/* Buttons */
.btn-primary {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
    color: var(--brand-white);
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #1E8276; /* Slightly darker teal */
    border-color: #1E8276;
}

.btn-light.text-brand-dark {
    color: var(--brand-teal) !important; /* Ensure high contrast for light buttons with teal text */
    font-weight: 600;
}

.btn-light.text-brand-dark:hover {
    background-color: #e9ecef; /* Slightly darker for hover */
}

/* Footer */
footer a:hover {
    color: var(--brand-teal-light) !important;
    text-decoration: underline;
}

footer .form-control {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--brand-white);
}

footer .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark Theme (Example - to be expanded) */
[data-bs-theme="dark"] body {
    background-color: #121212;
    color: var(--brand-text-light);
}

[data-bs-theme="dark"] .bg-white {
    background-color: #1E1E1E !important; /* Darker background for cards/header in dark mode */
}

[data-bs-theme="dark"] .navbar-brand .text-brand-dark,
[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .text-brand-dark,
[data-bs-theme="dark"] .feature-card .card-title {
    color: var(--brand-teal-light) !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link.active {
    color: var(--brand-white) !important;
}

[data-bs-theme="dark"] .card {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
}

[data-bs-theme="dark"] p, [data-bs-theme="dark"] .card-text {
    color: #cccccc; /* Lighter gray for text in dark mode */
}

[data-bs-theme="dark"] .hero-section {
    /* Adjust hero specific styles for dark mode if needed */
    color: var(--brand-text-light);
}

[data-bs-theme="dark"] .btn-light.text-brand-dark {
    background-color: var(--brand-teal-dark);
    color: var(--brand-white) !important;
    border: 1px solid var(--brand-teal);
}

[data-bs-theme="dark"] .btn-light.text-brand-dark:hover {
    background-color: var(--brand-teal);
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive adjustments if needed beyond Bootstrap defaults */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }
    .display-4 {
        font-size: 2.5rem;
    }
}

/* Word Search Grid Specific Styles */
#wordSearchGridPreview {
    display: grid;
    border: 1px solid #ccc;
    background-color: var(--brand-white);
    /* aspect-ratio will be set by JS if needed, or fixed height/width */
    overflow: auto; /* In case grid is very large */
}

.grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #eee; /* Light border for cells */
    font-weight: bold;
    text-transform: uppercase; /* Assuming uppercase is default for display */
    min-width: 20px; /* Minimum cell size */
    min-height: 20px;
    transition: background-color 0.3s ease;
}

[data-bs-theme="dark"] #wordSearchGridPreview {
    border-color: #444;
    background-color: #2a2a2a;
}

[data-bs-theme="dark"] .grid-cell {
    border-color: #3a3a3a;
    color: var(--brand-text-light);
}

/* Saved Worksheet Cards */
.saved-ws-card .card-title {
    color: var(--brand-teal);
    font-size: 1.1rem;
}

.saved-ws-card:hover {
    border-left: 3px solid var(--brand-teal);
}

[data-bs-theme="dark"] .saved-ws-card .card-title {
    color: var(--brand-teal-light);
}

[data-bs-theme="dark"] .saved-ws-card:hover {
    border-left-color: var(--brand-teal-light);
}