/* =========================================================================
   CUSTOM THEME — "Commerce & Management" Journal
   Open Journal Systems (OJS) 3.x — Custom CSS
   Author: Senior Web Designer / OJS UI-UX Specialist
   -------------------------------------------------------------------------
   HOW TO USE:
   1. Log in to OJS as Journal Manager / Site Admin.
   2. Go to: Settings → Website → Appearance → Advanced → Custom CSS.
   3. Paste this entire file, or upload it as a file, then Save.
   4. Clear the OJS template cache if styles don't refresh
      (Settings → Website → Advanced → Clear template cache).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. GOOGLE FONTS
   Header/Masthead Title : Racing Sans One (bold, attractive, distinctive)
   Article/Paper Titles  : Passion One      (smart, strong editorial serif-sans)
   Section Headings      : DM Serif Display (elegant scholarly serif)
   Body / Paragraphs     : Neuton           (classic readable serif for long text)
   Nav / Buttons / UI    : Plus Jakarta Sans (semi-bold, crisp UI labels)
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Passion+One:wght@400;700;900&family=Fugaz+One&family=DM+Serif+Display:ital@0;1&family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* -------------------------------------------------------------------------
   2. THEME TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* Core palette — Commerce & Management */
  --cm-navy:            #0f172a;   /* Executive Navy Blue — primary */
  --cm-navy-light:      #1e293b;
  --cm-navy-soft:       #334155;
  --cm-emerald:         #064e3b;   /* Deep Emerald Teal — secondary */
  --cm-emerald-light:   #0d7a5f;
  --cm-bronze:          #d97706;   /* Rich Bronze Accent — CTA / highlight */
  --cm-bronze-light:    #f59e0b;
  --cm-bronze-dark:     #b45309;

  /* Neutrals / background */
  --cm-bg:              #f8fafc;
  --cm-bg-alt:          #f1f5f9;
  --cm-card-bg:         #ffffff;
  --cm-border:          #e2e8f0;
  --cm-text-body:       #1e293b;
  --cm-text-muted:      #64748b;
  --cm-text-inverse:    #f8fafc;

  /* Effects */
  --cm-shadow-sm:  0 4px 15px rgba(15, 23, 42, 0.05);
  --cm-shadow-md:  0 8px 24px rgba(15, 23, 42, 0.09);
  --cm-shadow-lg:  0 14px 40px rgba(15, 23, 42, 0.14);
  --cm-radius:     8px;
  --cm-radius-sm:  6px;
  --cm-radius-lg:  14px;

  /* Fonts */
  --font-title-header:  'Racing Sans One', 'Fugaz One', sans-serif; /* Header masthead */
  --font-title-article: 'Passion One', 'DM Serif Display', serif;   /* Research paper titles */
  --font-heading:       'DM Serif Display', Georgia, serif;         /* Section headings */
  --font-body:          'Neuton', Georgia, serif;                   /* Paragraph / article text */
  --font-ui:            'Plus Jakarta Sans', -apple-system, sans-serif; /* Nav, buttons, meta, labels */

  /* Soft header background pair (attractive, gentle — not heavy navy block) */
  --cm-header-soft-1:   #eef3fb;
  --cm-header-soft-2:   #f6efe4;
  --cm-header-title:    #0d7a5f;   /* fallback solid colour — Deep Emerald (was near-black navy) */
  --cm-header-title-2:  #d97706;   /* gradient partner — Bronze */

  /* Soft footer surface (comfortable to read, not deep dark) */
  --cm-footer-bg-1:     #eef2f7;
  --cm-footer-bg-2:     #f6f3ec;
  --cm-footer-text:     #334155;
  --cm-footer-heading:  #0f172a;
}

/* Global box-sizing reset — prevents sidebar cards from overflowing their
   column and crossing the layout separator line */
