/*
Theme Name: DCA
Author: GLM
Description: A classic 3-column Blogspot-style WordPress theme.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');


/* ====================================
   BASE / LAYOUT
   ==================================== */

body {
    font-family: "Walter Turncoat", cursive;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f1f1f1; /* Fallback color */
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

/* Central Floating Wrapper (No background here, just centers the layout) */
.page-wrapper {
    max-width: 1300px;
    margin: 20px auto;
}

/* Header (Sits directly on the background photo) */
.blog-header {
    padding: 20px 30px;
}
.header-content {
    display: flex;
    align-items: flex-end;
    gap: 20px; /* Space between logo and title */
}

.site-logo-right img, .site-logo-left img {
    max-height: 250px; /* Adjust this to make the logo smaller or larger */
    width: auto;
    border-radius: 15px; /* Slight rounding if your logo is a square */
}
.site-logo-left img {
    background-color:#ffffffAA;
}

#dca-title {
    background-color: #bad4fea3;
    border-radius: 20px;
    height: 50px;
    width: min-content;
    margin:auto;
    backdrop-filter: blur(1px);
}

.header-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow:1;
    text-align:center;
}
.blog-header .site-title {
    margin: 0;
    font-family: "Walter Turncoat", cursive;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 25px;
}
.blog-header .site-title a {
    text-decoration: none;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.blog-header .site-description {
    margin: 5px 0 0;
    color: #ffffff;
    font-style: italic;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

/* Responsive: Stack logo and title on small screens */
@media (max-width: 600px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ====================================
   TABS NAVIGATION (Attached to top of pane)
   ==================================== */
.blogspot-tabs {
    background: transparent;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Aligns tabs to the bottom edge */
    position: relative;
    z-index: 10;
}
.tabs-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
    align-items: flex-end; /* Ensures all tabs align perfectly at the bottom */
}
.tabs-menu li {
    margin: 0;
    display: flex;
    align-items: flex-end;
}
.tabs-menu li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #ffffff;

    font-size: 0.9rem;
    background:rgb(70 139 190 / 75%);
    backdrop-filter: blur(1px);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 10px 10px 0 0; /* Rounded top to match the box */
    transition: background 0.2s;
    white-space: nowrap; /* Prevents tab titles from wrapping */
}
.tabs-menu li {
    &:nth-child(4) a, &:nth-child(5) a{
        background-color:rgb(10 45 75 / 75%);
    }
}

/* Active Tab (Matches the slightly transparent content box) */
.tabs-menu li.current-menu-item > a,
.tabs-menu li.current_page_item > a,
.tabs-menu li a:hover {
    background: rgba(255, 255, 255, 0.75); /* Matches the content-box transparency */
    color: #2c3e50;
}

/* ====================================
   CONTENT BOX & COLUMNS
   ==================================== */
.content-box {
    background: rgba(255, 255, 255, 0.75); /* Slightly transparent around sidebars */
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top:none;
    border-radius: 10px; /* Fully rounded corners */
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}

.main-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 25px;
    padding: 25px;
}

/* Main Content Column (Opaque White) */
.site-main {
    background: #ffffff; /* Solid, opaque white background */
    padding: 25px;
    border-radius: 5px; /* Slight rounding for the inner content card */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Sidebars */
.sidebar {
    font-size: 0.85rem;
}
.widget-item {
    background: #f4f4f4aa;
    border: 1px solid #e0e0e0;
    padding: 5px;
    margin-bottom: 20px;
    img{
        border-radius:5px;
    }
    border-radius:10px;
    figcaption {
        margin:2px 0px;
    }
}
.widget-title {
    background: #2c3e50; /* Dark blue bar for widget titles */
    color: #ffffff;
    margin: -15px -15px 10px -15px; /* Stretches the title bar to the edges of the widget */
    padding: 8px 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Main Content */
.post-entry {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.entry-title {
    margin-top: 0;
    color: #2c3e50;
    font-family: "Walter Turncoat", cursive;
    font-size: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}
.entry-title a { text-decoration: none; color: #2c3e50; }
.entry-meta { font-size: 0.8rem; color: #888; margin-bottom: 15px; font-style: italic; }
.entry-content-body { line-height: 1.7; }

/* Gallery Grid Page adjustments */
.gallery-grid .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.gallery-grid .wp-block-gallery img {
    height: 120px;
    object-fit: cover;
    transition: opacity 0.2s;
}
.gallery-grid .wp-block-gallery img:hover { opacity: 0.8; cursor: pointer; }

/* Footer */
.site-footer {
    padding: 25px;
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    background: #f4f4f4;
    border-top: 1px solid #e0e0e0;
}

/* Footer widgets laid out horizontally */
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 10px;
    text-align: left;
}

.footer-widgets .widget-item {
    flex: 1 1 220px;       /* Grows to fill, wraps when not enough space */
    max-width: 320px;      /* Keeps cards from stretching too wide */
    background: #ffffff;   /* White card, stands out from grey footer */
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 0;
}

/* Same dark blue title bar as the sidebars */
.footer-widgets .widget-title {
    background: #2c3e50;
    color: #ffffff;
    margin: -15px -15px 10px -15px;
    padding: 8px 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-copy {
    margin: 15px 0 0;
    font-size: 0.8rem;
    color: #888;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 900px) {
    .main-layout {
        grid-template-columns: 1fr;
    }
    .blogspot-tabs { padding: 0; }
    .tabs-menu { flex-direction: column; align-items: center; }
    .tabs-menu li a {
        border-radius: 0;
        border: 1px solid #e0e0e0;
        width: 100%;
        text-align: center;
    }
}

/* ====================================
   LIGHTBOX PLAYER STYLES
   ==================================== */
#cs-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}
.lb-content {
    max-width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lb-image-wrapper {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.lb-image {
    grid-area: 1 / 1;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: opacity 0.15s ease-in-out;
}
.lb-caption {
    margin-top: 15px;
    font-size: 0.95rem;
    color: #ccc;
    text-align: center;
    max-width: 600px;
}
.lb-top-right {
    position: absolute;
    top: 15px; right: 15px;
    display: flex;
    gap: 15px;
    z-index: 100;
}
.lb-top-right button {
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.8;
}
.lb-top-right button:hover { opacity: 0.8; }
.lb-prev, .lb-next {
    position: absolute;
    color: rgba(255, 255, 255, 0.3);
    font-size: 2.5rem;
    cursor: pointer; user-select: none; padding: 15px;
    z-index: 50;
    transition: color 0.1s ease;
}
.lb-prev:hover, .lb-next:hover { color: rgba(255, 255, 255, 0.3); }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }