/* ============================================================
    1. HEADER & USER NAVIGATION
   ============================================================ */

.pkp_structure_head {
    background: linear-gradient(to right, #cfe9f7 0%, #ffffff 100%) !important;
}

/* Dashboard, View Profile, Administration, Logout (Dark Blue) */
.pkp_navigation_user a {
    color: #003366 !important; 
    font-weight: 700 !important;
    transition: color 0.2s ease-in-out;
}

.pkp_navigation_user a:hover {
    color: #1f5f75 !important;
}

/* Space before "About" to balance the Search icon */
.pkp_navigation_primary > li:first-child {
    margin-left: 30px !important; 
}

/* ============================================================
    2. BANNER SYNC (Fixing the 2 Large Images)
   ============================================================ */

/* Force containers to allow full width */
.page_index_journal .homepage_image,
.page_index_journal .journal_summary,
.page_index_journal .additional_content { /* Added additional_content container */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

/* Force all three image areas to be the exact same size and style */
.page_index_journal .homepage_image img,
.page_index_journal .journal_summary img,
.page_index_journal .additional_content img { /* Added targeting for the lower image */
    width: 97% !important;      /* Matches your center-aligned width */
    max-width: 97% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;   /* Centers them */
    
    /* Style: Rounded and Shadowed */
    border-radius: 15px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
    
    /* Animation */
    transition: transform 0.3s ease !important;
}

/* Hover effect for all images */
.page_index_journal .homepage_image img:hover,
.page_index_journal .journal_summary img:hover,
.page_index_journal .additional_content img:hover {
    transform: translateY(-5px) !important;
}

/* ============================================================
    3. SIDEBAR BLOCKS (Buttons & Titles)
   ============================================================ */

.pkp_block .title {
    background-color: #1f5f75; 
    color: #ffffff !important;
    padding: 10px 15px;
    margin-bottom: 10px;
    text-align: center; 
    font-size: 20px;
    text-transform: uppercase;
    border-radius: 4px;
}

.pkp_block .content ul {
    list-style: none !important;
    padding: 0 !important;
}

.pkp_block .content ul li a {
    position: relative;
    display: block;
    padding: 10px 15px; 
    border: 2px solid #1f5f75;
    background: #f5f5f5;
    color: #333 !important;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
}

.pkp_block .content ul li a::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #1f5f75;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: -1;
}

.pkp_block .content ul li a:hover::before { transform: scaleX(1); }
.pkp_block .content ul li a:hover { color: #ffffff !important; }

/* ============================================================
    4. LOGIN BLOCK (Typography)
   ============================================================ */

.pkp_block.block_login label,
.pkp_block.block_login .forgot_password,
.pkp_block.block_login .register,
.pkp_block.block_login a {
    color: #222 !important; 
    font-weight: 600;
}

.pkp_block.block_login .button {
    background-color: #1f5f75 !important;
    color: #fff !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    border: none !important;
}

/* Target the sidebar containers */
.pkp_block, .block_information, .block_navigation, .block_custom {
    background-color: #ffffff;    /* White background */
    padding: 15px;               /* Space inside the box */
    margin-bottom: 25px;         /* Space between blocks */
    border-radius: 6px;          /* Slightly rounded corners */
    border: 1px solid #e1e1e1;   /* Subtle border for definition */
    
    /* The Shadow: Horizontal Offset | Vertical Offset | Blur Radius | Color */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    
    /* Ensures the shadow stays within bounds and looks clean */
    overflow: hidden; 
}

/* Adjust the blue headers to fit perfectly inside the new white boxes */
.pkp_block .title, .block_information .title {
    margin: -15px -15px 15px -15px; /* Pulls header to the edges of the box */
    padding: 10px 15px;            /* Adds internal padding back to text */
    background-color: #1a5a6e;     /* Matches your current blue/teal color */
    color: #ffffff;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: bold;
}

/* Optional: Styling the list links to look like the buttons in your image */
.pkp_block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pkp_block ul li a {
    display: block;
    padding: 8px 12px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    transition: background 0.3s ease;
}

.pkp_block ul li a:hover {
    background-color: #f8f8f8;
    border-color: #bbb;
}