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

Purpose:
- Full 1600x400 journal banner/header
- Gray #8C8D8B padding above and below banner
- Transparent OJS header wrappers
- Dark navy #0C314C navigation
- Urdu uses Jameel Noori Nastaleeq
- English remains a clean sans-serif
- Comfortable Urdu sizing
- Responsive mobile header
- Font Awesome icon protection

Keep the Jameel font at:
/ojs333/fonts/JameelNooriNastaleeq.woff

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 {
    /* "Jameel Urdu Only" is included here as a general fallback, not
       just under [dir="rtl"] below: some OJS static pages (e.g. a
       "Guidelines for Author" page whose content is Urdu text) still
       render with <body dir="ltr"> because the page itself is set to
       the English locale, even though the text on it is Urdu — so the
       [dir="rtl"] rules never match there and Urdu falls back to a
       generic system Arabic font instead of this journal's typeface.
       Putting it here fixes that everywhere at once: browsers pick
       glyphs per character from whichever font in the stack has them,
       so English text still renders in Arial (Jameel has no Latin
       glyphs) while any Urdu/Arabic text automatically pulls from
       Jameel Noori Nastaleeq instead, dir attribute or not. */
    font-family: Arial, "Helvetica Neue", Helvetica, "Jameel Urdu Only", 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
   =========================================================
   - 1600x400 banner image stays fully visible at the top
   - 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)
   ========================================================= */

/* A fixed "1600px 400px" background-size only looks right on
   viewports narrower than 1600px, where the oversized image gets
   centered and cropped at the edges (no repeat) — on any monitor
   wider than 1600px (common on modern 1920px+ displays) the image is
   NARROWER than the page, and the leftover left/right space fills
   with the plain #8C8D8B background-color: gray bars down both
   sides. The mobile breakpoints below have the mirror-image problem
   with "auto 284px"/"auto 225px": those only avoid gray because
   284/225px happens to compute an auto-width wider than a typical
   phone screen — an assumption, not a guarantee, at every possible
   viewport width in each breakpoint's range.
   The "1600x400" (0.25 ratio) figure at the top of this file was only
   ever a documented ASSUMPTION about the banner's real proportions,
   never actually measured against the real uploaded image (the same
   wrong assumption existed for the English banner — its real file
   turned out to be 2158x729, not 1600x400). At a 0.25 ratio the
   "Department of Urdu..." subtitle line was visibly clipped by the
   gold nav bar below it, so a taller 0.32 ratio (25:8) is used
   instead — still a guess without the actual file to measure, so
   re-check a screenshot and report back if it still crops or now
   shows too much empty space, so the ratio can be dialed in precisely.
   This is expressed as aspect-ratio (see the ::before spacer below),
   not a vw-based calc(): a vw-based height was tried on the English
   banner and caused a real horizontal-scrollbar bug, because 100vw
   includes the browser's scrollbar width while the rest of the page
   is sized with 100% (which excludes it) — that mismatch made the
   page a few pixels wider than the viewport. aspect-ratio sizes
   purely from the element's OWN resolved width, never the viewport,
   so it can't pick up the scrollbar's width, and never the box's
   total height, so it can't zoom the way "cover" did either. */
