/* Base styles */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Vendetta", serif;
    background-color: #f7f5f0;
    color: #1e1e1e;
    overflow-x: hidden;
}

/* Border overlay that sits above content, consistent with main site */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0.5vw solid #1e1e1e;
    pointer-events: none;
    z-index: 1002;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    body::after {
        border-width: 1vw;
    }
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 40px;
}

/* Header and Navigation */
.top-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Changed from flex to grid with equal side columns */
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #1e1e1e;
    margin-bottom: 40px;
    z-index: 1003;
}

.nav-title h1 {
    margin: 0;
    font-size: 2.5rem;
    text-align: center;
    color: #1e1e1e;
    white-space: nowrap; /* Prevent wrapping */
}

.nav-left {
    justify-self: start; /* Align to left */
}

.nav-right {
    justify-self: end; /* Align to right */
}

.nav-left a, .nav-right a {
    color: #1e1e1e;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.nav-left a:hover, .nav-right a:hover {
    color: #666;
}

/* Featured poem section */
.featured-poem-section {
    margin-bottom: 60px;
}

.featured-poem-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #1e1e1e;
}

/* Fixed poem display and control layout */
.poem-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 500px; /* Ensure consistent height to prevent jumping */
}

.poem-container {
    width: 100%;
    max-width: 600px; /* Reduced from 800px */
    height: auto;
    min-height: 450px; /* Reduced from 600px */
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden;
    flex-grow: 1; /* Allow it to grow within the display container */
}

.poem-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer; /* Indicate it's clickable */
    transition: transform 0.2s ease;
}

.poem-image:hover {
    transform: scale(1.02);
}

/* Fixed Controls positioning for poem display */
.poem-controls {
    display: flex;
    gap: 40px; /* Increased gap with removed button */
    margin-top: 20px;
    position: absolute; /* Position absolutely */
    bottom: -5px; /* Position at the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center adjustment */
    z-index: 5; /* Ensure it's above other content */
}

/* Archive section */
.poem-archive {
    margin-top: 80px;
}

.poem-archive h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #1e1e1e;
        /* Center text for text poems in the lightbox */
    }
    .poem-content {
        text-align: center;
        margin: 0 auto;
        max-width: 600px;
        line-height: 1.7;
}

/* Alphabet index */
.alphabet-index {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    padding: 15px;
    background-color: #f0efe9;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.alphabet-index a {
    display: inline-block;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background-color: #1e1e1e;
    color: #ffffd2;
    text-decoration: none;
    border-radius: 50%;
    font-weight: bold;
    transition: all 0.2s ease;
}

.alphabet-index a:hover {
    background-color: #333;
    transform: scale(1.1);
}

/* Letter sections in archive */
.letter-section {
    margin-bottom: 50px;
}

.letter-section h3 {
    font-size: 2rem;
    color: #1e1e1e;
    border-bottom: 2px solid #1e1e1e;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.poem-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.poem-item {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.poem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.poem-item a {
    color: #1e1e1e;
    text-decoration: none;
    display: block;
    font-size: 1.1rem;
    padding: 8px;
    text-align: center;
}

/* Poem date display */
.poem-date {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
    display: block;
}

/* Hide dates in featured poem section */
.poem-container .poem-date {
    display: none;
}

/* Lightbox styles */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1010;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    padding-bottom: 40px; /* Reduced from 60px to 40px since we moved the button up */
}

#lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border: 2px solid #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.close-lightbox {
    position: absolute;
    top: -40px;
    right: -40px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    transition: background 0.2s;
}

.close-lightbox:hover {
    background: rgba(255,255,255,0.2);
}

/* Sorting Controls */
.sort-controls {
    margin: 20px 0 40px; /* Reduced top margin */
    padding: 20px;
    background-color: #f0efe9;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sort-controls h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: #1e1e1e;
}

/* Add proper styling for the dropdown */
.sort-dropdown {
    width: 250px;
    padding: 10px 15px;
    border: 2px solid #1e1e1e;
    border-radius: 4px;
    background-color: white;
    color: #1e1e1e;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231e1e1e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    padding-right: 35px;
}

.sort-dropdown:focus {
    outline: none;
    border-color: #444;
    box-shadow: 0 0 0 2px rgba(30,30,30,0.2);
}

/* When alphabet-index is visible, add spacing above sort controls */
.alphabet-index + .sort-controls {
    margin-top: 40px;
}

/* Hide old sort buttons */
.sort-buttons {
    display: none;
}

/* Text poem styles */
.poem-text-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 20px;
    text-align: center;
    background-color: #f8f8f2;
    transition: background-color 0.2s ease;
}

.poem-text-preview:hover {
    background-color: #f0f0e8;
}

.poem-text-preview h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.poem-preview-message {
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
}

