/* Ensure the header spans the full width of the viewport */
header {
    width: 100%;
    padding: 0;          /* Remove padding */
    margin: 0;           /* Remove margin */
    background-color: #fff; /* Set a background color if needed */
}

/* Make the logo container take the full width */
.pkp_site_logo {
    width: 100%;           /* Ensure the logo container is full width */
    display: flex;         /* Use flexbox to align the logo */
    justify-content: center; /* Center the logo horizontally */
    align-items: center;    /* Center the logo vertically */
    position: relative;     /* Positioning for the logo */
    z-index: 2;            /* Make sure the logo stays on top of other content */
}

/* Make the logo image responsive */
.pkp_site_logo img {
    width: 100%;           /* Ensure the image stretches to full width */
    height: auto;          /* Maintain the aspect ratio */
    max-width: 4000px;     /* Ensure a large enough image size (optional, tweak as needed) */
    display: block;        /* Prevent any extra space below the image */
}

/* Remove the default footer PKP branding logo */
.pkp_structure_footer .pkp_brand_footer {
    display: none;          /* Hide the PKP footer brand/logo */
}

/* Style the footer text (Copyright information) */
.pkp_structure_footer .pkp_footer_text {
    text-align: center;     /* Center the footer text */
    padding: 10px 0;        /* Add padding to the footer */
    font-size: 14px;        /* Set the font size for readability */
    color: #333;            /* Set the text color */
}

.pkp_structure_footer .pkp_footer_text a {
    color: #007bff;         /* Set link color */
    text-decoration: none;  /* Remove underline from links */
}

.pkp_structure_footer .pkp_footer_text a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Optional: Add responsiveness for smaller screens (mobile) */
@media (max-width: 768px) {
    .pkp_site_logo img {
        width: 80%;           /* Reduce logo size on smaller screens */
    }
}