/* --- 1. VARIABLES & CORE --- */
:root {
    color-scheme: light;
    --bg-color: #fdfcf8;
    --text-color: #2c2c2c;
	
    --serif-stack: "Cambria", "Times New Roman", serif;
    --sans-stack: system-ui, -apple-system, "Segoe UI", sans-serif;
    
    --sidebar-bg: #fffaf0;
    --accent-color: #8b4513;
    --border-color: #e0ddd5;
    --site-title-color: #0c243d;
}

/* --- Dark Mode (The Flash Preventer) --- */
html[data-theme="dark"],
body.dark-mode {
    color-scheme: dark; /* This stops the browser canvas from flashing white */
    --bg-color: #121212;
    --text-color: #e4e4e4;
    --sidebar-bg: #121212;
    --accent-color: #f8e5cd;
    --border-color: #333;
    --site-title-color: #f0f4f8;
}

body {
    background-color: var(--bg-color) !important; /* Always use the variable */
    color: var(--text-color) !important;
    transition: background 0.3s, color 0.3s;

    font-family: var(--serif-stack);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- 2. HEADER & BRANDING --- */
header#site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;      /* Allows items to move to a second line if needed */
}

/* Branding title forced to Sans-Serif */
.site-title {
    font-family: var(--sans-stack) !important;
    font-size: 1.5rem;
    margin: 0;
}

/* Hammer Fix for Site Title Link */
.site-title a, .site-title a:link, .site-title a:visited, .site-title a:hover, .site-title a:active {    text-decoration: none !important; 
    color: var(--site-title-color) !important; 
    letter-spacing: 0.1em; 
    border: none !important;
    outline: none !important;
    transition: opacity 0.2s ease;
}

.site-title a:hover { opacity: 0.7; }

/* Adjust the button container to wrap on small screens */
.header-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;      /* Allows language buttons to stack if necessary */
    justify-content: flex-end; /* Keeps them right-aligned on desktop */
}

/* Styling for the active language button */
.header-controls button.active {
    background-color: var(--sidebar-bg); /* Use the subtle sidebar tint */
    border-color: var(--accent-color);   /* Use your main theme color */
    font-weight: bold;                   /* Makes the text slightly sharper */
}

/* Ensure the hover effect still works on active buttons */
.header-controls button.active:hover {
    transform: translateY(-1px);
}

button {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-family: var(--sans-stack);
    font-size: 0.75rem;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

button:hover {
    background-color: #dce4e8; /* Steel Gray */
    border-color: #aebdc5;
    transform: translateY(-1px);
}

body.dark-mode button:hover {
    background-color: #333333; /* Solid Dark Gray */
    border-color: #666666;
    color: #ffffff;
}

/* Temporarily hide language buttons until content is ready */
button[onclick="setLang('gk')"] {
    display: none !important;
}

/* Temporarily hide language buttons until content is ready
button[onclick="setLang('en')"], 
button[onclick="setLang('gk')"], 
button[onclick="setLang('sl')"] {
    display: none !important;
} */

/* --- 3. LAYOUT & SIDEBAR --- */
#layout { display: flex; flex: 1; width: 100%; }

/* Multilingual Logic */
.lang-en, .lang-gk, .lang-sl { display: none; }
body.mode-en .lang-en, body.mode-gk .lang-gk, body.mode-sl .lang-sl { display: block !important; }

#sidebar { 
    width: 120px; 
    background: var(--sidebar-bg); 
    border-right: 1px solid var(--border-color); 
    padding: 1.5rem; 
    height: calc(100vh - 60px); 
    position: sticky; 
    top: 60px; 
    overflow-y: auto; 
    flex-shrink: 0; 
}

#sidebar.hidden { display: none !important; }

/* SCOPED: Navigation Sidebar Summaries Only */
#sidebar summary { 
    font-family: var(--sans-stack); 
    font-size: 0.9rem; 
    color: var(--accent-color); 
    cursor: pointer; 
    padding-bottom: 0.5rem; 
    /* border-bottom: 1px solid var(--border-color); */
    list-style: none;
    display: flex;
    align-items: center;
}
#sidebar summary::-webkit-details-marker { display: none; }

#sidebar ul { list-style: none; padding: 0 0 0.5rem 1rem; margin: 0; }
#sidebar a { text-decoration: none !important; color: var(--text-color); font-size: 0.9rem; font-family: var(--sans-stack); border: none !important; }
#sidebar a:hover { color: var(--accent-color); text-decoration: none !important; }

/* --- SIDEBAR ACTIVE PAGE HIGHLIGHT (Octoechos) --- */
#sidebar a.current-page {
    font-weight: normal !important;
    color: #b30000 !important; /* Richer Navy Blue for light mode visibility */
}

/* Automatic switch when Dark Mode is active */
html[data-theme="dark"] #sidebar a.current-page,
body.dark-mode #sidebar a.current-page {
    color: #ffcc66 !important; /* Restful Pale Gold for high-contrast dark reading */
}

