/* ==========================================================================
   AEIK Integrated Systems — Header & Footer
   Brand palette derived from the AEIK logo.
   ========================================================================== */

:root {
    --aeik-blue:        #1B4F8B;
    --aeik-blue-dark:   #143C6B;
    --aeik-blue-deep:   #0E2B4F;
    --aeik-blue-soft:   #2978BD;
    --aeik-accent:      #29B6A6;   /* teal accent for CTAs / hover */
    --aeik-silver:      #8E9BAE;
    --aeik-ink:         #1a1d27;
    --aeik-muted:       #6c7689;
    --aeik-line:        #e6e9f0;
    --aeik-bg:          #ffffff;
    --aeik-bg-alt:      #f4f6fa;
    --aeik-footer-bg:   #0E2B4F;
    --aeik-footer-ink:  #c8d0dd;
    --aeik-shadow:      0 .5rem 1.5rem rgba(20, 60, 107, .08);
    --aeik-radius:      .5rem;
    --aeik-radius-lg:   1rem;
}

html, body {
    overflow-x: hidden;   /* kill any accidental horizontal scroll on mobile */
}
body {
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--aeik-ink);
    background: var(--aeik-bg);
    margin: 0; /* override site.css margin-bottom */
}
img { max-width: 100%; height: auto; } /* safety net so images can't overflow */

a { color: var(--aeik-blue); text-decoration: none; }
a:hover { color: var(--aeik-accent); }

/* ==========================================================================
   1. TOP UTILITY BAR
   ========================================================================== */
.aeik-topbar {
    background: var(--aeik-bg-alt);
    border-bottom: 1px solid var(--aeik-line);
    color: var(--aeik-muted);
    font-size: .85rem;
}

.aeik-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .55rem 0;
}

.aeik-topbar__info,
.aeik-topbar__meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.aeik-topbar__info a,
.aeik-topbar__meta a {
    color: var(--aeik-muted);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.aeik-topbar__info a:hover,
.aeik-topbar__meta a:hover { color: var(--aeik-blue); }

.aeik-topbar__sep {
    color: var(--aeik-silver);
    opacity: .6;
    user-select: none;
}

.aeik-topbar__social {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding-left: .75rem;
    border-left: 1px solid var(--aeik-line);
}
.aeik-topbar__social a {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--aeik-muted);
    transition: all .2s ease;
}
.aeik-topbar__social a:hover {
    color: #fff;
    background: var(--aeik-blue);
}

/* ==========================================================================
   2. MAIN HEADER
   ========================================================================== */
.aeik-header {
    background: #fff;
    position: relative;
    z-index: 50;
    box-shadow: 0 1px 0 var(--aeik-line);
}
.aeik-header.is-stuck {
    position: fixed;
    top: 14px;
    left: 18px;
    right: 18px;
    bottom: auto;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .35) inset,
        0 1px 0 rgba(27, 79, 139, .08),
        0 18px 40px -14px rgba(14, 43, 79, .25);
    animation: aeikSlideDown .35s cubic-bezier(.2,.7,.2,1);
}
/* Safari/older browsers without backdrop-filter — fall back to opaque white */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aeik-header.is-stuck { background: rgba(255, 255, 255, 0.96); }
}
/* On mobile, the slide-in nav inside this header uses position:fixed. Because
   `backdrop-filter` creates a fixed-positioning containing block, the open nav
   would otherwise be clipped to this floating header's rectangle when scrolled
   (header is stuck). Disable the filter at the mobile breakpoint and pump the
   background opacity so the bar still reads as solid. */
@media (max-width: 991.98px) {
    .aeik-header.is-stuck {
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        background: rgba(255, 255, 255, 0.96);
    }
}
/* Animate `top` instead of `transform` so the sticky header doesn't create a
   containing block for its descendant position:fixed mobile nav (which would
   make the slide-in nav clip inside the header bar). */
@keyframes aeikSlideDown {
    from { top: -120px; }
    to   { top: 14px; }
}
@media (max-width: 575.98px) {
    .aeik-header.is-stuck {
        top: 8px;
        left: 10px;
        right: 10px;
        border-radius: 16px;
    }
    @keyframes aeikSlideDown {
        to { top: 8px; }
    }
}

