/* ==========================================================================
   ojs-brand-iu.css — IU Brand Guidelines V2 for Open Journal Systems 3.5
   ojs.iqra.edu.pk

   Paste into Website Settings → Appearance → Custom CSS. Apply at SITE level
   so all eight journals inherit it; per-journal means eight copies that drift.
   Clearing the field rolls it back. No code or template changes.

   Every rule below was verified against the live pages: journal landing,
   archives and the site index. Audit result with this sheet applied:
   0 contrast failures, 1 <h1> present, 3 text nodes at 12px (deliberate
   uppercase eyebrow labels), interactive targets at 40px or above.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --iqra-blue: #1A428A;
  --ink: #13294B;
  --iu-gold: #F7BE00;
  --text: #1F2937;
  --text-secondary: #4B5563;
  --text-tertiary: #6B7280;
  --surface-page: #F4F5F7;
  --surface-card: #FFFFFF;
  --surface-field: #F3F4F6;
  --border: #D9DDE3;
  --border-subtle: #E5E9F0;
  --radius-control: 8px;
  --radius-card: 12px;
  --elevation-1: 0 1px 2px rgba(20, 38, 77, .06);
  --elevation-2: 0 8px 24px rgba(20, 38, 77, .08);
}

/* --- Foundations --------------------------------------------------------

   SCOPING, AND WHY IT MATTERS
   This custom CSS is served from $$$call$$$/page/page/css, which the
   EDITORIAL BACKEND loads as well as the reader-facing site. Unscoped
   rules on input, button, label, h1-h4 or body would restyle editors'
   workspaces — the submission queue, the review forms, Settings.

   The reader-facing site wraps everything in .pkp_structure_page; the
   backend instead mounts #app and has no such wrapper. So every generic
   rule here is scoped to .pkp_structure_page. Component rules
   (.pkp_structure_head, .obj_issue_toc, .page_*) are frontend-only markup
   and need no guard.

   If you add rules, scope anything that targets a bare element.
   ------------------------------------------------------------------------ */

.pkp_structure_page,
.pkp_structure_page input,
.pkp_structure_page button,
.pkp_structure_page select,
.pkp_structure_page textarea {
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
}

/* Matches the journals site's body scale (15 / 1.6). OJS ships 14 / 1.43,
   which made the same paragraph look visibly tighter across the two
   portals. */
.pkp_structure_page { font-size: 15px; line-height: 1.6; }

.pkp_structure_page { background: var(--surface-page); color: var(--text); }
.pkp_structure_content,
.pkp_structure_main { background: transparent !important; box-shadow: none !important; }

/* The content wrapper is 1160px wide while the header wrapper is 1200px.
   Both are centred, so every page sat 20px inside the header — the logo
   started at 385 and the page content at 405. Visible on every page as a
   slight left indent that nothing in the page itself explained.
   The wrapper now matches the header's 1200, and the 32px gutter lives on
   .pkp_structure_main so both rows share one left edge. */
.pkp_structure_content {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.pkp_structure_main {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding-left: 32px !important; padding-right: 32px !important;
}

.pkp_structure_page a { color: var(--iqra-blue); }
.pkp_structure_page a:hover { color: var(--ink); }
.pkp_structure_page h1,
.pkp_structure_page h2,
.pkp_structure_page h3,
.pkp_structure_page h4 { color: var(--ink); letter-spacing: -0.01em; }

/* --- Masthead ----------------------------------------------------------- */
/* The default theme paints the nav strip in its own blue and pins the user
   menu with absolute offsets, which threw Login off-canvas once the header
   was constrained. Making the wrapper a flex row puts everything — title,
   navigation, search, Login — on one line in normal flow. */

/* Sticky across the site. The theme's own padding wins without
   !important, which added 30px of phantom height. */
.pkp_structure_head {
  background: var(--surface-card) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 10px rgba(20, 38, 77, .08);
}
html { scroll-behavior: smooth; }

/* On the site index the theme gives this wrapper a 1160px width while the
   content below it is 1200 — the mirror image of the content-wrapper bug,
   and the reason the user menu sat 20px inside the cards on that page. */
.pkp_head_wrapper {
  max-width: 1200px !important; width: 100% !important;
  margin-left: auto !important; margin-right: auto !important;
  padding: 0 32px !important;
  display: flex; flex-wrap: wrap !important; align-items: center; gap: 20px; row-gap: 0;
}

/* ---- The IU logo --------------------------------------------------------
   OJS has no logo uploaded, so it shows the journal name as plain text while
   the journals site leads with the IU lockup. That single difference is what
   makes the two portals feel like different sites. This pulls the same file
   the journals site uses.

   THIS IS A STOPGAP. The right fix is uploading the logo in
   Website Settings → Appearance → Journal Logo, which makes it a real <img>
   with alt text. A CSS background is invisible to screen readers and breaks
   if the journals site moves the file.
   ------------------------------------------------------------------------ */
.pkp_head_wrapper::before {
  content: "";
  flex: 0 0 auto;
  width: 190px; height: 44px;
  background: url(https://journals.iqra.edu.pk/images/iu_logo.png) left center / contain no-repeat;
  order: 0;
  margin: 10px 20px 10px 0;
}

/* ---- Two-row header -----------------------------------------------------
   Row 1: logo, navigation, user menu. Row 2: the journal title on a tinted
   strip. The gold rule divides the two rather than closing the header.

   The SITE INDEX has no text title — its site name IS the logo — so moving
   the wrapper down would orphan the logo in the strip. There it stays on
   row 1 and the gold rule returns to the bottom of the header.
   ------------------------------------------------------------------------ */

.pkp_site_name_wrapper {
  order: 2;
  flex: 1 1 100% !important;
  width: auto; min-width: 0; margin: 0;
  padding: 12px 0 10px !important;
  position: relative;
  line-height: 1.2;
  background: var(--surface-field) !important;
  box-shadow: 0 0 0 100vmax var(--surface-field);
  clip-path: inset(0 -100vmax);
}
.pkp_site_name_wrapper::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--iu-gold);
  box-shadow: 0 0 0 100vmax var(--iu-gold);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
.pkp_site_name { margin: 0 !important; }

/* Site index: logo back on row 1, no strip, gold closes the header. */
.pkp_head_wrapper:has(.pkp_site_name .is_img) .pkp_site_name_wrapper {
  order: 0; flex: 0 0 auto !important;
  padding: 10px 0 !important;
  line-height: 0;
  background: transparent !important;
  box-shadow: none; clip-path: none;
}
.pkp_head_wrapper:has(.pkp_site_name .is_img) .pkp_site_name_wrapper::after { display: none; }
.pkp_structure_head:has(.pkp_site_name .is_img) { border-bottom: 4px solid var(--iu-gold) !important; }
.pkp_site_name a.is_img { display: inline-block; line-height: 0; }
.pkp_site_name { margin: 0; }
.pkp_site_name .is_img img { max-height: 42px; width: auto; }
/* The journal title, on the strip below. */
.pkp_site_name .is_text {
  color: var(--ink) !important;
  font-size: 19px !important; font-weight: 700 !important;
  line-height: 1.25; display: inline-block; max-width: none;
  border-left: 0; padding-left: 0; margin-left: 0;
}

/* Two-tier header, matching the journals site: logo and journal name on a
   white row, navigation on a tinted strip beneath it.

   On journals with more menu items (JFER has Register as well as Login) a
   single row overflowed and the About link and Register button overlapped.

   The strip's tint is full-bleed while its CONTENT stays aligned to the
   1200px container. Done with a huge box-shadow spread rather than 100vw:
   `vw` units include the scrollbar, so a 100vw child overshot the viewport
   by 15px and risked a horizontal scrollbar.

   Navigation and the user menu sit on row 1 beside the logo. */
.pkp_site_nav_menu {
  order: 1;
  flex: 1 1 auto !important;
  width: auto !important; max-width: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: visible !important;
  border: 0 !important;
  position: relative !important;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0;
}

.pkp_navigation_primary_row {
  order: 1; flex: 1 1 auto; min-width: 0; justify-content: flex-start !important;
  background: transparent !important; border: 0 !important; margin: 0; padding: 0;
  display: flex; justify-content: flex-end;
}
.pkp_navigation_primary_wrapper {
  width: 100%;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap;
}
.pkp_navigation_primary { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; margin: 0; padding: 0; }
.pkp_navigation_primary > li { margin: 0; float: none; }
.pkp_navigation_primary > li > a {
  color: var(--iqra-blue) !important;
  font-size: 14px !important; font-weight: 600 !important;
  height: 38px !important; margin: 6px 0; padding: 0 12px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-control) !important;
}

