/* IAI SUSHA — portal OJS 3.3, revised for Sanguline header.
   Upload as Site Style Sheet, not Journal Style Sheet.
   Scoped to the journal directory page; no template changes required. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

body:has(.page_index_site) {
  --iai-green: #096236;
  --iai-dark: #063e27;
  --iai-light: #eaf4ec;
  --iai-gold: #e7c76d;
  background: #eaf4ec;
  color: #234331;
  font-family: 'Montserrat', sans-serif;
}
body:has(.page_index_site) .pkp_structure_page { background: transparent; }
body:has(.page_index_site) .pkp_structure_head {
  background: #fff;
  border-bottom: 5px solid var(--iai-green);
  box-shadow: 0 4px 20px #063e2709;
}
body:has(.page_index_site) .pkp_head_wrapper {
  max-width: 1200px;
  margin: auto;
}
body:has(.page_index_site) .pkp_site_name { padding: 25px 0; }
body:has(.page_index_site) .pkp_site_name .is_img {
  display: block;
  padding: 0;
}
body:has(.page_index_site) .pkp_site_name .is_img img {
  display: block;
  width: 100%;
  max-width: 1078px;
  height: auto;
  max-height: none;
  object-fit: contain;
}
body:has(.page_index_site) .pkp_navigation_user > li > a {
  color: var(--iai-green);
  font-family: inherit;
  font-weight: 700;
}
body:has(.page_index_site) .pkp_navigation_user > li > a:hover {
  background: var(--iai-light);
  color: var(--iai-dark);
}
body:has(.page_index_site) .pkp_navigation_primary > li > a {
  color: var(--iai-green);
}
body:has(.page_index_site) .pkp_site_nav_toggle { color: var(--iai-green); }
body:has(.page_index_site) .pkp_structure_content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px 64px;
  box-sizing: border-box;
}
body:has(.page_index_site) .pkp_structure_main {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
body:has(.page_index_site) .pkp_structure_main::before,
body:has(.page_index_site) .pkp_structure_main::after { display: none; }
.page_index_site,
.page_index_site * { box-sizing: border-box; }
.page_index_site { margin: 0; }
.page_index_site .about_site {
  position: relative;
  overflow: hidden;
  margin: 0 0 38px;
  padding: clamp(28px, 5vw, 55px);
  border: 1px solid #ffffff15;
  border-radius: 22px;
  background: radial-gradient(ellipse at top right, #e7c76d22, transparent 60%),
    linear-gradient(120deg, #063e27, #096236);
  color: #fff;
  box-shadow: 0 15px 35px #063e2710;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.9;
}
.page_index_site .about_site::after {
  content: '';
  display: block;
  width: 70px;
  height: 4px;
  margin-top: 25px;
  border-radius: 4px;
  background: var(--iai-gold);
}
.page_index_site .about_site p { margin: 0 0 12px; line-height: inherit; }
.page_index_site .about_site a { color: #f3d995; text-decoration: underline; }
.page_index_site .journals { margin: 0; }
.page_index_site .journals > h2 {
  margin: 0 0 25px;
  padding: 0 0 0 16px;
  border-left: 4px solid var(--iai-green);
  color: var(--iai-dark);
  font-family: inherit;
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.7px;
}
.page_index_site .journals > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page_index_site .journals > ul::before,
.page_index_site .journals > ul::after { content: none; }
.page_index_site .journals > ul > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d5e4d9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px #063e2706;
  transition: transform .2s ease, box-shadow .2s ease;
}
.page_index_site .journals > ul > li::before,
.page_index_site .journals > ul > li::after { content: none; }
.page_index_site .journals .thumb {
  float: none;
  width: 100%;
  margin: 0;
  padding: 24px;
  border-bottom: 1px solid #e3ece5;
  background: linear-gradient(145deg, #f4f8f3, #e5eee7);
}
.page_index_site .journals .thumb a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 265px;
}
.page_index_site .journals .thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 265px;
  object-fit: contain;
  filter: drop-shadow(5px 9px 7px #163b2925);
}
.page_index_site .journals .body,
.page_index_site .journals .has_thumb .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  float: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 24px;
}
.page_index_site .journals h3 {
  margin: 0 0 15px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -.3px;
}
.page_index_site .journals h3 a { color: var(--iai-dark); text-decoration: none; }
.page_index_site .journals h3 a:hover { color: var(--iai-green); text-decoration: underline; }
.page_index_site .journals .description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 24px;
  color: #607267;
  font-size: 12px;
  line-height: 1.9;
}
.page_index_site .journals .description p { margin: 0 0 8px; font-size: inherit; line-height: inherit; }
/* Broken browser-session image in the existing Al-Hasyimiyah description.
   Re-upload that image in OJS to fix the underlying content. */
