/* ==========================================================================
   brand-iu.css — IU Brand Guidelines V2 override layer
   journals.iqra.edu.pk

   Load LAST, after every existing stylesheet. Remove the <link> to roll back.
   No markup changes. Phase 2 items (search field, text journal titles,
   removing the per-card Submit link) are noted but not attempted here.
   ========================================================================== */

@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;
  --radius-pill: 999px;
  --elevation-1: 0 1px 2px rgba(20, 38, 77, .06);
  --elevation-2: 0 8px 24px rgba(20, 38, 77, .08);
}

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

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

body.boxed_wrapper {
  background: var(--surface-page);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

body.boxed_wrapper h1,
body.boxed_wrapper h2,
body.boxed_wrapper h3,
body.boxed_wrapper h4 {
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.boxed_wrapper a { color: var(--iqra-blue); }
body.boxed_wrapper a:hover { color: var(--ink); }

/* Focus is never removed. Gold fails 3:1 on white, so the ring is navy. */
body.boxed_wrapper a:focus-visible,
body.boxed_wrapper button:focus-visible,
body.boxed_wrapper input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink);
  border-radius: var(--radius-control);
}

/* --- Header ------------------------------------------------------------- */
/* Two loose rows with a floating button became one tight masthead:
   logo + action on a white row, navigation on a tinted strip beneath. */

/* Sticky, matching OJS. The theme's own .sticky-header block is hidden, or
   you get two competing headers on scroll. */
.main-header {
  position: sticky !important;
  top: 0;
  z-index: 200;
  background: var(--surface-card);
}
.main-header .sticky-header { display: none !important; }
html { scroll-behavior: smooth; }

/* An inline <img> sits on a text baseline, so the logo link added ~20px of
   invisible leading. Same cause as on OJS. */
.main-header .header-top { padding: 8px 0; }
.main-header .header-top .logo-box a,
.main-header .header-top .logo-box figure { display: inline-block; line-height: 0; margin: 0; }
.main-header .header-top .container,
.main-header .header-bottom .container {
  max-width: 1200px; width: 100%; padding-left: 32px; padding-right: 32px;
}
.main-header .header-top .clearfix {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px;
}
.main-header .header-top .logo-box { float: none !important; }
.main-header .header-top .top-right { margin-left: auto !important; float: none !important; }
.main-header .top-right ul.header-info { margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; }

/* Navigation strip. The gold rule divides the two rows rather than closing
   the header, which is how OJS now reads: white row, gold, tinted row. */
.main-header .header-bottom {
  background: var(--surface-field);
  padding: 0;
  border-top: 4px solid var(--iu-gold);
  border-bottom: 1px solid var(--border);
}
.main-header .header-bottom .container { padding-top: 0; padding-bottom: 0; }
@media (min-width: 992px) {
  .main-header .main-menu .navigation { display: flex; flex-wrap: nowrap; }
  .main-header .main-menu .navigation > li { margin-right: 0; }
}
.main-header .main-menu .navigation > li > a {
  padding: 0 12px; height: 38px; margin: 6px 0;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  border-radius: var(--radius-control);
  font-size: 13.5px; font-weight: 600; color: var(--iqra-blue);
}
/* White chip on the tinted strip — a tint-on-tint hover barely registers.
   Matches the OJS navigation exactly. */
.main-header .main-menu .navigation > li > a:hover,
.main-header .main-menu .navigation > li > a:focus {
  background: #FFFFFF;
  color: var(--iqra-blue);
  box-shadow: 0 1px 2px rgba(20, 38, 77, .08);
}
.main-header .main-menu .navigation > li.current > a {
  background: #FFFFFF;
  box-shadow: inset 0 -3px 0 var(--iu-gold);
}

.main-header .header-top,
.main-header .header-bottom,
.main-header .sticky-header {
  background: var(--surface-card);
}

/* The gold rule is set once, on .header-bottom's TOP edge, in the header
   block above — it divides the two rows. This is where a second, older
   rule used to put gold on the BOTTOM edge too, giving the strip a gold
   line above AND below. Do not reinstate it. */
.main-header .sticky-header {
  background: var(--surface-card);
  border-bottom: 4px solid var(--iu-gold);
  box-shadow: 0 4px 14px rgba(20, 38, 77, .12);
}

.main-header .logo-box img,
.main-header .sticky-logo img { height: 40px; width: auto; display: block; }

