/* Chortle v5.3 - Base Styles */
/* Reset, typography, layout fundamentals, and basic components */

/* Chortle v5.2 - Clean Modern Design with New Color Palette */

/* Force light mode for form elements in Safari - aggressive approach */
:root {
    color-scheme: light only;
}

/* Ensure form elements stay consistent - override everything */
input, textarea, select, button,
.step-input, .search-input, .link-input {
    color-scheme: light only !important;
    -webkit-color-scheme: light !important;
}

/* Disable automatic dark mode entirely */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light only;
    }

    input, textarea, select, button {
        color-scheme: light only !important;
        -webkit-color-scheme: light !important;
    }
}

html {
    min-height: 100%;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-image: url('../assets/icons/chortle-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 100vh;
    color: #2D3748; /* Dark gray text */
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: #28a745;
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
}

.toast-notification.toast-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification.toast-success {
    background: #28a745;
}

.toast-notification.toast-error {
    background: #fc8181;
}

/* Layout */
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
    color: white;
    animation: fadeInDown 0.8s ease-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.header.center-only {
    justify-content: center;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header .logo {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header .wordmark {
    max-height: 60px;
    width: auto;
    margin-bottom: 10px;
}

/* Smaller wordmark when header has navigation */
.header:not(.center-only) .wordmark {
    max-height: 40px;
    margin-bottom: 0;
}

.header p {
    font-size: 1.1em;
    opacity: 0.95;
    font-weight: 400;
    color: white;
}

.simple-intro {
    text-align: center;
    color: white;
    font-size: 1em;
    opacity: 0.9;
    margin-bottom: 30px;
    font-weight: 400;
}

/* Page System */
.page {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0px 228px 20px 0px rgba(69, 25, 123, 0.01),
                0px 146px 58px 0px rgba(69, 25, 123, 0.04),
                0px 82px 49px 0px rgba(69, 25, 123, 0.14),
                0px 36px 36px 0px rgba(69, 25, 123, 0.23),
                0px 9px 20px 0px rgba(69, 25, 123, 0.27);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.8s ease-out;
    flex: none;
    display: none;
    position: relative;
}

.page.active {
    display: block;
}

.reading-view {
    display: none;
}

.reading-view.active {
    display: block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Template Selection */
.template-selector h2 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #2D3748;
    font-size: 1.8em;
    font-weight: 700;
    text-align: center;
}

.template-search {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid rgba(45, 55, 72, 0.2);
    border-radius: 15px;
    font-size: 1em;
    font-family: 'Outfit', sans-serif;
    background: rgba(255, 255, 255, 0.9);
    color: #2D3748;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: #00BBF9;
    box-shadow: 0 0 0 3px rgba(0, 187, 249, 0.1);
}

.template-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.category-btn {
    padding: 12px 20px;
    border: 2px solid rgba(0, 187, 249, 0.3);
    background: rgba(0, 187, 249, 0.2); /* Updated to blue instead of cream */
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9em;
    color: #2D3748;
    font-weight: 500;
}

.category-btn:hover {
    background: rgba(0, 187, 249, 0.3);
    transform: translateY(-2px);
}

.category-btn.active {
    background: #00BBF9;
    color: white;
    transform: translateY(-2px);
}

.template-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.template-btn {
    padding: 25px;
    border: 2px solid #00BBF9;
    background: rgba(0, 187, 249, 0.2); /* Sky blue with 20% opacity */
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Outfit', sans-serif;
    font-size: 1em;
    text-align: left;
    color: #2D3748;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.template-btn:hover {
    background: rgba(0, 187, 249, 0.3); /* Slightly more opaque on hover */
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 187, 249, 0.15);
}

.template-btn-title {
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 8px;
    color: #2D3748;
}

.template-btn-desc {
    font-size: 0.95em;
    opacity: 0.85;
    line-height: 1.4;
    color: #2D3748;
}

.templates-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}