/* 
 * zola0.5 CSS - Main stylesheet for zolatimes.org
 * Base styles for typography, layout, and responsive design
 */

/* Tokens */
/* Architectural intent: these values define the publication's shared language so repeated literals are centralized and easier to evolve without altering behavior. */
:root {
 --color-page-bg: #edece5;
 --color-surface: #ffffff;
 --color-surface-alt: #fefdf9;
 --color-text: #000000;
 --color-heading: #34322c;
 --color-link: #0000ee;
 --color-nav-bg: #34322c;
 --color-nav-text: #ecf0f1;
 --color-nav-hover: #34495e;
 --color-nav-active: #2c5aa0;
 --color-mobile-menu-bg: #2c3e50;
 --color-rule: #8c8c8c;
 --color-border: #34495e;
 --color-shadow: rgba(0, 0, 0, 0.1);
 --color-white: #ffffff;

 /* Masthead design tokens */
 /* Use these to keep the top-of-page brand block consistent without duplicating literal values inside component rules. */
 --masthead-bg: var(--color-page-bg);
 --masthead-text-align: left;
 --masthead-image-display: block;
 --masthead-link-color: var(--color-link);
 --masthead-link-decoration: underline;

 --font-family-body: Georgia, "Times New Roman", Times, serif;
 --font-family-nav: Verdana, sans-serif;
 --font-size-small: small;

 --space-0: 0;
 --space-xs: 0.5rem;
 --space-sm: 0.75rem;
 --space-md: 1rem;
 --space-lg: 1.5rem;
 --space-block: 1em;
 --space-article-gutter: 10px;
 --space-article-offset: 4rem;

 --width-content: 80%;
 --width-content-md: 85%;
 --width-content-sm: 90%;
 --width-nav-shell: 65px;
 --width-nav-shell-mobile: 50px;
 --max-width-container: 1200px;
 --nav-hamburger-width: 30px;
 --nav-radius: 4px;
} 

/* Base */
/* Reset */ 
* { 
 box-sizing: border-box; 
} 

body { 
 background-color: var(--color-page-bg); 
 font-family: var(--font-family-body); 
 margin: var(--space-0); 
 padding: var(--space-0); 
} 

/* Main container */ 
main { 
 width: 100%; 
 margin: 0; 
 padding: 0; 
} 

/* Links */ 
a { 
 color: var(--color-link); 
 text-decoration: underline; 
} 

/* Typography */
h1 { 
 color: var(--color-text); 
 text-align: center; 
} 
h2 { 
 color: var(--color-heading); 
 text-align: center; 
  
} 
h3 { 
 color: var(--color-heading); 
 text-align: center; 
 margin: var(--space-block) 0; 
} 
/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Date paragraph styling */ 
body > p { 
 text-align: left; 
 margin: var(--space-article-gutter); 
} 

/* Layout */
.center-image { 
 text-align: center; 
 margin: 1em 0; 
} 

hr { 
 border: none; 
 border-top: 1px solid var(--color-rule); /* WCAG SC 1.4.11: ≥3:1 non-text contrast on both #fff and #fefdf9 */ 
 margin: var(--space-block) 0; 
} 

/* Masthead */
/*
 * Masthead responsibilities:
 * - act as the publication's top-of-page brand anchor
 * - preserve legacy support for the native header element and the masthead class
 * - keep the logo/image and title link visually consistent with the rest of the site
 * - allow future semantic markup without changing layout or rendering behavior
 *
 * Safe, non-visual attributes to prefer when the markup is updated later:
 * role="banner" on the masthead container, aria-label="Site masthead" for clarity,
 * descriptive alt text on the logo image, and a title on brand links when appropriate.
 * These attributes improve maintainability without altering the appearance of the existing page.
 */

.masthead {
 background-color: var(--masthead-bg);
 text-align: var(--masthead-text-align);
}


.masthead-link {
  display: block;
  width: 100%;
  color: var(--masthead-link-color);
  text-decoration: var(--masthead-link-decoration);
}


