/* 1. Force the main footer wrapper to align items side-by-side */
.pkp_structure_footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important; /* Pushes WYSIWYG to the left, OJS brand to the right */
    align-items: center !important;          /* Centers both elements vertically against each other */
    text-align: left !important;
}

/* 2. Style your custom WYSIWYG block */
.pkp_structure_footer .pkp_footer_content {
    flex-grow: 1 !important;                 /* Allows your WYSIWYG content to take up the left/middle space */
    order: 1 !important;                     /* Keeps it visually on the left */
}

/* 3. Style the OJS brand block to sit comfortably on the right */
.pkp_structure_footer .pkp_brand_footer {
    flex-shrink: 0 !important;               /* Prevents the logo container from shrinking */
    order: 2 !important;                     /* Keeps it visually on the right */
    padding-left: 20px !important;           /* Adds a safety gap between your WYSIWYG images and the logo */
}

/* 4. Reset default theme float rules that disrupt alignment */
.pkp_structure_footer .pkp_brand_footer a {
    float: none !important;
    display: block !important;
}