.page_index_site .description img[src^='blob:'] { display: none; }
.page_index_site .journals .links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: auto 0 0;
  padding: 19px 0 0;
  border-top: 1px solid #e8eeea;
  list-style: none;
}
.page_index_site .journals .links li { margin: 0; padding: 0; }
.page_index_site .journals .links li::before,
.page_index_site .journals .links li::after { content: none; }
.page_index_site .journals .links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--iai-green);
  border-radius: 8px;
  background: var(--iai-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.page_index_site .journals .links .current a { background: #fff; color: var(--iai-green); border-color: #c9ddcf; }
.page_index_site .journals .links a:hover { background: var(--iai-dark); border-color: var(--iai-dark); color: #fff; }
body:has(.page_index_site) .pkp_structure_footer_wrapper { background: #fff; border-top: 1px solid #d4e3d8; }
body:has(.page_index_site) .pkp_structure_footer { max-width: 1152px; margin: auto; padding: 24px; }
body:has(.page_index_site) .pkp_brand_footer { padding: 10px 0; }
body:has(.page_index_site) .pkp_brand_footer img { width: 150px; max-width: 100%; height: auto; }
body:has(.page_index_site) a:focus-visible,
body:has(.page_index_site) button:focus-visible { outline: 3px solid #b58d26; outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page_index_site .journals > ul > li:hover { transform: translateY(-4px); box-shadow: 0 15px 30px #063e2712; }
}
@media (max-width: 991px) {
  .page_index_site .journals > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.page_index_site) .pkp_site_name { padding: 15px 0; }
}
@media (max-width: 640px) {
  body:has(.page_index_site) .pkp_structure_content { padding: 22px 16px 40px; }
  .page_index_site .about_site { border-radius: 15px; padding: 25px; margin-bottom: 28px; font-size: 15px; }
  .page_index_site .journals > ul { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .page_index_site .journals .thumb a { height: 235px; }
  .page_index_site .journals .thumb img { max-height: 235px; }
  .page_index_site .journals .body,
  .page_index_site .journals .has_thumb .body { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .page_index_site .journals > ul > li { transition: none; }
}

/* Fix Sanguline's absolutely positioned mobile logo and fixed wrapper widths. */
body:has(.page_index_site) #headerNavigationContainer .pkp_site_name_wrapper {
  width: 100% !important; max-width: 100% !important; min-width: 0;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_site_name {
  position: static !important; inset: auto !important;
  height: auto !important; max-height: none !important;
  white-space: normal !important; overflow: visible;
  transform: none !important;
}

/* Hero content entered as ordinary paragraphs in the restricted site editor. */
.page_index_site .about_site {
  padding: clamp(26px, 5vw, 60px);
  background: radial-gradient(ellipse at 100% 0, #e7c76d26, transparent 60%), linear-gradient(120deg, #063e27, #096236);
}
.page_index_site .about_site::before {
  content: 'PUBLIKASI ILMIAH · IAI SUSHA SIAK';
  display: inline-block; margin-bottom: 24px; padding: 7px 13px;
  border: 1px solid #e7c76d70; border-radius: 30px;
  background: #e7c76d12; color: #f0d487;
  font-size: 11px; font-weight: 700; line-height: 1.8; letter-spacing: 1.4px;
}
.page_index_site .about_site > p:first-child {
  max-width: 900px; margin: 0 0 22px; color: #fff;
  font-family: inherit; font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 800; line-height: 1.2; letter-spacing: -1px;
}
.page_index_site .about_site > p:not(:first-child) {
  max-width: 760px; margin: 0 0 18px; color: #e2eee6;
  font-size: clamp(14px, 1.6vw, 17px); font-weight: 400; line-height: 1.85;
}
.page_index_site .about_site > p a {
  display: inline-block; margin: 8px 8px 0 0; padding: 12px 20px;
  border: 1px solid #e7c76d; border-radius: 9px;
  background: #e7c76d; color: #173d2a;
  font-size: 14px; font-weight: 700; line-height: 1.6; text-decoration: none;
}
.page_index_site .about_site > p a:hover { background: #f6dda0; color: #063e27; }

/* Responsive portal header. Keep the three existing links visible on mobile. */
body:has(.page_index_site) #headerNavigationContainer {
  border-top: 5px solid #096236;
  border-bottom: 0;
  padding: 0 0 18px;
  background: #fff;
}
body:has(.page_index_site) #headerNavigationContainer * { box-sizing: border-box; }
body:has(.page_index_site) #headerNavigationContainer .pkp_head_wrapper {
  width: 100%; max-width: 1200px; padding: 0 24px; margin: 0 auto;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_site_name_wrapper {
  display: block; position: relative; min-height: 0; height: auto; padding: 0; margin: 0;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_site_name {
  float: none; width: 100%; max-width: none; min-height: 0;
  margin: 0; padding: 24px 0; text-align: left;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_site_name a.is_img {
  display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; padding: 0;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_site_name a.is_img img {
  display: block !important; width: 100% !important; height: auto !important;
  max-width: 100% !important; max-height: none !important;
  margin: 0; padding: 0; object-fit: contain;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_site_nav_toggle { display: none !important; }
body:has(.page_index_site) #headerNavigationContainer .pkp_site_nav_menu {
  display: flex !important; position: relative !important; inset: auto !important;
  align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  width: 100%; height: auto !important; max-height: none !important;
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  overflow: visible; margin: 0; padding: 12px;
  background: #063e27; border: 1px solid #155b3c; border-radius: 14px;
  box-shadow: 0 8px 22px #063e2715;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_primary_row,
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_primary_wrapper,
body:has(.page_index_site) #headerNavigationContainer .pkp_nav_left_group {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  position: static; float: none; width: auto; min-width: 0; margin: 0; padding: 0; background: transparent;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_user_wrapper {
  position: static !important; float: none; width: auto; margin: 0 0 0 auto;
  padding: 0; background: transparent;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_primary,
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_user {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  position: static; float: none; width: auto; margin: 0; padding: 0; list-style: none;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_primary:empty { display: none; }
body:has(.page_index_site) #headerNavigationContainer .pkp_nav_list > li {
  float: none; margin: 0; padding: 0; border: 0;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_nav_home,
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_primary > li > a,
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_user > li > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin: 0; padding: 10px 17px;
  border: 1px solid #ffffff30; border-radius: 9px;
  background: transparent; color: #fff !important;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.5;
  text-decoration: none; white-space: normal;
}
body:has(.page_index_site) #headerNavigationContainer .nav_home_label { display: inline; }
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_user > li > a[href$='/login'] {
  background: #e7c76d; border-color: #e7c76d; color: #183d2c !important;
}
body:has(.page_index_site) #headerNavigationContainer .pkp_nav_home:hover,
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_primary > li > a:hover,
body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_user > li > a:hover {
  background: #eaf4ec; border-color: #eaf4ec; color: #063e27 !important;
}
@media (max-width: 640px) {
  body:has(.page_index_site) #headerNavigationContainer .pkp_head_wrapper { padding: 0 12px; }
  body:has(.page_index_site) #headerNavigationContainer .pkp_site_name { padding: 20px 0; }
  body:has(.page_index_site) #headerNavigationContainer .pkp_site_nav_menu { padding: 8px; gap: 6px; border-radius: 10px; }
  body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_user { gap: 6px; }
  body:has(.page_index_site) #headerNavigationContainer .pkp_nav_home,
  body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_primary > li > a,
  body:has(.page_index_site) #headerNavigationContainer .pkp_navigation_user > li > a {
    padding: 10px 12px; font-size: 12px;
  }
}