.main-header .main-menu .navigation > li > a {
  font-size: 14px;
  font-weight: 600;
  color: var(--iqra-blue);
}
.main-header .main-menu .navigation > li.current > a,
.main-header .main-menu .navigation > li:hover > a { color: var(--ink); }

/* Header "Submit Paper" — the one primary action on the page.
   The theme renders this inline-block at 13px/400 and wins on specificity,
   so the label came out thin and the arrow sat flush against it. Every
   declaration here has to be forced, and the box has to become a flex row
   before `gap` does anything. */
.main-header .top-right .header-info a.bg-blue,
.main-header .top-right a.bg-blue,
a.bg-blue {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--iqra-blue) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  height: 46px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  box-shadow: 0 1px 2px rgba(20, 38, 77, .18);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.main-header .top-right a.bg-blue::after,
a.bg-blue::after {
  content: "\2192" !important;
  font-size: 15px; line-height: 1; display: inline-block; margin: 0;
}
.main-header .top-right a.bg-blue:hover {
  background: var(--ink); color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(20, 38, 77, .22);
  transform: translateY(-1px);
}

/* --- Journal cards ------------------------------------------------------ */

.single-blog-post {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.single-blog-post:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }

/* Equal cards whatever the cover's own proportions. */
.single-blog-post .img-holder { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.single-blog-post .img-holder img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* The SUBMIT chip sat at a different spot on every cover. Pin it, shrink it.
   Phase 2 removes it: submitting belongs after reading, not on a tile. */
.single-blog-post .img-holder .categorie-button {
  position: absolute; top: 12px; left: 12px; right: auto; bottom: auto;
}
.single-blog-post .img-holder .categorie-button a.btn-one {
  background: rgba(19, 41, 75, .92);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
}

.single-blog-post .text-holder { padding: 14px 18px 16px; margin-top: auto !important; }
.single-blog-post .readmore-button { margin: 0 !important; padding: 0; }
.single-blog-post { margin-bottom: 0; }

/* "Continue Reading" told the reader nothing, and eight identical link
   labels read as one repeated item to a screen reader. */
.single-blog-post .readmore-button a.btn-two {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--iqra-blue);
  border: 0;
  padding: 0;
}
.single-blog-post .readmore-button a.btn-two { font-size: 0; min-height: 0; line-height: 1.4; }
.single-blog-post .readmore-button a.btn-two span,
.single-blog-post .readmore-button a.btn-two [class^="flaticon"] { display: none; }
.single-blog-post .readmore-button a.btn-two::after {
  content: "View journal \2192";
  font-size: 14px;
  font-weight: 600;
}
/* The theme turns this link ORANGE (#FBA930) when the CARD is hovered, via
   `.single-blog-post:hover .text-holder .readmore-button a`. My rule only
   covered the link's own :hover, so the card-hover state still went orange
   — off-palette, and amber text on white fails contrast. Both states are
   pinned here. Same orange is used on the blog title and meta links. */
.single-blog-post .readmore-button a.btn-two:hover,
.single-blog-post:hover .text-holder .readmore-button a,
.single-blog-post:hover .readmore-button a.btn-two { color: var(--ink) !important; }
.single-blog-post .text-holder .blog-title a:hover,
.single-blog-post .text-holder .meta-box .meta-info li a:hover { color: var(--ink) !important; }

/* The grid sat in a large empty gap before the next band. */
section:not([class]) > .container { padding-top: 40px !important; padding-bottom: 40px !important; }
section:not([class]) > .container > .row { row-gap: 24px; padding-bottom: 0 !important; }

/* Two empty <section class="event-section"> blocks render as 130px of dead
   space. Hide them until they carry content. */
section.event-section { display: none; }

/* --- Submission band ---------------------------------------------------- */

.cta-section {
  background-color: var(--iqra-blue) !important;
  background-image: none !important;
}
.cta-section .content-box { padding: 44px 0 !important; text-align: center; }
/* .cta-title is a div with the text directly inside it, not a heading. */
.cta-section .cta-title {
  color: #FFFFFF !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Short gold rule under the band title — a fill, never text. */
.cta-section .cta-title::after {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--iu-gold); margin: 16px auto 0;
}
.cta-section .link { margin-top: 22px; }

/* The counter band carries real figures (journals, authors, papers,
   citations) on an off-palette navy. */