*, *::before, *::after{
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   3. BASE / RESET
   ------------------------------------------------------------------------- */
body{
  font-family: var(--font-body);
  font-size: 1.08rem;      /* Neuton reads small at 16px; nudge it up */
  background-color: var(--cm-bg);
  color: var(--cm-text-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* UI chrome (menus, buttons, labels, meta) stays on the sans-serif for
   crispness — only long-form reading text should sit on Neuton */
button, input, select, textarea,
.pkp_navigation_primary_row, .pkp_navigation_user,
.entry_actions, .pkp_form label, .label,
.obj_article_summary .meta, .obj_article_summary .authors{
  font-family: var(--font-ui);
}

/* Global justified body text across article pages, abstracts, blocks */
p,
.pkp_structure_main p,
.page_article p,
.abstract,
.obj_article_details .item p,
.description,
.value,
.pkp_content_note,
.cmp_article_summary p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  color: var(--cm-text-body);
}

a{
  color: var(--cm-emerald);
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover{ color: var(--cm-bronze); }

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY — HEADINGS & TITLES
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5,
.page_title,
.pkp_page_title{
  font-family: var(--font-heading);
  font-weight: 400; /* DM Serif Display looks best un-bolded, we add weight via letter-spacing/size */
  color: var(--cm-navy);
  letter-spacing: 0.04em;
  line-height: 1.25;
}

h1{
  font-size: 2.15rem;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

h2, h3{
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}

/* Journal masthead / title — bold racing-style display face on a soft header */
.journal_title,
.pkp_site_name_wrapper,
.page_index .journal_description h1,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name a{
  font-family: var(--font-title-header) !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--cm-header-title);              /* fallback — never plain black */
  background-image: linear-gradient(100deg, var(--cm-header-title) 0%, var(--cm-header-title-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Accent underline beneath section headers */
h1::after,
h2::after,
.pkp_structure_main > h2::after,
.page_index h2::after,
.sidebarHeader::after{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--cm-bronze) 0%, var(--cm-emerald) 100%);
  border-radius: 3px;
}

.pkp_structure_head .pkp_site_name a{
  font-size: 2.3rem;
  color: var(--cm-header-title);
  text-shadow: none;
}

/* -------------------------------------------------------------------------
   5. SITE HEADER — soft, attractive light background (not a heavy block)
   ------------------------------------------------------------------------- */
.pkp_structure_head,
#headerNavigationContainer,
.pkp_head_wrapper{
  background-color: var(--cm-header-soft-1);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(217,119,6,0.06) 0, transparent 45%),
    radial-gradient(circle at 88% 15%, rgba(13,122,95,0.07) 0, transparent 45%),
    linear-gradient(120deg, var(--cm-header-soft-1) 0%, var(--cm-header-soft-2) 100%);
  border-bottom: 2px solid var(--cm-border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  padding: 1.1rem 0;
}

/* Generic links inside the header (description links, etc.) — soft navy,
   NOT the journal title (styled separately below with an attractive
   gradient so it never renders in flat black). */
.pkp_structure_head a{
  color: var(--cm-navy-soft);
}

/* Journal masthead title — attractive emerald→bronze gradient text,
   with a solid emerald fallback for browsers without background-clip
   support. Deliberately overrides the generic rule above via higher
   selector specificity, so the title is never plain black/navy. */
.pkp_structure_head .pkp_site_name a{
  color: var(--cm-header-title);
  background-image: linear-gradient(100deg, var(--cm-header-title) 0%, var(--cm-header-title-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pkp_structure_head .pkp_site_name_wrapper .journal_description,
.pkp_structure_head .description{
  color: var(--cm-text-muted) !important;
  font-family: var(--font-ui);
  font-style: italic;
  text-align: justify;
}

/* -------------------------------------------------------------------------
   6. NAVIGATION — button-style menu items
   ------------------------------------------------------------------------- */
.pkp_navigation_primary_row,
#navigationPrimary,
.cmp_navigation_wrapper{
  background: transparent;
}

.pkp_navigation_primary_row ul.menu,
#navigationPrimary ul.menu,
.pkp_nav_list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;
}

.pkp_navigation_primary_row ul.menu > li > a,
#navigationPrimary ul.menu > li > a,
.pkp_nav_list > li > a,
nav.pkp_navigation_primary a{
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--cm-navy);
  background-color: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--cm-radius-sm);
  padding: 0.55rem 1.1rem;
  display: inline-block;
  transition: all 0.25s ease;
}

/* Hover: smooth color shift + elevation + shadow */
.pkp_navigation_primary_row ul.menu > li > a:hover,
#navigationPrimary ul.menu > li > a:hover,
.pkp_nav_list > li > a:hover,
nav.pkp_navigation_primary a:hover{
  background-color: var(--cm-bronze);
  border-color: var(--cm-bronze);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
}

/* Active page highlighted clearly */
.pkp_navigation_primary_row ul.menu > li.current > a,
.pkp_navigation_primary_row ul.menu > li.active > a,
#navigationPrimary ul.menu > li.current > a,
.pkp_nav_list > li.current > a,
nav.pkp_navigation_primary a.active,
nav.pkp_navigation_primary a[aria-current="page"]{
  background-color: var(--cm-bronze);
  border-color: var(--cm-bronze-dark);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
}

/* User navigation (login/register/dashboard) */
.pkp_navigation_user ul.menu li a,
#navigationUser a{
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--cm-navy);
  background-color: rgba(15,23,42,0.05);
  border-radius: var(--cm-radius-sm);
  padding: 0.4rem 0.9rem;
  transition: all 0.2s ease;
}
.pkp_navigation_user ul.menu li a:hover,
#navigationUser a:hover{
  background-color: var(--cm-emerald-light);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--cm-shadow-sm);
}

