/* =========================================================
   styleSheet.css
   OJS color/layout override
   - Header: full-width, solid teal
   - Footer: full-width, solid teal
   - Main content / remaining page: light gray
   - Main content layout, columns, sidebar position, margins,
     and internal spacing are not changed.
   ========================================================= */

:root {
    --journal-teal: #149b9b;
    --journal-teal-dark: #0d7f7f;
    --journal-light-gray: #eeeeee;
    --journal-text: #333333;
    --journal-border: #d8d8d8;
}

/* =========================================================
   PAGE / CONTENT
   ========================================================= */

html,
body {
    background: var(--journal-light-gray) !important;
    color: var(--journal-text);
}

/* Keep the original OJS structure and positions.
   Only change the background color. */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_page_index,
.page_index_journal,
.page_about,
.page_issue,
.page_article,
.page_search,
.additional_content,
.current_issue {
    background: var(--journal-light-gray) !important;
}

/* =========================================================
   HEADER — FULL WIDTH, SOLID TEAL
   ========================================================= */

/* Make the header span the full browser width */
.pkp_structure_head {
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: none !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;

    background: var(--journal-teal) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Header's inner wrapper may stay centered according to OJS theme */
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
    background: transparent !important;
}

/* Navigation bar: same solid teal so header looks unified */
.pkp_navigation_primary_wrapper {
    background: var(--journal-teal) !important;
    border-top: 1px solid rgba(255,255,255,0.18) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Header / menu text */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a:visited,
.pkp_navigation_user > li > a,
.pkp_navigation_user > li > a:visited,
.pkp_search,
.pkp_search:visited {
    color: #ffffff !important;
}

/* Menu hover */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #ffffff !important;
    background: rgba(0,0,0,0.08) !important;
    text-decoration: none !important;
}

/* =========================================================
   MAIN CONTENT — LIGHT GRAY
   ========================================================= */

/* Sidebar blocks remain in their original positions */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .pkp_block .content {
    background: var(--journal-light-gray) !important;
}

/* Optional sidebar headings also use light gray */
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .pkp_block h2,
.pkp_structure_sidebar .pkp_block h3 {
    background: var(--journal-light-gray) !important;
    color: var(--journal-text) !important;
}

/* Common OJS content blocks */
.obj_issue_toc,
.obj_article_summary,
.journal-card,
.soft-box,
.sidebar-box,
.sidebar-box-content {
    background: var(--journal-light-gray) !important;
}

/* Keep readable borders */
.pkp_structure_sidebar .pkp_block,
.obj_issue_toc,
.obj_article_summary,
.journal-card,
.soft-box,
.sidebar-box {
    border-color: var(--journal-border) !important;
}

/* =========================================================
   FOOTER — FULL WIDTH, SOLID TEAL
   ========================================================= */

.pkp_structure_footer_wrapper {
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: none !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;

    background: var(--journal-teal) !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

/* Keep original inner footer width and spacing */
.pkp_structure_footer,
.pkp_brand_footer {
    background: transparent !important;
    color: #ffffff !important;
}

/* Footer text */
.pkp_structure_footer p,
.pkp_structure_footer div,
.pkp_structure_footer span,
.pkp_structure_footer li {
    color: #ffffff !important;
}

/* Footer links */
.pkp_structure_footer a,
.pkp_structure_footer a:visited {
    color: #ffffff !important;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
    color: #e6ffff !important;
}

/* Generic fallback for OJS themes using a normal footer tag */
footer,
footer[role="contentinfo"],
#footer,
.footer,
.site-footer {
    background: var(--journal-teal) !important;
    color: #ffffff !important;
}

/* =========================================================
   LINKS IN CONTENT
   ========================================================= */

.pkp_structure_content a {
    color: var(--journal-teal-dark);
}

.pkp_structure_content a:hover,
.pkp_structure_content a:focus {
    color: #075f5f;
}

/* =========================================================
   MOBILE SAFETY
   ========================================================= */

@media (max-width: 768px) {
    .pkp_structure_head,
    .pkp_structure_footer_wrapper {
        width: 100vw !important;
    }
}

/* =========================================================
   IMPORTANT
   =========================================================
   This stylesheet does NOT redefine:
   - content grid
   - sidebar width
   - main column width
   - flex/grid layout
   - internal page margins
   - content padding
   - element positioning inside the content area

   Only the header/footer are made full-browser-width,
   as requested.
   ========================================================= */