/* Center the text poem in lightbox */
.lightbox-text {
    display: none;
    max-width: 800px;
    min-width: 600px; /* Added minimum width for better text display */
    max-height: 80vh;
    overflow-y: auto;
    background-color: #fff;
    padding: 30px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    border-radius: 4px;
    text-align: left;
    line-height: 1.6;
    width: 65%; /* Added width as percentage of viewport */
    margin: 0 auto; /* Center horizontally */
}

.lightbox-text h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.poem-content {
    font-size: 1.1rem;
    white-space: pre-wrap;
}

/* Poem content stanza styling */
.poem-content p.stanza {
    margin-bottom: 0em; /* Tighter space between stanzas */
    margin-top: 0em;
}




.poem-metadata {
    text-align: right;
    font-style: italic;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 20px;
}

/* Text poem indicator in archive */
.text-poem-icon {
    margin-right: 8px;
    font-size: 0.9em;
}

.text-poem {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style poem rotation buttons */
.control-btn {
    background-color: #1e1e1e;
    color: #ffffd2;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.control-btn:hover {
    background-color: #333;
    transform: scale(1.1);
}

.control-btn:active {
    transform: scale(0.95);
}

/* Sticky notes styling - UPDATED POSITION */
.sticky-notes {
    position: absolute; 
    bottom: -30px; /* Changed from -50px to -30px to move it up */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1020;
    width: auto;
    max-width: 600px;
    background: transparent;
}

.notes-toggle-btn {
    background-color: #1e1e1e;
    color: #ffffd2;
    border: none;
    padding: 8px 20px; /* Slightly reduced padding */
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem; /* Slightly smaller font */
    display: flex;
    align-items: center;
    justify-content: center; /* Center text and icon */
    margin: 0 auto;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.notes-toggle-btn:hover {
    background-color: #333;
    transform: translateY(-2px);
}

.notes-toggle-btn .toggle-icon {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.notes-toggle-btn.open .toggle-icon {
    transform: rotate(180deg);
}

.poem-notes {
    position: absolute;
    bottom: 45px; /* Position above the button */
    left: 0;
    right: 0;
    background-color: #f8f8f2;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.4; /* Reduced line height in notes too */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
}

.poem-notes.open {
    max-height: 400px; /* Limited height with scrolling */
    opacity: 1;
    overflow-y: auto;
}

.poem-notes a {
    color: #0066cc;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

.poem-notes a:hover {
    color: #004080;
    text-decoration: underline;
}

/* Responsive adjustments for text poems */
@media (max-width: 768px) {
    .lightbox-text {
        padding: 20px;
        max-width: 90%;
        min-width: 300px; /* Smaller minimum width on mobile */
        width: 85%; /* Wider percentage on mobile */
        font-size: 0.95rem;
    }
    
    .lightbox-text h2 {
        font-size: 1.6rem;
    }
    
    .poem-content {
        font-size: 1rem;
    }
}

/* Responsive design */
@media (max-width: 992px) {
    .poem-container {
        max-width: 500px;
        min-height: 400px;
    }
    
    .poem-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: 15px;
        padding-top: 30px;
    }
    
    .nav-title h1 {
        font-size: 2rem;
    }
    
    .poem-container {
        max-width: 450px;
        min-height: 350px;
    }
    
    .poem-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .control-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .close-lightbox {
        top: -30px;
        right: -10px;
    }
    
    .sort-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }
    
    .sort-btn {
        width: 100%;
    }
    
    .sort-dropdown {
        width: 100%;
        max-width: 300px;
    }

    .poem-display {
        min-height: 400px; /* Slightly smaller minimum height on mobile */
    }

    .poem-controls {
        bottom: 10px; /* Adjust position on mobile */
    }
}

@media (max-width: 480px) {
    .page-container {
        padding: 10px;
        padding-top: 20px;
    }
    
    .nav-title h1 {
        font-size: 1.8rem;
    }
    
    .poem-container {
        max-width: 100%;
        min-height: 300px;
    }
    
    .poem-list {
        grid-template-columns: 1fr;
    }
    
    .alphabet-index {
        gap: 5px;
    }
    
    .alphabet-index a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 0.9rem;
    }
    
    .poem-controls {
        gap: 15px;
        bottom: 5px; /* Further adjust for small devices */
    }
    
    .lightbox-text {
        min-width: 280px; /* Even smaller minimum width on very small screens */
        width: 95%; /* Almost full width on very small screens */
    }

    .poem-display {
        min-height: 350px; /* Even smaller minimum height on small devices */
    }
}

/* Notes panel styling */
.poem-notes-container {
    margin-top: 20px;
    width: 100%;
}

.notes-toggle-btn {
    background-color: #1e1e1e;
    color: #ffffd2;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    margin: 0 auto;
    transition: background-color 0.2s ease;
}

.notes-toggle-btn:hover {
    background-color: #333;
}

.notes-toggle-btn .toggle-icon {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.notes-toggle-btn.open .toggle-icon {
    transform: rotate(180deg);
}

.poem-notes {
    background-color: #f8f8f2;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    margin-top: 15px;
    font-size: 1rem;
    line-height: 1.6;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.poem-notes.open {
    max-height: 1000px; /* Large enough to contain content */
    opacity: 1;
    margin-top: 15px;
}

.poem-notes h4 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #1e1e1e;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .poem-notes {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    .notes-toggle-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}

.error-details {
    color: #d32f2f;
    font-size: 0.9rem;
    margin-top: 10px;
    font-style: italic;
}

/*
 * =======================================================
 * FUTURE IMPLEMENTATION: PRIMROSE POETRY THEME
 * =======================================================
 * 
 * The Primrose Poetry collection would transform this page into a serene,
 * greenhouse-inspired environment where poems bloom like exotic flora.
 * 
 * Key design elements would include:
 * 
 * 1. Background featuring a Victorian-style greenhouse with soft, diffused light
 *    filtering through glass panes and lush vegetation
 * 
 * 2. Poem containers styled as botanical display cases or specimen frames
 *    with brass or copper borders and aged parchment backgrounds
 * 
 * 3. Navigation using garden pathways that lead viewers through different
 *    "garden sections" organized by theme or chronology
 * 
 * 4. Text poems displayed on unfurling scrolls or pages that "bloom" open
 *    when selected, with elegant botanical illustrations in margins
 * 
 * 5. Ambient sounds of gentle rainfall, distant bird calls, and occasional
 *    wind through leaves for immersive atmosphere (toggleable)
 * 
 * 6. Notes sections designed as herbarium tags or botanical information cards
 *    that provide context for each poem "specimen"
 *
 * 7. Seasonal variations in background elements based on the current season
 *    or the composition date of featured poems
 *
 * 8. Poem categories organized by "garden beds" - contemplative pieces in the
 *    shade garden, vibrant imagery in the tropical section, etc.
 * 
 * This ecosystem approach would create a cohesive, immersive experience that
 * presents poetry as living art that grows and evolves within its own plane
 * of existence, bridging natural beauty with literary expression.
 */

/* Special poem styling */
.special-poem {
    line-height: 1.3;
}

.special-poem .stanza {
    margin-bottom: 2.5em;
    position: relative;
}

/* Different alignments for stanzas */
.special-poem .align-left {
    text-align: left;
    padding-right: 25%;
}

.special-poem .align-right {
    text-align: right;
    padding-left: 25%;
}

.special-poem .align-center {
    text-align: center;
}

/* Visual indicators for different speakers */
.special-poem .align-left::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #3498db; /* Blue for left speaker */
    opacity: 0.7;
}

.special-poem .align-right::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #e74c3c; /* Red for right speaker */
    opacity: 0.7;
}

/* Special poem icon in archive list */
.special-poem-link {
    color: #8e44ad !important; /* Purple for special poems */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .special-poem .align-left {
        padding-right: 10%;
    }
    
    .special-poem .align-right {
        padding-left: 10%;
    }
}