.fact-counter { background-color: var(--ink) !important; padding: 36px 0 !important; }
.fact-counter .count-box,
.fact-counter .counter-title,
.fact-counter .counter-column h3 { color: #FFFFFF; }
.cta-section .link a {
  background: #FFFFFF !important;
  color: var(--iqra-blue) !important;
  border-radius: var(--radius-control);
  height: 50px;
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.cta-section .link a::after { content: "\2192"; font-size: 16px; }
.cta-section .link a:hover { background: var(--iu-gold) !important; color: var(--ink) !important; }

/* --- Subscribe band ----------------------------------------------------- */
/* The form had no visible field and sat on white-on-white. It is now a card
   on the page ground, with a real input. */

.subscribe-section { background: var(--surface-page) !important; padding: 8px 0 !important; }
.subscribe-section .outer-box {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 24px 32px;
  margin: 32px 0;
}
.subscribe-section .outer-box .row { align-items: center; }
.subscribe-section form,
.subscribe-section .form-group { display: flex; gap: 10px; align-items: center; margin: 0; }
.subscribe-section h2,
.subscribe-section h3 { color: var(--ink); font-size: 20px; font-weight: 600; }
.subscribe-section input[type="email"],
.subscribe-section input[type="text"] {
  flex: 1 1 auto;
  min-width: 260px;
  height: 48px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-field) !important;
  border-radius: var(--radius-control) !important;
  padding: 0 16px !important;
  font-size: 15px;
  color: var(--text);
  box-shadow: none;
}
.subscribe-section input::placeholder { color: var(--text-tertiary); }
.subscribe-section input:focus { border-color: var(--iqra-blue) !important; background: #FFFFFF !important; }
.subscribe-section .theme-btn,
.subscribe-section button,
.subscribe-section input[type="submit"] {
  height: 48px !important;
  padding: 0 28px !important;
  white-space: nowrap;
  border: 0;
  border-radius: var(--radius-control) !important;
  background: var(--iqra-blue) !important;
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 600;
}

/* --- Footer ------------------------------------------------------------- */

.main-footer { background: var(--ink); color: #C9D2DE; }
.main-footer .footer-title,
.main-footer .footer-widget h3,
.main-footer .footer-widget h4,
.main-footer .footer-widget .widget-title {
  color: var(--iu-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.main-footer .footer-title { color: var(--iu-gold) !important; }
.main-footer a { color: #C9D2DE; }
.main-footer a:hover { color: #FFFFFF; }
/* The lockup carries its own blue block, so it needs a light panel on navy.
   The white-keyline logo file would remove this workaround. */
.main-footer .footer-logo,
.main-footer .logo-widget figure {
  background: #FFFFFF;
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--radius-control);
}
.main-footer .footer-logo img { height: 30px; width: auto; display: block; }

.footer-bottom { background: var(--ink); border-top: 1px solid #24405F; }
.footer-bottom .copyright,
.footer-bottom .copyright * { color: #9FB0C4; font-size: 13px; }

/* --- Back to top -------------------------------------------------------- */
/* The theme's icon glyph sat off-centre; this draws a clean chevron. */

.scroll-top {
  background: var(--iqra-blue);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: 0;
  position: fixed !important;
  box-shadow: 0 4px 12px rgba(20, 38, 77, .25);
}
.scroll-top span,
.scroll-top i,
.scroll-top [class^="fa"] { display: none !important; }
.scroll-top::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-left: 2px solid #FFFFFF;
  border-top: 2px solid #FFFFFF;
  transform: translate(-50%, -35%) rotate(45deg);
}
.scroll-top:hover { background: var(--ink); }

/* ==========================================================================
   INNER PAGES — journal detail, archives, guidelines, policies, contact
   ========================================================================== */

/* --- Page title band ----------------------------------------------------
   The band is pulled 22px ABOVE the viewport top — it sits UNDER the header
   by design, so this padding is real clearance, not spare whitespace.
   That is why 108px clipped the heading during testing. Keep it at least
   the header height plus ~14px. Header is now 128px. */

.page-title,
.breadcrumb-section { background: var(--ink) !important; padding: 142px 0 0 !important; }
.page-title .container { padding-bottom: 24px; }
.page-title h1,
.page-title h2 { color: #FFFFFF !important; font-size: 30px; font-weight: 800; margin: 0 0 10px; }
.page-title .container::after {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--iu-gold); margin-top: 14px;
}
.page-title a,
.page-title li,
.page-title span { color: #C9D2DE !important; font-size: 13px; }
.page-title a:hover { color: #FFFFFF !important; }
.page-title hr { display: none; }

/* --- Content ground ----------------------------------------------------- */
/* .gray-bg is an off-palette warm grey (#F7F5F5) with a watermark. */

.team-details,
.team-details.gray-bg { background: var(--surface-page) !important; background-image: none !important; padding: 32px 0 48px !important; }
/* The template hard-codes two <br> tags before the container. */
.team-details > br { display: none; }

.team-details .image-column .image-box img { border-radius: var(--radius-card); box-shadow: var(--elevation-1); }
.team-details .text-issn { font-size: 13px; color: var(--text-tertiary); margin-top: 12px; line-height: 1.7; }

.jc-section-title,
.team-details-content h2,
.team-details-content h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.journal-content,
.jc-normalized { font-size: 15px; line-height: 1.7; color: var(--text); text-align: left !important; max-width: 72ch; }

/* --- Most Cited / Recent / Most Downloaded tabs -------------------------- */

.custom-tab-title { height: auto !important; }
.custom-tab-title .tab-title {
  display: flex !important; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  list-style: none; border: 0;
}
.custom-tab-title .tab-title li {
  height: 44px !important; padding: 0 20px !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center;
  float: none !important; margin: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important; font-weight: 600 !important; cursor: pointer;
}
.custom-tab-title .tab-title li:hover { border-color: var(--iqra-blue) !important; color: var(--iqra-blue) !important; }
.custom-tab-title .tab-title li.active {
  background: var(--iqra-blue) !important;
  border-color: var(--iqra-blue) !important;
  color: #FFFFFF !important;
}

/* --- Article cards ------------------------------------------------------ */

.single-item {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 24px 28px !important;
  margin-bottom: 16px;
  transition: box-shadow .15s ease;
}
.single-item:hover { box-shadow: var(--elevation-2); }
.single-item .text-blue,
.single-item h3,
.single-item h4 { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--iqra-blue); }
.single-item .fa { color: var(--text-tertiary); }

/* The count badge is an inline .text-blue after the title, so it breaks onto
   a line of its own when the title fills the row. Keeps icon and number
   together and tied to the last word. */
.single-item .text-blue {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
  font-size: 14px !important; font-weight: 600 !important;
  vertical-align: middle;
}

/* Justified abstracts produced uneven word spacing. */
.text-justify,
p.text-justify,
.single-item .text-justify,
.single-blog-post p { text-align: left !important; }
.single-item .text-justify { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }

.theme-btn-two {
  height: 40px; padding: 0 20px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--iqra-blue);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--iqra-blue);
  font-size: 14px; font-weight: 600;
}
.theme-btn-two:hover { background: var(--iqra-blue); color: #FFFFFF; }

/* --- Sidebar panels ----------------------------------------------------- */

.single-service-content .inner-box,
.single-service-content.inner-box {
  background: var(--surface-card);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 24px;
}
.single-service-content .text-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iqra-blue); margin: 0 0 14px;
}
.single-service-content .link-list li { padding: 7px 0; font-size: 14px; }

/* .btn-two is used BOTH for the indexing list links and for the View All
   button, so the list has to be reset or every entry becomes a button. */
.link-list .btn-two {
  border: 0 !important; padding: 0 !important; height: auto !important;
  display: inline !important; margin: 0 !important;
  color: var(--iqra-blue) !important; font-size: 14px !important; font-weight: 500 !important;
}
.link-list .btn-two:hover { color: var(--ink) !important; text-decoration: underline; }
.lower-content > .btn-two,
.inner-box > .btn-two,
.text > .btn-two {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--iqra-blue);
  border-radius: var(--radius-control);
  color: var(--iqra-blue); font-size: 14px; font-weight: 600;
  margin-top: 14px;
}

/* --- Responsive --------------------------------------------------------- */

/* ==========================================================================
   AUDIT FIXES — measured on the live pages with this sheet applied
   Contrast: 0 failures remaining.
   Remaining: 8 text nodes under 13px and 19 interactive targets under 40px.
   ========================================================================== */

/* The cover chips were 11px text in a 25px box — the smallest type and the
   smallest hit area on the site. */
.single-blog-post .img-holder .categorie-button a.btn-one {
  font-size: 12px !important;
  min-height: 32px;
  padding: 7px 14px !important;
  display: inline-flex;
  align-items: center;
}

/* Footer links sat at 26px with no padding, so they were hard to hit and
   hard to tell apart. */
.main-footer .link-widget li a,
.main-footer .footer-widget li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  line-height: 1.4;
}
.main-footer .link-widget li,
.main-footer .footer-widget li { margin-bottom: 0; }

/* Nothing on the site should sit below the 13px floor. */
.main-footer .text,
.footer-bottom .copyright,
.single-item .fa,
.team-details .text-issn { font-size: 13px; }

/* ==========================================================================
   RESPONSIVE
   NOTE: the preview browser would not report a narrow viewport, so these
   rules are written to the breakpoints the theme already uses and have NOT
   been verified on a real device. Check on a phone before shipping.
   ========================================================================== */

@media (max-width: 991px) {
  .main-header .header-top .clearfix { flex-wrap: wrap; gap: 12px; }
  .main-header .header-bottom { border-top-width: 3px; }
  .page-title,
  .breadcrumb-section { padding: 104px 0 0 !important; }
  .page-title h1,
  .page-title h2 { font-size: 24px; }
  .cta-section .cta-title { font-size: 24px; }
}

@media (max-width: 767px) {
  .main-header .top-right a.bg-blue { width: 100%; justify-content: center; }
  .cta-section .content-box { padding: 36px 0 !important; }
  .single-item { padding: 18px 20px !important; }
  .subscribe-section .outer-box { padding: 20px; }
  .subscribe-section form,
  .subscribe-section .form-group { flex-wrap: wrap; }
  .subscribe-section input[type="email"],
  .subscribe-section input[type="text"] { min-width: 0; width: 100%; }
  .subscribe-section .theme-btn,
  .subscribe-section button { width: 100%; }
  .custom-tab-title .tab-title li { flex: 1 1 auto; justify-content: center; }
  .team-details { padding: 24px 0 36px !important; }
}

/* ==========================================================================
   KEYBOARD FOCUS
   Gold fails the 3:1 requirement for UI borders on white, so the ring is
   navy with a white offset. It is never removed.
   ========================================================================== */

body.boxed_wrapper a:focus-visible,
body.boxed_wrapper button:focus-visible,
body.boxed_wrapper input:focus-visible,
body.boxed_wrapper select:focus-visible,
body.boxed_wrapper textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink);
  border-radius: var(--radius-control);
}
.main-footer a:focus-visible,
.cta-section a:focus-visible,
.page-title a:focus-visible {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--iu-gold);
}


