/*
================================================================================
| OJS 3.5.0.1 - CUSTOM HEADER AND LAYOUT STYLESHEET                            |
| Goal: Top bar for User Nav, followed by a full-width banner logo.            |
================================================================================
*/

/*
--------------------------------------------------------------------------------
| 1. HEADER REORDERING & LAYOUT (Desktop)                                      |
| Stacks the header elements vertically.                                       |
--------------------------------------------------------------------------------
*/
/* Apply flex layout to the main header container */
.pkp_head_wrapper {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    padding-top: 0 !important;
    background: none; /* Remove any default background from the wrapper */
}



/* Change user navigation link color to be visible on dark background */
.pkp_navigation_user_wrapper a {
    color: #ffffff;
}
.pkp_navigation_user_wrapper a:hover {
    color: #dddddd;
}


/* Tier 2: Site Logo Banner (this holds the full-width image) */
.pkp_site_name {
    order: 2; /* Second item */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important; /* No padding so the image fits edge-to-edge */
    background-color: #0d4b6b; /* Same dark teal to merge with the top bar */
    line-height: 1; /* Remove extra space below the image */
}

/* Tier 3: Primary Navigation (Current, Archives, About) */
.pkp_navigation_primary_wrapper {
    order: 3; /* Third item */
    background-color: #f8f8f8; /* Light background for the nav bar */
    width: 100%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.15); /* Subtle shadow for depth */
}

.pkp_navigation_primary_wrapper .pkp_navigation_primary {
    text-align: left; /* Align menu items to the left */
    padding: 0 20px;
}

.pkp_navigation_primary > li > a {
    color: #333; /* Dark text for light background */
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #000;
    background-color: #eee;
    border-color: transparent;
}

/*
--------------------------------------------------------------------------------
| 2. FULL-WIDTH BANNER LOGO STYLE (Desktop)                                    |
| This ensures the logo stretches to fill its container.                       |
--------------------------------------------------------------------------------
*/
/* This rule styles the image itself to act as a banner */
.pkp_site_name .is_img img {
    width: 100% !important;     /* Stretch image to full width */
    height: auto !important;    /* Maintain aspect ratio */
    display: block;
    max-height: none;           /* Remove any height restrictions */
}

/*
--------------------------------------------------------------------------------
| 3. GENERAL LONG-TEXT JUSTIFICATION                                           |
--------------------------------------------------------------------------------
*/
.obj_article_details .abstract,
.obj_article_details .abstract p,
.page_about_journal .pkp_structure_main p,
.page_about .pkp_structure_main p,
.page_announcement .pkp_structure_main p,
.page_article .main_entry p {
  text-align: justify !important;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  line-height: 1.65;
  margin-bottom: 1em;
}

.obj_article_details .abstract h2,
.obj_article_details .abstract h3,
.page_about_journal h2,
.page_about_journal h3,
.page_announcement h2,
.page_announcement h3,
.page_article h2,
.page_article h3 {
  text-align: left !important;
}

/*
--------------------------------------------------------------------------------
| 4. CUSTOM SIDEBAR MENU STYLE                                                 |
--------------------------------------------------------------------------------
*/
.custom-sidebar-menu {
  margin-bottom: 25px;
  font-family: Arial, sans-serif;
}

.custom-sidebar-menu .title {
  background-color: #e1d5e7;
  color: #584a60;
  padding: 10px 15px;
  margin: 0 0 5px 0;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-sidebar-menu .content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e0e0e0;
}

.custom-sidebar-menu .content li {
  margin: 0;
}