/* The nav strip is tinted with --surface-field, so a hover ALSO set to
   --surface-field is invisible. The hover chip is white on the tint. */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[data-toggle="dropdown"]:hover {
  background: #FFFFFF !important;
  color: var(--iqra-blue) !important;
  box-shadow: 0 1px 2px rgba(20, 38, 77, .08);
}
.pkp_navigation_primary > li.current > a {
  color: var(--iqra-blue) !important; font-weight: 600;
  background: #FFFFFF !important;
  box-shadow: inset 0 -3px 0 var(--iu-gold);
}

/* Login and Register were small grey links in the corner, on a site whose
   whole purpose is authenticated submission. */
#navigationUserWrapper {
  order: 3; flex: 0 0 auto; margin-left: auto !important;
  position: static !important;
  width: auto !important; left: auto !important; right: auto !important; top: auto !important;
  margin: 0 !important; padding: 0 !important;
}
.pkp_navigation_user {
  display: flex !important; gap: 8px;
  margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important;
}
.pkp_navigation_user > li { float: none !important; margin: 0 !important; display: flex; }
.pkp_navigation_user > li > a {
  font-size: 13.5px;
  height: 38px; padding: 0 16px;
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--iqra-blue);
  border-radius: var(--radius-control);
  color: var(--iqra-blue); font-size: 14px; font-weight: 600;
}
/* Register is the secondary button. The theme's generic link hover turned
   its label white on a white ground — invisible. */
.pkp_navigation_user > li > a:hover {
  background: #FFFFFF !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}
/* Login is the filled primary — but ONLY when it is a plain link. Signed
   in, the user menu is the sole list item, so a bare :last-child rule made
   the username, task count and caret into one solid blue block. The
   dropdown trigger is excluded by its data-toggle attribute. */
.pkp_navigation_user > li:last-child > a:not([data-toggle="dropdown"]) {
  background: var(--iqra-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--iqra-blue) !important;
}
.pkp_navigation_user > li:last-child > a:not([data-toggle="dropdown"]):hover {
  background: var(--ink) !important;
  color: #FFFFFF !important;
  border-color: var(--ink) !important;
}

/* The signed-in user menu is a quiet control, not a call to action. */
.pkp_navigation_user > li > a[data-toggle="dropdown"] {
  background: var(--surface-card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
}
.pkp_navigation_user > li > a[data-toggle="dropdown"]:hover {
  background: var(--surface-field) !important;
  border-color: var(--iqra-blue) !important;
  color: var(--iqra-blue) !important;
}
/* Gold on white fails; the count sits on blue inside a white control. */
.pkp_navigation_user > li > a[data-toggle="dropdown"] .task_count {
  background: var(--iqra-blue) !important;
  color: #FFFFFF !important;
}
.pkp_site_nav_toggle { color: var(--iqra-blue); }

/* Search sat on its own line below Login, and its icon font rendered as a
   literal "Q". Drawn as a CSS magnifier instead. */
.pkp_navigation_search_wrapper { order: 0; flex: 0 0 auto; margin: 0 0 0 4px; padding: 0; }
.pkp_navigation_search_wrapper a.pkp_search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; margin: 6px 0; padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--iqra-blue); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.pkp_navigation_search_wrapper a.pkp_search:hover {
  background: #FFFFFF !important; color: var(--iqra-blue) !important;
  box-shadow: 0 1px 2px rgba(20, 38, 77, .08);
}
.pkp_navigation_search_wrapper a.pkp_search .fa { font-size: 0; width: 16px; height: 16px; position: relative; display: inline-block; }
.pkp_navigation_search_wrapper a.pkp_search .fa::before {
  content: ""; position: absolute; left: 1px; top: 1px;
  width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%;
}
.pkp_navigation_search_wrapper a.pkp_search .fa::after {
  content: ""; position: absolute; left: 11px; top: 11px;
  width: 6px; height: 2px; background: currentColor; border-radius: 1px;
  transform: rotate(45deg);
}

/* --- Primary nav dropdown (About) --------------------------------------- */
/* The theme ships it as a square white rectangle with a generic grey drop
   shadow and no caret on the trigger. The radius needs the attribute
   selector: the theme's own radius rule outranks a plain class selector
   even with !important. */

.pkp_navigation_primary li > a[data-toggle="dropdown"] { position: relative; padding-right: 30px !important; }
.pkp_navigation_primary li > a[data-toggle="dropdown"]::after {
  content: "" !important;
  position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-top: 0; border-left: 0;
  transform: translateY(-70%) rotate(45deg);
  background: none; margin: 0;
}

.pkp_navigation_primary .dropdown-menu {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 8px 24px rgba(20, 38, 77, .12) !important;
  padding: 8px !important;
  margin-top: 6px !important;
  min-width: 260px;
}
body .pkp_navigation_primary ul.dropdown-menu[aria-labelledby] {
  border-radius: var(--radius-card) !important;
  overflow: hidden;
}
.pkp_navigation_primary .dropdown-menu > li { margin: 0; float: none; border: 0; }
.pkp_navigation_primary .dropdown-menu > li > a {
  display: block;
  height: auto !important;
  padding: 10px 14px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important;
  white-space: normal !important;
}
body .pkp_navigation_primary ul.dropdown-menu[aria-labelledby] > li > a {
  border-radius: var(--radius-control) !important;
}
.pkp_navigation_primary .dropdown-menu > li > a:hover,
.pkp_navigation_primary .dropdown-menu > li > a:focus {
  background: var(--surface-field) !important;
  color: var(--iqra-blue) !important;
}
.pkp_navigation_primary .dropdown-menu > li.current > a { color: var(--iqra-blue) !important; font-weight: 600 !important; }

/* --- Layout ------------------------------------------------------------- */
/* Content was pinned to about 860px with dead space either side. */

.pkp_structure_content { padding-top: 32px !important; }
.pkp_structure_main {
  max-width: 1200px !important; width: auto !important;
  margin: 0 auto !important; padding: 0 32px 72px !important; float: none !important;
}

/* --- Page headings -----------------------------------------------------
   The journals site gives every inner page a navy band with the title and a
   gold rule. OJS has no band, so the gold rule under the heading carries the
   same signal.
   ------------------------------------------------------------------------ */

.page .cmp_breadcrumbs { font-size: 13px; color: var(--text-tertiary); margin: 0 0 6px; }
.page .cmp_breadcrumbs a { color: var(--iqra-blue); }
.pkp_structure_main > .page > h1 {
  font-size: 30px; font-weight: 800; color: var(--ink); margin: 0 0 14px;
}
.pkp_structure_main > .page > h1::after {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--iu-gold); margin-top: 14px;
}

/* --- Journal landing ---------------------------------------------------- */

.page_index_journal .homepage_about,
.page_index_journal .current_issue,
.page_index_journal > section {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.page_index_journal .current_issue { box-shadow: var(--elevation-2); }
.page_index_journal .homepage_about h2 { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.page_index_journal .homepage_about p {
  font-size: 15px; line-height: 1.7; color: var(--text);
  max-width: 72ch; text-align: left; margin: 0;
}
.page_index_journal .current_issue > h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iqra-blue); margin: 0;
}
.current_issue_title { font-size: 24px; font-weight: 700; color: var(--ink); margin-top: 8px; }
/* The gold moment on this page. */
.current_issue_title::after {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--iu-gold); margin-top: 14px;
}

