/* ============================================
   ENCODIUS - Layout Styles
   Header, Navigation, Footer
   ============================================ */

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Opaque, not translucent: the header stacks above the white body
       rather than over the hero, so any alpha here washes out to grey */
    background: var(--dark-bg);
    color: var(--dark-ink);
    /* Seamless against the hero at rest; only separates once it is
       floating over the light sections below */
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.header.scrolled {
    border-bottom-color: var(--dark-border);
    box-shadow: 0 1px 16px rgba(3, 9, 20, 0.45);
}

.nav {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 68px;
}

.nav__logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-ink);
    flex-shrink: 0;
    /* It is a <button> now, so strip the UA chrome */
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.nav__logo:hover {
    color: var(--dark-ink);
}

.nav__logo::after {
    content: '';
    position: absolute;
    left: 42px;
    right: 0;
    /* The brand row is taller than the text links because of the logo mark.
       This offset keeps its underline level with the other nav underlines. */
    bottom: -1px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        #2F6FED 18%,
        #8AB4F8 48%,
        #FFFFFF 60%,
        #2F6FED 82%,
        transparent 100%);
    border-radius: var(--radius-pill);
    filter: drop-shadow(0 0 5px rgba(91, 141, 239, 0.9));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms ease, opacity 160ms ease;
}

.nav__logo-mark {
    width: 34px;
    height: auto;
    display: block;
    flex-shrink: 0;
    transition: filter 220ms ease;
}

.nav__logo-text {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: text-shadow 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .nav__logo:hover .nav__logo-text,
    .nav__logo:focus-visible .nav__logo-text {
        color: #FFFFFF;
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.95),
            0 0 15px rgba(255, 255, 255, 0.65);
    }

    .nav__logo:hover .nav__logo-mark,
    .nav__logo:focus-visible .nav__logo-mark {
        filter:
            brightness(1.14)
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
    }

    .nav__logo:hover::after,
    .nav__logo:focus-visible::after {
        opacity: 1;
        transform: scaleX(1);
    }
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav__links a {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-ink-secondary);
    white-space: nowrap;
}

.nav__links a:hover,
.nav__links a.is-active {
    color: var(--dark-ink);
}

@media (hover: hover) and (pointer: fine) {
    .nav__links > a:not(.nav__mobile-cta) {
        position: relative;
    }

    .nav__links > a:not(.nav__mobile-cta)::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg,
            transparent 0%,
            #2F6FED 18%,
            #8AB4F8 48%,
            #FFFFFF 60%,
            #2F6FED 82%,
            transparent 100%);
        border-radius: var(--radius-pill);
        filter: drop-shadow(0 0 5px rgba(91, 141, 239, 0.9));
        pointer-events: none;
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 260ms ease, opacity 160ms ease;
        will-change: transform;
    }

    .nav__links > a:not(.nav__mobile-cta)::after {
        bottom: -7px;
    }

    .nav__links > a:not(.nav__mobile-cta):hover::after,
    .nav__links > a:not(.nav__mobile-cta):focus-visible::after {
        opacity: 1;
        transform: scaleX(1);
    }
}

.nav__mobile-cta,
.nav__menu-toggle {
    display: none;
}

.nav__controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Language toggle - simple EN / SR text switch */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lang-toggle button {
    background: none;
    border: none;
    padding: 2px 1px;
    cursor: pointer;
    color: var(--dark-ink-faint);
    font-family: inherit;
    font-size: inherit;
    transition: color var(--transition-fast);
}

.lang-toggle button:hover {
    color: var(--dark-ink-secondary);
}

.lang-toggle button.active {
    color: var(--dark-ink);
}

.lang-toggle span {
    color: rgba(255, 255, 255, 0.24);
}

.nav__cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2F6FED, #1D4ED8);
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.28);
    transition: box-shadow var(--transition-base);
}

.nav__cta:hover {
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.4);
}

/* Idle light wave - a broad, soft swell that travels through the pill and
   then rests, rather than anything crossing its edge (a ring leaving the
   shape reads as a notification badge no matter how faint it is).

   The band is deliberately wide and feathered across ~60% of the gradient
   so it lands as a swell of light rather than a hard "shine" streak, and
   it is allowed to pass over the label too - light moving across a real
   surface does not stop at the text, and at this opacity the label only
   brightens a touch as it goes by.

   `overflow: hidden` on the anchor clips the wave to the pill radius; an
   element's own box-shadow is never clipped by its overflow, so the
   elevation and hover lift are unaffected. */
.nav__cta::before {
    content: '';
    position: absolute;
    /* Slight bleed so the feathered edge reaches the rounded corners */
    inset: -1px;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0)    20%,
        rgba(255, 255, 255, 0.16) 45%,
        rgba(255, 255, 255, 0.16) 55%,
        rgba(255, 255, 255, 0)    80%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: ctaWave 7s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

