/* ============================================================
   PRO PDF TOOL — MAIN NAVIGATION
   ------------------------------------------------------------
   ONE navigation style for:
   - Homepage
   - Split PDF
   - Compress PDF
   - Merge PDF
   - All other tool pages

   Reference:
   Split PDF tool-page navigation

   IMPORTANT:
   The main navigation list NEVER stretches.
   The right-side actions are the only element that uses
   margin-left: auto.
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --nav-accent: #EE6C4D;
    --nav-text: #1f2430;
    --nav-muted: #8b93a1;
    --nav-border: #eceef2;
}


/* ============================================================
   HEADER
   ============================================================ */

.header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    border-bottom: 1px solid var(--nav-border) !important;

    z-index: 10000 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   MAIN NAVIGATION CONTAINER
   ============================================================ */

.site-nav {
    width: 100% !important;
    max-width: none !important;

    height: 64px !important;
    min-height: 64px !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 24px !important;

    /*
       IMPORTANT:
       Keep the logo and navigation together.
       Do NOT use justify-content: space-between.
    */
    justify-content: flex-start !important;

    gap: 22px !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* ============================================================
   LOGO
   ============================================================ */

.site-nav .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 128px !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
}


.site-nav .brand img {
    display: block !important;

    width: auto !important;
    height: 30px !important;

    max-width: 160px !important;
    max-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* ============================================================
   MAIN NAVIGATION LIST

   THIS IS THE MOST IMPORTANT PART.

   The list must NOT:
   - flex: 1
   - width: 100%
   - justify-content: space-between
   - distribute items across the page

   It must stay compact exactly like the Split PDF page.
   ============================================================ */

.site-nav .nav-list {
    list-style: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /*
       CRITICAL:
       Never allow the navigation list to consume remaining
       horizontal space.
    */
    flex: 0 0 auto !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    gap: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-wrap: nowrap !important;

    overflow: visible !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   NAVIGATION ITEMS
   ============================================================ */

.site-nav .nav-list > li,
.site-nav .nav-list > .nav-list__item,
.site-nav .nav-list .nav-list__item {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 64px !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    float: none !important;

    overflow: visible !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
}


/*
   Explicitly neutralize every possible legacy homepage
   margin on the navigation items.

   This is intentionally more specific for the homepage.
*/

body.home .header .site-nav .nav-list > li,
body.home .header .site-nav .nav-list > .nav-list__item {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 64px !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    float: none !important;
}


/* ============================================================
   NAVIGATION LINKS

   Exact reference styling from Split PDF navigation.
   ============================================================ */

.site-nav .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;

    margin: 0 !important;
    padding: 8px 11px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;

    color: #1f2430 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;
    letter-spacing: normal !important;

    text-decoration: none !important;
    text-transform: none !important;

    white-space: nowrap !important;

    cursor: pointer !important;

    transform: none !important;

    box-sizing: border-box !important;
}


/* Homepage links must use exactly the same dimensions */

body.home .header .site-nav .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;

    margin: 0 !important;
    padding: 8px 11px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;
    letter-spacing: normal !important;

    color: #1f2430 !important;

    text-transform: none !important;
    white-space: nowrap !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;

    box-sizing: border-box !important;
}


/* ============================================================
   NAVIGATION HOVER
   ============================================================ */

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
    color: var(--nav-accent) !important;
    background: #faf5f3 !important;
}


/* ============================================================
   DROPDOWN WRAPPER
   ============================================================ */

.site-nav .nav-dropdown {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}


/* Homepage dropdown wrapper */

body.home .header .site-nav .nav-dropdown {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
}


/* ============================================================
   DROPDOWN ARROW
   ============================================================ */

.site-nav .ico--down {
    font-size: 10px !important;

    transition: transform 0.16s ease !important;
}


.site-nav .nav-dropdown[data-open] .ico--down {
    transform: rotate(180deg) !important;
}


.site-nav .ico--down::before {
    content: "\f078";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}


/* ============================================================
   ACTIVE DROPDOWN
   ============================================================ */

.site-nav .nav-dropdown[data-open] > .nav-link {
    color: var(--nav-accent) !important;
}


/* ============================================================
   ACTIVE DROPDOWN UNDERLINE
   ============================================================ */

.site-nav .nav-dropdown[data-open] > .nav-link::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;

    bottom: -13px;

    height: 2px;

    background: var(--nav-accent);
}


/* ============================================================
   DROPDOWN PANEL
   ============================================================ */

.site-nav .nav-dropdown__panel {
    position: absolute;

    top: calc(100% + 16px);
    left: 0;

    z-index: 20000 !important;

    width: auto;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 20px 48px rgba(20, 20, 40, 0.14),
        0 2px 10px rgba(20, 20, 40, 0.06);

    padding: 28px 32px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(6px);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s;

    max-height: 80vh;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;
}


