/*
 SAFE HOTFIX v7 | 29 Oct 2026 | OJS 3.3.0.22
 Global Site Style Sheet is loaded on journal pages as well.
 A previous version used body.pkp_page_index, which matched JPMA and other journal homepages.
 This revision REQUIRES the OJS portal-specific .page_index_site element
 before it modifies the shared header/layout. Individual journals use
 .page_index_journal and are deliberately excluded.
 Tested by static CSS selector audit; check on the live website after upload.
 IMPORTANT: First remove version 6 and verify JPMA restores before trying this version.
 :has() requires a modern browser (Chrome, Edge, Firefox 121+, Safari 15.4+).
*/

/*
 AS-SALAM JOURNAL PORTAL — STRICTLY ROOT OJS HOMEPAGE ONLY
 Version: 2.0 | 29 October 2026 · official association logo
 Upload as the SITE stylesheet (not individual journal stylesheets).
 Targets OJS multi-journal home generated by indexSite.tpl.
 No scripts, no external fonts, and no changes to OJS submission workflows.
*/

.page_index_site {
  --as-forest: #124b42;
  --as-deep: #0b342e;
  --as-gold: #d8b36b;
  --as-ink: #19332f;
  --as-muted: #61736e;
  --as-border: #e4ebe5;
  --as-cream: #f8faf6;
  color: var(--as-ink);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Intro copied to Administration > Site Settings > Site Setup */
.page_index_site .about_site { max-width: none; margin: 0 0 58px; padding: 0; border: 0; }
.page_index_site .as-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(36px, 6vw, 76px);
  color: #fff;
  background: linear-gradient(115deg, #0a332e 4%, #125347 65%, #1b6b59 100%);
  box-shadow: 0 20px 46px rgba(7, 51, 43, 0.14);
}
.page_index_site .as-hero::before,
.page_index_site .as-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(236, 210, 148, .22);
  border-radius: 50%;
  pointer-events: none;
}
.page_index_site .as-hero::before { width: 540px; height: 540px; right: -240px; top: -240px; }
.page_index_site .as-hero::after { width: 380px; height: 380px; right: -100px; bottom: -245px; }
.page_index_site .as-eyebrow { color: #eedaa8; font-size: 12px; letter-spacing: .16em; font-weight: 750; text-transform: uppercase; margin: 0 0 20px; }
.page_index_site .as-hero h1 {
  max-width: 740px; margin: 0 0 20px; padding: 0;
  color: #fff; font-size: clamp(32px, 4.25vw, 56px);
  font-weight: 730; line-height: 1.14; letter-spacing: -.035em;
}
.page_index_site .as-hero .as-lead { color: #e0eee9; max-width: 670px; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75; margin: 0; }
.page_index_site .as-hero .as-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 27px 0 0; }
.page_index_site .as-hero .as-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 21px;
  border-radius: 9px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: background .2s ease, transform .2s ease;
}
.page_index_site .as-hero .as-button-primary { background: #edc77c; color: #17382e; }
.page_index_site .as-hero .as-button-secondary { border: 1px solid rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.07); }
.page_index_site .as-hero .as-button:hover { transform: translateY(-2px); }
.page_index_site .as-hero .as-button-primary:hover { background: #ffdf9a; }
.page_index_site .as-hero .as-button-secondary:hover { background: rgba(255,255,255,.17); }
.page_index_site .as-hero .as-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.page_index_site .as-hero .as-info { display: flex; flex-wrap: wrap; gap: 11px 24px; margin: 34px 0 0; padding: 21px 0 0; border-top: 1px solid rgba(255,255,255,.24); color: #e5eee8; font-size: 13px; }
.page_index_site .as-hero .as-info span { display: inline-flex; align-items: center; }
.page_index_site .as-hero .as-info span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #eac87f; margin-right: 10px; }

/* Journal list is generated from live OJS records: never duplicate it in HTML. */
.page_index_site .journals { margin: 0; padding: 0 0 45px; }
.page_index_site .journals > h2 {
  border: none; padding: 0; margin: 0 0 28px;
  color: var(--as-deep); font-size: clamp(25px, 3vw, 33px);
  line-height: 1.2; font-weight: 730; letter-spacing: -.02em;
}
.page_index_site .journals > h2::after { content: ''; display: block; width: 62px; height: 4px; margin-top: 15px; border-radius: 4px; background: var(--as-gold); }
.page_index_site .journals > ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; list-style: none; margin: 0; padding: 0;
}
.page_index_site .journals > ul > li {
  --as-card-accent: #216457;
  float: none; min-width: 0; width: auto; margin: 0; padding: 28px;
  display: flex; flex-direction: column; gap: 15px;
  position: relative; border: 1px solid var(--as-border);
  border-top: 4px solid var(--as-card-accent); border-radius: 17px;
  background: #fff; box-shadow: 0 7px 22px rgba(12, 52, 43, .045);
  transition: box-shadow .22s ease, transform .22s ease;
}
.page_index_site .journals > ul > li:nth-child(2) { --as-card-accent: #b38b46; }
.page_index_site .journals > ul > li:nth-child(3) { --as-card-accent: #426b94; }
.page_index_site .journals > ul > li:nth-child(4) { --as-card-accent: #82659b; }
.page_index_site .journals > ul > li:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(12, 52, 43, .1); }
.page_index_site .journals > ul > li .thumb { margin: 0 0 2px; padding: 0; float: none; width: auto; max-width: 100%; }
.page_index_site .journals > ul > li .thumb img { display: block; width: auto; max-width: 90px; max-height: 115px; border-radius: 6px; object-fit: contain; }
.page_index_site .journals > ul > li .body { width: 100%; min-width: 0; padding: 0; margin: 0; float: none; display: flex; flex: 1; flex-direction: column; }
.page_index_site .journals > ul > li h3 { margin: 0 0 14px; padding: 0; font-size: 20px; font-weight: 735; line-height: 1.4; }
.page_index_site .journals > ul > li h3 a { color: var(--as-deep); text-decoration: none; }
.page_index_site .journals > ul > li h3 a:hover { color: #177568; text-decoration: underline; text-underline-offset: 4px; }
.page_index_site .journals > ul > li .description {
  color: #53665f; line-height: 1.74; font-size: 14px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  line-clamp: 5; overflow: hidden; margin: 0 0 20px;
}
.page_index_site .journals > ul > li .description p { margin: 0 0 8px; }
.page_index_site .journals > ul > li .links {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
  list-style: none; margin: auto 0 0; padding: 12px 0 0;
  border-top: 1px solid #edf1ec;
}
.page_index_site .journals > ul > li .links li { float: none; margin: 0; padding: 0; border: 0; }
.page_index_site .journals > ul > li .links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 9px 13px;
  border: 1px solid #d9e5db; border-radius: 9px;
  color: var(--as-deep); background: #f8faf6;
  text-decoration: none; font-weight: 700; font-size: 13px;
}
.page_index_site .journals > ul > li .links li.view a { background: var(--as-deep); border-color: var(--as-deep); color: #fff; }
.page_index_site .journals > ul > li .links a:hover { background: #e6eee7; }
.page_index_site .journals > ul > li .links li.view a:hover { background: #206b5a; }
.page_index_site .journals > ul > li a:focus-visible { outline: 3px solid #b58b44; outline-offset: 3px; }

@media (max-width: 760px) {
  .page_index_site .about_site { margin-bottom: 38px; }
  .page_index_site .as-hero { border-radius: 16px; padding: 34px 25px; }
  .page_index_site .as-hero .as-info { gap: 9px 14px; }
  .page_index_site .journals > ul { grid-template-columns: 1fr; gap: 16px; }
  .page_index_site .journals > ul > li { padding: 23px; }
  .page_index_site .journals > ul > li h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .page_index_site .as-hero .as-button,
  .page_index_site .journals > ul > li { transition: none; }
  .page_index_site .as-hero .as-button:hover,
  .page_index_site .journals > ul > li:hover { transform: none; }
}


/* V2: identity panel displays the official As-Salam seal from the SK letter. */
.page_index_site .as-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: center; gap: clamp(30px, 5vw, 64px); }
.page_index_site .as-hero-copy { min-width: 0; }
.page_index_site .as-hero-identity { display: flex; justify-content: center; align-self: stretch; align-items: center; }
.page_index_site .as-logo-panel {
  display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center;
  min-width: 220px; width: 100%; padding: 26px 22px 22px;
  border: 1px solid rgba(255,255,255,.27); border-radius: 21px;
  background: rgba(255,255,255,.095); box-shadow: 0 12px 32px rgba(0,0,0,.075);
  backdrop-filter: blur(5px);
}
.page_index_site .as-identity-logo {
  display: block; width: 158px; height: 158px; object-fit: contain;
  background: #fff; padding: 5px; border: 5px solid #fff; border-radius: 50%;
  box-shadow: 0 9px 27px rgba(0,0,0,.17);
}
.page_index_site .as-logo-label { color: #fff; display: block; margin: 15px 0 5px; font-weight: 790; font-size: 22px; letter-spacing: .065em; }
.page_index_site .as-logo-caption { color: #d9ece6; max-width: 185px; font-size: 11px; line-height: 1.55; letter-spacing: .015em; }
@media (max-width: 890px) {
  .page_index_site .as-hero-inner { grid-template-columns: minmax(0,1fr) 195px; gap: 18px; }
  .page_index_site .as-logo-panel { min-width: 0; padding: 16px 12px; }
  .page_index_site .as-identity-logo { width: 125px; height: 125px; }
  .page_index_site .as-logo-label { font-size: 18px; }
}
@media (max-width: 690px) {
  .page_index_site .as-hero-inner { grid-template-columns: 1fr; }
  .page_index_site .as-hero-identity { justify-content: flex-start; order: -1; }
  .page_index_site .as-logo-panel { width: auto; flex-direction: row; gap: 12px; padding: 10px 12px; border-radius: 13px; text-align: left; justify-content: flex-start; flex-wrap: wrap; }
  .page_index_site .as-identity-logo { width: 67px; height: 67px; border: 2px solid #fff; padding: 2px; }
  .page_index_site .as-logo-label { margin: 0; font-size: 17px; }
  .page_index_site .as-logo-caption { display: none; }
}


/* V3: portal-level adjustments based on live OJS 3.3.0.22 screenshot, 29 Oct 2026. */
/* The OJS default theme visually hides its Journals heading for screen readers;
   restore it as a visible section title above the two-column journal cards. */
.page_index_site .journals > h2 {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}
/* Site-level CSS is loaded on the multi-journal portal, not the hosted journals. */
body.pkp_page_index:has(.page_index_site) .pkp_structure_head {
  background: #0b342e;
}
body.pkp_page_index:has(.page_index_site) .pkp_structure_content {
  box-sizing: border-box;
  max-width: 1220px;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: auto;
  margin-right: auto;
}
body.pkp_page_index:has(.page_index_site) .pkp_structure_main {
  box-sizing: border-box;
  float: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  border: 0;
  padding-top: 22px;
}
body.pkp_page_index:has(.page_index_site) .page_index_site .journals { margin-top: 0; }
@media (max-width: 760px) {
  body.pkp_page_index:has(.page_index_site) .pkp_structure_content { padding-left: 14px; padding-right: 14px; }
  body.pkp_page_index:has(.page_index_site) .pkp_structure_main { padding-top: 14px; }
}


/* V4: clean OJS 3.3 Default theme's multi-journal index scaffold.
   Layout defects confirmed in user's 29 Oct 2026 screenshot.
   Scoped to the portal homepage only, not the four journal sites. */

/* OJS Default theme draws two full-height vertical dividers with
   main::before and main::after. They cross the new journal cards. */
body.pkp_page_index:has(.page_index_site) .pkp_structure_main::before,
body.pkp_page_index:has(.page_index_site) .pkp_structure_main::after {
  display: none !important;
  content: none !important;
}

/* OJS adds a large top margin when main is the only content column.
   Remove that default gap; keep measured breathing room below header. */
body.pkp_page_index:has(.page_index_site) .pkp_structure_main:first-child:last-child {
  margin-top: 0 !important;
}
body.pkp_page_index:has(.page_index_site) .pkp_structure_content {
  padding-top: 28px;
}
body.pkp_page_index:has(.page_index_site) .pkp_structure_main {
  padding-top: 0;
}

/* Place the original header logo on the same horizontal rhythm as
   the body rather than flush against the left side of the viewport. */
@media (min-width: 992px) {
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_head_wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 991px) {
  body.pkp_page_index:has(.page_index_site) .pkp_structure_content { padding-top: 18px; }
}
@media (max-width: 760px) {
  body.pkp_page_index:has(.page_index_site) .pkp_structure_content { padding-top: 12px; }
}


/* V5: official association name beside the OJS site logo.
   Targets the main multi-journal portal only, not individual journal pages.
   CSS-generated identity is a visual enhancement; for semantic HTML or search
   indexing, set the proper Site Name and consider a dedicated OJS child theme. */

/* OJS 3.3 renders the uploaded logo in .pkp_site_name > a.is_img.
   Reserve room for the logo, and stack two brand lines to its right. */
body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name {
  box-sizing: border-box;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 92px;
  margin: 0;
  padding: 6px 0 6px 111px !important;
  overflow: visible;
  white-space: normal;
  text-align: left;
}
body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name > a.is_img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  display: block;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
}
body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name .is_img img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 85px !important;
  max-height: 85px !important;
  object-fit: contain;
}
body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name::before {
  content: "JURNAL AS-SALAM";
  display: block;
  color: #f1d392;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(21px, 2.45vw, 30px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .015em;
}
body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name::after {
  content: "ASOSIASI DOSEN PERGURUAN TINGGI ISLAM";
  display: block;
  margin-top: 4px;
  color: #fff;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .018em;
}

/* Keep header content aligned on tablets. */
@media (min-width: 761px) and (max-width: 991px) {
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name {
    padding-left: 102px !important;
  }
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name .is_img img {
    max-width: 76px !important;
    max-height: 76px !important;
  }
}
/* On mobile the OJS hamburger occupies the first 44px of the header. */
@media (max-width: 760px) {
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name_wrapper {
    box-sizing: border-box;
    height: auto !important;
    min-height: 79px;
    padding: 0 12px 0 48px;
  }
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name {
    width: 100%;
    min-height: 79px;
    padding: 8px 0 8px 66px !important;
  }
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name .is_img img {
    max-width: 55px !important;
    max-height: 55px !important;
  }
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name::before {
    font-size: clamp(15px, 4vw, 20px);
    letter-spacing: 0;
  }
  body.pkp_page_index:has(.page_index_site).has_site_logo .pkp_structure_head .pkp_site_name::after {
    margin-top: 3px;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1.3;
    max-width: 230px;
  }
}


/* ================================================================
   V6 — portal introduction + accreditation labels, 29 October 2026
   Verified SINTA journal profile listings as of 29 October 2026:
   JAS S3 (profile/6506); JPMA S4 (profile/12628);
   JLLLT S5 (profile/14612). JOMESS status from publisher.

   OJS 3.3.0.22 portal settings in the supplied screenshot do not
   expose an introduction HTML editor. The next section is a purely
   VISUAL CSS-only alternative. Text in CSS pseudo-elements is not
   semantic page content and must not substitute for a real HTML
   introduction if you later install a dedicated site theme.

   These badges follow journals by actual URL, NOT their list order;
   they are display labels, not links. Review if statuses change.
   ================================================================ */

/* Do not show duplicate CSS-generated welcome copy if a real OJS
   about_site section is later configured via a proper site template. */
body.pkp_page_index:has(.page_index_site) .page_index_site:not(:has(> .about_site))::before {
  box-sizing: border-box;
  display: block;
  content: "As-Salam Academic Journal Portal";
  margin: 0;
  padding: clamp(30px, 4.2vw, 55px) clamp(24px, 5vw, 58px) 0;
  border-radius: 20px 20px 0 0;
  background: #0b342e;
  color: #f0d48c;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(27px, 3.7vw, 43px);
  line-height: 1.22;
  letter-spacing: -.025em;
  font-weight: 750;
}
body.pkp_page_index:has(.page_index_site) .page_index_site:not(:has(> .about_site)) > .journals::before {
  box-sizing: border-box;
  display: block;
  content: "Portal publikasi ilmiah Asosiasi Dosen Perguruan Tinggi Islam, Takengon, Aceh Tengah. Empat jurnal dalam bidang pendidikan, pengabdian masyarakat, linguistik, dan kajian sosial.";
  margin: 0 0 39px;
  padding: 14px clamp(24px, 5vw, 58px) clamp(28px, 4vw, 45px);
  border-radius: 0 0 20px 20px;
  background: #0b342e;
  color: #e1eee8;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.8;
  font-weight: 400;
}

/* SINTA labels anchored to the journal's actual URL instead of
   card position, so reordering journals does not swap badges. */
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JAS"]) .body::before,
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JPMA"]) .body::before,
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JLLLT"]) .body::before,
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JOMESS"]) .body::before {
  align-self: flex-start;
  display: inline-block;
  box-sizing: border-box;
  margin: 1px 0 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eff7f2;
  border: 1px solid #cadccd;
  color: #165a46;
  font: 700 11px/1.35 'Segoe UI', Arial, sans-serif;
  letter-spacing: .045em;
}
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JAS"]) .body::before {
  content: "SINTA 3";
}
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JPMA"]) .body::before {
  content: "SINTA 4";
}
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JLLLT"]) .body::before {
  content: "SINTA 5";
}
body.pkp_page_index:has(.page_index_site) .page_index_site .journals > ul > li:has(h3 a[href*="/JOMESS"]) .body::before {
  content: "Belum terakreditasi SINTA";
  background: #f7f7f5;
  border-color: #e1e4df;
  color: #5c655e;
}

@media (max-width: 760px) {
  body.pkp_page_index:has(.page_index_site) .page_index_site:not(:has(> .about_site))::before {
    border-radius: 14px 14px 0 0;
    padding-top: 27px;
  }
  body.pkp_page_index:has(.page_index_site) .page_index_site:not(:has(> .about_site)) > .journals::before {
    border-radius: 0 0 14px 14px;
    margin-bottom: 27px;
  }
}