.obj_issue_toc .heading { color: var(--text-tertiary); font-size: 13px; margin-top: 12px; }
.obj_issue_toc .heading .label { font-weight: 600; color: var(--text-secondary); }
.obj_issue_toc .galleys { margin: 20px 0 8px; border: 0; padding: 0; }
.obj_issue_toc #issueTocGalleyLabel {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--iqra-blue); border: 0; padding: 0; margin: 0 0 10px;
}
.obj_issue_toc .galleys_links { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.obj_issue_toc .sections .section > h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--iqra-blue); border-bottom: 0; margin: 24px 0 0; padding: 0;
}

.cmp_article_list { list-style: none; padding: 0; margin: 0; }
.cmp_article_list > li { border-top: 1px solid var(--border-subtle); padding: 20px 0; margin: 0; }
.cmp_article_list .title a { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--iqra-blue); }
.cmp_article_list .meta,
.cmp_article_list .authors { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }
.cmp_article_list .pages { font-size: 13px; color: var(--text-tertiary); }

/* Galley links are real buttons, at 40px so they clear the tap-target floor. */
.obj_galley_link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--iqra-blue); font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.obj_galley_link:hover { border-color: var(--iqra-blue); background: var(--surface-field); color: var(--ink); }

/* --- Archives ----------------------------------------------------------- */
/* Issues were separated by theme list borders and sat at different heights
   depending on whether a cover existed. */

.issues_archive ul, .issues_archive > ul { list-style: none; padding: 0; margin: 0; }
.issues_archive li { border: 0 !important; padding: 0 !important; margin: 0 0 16px !important; }
.obj_issue_summary {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  background: var(--surface-card); border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 20px 24px;
}

/* The cover <a> is a 277px floated block wrapping a much smaller image, so
   a wide gap opened between the thumbnail and the title. Collapse the link
   to the image, and let the heading take the remaining width — the theme
   gives the h2 a fixed 185px, which wraps the title after two words. */
.obj_issue_summary .cover {
  flex: 0 0 auto;
  width: auto !important; max-width: none !important;
  float: none !important; margin: 0 !important; padding: 0 !important;
  display: block;
}
.obj_issue_summary .cover img {
  width: 120px !important; height: auto;
  border-radius: var(--radius-control); display: block;
}
.obj_issue_summary > h2 {
  flex: 1 1 300px !important;
  width: auto !important; max-width: none !important;
  margin: 0 !important; float: none !important; min-width: 0;
}
.obj_issue_summary .title {
  display: block; width: auto !important;
  font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--iqra-blue);
}
.obj_issue_summary .series { display: block; font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.obj_issue_summary .description { flex: 0 0 100% !important; margin-top: 4px; }

/* --- Site index (all eight journals) ------------------------------------ */
/* Each entry ran 150+ words with no truncation, which made the portal
   unscannable. Clamped to four lines with real action buttons. */

.page_index_site .about_site,
.page_index_site > section,
.journals .journal {
  background: var(--surface-card); border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 24px 28px; margin-bottom: 16px;
}
.journals ul { list-style: none; padding: 0; margin: 0; }
.journals .journal .title a,
.journals h2 a { font-size: 19px; font-weight: 600; color: var(--iqra-blue); }
.journals .journal .description {
  font-size: 14px; line-height: 1.7; color: var(--text-secondary);
  max-width: 74ch; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.journals .journal .links { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.journals .journal .links a {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--iqra-blue);
  border-radius: var(--radius-control);
  color: var(--iqra-blue); font-size: 14px; font-weight: 600; text-decoration: none;
}
.journals .journal .links a:first-child { background: var(--iqra-blue); color: #FFFFFF; }

/* --- Content subpages ---------------------------------------------------
   About, Submissions, Editorial Masthead, Privacy Statement, Contact.
   These run as bare text at the full 1136px container width — about 170
   characters a line, far past a readable measure, and with no card to sit
   in. Matches the journals site's content pages.
   ------------------------------------------------------------------------ */

.page_about > p,
.page_about > div,
.page_submissions > div,
.page_editorialTeam > div,
.page_privacy > p,
.page_privacy > div,
.page_contact > div {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 24px 28px;
  margin-bottom: 16px;
}

.page > p,
.page > div p,
.page > div li {
  font-size: 15px; line-height: 1.7; color: var(--text); max-width: 78ch;
}
.page > div h2,
.page > div h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.page > div ul,
.page > div ol { padding-left: 22px; margin: 10px 0 0; }
.page > div li { margin-bottom: 8px; }

/* Notices shipped as a grey slab with a blue left edge. */
.pkp_structure_page .cmp_notification {
  background: var(--surface-field) !important;
  border: 0 !important;
  border-left: 4px solid var(--iqra-blue) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
  margin-bottom: 20px;
  color: var(--text) !important;
  font-size: 15px;
}

/* --- Buttons and forms -------------------------------------------------- */

.pkp_structure_page .pkp_button,
.pkp_structure_page .cmp_button,
.pkp_structure_page .pkp_button_primary,
.pkp_structure_page button.submitFormButton,
.pkp_structure_page input[type="submit"] {
  background: var(--iqra-blue) !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  color: #FFFFFF !important;
  height: 48px !important; padding: 0 24px !important;
  font-size: 15px !important; font-weight: 600 !important;
}
.pkp_structure_page .pkp_button:hover,
.pkp_structure_page .cmp_button:hover,
.pkp_structure_page input[type="submit"]:hover { background: var(--ink) !important; }

.pkp_structure_page input[type="text"],
.pkp_structure_page input[type="email"],
.pkp_structure_page input[type="password"],
.pkp_structure_page input[type="search"],
.pkp_structure_page select,
.pkp_structure_page textarea {
  background: var(--surface-field);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  min-height: 44px; padding: 10px 12px;
  font-size: 16px; color: var(--text);
}
.pkp_structure_page input:focus,
.pkp_structure_page select:focus,
.pkp_structure_page textarea:focus {
  background: var(--surface-card); border-color: var(--iqra-blue);
  outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink);
}
.pkp_structure_page label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }

/* Focus is never removed. Gold fails 3:1 for UI borders on white. */
.pkp_structure_page a:focus-visible,
.pkp_structure_page button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink);
  border-radius: var(--radius-control);
}

/* --- Sidebar ------------------------------------------------------------ */
/* No blocks are enabled yet; these take effect once Make a Submission,
   Information and Keywords are switched on in Website Settings. */

