:root {
    --color-primary: #0b4a6f;
    --color-accent: #f4b400;
    --bg: #ffffff;
    --text: #222222;
    --muted: #6c757d;
    --max-width: 1100px;
    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 2rem;
    --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container { /* use Bootstrap's native container sizing to keep alignment consistent */ }

.site-name h1, .site-name .h1 { font-size: 1.6rem; margin: 0; font-weight: 600; }

.branding { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.navbar-brand img { height: 56px; width: auto; display: block; }

.navbar { padding: 0.4rem 0; }

/* Ensure branding is visible on dark backgrounds (dark mode) */
.branding { color: #fff; text-decoration: none; }
.branding .site-name { color: #fff; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,0.45); font-size: 1.05rem; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.92); }
.navbar-brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.navbar-brand img { height: 44px; width: auto; display: block; }

/* Horizontal dividers: center and limit width for visual dividers.
   Keep Bootstrap dropdown dividers and the explicit .border-top full-width. */
hr:not(.dropdown-divider) {
    border: none;
    border-top: 1px solid #dee2e6;
    /* limit width so decorative dividers don't touch screen edges on small devices */
    max-width: 720px;
    margin: 1.5rem auto; /* centered */
}

/* Border divider used on containers or standalone elements. Leave width to the element itself. */
.border-top { border-top: 1px solid #dee2e6; }

/* On very small screens keep dividers compact and proportional */
@media (max-width: 576px) {
    hr:not(.dropdown-divider) {
        max-width: 72%;
    }
}

/* Page title section (h1 at top of page content) */
.page-title { padding: 1.5rem 0 0.5rem 0; margin-bottom: 0; }
.page-title h1 { font-size: 2.25rem; font-weight: 700; color: var(--color-primary); margin: 0 0 0.5rem 0; }

@media (max-width: 768px) {
    .page-title h1 { font-size: 1.75rem; }
}

@media (max-width: 576px) {
    .page-title { padding: 1rem 0 0.25rem 0; }
    .page-title h1 { font-size: 1.5rem; }
}
.cta { background: var(--color-primary); color: #fff; border-radius: 4px; padding: 0.45rem 0.85rem; text-decoration: none; display: inline-block; }

/* Compact hero variant: less vertical space, small CTA */
.hero--compact { padding: var(--space-s) 0; background: transparent; }
.hero--compact .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero--compact h1 { font-size: 1.25rem; margin: 0; }
.hero--compact .subtitle { margin: 0; color: var(--muted); font-size: 0.95rem; }
.hero--compact .cta { padding: 0.35rem 0.6rem; font-size: 0.9rem; border-radius: 4px; }

@media (max-width: 768px) {
    .hero--compact .container { flex-direction: column; align-items: flex-start; }
    .hero--compact .subtitle { display: block; margin-top: 0.25rem; }
    .hero--compact .cta { width: 100%; text-align: center; }
}

.section { padding: var(--space-m) 0; }

/* Footer and social icons */
footer { background: #f8f9fa; color: var(--muted); border-top: 1px solid #dee2e6; }
footer a { color: var(--color-primary); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.footer-social { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; }
.footer-social img { height: 24px; width: 24px; object-fit: contain; opacity: 0.85; transition: opacity 0.2s; }
.footer-social a:hover img { opacity: 1; }
footer p { margin: 0; font-size: 0.9rem; }

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 100;
}
.skip-link:focus { top: 0; }

/* Accessibility */
a:focus, .nav-link:focus, .btn:focus { outline: 3px solid rgba(11,74,111,0.15); outline-offset: 2px; }
button:focus, [role="button"]:focus { outline: 3px solid rgba(11,74,111,0.15); outline-offset: 2px; }

/* Minor responsive tweaks */
@media (max-width: 576px) {
    .navbar-brand img { height: 48px; }
    .hero h1 { font-size: 1.5rem; }
}

/* Small horizontal padding on very small screens to avoid touching the screen edge */
@media (max-width: 576px) {
    .site-body { padding-left: 0.6rem; padding-right: 0.6rem; }
    /* give a tiny gutter to all containers on very small screens */
    .container { padding-left: 0.6rem; padding-right: 0.6rem; }
}