/* Design tokens KONPAL */
:root {
    --bs-primary: #3D6AC1;
    --bs-primary-rgb: 61, 106, 193;
    --bs-body-color: #000000;
    --bs-body-bg: #FFFFFF;
    --bs-secondary-bg: #EDF0F7;
    --bs-border-color: #E4E4E4;
    --bs-secondary-color: #787878;
    --konpal-navy: #001D51;
    --konpal-green: #59B83C;
    --konpal-red: #FF0A0A;
    --konpal-gray: #B4B4B4;
    --konpal-navy-hover: #002a6b;
    --konpal-light-bg: #F5F5F5;
    --bs-body-font-family: 'Arial', system-ui, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.375;
}

h1, h2, h3, h4, .display-1, .display-2, .display-4 {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 600;
}

/* Primary button */
.btn-primary {
    --bs-btn-bg: #3D6AC1;
    --bs-btn-border-color: #3D6AC1;
    --bs-btn-hover-bg: #335aa8;
    --bs-btn-hover-border-color: #335aa8;
}

.btn-outline-primary {
    --bs-btn-color: #3D6AC1;
    --bs-btn-border-color: #3D6AC1;
    --bs-btn-hover-bg: #3D6AC1;
    --bs-btn-hover-border-color: #3D6AC1;
}

/* Navy CTA button (hero, about) */
.btn-navy {
    display: inline-flex;
    align-items: center;
    background-color: var(--konpal-navy);
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 20px 32px;
    text-decoration: none;
    min-width: 246px;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.btn-navy:hover {
    background-color: var(--konpal-navy-hover);
    color: #fff;
}

/* Light CTA button (about section) */
.btn-light-navy {
    display: inline-flex;
    align-items: center;
    background-color: var(--bs-secondary-bg);
    color: var(--konpal-navy);
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 20px 32px;
    text-decoration: none;
    min-width: 246px;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.btn-light-navy img {
    filter: brightness(0) saturate(100%) invert(10%)
        sepia(50%) saturate(3000%) hue-rotate(210deg);
}

.btn-light-navy:hover {
    background-color: #dde2ee;
    color: var(--konpal-navy);
}

/* Content container width */
.container-xxl {
    max-width: 1321px;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Brand selection */
::selection {
    background: var(--konpal-navy);
    color: #fff;
}

/* Focus-visible for custom elements */
.btn-navy:focus-visible,
.btn-light-navy:focus-visible,
.request-input:focus-visible,
.request-textarea:focus-visible,
.request-submit:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Active press feedback */
.btn-navy:active,
.btn-light-navy:active,
.request-submit:active {
    transform: scale(0.97);
}

/* Breadcrumb navigation (global) */
.breadcrumb-nav {
    font-size: 16px;
    margin-bottom: 8px;
    padding-top: 24px;
}

.breadcrumb-nav a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.breadcrumb-nav a:hover {
    color: var(--bs-primary);
}

.breadcrumb-nav .active {
    color: var(--bs-secondary-color);
}

/* Section title (global) */
.section-title {
    font-size: 44px;
    margin-top: 16px;
    margin-bottom: 32px;
}

/* Responsive: section title + breadcrumb */
@media (max-width: 991.98px) {
    .section-title {
        font-size: 30px;
        margin-bottom: 24px;
    }
}

/* Scroll reveal (global — JS in base.html) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}