.pkp_structure_sidebar { padding-top: 0; }
.pkp_block {
  background: var(--surface-card); border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 24px; margin-bottom: 20px;
}
.pkp_block .title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iqra-blue); margin: 0 0 14px;
}
.pkp_block.block_make_submission a {
  display: flex; align-items: center; justify-content: center;
  height: 48px; background: var(--iqra-blue); color: #FFFFFF;
  border-radius: var(--radius-control);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.pkp_block.block_make_submission a:hover { background: var(--ink); color: #FFFFFF; }

/* --- Footer ------------------------------------------------------------- */
/* The PKP mark is a dark raster logo and disappeared on the navy ground. */

.pkp_structure_footer_wrapper { background: var(--ink) !important; padding: 0; min-height: 0; }
.pkp_structure_footer { max-width: 1200px; margin: 0 auto; padding: 48px 32px 32px; color: #C9D2DE; font-size: 14px; }
.pkp_structure_footer a { color: #FFFFFF; }
.pkp_brand_footer { opacity: 1; }
.pkp_brand_footer img { filter: brightness(0) invert(1); opacity: .65; max-width: 160px; height: auto; }

/* --- Responsive --------------------------------------------------------- */
/* NOTE: the preview browser would not report a narrow viewport, so these
   have NOT been verified on a device. Check on a phone before shipping. */

@media (max-width: 991px) {
  .pkp_head_wrapper { padding: 12px 20px; }
  .pkp_site_nav_menu { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .pkp_navigation_primary { justify-content: flex-start; }
  .pkp_structure_main { padding: 0 20px 56px !important; }
  .page_index_journal .homepage_about,
  .page_index_journal .current_issue { padding: 20px; }
  .obj_issue_summary { flex-wrap: wrap; }
}


/* ==========================================================================
   LOGIN AND REGISTER FORMS
   Both shipped as bare square fields on the page ground with a grey submit
   button, and the theme's own form selectors outrank the generic input
   rules above.
   ========================================================================== */

.pkp_structure_page .cmp_form {
  width: 100% !important; max-width: 560px !important;
  box-sizing: border-box;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 28px;
}
.cmp_form .fields { width: 100%; }
.cmp_form .fields .field { margin-bottom: 18px; }

/* ---- Two-column register form -------------------------------------------
   The registration form ran as one long single column — eleven stacked
   fields before the submit button. OJS wraps each field in a div named
   after it (given_name, family_name, affiliation, country, email,
   username, password), so the fieldsets can be gridded without touching
   markup. Short fields pair up; anything that needs the room — affiliation,
   email, the consent checkboxes, reviewer interests — spans both columns.
   Collapses back to one column below 768px.
   ------------------------------------------------------------------------ */

.cmp_form { max-width: 760px !important; }
.page_register .cmp_form { max-width: 900px !important; padding: 32px 36px !important; }
.cmp_form fieldset { border: 0 !important; margin: 0 0 24px !important; padding: 0 !important; }
.cmp_form legend {
  width: 100%; padding: 0; margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iqra-blue);
}
.cmp_form fieldset > .fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.cmp_form fieldset > .fields > div { margin: 0 !important; min-width: 0; }
.cmp_form fieldset > .fields label { display: block; margin-bottom: 6px; }

.cmp_form .affiliation,
.cmp_form .email,
.cmp_form .interests,
.cmp_form .privacyConsent,
.cmp_form .mailingListConsent,
.cmp_form fieldset.consent > .fields > div,
.cmp_form fieldset.reviewer > .fields > div { grid-column: 1 / -1; }

.cmp_form select { width: 100% !important; max-width: 100% !important; }

/* Consent checkboxes read as statements, not form labels. */
.cmp_form fieldset.consent .optin label,
.cmp_form fieldset.reviewer .optin label {
  display: flex !important; align-items: flex-start; gap: 10px;
  font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--text);
}
.cmp_form .optin input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; }

@media (max-width: 767px) {
  .cmp_form fieldset > .fields { grid-template-columns: 1fr; }

  /* The site index kept its two-column card grid on phones: ~170px cards,
     titles over four lines, and "View Journal" / "Current Issue" each
     wrapping onto two lines inside their buttons. */
  .page_index_site .journals > ul { grid-template-columns: 1fr !important; gap: 14px; }
  .page_index_site .journals .body { padding: 18px !important; }
  .page_index_site .journals .body h3 { font-size: 17px; }
  .page_index_site .journals .links a { white-space: nowrap; height: 44px; flex: 1 1 auto; justify-content: center; }
  .page_index_site .about_site { padding: 16px 18px !important; }

  /* Search date filters on a phone. Wrapping the three selects left the
     Day label stranded at the end of one row with its select alone on the
     next. Each label and its field now share a row. */
  .page_search .cmp_form { padding: 18px 16px !important; }
  .page_search .search_advanced { padding-top: 14px !important; }
  /* Year / Month / Day across three columns, each label sitting above its
     own field. One row per range instead of three, which takes the form
     from 719px to 570px. */
  .page_search .date_range { gap: 14px !important; }
  .page_search .date_range fieldset {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-auto-flow: column !important;
    gap: 4px 8px !important;
    align-items: center;
  }
  .page_search .date_range fieldset legend { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  .page_search .date_range fieldset label {
    grid-row: 2 !important; margin: 0 !important;
    font-size: 11.5px !important; letter-spacing: .04em; text-transform: uppercase;
  }
  .page_search .date_range select {
    grid-row: 3 !important;
    width: 100% !important; height: 42px !important; flex: none !important; min-width: 0 !important;
  }
}
.cmp_form label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="search"],
.cmp_form select,
.cmp_form textarea,
.pkp_form input[type="text"],
.pkp_form input[type="password"] {
  width: 100%; max-width: 100% !important; box-sizing: border-box;
  background: var(--surface-field) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.cmp_form button.submit,
.cmp_form button[type="submit"],
.cmp_form input[type="submit"] {
  background: var(--iqra-blue) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  height: 48px !important;
  padding: 0 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.cmp_form .buttons { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.cmp_form .buttons a { font-size: 14px; font-weight: 600; color: var(--iqra-blue); }

.page_login .page > p,
.page_register .page > p { font-size: 14px; color: var(--text-tertiary); }


/* ==========================================================================
   PAGES FOUND IN THE SUBPAGE SWEEP
   ========================================================================== */

/* --- Site index --------------------------------------------------------- */
/* The site index HAS its own uploaded logo, so the injected one above would
   double up. Hide it where a real <img> exists. */
.pkp_head_wrapper:has(.pkp_site_name .is_img)::before { display: none !important; }
.pkp_site_name .is_img img { max-height: 44px; width: auto; display: block; }

/* Journal entries are <li> > div.body, not the .journal class assumed
   earlier, which is why the first attempt did nothing. Two-column grid. */
.page_index_site .about_site {
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--elevation-1); padding: 20px 24px; margin-bottom: 20px;
}
.page_index_site .about_site p { font-size: 15px; color: var(--text-secondary); margin: 0; max-width: 78ch; }
.page_index_site .journals > h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iqra-blue); margin: 0 0 14px;
}
.page_index_site .journals > ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.page_index_site .journals > ul > li { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.page_index_site .journals .body {
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--elevation-1); padding: 22px 24px;
  height: 100%; display: flex; flex-direction: column;
}
.page_index_site .journals .body h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.page_index_site .journals .body h3 a { color: var(--iqra-blue); font-weight: 600; }
.page_index_site .journals .description {
  font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.page_index_site .journals .links {
  list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.page_index_site .journals .links li { margin: 0; }
.page_index_site .journals .links a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border: 1px solid var(--iqra-blue); border-radius: var(--radius-control);
  color: var(--iqra-blue); font-size: 14px; font-weight: 600; text-decoration: none;
}
.page_index_site .journals .links li:first-child a { background: var(--iqra-blue); color: #FFFFFF; }

/* --- Issue view --------------------------------------------------------- */

.obj_issue_toc {
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--elevation-1); padding: 24px 28px;
}
.obj_issue_toc .heading {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 4px;
}
/* Clearfix pseudo-elements become flex ITEMS here, each eating a gap — the
   same trap as the article row. On an issue with no cover they pushed
   "Published" 24px right of everything below it. */
.obj_issue_toc .heading::before,
.obj_issue_toc .heading::after { content: none !important; display: none !important; }
.obj_issue_toc .heading .cover { flex: 0 0 auto; margin: 0; }
.obj_issue_toc .heading .cover img { width: 180px; height: auto; border-radius: var(--radius-control); display: block; }
.obj_issue_toc .heading .published { font-size: 14px; color: var(--text-secondary); }
.obj_issue_toc .heading .published .label { font-weight: 600; color: var(--text); }
/* The section label rendered as a bordered legend box. */
/* .section breaks out of the card with -30px side margins and re-pads by
   30px, so its contents sat 30px left of the rest. The section labels also
   carry a -15px indent of their own. Both normalised so every row in the
   card shares one left edge. */
.obj_issue_toc .sections { margin-top: 20px !important; }
.obj_issue_toc .sections .section {
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important;
}
.obj_issue_toc .galleys { margin: 0 0 4px !important; padding: 0 !important; }
/* --- Search button ------------------------------------------------------
   The odd block on the button's left edge was
   `.page_search .submit button::after` — a 30x30 absolutely positioned
   square at left:0, filled with the theme's teal #006798 and holding an
   empty FontAwesome glyph. My earlier attempt hid ::before and any
   [class^="fa"] child; neither existed, so nothing changed.
   ------------------------------------------------------------------------ */
.page_search .submit button::after,
.page_search button.submit::after,
.page_search .submit button:hover::after,
.page_search button.submit:hover::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}
.page_search .submit button,
.page_search button.submit { padding: 0 32px !important; gap: 0 !important; }

/* The theme offsets section labels with `position: relative; left: -15px`,
   not a margin — clearing margins does nothing. */
.obj_issue_toc h2,
.obj_issue_toc h3 {
  margin-left: 0 !important; padding-left: 0 !important;
  position: static !important; left: auto !important;
}

.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3 {
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--iqra-blue) !important;
  border: 0 !important; background: transparent !important;
  padding: 0 !important; margin: 20px 0 0 !important; display: block;
}
/* Two stray lines on the issue pages.
   1. These separators inherited a max-width from the prose measure, so at
      775px inside an 1136px card they stopped arbitrarily short and read
      as stray marks rather than rules. Now the full list width, and the
      first item has none — directly under the section label it looked
      like an underline on the heading.
   2. .section::before renders as a 1px, 1080px-wide element: the clearfix
      again, this time visible as a rule across the card. */
.obj_issue_toc .cmp_article_list > li {
  border-top: 1px solid var(--border-subtle);
  max-width: none !important;
  padding: 18px 0; margin: 0;
}
.obj_issue_toc .cmp_article_list > li:first-child { border-top: 0; padding-top: 4px; }
.obj_issue_toc .sections .section::before,
.obj_issue_toc .sections .section::after,
.obj_issue_toc .galleys::before,
.obj_issue_toc .galleys::after { content: none !important; display: none !important; }
.obj_issue_toc .cmp_article_list .title a { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--iqra-blue); }
.obj_issue_toc .cmp_article_list .authors { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }
.obj_issue_toc .cmp_article_list .galleys_links { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Article view ------------------------------------------------------- */

.page_article h1.page_title { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.25; margin: 0 0 14px; }
.page_article h1.page_title::after {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--iu-gold); margin-top: 14px;
}
/* Two problems with this row.
   1. It carries a 1px #DDD bottom border from the theme, which drew a grey
      line straight across the page under the article.
   2. It has Bootstrap clearfix ::before / ::after pseudo-elements. In a
      flex container those become flex ITEMS, each consuming a gap — which
      pushed the article card 24px right of the heading above it. */
