/* style.css */

/* --- GLOBAL & BODY --- */
body {
    background-color: #C0C0C0; /* Windows Grey */
    color: #000000;
    font-family: "Times New Roman", Times, serif; /* Default font */
    margin: 0;
    padding: 10px;
}

/* Link Colors */
a:link { color: #0000FF; text-decoration: underline; }
a:visited { color: #800080; text-decoration: underline; }
a:hover { color: #FF0000; background-color: #FFFF00; text-decoration: none; }
a:active { color: #FF0000; }

/* --- LAYOUT CONTAINER --- */
.container {
    width: 800px;
    background-color: #FFFFFF;
    border: 4px ridge #808080; /* 3D Ridge Border */
    margin: 0 auto; /* Center the table */
    border-collapse: collapse;
}

/* --- HEADER --- */
.header-cell {
    background-color: #000080; /* Navy Blue */
    color: #FFFFFF;
    padding: 20px;
    text-align: center;
    border-bottom: 4px ridge #808080;
}

.header-title {
    font-size: 35px;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px #000000;
}

.header-sub {
    font-style: italic;
    font-size: 18px;
    margin-top: 5px;
}

/* --- NAVIGATION --- */
.nav-cell {
    background-color: #808080;
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid #000000;
}

.nav-link {
    color: #FFFF00; /* Yellow */
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: 16px;
    margin: 0 15px;
    text-decoration: underline;
}

.nav-link:hover {
    background-color: #000080;
    color: #FFFFFF;
    text-decoration: none;
}

/* --- CONTENT AREA --- */
.content-cell {
    padding: 25px;
    vertical-align: top;
    background-color: #FFFFFF;
}

/* Section Headers (Teal Boxes) */
.entry-header-box {
    background-color: #008080; /* Teal */
    color: #FFFFFF;
    display: inline-block;
    padding: 4px 8px;
    font-size: 20px;
    border: 2px outset #808080;
    margin-bottom: 15px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}

/* Intro Text */
.intro-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* --- ENTRY SUBTITLES --- */
.entry-subtitle {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    font-size: 20px;
    color: #000080; /* Navy, matches your header/gallery titles */
    margin: 25px 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Dark mode override */
body.dark-mode .entry-subtitle {
    color: #4da6ff; /* Light blue, matches dark-mode links */
}

/* Mobile tweak — add inside your existing @media block */
@media only screen and (max-width: 820px) {
    .entry-subtitle {
        font-size: 16px;
    }
}
/* Journal List */
.journal-list {
    list-style-type: square;
    padding-left: 25px;
}

.journal-item {
    margin-bottom: 20px;
    /* Border removed as requested */
    padding-bottom: 0; 
}

.entry-date {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: #800000; /* Maroon */
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
}

.entry-title-link {
    font-weight: bold;
    font-size: 18px;
    display: block;
    margin-bottom: 4px;
    font-family: "Times New Roman", Times, serif;
}

.entry-desc {
    font-style: italic;
    color: #333333;
    display: block;
    font-size: 15px;
}

/* Quote Section */
.quote-section {
    margin-top: 20px;
    margin-bottom: 20px;
}

.quote-text {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    color: #000000;
    display: block;
    margin-bottom: 5px;
}

.quote-author {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #555555;
    display: block;
}

/* --- FOOTER --- */
.footer-cell {
    background-color: #C0C0C0;
    border-top: 4px ridge #808080;
    padding: 15px;
    text-align: center;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #000000;
}

.site-status {
    color: #555555;
    margin-bottom: 10px;
    display: block;
}

.footer-link {
    color: #800000;
    text-decoration: underline;
}

/* --- UTILITIES --- */
.retro-hr {
    border: 0;
    border-top: 1px dashed #000000; /* Constant dotted black line */
    height: 0; /* Reset height since border handles it */
    margin: 20px 0;
} 

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

.contact-box {
    border: 2px outset #808080;
    background-color: #F0F0F0;
    padding: 20px;
    margin: 20px 0;
}

.entry-desc-plain {
    font-style: normal;
    color: #333333;
    display: block;
}   

/* --- FOOTER IMAGES --- */
.footer-cell img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Title wrapper for horizontal alignment */
.title-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 125px; /* Adjust space between image and title */
    margin-bottom: 15px;
}

/* Decorative images */
.title-deco {
    width: 70px;      /* Adjust size as needed */
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

/* Numbered List Style for Archive Posts */
.ordered-list {
    list-style-type: decimal; /* Creates 1, 2, 3... */
    padding-left: 35px; /* Slightly more padding for numbers */
    margin-bottom: 20px;
}

.ordered-list li {
    margin-bottom: 12px;
    font-size: 15px;
}

/* ============================================
   DARK THEME (Toggle via class)
   ============================================ */

body.dark-mode {
    background-color: #1a1a1a; /* Dark gray background */
    color: #e0e0e0; /* Off-white text */
}

body.dark-mode .container {
    background-color: #2d2d2d; /* Dark container */
    border-color: #4a4a4a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

body.dark-mode .header-cell {
    background-color: #0d0d3d; /* Dark navy */
    color: #e0e0e0;
    border-bottom-color: #4a4a4a;
}

body.dark-mode .header-title {
    color: #ffffff;
    text-shadow: 2px 2px #000000;
}

body.dark-mode .header-sub {
    color: #c0c0c0;
}

body.dark-mode .nav-cell {
    background-color: #3d3d3d; /* Dark gray nav */
    border-bottom-color: #555555;
}

body.dark-mode .nav-link {
    color: #ffd700; /* Gold links */
}

body.dark-mode .nav-link:hover {
    background-color: #0d0d3d;
    color: #ffffff;
}

body.dark-mode .content-cell {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .entry-header-box {
    background-color: #004d40; /* Dark teal */
    color: #ffffff;
    border-color: #4a4a4a;
}

body.dark-mode .intro-text {
    color: #d0d0d0;
}

body.dark-mode .journal-item {
    color: #e0e0e0;
}

body.dark-mode .entry-date {
    color: #ff6b6b; /* Reddish date */
}

body.dark-mode .entry-title-link {
    color: #4da6ff; /* Light blue links */
}

body.dark-mode .entry-desc {
    color: #b0b0b0;
}

body.dark-mode .retro-hr {
    border-top-color: #555555;
}

body.dark-mode .quote-text {
    color: #e0e0e0;
}

body.dark-mode .quote-author {
    color: #888888;
}

body.dark-mode .contact-box {
    background-color: #3d3d3d;
    border-color: #4a4a4a;
    color: #e0e0e0;
}

body.dark-mode .footer-cell {
    background-color: #1a1a1a;
    border-top-color: #4a4a4a;
    color: #b0b0b0;
}

body.dark-mode .footer-link {
    color: #ff6b6b;
}

body.dark-mode a:link {
    color: #4da6ff;
}

body.dark-mode a:visited {
    color: #9966ff;
}

body.dark-mode a:hover {
    color: #ff9999;
    background-color: #3d3d3d;
}

body.dark-mode a:active {
    color: #ff6b6b;
}

body.dark-mode .title-deco {
    opacity: 0.9; /* Slightly reduce opacity for dark mode */
}

/* ============================================
   GALLERY ITEM STYLES (UPDATED)
   ============================================ */

.gallery-piece {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border: 2px inset #808080;
}

.gallery-img {
    max-width: 100%;
    height: auto;
    border: 4px ridge #808080;
    margin-bottom: 10px;
    display: inline-block;
    background-color: #000;
}

.gallery-title {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: bold;
    color: #000080;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry-date {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: #800000; /* Maroon/Red */
    font-size: 14px;
    margin-bottom: 8px; /* Slightly more space below date */
    display: block;
}

/* NEW: Contributor Styling */
.gallery-contributor {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #555555; /* Dark grey for "Submitted by:" label */
    margin-bottom: 12px; /* Space before description */
    display: block;
    font-style: normal;
}

.gallery-contributor strong {
    color: #000080; /* Navy blue for the actual name */
    font-weight: bold;
}

.gallery-desc {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
    font-style: italic;
    max-width: 600px;
    margin: 0 auto;
}

/* Dark Mode Overrides for Gallery */
body.dark-mode .gallery-piece {
    background-color: #3d3d3d;
    border-color: #555;
}

body.dark-mode .gallery-title {
    color: #4da6ff;
}

body.dark-mode .gallery-contributor {
    color: #aaa; /* Lighter grey for dark mode label */
}

body.dark-mode .gallery-contributor strong {
    color: #4da6ff; /* Light blue for name in dark mode */
}

body.dark-mode .gallery-desc {
    color: #e0e0e0;
}

/* ============================================
   BLOG / ENTRY IMAGE STYLES
   ============================================ */

/* Container for the image and caption */
.entry-image-container {
    margin: 20px 0;
    text-align: center;
    width: 100%;
}

/* The Image Itself */
.entry-content-img {
    max-width: 100%;       /* Never wider than the screen */
    height: auto;          /* Keeps aspect ratio (no distortion) */
    display: block;        /* Removes bottom gap */
    margin: 0 auto;        /* Centers the image */
    border: 4px ridge #808080; /* Retro 3D border */
    background-color: #000; /* Black background for transparency */
    box-shadow: 4px 4px 0px #000000; /* Retro drop shadow */
}

/* Caption text below image */
.entry-caption {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    color: #555555;
    margin-top: 10px;
    font-style: italic;
    line-height: 1.4;
}

/* --- DARK MODE OVERRIDES --- */
body.dark-mode .entry-content-img {
    border-color: #4a4a4a; /* Lighter border for dark mode */
    background-color: #1a1a1a;
}

body.dark-mode .entry-caption {
    color: #aaa; /* Lighter text for dark mode */
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

@media only screen and (max-width: 820px) {

    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    /* Stop browsers from auto-adjusting text size */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /* Make container full width */
    .container {
        width: 100vw;
        max-width: 100vw;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
    }

    /* Header */
    .header-cell {
        padding: 15px 10px;
        box-sizing: border-box;
    }

    .header-title {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .header-sub {
        font-size: 12px;
    }

    /* Navigation */
    .nav-cell {
        padding: 8px 4px;
        box-sizing: border-box;
    }

    .nav-link {
        font-size: 12px;
        margin: 2px 5px;
        white-space: nowrap;
    }

    /* Main Content */
    .content-cell {
        padding: 15px 10px;
        box-sizing: border-box;
    }

    .entry-header-box {
        font-size: 16px;
        padding: 3px 6px;
    }

    .intro-text {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Journal / List Items */
    .journal-list {
        padding-left: 15px;
    }

    .journal-item {
        margin-bottom: 15px;
    }

    .entry-date {
        font-size: 12px;
    }

    .entry-title-link {
        font-size: 16px;
    }

    .entry-desc {
        font-size: 13px;
    }

    .entry-author {
        font-size: 12px;
    }

    /* Quote Section */
    .quote-text {
        font-size: 15px;
    }

    .quote-author {
        font-size: 11px;
    }

    /* Contact Box */
    .contact-box {
        padding: 15px 10px;
        box-sizing: border-box;
    }

    /* Footer */
    .footer-cell {
        font-size: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    .site-status {
        font-size: 10px;
    }

    /* Horizontal Rule */
    .retro-hr {
        margin: 15px 0;
    }

    /* Title wrapper mobile */
    .title-wrapper {
        gap: 32px;
    }

    /* Decorative images mobile */
    .title-deco {
        width: 50px !important; /* Smaller on mobile */
        height: auto !important;
    }

    /* --- BLOG IMAGE MOBILE FIXES --- */
    .entry-content-img {
        border-width: 2px !important;
        box-shadow: 2px 2px 0px #000000 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .entry-caption {
        font-size: 12px !important;
        padding: 0 10px !important;
    }
}