/* =====================================================================
   Summit Theme — compiled CSS
   Summit Multidisciplinary International Journals Ltd
   Paste this whole file into:
   Website Settings > Website > Appearance > "Additional CSS" field
   ===================================================================== */

/* ---------------------------------------------------------------------
   Base type
   --------------------------------------------------------------------- */
body, .pkp_structure_page {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #1B2430;
	background: #F4F6FA;
}

h1, h2, h3, h4, h5,
.page_title, .pkp_page_title, .journal_title {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 600;
	color: #12294B;
}

a { color: #0E9594; }
a:hover { color: #0A6666; }

/* ---------------------------------------------------------------------
   Header / navigation
   --------------------------------------------------------------------- */
.pkp_structure_head,
.pkp_head_wrapper,
#headerNavigationContainer {
	background: #FFFFFF;
	border-bottom: 1px solid #E3E8EF;
}

.pkp_site_name_wrapper .pkp_site_name,
.pkp_head_title,
.pkp_head_title a {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 700;
	color: #12294B;
}

.pkp_navigation_primary a,
.cmp_navigation_menu a {
	font-weight: 500;
	color: #1B2430;
}
.pkp_navigation_primary a:hover,
.cmp_navigation_menu a:hover { color: #0E9594; }

/* A dedicated navy banner strip behind the primary nav, for journals
   that want the "dark header bar" look from the reference site. Add
   class="summit-nav-dark" to the theme's nav wrapper if your OJS
   version lets you add a body/nav class; otherwise this is optional. */
.summit-nav-dark {
	background: #12294B;
}
.summit-nav-dark a { color: #fff; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.pkp_button,
.cmp_button,
button.pkp_button,
input.pkp_button,
.summit-btn {
	border-radius: 6px;
	font-weight: 600;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pkp_button_primary,
.summit-btn-primary {
	background: #0E9594;
	border-color: #0E9594;
	color: #fff !important;
}
.pkp_button_primary:hover,
.summit-btn-primary:hover { background: #0A706F; }

.summit-btn-outline {
	background: transparent;
	border: 2px solid #fff;
	color: #fff !important;
}
.summit-btn-outline:hover { background: rgba(255,255,255,0.12); }

/* =====================================================================
   Homepage hero / cards — used by snippets/homepage-hero.html
   (paste that file into Website Settings > Setup > Look >
   "Additional content", see README.md)
   ===================================================================== */

.summit-hero {
	background: linear-gradient(135deg, #12294B 0%, #0A172A 100%);
	color: #fff;
	border-radius: 10px;
	padding: 2.5rem 2rem;
	margin-bottom: 2rem;
	position: relative;
	overflow: hidden;
}

.summit-hero-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.summit-hero-main { flex: 1 1 380px; min-width: 280px; }

.summit-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.summit-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.25);
}
.summit-badge.is-accent { background: #0E9594; border-color: #0E9594; }

.summit-hero h1 {
	font-family: 'Newsreader', Georgia, serif;
	color: #fff;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	margin: 0.25rem 0 0.5rem;
}

.summit-hero p.summit-tagline {
	color: rgba(255,255,255,0.85);
	font-size: 1.05rem;
	max-width: 46ch;
	margin-bottom: 1.25rem;
}

.summit-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.summit-hero-actions a {
	padding: 0.65rem 1.25rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* The 2x2 grid of coloured info cards (top right of the hero) */
.summit-info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(140px, 1fr));
	gap: 0.75rem;
	flex: 0 0 auto;
}

.summit-info-card {
	border-radius: 8px;
	padding: 1rem;
	color: #fff;
	text-decoration: none;
	min-height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-weight: 600;
	font-size: 0.9rem;
	transition: transform .15s ease;
}
.summit-info-card:hover { transform: translateY(-2px); color: #fff; }

.summit-info-card.is-blue   { background: #1D6FA5; }
.summit-info-card.is-green  { background: #2F9E44; }
.summit-info-card.is-amber  { background: #E8720C; }
.summit-info-card.is-violet { background: #6C4EE3; }

/* The row of four big stat cards below the hero */
.summit-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.summit-stat-card {
	background: #FFFFFF;
	border-radius: 10px;
	padding: 1.25rem;
	border-top: 4px solid #1D6FA5;
	box-shadow: 0 1px 3px rgba(16,24,40,0.06);
}

.summit-stat-card.is-blue   { border-top-color: #1D6FA5; }
.summit-stat-card.is-green  { border-top-color: #2F9E44; }
.summit-stat-card.is-amber  { border-top-color: #E8720C; }
.summit-stat-card.is-violet { border-top-color: #6C4EE3; }

.summit-stat-number {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 2.2rem;
	font-weight: 700;
	color: #12294B;
	line-height: 1;
}

.summit-stat-label { color: #5B6472; font-size: 0.9rem; margin: 0.35rem 0 0.75rem; }

.summit-stat-card a {
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

/* =====================================================================
   Sidebar menu — used by snippets/sidebar-menu.html
   (paste into a Custom Block, see README.md)
   ===================================================================== */

.summit-sidebar-block {
	background: #FFFFFF;
	border-radius: 10px;
	border: 1px solid #E3E8EF;
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.summit-sidebar-block h3 {
	background: #12294B;
	color: #fff;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	margin: 0;
}

.summit-sidebar-block-body { padding: 0.75rem; }

.summit-menu-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0.9rem;
	margin-bottom: 0.5rem;
	border-radius: 6px;
	color: #fff !important;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}
.summit-menu-btn:last-child { margin-bottom: 0; }

.summit-menu-btn.is-blue   { background: #1D6FA5; }
.summit-menu-btn.is-green  { background: #2F9E44; }
.summit-menu-btn.is-amber  { background: #E8720C; }
.summit-menu-btn.is-violet { background: #6C4EE3; }
.summit-menu-btn.is-teal   { background: #0E9594; }

.summit-accredit-box {
	text-align: center;
	padding: 1rem;
}
.summit-accredit-box img { max-width: 100%; height: auto; margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------------
   Article / issue cards, announcements
   --------------------------------------------------------------------- */
.cmp_article_summary,
.obj_article_summary {
	background: #FFFFFF;
	border: 1px solid #E3E8EF;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

.announcement,
.cmp_announcement {
	border-left: 4px solid #0E9594;
	border-radius: 0 10px 10px 0;
	background: #FFFFFF;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
#footer, .pkp_structure_footer {
	background: #12294B;
	color: rgba(255,255,255,0.85);
}
#footer a, .pkp_structure_footer a { color: #fff; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
	.summit-hero-inner { flex-direction: column; }
	.summit-info-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
}

/* ---------------------------------------------------------------------
   Google Fonts (the theme plugin normally injects these — since you're
   using this as plain CSS instead of the plugin, the @import below
   pulls them in directly)
   --------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');