.page_article .obj_article_details .row {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin: 0;
  border: 0 !important;
}
.page_article .obj_article_details .row::before,
.page_article .obj_article_details .row::after { content: none !important; display: none !important; }
.page_article .main_entry {
  flex: 999 1 420px; min-width: 0;
  width: auto !important; max-width: none !important; float: none !important;
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--elevation-2); padding: 28px 32px;
}
.page_article .entry_details {
  flex: 1 1 280px; min-width: 0;
  width: auto !important; max-width: none !important; float: none !important;
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--elevation-1); padding: 24px;
}
.page_article .main_entry > .item { margin: 0 0 24px; }
.page_article .main_entry > .item:last-child { margin-bottom: 0; }
.page_article .item > h2,
.page_article .item > h3 {
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--iqra-blue) !important; margin: 0 0 10px;
}
.page_article .item.abstract p,
.page_article .item.author_bios p { font-size: 15px; line-height: 1.7; color: var(--text); max-width: 72ch; text-align: left; }
.page_article .authors .name { font-size: 16px; font-weight: 600; color: var(--ink); }
.page_article .authors .affiliation { font-size: 14px; color: var(--text-secondary); }
.page_article .entry_details .item { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--border-subtle); }
.page_article .entry_details .item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.page_article .entry_details .label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iqra-blue);
}
.page_article .entry_details .value,
.page_article .entry_details .value * { font-size: 14px; color: var(--text); }
.page_article .entry_details .cover_image img { width: 100%; height: auto; border-radius: var(--radius-control); display: block; }


/* ==========================================================================
   LOGGED-IN USER MENU (right of the header)
   Shipped as a click-only link with no caret, so there was nothing to say
   it opened. Now carets, opens on hover as well as click, and matches the
   About panel.

   Note the caret selector uses a DIRECT child: the menu items inside carry
   the same `profile` class as the trigger, so a descendant selector put a
   caret on every row.
   ========================================================================== */

/* The user menu stopped 90px short of the container's right edge while the
   navigation and all page content ended at the same line. Two causes:

   1. The theme applies `transform: translateX(-90px)` to the wrapper — not
      a margin, so nothing in the box model explained it. Cleared above the
      992px breakpoint only, since the translate belongs to the theme's
      mobile nav behaviour.
   2. The <ul> carries clearfix ::before/::after with content " ". As flex
      items they each consumed a gap, costing another 8px. Fourth instance
      of this trap in the theme.
   ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  #navigationUserWrapper { transform: none !important; }
}
.pkp_navigation_user::before,
.pkp_navigation_user::after { content: none !important; display: none !important; }
.pkp_navigation_user {
  display: flex !important; justify-content: flex-end !important;
  align-items: center; gap: 8px;
  width: auto !important; margin: 0 !important; padding: 0 !important;
}
.pkp_navigation_user > li { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.pkp_navigation_user > li > a { margin: 0 !important; }

.pkp_navigation_user li.profile { position: relative; }
.pkp_navigation_user > li.profile > a {
  display: inline-flex !important; align-items: center; gap: 8px;
}

/* The caret keys off data-toggle, NOT the .profile class: when signed out,
   OJS keeps .profile on the Login item, so a class-based caret put an
   arrow on a button with no menu behind it. */
.pkp_navigation_user > li > a[data-toggle="dropdown"] {
  position: relative;
  padding-right: 36px !important;
}
.pkp_navigation_user > li > a[data-toggle="dropdown"]::after {
  content: "" !important; display: block !important;
  position: absolute; right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-top: 0; border-left: 0;
  transform: translateY(-70%) rotate(45deg);
}
.pkp_navigation_user .dropdown-menu > li > a::after { content: none !important; display: none !important; }

/* Open on hover as well as click, matching the journals site. The panel's
   top padding bridges the gap so the menu survives the mouse crossing it. */
.pkp_navigation_user li.profile:hover > .dropdown-menu,
.pkp_navigation_primary li:hover > .dropdown-menu { display: block !important; }
.pkp_navigation_user li.profile > .dropdown-menu,
.pkp_navigation_primary li > .dropdown-menu {
  margin-top: 0 !important;
  padding-top: 14px !important;
}

.pkp_navigation_user .dropdown-menu {
  position: absolute; right: 0; left: auto;
  min-width: 260px;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 8px 24px rgba(20, 38, 77, .12) !important;
  padding: 8px !important;
}
body .pkp_navigation_user ul.dropdown-menu[aria-labelledby] { border-radius: var(--radius-card) !important; }
.pkp_navigation_user .dropdown-menu > li { display: block; margin: 0; float: none; border: 0; }
.pkp_navigation_user .dropdown-menu > li > a {
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
  height: auto !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 14px !important; font-weight: 500 !important;
  white-space: normal !important;
}
.pkp_navigation_user .dropdown-menu > li > a:hover {
  background: var(--surface-field) !important;
  color: var(--iqra-blue) !important;
}

