/* ====== Global Reset ====== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

body {
    line-height: 1.6;
    color: #e0e0ff;
    background: linear-gradient(180deg, #0d0d1a 0%, #1a1a33 100%);
}

/* ====== Links ====== */
a, a:link, a:visited, a:active {
    color: #80d0ff;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}

a:hover, a:focus {
    color: #00ffff;
    text-shadow: 0 0 6px #00bfff;
}

/* ====== Header (Mobile-First) ====== */

.site-header {
    /* Mobile Base: Tighter padding and no background image on tiny screens for performance */
    text-align: center;
    padding: 1rem 0; /* Reduced vertical padding */
    color: white;
    background: #0d0d1a; /* Solid color on mobile */
    border-bottom: 2px solid #4b0082;
    
    display: flex; 
    justify-content: center;
    /* Remove original background image CSS from the .site-header rule */
}

.header-inner {
    /* Mobile Base: Stacked or very compact */
    display: flex; 
    flex-direction: row; /* Keep logo and text side-by-side */
    align-items: center; 
    text-align: left;
    max-width: 95%;
}

.header-logo {
    /* Mobile Logo */
    margin-right: 1rem; /* Smaller margin on mobile */
    min-width: 50px; /* Prevent shrinking too small */
}

.header-logo img {
    /* Control logo size using responsive units */
    width: 60px; 
    height: 60px;
    display: block;
}

.header-text {
    /* Text container */
    display: flex; 
    flex-direction: column;

}

/* --- Main Title (MINDCOEUR) --- */
.main-title {
    text-decoration: none; 
    font-weight: 300; 
    font-family:'Playfair Display'; 

    
    /* MOBILE SIZE: Much smaller, using relative units */
    font-size: 1.5rem; 
    margin-top: 0;
    margin-bottom: 0.2rem;
    line-height: 1; /* Keep it tight */
}

.main-title .title-M {
    font-family:'Playfair Display'; 
    font-size: 1.2em; /* Slightly bigger M */
}

.main-title .title-IND {
    font-family:'Playfair Display'; 
    font-size: 0.9em; 
}

.main-title .title-C {
    font-family:'Cinzel Decorative'; 
    font-size: 1.2em; /* Slightly bigger C */
}

.main-title .title-OEUR {
    font-family:'Playfair Display'; 
    font-size: 0.9em; 
}


/* --- Subtitle (MYSTICAL...) --- */
.sub-title {
    /* MOBILE SIZE: Very small and compressed */
    font-size: 0.65rem; 
    font-family:'Playfair Display'; 
    line-height: 1.1;
    color: #ccc;
    
    /* Ensure the entire subtitle is hidden on the smallest mobile screens */
    display: none; 
}

/* Show the subtitle on slightly wider mobile screens */
@media (min-width: 480px) {
    .sub-title {
        display: block;
    }
}

.sub-title [class^="sub-title-"] {
    /* Adjust initial letter size to be smaller on mobile */
    font-family:'Cinzel Decorative'; 
    font-size: 1rem; /* Small initial capital */
}

/* ====== Desktop/Tablet Breakpoint (min-width: 769px) ====== */

@media (min-width: 769px) {
    /* --- Header Container Reset to Desktop --- */
    .site-header {
        padding: 2rem 1rem; /* Restore large padding */
        background: 
            linear-gradient(to right, rgba(0,0,50,0.7) 0%, rgba(0,0,50,0.3) 50%, rgba(0,0,50,0.7) 100%),
            url('/assets/images/future-science-cosmos-header-rev2.jpg') center/cover no-repeat;
    }

    /* --- Inner Elements Reset to Desktop --- */
    .header-inner {
        max-width: 1200px;
    }
    
    .header-logo {
        margin-right: 3rem; /* Restore large margin */
    }

    .header-logo img {
        width: 150px; /* Restore large logo size */
        height: 150px;
    }

    /* --- Main Title Reset to Desktop --- */
    .main-title {
        /* DESKTOP SIZE: Restore large absolute sizes */
        font-size: 3.8rem;
        margin-top: -2.3rem;
        margin-bottom: -1rem;
    }

    .main-title .title-M {
        font-size: 1.19em;
    }

    .main-title .title-C {
        font-size: 1.12em;
    }

    /* --- Subtitle Reset to Desktop --- */
    .sub-title {
        /* DESKTOP SIZE: Restore large sizes */
        display: block; /* Ensure visibility */
        font-size: 0.9rem;
    }

    .sub-title [class^="sub-title-"] {
        /* Restore large initial capital size */
        font-size: 1.8rem;
    }
}

/* ====== Navigation (Mobile-First Collapsible) ====== */
.site-nav {
    /* Base style: Vertical stacking container */
    display: flex;
    flex-direction: column; 
    align-items: center; /* Center the icon and menu */
    background: #111;
    padding: 0 1rem;
    border-bottom: 2px solid #4b0082;
    position: relative; /* Needed for absolute positioning if used */
}

/* --- Hamburger Icon/Toggle --- */
.menu-toggle {
    /* Hide the actual checkbox */
    display: none;
}
/* --- Hamburger Icon/Toggle --- */
.menu-icon {
    /* REVISION: Increased tap area (width/height) and padding */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 36px;        /* Increased icon width */
    height: 30px;       /* Increased icon height */
    cursor: pointer;
    padding: 0.25rem 0.5rem; /* Reduced internal vertical padding to utilize space better */
    margin: 0.75rem;    /* Increased margin for better separation from content */
    
    /* Added visual border for better recognition */
    border: 1px solid #4b0082; 
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05); /* Slight background for contrast */
    transition: background-color 0.3s, border-color 0.3s;
}

