/* 1. General Layout */
#uoa_wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#uoa_footer {
    background-color: var(--footer-bg, #1E6292); /* Use variable, fallback to blue */
/* ...was...    background-color: #A7A9AC;  */
    position: relative;
    margin-top: 40px; 
    min-height: 290px;
    width: 100%;
    clear: both;
    display: block;
    z-index: 1; /* Keep it very low */
}

/* 
   2. THE PDF OVERRIDE 
   We target the common containers OJS uses for the PDF JS viewer.
*/

/* Force the PDF viewer to the front and make it full screen */
.pkp_page_article.pkp_op_view .pkp_structure_main,
.obj_galley_external,
.cmp_pdf_viewer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999999 !important; /* The highest possible layer */
    background: #525659; /* Standard PDF viewer grey */
}

/* 
   3. THE NUCLEAR HIDE
   If the PDF viewer is active, we tell the footer to move off-screen
   and lose all visibility.
*/
body.pkp_op_view #uoa_footer,
body.pkp_op_view .pkp_structure_footer_wrapper,
body.pkp_op_view #uoa_wrap > footer {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important; 
}

/* 4. Table-to-div logic (Your styles) */
.divTable { display: flex; flex-direction: column; width: 100%; }
.divTableRow { display: flex; width: 100%; }
.divTableCell, .divTableHead {
    flex: 1; 
    background-color: #ffffff;
    padding: 10px;
    font-size: 0.6em;
}

/* 5. Logo Constraints */
#uoa_footer .logo_uoa { width: 240px !important; height: 66px !important; }
#uoa_footer .logo_uoa_bk { width: 230px !important; height: 46px !important; }
#uoa_footer .logo_uoa_ybk { width: 100px !important; height: 37px !important; }

/* 6. Hide default OJS footer */
.pkp_structure_footer_wrapper { display: none; }

/* 7. Mobile Responsiveness */
@media (max-width: 600px) {
    #uoa_footer { height: auto; margin-top: 20px; }
    .divTableRow { flex-direction: column; }
    .divTableCell { text-align: left; width: 100%; box-sizing: border-box; }
}