.aeik-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .9rem 0;
}

.aeik-brand img {
    height: 80px;
    width: auto;
    display: block;
}

/* Primary nav */
.aeik-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.aeik-nav__item { position: relative; }
.aeik-nav__close { display: none; } /* shown only on mobile (see media query) */
.aeik-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 1.25rem .9rem;
    color: var(--aeik-ink);
    font-weight: 600;
    font-size: .95rem;
    position: relative;
    transition: color .2s ease;
}
.aeik-nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .9rem;
    width: 0;
    height: 2px;
    background: var(--aeik-blue);
    transition: width .25s ease, left .25s ease;
}
.aeik-nav__link:hover,
.aeik-nav__link.is-active {
    color: var(--aeik-blue);
}
.aeik-nav__link:hover::after,
.aeik-nav__link.is-active::after {
    width: calc(100% - 1.8rem);
    left: .9rem;
}

/* Dropdown */
.aeik-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #fff;
    border-radius: var(--aeik-radius);
    box-shadow: var(--aeik-shadow);
    padding: .5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .2s ease;
    list-style: none;
    margin: 0;
}
.aeik-nav__item:hover > .aeik-nav__dropdown,
.aeik-nav__item:focus-within > .aeik-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.aeik-nav__dropdown a {
    display: block;
    padding: .55rem 1.1rem;
    color: var(--aeik-ink);
    font-size: .9rem;
}
.aeik-nav__dropdown a:hover {
    color: var(--aeik-blue);
    background: var(--aeik-bg-alt);
}

/* Right tools */
.aeik-header__tools {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.aeik-icon-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--aeik-line);
    background: #fff;
    color: var(--aeik-ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}
.aeik-icon-btn:hover {
    border-color: var(--aeik-blue);
    color: var(--aeik-blue);
}

.aeik-contact-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-left: 1rem;
    border-left: 1px solid var(--aeik-line);
}
.aeik-contact-card__icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--aeik-blue);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.aeik-contact-card__text {
    line-height: 1.2;
    font-size: .8rem;
    color: var(--aeik-muted);
}
.aeik-contact-card__text strong {
    display: block;
    font-size: .95rem;
    color: var(--aeik-ink);
    font-weight: 700;
}

/* Language switch (AR / EN) — segmented pill.
   UI only for now: clicking reflects the choice visually; real culture
   switching (cookie + request localization) is not wired up yet. */
.aeik-lang {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .25rem;
    border: 1px solid var(--aeik-line);
    border-radius: 999px;
    background: #fff;
}
.aeik-lang__icon {
    color: var(--aeik-muted);
    font-size: .9rem;
    margin: 0 .1rem 0 .35rem;
    line-height: 1;
}
.aeik-lang__opt {
    border: 0;
    background: transparent;
    color: var(--aeik-muted);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .03em;
    padding: .3rem .6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.aeik-lang__opt:hover { color: var(--aeik-blue); }
.aeik-lang__opt.is-active {
    background: var(--aeik-blue);
    color: #fff;
}

/* The nav (mobile) instance is hidden on desktop; the header instance
   handles desktop. The reverse swap happens in the responsive block. */
.aeik-lang--nav { display: none; }

/* Hamburger (mobile) */
.aeik-burger { display: none; }

/* Search overlay */
.aeik-search-overlay {
    position: fixed; inset: 0;
    background: rgba(14, 43, 79, .88);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.aeik-search-overlay.is-open { display: flex; }
.aeik-search-overlay form {
    width: min(640px, 100%);
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: var(--aeik-radius);
    overflow: hidden;
}
.aeik-search-overlay input {
    flex: 1;
    border: 0;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    outline: none;
}
.aeik-search-overlay button {
    border: 0;
    background: var(--aeik-blue);
    color: #fff;
    padding: 0 1.25rem;
    height: 56px;
    cursor: pointer;
}
.aeik-search-close {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   3. CTA BANNER (sits above the footer)
   ========================================================================== */
.aeik-cta {
    margin-top: 4rem;
}
.aeik-cta__box {
    background: linear-gradient(135deg, var(--aeik-blue-deep) 0%, var(--aeik-blue-dark) 100%);
    border-radius: var(--aeik-radius-lg);
    padding: 1.75rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: #fff;
    box-shadow: var(--aeik-shadow);
    position: relative;
    overflow: hidden;
}
.aeik-cta__box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(41, 182, 166, .18), transparent 35%),
                      radial-gradient(circle at 85% 75%, rgba(41, 120, 189, .25), transparent 40%);
    pointer-events: none;
}
.aeik-cta__content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}
.aeik-cta__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(41, 182, 166, .15);
    color: var(--aeik-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.aeik-cta__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
}
.aeik-cta__btn {
    background: var(--aeik-footer-bg);
    color: #fff;
    padding: .85rem 1.6rem;
    border-radius: var(--aeik-radius);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: all .2s ease;
    position: relative;
    z-index: 1;
}
.aeik-cta__btn:hover {
    background: #fff;
    color: var(--aeik-blue-deep);
}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.aeik-footer {
    background: var(--aeik-footer-bg);
    color: var(--aeik-footer-ink) !important;
    padding: 4.5rem 0 0;
    position: relative;
    overflow: hidden;
}
.aeik-footer a {
    color: var(--aeik-footer-ink) !important;
}