.menu-icon:hover {
    /* Adjusted hover effect */
    border-color: #7f00ff;
    background-color: rgba(127, 0, 255, 0.1);
}

.menu-icon .bar {
    /* REVISION: Increased bar thickness */
    display: block;
    width: 100%;
    height: 4px;        /* Increased bar thickness */
    background-color: #80d0ff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* --- Link Container (Collapsible Part) --- */
.menu-links {
    /* Mobile Default: Hidden and vertical */
    max-height: 0;
    overflow: hidden;
    width: 100%; /* Take full width for stacking links */
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0;
}

.menu-links a {
    padding: 0.75rem 0; /* Vertical spacing for mobile links */
    width: 100%;
    border-bottom: 1px solid rgba(75, 0, 130, 0.5); /* Separator */
}
.menu-links a:last-child {
    border-bottom: none;
}

/* --- State: When the checkbox is checked, show the menu --- */
.menu-toggle:checked ~ .menu-links {
    max-height: 300px; /* A value larger than the max expected menu height */
    padding-bottom: 0.5rem; /* Re-add bottom padding */
    padding-top: 0.2rem;
}

/* ====== Main Content Layout ====== */
main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* center content */
    max-width: 1200px;
    margin: 1rem auto;
    padding: 0 1rem;
    gap: 2rem;
}

/* ====== Left Column (Articles, Pages, RSS) ====== */
.main-left {
    flex: 1 1 100%;            
    min-width: 300px;
    display: flex;
    flex-direction: column;   /* stack articles/pages/rss */
    align-items: center;
    gap: 2rem;
}

