/* Header bar and footer of the public pages (index.html, resources.html),
   for pages that load them from this file: the articles list
   (blog-archive.html) and article pages (article-template.html).
   Load it after the page's own styles. */
:root {
    --primary-color: #1a365d;
    --primary-hover: #2d4a66;
    --secondary-color: #2b6cb0;
    --accent-gold: #d69e2e;
    --text-dark: #1a202c;
    --text-light: #4a5568;
    --bg-light: #f7fafc;
    --oxford-navy: #14243d;
}
body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .nav-link {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
}
.text-primary { color: var(--primary-color) !important; }

/* Header bar */
.navbar { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 1rem 0; }
.navbar-brand { font-size: 2rem; font-weight: 800; color: var(--primary-color) !important; letter-spacing: -1px; }
.navbar-brand-text { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.navbar-brand-tagline {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.5px; color: var(--text-light);
    display: flex; align-items: center; gap: 8px;
}
.navbar-brand-tagline::before, .navbar-brand-tagline::after { content: ''; width: 16px; height: 1px; background: #87a4c8; }
.nav-link { font-weight: 500; color: var(--text-dark) !important; margin: 0 0.5rem; transition: color 0.3s ease; }
.nav-link:hover, .nav-link.active { color: var(--secondary-color) !important; }
.navbar-collapse.show { background-color: white; padding: 15px; border-radius: 8px; margin-top: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.navbar .btn-primary { background: var(--secondary-color); border: none; padding: 12px 24px; font-weight: 600; }
.navbar .btn-primary:hover { background: var(--primary-hover); }
.navbar .btn-outline-primary { color: var(--secondary-color); border-color: var(--secondary-color); padding: 12px 24px; font-weight: 600; }
.navbar .btn-outline-primary:hover { background: var(--secondary-color); border-color: var(--secondary-color); color: white; }

/* Footer */
.footer { background: #1a202c; color: white; padding: 60px 0 40px; }
.footer-links { display: flex; gap: 30px; margin-bottom: 30px; flex-wrap: wrap; }
.footer-links a { color: #a0aec0; text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid #2d3748; padding-top: 30px; text-align: center; color: #718096; }