/*
=========================================================
GUL-O-BERG – RESEARCH JOURNAL (ENGLISH)
OJS 3.3.0.22 — FINAL CUSTOM CSS
=========================================================

Purpose:
- Journal banner/header at bannereng.png's aspect ratio (~2.96:1),
  scaled down to a 300px-tall desktop banner (down from a first pass
  that rendered it at ~540px tall, which dominated the page)
- Gray #8C8D8B padding above and below banner
- Transparent OJS header wrappers
- Dark navy #0C314C navigation
- Clean sans-serif throughout (English-only edition, no Urdu/RTL rules)
- Responsive mobile header
- Font Awesome icon protection

The banner should remain configured in OJS as the homepage/header
background image. This CSS intentionally does not hard-code a
banner URL.
=========================================================
*/

/* =========================================================
   1. GLOBAL / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    /* No overflow-x:hidden here on purpose: per spec, setting only
       one of overflow-x/overflow-y to a non-visible value forces the
       OTHER axis to "auto" too — that silently turned html/body into
       a vertical scroll container, which clipped the absolutely
       positioned mobile dropdown menu (anything past the very first
       item was invisible). The actual sources of horizontal overflow
       (100vw/negative-margin "full bleed" tricks, unconstrained flex
       children) have since been fixed at the root elsewhere in this
       file, so this blanket safety net is no longer needed. */
}
body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    color: #263238;
    /* Light gray page backdrop (not pure white) so the white content
       card and the sidebar card visually separate from each other and
       from the page edge — matching the reference design. Without
       this, both sit on identical white and any gap between them
       reads as "touching" even though a margin exists. */
    background-color: #F2F1EE;
}
a { color: #0C314C; }
a:hover, a:focus { color: #285B66; }

/* =========================================================
   2. HEADER / JOURNAL BANNER — FINAL
   =========================================================
   - Banner image (bannereng.png) fills the header width-to-width
     via "100% auto" background-size plus an aspect-ratio spacer
     (see below for why), at its native aspect ratio (~2.96:1 —
     2158x729)
   - A single-row navigation bar sits directly below it:
       left  = site logo/name
       right = menu links + search + register/login
   - Nothing here uses 100vw/negative-margin "full bleed"
     tricks, since those are what caused the page to gain a
     horizontal scrollbar (100vw includes the scrollbar width)
   ========================================================= */

/* Three approaches were tried for the banner's height before this
   one, each with its own bug:
     1. Fixed pixel heights (300px, 330px) — only ever correct at one
        specific viewport width; wrong (cropped or gappy) at any other.
     2. vw-based calc(), e.g. "34vw" or "calc(100vw * 729 / 2158)" —
        this file's OWN original header comment already warned about
        this: "100vw includes the scrollbar width". Whenever the page
        has a vertical scrollbar, 100vw (the full viewport, scrollbar
        included) is a few pixels WIDER than the page's actual visible
        content width — so anything sized from 100vw ends up very
        slightly too wide/tall, and mixing that with 100%-based widths
        elsewhere caused a real horizontal-scrollbar bug on desktop.
     3. "cover" — sizes against the box's TOTAL height (banner + the
        logo/nav row nested inside the same element), not just the
        banner portion, so it zoomed in far more than intended.
   aspect-ratio avoids all three: it derives one dimension from the
   other using the ELEMENT'S OWN resolved width — never the viewport,
   never the box's total height — so it can't pick up the scrollbar's
   width and can't be thrown off by the nav row's height. Since CSS
   Grid can't put aspect-ratio directly on a row track, the ::before
   below acts as an invisible spacer sized by aspect-ratio and placed
   in row 1; Grid's "auto" row sizing then follows the spacer's real
   rendered height, which is always exactly this box's width times
   729/2158 — matching the background image's own real proportions
   pixel-for-pixel, with no vw math, no clamp, and no fudge factor. */
#headerNavigationContainer,
.pkp_structure_head {
    background-color: #8C8D8B !important;
    background-repeat: no-repeat !important;
    /* "100% auto": sizes purely from the box's own WIDTH and the
       image's real intrinsic ratio — same reasoning as the aspect-
       ratio spacer above, so the two always match. Not "cover" (see
       above) and not an explicit calc()'d height (no longer needed
       now that nothing here depends on viewport width). */
    background-position: center top !important;
    background-size: 100% auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    /* overflow must stay visible: a CSS background-image never causes
       overflow/scrolling on its own (it's clipped to the box for free),
       so hiding overflow here was never needed for the banner — but it
       WAS clipping the absolutely-positioned dropdown submenus, which
       render below this box and don't count toward its auto height. */
    overflow: visible !important;
}

/* pkp_head_wrapper holds the banner row (row 1, height set by the
   ::before spacer below) and the nav-bar row (row 2, auto height) as
   a 2-column, 2-row grid. Row 1 is otherwise left empty so the banner
   background shows through. Row 2 holds the logo (col 1) and the nav
   menu (col 2). */
.pkp_head_wrapper {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    position: relative !important;
    background-color: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Invisible spacer that gives row 1 its height — see the big comment
   above for why aspect-ratio (not vw math, not "cover") is what's
   used to match the banner image's real 2158x729 proportions. */
.pkp_head_wrapper::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 2158 / 729;
}

.pkp_site_name_wrapper {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background-color: #D6A84F !important;
    width: auto !important;
    height: auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 8px 20px !important;
    border: 0 !important;
}

.pkp_site_name {
    position: static !important;
    z-index: auto !important;
    background-color: transparent !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    white-space: normal !important;
    color: #0C314C !important;
}

.pkp_site_name.is_img {
    display: block !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 150px !important;
}

.pkp_site_name.is_img img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.pkp_site_name > a {
    background: transparent !important;
    padding: 0 !important;
}


/* =========================================================
   3. NAVIGATION BAR (right side of the header row)
   ========================================================= */

/* Wraps the primary menu + user (register/login) menu together.
   min-width:0 lets it shrink to the 1fr grid track instead of
   forcing the track (and the page) wider; overflow stays visible
   so hover dropdowns aren't clipped. */
.pkp_site_nav_menu {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important; /* safety: if content is too tight to fit
        on one line, Register/Login drop to a second line instead of
        overlapping the search link */
    row-gap: 2px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background-color: #D6A84F !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    overflow: visible !important;
}

.pkp_navigation_primary_row {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary_wrapper {
    position: static !important;
    z-index: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    row-gap: 2px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* flex-wrap:wrap (not nowrap) is deliberate: there are 9 top-level menu
   items on real journal pages. Forcing them onto one unbroken line made
   the row wider than the viewport, and since the page uses
   overflow-x:hidden to prevent a horizontal scrollbar, anything past the
   right edge (Search, Register, Login) was getting silently clipped off
   screen instead of shown. Wrapping keeps every link visible. */
.pkp_navigation_primary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    row-gap: 2px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important; /* let it shrink and wrap internally instead
        of overflowing past its box and overlapping the search/user links */
    flex-shrink: 1 !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    float: none !important;
}

.pkp_navigation_primary > li {
    position: relative !important; /* anchors the dropdown submenu */
    display: flex !important;
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary > li > a {
    display: block !important;
    color: #0C314C !important;
    background-color: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 9px !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
}

.pkp_navigation_primary > li > a:hover {
    color: #0C314C !important;
    background-color: #C6963E !important;
    border-bottom-color: #0C314C !important;
}

.pkp_navigation_primary > li > a:focus {
    color: #FFFFFF !important;
    background-color: #0C314C !important;
    outline: none !important;
}

/* Submenu (dropdown): hidden by default, revealed on hover/focus
   of its parent <li> instead of relying on a JS-toggled class,
   positioned absolutely so it floats above the page content.
   Covers both .pkp_navigation_primary and .pkp_navigation_user
   because on the multi-journal site-index page every link
   (including a nested dropdown) is rendered under
   .pkp_navigation_user instead of .pkp_navigation_primary. */
.pkp_navigation_primary ul,
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_user ul,
.pkp_navigation_user .dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999 !important;
    min-width: 190px !important;
    background-color: #FFFFFF !important;
    border: 1px solid #D9D9D9 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    list-style: none !important;
}

/* .pkp_navigation_user (Register/Login, or "admin ▾" when logged in)
   is the right-most item in the header — "left:0" from the shared
   rule above anchors its dropdown to the LEFT edge of that trigger,
   so the dropdown's own 190px width extends further right, off the
   edge of the browser window. That overflow was forcing a horizontal
   scrollbar on the whole page (visible as a shift/white gap) whenever
   this menu was opened. Anchoring it to the trigger's RIGHT edge
   instead (right:0, left:auto) makes it open leftward, so it always
   stays within the viewport no matter how close to the edge the
   trigger itself is. */
.pkp_navigation_user ul,
.pkp_navigation_user .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

.pkp_navigation_primary > li:hover > ul,
.pkp_navigation_primary > li:hover > .dropdown-menu,
.pkp_navigation_primary > li:focus-within > ul,
.pkp_navigation_primary > li:focus-within > .dropdown-menu,
.pkp_navigation_user > li:hover > ul,
.pkp_navigation_user > li:hover > .dropdown-menu,
.pkp_navigation_user > li:focus-within > ul,
.pkp_navigation_user > li:focus-within > .dropdown-menu {
    display: block !important;
}

.pkp_navigation_primary ul a,
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_user ul a,
.pkp_navigation_user .dropdown-menu a {
    display: block !important;
    color: #0C314C !important;
    background-color: #FFFFFF !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus,
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_user ul a:hover,
.pkp_navigation_user ul a:focus,
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user .dropdown-menu a:focus {
    color: #0C314C !important;
    background-color: #F3E5C2 !important;
    border-color: #D6A84F !important;
}

.pkp_navigation_search_wrapper {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
}

.pkp_navigation_search_wrapper a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #0C314C !important;
    background-color: transparent !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
}

.pkp_navigation_search_wrapper a .fa {
    font-size: 14px !important;
    line-height: 1 !important;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
    color: #0C314C !important;
    background-color: #C6963E !important;
}

.pkp_navigation_search_wrapper input[type="text"],
.pkp_navigation_search_wrapper input[type="search"] {
    max-width: 140px !important;
    height: 30px !important;
    box-sizing: border-box !important;
}


/* =========================================================
   4. USER NAVIGATION — REGISTER / LOGIN
   ========================================================= */
/* The theme has a legacy rule — .pkp_navigation_user{width:1160px}
   (a Bootstrap-style "container" width left over from when this
   element was a full-width absolutely-positioned overlay bar) —
   that fires at wide viewports. Since we turned it into a normal
   flex item, that leftover width forced it to ~1160px wide and
   crushed the primary menu down to almost nothing, which is what
   made every link wrap onto its own line. width:auto neutralizes it. */
.pkp_navigation_user_wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    /* transform:none is essential: the theme sets translateX(-50%) to
       center this element when it was position:absolute. transform
       still applies even after switching to position:static, which
       was silently shifting it left and overlapping the search link. */
    transform: none !important;
    z-index: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
    background-color: transparent !important;
    margin: 0 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
}

.pkp_navigation_user {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 2px !important;
    align-items: center !important;
    background-color: transparent !important;
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.pkp_navigation_user > li {
    position: relative !important; /* anchors a dropdown submenu, if any */
    flex-shrink: 0 !important;
    margin: 0 0 0 14px !important;
}

.pkp_navigation_user > li > a {
    color: #0C314C !important;
    background-color: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #0C314C !important;
    background: #C6963E !important;
}


/* =========================================================
   5. MOBILE NAVIGATION TOGGLE
   =========================================================
   The theme positions this button with position:absolute,
   anchored to the nearest positioned ancestor, and its hamburger
   lines (the <span>) are themselves absolutely centered INSIDE
   the button. Forcing the button itself to position:relative
   (not static/absolute) keeps it a normal item in the logo row's
   flex flow — so it never overlaps the logo — while still giving
   its own <span> a correct positioning anchor to center within.
   The theme already hides this button at desktop widths (≥992px)
   via its own CSS, so no display override is needed here. */
.pkp_site_nav_toggle {
    position: relative !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    background-color: #D6A84F !important;
    color: #0C314C !important;
}
/* The hamburger icon is 3 lines: the span's own border-bottom is
   one line, and its ::before/::after pseudo-elements are the other
   two — the span itself must stay transparent, or it renders as a
   solid block instead of 3 separate lines. */
.pkp_site_nav_toggle span {
    color: #0C314C !important;
    background-color: transparent !important;
    border-bottom-color: #0C314C !important;
}
.pkp_site_nav_toggle span:before,
.pkp_site_nav_toggle span:after {
    background-color: #0C314C !important;
}

/* =========================================================
   6. PROTECT ICON FONTS
   ========================================================= */
.fa,
.fas,
.far,
.fal,
.fab,
[class^="fa-"],
[class*=" fa-"],
.glyphicon,
.icon,
.pkp_icon {
    font-family: inherit !important;
}

/* This site loads Font Awesome 4.7 (lib/pkp/styles/fontawesome/fontawesome.css),
   whose @font-face registers a single family named "FontAwesome" — not the
   FA5 "Font Awesome 5 Free/Brands" names. Forcing the FA5 names here made the
   browser fail to match any loaded font, so icons (e.g. the search glyph)
   rendered as an empty box. "FontAwesome" must come first; the FA5 names are
   kept only as a harmless fallback in case a future upgrade adds them. */
.fa,
.fas,
.far,
.fal,
.fab {
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
    font-weight: normal !important;
}

/* =========================================================
   7. LATIN UI
   ========================================================= */
button,
input,
select,
textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_navigation_search_wrapper,
.pkp_site_nav_menu,
.pkp_site_nav_toggle {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* =========================================================
   7.5 SIDEBAR BLOCKS (Information, Current Issue, Browse, etc.)
   =========================================================
   Boxed card with a navy header bar + white body, matching the
   reference design: bold label / colored value rows separated
   by a thin rule. Applies to every .pkp_block in the sidebar so
   "Information", "Current Issue", "Browse" etc. look consistent. */
.pkp_structure_sidebar .pkp_block {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* OJS blocks are context-aware: on some page types (e.g. the plain
   Contact page) block_information renders as an empty shell with
   no .title/.content inside — just whitespace — because it has
   nothing contextual (like an issue's ISSN) to show there. Without
   this, that empty shell still gets the full card treatment above
   (border, shadow, spacing) and shows up as a blank floating box
   with nothing in it. :has(> .content) only shows the card when
   there's an actual title/content to put in it. */
.pkp_structure_sidebar .pkp_block:not(:has(> .content)) {
    display: none !important;
}

.pkp_structure_sidebar .pkp_block > .title {
    margin: 0;
    background-color: #0C314C;
    color: #FFFFFF;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pkp_structure_sidebar .pkp_block > .content {
    padding: 16px;
}

/* ISSN Online / ISSN Print row inside the Information block:
   bold navy labels, brick-red values, like the reference image. */
.pkp_block.block_information .issn_info {
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E5E5;
    color: #8B3A3A;
    line-height: 1.9;
}

.pkp_block.block_information .issn_info strong {
    color: #0C314C;
    font-weight: 700;
}

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

.pkp_block .content ul li {
    padding: 8px 0;
    border-bottom: 1px solid #E5E5E5;
}

.pkp_block .content ul li:last-child {
    border-bottom: 0;
}

.pkp_block .content ul li a {
    color: #0C314C;
    text-decoration: none;
    font-weight: 600;
}

.pkp_block .content ul li a:hover,
.pkp_block .content ul li a:focus {
    color: #D6A84F;
}

.block_make_submission_link {
    display: block;
    background-color: #0C314C !important;
    color: #FFFFFF !important;
    text-align: center;
    padding: 10px 16px !important;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none !important;
}

.block_make_submission_link:hover,
.block_make_submission_link:focus {
    background-color: #D6A84F !important;
    color: #0C314C !important;
}

/* =========================================================
   8. CONTENT
   ========================================================= */

/* Main content as a white "card" against the gray page background,
   with its own padding/shadow so it reads as a distinct block. */
.pkp_structure_main {
    background-color: #FFFFFF;
    padding: 24px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    box-sizing: border-box !important;
}

/* The sidebar sits in the same 300px-wide float column the theme
   already reserves, but width:280px + margin-left:20px carves out
   a visible 20px gap from the main content card instead of the two
   floats sitting flush against each other. */
.pkp_structure_sidebar {
    width: 280px !important;
    margin-left: 20px !important;
    margin-top: 24px !important;
    box-sizing: border-box !important;
}

/* Article list on an issue page: each article gets its own bordered
   card, large navy title that turns gold on hover (the same
   navy/gold combo used everywhere else on the site — nav links,
   sidebar blocks, buttons), gray author line, and an outlined PDF
   button matching the site's button style. */
.cmp_article_list.articles {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cmp_article_list.articles > li {
    list-style: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.obj_article_summary {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.obj_article_summary .title {
    margin: 0 0 8px 0;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
}

.obj_article_summary .title a {
    color: #0C314C;
    text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: #D6A84F;
}

.obj_article_summary .title .subtitle {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: inherit;
    margin-top: 2px;
}

.obj_article_summary .meta,
.obj_article_summary .authors {
    color: #6B6B6B;
    font-size: 14px;
    margin: 0 0 12px 0;
}

.obj_article_summary .galleys_links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.obj_article_summary .galleys_links li {
    display: inline-block;
    margin: 0 !important;
}

/* Solid filled button (matching .block_make_submission_link's look)
   instead of a thin outline — more visually prominent/"attractive",
   and consistent with the other solid buttons used across the site. */
.obj_article_summary .obj_galley_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #0C314C;
    border-radius: 4px;
    color: #FFFFFF !important;
    background-color: #0C314C;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.obj_article_summary .obj_galley_link:hover,
.obj_article_summary .obj_galley_link:focus {
    background-color: #D6A84F;
    border-color: #D6A84F;
    color: #0C314C !important;
}

/* Issue list on the Archives page: same boxed-card language as the
   article list above (bordered white card, bold navy title that
   turns gold on hover) so the whole site reads as one consistent
   design instead of the article list being styled and everything
   else being plain text. */
.issues_archive {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.issues_archive > li {
    list-style: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.obj_issue_summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.obj_issue_summary .cover {
    flex-shrink: 0;
}

.obj_issue_summary .cover img {
    display: block;
    max-width: 120px;
    height: auto;
    border-radius: 2px;
}

.obj_issue_summary h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.4;
    flex: 1 1 200px;
    min-width: 0;
}

.obj_issue_summary h2 .title {
    color: #0C314C;
    text-decoration: none;
    font-weight: 700;
}

.obj_issue_summary h2 .title:hover,
.obj_issue_summary h2 .title:focus {
    color: #D6A84F;
}

.obj_issue_summary .series {
    color: #6B6B6B;
    font-size: 14px;
    font-weight: 400;
    margin-top: 4px;
}

.obj_issue_summary .description {
    color: #263238;
    font-size: 14px;
    margin-top: 8px;
    width: 100%;
}

.obj_issue_summary .description:empty {
    display: none;
}

/* =========================================================
   9. FOOTER
   ========================================================= */
.pkp_structure_footer_wrapper {
    background-color: #0C314C !important;
}
.pkp_structure_footer {
    background-color: #0C314C !important;
    color: #FFFFFF !important;
}
.pkp_structure_footer a { color: #FFFFFF !important; }
.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus { color: #F3E5C2 !important; }

/* =========================================================
   10. MOBILE HEADER (≤768px)
   =========================================================
   Collapsed nav: only the logo bar (logo + hamburger toggle)
   shows by default. The theme's own script (main.js) toggles
   the class .pkp_site_nav_menu--isOpen on .pkp_site_nav_menu
   when the hamburger button is clicked — we hide the menu
   unless that class is present, then render it as a full-width
   vertical dropdown below the logo bar.

   The banner height itself (row 1, sized by the .pkp_head_wrapper::
   before spacer in section 2) is aspect-ratio-based and already
   scales fluidly at every width, mobile included, so it doesn't need
   to be re-set per breakpoint here — only the other header elements
   (logo size, nav layout) do.
   ========================================================= */
@media (max-width: 768px) {
    .pkp_head_wrapper {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    .pkp_site_name_wrapper {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        padding: 10px 14px !important;
    }

    .pkp_site_name.is_img { max-width: 130px !important; }
    .pkp_site_name.is_img img {
        max-width: 130px !important;
        max-height: 48px !important;
    }

    /* Hidden by default; only .pkp_site_nav_menu--isOpen (added by
       main.js on toggle click) switches it back on. grid-column/row
       must be reset here too: the base (desktop) rule places this
       element at grid-column:2, and for an absolutely positioned
       grid item, grid placement still determines its containing
       block for width resolution — even though the mobile grid only
       has ONE column (grid-template-columns:1fr above), so "column
       2" doesn't exist and its width was collapsing to 0. */
    .pkp_site_nav_menu {
        display: none !important;
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    /* position:absolute (not a grid placement) is deliberate: a CSS
       Grid "auto" row containing a flex column child has a known bad
       interaction where the row collapses to near-zero height, which
       was hiding every menu item after the first. Taking the open
       menu out of grid/document flow entirely as an overlay dropdown
       sidesteps that, and is the standard mobile-menu pattern anyway
       (it floats over the page instead of pushing content down).
       .pkp_head_wrapper is position:relative, so it anchors here. */
    /* No max-height/overflow-y:auto here on purpose: this menu has
       many items with sub-items (Team, Policy, etc. each have their
       own indented list), which made the dropdown much taller than
       75vh. A capped, internally-scrolling box meant the visible
       scroll position could land mid-menu (e.g. after tapping a
       submenu link), making Home/About/Journal look like they'd
       vanished when they were just scrolled out of the inner box.
       Letting the dropdown grow to its full natural height instead
       means the ordinary PAGE scroll reveals everything, top to
       bottom, exactly like the on-page order — no separate/confusing
       scroll region. */
    .pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 500 !important;
        width: 100% !important;
        background-color: #D6A84F !important;
        padding: 4px 0 !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
    }

    /* Stack every row (links, search, register/login) vertically
       instead of the desktop side-by-side flex layout. flex-wrap
       must switch to nowrap here: the base (desktop) rules set
       flex-wrap:wrap, and wrap + flex-direction:column together
       means items overflowing the available HEIGHT start a new
       COLUMN off to the side instead of stacking — which is what
       was hiding every item after the first one. */
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary,
    .pkp_navigation_user {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .pkp_navigation_primary > li,
    .pkp_navigation_user > li {
        /* The <li> itself is still display:flex from the desktop
           base rule, defaulting to flex-direction:row — without
           this override, the link and its nested submenu <ul> sat
           side by side instead of the submenu stacking below it. */
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .pkp_navigation_search_wrapper {
        width: 100% !important;
        margin: 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .pkp_navigation_search_wrapper a {
        padding: 12px 16px !important;
    }

    .pkp_navigation_user_wrapper {
        width: 100% !important;
        margin: 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .pkp_navigation_user > li > a {
        display: block !important;
        padding: 12px 16px !important;
    }

    /* Hover doesn't work reliably on touch, so submenus are always
       expanded inline (indented) under their parent link instead of
       relying on the desktop hover-to-reveal behavior. */
    .pkp_navigation_primary ul,
    .pkp_navigation_primary .dropdown-menu,
    .pkp_navigation_user ul,
    .pkp_navigation_user .dropdown-menu {
        display: block !important;
        position: static !important;
        min-width: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 0 !important;
        background-color: rgba(255, 255, 255, 0.55) !important;
    }

    .pkp_navigation_primary ul a,
    .pkp_navigation_primary .dropdown-menu a,
    .pkp_navigation_user ul a,
    .pkp_navigation_user .dropdown-menu a {
        padding: 10px 16px 10px 28px !important;
    }
}

/* =========================================================
   11. SMALL PHONES (≤480px)
   ========================================================= */
@media (max-width: 480px) {
    .pkp_site_name_wrapper {
        padding: 8px 10px !important;
    }

    .pkp_site_name.is_img { max-width: 105px !important; }
    .pkp_site_name.is_img img {
        max-width: 105px !important;
        max-height: 40px !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 11px 14px !important;
        font-size: 13px !important;
    }

    .pkp_navigation_user_wrapper {
        margin: 0 !important;
    }
}


/* =========================================================
   12. ACCESSIBILITY / FOCUS
   ========================================================= */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline-color: #D6A84F;
}

/* =========================================================
   END OF CUSTOM CSS
   ========================================================= */