/* ----- Article / Page Content Styling ----- */
.main-left article,
.page-article {
    width: 100%;
    max-width: 800px;         /* same as pages/articles */
    background: linear-gradient(135deg, #1a1a33 0%, #0d0d50 100%);
    color: #e0e0ff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(100, 150, 255, 0.3);
    line-height: 1.7;
}

.main-left article h2,
.page-article h2 {
    color: #7f00ff;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 6px rgba(127,0,255,0.5);
}

.main-left article p,
.page-article p {
    color: #d0d0ff;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.main-left article a,
.page-article a {
    color: #80d0ff;
    text-decoration: underline;
}

.main-left article a:hover,
.page-article a:hover {
    color: #00ffff;
    text-shadow: 0 0 6px #00bfff;
}

/* --- Styling for Markdown Tables (Book List) --- */

/* Targets the main table container */
.main-left table {
    /* Ensures the table takes up the available width within the article/page container */
    width: 100%;
    border-collapse: collapse; 
    margin: 2rem 0;
    font-size: 0.95rem;
    box-shadow: 0 0 20px rgba(100, 150, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a33; /* Dark background to contain the cells */
}

/* Styling for Header Cells (TH) */
.main-left th {
    background-color: #4b0082; /* Deep violet header background */
    color: #fff0ff;
    text-align: left;
    padding: 1rem 1.2rem;
    border: none;
    font-size: 1.05rem;
    border-bottom: 2px solid #80d0ff; /* Light blue underline */
}

/* Styling for Data Cells (TD) */
.main-left td {
    padding: 0.8rem 1.2rem;
    color: #e0e0ff;
    vertical-align: top;
    border: none;
    /* This border creates the separator line between rows */
    border-bottom: 1px solid #0d0d50; 
}

/* Remove border from the last row */
.main-left tr:last-child td {
    border-bottom: none;
}

/* Zebra Striping (Alternating Row Colors) - This is the tricky part with pure CSS targeting. 
   We target the table rows (tr) within the article content. */
.main-left tr:nth-child(even) {
    background-color: rgba(13, 13, 26, 0.7); 
}
.main-left tr:nth-child(odd) {
    background-color: rgba(26, 26, 51, 0.7); 
}

/* Hover Effect for Rows (Need to target the row element) */
.main-left tr:hover {
    background-color: rgba(127, 0, 255, 0.2); 
}

/* Styling for Links within the table */
.main-left td a {
    font-weight: bold;
    color: #80d0ff;
    text-decoration: none;
    transition: color 0.3s;
}

.main-left td a:hover {
    color: #00ffff;
    text-shadow: 0 0 4px #00bfff;
}


/* ----- Right Sidebar ----- */
.main-right {
    flex: 1 1 100%;           /* keep ~25% on desktop */
    min-width: 200px;
    background: linear-gradient(135deg, #1a1a33 0%, #0d0d50 100%);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(100, 150, 255, 0.2);
}

.sidebar h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #c0a0ff;
    border-bottom: 1px solid #4b0082;
    padding-bottom: 0.25rem;
}

.sidebar ul {
    list-style: none;
    padding-left: 0;
}

.sidebar li {
    margin-bottom: 0.5rem;
}

.sidebar a {
    color: #b0d0ff;
}

.sidebar a:hover {
    color: #80ffff;
    text-shadow: 0 0 5px #00bfff;
}

.sidebar-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
    border-radius: 8px;
}

/* ====== Page Content Only ====== */
.page-article {
    max-width: 800px;
    margin: 2rem auto;
    background: linear-gradient(135deg, #1a1a33 0%, #0d0d50 100%);
    color: #e0e0ff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(100, 150, 255, 0.3);
    line-height: 1.7;
}

.page-article h2 {
    color: #7f00ff;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 6px rgba(127,0,255,0.5);
}

.page-article p {
    color: #d0d0ff;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.page-article a {
    color: #80d0ff;
    text-decoration: underline;
}

.page-article a:hover {
    color: #00ffff;
    text-shadow: 0 0 6px #00bfff;
}

/* ====== Footer ====== */
.site-footer {
    text-align: center;
    padding: 1rem;
    background-color: #111;
    color: #ccc;
    border-top: 2px solid #4b0082;
    margin-top: 2rem;
}

.site-footer a {
    color: #8fbfff;
}

.site-footer a:hover {
    color: #00ffff;
}

/* ====== Desktop/Tablet Breakpoint (Mobile-First) ====== */
@media (min-width: 769px) {
    
    /* --- Navigation --- */
    .site-nav {
        /* Reset to desktop layout */
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 1rem; /* Re-apply original padding */
    }

    /* Hide the icon on desktop */
    .menu-icon,
    .menu-toggle {
        display: none;
    }

    /* Show links in a row on desktop */
    .menu-links {
        /* Reset for desktop display */
        display: flex;
        flex-direction: row;
        max-height: none; 
        overflow: visible;
        width: auto;
        gap: 1rem; /* Space between desktop links */
        padding: 0;
    }
    
    .menu-links a {
        padding: 0.5rem 1rem; /* Horizontal spacing for desktop links */
        width: auto;
        border-bottom: none; /* Remove separators */
    }
    
    .site-nav a:hover {
        background: #4b0082;
        border-radius: 4px;
        box-shadow: 0 0 8px #7f00ff;
    }
    
    /* --- Main Content Layout --- */
    main {
        flex-direction: row; /* Main/Sidebar side-by-side */
    }

    .main-left {
        /* DESKTOP RESET: Restore ~70% width */
        flex: 0 1 70%;
    }
    .main-right {
        /* DESKTOP RESET: Restore ~25% width */
        flex: 0 1 25%;
    }
}