/* Travels across in the first ~42%, then waits off-canvas for the rest of
   the cycle, so the button stays calm between passes */
@keyframes ctaWave {
    0%        { background-position: 170% 0; }
    42%, 100% { background-position: -70% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nav__cta::before {
        animation: none;
        opacity: 0;
    }

    .nav__links {
        transition: none;
    }

    .nav__links > a:not(.nav__mobile-cta)::after {
        transition: none;
    }

    .nav__logo:hover .nav__logo-text,
    .nav__logo:focus-visible .nav__logo-text {
        transition: none;
    }

    .nav__logo-mark {
        transition: none;
    }

    .nav__logo:hover::after,
    .nav__logo:focus-visible::after {
        transition: none;
    }
}

@media (max-width: 768px) {
    body.nav-open {
        overflow: hidden;
    }

    body.nav-open::before {
        content: '';
        position: fixed;
        inset: 68px 0 0;
        z-index: 999;
        background: rgba(3, 9, 20, 0.58);
    }

    .nav {
        position: relative;
        gap: 16px;
    }

    .nav__controls {
        gap: 12px;
    }

    .nav__links {
        position: absolute;
        top: 100%;
        left: 20px;
        right: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 88px);
        overflow-y: auto;
        padding: 10px 18px 20px;
        background: var(--dark-bg);
        border: 1px solid var(--dark-border);
        border-top: 0;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: 0 22px 44px rgba(3, 9, 20, 0.42);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
            opacity var(--transition-base),
            visibility var(--transition-base),
            transform var(--transition-base);
    }

    .header.menu-open .nav__links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav__links > a:not(.nav__mobile-cta) {
        width: 100%;
        padding: 14px 4px;
        border-bottom: 1px solid var(--dark-border);
        font-size: 17px;
    }

    .nav__links .nav__mobile-cta {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 14px;
        padding: 12px 20px;
        color: #FFFFFF;
        background: linear-gradient(135deg, #2F6FED, #1D4ED8);
        border-radius: var(--radius-pill);
        box-shadow: 0 6px 16px rgba(29, 78, 216, 0.28);
    }

    .nav__links .nav__mobile-cta:hover {
        color: #FFFFFF;
    }

    .nav__cta {
        display: none;
    }

    .nav__menu-toggle {
        display: grid;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        place-items: center;
        padding: 0;
        background: transparent;
        color: var(--dark-ink);
        border: 1px solid var(--dark-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .nav__menu-icon {
        display: block;
        width: 22px;
        height: 22px;
    }

    .nav__menu-icon--close,
    .header.menu-open .nav__menu-icon--open {
        display: none;
    }

    .header.menu-open .nav__menu-icon--close {
        display: block;
    }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--dark-bg);
    color: var(--dark-ink-secondary);
    border-top: 1px solid var(--dark-border);
}

.footer__top {
    padding: 56px 0 40px;
    display: grid;
    /* The first four tracks size to their own content so they sit together
       on the left at a fixed gap. The fifth soaks up all remaining width,
       which pins "Get in touch" to the right edge - fr tracks on the first
       four would spread them evenly across the footer instead. */
    grid-template-columns: auto auto auto auto 1fr;
    column-gap: 56px;
    row-gap: 40px;
    align-items: start;
}

.footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.footer__col--end {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
}

/* The 32px logo makes this row 33px tall, and the wordmark is centred
   against it - so "Encodius" lands ~9px below the baseline of the column
   headings next to it, which sit at the top of an 18px line box. Pull the
   column up by that difference so the wordmark reads as being on the same
   line. Revisit if the logo size or the heading/wordmark type sizes change. */
.footer__col--brand {
    margin-top: -9px;
}

.footer__heading {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-ink-faint);
    margin-bottom: 3px;
}

.footer__col a {
    font-size: 15px;
    color: var(--dark-ink-secondary);
    transition: color var(--transition-fast);
}

.footer__col a:hover {
    color: var(--dark-ink);
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-ink);
}

.footer__col .footer__brand:hover {
    color: var(--dark-ink);
}

.footer__brand .nav__logo-mark {
    width: 32px;
}

.footer__brand-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Matches the link columns so every footer column shares one type scale */
.footer__email {
    font-size: 15px;
    color: var(--dark-ink-secondary);
}

.footer__bottom {
    padding: 24px 0 56px;
    border-top: 1px solid var(--dark-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 13px;
    color: var(--dark-ink-faint);
}

@media (max-width: 900px) {
    /* Five tracks stop fitting - pair them up and let the contact column
       fall back into the normal left-aligned flow */
    .footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }
    .footer__col--end {
        justify-self: start;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .footer__top {
        padding: 48px 0 32px;
    }
}

@media (max-width: 520px) {
    .footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}