/* ==========================================================================
   AFRICANA ANNUAL — CUSTOM THEME OVERRIDES (OJS 3.4)
   Organized, deduplicated, and extended from the original stylesheet.
   Section numbers match the original file where possible.
   ========================================================================== */

:root {
    --aa-text: #2D3748;
    --aa-text-muted: #4A5568;
    --aa-heading: #111111;
    --aa-accent: #0056b3;
    --aa-accent-dark: #004085;
    --aa-card-bg: #ffffff;
    --aa-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --aa-cover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   1. LOGO & HEADER RESIZING
   ========================================================================== */
/* Default Theme logo layout */
.pkp_site_name .is_img img {
    max-height: 150px !important;
    width: auto !important;
}

/* Bootstrap Theme logo layout */
.navbar-brand img {
    height: 120px !important;
    width: auto !important;
}

/* Keep the logo from overwhelming the header on small screens */
@media (max-width: 768px) {
    .pkp_site_name .is_img img {
        max-height: 90px !important;
    }
    .navbar-brand img {
        height: 70px !important;
    }
}

/* ==========================================================================
   2. TYPOGRAPHY & BODY TEXT
   ========================================================================== */
body,
.pkp_structure_main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--aa-text) !important;
}

/* The rule above was losing to a more specific OJS theme selector on the
   actual content wrapper (this is why the "About the Journal" description
   was still rendering in a serif fallback font). Forcing it on every
   descendant wins that specificity fight. Elements likely carrying icon
   fonts are excluded so glyphs don't break. */
body *:not(svg):not(svg *):not([class*="icon"]):not(.fa):not([class^="fa-"]) {
    font-family: inherit !important;
}

/* Give headings a bit more presence than the OJS default */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
    color: var(--aa-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   3. NAVIGATION BAR MODERNIZATION
   ========================================================================== */
.pkp_navigation_primary > li > a {
    font-weight: 600 !important;
    color: var(--aa-text-muted) !important;
    padding: 10px 15px !important;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border-bottom: 2px solid transparent; /* reserve space so hover doesn't shift layout */
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--aa-accent) !important;
    text-decoration: none !important;
    border-bottom-color: var(--aa-accent);
}

/* Mark the current section so readers know where they are */
.pkp_navigation_primary > li.current > a {
    color: var(--aa-accent) !important;
    border-bottom-color: var(--aa-accent);
}

/* ==========================================================================
   4. ARTICLE LIST CARDS & COVER IMAGES
   ========================================================================== */
.homepage_image img {
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

.obj_article_summary {
    background: var(--aa-card-bg) !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    border-radius: 6px !important;
    box-shadow: var(--aa-card-shadow) !important;
    transition: box-shadow 0.2s ease !important;
}

/* Subtle lift on hover so the list feels interactive, matching the covers below */
.obj_article_summary:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.obj_article_summary .title a {
    color: var(--aa-heading) !important;
    font-weight: 600 !important;
}

.obj_issue_toc .cover img {
    border-radius: 8px !important;
    box-shadow: var(--aa-cover-shadow) !important;
    transition: transform 0.2s ease !important;
}

.obj_issue_toc .cover img:hover {
    transform: translateY(-4px) !important;
}

/* ==========================================================================
   5. SIDEBAR BLOCKS
   ========================================================================== */
/* Confirmed via devtools: markup is <div class="pkp_block block_information">
   <h2 class="title">. The original .block .title guess failed because the
   class is "pkp_block", not "block" — those are different selectors. */
.pkp_block .title,
.pkp_structure_sidebar .title {
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--aa-accent) !important;
    padding-bottom: 5px !important;
    color: var(--aa-heading) !important;
}

.pkp_structure_sidebar .pkp_block {
    margin-bottom: 25px !important;
}

/* ==========================================================================
   6. PDF & GALLEY BUTTONS
   ========================================================================== */
.obj_article_summary .galleys_links a.galley_link {
    background-color: var(--aa-accent) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    border: none !important;
    display: inline-block !important;
    margin-right: 5px !important;
    transition: background-color 0.2s ease-in-out !important;
}

.obj_article_summary .galleys_links a.galley_link:hover,
.obj_article_summary .galleys_links a.galley_link:focus {
    background-color: var(--aa-accent-dark) !important;
    text-decoration: none !important;
}

/* Visible focus ring for keyboard users, since the color-only hover state
   above isn't enough on its own for accessibility */
.obj_article_summary .galleys_links a.galley_link:focus-visible {
    outline: 2px solid var(--aa-accent-dark) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
/* A quieter, more editorial footer than the OJS default */
#footer,
.pkp_structure_footer {
    color: var(--aa-text-muted) !important;
    font-size: 0.9rem !important;
}

#footer a,
.pkp_structure_footer a {
    color: var(--aa-accent) !important;
}