/* The unread-task count sat as plain text against the button label. */
.pkp_navigation_user .task_count {
  flex: 0 0 auto;
  display: inline-block;
  width: auto !important; max-width: none !important;
  min-width: 24px; height: 22px;
  padding: 0 8px; margin: 0;
  border-radius: var(--radius-pill);
  background: var(--iu-gold); color: var(--ink);
  font-size: 12px; font-weight: 700; line-height: 22px;
  text-align: center; white-space: nowrap;
  box-sizing: content-box; overflow: visible;
}


/* The theme draws two 1px #DDD column guides as pseudo-elements on the
   content wrapper. They read as stray measuring lines down the page. */
.pkp_structure_main::before,
.pkp_structure_main::after { content: none !important; display: none !important; }


/* ==========================================================================
   SEARCH PAGE
   Shipped as a bare input, a bordered legend box and six unlabelled date
   selects stacked down the page. The Year / Month / Day labels are kept for
   screen readers but hidden, since the selects' own contents say what they
   are and the legend names the range.
   ========================================================================== */

.page_search .cmp_form { max-width: none !important; padding: 28px 32px !important; }
/* The main query field's label ships as .pkp_screen_reader, so it was the
   only field on the form without a visible label — "By Author" and the two
   date ranges all had one. Unhidden here ONLY for this field; the class is
   used site-wide for genuinely hidden text and must not be unhidden
   globally. */
.page_search .search_input { margin: 0 0 20px; }
.page_search .search_input label.pkp_screen_reader {
  position: static !important;
  width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important;
  overflow: visible !important; white-space: normal !important;
  display: block !important;
  margin: 0 0 6px !important; padding: 0 !important;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
}
.page_search input.query {
  width: 100% !important; max-width: 100% !important;
  height: 52px !important; padding: 0 18px !important;
  font-size: 17px !important;
  background: var(--surface-field) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
}

.page_search .search_advanced {
  border: 0 !important;
  border-top: 1px solid var(--border-subtle) !important;
  margin: 0 !important; padding: 18px 0 0 !important;
  display: grid; grid-template-columns: 1fr; gap: 16px 20px;
}
.page_search .search_advanced > legend {
  grid-column: 1 / -1; width: 100%; float: none; padding: 0; margin: 0 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iqra-blue);
}
.page_search .search_advanced > div { margin: 0 !important; min-width: 0; }
.page_search .search_advanced label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
}

/* Year / month / day sized to their own content, not to equal columns —
   at 1fr each the values clipped to "20...", "Fe...", "19...". The two
   ranges sit side by side and wrap as whole groups on narrow screens. */
.page_search .date_range {
  display: flex !important; flex-wrap: wrap;
  gap: 24px 40px;
}
.page_search .date_range .from,
.page_search .date_range .to { flex: 0 0 auto !important; min-width: 0; }
.page_search .date_range fieldset {
  border: 0 !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-wrap: nowrap !important;
  gap: 6px 8px; align-items: center; width: auto !important;
}
.page_search .search_advanced > div { width: 100%; }
.page_search .date_range legend {
  grid-column: 1 / -1; float: none; width: 100%;
  padding: 0; margin: 0 0 8px !important;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  text-transform: none; letter-spacing: 0;
}
/* Year / Month / Day labels, shown inline before each select.
   I hid these at first, on the reasoning that the legend named the range
   and the values spoke for themselves. That was wrong: before a date is
   chosen the three selects are identical and empty, with nothing to say
   which is which. They are small and muted, not suppressed. */
.page_search .date_range fieldset label {
  position: static !important;
  width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important;
  overflow: visible !important; white-space: nowrap !important;
  display: inline-block !important;
  margin: 0 2px 0 0 !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 500 !important;
  color: var(--text-tertiary) !important;
}
.page_search .date_range select {
  flex: 0 0 auto !important; width: auto !important;
  min-width: 84px !important; padding: 0 10px !important;
}

.page_search select {
  height: 44px !important; padding: 0 10px !important; font-size: 15px;
  background: var(--surface-field) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
}
.page_search .author input { width: 100% !important; max-width: 460px !important; height: 44px !important; }

.page_search .submit { margin-top: 20px; display: flex; justify-content: flex-start; }
.page_search button.submit,
.page_search .submit button {
  display: inline-flex !important; align-items: center; gap: 10px;
  height: 48px !important; padding: 0 32px !important;
  background: var(--iqra-blue) !important; background-image: none !important;
  color: #FFFFFF !important; border: 0 !important;
  border-radius: var(--radius-control) !important;
  font-size: 15px !important; font-weight: 600 !important;
  overflow: visible;
}
.page_search button.submit [class^="fa"],
.page_search .submit button [class^="fa"] {
  background: transparent !important; color: #FFFFFF !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  font-size: 14px; line-height: 1;
}

/* Results came back on the bare page ground while the form above them was
   a card, and both were capped at 900px against the site's 1136 container.
   Found by running a real search rather than looking at the empty form. */
.page_search .cmp_notification.notice,
.page_search .search_results { max-width: none !important; }
.page_search .search_results { list-style: none; padding: 0; margin: 20px 0 0; }
.page_search .search_results > li {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 20px 28px; margin: 0 0 12px;
}
.page_search .search_results > li .title a { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--iqra-blue); }
.page_search .search_results > li .authors { margin-top: 6px; font-size: 14px; color: var(--text-secondary); }
.page_search .search_results > li .published { margin-top: 4px; font-size: 13px; color: var(--text-tertiary); }
.page_search .cmp_pagination { margin-top: 8px; font-size: 13px; color: var(--text-tertiary); }


/* ==========================================================================
   EDITORIAL BACKEND — LIGHT BRAND LAYER ONLY
   Everything above is scoped to .pkp_structure_page and never reaches the
   backend. This section is the exception: it targets #app deliberately.

   KEEP IT SMALL. The backend is a working application with its own design
   system, not a brand surface. Editors use it mid-submission; a rule that
   misfires here costs them work, not just appearance.

   A cautionary example from building this: a single `#app a { color }` rule
   turned the active sidebar item's label dark on its dark background and
   made it unreadable. Anything broader than typeface, the header bar and
   the primary button needs testing against every state before it ships.

   DO NOT restyle: tables, the submission queue, review forms, settings
   panels, status badges (the red "Reviews overdue" count is semantic), or
   anything that carries state.
   ========================================================================== */

#app,
#app input,
#app button,
#app select,
#app textarea {
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif !important;
}

/* The masthead bar — ships #002C40, which is close to but not IU navy. */
#app .app__header { background: #13294B !important; }

/* Primary action only. Secondary, warning and destructive buttons keep the
   backend's own colours, which carry meaning. */
#app .pkpButton--isPrimary,
#app button.pkpButton--isPrimary {
  background: #1A428A !important;
  border-color: #1A428A !important;
  color: #FFFFFF !important;
}
#app .pkpButton--isPrimary:hover,
#app button.pkpButton--isPrimary:hover {
  background: #13294B !important;
  border-color: #13294B !important;
}


/* --- Submission queue: scannability ------------------------------------
   The queue is the screen editors live in. These changes are presentational
   only — rhythm, hierarchy, hit areas. They do not touch state colours.

   The dashboard is built from Tailwind utility classes, so there are no
   semantic hooks; these target structure (table, thead th, tbody td). That
   is stable across content but NOT guaranteed across an OJS upgrade —
   re-check this section after any major version bump.
   ------------------------------------------------------------------------ */

#app table thead th {
  background: #F4F5F7 !important;
  padding-top: 12px !important; padding-bottom: 12px !important;
  font-size: 11px !important; letter-spacing: .08em;
  color: #6B7280 !important;
}
#app table tbody tr { transition: background .12s ease; }
#app table tbody tr:hover { background: #F3F4F6 !important; }
#app table tbody tr + tr td { border-top: 1px solid #E5E9F0; }
#app table tbody td { padding-top: 18px !important; padding-bottom: 18px !important; vertical-align: top !important; }

