/* Add this at the very top of your style.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* -----------------------------------------------------------
GLOBAL & BODY SETTINGS
----------------------------------------------------------- */
body { 
    font-family: 'Georgia', serif; 
    line-height: 1.6; 
    color: #222; 
    margin: 0; 
    padding: 0; 
    background: #fdfcf0; /* Parchment Background */
}

/* -----------------------------------------------------------
HEADER, LOGO & NAVIGATION
----------------------------------------------------------- */
header { 
    background: #C00000; 
    border-bottom: 5px solid #d4a017; /* Gold Imperial Border */
    padding: 15px; 
    text-align: center; 
}

header img { 
    max-width: 100%; 
    height: auto; 
}

nav { 
    background: #000000; 
    padding: 12px; 
    text-align: center; 
}

nav a { 
    color: white; 
    margin: 0 15px; 
    text-decoration: none; 
    font-weight: bold; 
    font-family: Arial, sans-serif; 
    font-size: 0.95em;
    transition: 0.3s;
}

nav a:hover { 
    color: #ffd700; /* Gold hover effect */
}

/* -----------------------------------------------------------
CONTAINERS & LAYOUT
----------------------------------------------------------- */
.container { 
    max-width: 850px; 
    margin: 30px auto; 
    background: white; 
    padding: 40px; 
    border-radius: 2px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
}