.site-nav .nav-dropdown[data-open] .nav-dropdown__panel {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


/* Dropdown sizes */

.nav-dropdown__panel--sm {
    width: 720px;
}

.nav-dropdown__panel--md {
    width: 1080px;
}

.nav-dropdown__panel--lg {
    width: 1200px;
}


/* ============================================================
   DROPDOWN GRID
   ============================================================ */

.dropdown-grid {
    display: grid;
    gap: 0;
}


.dropdown-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}


.dropdown-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}


/* ============================================================
   DROPDOWN COLUMNS
   ============================================================ */

.dropdown-col {
    padding: 0 28px;

    border-left: 1px solid var(--nav-border);
}


.dropdown-col:first-child {
    padding-left: 4px;
    border-left: none;
}


.dropdown-col:last-child {
    padding-right: 4px;
}


/* ============================================================
   DROPDOWN COLUMN HEADER
   ============================================================ */

.dropdown-col__header {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 16px;
}


.dropdown-col__header-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    font-size: 16px;
}


.dropdown-col__label {
    font-size: 15px;
    font-weight: 700;

    color: var(--nav-text);
}


.dropdown-col__subtitle {
    font-size: 12.5px;

    color: var(--nav-muted);

    margin-top: 2px;

    line-height: 1.35;
}


/* ============================================================
   DROPDOWN LIST
   ============================================================ */

.dropdown-col__list {
    list-style: none;

    margin: 0;
    padding: 0;
}


.dropdown-col__list a {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 9px 6px;

    margin: 0 -6px;

    border-radius: 10px;

    text-decoration: none;

    transition: background 0.12s ease;
}


.dropdown-col__list a:hover {
    background: #f6f7fb;
}


/* ============================================================
   DROPDOWN ITEM ICON
   ============================================================ */

.dropdown-item__icon {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
}


/* ============================================================
   DROPDOWN ITEM TEXT
   ============================================================ */

.dropdown-item__text {
    display: flex;
    flex-direction: column;

    min-width: 0;

    flex: 1;
}


.dropdown-item__title {
    font-size: 14px;
    font-weight: 700;

    color: var(--nav-text);

    white-space: nowrap;
}


