/* ============================================
   CONDOLENCE THEME
   Overrides for the Condolence film page
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Cutive+Mono&family=Lancelot&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=UnifrakturCook:wght@700&family=UnifrakturMaguntia&display=swap');

:root {
    --accent-color: #eb1b1b;
    --modal-bg: #eb1b1b;
    --modal-header-bg: #eb1b1b;
    --heading-font: 'UnifrakturCook', cursive;
}

body {
    background-color: #201e1e;
    color: #eb1b1b;
}



.content {
    font-size: 18px;
    font-family: 'UnifrakturMaguntia', serif;
    border-color: #eb1b1b;
}

.content h2 {
    font-family: 'UnifrakturCook', cursive;
    font-size: 30px;
    color: #f8d255;
    text-shadow: 1px 1px #eb1b1b;
}

/* Fix for sub-menu links - Times New Roman / serif, not italic */
.left-column .sub-menu a {
    font-family: 'Times New Roman', Times, serif !important;
    font-style: normal !important;
    font-weight: normal;
    position: relative;
    display: inline-block;
    padding: 5px 20px;
    padding-right: 5px;
}

/* Sub-menu GIFs - Using the original working URL */
.left-column .sub-menu a::before {
    content: url(https://web.archive.org/web/20040120013352/http://www.geocities.com:80/crossoffate/cross_3d_prism.gif);
    position: absolute;
    right: 94%;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.left-column .sub-menu a::after {
    content: url(https://web.archive.org/web/20040120013352/http://www.geocities.com:80/crossoffate/cross_3d_prism.gif);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 7px;
    display: none;
}

.left-column .sub-menu a:hover::before,
.left-column .sub-menu a:hover::after {
    display: inline-block;
}

.left-column .sub-menu a:hover {
    text-decoration: underline;
    color: #eb1b1b;
}

/* Fix for right column paragraphs */
.right-column .section p {
    color: white;
    font-family: 'Times New Roman', Times, serif !important;
    font-style: normal !important;
}

/* Fix for cast and crew text */
.right-column .section#cast p,
.right-column .section#crew p {
    font-family: 'Times New Roman', Times, serif !important;
    font-style: normal !important;
}

/* Fix for synopsis paragraph */
#about-the-film p {
    font-family: 'Times New Roman', Times, serif !important;
    font-style: normal !important;
}

/* ============================================
   MODAL STYLES FOR CONDOLENCE
   ============================================ */

/* 1. Modal header - UnifrakturMaguntia font */
.modal-header,
.modal-header span {
    font-family: 'UnifrakturMaguntia', serif !important;
    font-size: 18px !important;
    color: white !important;
}

/* 2. Modal h1 and h2 - UnifrakturMaguntia with gold/red styling */
#notesModal h1,
#notesModal h2,
.modal-window h1,
.modal-window h2 {
    font-family: 'UnifrakturMaguntia', serif !important;
    color: #f8d255 !important;
    text-shadow: 1px 1px #eb1b1b !important;
    font-size: 28px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

/* 3. Modal paragraphs - Times New Roman, white */
#notesModal p,
.modal-window p {
    font-family: 'Times New Roman', Times, serif !important;
    color: white !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Modal links */
#notesModal a,
.modal-window a {
    color: white !important;
    text-decoration: underline !important;
}

/* Modal images - keep consistent */
#notesModal img,
.modal-window img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

/* Gallery grid - keep original styling */
#galleryModal .gallery-grid {
    font-family: inherit;
}

#galleryModal .gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

#galleryModal .gallery-grid img:hover {
    transform: scale(1.08) rotate(2deg);
}

/* Modal content container */
.modal-window .modal-content,
#notesModal .modal-content {
    background-color: transparent;
}

/* Ensure notes modal paragraphs are left-aligned */
#notesModal .modal-content,
#notesModal .modal-content p {
    text-align: left !important;
}

.left-column .trophy-corner h2:hover {
    color: white;
    text-shadow: #eb1b1b;
}

/* Back to top button */
.top {
    background-color: #eb1b1b;
    color: #f8d255;
}

.top:hover {
    color: black;
    background-color: white;
}