/* -------------------------------------------------------------------------
   7. MAIN BODY BACKGROUND — library photo, softly overlaid for readability
   NOTE: This is an Unsplash+ (premium licensed) photo. For production use,
   download it via a valid Unsplash+ subscription and self-host the file
   (e.g. /images/library-bg.jpg) rather than hotlinking plus.unsplash.com.
   ------------------------------------------------------------------------- */
.pkp_structure_main,
.pkp_structure_content{
  position: relative;
  background-color: var(--cm-bg);
  background-image:
    linear-gradient(180deg, rgba(248,250,252,0.93) 0%, rgba(248,250,252,0.96) 55%, var(--cm-bg) 100%),
    url("https://plus.unsplash.com/premium_photo-1677567996070-68fa4181775a?fm=jpg&q=80&w=2200&auto=format&fit=crop");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  padding: 1.5rem 1rem;
}

/* Contain the front-end page to a comfortable, compact reading width
   instead of stretching edge-to-edge — reads smarter on wide screens */
.pkp_structure_main{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure every direct content region sits above the photo layer */
.pkp_structure_main > *,
.pkp_structure_content > *{
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   7b. LAYOUT CONTAINMENT FIX — stop sidebar cards crossing the column
   divider. Root cause: box-sizing + block padding/margins pushing the
   card's rendered width past the sidebar column's boundary. Forcing
   border-box + 100% width on every block keeps padding/border INSIDE
   the column instead of adding to it.
   ------------------------------------------------------------------------- */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_content{
  min-width: 0; /* allow flex/grid children to shrink instead of overflow */
}

/* Force a clean two-column flex layout with real breathing room between
   content and sidebar — this is what actually stops the overlap, since
   floated/fixed-width columns with no gap will collide at narrower
   viewport widths or when card padding pushes past the column edge. */
.pkp_structure_main{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.75rem;
}

.pkp_structure_content{
  flex: 1 1 66%;
  min-width: 0;
}

/* Sidebar shrunk down to a slimmer, smarter column */
.pkp_structure_sidebar{
  flex: 0 1 240px;
  min-width: 210px;
  max-width: 250px;
  overflow: hidden;
}

/* Stack sidebar under content on narrower screens instead of squeezing
   both columns until they overlap */
@media (max-width: 900px){
  .pkp_structure_main{
    flex-direction: column;
  }
  .pkp_structure_sidebar{
    max-width: 100%;
    flex-basis: auto;
  }
}

.pkp_block,
.sidebar .pkp_block,
.pkp_content_panel{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box; /* padding/border counted inside the width, not added to it */
}

/* -------------------------------------------------------------------------
   8. CARDS — sidebar blocks, article lists, CTA cards
   ------------------------------------------------------------------------- */
.pkp_block,
.sidebar .pkp_block,
.obj_article_summary,
.cmp_article_summary,
.pkp_form_settings,
.page_index .obj_issue_summary,
.pkp_content_panel,
.item.description{
  background-color: var(--cm-card-bg);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow-sm);
  padding: 1.15rem;
  margin-bottom: 1.15rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.obj_article_summary:hover,
.pkp_block:hover{
  box-shadow: var(--cm-shadow-md);
  transform: translateY(-2px);
}

.pkp_block .title,
.sidebarHeader,
.pkp_block h2,
.pkp_block h3{
  font-family: var(--font-heading);
  color: var(--cm-navy);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--cm-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Article list titles */
.obj_article_summary .title,
.obj_article_summary .article_title a{
  font-family: var(--font-title-article);
  font-weight: 400;
  color: var(--cm-navy);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.obj_article_summary .title:hover,
.obj_article_summary .article_title a:hover{
  color: var(--cm-bronze);
}

.obj_article_summary .authors,
.obj_article_summary .meta{
  font-family: var(--font-ui);
  font-weight: 500;
  font-style: italic;
  color: var(--cm-emerald);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* Full article / abstract page — title & author byline */
.page_article .article_title,
.obj_article_details .title,
h1.page_title{
  font-family: var(--font-title-article);
  font-weight: 400;
  color: var(--cm-navy);
  font-size: 2rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.page_article .authors,
.obj_article_details .authors,
.page_article .item.authors .value,
ul.authors{
  font-family: var(--font-ui);
  font-weight: 600;
  font-style: italic;
  color: var(--cm-emerald);
  font-size: 1.05rem;
  letter-spacing: 0.015em;
}

/* -------------------------------------------------------------------------
   9. BUTTONS — general + high-conversion "Make a Submission"
   ------------------------------------------------------------------------- */
.pkp_button,
button.pkp_button,
a.pkp_button{
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--cm-radius-sm);
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--cm-border);
  background-color: #fff;
  color: var(--cm-navy);
  transition: all 0.25s ease;
  box-shadow: var(--cm-shadow-sm);
}
.pkp_button:hover{
  transform: translateY(-2px);
  box-shadow: var(--cm-shadow-md);
}

.pkp_button.pkp_button_primary,
.pkp_button.submitFormButton,
a.pkp_button.pkp_button_offset,
.pkp_button.pkp_button_offset,
.entry_actions .pkp_button.pkp_button_offset,
a[href*="submission"].pkp_button{
  background: linear-gradient(135deg, var(--cm-bronze) 0%, var(--cm-bronze-dark) 100%);
  color: #ffffff !important;
  border: none;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border-radius: var(--cm-radius);
  box-shadow: 0 8px 22px rgba(217, 119, 6, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pkp_button.pkp_button_primary:hover,
.pkp_button.submitFormButton:hover,
a.pkp_button.pkp_button_offset:hover,
a[href*="submission"].pkp_button:hover{
  background: linear-gradient(135deg, var(--cm-bronze-light) 0%, var(--cm-bronze) 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.45);
}

/* -------------------------------------------------------------------------
   10. FOOTER — soft, comfortable, easy-to-read (light surface, dark text)
   ------------------------------------------------------------------------- */
.pkp_structure_footer_wrapper,
#footer{
  background-color: var(--cm-footer-bg-1);
  background-image: linear-gradient(160deg, var(--cm-footer-bg-1) 0%, var(--cm-footer-bg-2) 100%);
  color: var(--cm-footer-text);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.9;
  padding: 3rem 1.5rem 2rem;
  border-top: 2px solid var(--cm-border);
}
.pkp_structure_footer_wrapper p,
#footer p{
  color: var(--cm-footer-text);
  text-align: justify;
}
.pkp_structure_footer_wrapper h2,
.pkp_structure_footer_wrapper h3,
#footer h2,
#footer h3{
  color: var(--cm-footer-heading);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
}
.pkp_structure_footer_wrapper a,
#footer a{
  color: var(--cm-bronze-dark);
}
.pkp_structure_footer_wrapper a:hover,
#footer a:hover{
  color: var(--cm-emerald);
}

/* -------------------------------------------------------------------------
   11. TABLES (e.g., Table of Contents, Issue archives)
   ------------------------------------------------------------------------- */
table{
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--cm-radius);
  overflow: hidden;
  box-shadow: var(--cm-shadow-sm);
}
table th{
  background-color: var(--cm-navy);
  color: #fff;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  padding: 0.75rem 1rem;
  text-align: left;
}
table td{
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cm-border);
  text-align: justify;
}
table tr:nth-child(even){ background-color: var(--cm-bg-alt); }