/* ==========================================================================
   CONTENT SUBPAGES — author guidelines, policies, copyright, editorial team,
   indexing, contact, archives. These share .team-details-content and run
   full width with no sidebar.
   ========================================================================== */

/* The heading sits at the container edge while the body copy is inset 40px,
   so they don't line up. Pull the content block back. */
.team-details-content.journal-content,
.team-details-content .journal-content,
.jc-normalized { margin-left: 0 !important; margin-right: 0 !important; }

.journal-content,
.jc-normalized,
.team-details-content p { font-size: 15px; line-height: 1.7; color: var(--text); max-width: 78ch; }
.team-details-content p { margin: 0 0 14px; }

.jc-subheading,
.jc-duplicate-title {
  font-size: 17px; font-weight: 600; color: var(--ink);
  margin: 28px 0 10px;
}
.top-content { margin-bottom: 20px; }

.team-details-content ol,
.team-details-content ul { margin: 0 0 16px; padding-left: 22px; }
.team-details-content li { margin-bottom: 7px; line-height: 1.6; }
.team-details-content .link-list { list-style: none; padding-left: 0; }
.team-details-content .link-list li { padding: 6px 0; }

/* --- Off-palette values found on live pages ----------------------------- */
/* #103A60 on bold labels, #222222 on headings, #505050 on inline bold,
   #D4DAE3 on footer links — none of them in the token set. */