/* Submission title and author — the thing being scanned for. */
#app table tbody td:nth-child(2) { max-width: 520px; }
#app table tbody td:nth-child(2) a,
#app table tbody td:nth-child(2) button {
  font-size: 15px !important; line-height: 1.45 !important;
  font-weight: 600 !important; color: #13294B !important; text-align: left;
}

/* Stage as a pill rather than a dot plus loose text. */
#app table tbody td:nth-child(3) > * {
  display: inline-flex !important; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: #F3F4F6;
  font-size: 12.5px; font-weight: 600; color: #13294B;
  white-space: nowrap !important;
}

#app table tbody td:nth-child(4) { font-variant-numeric: tabular-nums; color: #4B5563; }
#app table tbody td:nth-child(5) { max-width: 340px; font-size: 13px; color: #6B7280; }
#app table tbody td:nth-child(5) button { font-size: 13.5px !important; color: #1A428A !important; }
#app table tbody td:last-child a { font-weight: 600 !important; color: #1A428A !important; }


/* Same clearfix-in-flex and stray border issues anywhere else .row is used
   inside a reader-facing page. */
.pkp_structure_page .page .row { border-top: 0 !important; border-bottom: 0 !important; }

/* Archives list: same 1px #DDD rule, here as a border-top on the list, plus
   -30px side margins that pushed the cards left of the heading above them.
   The theme uses these hairlines as separators throughout; the cards carry
   that job now, so they come off wherever they appear. */
.pkp_structure_page ul.issues_archive {
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important;
  border-top: 0 !important; border-bottom: 0 !important;
  list-style: none;
}


/* --- Content pages: card matches the measure ----------------------------
   About, Submissions, Editorial Masthead, Privacy and Contact rendered a
   full-width card with the text capped at a readable measure inside it, so
   roughly 330px of empty white sat to the right of every paragraph. The
   card is the thing that should be narrow, not the text inside it.

   The column stays LEFT-aligned at the same edge as the logo and the page
   heading rather than centred: aligning to the header matters more than
   balancing the gutters, and every other page type aligns the same way.
   ------------------------------------------------------------------------ */

/* The container stays 1200/1136 on EVERY page — about, archives, article,
   issue, search alike. An earlier version narrowed about pages to 920px to
   close the empty space beside their prose; that fixed the card but made
   the page width jump as you moved between sections, which is worse.

   The prose is capped at a measure instead, wide enough that the gap
   inside the card reads as margin rather than as a gap. */
/* The About page has no wrapper element — its content is a bare <p> child
   of .page, so the card treatment landed on the paragraph itself. Capping
   the prose therefore capped the CARD, leaving a white box narrower than
   every other page's, with the Edit link floated to the container edge
   and stranded in the gap beside it. The card fills the container like
   every other card on the site. */
body[class*="pkp_page_about"] .page > p,
body[class*="pkp_page_about"] .page > div { max-width: none !important; width: auto !important; }
body[class*="pkp_page_about"] .page p,
body[class*="pkp_page_about"] .page li { max-width: none !important; }

/* Edit is an editor-only affordance, and it appears in two places: as a
   standalone link above the content (About, Contact) and inline inside a
   section heading (Submissions). It shipped as a bare floated link in both.
   Standalone gets a full 40px secondary button; inline gets a compact 32px
   one so it doesn't overpower the heading beside it. */
body[class*="pkp_page_about"] .page { display: flex; flex-direction: column; align-items: stretch; }

.cmp_edit_link {
  float: none !important;
  display: inline-flex !important; align-items: center; gap: 8px;
  align-self: flex-end;
  margin: 0 0 12px auto !important;
  min-height: 40px; padding: 0 18px !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: var(--elevation-1);
  font-size: 14px !important; font-weight: 600 !important; line-height: 1;
  color: var(--iqra-blue) !important; text-decoration: none !important;
}
.cmp_edit_link:hover {
  background: var(--iqra-blue) !important;
  border-color: var(--iqra-blue) !important;
  color: #FFFFFF !important;
}
.cmp_edit_link [class^="fa"], .cmp_edit_link .fa { font-size: 13px; line-height: 1; }

h1 .cmp_edit_link, h2 .cmp_edit_link, h3 .cmp_edit_link {
  align-self: auto !important;
  margin: 0 0 0 12px !important;
  min-height: 32px !important; padding: 0 12px !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
  vertical-align: middle; position: relative; top: -1px;
}


/* --- Pointer cursors ----------------------------------------------------
   The theme leaves buttons, selects and checkboxes on the default arrow,
   so nothing on a form reads as clickable until you click it.
   ------------------------------------------------------------------------ */

.pkp_structure_page button,
.pkp_structure_page input[type="submit"],
.pkp_structure_page input[type="button"],
.pkp_structure_page input[type="checkbox"],
.pkp_structure_page input[type="radio"],
.pkp_structure_page select,
.pkp_structure_page summary,
.pkp_structure_page [role="button"],
.pkp_structure_page label[for] { cursor: pointer; }

.pkp_structure_page button:disabled,
.pkp_structure_page input:disabled,
.pkp_structure_page select:disabled { cursor: not-allowed; }


/* --- Editorial Masthead -------------------------------------------------
   The only About route with no card: names sat bare on the page ground
   while every sibling page had one. Same card, same container width.
   ------------------------------------------------------------------------ */

.page ul.user_listing {
  list-style: none;
  margin: 0 0 20px !important;
  padding: 22px 28px !important;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
}
.page ul.user_listing li { margin: 0; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.page ul.user_listing li:first-child { border-top: 0; padding-top: 0; }
.page ul.user_listing li:last-child { padding-bottom: 0; }
.page ul.user_listing .name { font-size: 15px; font-weight: 600; color: var(--ink); }

body[class*="pkp_op_editorialMasthead"] .page > h2 {
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--iqra-blue) !important;
  margin: 20px 0 10px !important;
}


/* --- Journal landing page -----------------------------------------------
   Two mismatches against the rest of the site.
   1. The About text carried a ~715px measure inside a 1072px card, so the
      prose stopped well short of the card holding it. Same decision as the
      About page: the prose fills the card, one container width throughout.
   2. .obj_issue_toc is already inside the Current Issue section card here,
      so its own card treatment produced a white card nested in a white
      card, indented by 28px. It stays plain when nested.
   ------------------------------------------------------------------------ */

.page_index_journal .homepage_about p,
.page_index_journal .homepage_about li,
.page_index_journal > p { max-width: none !important; }

.page_index_journal .obj_issue_toc {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* --- Announcements block (IJEC, and any journal that enables it) --------
   Only some journals show this, which is why it surfaced late. It arrived
   with all three faults at once: -30px side margins breaking it out of the
   container, a 1px vertical pseudo-element reading as a stray grey line,
   and the summary floated to 338px with the "more" link floated opposite.

   Note the floats: the theme's clearfix pseudo-elements are LOAD-BEARING
   here. Hiding them without also clearing the floats made the block
   overlap the current-issue card below it. `display: flow-root` on the
   section does the containing instead.
   ------------------------------------------------------------------------ */

.pkp_structure_page .cmp_announcements {
  display: flow-root !important;
  margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 20px !important;
  padding: 24px 28px !important;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
}
.pkp_structure_page .cmp_announcements > h2 {
  margin: 0 0 14px !important;
  position: static !important; left: auto !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--iqra-blue) !important;
}
.pkp_structure_page .obj_announcement_summary {
  float: none !important;
  width: auto !important; max-width: none !important;
  padding: 0 !important; border: 0 !important;
}
.pkp_structure_page .obj_announcement_summary h2,
.pkp_structure_page .obj_announcement_summary h3 {
  margin: 0 0 6px; font-size: 17px !important; font-weight: 600; color: var(--iqra-blue) !important;
}
.pkp_structure_page .obj_announcement_summary .date { font-size: 13px; color: var(--text-tertiary); }
.pkp_structure_page .cmp_announcements .more { float: none !important; width: auto !important; clear: both; margin-top: 14px; }

