/*
  Hero / header contrast fix — corrected version.

  Root causes found:
  1. .banner-section::before used rgba(var(--base-1), 0.33) — --base-1 is a
     single hex value (#fb5607), not comma-separated RGB numbers, so that
     rgba() was invalid CSS and the intended dark overlay never rendered.
  2. .header-wrapper .menu li a { color: var(--title-clr); } is ALWAYS a
     dark color (not just before scroll), so nav text is illegible sitting
     directly on a busy photo. That selector has higher specificity than a
     plain "header .menu li a" override, so !important is used here to
     guarantee it wins regardless of load order or future selector changes.
  3. header has no background until JS adds .active on scroll. Rather than
     giving header its OWN separate background (which created a visible
     seam against the hero's own gradient below it), this version removes
     any separate header background and instead strengthens the single
     .banner-section::before gradient so it's dark enough at the top too.
     One continuous overlay, no seam.

  NOTE: the white box around the logo is not a CSS issue — there is no
  background/border rule on .logo anywhere in main.css. The white square
  is baked into the logo PNG itself. This file cannot fix that; the logo
  asset needs a transparent background to look correct on a dark bar.
*/

.banner-section::before {
    background: linear-gradient(
        180deg,
        rgba(8, 10, 6, 0.78) 0%,
        rgba(8, 10, 6, 0.6) 18%,
        rgba(8, 10, 6, 0.55) 40%,
        rgba(8, 10, 6, 0.2) 70%,
        rgba(8, 10, 6, 0) 92%
    ),
    linear-gradient(
        100deg,
        rgba(8, 10, 6, 0.55) 0%,
        rgba(8, 10, 6, 0.3) 42%,
        rgba(8, 10, 6, 0) 75%
    );
}

header,
header.active {
    background: rgba(130, 130, 130, 0.88) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.header-wrapper .menu li a,
header.active .menu li a {
    color: #fff !important;
}

.header-wrapper .menu li a.active,
.header-wrapper .menu li a:hover,
header.active .menu li a.active,
header.active .menu li a:hover {
    color: var(--base-1) !important;
}

/* ============================================================
   Hero content fix — real markup has NO .banner-wrapper parent,
   so none of main.css's .banner-wrapper .banner-thumb/.banner-content
   rules were ever applying. Rescoped to the actual structure:
   .banner-section > .container > .img-data-3 + .banner-content
   (siblings, no wrapper div between them).
   ============================================================ */

.banner-section .container {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 40px;
}

.banner-section .img-data-3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 8px 18px 8px 14px;
    margin-bottom: 24px;
    position: relative;
}

.banner-section .img-data-3 img {
    display: none;
}

.banner-section .img-data-3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
}

.banner-section .img-data-3 span {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.banner-section .banner-content {
    max-width: 620px;
    text-align: left;
}

.banner-section .banner-content .title {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

.banner-section .banner-content .subtitle {
    display: block;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 18px;
}

.banner-section .banner-content .name {
    display: none;
}

.banner-section .banner-content .txt {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.6;
    max-width: 480px;
    margin-bottom: 30px;
}

.banner-section .hero-ctas {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.banner-section .btn-base.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.banner-section .cta-secondary {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.banner-section .cta-secondary:hover {
    color: var(--base-1);
}

@media (max-width: 767px) {
    .banner-section .banner-content .subtitle {
        font-size: 32px;
    }
}

/* Tighten header: sit flush at top, reduce padding to match mockup's slim nav */
header {
    top: 0 !important;
    padding: 12px 0 !important;
}

.header-wrapper .logo img {
    max-height: 44px !important;
}

/* Mobile menu dropdown has a white background — override nav link
   color back to dark inside it, since the global white-text rule
   above was only meant for the desktop gray header bar. */
@media (max-width: 991px) {
    .header-wrapper .menu li a {
        color: var(--title-clr) !important;
    }

    .header-wrapper .menu li a.active,
    .header-wrapper .menu li a:hover {
        color: var(--base-1) !important;
    }
}

/* Hide decorative floating shapes — don't match the redesigned hero */
.banner-section .shape-1,
.banner-section .shape-2,
.banner-section .shape-3 {
    display: none !important;
}

/* Hide decorative floating shapes — leftover theme flourishes that
   don't match the redesigned, minimal hero. */
.banner-section .shape-1,
.banner-section .shape-2,
.banner-section .shape-3 {
    display: none !important;
}