/* -----------------------------------------------------------
TYPOGRAPHY (Standardized for all pages)
----------------------------------------------------------- */
h1 { color: #b30000; margin-top: 0px; border-bottom: 2px solid #d4a017; padding-bottom: 10px; font-size: 32px; text-align: center; margin-bottom: 25px; }
h2 { color: #800000; margin-top: 45px; border-bottom: 1px solid #eee; padding-bottom: 5px; font-variant: small-caps; }
h3 { color: #b30000; margin-top: 20px; }
p { line-height: 1.6; margin-top: 5px; margin-bottom: 1.5em; }
b, strong { color: #b30000; }

/* -----------------------------------------------------------
REUSABLE COMPONENTS (Ads & Images)
----------------------------------------------------------- */
.ad-space { 
    background: #f4f4f4; 
    margin: 25px 0; 
    text-align: center; 
    padding: 15px; 
    border: 1px solid #eee; 
    font-size: 12px;
    color: #999;
}
        
img { max-width: 100%; height: auto; display: block; margin: 20px auto; border: 0px; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: HOME PAGE GRID
----------------------------------------------------------- */
.hero { background: #800000; color: white; text-align: center; padding: 60px 20px; border-bottom: 5px solid #d4a017; }
.hero h1 { color: #ffd700; border-bottom: none; font-size: 42px; margin: 0; }
.hero p { font-size: 1.2em; max-width: 700px; margin: 20px auto; color: white; }

.trust-bar { text-align: center; font-size: 0.9em; color: #666; margin-bottom: 20px; font-style: italic; }
        
.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.pillar-card { border: 1px solid #eee; padding: 25px; border-radius: 5px; transition: 0.3s; background: #fffcf5; }
.pillar-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #d4a017; }
.pillar-card h3 { color: #b30000; margin-top: 0; }
.pillar-card p { font-size: 0.95em; color: #444; }
.pillar-link { color: #b30000; font-weight: bold; text-decoration: none; display: inline-block; margin-top: 10px; }
        
/* -----------------------------------------------------------
PAGE-SPECIFIC: ARCHITECTURE
----------------------------------------------------------- */
.diagram-box { background: #f9f9f9; border: 1px solid #ddd; padding: 20px; text-align: center; margin: 25px 0; font-style: italic; color: #555; }
.arch-feature { border-left: 4px solid #d4a017; padding-left: 20px; margin: 25px 0; }
.arch-feature b { color: #b30000; display: block; font-size: 1.1em; }
 
/* -----------------------------------------------------------
PAGE-SPECIFIC: GLOSSARY (REPAIRED FOR CHROME)
----------------------------------------------------------- */
.glossary-item { 
    margin: 20px 0; 
    clear: both; /* Prevents items from floating into each other */
    overflow: hidden; /* Ensures the container wraps around the contents */
}

.glossary-item b { 
    color: #b30000; 
    font-size: 1.1em; 
    display: block; /* Changed to block for better Chrome stability */
    width: 180px; 
    float: left; /* Floats the word to the left */
    margin-bottom: 5px;
}

.glossary-item span { 
    display: block; 
    margin-left: 190px; /* Pushes text to the right of the 180px bold word */
    padding-left: 15px; 
    border-left: 2px solid #d4a017; 
    min-height: 1.6em;
}

/* Fix for mobile Chrome - stacks them vertically */
@media (max-width: 600px) {
    .glossary-item b { 
        width: 100%; 
        float: none; 
    }
    .glossary-item span { 
        margin-left: 10px; 
        border-left: 2px solid #d4a017; 
    }
}

/* -----------------------------------------------------------
PAGE-SPECIFIC: FACTS / VOCAB
----------------------------------------------------------- */
.fact-list { list-style: none; padding: 0; }
.fact-item { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px dashed #ddd; position: relative; padding-left: 60px; }
.fact-number { position: absolute; left: 0; top: 0; font-size: 28px; font-weight: bold; color: #d4a017; font-family: 'Arial Black', sans-serif; opacity: 0.8; }
.fact-item b { color: #b30000; font-size: 1.15em; display: block; margin-bottom: 5px; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: QUIZ ENGINE
----------------------------------------------------------- */
.question { margin-bottom: 30px; padding: 20px; border: 1px solid #eee; border-radius: 5px; background: #fffcf5; }
.option { display: block; padding: 12px; margin: 10px 0; background: #fff; border: 1px solid #ddd; cursor: pointer; border-radius: 4px; transition: 0.2s; font-family: sans-serif; }
.option:hover { border-color: #b30000; background: #fff9f9; }
#results-area { display: none; margin-top: 30px; padding: 25px; border: 2px solid #d4a017; background: #fffef0; text-align: center; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: SITEMAP LISTS
----------------------------------------------------------- */
.sitemap-list { list-style: none; padding: 0; }
.sitemap-list li { margin: 15px 0; padding-left: 25px; position: relative; }
.sitemap-list li::before { content: "•"; color: #d4a017; font-size: 1.5em; position: absolute; left: 0; top: -5px; }
.sitemap-list a { color: #b30000; font-weight: bold; text-decoration: none; font-size: 1.1em; }
.sitemap-list a:hover { text-decoration: underline; color: #000; }
.sitemap-list p { margin: 5px 0 0 0; font-size: 0.9em; color: #666; font-style: italic; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: CONTACT PAGE & BUTTONS
----------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; }
.contact-form-box { background: #fffcf5; padding: 25px; border: 1px solid #eee; border-radius: 4px; text-align: center; }
.btn-email { display: block; background: #b30000; color: white !important; padding: 15px; text-decoration: none; font-weight: bold; border-radius: 4px; transition: 0.3s; }
.btn-email:hover { background: #000; }

/* -----------------------------------------------------------
FOOTER
----------------------------------------------------------- */
footer { text-align: center; padding: 30px; font-size: 14px; color: #fff; background: #C00000; }
        
/* -----------------------------------------------------------
MOBILE RESPONSIVENESS
----------------------------------------------------------- */
@media (max-width: 768px) {
    .container { padding: 20px; margin: 10px; }
    .contact-grid, .grid-container, .vocab-grid { grid-template-columns: 1fr; }
    nav a { display: inline-block; margin: 5px 10px; font-size: 0.85em; }
    h1 { font-size: 26px; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: ABOUT
----------------------------------------------------------- */    
.mission-box { background: #fffcf5; border: 1px solid #d4a017; padding: 25px; margin: 25px 0; font-style: italic; text-align: center; font-size: 1.1em; }

.timeline-item { border-left: 3px solid #C00000; padding-left: 20px; margin: 20px 0; }
.timeline-item b { color: #b30000; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: WOMEN
----------------------------------------------------------- */ 
.era-note { font-style: italic; color: #666; border: 1px solid #eee; padding: 15px; margin-bottom: 20px; font-size: 0.9em; background: #fdfdfd; }
.section-box { margin: 25px 0; padding-left: 20px; border-left: 3px solid #d4a017; }
        
.hierarchy-list { background: #fffcf5; border: 1px solid #e2d1a3; padding: 20px; border-radius: 4px; }
.hierarchy-list li { margin-bottom: 10px; }
.hierarchy-list b { color: #b30000; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: WOMEN
----------------------------------------------------------- */ 
.statue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 25px 0; }
.statue-card { border: 1px solid #eee; padding: 15px; background: #fffcf5; border-radius: 4px; }
.statue-card img { width: 100%; height: auto; border-radius: 3px; margin-bottom: 10px; }
.statue-card b { color: #b30000; display: block; font-size: 1.1em; }
        
.highlight-box { background: #f0f7ff; border-left: 5px solid #0056b3; padding: 20px; margin: 25px 0; }

/* -----------------------------------------------------------
PAGE-SPECIFIC: COLOUR
----------------------------------------------------------- */ 
.color-card { display: flex; align-items: center; margin: 25px 0; border: 1px solid #eee; border-radius: 4px; overflow: hidden; }
.color-swatch { width: 100px; height: 150px; flex-shrink: 0; }
.color-info { padding: 20px; }
.color-info b { color: #b30000; font-size: 1.2em; }
        
.red-swatch { background-color: #B30000; }
.yellow-swatch { background-color: #FFD700; }
.green-swatch { background-color: #2E8B57; }
      
}