/**
 * plugins/themes/jbmhTheme/styles/jbmh.css
 *
 * Design-token stylesheet for the JBMH theme, implementing the approved
 * mockup-v2-full.html spec. Values below (colors, sizes, spacing) are
 * copied exactly from that file's <style> block. Selectors necessarily
 * differ from the mockup's because this targets real OJS/pkp-lib markup
 * (core template classnames) plus a handful of new wrapper classes added
 * in this theme's own header.tpl / footer.tpl / indexJournal.tpl /
 * article_summary.tpl overrides (all prefixed jbmh_).
 *
 * Loads after the parent "default" theme's compiled stylesheet, so equal-
 * specificity rules here win by cascade order (no !important needed except
 * where noted).
 */

/* ---------------------------------------------------------------------
   Design tokens (kept as a comment for reference — mockup-v2-full.html):
   maroon    #672923
   red       #de322b
   topstrip  linear-gradient(90deg,#8a4a1f,#c67a2a,#8a4a1f)
   banner    linear-gradient(135deg,#4a3a28,#241c14)
   text      #333 / #222   muted #888 / #777   border #eee / #ddd
   heading font: Merriweather 700 | body font: Inter 400/500/600
   mobile breakpoint: 820px
   --------------------------------------------------------------------- */

/* ============ Fonts ============ */
body,
.jbmh_page {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============ Page shell ============ */
body {
	background: #e8e8e8;
}

.jbmh_page {
	max-width: 1100px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.jbmh_topstrip {
	height: 4px;
	background: linear-gradient(90deg, #8a4a1f, #c67a2a, #8a4a1f);
}

/* ============ Header: toprow + navrow ============ */
.pkp_structure_head.jbmh_head {
	background: transparent;
	border-bottom: none;
}

.jbmh_toprow {
	background: #fff;
	padding: 10px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}

.jbmh_toprow_title {
	font-size: 14px;
	color: #333;
}

.jbmh_toprow_link,
.jbmh_toprow_link:hover,
.jbmh_toprow_link:focus {
	color: #333;
	text-decoration: none;
	font-weight: 600;
}

.jbmh_toprow_actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.jbmh_toprow_actions .jbmh_user_nav {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.jbmh_toprow_actions .jbmh_user_nav > li {
	display: inline-block;
	position: relative;
}

.jbmh_toprow_actions .jbmh_user_nav a {
	color: #555;
	margin-left: 16px;
	text-decoration: none;
	font-size: 14px;
	display: inline-block;
}

.jbmh_toprow_actions .jbmh_user_nav a:hover,
.jbmh_toprow_actions .jbmh_user_nav a:focus {
	color: #672923;
	text-decoration: underline;
}

/* Dropdown items in the user nav (e.g. logged-in Dashboard/Logout) */
.jbmh_toprow_actions .jbmh_user_nav ul {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	min-width: 10em;
	z-index: 1000;
}

.jbmh_toprow_actions .jbmh_user_nav li:hover > ul,
.jbmh_toprow_actions .jbmh_user_nav li:focus-within > ul {
	display: block;
}

.jbmh_toprow_actions .jbmh_user_nav ul a {
	display: block;
	margin: 0;
	padding: 6px 14px;
	white-space: nowrap;
}

.jbmh_menu_toggle {
	display: none;
	background: none;
	border: none;
	color: #672923;
	font-size: 18px;
	margin-left: 12px;
	padding: 4px;
	cursor: pointer;
}

.jbmh_navrow {
	background: #672923;
	padding: 0 24px;
	display: flex;
	align-items: stretch;
	gap: 0;
}

.jbmh_navrow #siteNav {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.jbmh_navrow ul.jbmh_primary_nav {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jbmh_navrow .jbmh_primary_nav li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.jbmh_navrow .jbmh_primary_nav > li > a,
.jbmh_navrow > .jbmh_search_link {
	color: #fff;
	font-size: 15px;
	padding: 13px 18px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.jbmh_navrow .jbmh_primary_nav > li > a:hover,
.jbmh_navrow .jbmh_primary_nav > li > a:focus,
.jbmh_navrow > .jbmh_search_link:hover,
.jbmh_navrow > .jbmh_search_link:focus {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	outline: 0;
}

.jbmh_navrow > .jbmh_search_link {
	margin-left: auto;
}

/* Dropdown submenus (About, Submissions) — not in the mockup (which has a
   flat nav); added so the real multi-level menu stays usable, styled to
   match the maroon palette. */
.jbmh_navrow .jbmh_primary_nav ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14em;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	z-index: 1000;
}

.jbmh_navrow .jbmh_primary_nav li:hover > ul,
.jbmh_navrow .jbmh_primary_nav li:focus-within > ul {
	display: block;
}

.jbmh_navrow .jbmh_primary_nav ul a {
	display: block;
	color: #333;
	padding: 8px 16px;
	white-space: nowrap;
}

.jbmh_navrow .jbmh_primary_nav ul a:hover,
.jbmh_navrow .jbmh_primary_nav ul a:focus {
	background: #f5ede4;
	color: #672923;
}

/* ============ Banner / identity band + accent bar ============ */
.jbmh_banner {
	position: relative;
	height: 200px;
	overflow: hidden;
	background: linear-gradient(135deg, #4a3a28, #241c14);
}

.jbmh_banner_svg {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 60%;
	opacity: .5;
}

.jbmh_namecard {
	position: absolute;
	left: 28px;
	top: 28px;
	background: #fff;
	padding: 18px 50px 18px 26px;
	clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .35);
	max-width: 90%;
}

.jbmh_namecard .big {
	font-family: 'Merriweather', serif;
	font-weight: 700;
	font-size: 38px;
	color: #672923;
	letter-spacing: 1px;
}

.jbmh_namecard .small {
	font-size: 17px;
	color: #de322b;
	font-weight: 600;
	margin-left: 10px;
}

.jbmh_accent {
	background: #672923;
	color: #f5ddc4;
	padding: 9px 24px;
	font-size: 13px;
}

/* ============ Main grid: content + sidebar ============
   .pkp_structure_content is the real shared parent of .pkp_structure_main
   and .pkp_structure_sidebar (siblings) — apply the mockup's 2-column grid
   directly to it instead of re-inventing the wrapper markup. */
.pkp_structure_content.has_sidebar {
	display: grid;
	grid-template-columns: 2.3fr 1fr;
	gap: 32px;
	padding: 26px 24px;
	width: auto;
	max-width: none;
	margin: 0;
}

/* The parent theme's own clearfix (content:" "; display:table on ::before/
   ::after) is meant for the old float-based layout. Under display:grid a
   generated pseudo-element with a real `content` value still counts as an
   implicit grid item, which pushed .pkp_structure_main/.pkp_structure_sidebar
   one cell off from where grid-template-columns intended them — main ended
   up in column 2 (sized for the sidebar) and sidebar wrapped to row 2. The
   clearfix itself is also unneeded once children are grid items (floats are
   already ignored by grid layout), so just remove the generated content. */
.pkp_structure_content.has_sidebar::before,
.pkp_structure_content.has_sidebar::after {
	content: none;
	display: none;
}

.pkp_structure_content.has_sidebar .pkp_structure_main,
.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
	grid-row: 1;
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}

.pkp_structure_content.has_sidebar .pkp_structure_main {
	grid-column: 1;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
	grid-column: 2;
}

.pkp_structure_content.has_sidebar .pkp_structure_main:before,
.pkp_structure_content.has_sidebar .pkp_structure_main:after {
	display: none;
}

/* ============ Journal Description ============ */
.jbmh_section_title {
	font-size: 18px;
	font-weight: 600;
	color: #222;
	margin: 0 0 12px;
	padding-bottom: 7px;
	border-bottom: 2px solid #672923;
	display: inline-block;
}

.jbmh_about_row {
	display: flex;
	gap: 20px;
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

.jbmh_cover {
	width: 110px;
	height: 145px;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid #ccc;
}

.jbmh_about_text p {
	font-size: 14px;
	color: #444;
	line-height: 1.75;
	margin: 0 0 8px;
}

/* The journal's real "description" field already embeds cover-jbmh.png
   inline (unstyled, at natural size) — hide that copy so only the styled
   .jbmh_cover thumbnail above shows; avoids the cover appearing twice. */
.jbmh_about_text img[src*="cover-jbmh"] {
	display: none;
}

/* ============ Current Issue ============ */
.current_issue_title {
	font-size: 13px;
	font-weight: 600;
	color: #222;
	margin: 0 0 2px;
}

.obj_issue_toc .heading {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 11px;
	color: #888;
	margin: 0 0 16px;
}

.obj_issue_toc .heading .pub_id,
.obj_issue_toc .heading .published {
	display: flex;
	gap: 4px;
}

.obj_issue_toc .sections > .section > h3 {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	margin: 0 0 6px;
}

.obj_issue_toc .cmp_article_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Articles */
.obj_article_summary.jbmh_article {
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}

.jbmh_article_title {
	margin: 0 0 6px;
}

.jbmh_article_title a {
	font-size: 17px;
	font-weight: 600;
	color: #333;
	text-decoration: none;
	display: block;
}

.jbmh_article_title a:hover {
	color: #672923;
	text-decoration: underline;
}

.jbmh_article_doi {
	font-size: 13px;
	color: #888;
	margin: 0 0 6px;
}

.jbmh_article_authors {
	font-size: 13px;
	color: #555;
	margin: 0 0 6px;
}

.jbmh_article_foot {
	font-size: 13px;
	color: #777;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.jbmh_article_foot .galleys_links {
	display: contents;
}

.jbmh_article_foot .galleys_links li {
	display: contents;
}

.obj_galley_link.pdf {
	border: 1px solid #672923;
	color: #672923;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 12px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.obj_galley_link.pdf:hover {
	background: #672923;
	color: #fff;
}

.jbmh_view_all_issues {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #de322b;
	text-decoration: none;
}

.jbmh_view_all_issues:hover {
	text-decoration: underline;
}

/* ============ Article detail page (main_entry / entry_details) ============
   The parent theme's article_details.less floats .main_entry/.entry_details
   at FIXED pixel widths computed from its own @screen-desktop-container
   (952px) and @screen-lg-desktop-container (1160px) variables — e.g.
   .main_entry: 1160 - (300*2) = 560px, .entry_details: 300px, inside a
   .row bled out via negative margin. That math assumed .pkp_structure_main
   was still ~952/1160px wide; since this theme's own grid narrows it to
   ~711px (2.3fr of the 1100px page), main_entry + entry_details no longer
   fit side by side and entry_details silently wrapped onto its own row
   below the article body instead of sitting beside it. Replace the fixed
   widths with flexbox so the two columns always fit the real container. */
.obj_article_details .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-left: 0;
	margin-right: 0;
}

/* Generic `.row { .pkp_helpers_clear; }` (components.less) gives every
   .row a ::before/::after clearfix with a real `content` value — once
   .row is display:flex those pseudo-elements become actual flex items
   and skew main_entry/entry_details placement. Neutralize them. */
.obj_article_details .row::before,
.obj_article_details .row::after {
	content: none;
	display: none;
}

.obj_article_details .main_entry {
	float: none;
	width: auto;
	flex: 1 1 360px;
	min-width: 0;
}

.obj_article_details .entry_details {
	float: none;
	width: 260px;
	flex: 0 0 260px;
	margin-left: 0;
}

@media (max-width: 700px) {
	.obj_article_details .entry_details {
		flex-basis: 100%;
		width: auto;
		border-top: 1px solid #ddd;
	}
}

/* ============ Sidebar ============ */
.pkp_structure_sidebar.jbmh_sidebar .pkp_block,
.pkp_structure_sidebar.jbmh_sidebar .jbmh_side_block {
	margin-bottom: 22px;
}

.pkp_structure_sidebar.jbmh_sidebar .pkp_block > h2.title:not(.pkp_screen_reader),
.pkp_structure_sidebar.jbmh_sidebar .block_information .title,
.pkp_structure_sidebar.jbmh_sidebar .jbmh_side_h {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	border-bottom: 1px solid #ddd;
	padding-bottom: 6px;
	margin: 0 0 10px;
	display: block;
}

.pkp_structure_sidebar.jbmh_sidebar a {
	color: #de322b;
	text-decoration: none;
	font-size: 13px;
}

.pkp_structure_sidebar.jbmh_sidebar a:hover {
	text-decoration: underline;
}

.pkp_structure_sidebar.jbmh_sidebar .content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Custom Block content (For Authors / Indexing / ISSN / Scholar / etc.) —
   best-effort logo styling: the source HTML for these blocks is managed by
   the journal admin (Custom Block Manager), not this theme, so a literal
   .idxgrid 3-column grid can't be reproduced without editing that content. */
.pkp_structure_sidebar.jbmh_sidebar .block_information img {
	display: inline-block;
	max-width: 90px;
	max-height: 32px;
	margin: 4px 6px 4px 0;
	vertical-align: middle;
}

.pkp_structure_sidebar.jbmh_sidebar #gsc_rsb_st {
	width: 100%;
	font-size: 11px;
	color: #555;
	border-collapse: collapse;
}

.pkp_structure_sidebar.jbmh_sidebar #gsc_rsb_st td,
.pkp_structure_sidebar.jbmh_sidebar #gsc_rsb_st th {
	text-align: right;
	padding: 2px 0;
}

/* Make Submission CTA */
.jbmh_make_submission {
	background: #672923;
	color: #fff !important;
	text-align: center;
	padding: 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 3px;
	margin-bottom: 18px;
	display: block;
	text-decoration: none !important;
}

.jbmh_make_submission:hover {
	background: #52201b;
}

/* Editorial team preview */
.jbmh_editor {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.jbmh_editor_avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ccc;
	flex-shrink: 0;
}

.jbmh_editor_text {
	font-size: 13px;
	color: #333;
	margin: 0;
	line-height: 1.6;
}

.jbmh_editor_role {
	font-size: 12px;
	color: #888;
}

.jbmh_archive_list {
	font-size: 12px;
	color: #555;
	line-height: 1.9;
	margin: 0;
}

/* ============ Footer ============ */
/* The parent theme's footer.less puts .pkp_structure_footer in the same
   "page container widths" mixin as header/nav (own width + centering
   margin), and the pasted pageFooter HTML (Logo/Address/Contact) uses
   leftover Bootstrap-style .container/.row/.col-md-* classes from wherever
   that markup was originally authored — neither matches this theme's own
   1100px .jbmh_page frame, which is what made the footer content start
   well to the right of the header/nav/content above it. Reset all of it so
   the footer uses exactly the same box as everything else. */
.pkp_structure_footer_wrapper {
	width: auto;
	max-width: none;
	margin: 0;
}

.pkp_structure_footer {
	background: #672923;
	color: #f0dcc4;
	padding: 24px;
	width: auto;
	max-width: none;
	margin: 0;
	text-align: left;
}

.pkp_structure_footer .pkp_footer_content {
	width: auto;
	padding: 0;
}

.pkp_structure_footer .pkp_footer_content .container {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.pkp_structure_footer .pkp_footer_content .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: auto;
	margin: 0;
}

/* Same clearfix-as-flex-item issue as .pkp_structure_content (see grid
   section above): a generic .row::before/::after clearfix with a real
   `content` value becomes actual flex items once .row is display:flex,
   which was pushing every column inward as if space-evenly, not
   space-between. */
.pkp_structure_footer .pkp_footer_content .row::before,
.pkp_structure_footer .pkp_footer_content .row::after {
	content: none;
	display: none;
}

.pkp_structure_footer .pkp_footer_content [class*="col-"] {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}

.pkp_structure_footer .pkp_footer_content h4 {
	color: #fff;
	font-size: 13px;
	margin: 0 0 5px;
}

.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_footer_content address,
.pkp_structure_footer .pkp_footer_content a,
.pkp_structure_footer .pkp_footer_content div {
	color: #f0dcc4;
	font-size: 13px;
}

.pkp_structure_footer .pkp_footer_content address {
	font-style: normal;
}

.pkp_structure_footer .pkp_footer_content a {
	text-decoration: underline;
}

/* Hide "Platform & workflow by OJS/PKP" branding, per brief */
.pkp_structure_footer .pkp_brand_footer {
	display: none;
}

/* ============ Mobile (breakpoint: 820px, per mockup-v2-full.html) ============ */
@media (max-width: 820px) {
	body {
		padding: 0;
	}

	.pkp_structure_content.has_sidebar {
		grid-template-columns: 1fr;
		padding: 20px 16px;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_main {
		grid-column: 1;
		grid-row: 1;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
		grid-column: 1;
		grid-row: 2;
	}

	.jbmh_navrow {
		flex-wrap: wrap;
		display: none;
		padding: 0 16px;
	}

	.jbmh_navrow.jbmh_open {
		display: flex;
	}

	.jbmh_navrow ul.jbmh_primary_nav {
		flex-direction: column;
		width: 100%;
	}

	.jbmh_navrow .jbmh_primary_nav > li {
		width: 100%;
	}

	.jbmh_navrow .jbmh_primary_nav > li > a {
		padding: 11px 0;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.jbmh_navrow .jbmh_primary_nav ul {
		position: static;
		box-shadow: none;
		border: none;
		background: rgba(0, 0, 0, .15);
	}

	.jbmh_navrow .jbmh_primary_nav ul a {
		color: #fff;
		padding-left: 32px;
	}

	.jbmh_navrow > .jbmh_search_link {
		margin-left: 0;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.jbmh_toprow {
		padding: 10px 16px;
		flex-wrap: wrap;
	}

	.jbmh_menu_toggle {
		display: inline-block;
	}

	.jbmh_banner {
		height: 150px;
	}

	.jbmh_namecard {
		left: 14px;
		top: 16px;
		padding: 12px 34px 12px 16px;
	}

	.jbmh_namecard .big {
		font-size: 26px;
	}

	.jbmh_namecard .small {
		font-size: 12px;
		margin-left: 6px;
		display: block;
	}

	.jbmh_accent {
		padding: 9px 16px;
		font-size: 12px;
	}

	.jbmh_about_row {
		flex-direction: column;
	}

	.pkp_structure_footer {
		padding: 20px 16px;
	}

	.pkp_structure_footer .pkp_footer_content .row {
		flex-direction: column;
		gap: 16px;
	}
}