/* ============ JSII-style restyle — v3 (header/nav alignment fixed) ============ */

/* 0. Fonts (must stay on the first line) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

/* 1. Palette */
:root {
  --maroon: #6d0000;
  --maroon-dark: #560000;
  --gold: #c9a227;
  --paper: #f7f8fa;
  --ink: #333333;
  --muted: #6b7280;
}

/* 2. Base */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
a { color: var(--maroon); }

/* 3. Maroon header band — force centering on the elements themselves */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name {
  text-align: center !important;
}
.pkp_structure_head {
  background: var(--maroon);
  padding: 3.5rem 1rem 2rem;
}

/* Title (text version) */
.pkp_site_name a, .pkp_site_name {
  font-family: 'Playfair Display', Georgia, serif;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  text-decoration: none;
}
/* If uploading a logo ever HIDES the text title, uncomment this to recreate it:
.pkp_structure_head::before {
  content: "Journal of Innovation and Emerging Digital Technologies";
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  line-height: 1.15;
}
*/

/* Center the uploaded logo FILE under the title */
.pkp_structure_head img {
  display: block;
  margin: 1.75rem auto 1.25rem;
  max-height: 120px;
  width: auto;
}

/* Tagline: attached to the INNER wrapper so it sits ABOVE the menu.
   (Your nav lives inside .pkp_structure_head, which is why head::after
   rendered below the menu last time.) */
.pkp_structure_head::after { content: none; }
.pkp_head_wrapper::after {
  content: "UNIVERSITI PUTRA MALAYSIA \2022  SUSTAINABLE COMPUTING INNOVATION";
  display: block;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: .8rem;
  margin: 1.5rem 0 0;
}
/* FALLBACK: if the tagline still appears under the menu, comment out the
   .pkp_head_wrapper::after rule above and use this one instead:
.pkp_site_name::after {
  content: "UNIVERSITI PUTRA MALAYSIA \2022  SUSTAINABLE COMPUTING INNOVATION";
  display: block;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: .8rem;
  margin-top: 1.25rem;
}
*/

/* 4. Navigation ROW: full-width gray + gold lines on the row itself.
   :not() protects the user/login nav (top right) from being grayed. */
.pkp_structure_head nav:not(.pkp_navigation_user),
.pkp_navigation_primary_wrapper,
nav.pkp_navigation_primary {
  background: #f1f2f3 !important;
  border-top: 5px solid var(--gold) !important;
  border-bottom: 1px solid var(--gold) !important;
}

/* Menu list: centered, transparent, no borders of its own */
.pkp_navigation_primary ul,
ul.pkp_navigation_primary {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

/* Links: dark on gray (!important beats the theme's white-on-crimson) */
.pkp_navigation_primary li a,
.pkp_navigation_primary a {
  color: #3a3a3a !important;
  background: transparent !important;
  font-weight: 600;
  font-size: .95rem;
  padding: 1.1rem 1rem;
  text-decoration: none;
}
.pkp_navigation_primary li.current > a,
.pkp_navigation_primary a:hover,
.pkp_navigation_primary a:focus {
  color: #111111 !important;
  box-shadow: inset 0 -4px 0 var(--gold);
}

/* Search toggle on the right of the nav row */
.pkp_search a,
.pkp_search button,
a.pkp_search_link {
  color: #333333 !important;
}

/* 5. Homepage: full width (hide sidebar on front page only) */
.pkp_page_index .pkp_structure_sidebar { display: none; }
.pkp_page_index .pkp_structure_main { width: 100%; float: none; margin: 0; }

/* 6. Homepage hero: cover card + text + CTA button */
.jsii-hero {
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  max-width: 1080px;
  margin: 3rem auto 4rem;
  padding: 0 1.25rem;
}
.jsii-cover-card {
  background: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.jsii-cover-card img { display: block; width: 100%; height: auto; }
.jsii-kicker {
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
}
.jsii-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--maroon);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.jsii-blurb { color: var(--muted); line-height: 1.75; margin: 0 0 1.75rem; }
.jsii-cta {
  display: inline-block;
  background: var(--maroon);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(109, 0, 0, 0.35);
}
.jsii-cta:hover { background: var(--maroon-dark); color: #ffffff; }

@media (max-width: 900px) {
  .jsii-hero { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .jsii-cover-card { max-width: 420px; margin: 0 auto; }
}

/* 7. Optional: maroon footer to close the loop */
.pkp_structure_footer { background: var(--maroon); color: #ffffff; }
.pkp_structure_footer a { color: #ffffff; }