/* -------------------------------------------------------------------------
   12. BREADCRUMBS / MISC ACCENTS
   ------------------------------------------------------------------------- */
.pkp_page_content_wrapper .breadcrumb,
.cmp_breadcrumbs{
  color: var(--cm-text-muted);
  font-size: 0.85rem;
}
.pkp_page_content_wrapper .breadcrumb a{
  color: var(--cm-emerald);
}

blockquote{
  border-left: 4px solid var(--cm-bronze);
  background-color: var(--cm-bg-alt);
  padding: 1rem 1.5rem;
  border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
  text-align: justify;
  font-style: italic;
  color: var(--cm-navy);
}

/* -------------------------------------------------------------------------
   13. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------------- */
@media (max-width: 768px){
  h1{ font-size: 1.8rem; }
  .pkp_navigation_primary_row ul.menu,
  #navigationPrimary ul.menu,
  .pkp_nav_list{
    flex-direction: column;
    align-items: stretch;
  }
  .pkp_navigation_primary_row ul.menu > li > a,
  #navigationPrimary ul.menu > li > a{
    text-align: center;
  }
  .pkp_structure_main,
  .pkp_structure_content{
    background-attachment: scroll; /* fixed backgrounds render poorly on mobile Safari */
  }
}

/* ========================================================================= 
   END OF FILE
   ========================================================================= */