.custom-sidebar-menu .content li a {
  display: block;
  background-color: #f9f8f8;
  padding: 12px 15px;
  color: #424242;
  text-decoration: none;
  font-size: 0.95em;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.custom-sidebar-menu .content li:last-child a {
    border-bottom: none;
}

.custom-sidebar-menu .content li a:hover,
.custom-sidebar-menu .content li a:focus {
  background-color: #584a60;
  color: #ffffff;
}


/*
================================================================================
| 5. MOBILE RESPONSIVE STYLES                                                  |
| Styles for screens smaller than 768px (tablets and phones).                  |
================================================================================
*/
@media (max-width: 768px) {

    /*
     * NEW: Ensures the entire header resizes to fit its content on mobile.
     * This overrides any fixed heights from the theme.
    */
    .pkp_structure_head,
    .pkp_head_wrapper {
        height: auto !important;
        min-height: initial !important;
    }

    /* Center the top user navigation links */
    .pkp_navigation_user_wrapper {
        justify-content: center;
    }

    /* Adjust the logo banner for mobile */
    .pkp_site_name {
        padding: 0px !important; /* Add some padding around the logo */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Scale the logo down on mobile instead of full-width */
    .pkp_site_name .is_img img {
        width: auto !important; /* Let the logo resize naturally */
        max-width: 90%;         /* Ensure it doesn't touch the screen edges */
        max-height: 80px;       /* Control the logo's height */
    }

    /* Stack the main navigation links vertically */
    .pkp_navigation_primary_wrapper .pkp_navigation_primary {
        padding: 0;
    }
    .pkp_navigation_primary > li {
        display: block; /* Make each link take up the full width */
        text-align: center;
        border-bottom: 1px solid #ddd;
    }
    .pkp_navigation_primary > li:last-child {
        border-bottom: none; /* Remove border from the last item */
    }
    .pkp_navigation_primary > li > a {
        padding: 12px 15px;
    }
}
/*
================================================================================
| Mobile Responsive Styles: Dynamic Header Height                              |
================================================================================
*/
@media (max-width: 768px) {

    /*
     * Ensures the entire header resizes to fit its content on mobile.
     * This overrides any fixed heights from the theme.
    */
    .pkp_structure_head {
        height: auto !important;
        min-height: initial !important;
    }
	
	.pkp_site_name .is_img img {
        width: auto !important;
        max-width: 100%;
        max-height: 30px; /* Changed from 80px */
    }

}


/* --- Custom OJS Sidebar Menu Style --- */
/* This style is designed to match the provided image. */

/* Main container for the menu */
.custom-sidebar-menu {
  margin-bottom: 25px;
  font-family: Arial, sans-serif; /* A clean, web-safe font */
}

/* The title of the menu, e.g., "POLICIES" */
.custom-sidebar-menu .menu-title {
  background-color: #e1d5e7; /* Light purple background from image */
  color: #584a60;           /* Dark, muted purple text for contrast */
  padding: 10px 15px;
  margin: 0 0 5px 0;         /* Adds a small space below the title */
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* The list container */
.custom-sidebar-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e0e0e0; /* A very light border around the items */
}

/* Individual list items */
.custom-sidebar-menu li {
  margin: 0;
}

/* The links within the list */
.custom-sidebar-menu li a {
  display: block; /* Makes the entire area clickable */
  background-color: #f9f9f9; /* Off-white background for items */
  padding: 12px 15px;
  color: #424242; /* Dark grey text color */
  text-decoration: none;
  font-size: 0.95em;
  border-bottom: 1px solid #e0e0e0; /* Light separator line */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth transition */
}

/* Remove the line from the very last item */
.custom-sidebar-menu li:last-child a {
    border-bottom: none;
}


/* The hover effect for the links */
.custom-sidebar-menu li a:hover,
.custom-sidebar-menu li a:focus {
  background-color: #584a60; /* Using the dark purple from the title for hover */
  color: #ffffff;             /* White text on hover for high contrast */
}




/**
 * Custom CSS for OJS 3.5.0.1
 * This script reduces the vertical height of the PKP brand footer.
 */
.pkp_structure_footer_wrapper,
.pkp_content_footer,
.pkp_structure_footer {
  /* Reduce padding and margin for the main footer containers */
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pkp_brand_footer {
  /* Reduces the top and bottom padding of the main footer container.
     The !important rule is used to ensure this style overrides the
     default theme's CSS. These values have been reduced for a shorter footer. */
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.pkp_brand_footer .container {
  /* This targets the inner container of the footer for further height reduction. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pkp_brand_footer a[href*="pkp.sfu.ca"] img {
  /* To further reduce height, the size of the PKP logo has been reduced.
     You can adjust this value as needed. */
  max-height: 10px !important;
}