/**
 * Acerinox-inspired corporate layer (public corporate sites e.g. acerinox.com).
 * Uses :root vars from _site_color.blade.php — adjust primary/secondary in admin.
 */

html {
    scroll-padding-top: calc(var(--header-h, 82px) + 8px);
}

body {
    font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif !important;
    background-color: #f5f5f5;
    color: #1a1a1a;
}

main {
    background-color: #f5f5f5;
}

/* Header style 2: dark bar + accent line */
.header-area {
    background: var(--secondary-color) !important;
    color: #fff !important;
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-area .main-menu ul li a {
    color: rgba(255, 255, 255, 0.92) !important;
}

.header-area .main-menu ul li a:hover {
    color: #fff !important;
}

.header-area .logo span {
    color: #fff !important;
}

/* Primary buttons / links already use theme vars in many templates */
.btn-one {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-one:hover {
    filter: brightness(0.92);
}

/* Footer: align with dark corporate base */
.footer-two-area.secondary-bg {
    background: var(--secondary-color) !important;
    color: rgba(255, 255, 255, 0.88);
}

.footer-two-area .footer-title,
.footer-two-area h3 {
    color: #fff !important;
}

.footer-two-area a:hover {
    color: var(--primary-color) !important;
}

/* Content readability (about / inner pages) */
.page-wrapper .container,
.content-wrapper .container {
    max-width: 1140px;
}