.aeik-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background-image:
        linear-gradient(transparent 95%, rgba(255,255,255,.04) 95%),
        linear-gradient(90deg, transparent 95%, rgba(255,255,255,.04) 95%); */
    background-size: 60px 60px;
    pointer-events: none;
    opacity: .5;
}
.aeik-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 2.5rem;
    position: relative;
}
.aeik-footer__brand img {
    height: 56px;
    margin-bottom: 1rem;
}
.aeik-footer__brand p {
    color: var(--aeik-footer-ink);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    font-size: .92rem;
}
.aeik-newsletter {
    display: flex;
    align-items: stretch;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--aeik-radius);
    overflow: hidden;
}
.aeik-newsletter input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #fff;
    padding: .85rem 1rem;
    outline: none;
    font-size: .9rem;
}
.aeik-newsletter input::placeholder { color: rgba(200,208,221,.7); }
.aeik-newsletter button {
    background: var(--aeik-blue-soft);;
    color: #fff;
    border: 0;
    padding: 0 1.1rem;
    cursor: pointer;
    transition: background .2s ease;
}
.aeik-newsletter button:hover { background: var(--aeik-blue-soft); }

.aeik-footer__title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1.2rem;
    text-align: center;
}
.aeik-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
    text-align: center;
}
.aeik-footer__links li { text-align: center; }
.aeik-footer__links a {
    color: var(--aeik-footer-ink);
    font-size: .92rem;
    transition: color .2s ease, letter-spacing .2s ease;
}
.aeik-footer__links a:hover {
    color: var(--aeik-accent);
    letter-spacing: .03em;
}
.aeik-footer__contact {
    display: grid;
    gap: .85rem;
    font-size: .92rem;
}
.aeik-footer__contact div,
.aeik-footer__contact address {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .65rem;
    text-align: left;
    font-style: normal;
    margin: 0;
}
.aeik-footer__contact i {
    color: #fff;
    margin-top: .2rem;
}
.aeik-footer__social {
    display: flex;
    justify-content: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.aeik-footer__social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    transition: all .2s ease;
}
.aeik-footer__social a:hover {
    background: var(--aeik-footer-bg);
    transform: translateY(-3px);
}

/* Copyright bar */
.aeik-copyright {
    margin-top: 3.5rem;
    padding: 1.25rem 0;
    background: rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .85rem;
    color: var(--aeik-footer-ink);
    position: relative;
}
.aeik-copyright__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.aeik-copyright__powered {
    opacity: .85;
}
.aeik-copyright__powered a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.25);
    transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
.aeik-copyright__powered a:hover {
    color: var(--aeik-accent);
    border-bottom-color: var(--aeik-accent);
}

/* Scroll-to-top */
.aeik-totop {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--aeik-footer-bg);
    color: #fff;
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 .5rem 1.25rem rgba(41,182,166,.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .25s ease;
    z-index: 100;
}
.aeik-totop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.aeik-totop:hover { background: var(--aeik-blue); }