.pkp_structure_page .cmp_announcements::before,
.pkp_structure_page .cmp_announcements::after,
.pkp_structure_page .obj_announcement_summary::before,
.pkp_structure_page .obj_announcement_summary::after,
.pkp_structure_page .cmp_announcements .more::before,
.pkp_structure_page .cmp_announcements .more::after { content: none !important; display: none !important; }


/* ==========================================================================
   MOBILE (verified at 412x968 in Chrome device emulation)
   The desktop header rules forced the navigation open with
   `display: flex !important`, overriding the theme's own collapsed state.
   The result was a STICKY 470px header on a 968px screen — half the
   viewport, permanently. Control of the menu goes back to the theme's
   toggle button, which adds .pkp_site_nav_menu--isOpen.
   Closed header is now 67px.
   ========================================================================== */

@media (max-width: 991px) {

  /* --- Header --- */
  .pkp_head_wrapper {
    display: flex !important; flex-wrap: wrap; align-items: center;
    position: relative !important;
    padding: 10px 16px 8px !important;
  }

  /* THE MOBILE MENU BUTTON.
     The theme draws this hamburger as three 3px WHITE bars, because it
     assumes a coloured header bar. Our header is white, so the control was
     invisible — present, clickable, and impossible to see. The bars are
     navy on a tinted square, pinned to the header's right edge.
     `left: auto` is needed: the theme sets left: 0, which wins over right
     on an absolutely positioned element. */
  .pkp_site_nav_toggle {
    position: absolute !important;
    left: auto !important; right: 16px !important; top: 11px !important;
    margin: 0 !important;
    width: 44px !important; height: 44px !important;
    display: flex !important; align-items: center; justify-content: center;
    border-radius: var(--radius-control) !important;
    background: var(--surface-field) !important;
    transform: none !important;
  }
  .pkp_site_nav_toggle:hover { background: #E5E9F0 !important; }
  .pkp_site_nav_toggle span { background: transparent !important; border-bottom-color: var(--ink) !important; }
  .pkp_site_nav_toggle span::before,
  .pkp_site_nav_toggle span::after { background: var(--ink) !important; }
  .pkp_head_wrapper::before { width: 150px !important; height: 34px !important; margin: 6px 12px 6px 0 !important; }

  /* The site index uses a real uploaded <img>, not the injected logo, and
     nothing constrained it — it overran the header and crossed the gold
     rule on a phone.

     It also sat 24px right of the header's left padding: the theme gives
     .pkp_site_name `position: absolute; left: 40px` at mobile widths, so
     the logo ignored its container and the container itself measured zero
     wide. Static puts it back in flow at the container's edge. */
  .pkp_site_name {
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; margin: 0 !important; padding: 0 !important;
  }
  .pkp_site_name a.is_img { display: block; line-height: 0; margin: 0 !important; }
  .pkp_site_name .is_img img { max-height: 34px !important; width: auto !important; }
  .pkp_head_wrapper:has(.pkp_site_name .is_img) .pkp_site_name_wrapper {
    order: 0 !important; flex: 0 0 auto !important; width: auto !important;
    padding: 0 !important; line-height: 0 !important;
  }

  /* The toggle lives INSIDE this wrapper, so the desktop rule making it
     position:relative anchored the button here instead of to the header.
     Static on mobile so the toggle can sit at the header's right edge. */
  .pkp_site_name_wrapper {
    order: 2 !important; flex: 1 1 100% !important; width: auto !important;
    position: static !important;
    padding: 2px 0 4px !important; line-height: 1.2;
    background: transparent !important; box-shadow: none !important; clip-path: none !important;
  }
  .pkp_site_name_wrapper::after { display: none !important; }
  .pkp_site_name .is_text { font-size: 15px !important; max-width: none !important; white-space: normal !important; display: block; line-height: 1.25; }

  /* The theme hides this until its toggle opens it — do not force display. */
  .pkp_site_nav_menu {
    display: none !important;
    order: 3 !important; flex: 1 1 100% !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; box-shadow: none !important; clip-path: none !important;
  }
  .pkp_site_nav_menu::before { display: none !important; }
  .pkp_site_nav_menu--isOpen {
    display: block !important;
    padding: 10px 0 14px !important;
    max-height: 70vh; overflow-y: auto;
  }

  /* The open menu: every row full width, stacked, nothing floating beside
     anything else. The desktop rules left the primary row, the search link
     and the user menu as flex siblings, so Search sat beside the About
     submenu and the user menu's items rendered to the RIGHT of its button
     instead of beneath it. */
  .pkp_site_nav_menu--isOpen { padding: 8px 16px 16px !important; }
  .pkp_navigation_primary_row { display: block !important; width: 100%; }
  .pkp_navigation_primary { flex-direction: column; align-items: stretch; gap: 2px; width: 100% !important; }
  .pkp_navigation_primary > li,
  .pkp_navigation_primary > li > a { width: 100% !important; }
  .pkp_navigation_primary > li > a { height: 44px !important; margin: 0 !important; border-radius: var(--radius-control) !important; }
  .pkp_navigation_primary .dropdown-menu { width: 100% !important; display: block !important; }
  .pkp_navigation_primary .dropdown-menu > li > a { display: block !important; height: auto !important; padding: 9px 0 !important; font-size: 14.5px !important; }

  /* Dropdowns become indented lists, not floating panels — as absolute
     panels they pushed the page 73px wider than the viewport. */
  .pkp_navigation_primary .dropdown-menu,
  .pkp_navigation_user .dropdown-menu {
    position: static !important;
    width: auto !important; min-width: 0 !important; max-width: 100% !important;
    left: auto !important; right: auto !important;
    margin: 0 !important; padding: 2px 0 6px 14px !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: transparent !important;
  }

  .pkp_navigation_search_wrapper {
    position: static !important; float: none !important;
    width: 100% !important; margin: 8px 0 0 !important;
  }
  .pkp_navigation_search_wrapper a.pkp_search {
    display: flex !important; width: 100% !important; height: 44px !important;
    align-items: center; justify-content: flex-start;
    margin: 0 !important; padding: 0 12px !important;
    border-radius: var(--radius-control) !important;
    background: var(--surface-field) !important;
  }

  #navigationUserWrapper {
    width: 100% !important; margin: 10px 0 0 !important;
    padding-top: 10px !important; border-top: 1px solid var(--border-subtle);
  }
  .pkp_navigation_user { display: block !important; width: 100%; justify-content: flex-start !important; }
  /* The list item is a flex ROW on desktop, which put the dropdown beside
     the trigger rather than under it. */
  .pkp_navigation_user > li,
  .pkp_navigation_user > li.profile { display: block !important; width: 100% !important; }
  .pkp_navigation_user > li > a { display: flex !important; width: 100% !important; justify-content: space-between !important; }
  .pkp_navigation_user .dropdown-menu {
    display: block !important; position: static !important;
    width: 100% !important; padding: 4px 0 0 14px !important;
  }
  .pkp_navigation_user .dropdown-menu > li > a { padding: 9px 0 !important; font-size: 14.5px !important; }

  /* --- Search form ---
     The two date ranges side by side, each three selects at a fixed
     minimum, measured 448px against a 412px viewport. */
  .page_search .cmp_form { padding: 20px 16px !important; }
  .page_search .date_range { flex-direction: column; gap: 16px !important; }
  .page_search .date_range .from,
  .page_search .date_range .to { width: 100%; }
  .page_search .date_range fieldset { flex-wrap: wrap !important; width: 100% !important; }
  .page_search .date_range select { min-width: 0 !important; width: auto !important; flex: 1 1 86px !important; }
  .page_search .author input { max-width: 100% !important; }
  .page_search .search_results > li { padding: 16px 18px !important; }
}