/* Custom styles for elements that need specific CSS values */

/* Banner header height - uses CSS calc for viewport-based sizing */
.banner-header {
    height: 7.5vh;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #4a4a4a;
}

/* Mushroom art background */
.mushroom-bg {
    background-image: url('mushroom_art.png');
    background-size: auto 115%; /* Zoom out to show more artwork */
    background-position: center;
    background-repeat: repeat-x;
    background-color: white; /* Fallback to match image background */
}

/* Semi-transparent backdrops for text readability */
.disclaimer-backdrop {
    background: linear-gradient(135deg, rgba(81, 108, 241, 0.9), rgba(141, 79, 241, 0.9));
    border-radius: 8px;
}

/* Contact button gets enhanced styling since it's standalone */

/* Updated contact button styling */
.contact-button {
    background: linear-gradient(135deg, rgba(81, 108, 241, 0.9), rgba(141, 79, 241, 0.9));
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.contact-button:hover {
    background: linear-gradient(135deg, rgba(81, 108, 241, 1), rgba(141, 79, 241, 1));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Ensure proper iframe sizing */
#embedded-content {
    min-height: 100%;
    min-width: 100%;
    display: block;
}

/* Ensure main container takes full available space */
main {
    min-height: 0; /* Important for flexbox to work properly */
}

/* Focus states for accessibility */
.focus\:outline-purple:focus {
    outline: 2px solid #b19cd9;
    outline-offset: 2px;
}

/* Modal Styles - Vintage Parchment Theme */
/* Banner Edit Modal */
#banner-edit-modal-inner {
    background: url('/paper_texture.png');
    background-size: cover;
    background-position: center;
    position: relative;
    border: none;
    box-shadow: 0 10px 40px rgba(74, 63, 53, 0.25);
    clip-path: url(#torn-paper-banner);
    padding: 2rem;
}

#banner-edit-modal-inner h2 {
    color: #4a3f35;
    font-family: 'Oooh Baby', cursive;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
}

#banner-edit-modal-inner p {
    color: #5d4e42;
    font-family: 'Special Elite', monospace;
    font-size: 0.9rem;
    line-height: 1.8;
}

#banner-edit-modal-inner textarea,
#banner-edit-modal-inner input[type="text"] {
    background: rgba(250, 248, 245, 0.5);
    border: 1.5px solid #d4c4a8;
    color: #4a3f35;
    font-family: 'Special Elite', monospace;
    font-size: 0.9rem;
    line-height: 1.8;
}

#banner-edit-modal-inner textarea::placeholder,
#banner-edit-modal-inner input::placeholder {
    color: #9d8f7f;
    font-family: 'Special Elite', monospace;
}

#banner-edit-modal-inner textarea:focus,
#banner-edit-modal-inner input:focus {
    background: rgba(250, 248, 245, 0.65);
    border-color: #8b7355;
    ring-color: rgba(139, 115, 85, 0.2);
}

#save-banner-btn {
    background: rgba(250, 248, 245, 0.3);
    border: 2px solid #8b7355;
    color: #4a3f35;
    font-family: 'Special Elite', monospace;
}

#save-banner-btn:hover {
    background: rgba(250, 248, 245, 0.5);
}

#cancel-edit-btn {
    background: rgba(250, 248, 245, 0.3);
    border: 1.5px solid #c4b5a0;
    color: #6d5f4f;
    font-family: 'Special Elite', monospace;
}

#cancel-edit-btn:hover {
    background: rgba(250, 248, 245, 0.5);
}

#close-edit-modal-btn {
    color: #6d5f4f;
}

#close-edit-modal-btn:hover {
    color: #4a3f35;
}

#banner-save-feedback {
    font-family: 'Special Elite', monospace;
    font-size: 0.875rem;
    color: #4a3f35;
}

/* Quote Modal */
#quote-modal-inner {
    background: url('/paper_texture.png');
    background-size: cover;
    background-position: center;
    position: relative;
    border: none;
    box-shadow: 0 10px 40px rgba(74, 63, 53, 0.25);
    clip-path: url(#torn-paper-quote);
    padding: 2rem;
}

#quote-modal-content {
    color: #4a3f35;
}

#quote-modal-content blockquote p {
    color: #4a3f35;
    font-family: 'Special Elite', monospace;
    font-size: 1.125rem;
    line-height: 1.6;
}

#quote-modal-content footer {
    color: #6d5f4f;
    font-family: 'Oooh Baby', cursive;
    font-size: 1.75rem;
    font-weight: 400;
}

#refresh-quote-btn,
#edit-quote-btn,
#close-modal-btn {
    color: #6d5f4f;
}

#refresh-quote-btn:hover,
#edit-quote-btn:hover,
#close-modal-btn:hover {
    color: #4a3f35;
}

/* Print styles */
@media print {
    header {
        background: white !important;
        color: black !important;
        border-bottom: 2px solid black !important;
    }

    header * {
        color: black !important;
    }

    a {
        background: white !important;
        color: black !important;
        border: 2px solid black !important;
    }
}