.masthead-image {
  display: var(--masthead-image-display);
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Navigation */
/* Editorial publication pattern: navigation is a site utility layer distinct from the masthead and article content. */
.nav-shell {
	background-color: var(--color-nav-bg);
	height: var(--width-nav-shell);
	position: relative;
}

.main-navigation {
    background-color: var(--color-nav-bg);
    padding: var(--space-sm) 0;
    box-shadow: 0 2px 4px var(--color-shadow);
    margin-bottom: var(--space-md);
    position: relative;
}

.nav-container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    z-index: 1000;
    width: auto;
    height: auto;
    min-height: 44px;
    min-width: 44px;
}

.hamburger-line {
    display: block;
    width: var(--nav-hamburger-width);
    height: 4px;
    background-color: var(--color-nav-text);
    margin: 6px auto;
    transition: all 0.3s ease;
    transform-origin: center;
    border-radius: 2px;
    position: relative;
}

.nav-toggle-open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.nav-toggle-open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle-open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.nav-item {
    margin: 0;
}

.nav-link {
    color: var(--color-nav-text);
    text-decoration: none;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--nav-radius);
    transition: background-color 0.3s ease;
    display: block;
    white-space: nowrap;
    font-family: var(--font-family-nav);
}

.nav-link:hover {
    background-color: var(--color-nav-hover);
    color: var(--color-white);
}

.nav-link.active {
    background-color: var(--color-nav-active);
    color: var(--color-white);
}

/* Article */
.article { 
 width: var(--width-content); 
 background-color: var(--color-surface); 
 margin-left: auto; 
 margin-right: auto; 
 padding: var(--space-article-gutter); /* Add table cell padding for proper gutters */ 
 box-sizing: border-box; 
} 

.article-content { 
 text-align: justify; 
 padding: 1px; 
} 
.article-content p { 
 text-align: justify; 
 margin: 0 0 1em 0; 
} 
.article-content p:last-of-type { 
 margin-bottom: 0; 
} 

.quote-attribution { 
 text-align: center; 
 margin: 0 0 1em 0; 
 font-style: italic; 
} 

.article-note { 
 margin: 1em 0; 
} 
.article-note p { 
 margin: 0 0 0.5em 0; 
} 

.article-footer { 
 text-align: center; 
} 
.article-source { 
 font-size: var(--font-size-small); 
 text-align: center !important; 
 margin: var(--space-0); 
} 

/* Footer */
.site-footer { 
 text-align: center; 
 margin: 1em 0; 
} 

.copyleft {
    display: inline-block;
    transform: scaleX(-1);
}

/* Responsive */
@media (max-width: 768px) { 
 article { 
 width: var(--width-content-md); 
 } 
 .article { 
 width: var(--width-content-md); 
 } 
}
@media (max-width: 480px) { 
 article { 
 width: var(--width-content-sm); 
 } 
 article p { 
 text-align: left; 
 } 
 .article { 
 width: var(--width-content-sm); 
 } 
 .article-content { 
 text-align: left; 
 } 
 .article-content p { 
 text-align: left; 
 } 
}

@media (max-width: 768px) {
    .main-navigation {
        padding: var(--space-md) 0;
    }
    
    .nav-shell {
        height: var(--width-nav-shell-mobile);
    }
    
    .nav-toggle {
        display: block;
        position: absolute;
        right: var(--space-md);
        top: 25px;
        transform: translateY(-50%);
    }
    
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-mobile-menu-bg);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 4px 6px var(--color-shadow);
        z-index: 999;
    }
    
    .nav-menu-open {
        max-height: 400px;
    }
    
    .nav-item {
        border-bottom: 1px solid var(--color-border);
    }
    
    .nav-item:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        padding: var(--space-md);
        border-radius: 0;
    }
    
    .nav-container {
        padding-right: var(--space-article-offset); /* Make room for hamburger button */
    }
}

@media (max-width: 480px) {
    .nav-link {
        font-size: 0.9rem;
        padding: 0.875rem 1rem;
    }
}