/* ============================================
   AL-QAND EXCHANGE — HEADER, NAVIGATION, MOBILE MENU
   ============================================ */

/* ---------- Header/Navigation ---------- */
header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 60;
    background: linear-gradient(180deg, rgb(0 0 0 / 73%), rgb(0 0 0 / 47%));
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 2px solid var(--orange);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled {
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.96), rgba(8, 8, 8, 0.94));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* The header escapes the shared 1240px .wrap cap so the bar can run the
   full width of the viewport: logo hard left, links centred, actions hard
   right. Page content below keeps the 1240px cap. */
header > .wrap {
    max-width: none;
}

/* Three explicit columns rather than space-between, which positioned the
   links by leftover space and left them sitting well left of centre.
   1fr either side centres the middle column; the columns are named
   explicitly so hiding .nav-links on mobile leaves .nav-right in place
   instead of sliding it into the middle.
   The 24px gap doubles as the guaranteed minimum separation between
   groups at widths too narrow to centre. */
nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 18px 0;
    min-height: 80px;
}

.logo {
    grid-column: 1;
    justify-self: start;
}

.nav-links {
    grid-column: 2;
    justify-self: center;
}

.nav-right {
    grid-column: 3;
    justify-self: end;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-img {
    height: 55px;
    width: auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 600px) {
    .logo-img {
        height: 40px;
    }
}

@media (max-width: 400px) {
    .logo-img {
        height: 34px;
    }
}

.nav-links {
    display: flex;
    gap: 60px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-soft);
}

.nav-links a {
    padding: 4px 0;
    transition: color 0.25s;
    position: relative;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: var(--orange);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--orange);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    border: 2px solid var(--orange);
    padding: 10px 24px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
}

.nav-cta:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #000;
    box-shadow: 0 0 30px var(--orange-glow);
    transform: translateY(-2px);
}

/* ---------- Right-hand nav group ---------- */
/* nav is justify-content: space-between, so the icons and the actions are
   wrapped in one element to keep it distributing three children, not four. */
.nav-right {
    display: flex;
    align-items: center;
}

/* Language switch + hamburger. Separated from the icon cluster by a rule,
   so the orange button reads as an action and not as an eighth icon. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-actions::before {
    content: "";
    width: 1px;
    height: 22px;
    background: rgba(232, 93, 4, 0.28);
    /* logical property: sits left of the button in LTR, right of it in RTL */
    margin-inline: 16px 18px;
}

/* ---------- Social Icons in Header ---------- */
/* Tighter than the 12px used when there were only two, so seven icons
   read as one cluster rather than a loose row. */
.nav-social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    transition: color 0.25s, transform 0.25s;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.nav-social a:hover {
    color: var(--orange);
    transform: scale(1.1);
}

.nav-social a svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* ---------- Mobile Menu ---------- */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    z-index: 65;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.open span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 248, 241, 0.98);
    z-index: 55;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 32px;
    gap: 8px;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0s linear 0.4s;
    overflow-y: auto;
}

.mobile-menu.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0s;
}

.mobile-menu a {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    padding: 14px 0;
    color: var(--ink);
    width: 100%;
    max-width: 300px;
    text-align: center;
    border-bottom: 1px solid rgba(232, 93, 4, 0.08);
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-menu a:hover {
    color: var(--orange);
    transform: translateX(8px);
}

.mobile-menu a.btn-primary {
    border-bottom: none;
    margin-top: 20px;
    background: var(--orange);
    color: #000;
    padding: 16px 30px;
    border-radius: 999px;
    width: auto;
    min-width: 200px;
    box-shadow: 0 0 30px var(--orange-glow);
    font-size: 1rem;
}

.mobile-menu a.btn-primary:hover {
    background: var(--orange-dark);
    box-shadow: 0 0 50px var(--orange-glow);
    transform: translateX(0) scale(1.05);
}

.mobile-social-icons {
    display: flex;
    gap: 24px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(232, 93, 4, 0.2);
    justify-content: center;
}

.mobile-social-icons a {
    color: var(--ink-soft);
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 50%;
    width: auto;
    border-bottom: none;
    max-width: none;
}

.mobile-social-icons a:hover {
    color: var(--orange);
    transform: scale(1.15);
}

.mobile-social-icons a svg {
    display: block;
}

/* ---------- Responsive Header ---------- */
@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    /* Header icons and the language button both move into the mobile menu,
       which carries its own copies. Only the hamburger stays up here -- and
       with nothing to its left, the divider goes too. */
    .nav-social,
    .nav-actions .lang-switch {
        display: none;
    }

    .nav-actions::before {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }
}

@media (max-width: 480px) {
    .nav-cta {
        display: none !important;
    }
}

/* ---------- Social icon row: seven networks ---------- */
/* The header row (logo + nav links + 7 icons + language button + toggle)
   runs out of width between the 900px menu breakpoint and roughly 1200px.
   Tighten the icon row and the nav-link spacing over just that range;
   above it the default sizing fits with room to spare. */
/* ---------- Keeping the links centred as the bar narrows ----------
   Centring needs room for a side column as wide as the actions group on
   BOTH sides of the links. As the viewport shrinks that stops fitting, so
   the link spacing and icon size step down to buy it back. Each tier is
   sized to stay centred at its own narrow end; below 1280px centring is
   not achievable with seven icons and the links drift instead, which the
   grid gap keeps collision-free. */
@media (max-width: 1550px) {
    .nav-links {
        gap: 40px;
    }

    .nav-social a {
        width: 34px;
        height: 34px;
    }

    .nav-social a svg {
        width: 21px;
        height: 21px;
    }
}

@media (max-width: 1440px) {
    .nav-links {
        gap: 24px;
    }

    .nav-social {
        gap: 5px;
    }

    .nav-social a {
        width: 30px;
        height: 30px;
    }

    .nav-social a svg {
        width: 19px;
        height: 19px;
    }

    .nav-actions {
        gap: 10px;
    }

    .nav-actions::before {
        margin-inline: 8px 10px;
    }
}

/* Seven icons no longer fit on one line in the mobile menu on narrow
   phones, so let them wrap instead of overflowing. */
.mobile-social-icons {
    flex-wrap: wrap;
    row-gap: 16px;
}