/* 
    # # # MAIN.CSS # # #
    
    Primary CSS sheet for Library of Genos Dunkirk website.

    Created: 09-10-2025  V_1.0
    Updated: —
    Created by: Jo

*/

/*  --- FONT IMPORT --- */
@font-face {
    font-family: 'Calisto';
    src: url('/fonts/calisto.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Garamond';
    src: url('/fonts/garamond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Garamond';
    src: url('/fonts/garamond-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Hack';
    src: url('/fonts/hack.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Norwester';
    src: url('/fonts/norwester.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* --- CSS VARIABLES --- */
:root {
    --font-primary: 'Garamond', sans-serif;
    --font-large-header: 'Calisto', serif;
    --font-small-header: 'Norwester', sans-serif;
    --font-monospace: 'Hack', monospace;
    --color-text: #bbc9d7;              /* White Text */
    --color-text-muted: #9da7b1;        /* Muted Text */
    --color-accent-gold: #d4af37;       /* Gold Header & Accent Color */
    --color-accent-blue: #4f79c2;       /* Blue Header & Accent Color */
    --color-accent-lightblue: #61afef;  /* Light Blue color for Links */
    --color-accent-red: #c52a32;        /* Red Accent Color RARE */
    --color-accent-purple: #5f4f97;     /* Purple Accent Color RARE */
    --color-bg-page: #0f0f13;           /* Near Black BG color */
    --color-bg-content: #161822;        /* Blue-Charcoal Content BG Color */
    --color-bg-content-warning: #a22b3040; /* Red Warning BG Color */
    --color-bg-content-light: #262832;  /* Lighter Color for Navigation*/
    --color-border: #444444;            /* Dark Grey Border */
}

/* --- GENERAL STYLES --- */
body {
    background-color: var(--color-bg-page);
    font: var(--font-primary);
    color: var(--color-text);
    line-height: 150%;
    word-spacing: 2px;
    margin: 0;
    padding: 0;
}

/* Links */
a {
    color: var(--color-accent-lightblue);
    text-decoration: none; 
    border-bottom: 2px solid transparent; 
    transition: all 0.2s ease-in-out; 
}

a:visited {
    color: var(--color-accent-lightblue);
}

a:hover {
    color: var(--color-accent-blue); 
    border-bottom-color: var(--color-accent-blue); 
}

a:active {
    color: var(--color-accent-red);
    border-bottom-color: var(--color-accent-red); 
}

/* Controller for 3 section separation */
.site-wrapper {
    display: grid;
    grid-template-columns: 230px 1fr 230px;
    gap: 30px;
    padding: 20px;
    max-width: 1800px;
    margin: 0 auto;
}

/* --- SITE NAVIGATION --- */
.site-nav {
    position: relative; 
    overflow: hidden;   
    background-color: var(--color-bg-content);
    border: 1px solid var(--color-border);
    border-right: 2px solid var(--color-accent-gold);
    /*height: fit-content;*/
    position: sticky;
    top: 20px;
}

.site-nav .nav-header {
    font-family: var(--font-large-header);
    font-size: 1.6em;
    font-weight: 500;
    text-align: center;
    color: var(--color-accent-gold);
    margin: 15px 15px 10px 15px;
    padding: 0px 0px 15px 0px;
    border-bottom: 1px solid var(--color-accent-gold);
}

.site-nav .nav-header a {
    color:var(--color-accent-gold);
    border-bottom: none;
}

.site-nav .nav-header a:visited {
    color: var(--color-accent-gold);
}

.site-nav .nav-header a:hover {
    color: var(--color-accent-blue); 
}

.site-nav .nav-header a:active {
    color: var(--color-accent-red);
}

.site-nav h6 {
    font-family: var(--font-large-header);
    font-size: 1em;
    font-weight: 400;
    text-align: center;
    color: var(--color-accent-blue);    
    margin-top: 8px;
    margin-bottom: 0px 
}

.site-nav h3 {
    font-family: var(--font-large-header);
    font-size: 1.4em;
    font-weight: 400;
    text-align: center;
    color: var(--color-accent-gold);    
    margin-top: 0;
    margin-bottom: 10px 
}

.site-nav .nav-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    width: 300%;
    transition: transform 0.4s ease-in-out;
}

.site-nav .nav-panel {
    padding: 0px 15px 15px 15px;
}

.site-nav .nav-wrapper.panel-2 {
    transform: translateX(-33.333%);
}

.site-nav .nav-wrapper.panel-3 {
    transform: translateX(-66.666%)
}

/* Remove formatting for UL for site-nav */
.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-nav li button{
    display: block;
    width: 100%;
    font-family: var(--font-large-header);
    color: var(--color-text);
    font-size: 1.1em;
    text-align: left;
    background-color: var(--color-bg-content);
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s ease-in-out;
}

.site-nav li a {
    display: block;
    width: 100%;
    font-family: var(--font-large-header);
    color: var(--color-text-muted);
    font-size: 0.9em;
    text-align: left;
    background-color: var(--color-bg-content);
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s ease-in-out;
}

/* Add float effect to navigation menu */
.site-nav li button:hover {
    background-color: var(--color-bg-content);
    color: var(--color-accent-blue);
    padding-left: 25px;
    border-bottom: 1px solid var(--color-accent-blue);
}

.site-nav li a:hover {
    background-color: var(--color-bg-content);
    color: var(--color-accent-blue);
    padding-left: 10px;
    border-bottom: 1px solid var(--color-accent-blue);
}

/* Modify float effect to back button navigation */
.site-nav li button.back-button:hover {
    color: var(--color-accent-red);
    padding-left: 40px;
    border-bottom: 1px solid var(--color-accent-red);
}

/* Add an arrow indicator to the toggle links */
.site-nav li button.nav {
    position: relative;
}

.site-nav .back-button {
    position: relative;
    padding-left: 30px;
}

.site-nav li button.nav::after {
    content: '▶';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    font-size: 1em;
    color: var(--color-text-muted);
}

.site-nav li button.back-button::before {
    content: '◀';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    font-size: 1em;
    color: var(--color-accent-red);
}

/* --- PAGE TABLE OF CONTENTS --- */
.page-toc {
    padding: 15px;
    background-color: var(--color-bg-content);
    border: 1px solid var(--color-border);
    border-left: 2px solid var(--color-accent-gold);
    height: fit-content;
    position: sticky;
    top: 20px;
    font-size: 0.9em;
}

.page-toc .toc-header {
    font-family: var(--font-large-header);
    font-size: 1.8em;
    font-weight: 500;
    text-align: center;
    color: var(--color-accent-gold);
    margin: 0 5px 15px 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

/* Remove formatting for UL for site-nav */
.page-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-toc li a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--color-text-muted);
    transition: all 0.2s ease-in-out;
}

/* Add hover effect for table navigation menu */
.page-toc li a:hover {
    color: var(--color-accent-blue);
    background-color: #2a2e34;
}

.page-toc .sub-item a {
    padding: 2px 5px 2px 10px;
    margin-left: 10px;
    border-left: 2px solid var(--color-accent-blue);
    font-size: 1em;
}

/* --- MAIN ARTICLE CONTENT--- */
.article-container{
    padding: 40px 40px;
    background-color: var(--color-bg-content);
    border: 1px solid var(--color-border);
}

.entry-header {
    margin-bottom: 14px;
    padding-bottom: 30px;
    border-bottom: 3px double var(--color-accent-gold);
    line-height: 250%;
}

.entry-header h1 {
    text-align: center;
    font-family: var(--font-large-header);
    font-size: 2.5em;
    color: var(--color-accent-gold);
    margin: 0;
    font-weight: 400;
}

.entry-header h6 {
    text-align: left;
    font: var(--font-small-header);
    font-size: 1.3em;
    color: var(--color-text);
    margin-top: 10px;
    margin-bottom: 0px;
    font-weight: 600;
}

.entry-header address {
    line-height: 120%;
}

.content-wrapper {
    display: flow-root;
}

.main-column p , .entry-paragraph {
    margin: 12px 0 16px 0;
    font-size: 1.1em;
    text-align: justify;
    text-indent: 25px;
}

.main-column h3 {
    text-align: left;
    font-family: var(--font-large-header);
    font-size: 1.7em;
    color: var(--color-accent-gold);
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-accent-gold);
    display: flow-root;
}

.main-column h4 {
    text-align: left;
    font-family: var(--font-large-header);
    font-size: 1.45em;
    color: var(--color-accent-blue);
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-accent-blue);
    width: 50%;
    display: flow-root;
}

.main-column blockquote {
    padding: 10px 20px 10px 25px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-style: italic;
    font-size: 1.1em;
    color: var(--color-text-muted);
    background-color: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-left: 6px solid var(--color-border);
}

.side-column {
    float: right;
    width: 35%;
    margin-left: 25px;
}

.info-box {
    text-align: center;
    border: 1px solid var(--color-border);
    padding: 5px;
    margin-bottom: 30px;
}

.info-box img {
    margin: 15px 0;
    width: 200px;
    height: auto;
}

.info-box h3 {
    text-align: center;
    font-family: var(--font-large-header);
    font-size: 1.3em;
    font-weight: 400;
    color: var(--color-accent-gold);
    margin-top: 0;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--color-bg-page);
    border: 1px solid var(--color-border);
}

.info-box h4 {
    text-align: center;
    font-family: var(--font-large-header);
    font-size: 1.1em;
    font-weight: 400;
    color: var(--color-accent-gold);
    margin-top: 0;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--color-bg-page);
    border: 1px solid var(--color-border);
}