#headerNavigationContainer,
.pkp_structure_head {
    background-color: #8C8D8B !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    /* "100% auto": sizes purely from the box's own WIDTH and the
       image's real intrinsic ratio, matching the aspect-ratio spacer
       below — same reasoning as the English edition. Not "cover"
       (zooms against the banner+nav row's combined height) and not a
       vw-based calc() (the scrollbar-width bug described above). */
    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 via aspect-ratio — see
   the big comment above for why (not vw math, not "cover"). 25/8 is
   the 0.32 estimated ratio expressed as an exact fraction. */
.pkp_head_wrapper::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 25 / 8;
}

.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, "Jameel Urdu Only", 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 forces a horizontal
   scrollbar on the whole page (a visible shift/white gap) whenever
   this menu is 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. JAMEEL NOORI NASTALEEQ — URDU ONLY
   ========================================================= */
@font-face {
    font-family: "Jameel Urdu Only";
    src: url("https://researchjournals.ggcwg.edu.pk/ojs333/fonts/JameelNooriNastaleeq.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* IMPORTANT: selectors below match BOTH "[dir=rtl] X" (a normal
   English-tag element X nested inside some RTL container) AND
   "X[dir=rtl]" (an element that carries dir="rtl" directly on
   itself, with no RTL ancestor). OJS actually does the latter: its
   static-page editor wraps Urdu paragraphs individually, e.g.
   <p dir="rtl">...</p>, inside a page whose <body> is still
   dir="ltr". The old version of this file only had the ancestor
   form, so those directly-marked paragraphs got the Jameel font
   (from the plain [dir="rtl"] rule below, which does match them)
   but never the font-size increase — which is why the Urdu text
   rendered in the right typeface but still looked too small. */

[dir="rtl"],
[dir="rtl"] * {
    font-family: "Jameel Urdu Only", serif !important;
    line-height: 2.1 !important;
}

html[lang^="ur"] body,
body[dir="rtl"] {
    font-family: "Jameel Urdu Only", serif !important;
    line-height: 2.1 !important;
}

/* Nastaleeq reads noticeably smaller than Latin text at the same
   font-size (it's a dense, diagonal script), so it needs a real
   bump to feel equally readable — not the old +12%. Sized in `rem`
   (relative to the root font-size, not the parent) specifically so
   it never compounds if dir="rtl" happens to appear on both a
   wrapping container and the paragraphs inside it.

   This is a universal [dir="rtl"] / [dir="rtl"] * rule (not a tag
   allow-list) on purpose: an earlier version only listed specific
   tags (p, li, td, label, blockquote…), which missed plain <div>
   elements entirely — and OJS content pages are sometimes built as
   a stack of <div dir="rtl"> lines instead of <p> tags (e.g. a
   "Scope of the Journal" page), so that page's Urdu text kept
   getting the right font but never the size increase, making it
   look smaller than every other page. Since it's rem-based, using
   the universal selector is safe — it can't compound with nesting,
   unlike the old em-based version would have been. */
[dir="rtl"],
[dir="rtl"] * {
    font-size: 1.3rem !important;
}

:is(input, textarea, select, option, button)[dir="rtl"],
[dir="rtl"] :is(input, textarea, select, option, button) {
    font-size: 1.15rem !important;
}

:is(h1, h2, h3, h4, h5, h6)[dir="rtl"],
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) {
    font-size: 1.5rem !important;
    line-height: 1.8 !important;
}

.page_title[dir="rtl"],
[dir="rtl"] .page_title,
.title[dir="rtl"],
[dir="rtl"] .title {
    line-height: 1.8 !important;
}

/* =========================================================
   7. 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;
}

/* =========================================================
   8. LATIN UI, WITH URDU FALLBACK
   =========================================================
   Arial first (so English/Latin text looks right), with
   "Jameel Urdu Only" as a fallback so that if any Urdu text ends
   up inside one of these elements (a menu item, a form field, a
   search box), it still renders in the correct Nastaleeq font
   instead of silently falling through to the browser's generic
   system Arabic font. */
button,
input,
select,
textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, "Jameel Urdu Only", 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, "Jameel Urdu Only", sans-serif !important;
}

/* =========================================================
   8.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;
}

/* =========================================================
   9. 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;
}

[dir="rtl"] table { direction: rtl; }
[dir="rtl"] th,
[dir="rtl"] td {
    font-family: "Jameel Urdu Only", serif !important;
    line-height: 1.9 !important;
}

/* =========================================================
   10. 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; }

/* =========================================================
   11. 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;
    }
}

/* =========================================================
   12. 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;
    }
}


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

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