.jc-section-title,
.team-details-content h2,
.team-details-content h3,
.lower-content h5 { color: var(--ink) !important; }
.single-item h3,
.single-item h4,
.single-item h5 {
  font-size: 18px !important; line-height: 1.4 !important;
  font-weight: 600 !important; color: var(--iqra-blue) !important;
}
.team-details b,
.team-details strong { color: var(--ink) !important; font-weight: 600; }
.single-item .text-justify b,
.single-item .text-justify strong { color: var(--text) !important; }

/* --- Header search (inner pages only) ----------------------------------- */

.header-top input,
.header-top input[type="text"],
.header-top input[type="search"] {
  height: 44px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  background: var(--surface-field) !important;
  padding: 0 14px !important;
  font-size: 14px; color: var(--text);
  box-shadow: none !important;
}
.header-top input::placeholder { color: var(--text-tertiary); }
.header-top .search-box,
.header-top form { display: flex; align-items: center; gap: 8px; }
.header-top .search-box button,
.header-top form button {
  height: 44px; min-width: 44px; border: 0;
  border-radius: var(--radius-control);
  background: var(--iqra-blue); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- Footer: identical on every page ------------------------------------ */

.main-footer a,
.main-footer li a,
.main-footer .link-widget a { color: #C9D2DE !important; }
.main-footer a:hover { color: #FFFFFF !important; }
.main-footer .widgets-section { padding: 48px 0 32px; }
.main-footer .footer-column { margin-bottom: 0; }


/* ==========================================================================
   SECOND FOOTER VARIANT
   Subpages (editorial team, indexing, contact…) ship a FOUR-column footer
   with a newsletter block the three-column homepage footer does not have.
   Its button is gold — a fill the brand guide reserves for rules and
   accents — its input is a dark pill, and the postal address differs from
   the homepage's. The colour and shape are normalised here; the address
   mismatch is a content fix, not a CSS one.
   ========================================================================== */

.main-footer .footer-column { margin-bottom: 24px; }
.main-footer .footer-column:last-child { margin-bottom: 0; }

.main-footer input,
.main-footer input[type="email"],
.main-footer input[type="text"] {
  height: 48px !important;
  border-radius: var(--radius-control) !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #FFFFFF !important;
  padding: 0 14px !important;
  font-size: 14px;
  width: 100%;
  box-shadow: none !important;
}
.main-footer input::placeholder { color: #9FB0C4 !important; }
.main-footer input:focus {
  border-color: var(--iu-gold) !important;
  background: rgba(255, 255, 255, .12) !important;
}

/* Gold is not a button. Blue is the interactive colour, and on this navy
   ground the button inverts to white so it still reads as primary. */
.main-footer button,
.main-footer .theme-btn,
.main-footer input[type="submit"] {
  height: 48px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  background: #FFFFFF !important;
  color: var(--iqra-blue) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-top: 10px;
}
.main-footer button:hover,
.main-footer .theme-btn:hover { background: var(--iu-gold) !important; color: var(--ink) !important; }

/* --- Editorial team page ------------------------------------------------ */

.team-details .text-blue,
.team-details h4 { color: var(--ink) !important; }
/* Contact addresses render as bordered boxes; make them read as links. */
.team-details a[href^="mailto:"] {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--iqra-blue);
  font-size: 13px; font-weight: 500;
}
.team-details a[href^="mailto:"]:hover { border-color: var(--iqra-blue); background: var(--surface-field); }


/* ==========================================================================
   JOURNALS DROPDOWN
   The caret is a .dropdown-btn div meant for the mobile toggle; on desktop
   it renders as a stray glyph beside the label. Hide it there and draw the
   chevron on the link itself.
   ========================================================================== */

@media (min-width: 992px) {
  .main-header .navigation li.dropdown .dropdown-btn { display: none !important; }
}

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

/* The panel's hover state was white text on gold — a fill the brand guide
   doesn't allow and a contrast failure besides.

   IMPORTANT: the theme hangs the hover on the <li>, not the <a>
   (`.main-menu .navigation > li > ul > li:hover { background: #FBA930 }`),
   so a rule on `a:hover` never fires. The li's own gold background and
   dashed border have to be cleared first, and the hover chip drawn on the
   link inside it. The li also carries 7px 30px padding of its own, which
   stacks with the link's padding and pushes the labels out of alignment. */

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a { color: var(--iqra-blue) !important; }

.main-header .navigation li.dropdown > ul,
.main-menu .navigation > li > ul {
  width: 300px !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 8px 24px rgba(20, 38, 77, .12) !important;
  padding: 8px !important;
}
.main-menu .navigation > li > ul > li {
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  margin: 0;
  background: transparent !important;
}
.main-menu .navigation > li > ul > li:hover {
  background: transparent !important;
  border: 0 !important;
}
.main-menu .navigation > li > ul > li > a {
  display: block !important;
  height: auto !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-control) !important;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  color: var(--text) !important;
  background: transparent !important;
}
.main-menu .navigation > li > ul > li:hover > a,
.main-menu .navigation > li > ul > li > a:hover {
  background: var(--surface-field) !important;
  color: var(--iqra-blue) !important;
}


/* ==========================================================================
   ARCHIVES PAGE
   ========================================================================== */

/* .single-item is used for BOTH article cards and the volume links in the
   sidebar. The volume links carry .text-white, which was correct against
   the theme's navy panel — but the article-card rule turned the background
   white and the labels vanished. Volume name, year and chevron were all
   invisible. */

.single-item.volume-link {
  display: block;
  background: var(--surface-card) !important;
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 14px 16px !important;
  margin-bottom: 10px;
  text-decoration: none;
}
.single-item.volume-link:hover { box-shadow: var(--elevation-2); }
.single-item.volume-link h6,
.single-item.volume-link .text-white,
.single-item.volume-link .post-date { color: var(--ink) !important; }
.single-item.volume-link h6 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 15px; font-weight: 600;
}
.single-item.volume-link h6 .volume-name { flex: 1 1 auto; }
.single-item.volume-link h6.active,
.single-item.volume-link[aria-current] h6 { color: var(--iqra-blue) !important; }
.single-item.volume-link .post-date {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding-left: 0 !important;
  font-size: 13px; color: var(--text-secondary) !important;
}
.single-item.volume-link .fa { color: var(--text-tertiary); }

/* The archive "Read More" is an unclassed <a> on #103A60, off-palette and
   34px tall. Matches .theme-btn-two used elsewhere. */
.single-item .link a,
.lower-content .link a {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 20px;
  border: 1px solid var(--iqra-blue);
  border-radius: var(--radius-control);
  background: var(--surface-card) !important;
  color: var(--iqra-blue) !important;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.single-item .link a:hover,
.lower-content .link a:hover {
  background: var(--iqra-blue) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   CONTACT PAGE — right-hand information panels
   Third instance of the same trap: the theme puts .text-white content on a
   navy panel, and the card treatment turns that panel white, so the text
   disappears. Here it hid the editorial office address and the contact
   email entirely — the two things the page exists to show.

   Also .text-orange on the panel headings, which is off-palette; it had
   already been pinned to Iqra Blue elsewhere but not inside .single-item.
   ========================================================================== */

.contact-section .single-item .text-white,
.contact-section .single-item p.text-white,
.contact-section .single-item div.text-white,
.contact-form-area .single-item .text-white { color: var(--text) !important; }

.contact-section .single-item .text-white a,
.contact-form-area .single-item .text-white a { color: var(--iqra-blue) !important; }

.contact-section .single-item h4.text-orange,
.contact-form-area .single-item h4.text-orange {
  color: var(--iqra-blue) !important;
  font-size: 17px; font-weight: 700; margin: 0 0 10px;
}

/* The panels themselves, to match the cards used elsewhere. */
.contact-section .single-item {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 22px 24px !important;
  margin-bottom: 16px;
}


/* --- Contact form ------------------------------------------------------- */

/* Send Message shipped 29px tall, 13px type, square corners, on #103A60 —
   below the 40px target floor and off-palette. */
.contact-section button.bg-blue,
.contact-form-area button.bg-blue {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 32px;
  background: var(--iqra-blue) !important;
  border: 0 !important;
  border-radius: var(--radius-control);
  color: #FFFFFF !important;
  font-size: 15px; font-weight: 600;
}
.contact-section button.bg-blue:hover,
.contact-form-area button.bg-blue:hover { background: var(--ink) !important; }

.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section select,
.contact-section textarea {
  min-height: 46px; padding: 10px 14px;
  background: var(--surface-field);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: 15px; color: var(--text);
}
.contact-section textarea { min-height: 150px; }
.contact-section label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }

/* --- The theme's orange accent ------------------------------------------
   style.css uses rgb(251,169,48) as its global accent — on a:hover, on
   h3/h4/h5 link hover, on .theme-btn:hover, on current and hovered menu
   items and on dropdown items. Most are already beaten on specificity or
   source order, but .theme-btn:hover (0,0,2,0) outranks `body a:hover`,
   so it needs naming directly. Amber on white is also a contrast failure,
   not only a brand one. */
.theme-btn:hover { color: #FFFFFF; }
.subscribe-section .theme-btn:hover { color: var(--ink); }