.info-box table {
    width: 100%;
    border-collapse: collapse;
}

.info-box th {
    text-align: left;
    font-family: var(--font-large-header);
    font-size: .9em;
    font-weight: 400;
    padding: 4px;
    width: 30%;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-accent-blue);
}

.info-box td {
    text-align: left;
    font-size: .9em;
    font-weight: 400;
    color: var(--color-text-muted);
    padding: 6px;
    border-bottom: 1px solid var(--color-border);
}

footer {
    font-size: 1em;
    text-align: center;
    line-height: 120%;
    border-top: 3px double var(--color-accent-gold);
}

footer img {
    margin: 15px;
    width: 500px;
    height: auto;
}

footer address{
    display: inline-block;
    width: 400px;
    padding: 8px;
    font-style: normal;
    background-color: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

footer p {
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.warning {
    background-color: var(--color-bg-content-warning);
    border: 1px solid var(--color-accent-red);
    border-left: 4px solid var(--color-accent-red);
    padding: 10px;
    margin: 20px 0;
    color: var(--color-text);
    padding: unset;
}

.warning header {
    font-family: var(--font-large-header);
    margin-top: 0;
    padding-top: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-accent-red);
}

.warning .icon { 
    float: left;
    width: 2.4em;
    height: 2.4em;
    margin: 13px 10px 10px 10px;
    background-color: var(--color-accent-red);

    mask-image: url(/images/icons/svg-icons/warning-exclamation-sign-in-filled-triangle.svg);
    mask-size: contain;
}

.warning header h5 {
    font-family: var(--font-large-header);
    font-size: 1.4em;
    font-weight: 500;
    color: var(--color-accent-red);
    margin: 0;
    padding: 10px 10px 0 10px;
}

.warning header i {
    font-family: var(--font-large-header);
    font-size: 0.9em;
    font-weight: 400;
    font-style: italic;
    color: var(--color-accent-red);
    margin: unset;
}

.warning .content {
    padding: 10px;
}

.warning .content hr {
    border: none;
    border-top: 1px solid var(--color-text-muted);
}
.warning .content p {
    margin: unset;
    font-size: 1em;
}

.warning .content i {
    font-style: italic;
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* --- Mobile-Friendly Responsive Layout --- */
@media (max-width: 1100px) {
    .site-wrapper {
        grid-template-columns: 1fr; /* Stack everything in a single column */
        padding: 20px;
        gap: 30px;
    }

    .site-nav, .page-toc {
        position: static; /* Remove sticky positioning on mobile */
        height: auto;
        border: 1px solid var(--color-border);
    }

    .site-nav .nav-header { 
        font-size: 1.5em; 
    }

    .article-container { 
        padding: 20px; 
    }

    .entry-header address {
        font-size: 0.9em;
    }

    .main-column p {
        text-align: left;
    }
        
    .info-box table, .info-box thead, .info-box tbody, .info-box th, .info-box td, .info-box tr {
        display: block;
    }

    .side-column {
        float: none;
        width: 100%;
        margin: 0 0 30px 0;
    }

    .info-box th {
        width: 100%;
        border-bottom: 1px solid var(--color-accent-blue); 
    }
    
    .info-box td {
        border-bottom: 2px solid var(--color-border); 
        padding-bottom: 15px;
        margin-bottom: 10px;
    }

    .info-box tr:last-child td {
        border-bottom: none; /* Remove border from the very last item */
    }

    .info-box img {
        width: 90%;
        max-width: 580px;
    }

    footer img {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 500px;
        height: auto; 
    }

    footer address {
        width: 90%; 
        max-width: 400px;
    }
}