/* --- 4. MAIN CONTENT --- */
main { flex: 1; padding: 1rem 2rem 3rem 2rem; width: 100%; box-sizing: border-box; }

/* SCOPED: Minimalist Body Collapsible Sections */
main details {
    margin: 0;
    padding: 0;
    background: none !important;
    border: none !important;
}

main summary {
    font-family: var(--serif-stack) !important;
    font-size: 1.3rem;
    font-weight: bold;
    color: #006699;
    cursor: pointer;
    list-style: none; /* Hide default arrow in standard browsers */
    padding: 0;
    margin: 10px 0; /* Match your existing H2 spacing alignment */
    text-align: left;
}

/* Hide default arrow in Safari/Webkit browsers for main content */
main summary::-webkit-details-marker { 
    display: none !important; 
}

body.dark-mode main summary {
    color: #d6eafe;
}

/* --- MAIN CONTENT HEADINGS --- */

/* Base style for all headings */
main h1, main h2, main h3, main h4, main h5, main h6 {
    font-family: var(--serif-stack) !important;
    text-align: center;      /* Headings centered by default */
    font-weight: normal;     /* Set all to normal first */
    line-height: 1.2;
    margin-bottom: 1rem;
    font-size: 1.2rem;       /* Ensure none are smaller than p (1.2rem) */
}

/* Specific overrides */
main h1 {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--text-color);
}

main h2 { 
    font-weight: bold;
	font-size: 1.3rem; 
    border-bottom: 1px solid lightgray; 
    color: #006699; 
	text-align: left;
    margin-bottom: 0.5rem;
}

/* Optional: If you still want the colors we picked earlier */
main h3 { color: #4682b4; }
main h4 { color: #a0522d; }
main h5 { color: #607d8b; }
main h6 { color: #27496a; }

b { font-weight: bold; }
em, i { color: #8b0000; }
hr { border: 0; border-top: 1px solid #cccccc; }
blockquote p { margin: 0; padding: 0; }

/* --- DARK MODE PALE VARIANTS --- */
body.dark-mode main h2 { color: #d6eafe; border-bottom: 1px solid #777; }
body.dark-mode main h3 { color: #b0e0e6; } /* Powder Blue */
body.dark-mode main h4 { color: #f5f5dc; } /* Pale Beige */
body.dark-mode main h5 { color: #b0b0b0; } 
body.dark-mode main h6 { color: #e0e6ed; }
body.dark-mode em, body.dark-mode i { color: #ffeeea; }

/* Tighten spacing at the very top of content */
main h1:first-child, main h2:first-child, main article:first-child h2 {
    margin-top: 0 !important;
}

article p { 
    font-size: 1.2rem; 
    line-height: 1.2; 
    margin-bottom: 1.5rem; 
    text-align: justify; /* This justifies the text */
    hyphens: auto;        /* Helps justified text look better on mobile */
}

/* Light Mode Links */
p a:link, p a:visited, p a:active { 
    text-decoration: none; 
    color: #003366; 
}
p a:hover { 
    color: #0088cc; 
}

/* Dark Mode Link Overrides */
body.dark-mode p a:link, 
body.dark-mode p a:visited, 
body.dark-mode p a:active { 
    text-decoration: none; 
    color: #d6eafe; 
}
body.dark-mode p a:hover { 
    color: #fffacd; 
}

/* --- 5. TOP BUTTON --- */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    font-family: var(--sans-stack);
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    display: none;
    z-index: 1000;
    transition: all 0.2s ease-in-out;
}

#back-to-top:hover {
    background-color: #dce4e8;
    transform: translateY(-2px);
}

body.dark-mode #back-to-top:hover {
    background-color: #333333;
    color: white;
}

/* --- 6. FOOTER --- */
footer { 
    margin-top: 2rem; 
    padding: 1rem 0; 
    border-top: 1px solid var(--border-color); 
    text-align: center; 
    font-size: 0.8rem;
    font-family: var(--sans-stack);
}

footer a { text-decoration: none; color: var(--text-color) ;} 
footer a:hover { color: #4682b4; transition: color 0.2s ease; }

/* --- 7. MOBILE --- */
@media (max-width: 800px) {
    #layout { flex-direction: column; }
    #sidebar { width: 100%; height: auto; position: relative; top: 0; display: none; }
    #sidebar.show-mobile { display: block !important; }
    main { padding: 1.5rem 1rem; }
	article p { text-align:left; }
}

/* Mobile-Specific Adjustments for very narrow viewports */
@media (max-width: 500px) {
    .header-controls {
        /* justify-content: center; Centers the buttons on the second line */
        width: 100%;             /* Forces the buttons to their own line */
        margin-top: 0.5rem;
    }
}

@media print {
    header#site-header, #sidebar, .header-controls, #back-to-top { display: none !important; }
    body { background: white !important; color: black !important; display: block; }
    main { padding: 0; width: 100%; }
}