/* -----------------------------------------------------------
   Locale-Specific Styling
   -----------------------------------------------------------
   This file is loaded AFTER global.css and after the CSS
   variables injected by layout.php. It is the correct place
   for per-locale overrides, tweaks, and motif-specific rules.
----------------------------------------------------------- */


/* -----------------------------------------------------------
   Typography
----------------------------------------------------------- */

body {
    font-family: var(--font-body);
    color: var(--color-text);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--color-primary);
}


/* -----------------------------------------------------------
   Buttons
----------------------------------------------------------- */

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}


/* -----------------------------------------------------------
   Navbar
----------------------------------------------------------- */

.navbar {
    background-color: var(--color-primary);
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--color-accent) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--color-secondary) !important;
}


/* -----------------------------------------------------------
   Hero / Parallax Sections
----------------------------------------------------------- */

.hero {
    background-image:
        url('/images/locale/overlay.png'),
        url('/images/locale/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-accent);
    padding: 4rem 2rem;
}

.parallax-section {
    background-image: url('/images/locale/parallax.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* -----------------------------------------------------------
   Cards
----------------------------------------------------------- */

.card {
    border: none;
    background-color: var(--color-background);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.card-title {
    color: var(--color-primary);
}

.card-subtitle {
    color: var(--color-secondary);
}


/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */

footer {
    background-color: var(--color-primary);
    color: var(--color-accent);
    padding: 1.5rem 0;
    text-align: center;
}