:root {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6c757d;
    --accent: #d4a373;
    /* Gold/Bronze tone */
    --accent-hover: #b98a5e;
    --accent-text: #81654b;
    /* Darker/Accessible gold for text */
    --border-subtle: #e9ecef;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --container-width: 1200px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

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

/* Header */
.site-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.logo span {
    color: var(--accent);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-nav a {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-secondary);
}

.main-nav a.active {
    color: var(--accent);
}

/* Content */
.site-content {
    flex: 1;
    padding: 3rem 0;
}

/* Quote Card */
.quote-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.quote-content {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: block;
}

.quote-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}

.quote-author {
    font-weight: 600;
    color: var(--text-secondary);
}

.quote-link {
    font-size: 0.9rem;
    color: var(--accent-text);
    font-weight: 500;
}

/* Footer */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    padding: 2rem 0;
    margin-top: auto;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .logo-text {
        display: none;
    }
}

/* Quote Detail Page */
.quote-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 2rem;
}

.quote-text-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-image-panel {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    background: var(--border-subtle);
    aspect-ratio: 1;
    /* Square image */
}

.quote-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive Quote Detail */
@media (max-width: 900px) {
    .quote-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .quote-image-panel {
        order: -1;
        /* Show image first on mobile? Or second? User didn't specify, but image first is usually nice. Let's keep normal order (text first) for SEO importance, or image first for engagement. Let's do text first as requested "2 panels... right panel... image". On mobile right becomes bottom. */
        order: 1;
    }
}

/* Featured Homepage Quote */
.featured-quote {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.featured-quote .quote-content {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.featured-image-panel {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    background: var(--border-subtle);
    aspect-ratio: 1;
}

.featured-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .featured-quote {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .featured-image-panel {
        order: -1;
    }
}

/* Related Quotes Section */
.related-quotes-section {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-subtle);
}

.related-quotes-section h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.related-quotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.mini-quote-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s;
    text-decoration: none;
    height: 100%;
}

.mini-quote-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mini-quote-content {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: hidden;
}

/* Search Bar */
.search-form {
    display: flex;
    align-items: center;
    background: #f1f3f5;
    border-radius: 20px;
    padding: 0px 8px 0px 16px;
    margin-right: 1.5rem;
    transition: background 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
    height: 40px;
    /* Fixed height for consistency */
}

.search-form:focus-within {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.2);
    border-color: var(--accent);
}

.search-form input {
    border: none;
    background: transparent;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    width: 200px;
    outline: none;
}

.search-form button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}

.search-form button:hover {
    color: var(--accent);
    background: rgba(212, 163, 115, 0.1);
}

/* Search Dropdown (Progressive) */
.search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.2s;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: #f8f9fa;
    color: inherit;
    /* Prevent theme color on hover in dropdown */
}

.dropdown-item .item-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.dropdown-item .item-author {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

@media (max-width: 768px) {
    .search-form {
        margin-right: 0;
        margin-bottom: 0;
        /* Reset margin */
        flex: 1;
        /* Allow it to grow in the flex line if needed, or just stay as is */
    }

    .search-form input {
        width: 100%;
        min-width: 120px;
        /* Prevent collapsing too much */
    }
}


.mini-quote-author {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.75rem;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 4rem 0 2rem 0;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
    background: var(--bg-secondary);
}

.page-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 163, 115, 0.05);
}

.page-link.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Sharing Actions */
.share-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1.2rem;
    /* Increased spacing */
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.btn-favorite,
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    /* Squircle/Modern shape */
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    padding: 0;
}

.btn-favorite:hover,
.share-btn:hover {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-favorite.active {
    background: #e63946;
    color: white;
    border-color: #e63946;
}

.btn-favorite svg,
.share-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}