/* 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;
}

/* Force the WYSIWYG container and its internal paragraphs to display side-by-side */
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_footer_content p {
    display: flex !important;
    flex-direction: row !important;   /* Pulls the second image back up next to the first */
    flex-wrap: wrap !important;       /* Allows wrapping only if screen space totally runs out */
    align-items: center !important;   /* Centers the first and second image perfectly to each other */
    gap: 15px !important;              /* Adds clean spacing between the two images */
    margin: 0 !important;
    padding: 0 !important;
}

/* Strip out any disruptive native line breaks that the WYSIWYG injected */
.pkp_structure_footer .pkp_footer_content br {
    display: none !important;
}

/* Ensure individual images behave nicely within the flex row */
.pkp_structure_footer .pkp_footer_content img {
    display: inline-block !important;
    height: auto !important;
}