/* css/theme.css */

/* 1. Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

:root {
    /* --- COLOR PALETTE --- */
    --theme-header-color: #0F3D2E;    /* Deep Green */
    --theme-bg-dark: #1E1E1E;         /* Dark Grey (Body, Nav, Footer) */
    --theme-contrast: #F4F4F4;        /* Off-White (Content Cards, Light Text) */
    --theme-accent: #C9A24D;          /* Gold (Icons, Lines, Hovers) */
    --theme-secondary: #9E9E9E;       /* Grey (Secondary text, Dividers) */
    
    /* --- FONT CONFIG --- */
    --font-headers: 'Roboto Slab', serif;
    --font-body: 'Roboto', sans-serif;
    
    /* --- FONT SIZES --- */
    --size-h1: clamp(36px, 5vw, 44px);
    --size-h2: clamp(28px, 4vw, 32px);
    --size-text: 18px;
    --size-btn: 16px;
}

/* --- GLOBAL LAYOUT --- */
body {
    background-color: var(--theme-bg-dark);
    color: var(--theme-contrast);
    font-family: var(--font-body);
    font-size: var(--size-text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headers);
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: left; /* Forced Left Alignment */
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }

/* Secondary Text */
.text-muted, small, figcaption {
    color: var(--theme-secondary) !important;
    font-size: 0.9em;
    text-align: left;
}

/* Dividing Lines */
hr {
    border-color: var(--theme-secondary);
    opacity: 0.5;
}

/* --- COMPONENT: CONTENT CARD --- */
.content-card {
    background-color: var(--theme-contrast);
    color: #1E1E1E;
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border-top: 4px solid var(--theme-accent);
    
    /* ALIGNMENT CHANGE: Force left alignment */
    text-align: left; 
}

/* This specific rule overrides Bootstrap's "text-center" utility class 
   if it was used inside the content card in your HTML files */
.content-card, 
.content-card .text-center {
    text-align: left !important;
}

.content-card h1, 
.content-card h2, 
.content-card h3 {
    color: var(--theme-header-color);
}

/* --- COMPONENT: HERO HEADER (Image Title) --- */
header .container {
    text-align: left !important; /* Force title to left */
}

/* --- COMPONENT: NAVBAR --- */
.navbar-custom {
    background-color: var(--theme-bg-dark) !important;
    border-bottom: 1px solid var(--theme-secondary);
}

.navbar-custom .nav-link {
    color: var(--theme-contrast) !important;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--theme-accent) !important;
}

.navbar-toggler-icon {
    filter: invert(1);
}

/* --- COMPONENT: FOOTER --- */
footer {
    background-color: var(--theme-bg-dark);
    color: var(--theme-contrast);
    border-top: 1px solid var(--theme-secondary);
    padding: 20px 0;
    margin-top: auto;
    text-align: left; /* Footer text left aligned */
}

footer .container {
    /* Optional: Center the footer content container but keep text left, 
       or align everything left. Here we align content left. */
    display: flex;
    justify-content: flex-start; 
}

footer a {
    color: var(--theme-contrast);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--theme-accent);
    text-decoration: none;
}

/* --- COMPONENT: BUTTONS --- */
.btn {
    font-family: var(--font-headers);
    font-size: var(--size-btn);
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-primary, .btn-success, button {
    background-color: var(--theme-header-color) !important;
    border: 2px solid var(--theme-header-color) !important;
    color: var(--theme-contrast) !important;
}

.btn-primary:hover, .btn-success:hover, button:hover {
    background-color: var(--theme-bg-dark) !important;
    border-color: var(--theme-accent) !important;
    color: var(--theme-accent) !important;
}

/* --- SIDEBAR / IFRAMES --- */
iframe {
    background-color: var(--theme-contrast);
}

/* --- LINKS --- */
a {
    color: var(--theme-header-color);
    text-decoration: none;
}
a:hover {
    color: var(--theme-accent);
}