/* Special poem styling - updated with fixes for line spacing */
.special-poem {
    line-height: 1.3;
}

.special-poem .stanza {
    margin-bottom: 2.5em;
    position: relative;
}

/* Add specific style to prevent unwanted line gaps */
.special-poem .no-line-gap br {
    line-height: 1.3; /* Match the parent exactly */
    display: inline-block; /* Helps maintain consistent spacing */
    margin-bottom: 0; /* Remove any bottom margin */
}

/* Ensure consistent spacing by setting specific line heights */
.special-poem .stanza {
    line-height: 1.3;
}

/* Different alignments for stanzas */
.special-poem .align-left {
    text-align: left;
    padding-right: 25%;
}

.special-poem .align-right {
    text-align: right;
    padding-left: 25%;
}

.special-poem .align-center {
    text-align: center;
}

/* Update Special poem styling - fix line spacing issues */
.special-poem {
    line-height: 1.3;
}

.special-poem .stanza {
    margin-bottom: 2.5em;
    position: relative;
    white-space: pre-line; /* Preserve original linebreaks */
}

/* Use spans for line breaks to maintain proper spacing */
.special-poem .original-spacing .line-break {
    display: block;
    height: 1.3em; /* Match the line height */
}

/* First line break should be minimized to avoid the gap */
.special-poem .original-spacing .line-break:first-child {
    display: inline;
    height: auto;
}

/* Remove redundant classes that might be causing issues */
.special-poem .no-line-gap br {
    display: none; /* Remove the <br> styling */
}

/* Visual indicators for different speakers remain the same */
.special-poem .align-left::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #3498db;
    opacity: 0.7;
}

.special-poem .align-right::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #e74c3c;
    opacity: 0.7;
}