/* SVG background for full page */
html, body {
    min-height: 100%;
    background-color: #efe6ff !important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238a2be2' fill-opacity='0.55' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    min-width: 100vw;
}

/* Boxed layout for content */
.pkp_structure_page {
    max-width: 1200px;
    margin: 30px auto;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Header wrapper */
.pkp_structure_header {
    border-bottom: 1px solid #ddd;
    background: #fff;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- LOGO AREA SECTION --- */

/* The wrapper that should be stretched (adjust selector if needed) */
.pkp_site_name_wrapper, .pkpsitenamewrapper, .pkp_head_content, .pkp_site_name {
    /* Try all possible parent selectors */
    height: 200px !important;     /* Taller area for stretched logo */
    width: 100% !important;
    box-sizing: border-box;
    background: #fff;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
}

/* The logo image anchor area */
.pkp_site_name a, .pkpsitename a {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The logo img itself */
.pkp_site_name img, .pkpsitename img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* Remove any default padding/margin from OJS default logo box if present */
.pkp_site_name_wrapper *, .pkpsitenamewrapper * {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- END LOGO SECTION --- */

/* Other boxed content, navigation, sidebar, footer as previously provided ... */

/* Responsive adjustment for mobile */
@media (max-width:950px) {
    .pkp_structure_page, .pkp_structure_footer {
        max-width: 99vw;
    }
    .pkp_structure_main {
        padding: 10px 3px !important;
    }
    .pkp_site_name_wrapper, .pkpsitenamewrapper, .pkp_head_content, .pkp_site_name {
        height: 110px !important;
    }
}