/* From Electrum to Empire - shared stylesheet
   Every page links this file. Page-specific rules are scoped by the
   body class: page-home, page-collection, page-coin, page-text. */

:root {
    --bg-color: #000000;
    --label-color: #c5a065;
    --value-color: #e0e0e0;
    --gap-vert: 8px;
    --gap-horz: 30px;
}

body {
    background-color: var(--bg-color);
    color: var(--value-color);
    font-family: 'Lato', sans-serif;
    margin: 0;
}

body.page-home { padding: 0; }
body.page-collection { padding: 40px 20px; }
body.page-text { padding: 40px 20px; }
body.page-coin {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- navigation bar (all pages) ---- */

.nav-bar {
    position: relative;
    text-align: right;
    padding: 20px 40px;
    z-index: 1000;
}
.nav-bar a {
    font-family: 'Cinzel', serif;
    color: var(--label-color);
    text-decoration: none;
    margin-left: 30px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}
.nav-bar a:hover { color: #fff; }

/* the coin page centres its container with a column flex body, so the
   nav bar has to claim the full width to stay right-aligned */
body.page-coin .nav-bar {
    width: 100%;
    box-sizing: border-box;
}

/* ---- containers ---- */

body.page-collection .container { max-width: 1200px; margin: 0 auto; }
body.page-text .container { max-width: 900px; margin: 0 auto; }
body.page-coin .container { max-width: 1000px; width: 100%; text-align: center; }

/* ---- headings ---- */

body.page-collection h1,
body.page-text h1 {
    font-family: 'Cinzel', serif;
    text-align: center;
    color: #fff;
    letter-spacing: 3px;
    margin-bottom: 60px;
    font-size: 2.5rem;
}

body.page-coin h1 {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 15px;
    margin-bottom: 2px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5rem;
}

/* ---- home ---- */

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}
.hero-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 40px;
    letter-spacing: 3px;
}
.featured-coin { max-width: 600px; width: 100%; margin-bottom: 30px; }
.featured-coin img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.tagline { font-size: 1.1rem; color: #aaa; max-width: 700px; line-height: 1.6; }

/* ---- collection grid ---- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
}
.coin-card {
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease;
}
.coin-card:hover { transform: translateY(-8px); }
.coin-card img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.coin-authority {
    font-family: 'Cinzel', serif;
    color: var(--label-color);
    font-size: 1rem;
    letter-spacing: 1px;
}

/* ---- individual coin page ---- */

.coin-display { margin-bottom: 15px; }
.coin-image {
    max-width: 850px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    display: block;
    margin: 0 auto;
}
.subtitle {
    font-size: 0.9rem;
    color: var(--label-color);
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: block;
}
.info-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-vert) var(--gap-horz);
    margin-bottom: 30px;
}
.data-item { text-align: center; }
.label {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--label-color);
    display: block;
    margin-bottom: 2px;
}
.value {
    font-size: 0.8rem;
    line-height: 1.3;
    font-weight: 300;
    color: var(--value-color);
}
.navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.nav-btn {
    font-family: 'Cinzel', serif;
    color: var(--label-color);
    text-decoration: none;
    padding: 10px 30px;
    border: 1px solid var(--label-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.nav-btn:hover { background: var(--label-color); color: #000; }
.nav-btn.disabled { opacity: 0.3; pointer-events: none; }
.back-btn { font-weight: bold; }

/* ---- chronicles / about ---- */

.about-section,
.essay-section {
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 30px;
}
.section-title,
.essay-title {
    font-family: 'Cinzel', serif;
    color: var(--label-color);
    font-size: 1.5rem;
    letter-spacing: 2px;
}
.section-title { margin-bottom: 20px; }
.essay-title { margin-bottom: 15px; }
.essay-date {
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 20px;
    font-style: italic;
}
.content { line-height: 1.8; font-size: 1rem; }
.essay-content { line-height: 1.8; font-size: 1rem; margin-bottom: 20px; }
.contact-info {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.email-link {
    color: var(--label-color);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}
.email-link:hover { color: #fff; text-decoration: underline; }
.coin-link {
    display: inline-block;
    color: var(--label-color);
    text-decoration: none;
    border: 1px solid var(--label-color);
    padding: 8px 20px;
    border-radius: 2px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}
.coin-link:hover { background: var(--label-color); color: #000; }

/* Scoped to page-text so the generated pages render exactly as before
   -- only chronicles.html and about.html had these rules. */
@media (max-width: 768px) {
    body.page-text .nav-bar { padding: 15px 20px; }
    body.page-text .nav-bar a { margin-left: 15px; font-size: 0.8rem; }
    body.page-text h1 { font-size: 1.8rem; }
}

/* Footnote-style acknowledgements (About page). */
.acknowledgements {
    max-width: 900px;
    margin: 60px auto 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.6;
    color: #777;
}

/* Inline text link within essay prose (e.g. external references). */
.inline-link {
    color: var(--label-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}
.inline-link:hover { color: #fff; }