.dropdown-item__desc {
    font-size: 12px;

    color: var(--nav-muted);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   DROPDOWN CHEVRON
   ============================================================ */

.dropdown-item__chevron {
    flex: 0 0 auto;

    font-size: 11px;

    color: var(--nav-muted);
}


/* ============================================================
   RIGHT-SIDE ACTIONS

   CRITICAL:
   THIS is the ONLY element that gets margin-left:auto.

   Therefore:
   Logo
   ↓
   Main navigation
   ↓
   empty remaining space
   ↓
   Search / Login / Sign up / Apps
   ============================================================ */

.site-nav .nav-actions {
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;

    justify-content: flex-end !important;

    flex: 0 0 auto !important;

    gap: 12px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 64px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* Homepage actions */

body.home .header .site-nav .nav-actions {
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;

    justify-content: flex-end !important;

    flex: 0 0 auto !important;

    gap: 12px !important;

    width: auto !important;

    height: 64px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;
}


/* ============================================================
   SEARCH BUTTON
   ============================================================ */

.site-nav .nav-actions__icon {
    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: var(--nav-text) !important;

    font-size: 16px !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


.site-nav .nav-actions__icon:hover {
    background: #f4f5f9 !important;
}


/* ============================================================
   LOGIN
   ============================================================ */

.site-nav .nav-actions__login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 8px 4px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;
    letter-spacing: normal !important;

    color: #1f2430 !important;

    text-decoration: none !important;
    text-transform: none !important;

    white-space: nowrap !important;
}


.site-nav .nav-actions__login:hover {
    color: var(--nav-accent) !important;
}


/* ============================================================
   SIGN UP
   ============================================================ */

.site-nav .nav-actions__signup {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;

    padding: 9px 17px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    color: #ffffff !important;

    background: var(--nav-accent) !important;

    border: 0 !important;
    border-radius: 8px !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
}


.site-nav .nav-actions__signup:hover {
    filter: brightness(0.94);
}


/* ============================================================
   MOBILE BUTTON
   ============================================================ */

.nav-mobile-toggle {
    display: none;

    background: transparent;

    border: none;

    font-size: 20px;

    color: var(--nav-text);

    cursor: pointer;

    padding: 6px;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 992px) {

    .header {
        height: 64px !important;
        min-height: 64px !important;
    }

    .site-nav {
        height: 64px !important;
        min-height: 64px !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .site-nav .brand img {
        height: 30px !important;
    }

    .site-nav .nav-list {
        /*
           DO NOT CHANGE THIS TO flex:1.
        */
        flex: 0 0 auto !important;

        width: max-content !important;

        gap: 2px !important;

        justify-content: flex-start !important;
    }

    .site-nav .nav-link {
        height: 42px !important;

        padding: 8px 11px !important;

        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .site-nav .nav-actions {
        margin-left: auto !important;
        gap: 12px !important;
    }


    /*
       Homepage desktop MUST use exactly the same
       navigation dimensions.
    */

    body.home .header .site-nav {
        height: 64px !important;
        min-height: 64px !important;

        padding-left: 24px !important;
        padding-right: 24px !important;

        gap: 22px !important;
    }

    body.home .header .site-nav .brand {
        min-width: 128px !important;
    }

    body.home .header .site-nav .brand img {
        height: 30px !important;
    }

    body.home .header .site-nav .nav-list {
        flex: 0 0 auto !important;

        width: max-content !important;

        gap: 2px !important;

        justify-content: flex-start !important;
    }

    body.home .header .site-nav .nav-link {
        height: 42px !important;

        padding: 8px 11px !important;

        font-size: 14px !important;
        font-weight: 500 !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 991px) {

    .header {
        height: 62px !important;
        min-height: 62px !important;
    }

    .site-nav {
        height: 62px !important;
        min-height: 62px !important;

        padding: 0 16px !important;

        gap: 0 !important;
    }

    .site-nav .brand {
        min-width: 0 !important;
    }

    .site-nav .brand img {
        height: 30px !important;
        max-height: 30px !important;
    }


    /* Hide desktop navigation */

    .site-nav .nav-list,
    .site-nav .nav-actions {
        display: none !important;
    }


    /* Mobile menu button */

    .nav-mobile-toggle {
        display: block;

        margin-left: auto;
    }


    /* Open mobile menu */

    .site-nav[data-mobile-open] .nav-list {
        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        position: fixed;

        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100% !important;

        background: #ffffff;

        padding: 12px 16px 24px;

        overflow-y: auto;

        box-sizing: border-box;
    }


    /* Mobile items */

    .site-nav[data-mobile-open] .nav-list__item,
    .site-nav[data-mobile-open] .nav-list > li {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Mobile links */

    .site-nav[data-mobile-open] .nav-link {
        display: flex !important;

        width: 100% !important;

        height: auto !important;
        min-height: 48px !important;

        align-items: center !important;
        justify-content: space-between !important;

        padding: 14px 8px !important;

        border-bottom: 1px solid var(--nav-border) !important;

        border-radius: 0 !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        line-height: 1.2 !important;

        box-sizing: border-box !important;
    }


    /* Remove desktop dropdown underline */

    .site-nav[data-mobile-open]
    .nav-dropdown[data-open]
    .nav-link::after {
        display: none !important;
    }


    /* Mobile dropdown */

    .site-nav[data-mobile-open] .nav-dropdown__panel {
        position: static;

        display: none;

        width: auto !important;

        max-height: none;

        padding: 8px 0 14px 8px;

        box-shadow: none;

        border-radius: 0;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: none;

        transition: none;

        overflow: visible;
    }


    .site-nav[data-mobile-open]
    .nav-dropdown[data-open]
    .nav-dropdown__panel {
        display: block;
    }


    /* Mobile dropdown grids */

    .site-nav[data-mobile-open]
    .dropdown-grid--2col,

    .site-nav[data-mobile-open]
    .dropdown-grid--4col {
        grid-template-columns: 1fr;
    }


    /* Mobile columns */

    .site-nav[data-mobile-open] .dropdown-col {
        border-left: none;

        padding: 0 0 18px;
    }


    /* Mobile descriptions */

    .site-nav[data-mobile-open] .dropdown-item__desc {
        white-space: normal;
    }
}


/* ============================================================
   HOMEPAGE FINAL COMPATIBILITY
   ------------------------------------------------------------
   These rules exist ONLY because the homepage has:
       <body class="lang-en-US home">

   They DO NOT create a different navigation design.

   They simply force the homepage to use the same values
   defined above.
   ============================================================ */

body.home .header {
    display: block !important;
}


body.home .header .site-nav {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    box-sizing: border-box !important;
}


body.home .header .site-nav .nav-list {
    display: flex !important;

    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    gap: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-wrap: nowrap !important;

    float: none !important;

    transform: none !important;

    box-sizing: border-box !important;
}


body.home .header .site-nav .nav-list > li,
body.home .header .site-nav .nav-list > .nav-list__item {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    position: relative !important;

    box-sizing: border-box !important;
}


body.home .header .site-nav .nav-list > li:nth-child(1),
body.home .header .site-nav .nav-list > li:nth-child(2),
body.home .header .site-nav .nav-list > li:nth-child(3),
body.home .header .site-nav .nav-list > li:nth-child(4),
body.home .header .site-nav .nav-list > li:nth-child(5),
body.home .header .site-nav .nav-list > li:nth-child(6),
body.home .header .site-nav .nav-list > li:nth-child(7) {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    float: none !important;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.site-nav .nav-link:focus-visible,
.site-nav .nav-actions__login:focus-visible,
.site-nav .nav-actions__signup:focus-visible,
.site-nav .nav-actions__icon:focus-visible,
.nav-mobile-toggle:focus-visible {
    outline: 2px solid var(--nav-accent);

    outline-offset: 2px;
}