feat: replace inline styles with CSS classes in Header/Footer components for CSP compliance

### Related component

Header and footer

### Description

We're using `@bcgov/design-system-react-components` (v0.5.2) in our application and are trying to implement a strict Content Security Policy (CSP) that disallows `'unsafe-inline'` for the `style-src` directive to enhance security.

The `Header` and `Footer` components from the design system are using inline styles (via the `style` attribute), which are being blocked by our CSP policy. This results in:
- 56+ CSP violations in the browser console
- Potential layout/rendering issues when inline styles are blocked
- Inability to use strict CSP security policies

## Expected Behavior
Header and Footer components should use CSS classes instead of inline styles, making them compatible with strict CSP policies that don't allow `'unsafe-inline'`.

## Current Behavior
The components set inline styles via the `style` attribute, which are blocked by CSP policies that don't include `'unsafe-inline'` in `style-src`.

## Steps to Reproduce
1. Set up a React application with strict CSP:
```
Content-Security-Policy: style-src 'self' https://fonts.googleapis.com https://use.fontawesome.com;
```
(Note: no `'unsafe-inline'`)

2. Import and use Header/Footer components:
```tsx
import { Header, Footer } from '@bcgov/design-system-react-components'


{/* content */}


```

3. Open browser console - observe CSP violations for inline styles

## Environment
- Package: `@bcgov/design-system-react-components@0.5.2`
- React version: 19.0.0
- Browser: Chrome/Edge (any modern browser with CSP support)

## Proposed Solution
Replace inline styles with CSS classes. For example:
- Instead of `style={{ position: 'relative', display: 'block' }}`, use CSS classes
- Use CSS custom properties (CSS variables) for dynamic values if needed
- Ensure all styling can be achieved through external stylesheets

### Rationale

Strict CSP policies are a security best practice to prevent XSS attacks. Allowing `'unsafe-inline'` for styles reduces the security benefits of CSP. Making components CSP-compliant would allow government applications to maintain stronger security postures.

### Additional information

We've attempted CSS overrides, but CSP blocks inline styles before CSS can override them