/* --------------------------------------------------------------------------
   Floating WhatsApp button (bottom-left)
   -------------------------------------------------------------------------- */
.aeik-wa {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;          /* WhatsApp brand green */
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 .65rem 1.5rem rgba(37,211,102,.45);
    z-index: 100;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.aeik-wa:hover,
.aeik-wa:focus-visible {
    color: #fff;
    background: #1ebe57;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 .9rem 1.8rem rgba(37,211,102,.55);
    outline: none;
}
.aeik-wa i {
    font-size: 1.75rem;
    line-height: 1;
    position: relative;
    z-index: 2;
}

/* Pulsing rings — two staggered for a continuous gentle attention effect */
.aeik-wa__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    opacity: .55;
    z-index: 1;
    animation: aeikWaPulse 2.2s ease-out infinite;
}
.aeik-wa__ring--late { animation-delay: 1.1s; }
@keyframes aeikWaPulse {
    0%   { transform: scale(1);    opacity: .55; }
    80%  { transform: scale(1.9);  opacity: 0;   }
    100% { transform: scale(1.9);  opacity: 0;   }
}

/* Tooltip pill that slides in on hover */
.aeik-wa__tip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translate(8px, -50%);
    background: var(--aeik-ink, #1a1d27);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    pointer-events: none;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.aeik-wa__tip::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: inherit;
}
.aeik-wa:hover .aeik-wa__tip,
.aeik-wa:focus-visible .aeik-wa__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

@media (max-width: 575.98px) {
    .aeik-wa { left: 1rem; bottom: 1rem; width: 50px; height: 50px; }
    .aeik-wa i { font-size: 1.55rem; }
    .aeik-wa__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .aeik-wa__ring { animation: none; opacity: 0; }
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .aeik-burger {
        display: inline-flex;
        width: 44px; height: 44px;
        border: 1px solid var(--aeik-line);
        background: #fff;
        border-radius: var(--aeik-radius);
        align-items: center; justify-content: center;
        cursor: pointer;
        color: var(--aeik-ink);
    }
    .aeik-contact-card { display: none; }

    /* Swap language switch: hide the header one, show the in-nav one */
    .aeik-lang--header { display: none; }
    .aeik-lang--nav {
        display: inline-flex;
        align-self: flex-start;
        margin-top: 1.25rem;
    }

    .aeik-nav {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(320px, 85%);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 5rem 1rem 2rem;
        box-shadow: var(--aeik-shadow);
        transform: translateX(-100%);
        transition: transform .3s ease;
        overflow-y: auto;
        z-index: 150;
    }
    .aeik-nav.is-open { transform: translateX(0); }
    .aeik-nav__link {
        padding: .9rem .75rem;
        border-bottom: 1px solid var(--aeik-line);
    }
    .aeik-nav__link::after { display: none; }
    .aeik-nav__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 1rem;
        display: none;
    }
    .aeik-nav__item.is-open > .aeik-nav__dropdown { display: block; }

    /* Tame the Bootstrap mx-5 / px-5 utilities on the topbar & header for mobile —
       3rem each side is too much on a narrow phone and was causing x-scroll. */
    .aeik-topbar > .mx-5,
    .aeik-header.mx-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .aeik-header > .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Close (X) button — only shown on mobile, top-right of the slide-in nav */
    .aeik-nav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid var(--aeik-line);
        background: #fff;
        color: var(--aeik-ink);
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        z-index: 2;
        transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .aeik-nav__close:hover,
    .aeik-nav__close:focus-visible {
        background: var(--aeik-blue);
        color: #fff;
        border-color: var(--aeik-blue);
        transform: scale(1.06);
        outline: none;
    }

    .aeik-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 575.98px) {
    .aeik-topbar__meta .aeik-topbar__sep,
    .aeik-topbar__meta a:not(.aeik-topbar__social a) { display: none; }
    .aeik-footer__grid { grid-template-columns: 1fr; }
    .aeik-footer__contact div,
    .aeik-footer__contact address {
        justify-content: center;
        text-align: center;
    }
    .aeik-cta__box { flex-direction: column; align-items: flex-start; text-align: left; }
    .aeik-cta__title { font-size: 1.15rem; }
}