/**
 * Pikravetka Header Compact Layout v2.1
 *
 * Desktop cilj:
 * LOGO | 28px | MENU | 18px | MOJ RAČUN | 14px | SEARCH | 12px | VREME
 */

@media (min-width: 1025px) {

    #masthead .site-header-row-container-inner .site-container > .site-header-row,
    #masthead .site-header-row-container-inner > .site-header-row,
    #masthead .site-header-row {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    #masthead .site-header-section,
    #masthead .site-header-main-section-left,
    #masthead .site-header-main-section-center,
    #masthead .site-header-main-section-right,
    #masthead .site-header-section-left,
    #masthead .site-header-section-center,
    #masthead .site-header-section-right {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Logo */
    #masthead .site-header-main-section-left,
    #masthead .site-header-section-left {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    /* Menu */
    #masthead .site-header-main-section-center,
    #masthead .site-header-section-center {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        justify-self: auto !important;
        margin-left: 28px !important;
        margin-right: 0 !important;
    }

    /*
     * RIGHT SECTION:
     * v2.0 pushed this section to the far right with margin-left:auto.
     * v2.1 keeps it directly beside the menu/account area.
     */
    #masthead .site-header-main-section-right,
    #masthead .site-header-section-right {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        justify-self: auto !important;
        margin-left: 16px !important;
        margin-right: 0 !important;
    }

    /* If navigation is located in left section */
    #masthead .site-header-main-section-left .main-navigation,
    #masthead .site-header-main-section-left .header-navigation,
    #masthead .site-header-section-left .main-navigation,
    #masthead .site-header-section-left .header-navigation {
        margin-left: 28px !important;
    }

    /* Keep navigation compact */
    #masthead .main-navigation,
    #masthead .header-navigation,
    #masthead .primary-menu-container,
    #masthead .header-menu-container {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: flex-start !important;
    }

    #masthead .main-navigation ul,
    #masthead .header-navigation ul,
    #masthead .primary-menu-container ul,
    #masthead ul.menu {
        justify-content: flex-start !important;
    }

    /* Compact spacing between right-side header elements */
    #masthead .site-header-main-section-right > *,
    #masthead .site-header-section-right > * {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #masthead .site-header-main-section-right,
    #masthead .site-header-section-right {
        gap: 12px !important;
    }

    /* Account/menu account item */
    #masthead .pkdir-menu-account,
    #masthead .pkacct-menu-account {
        flex: 0 0 auto !important;
    }

    /* Prevent search/weather/html from stretching */
    #masthead .header-search-wrap,
    #masthead .header-html-inner,
    #masthead .site-header-item {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }

    #masthead .site-branding,
    #masthead .site-branding a,
    #masthead .site-logo {
        flex: 0 0 auto !important;
    }
}

/* Slightly tighter on laptop widths */
@media (min-width: 1025px) and (max-width: 1350px) {
    #masthead .site-header-main-section-center,
    #masthead .site-header-section-center {
        margin-left: 22px !important;
    }

    #masthead .site-header-main-section-right,
    #masthead .site-header-section-right {
        margin-left: 12px !important;
        gap: 9px !important;
    }

    #masthead .site-header-main-section-left .main-navigation,
    #masthead .site-header-main-section-left .header-navigation,
    #masthead .site-header-section-left .main-navigation,
    #masthead .site-header-section-left .header-navigation {
        margin-left: 22px !important;
    }
}