/**
 * styles/ijcal-responsive.css
 *
 * IJCAL Modern theme for OJS 3.4 — responsive rules.
 * Breakpoints: 960px (off-canvas menu), 800px, 480px.
 */

@media only screen and (max-width: 960px) {

	/* off-canvas primary menu, toggled by the #menuOnTop checkbox */
	label[for="menuOnTop"] { display: inline-block; }
	label[for="menuOnTop"] .fa-times { display: none; }

	#primaryMenuWrp {
		position: fixed;
		left: -270px;
		top: 0;
		bottom: 0;
		width: 200px;
		margin: 0;
		padding: 0;
		background: #fff;
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		z-index: 999;
		visibility: hidden;
		overflow: auto;
		transition: all .2s;
		display: block;
		float: none;
	}
	#primaryMenuWrp #main-navigation { padding: 0; margin: 0; width: 100%; float: none; }
	#primaryMenuWrp #main-navigation li { width: 100%; float: none; }
	#primaryMenuWrp #main-navigation li a {
		padding: 10px;
		font-weight: 600;
		font-size: 15px;
		border: 0;
		line-height: normal;
		background: #fff !important;
		color: #333 !important;
		margin: 0;
	}
	#primaryMenuWrp #main-navigation li a:hover { background: #fff !important; color: var(--ijcal-primary) !important; }
	#main-navigation > li > a:before { display: none; }
	#main-navigation > li > a .fa-angle-down { float: right; margin-top: 3px; }

	#menuOnTop:checked ~ #headerNavigationContainer #primaryMenuWrp { left: 0; visibility: visible; }
	#menuOnTop:checked ~ label[for="menuOnTop"] { left: 200px; color: #fff; padding: 8px 10px; background: var(--ijcal-primary); }
	#menuOnTop:checked ~ label[for="menuOnTop"] .fa-bars { display: none; }
	#menuOnTop:checked ~ label[for="menuOnTop"] .fa-times { display: block; }

	#main-navigation .dropdown .dropdown-menu {
		position: relative;
		visibility: visible;
		opacity: 1;
		display: block;
		float: none;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 0;
		border: 0;
		box-shadow: none;
		background: #f7f7f7;
	}
	#main-navigation .dropdown .dropdown-menu:after { display: none; }
	#main-navigation .dropdown .dropdown-menu li { border-bottom: 0; }
	#main-navigation .dropdown .dropdown-menu a { padding-left: 30px !important; color: #333; font-size: 14px; }

	.mainNavigation.logoHidden ~ #primaryMenuWrp { margin: 0; }
	/* header + top bar: the header is no longer fixed on small screens */
	header#headerNavigationContainer { position: relative; background: #1b2330; }
	header#headerNavigationContainer:before { background: rgba(0,0,0,0.35); }
	.innerHeaderWrp { width: 100%; padding-left: 50px; padding-right: 10px; }
	#topMenuRight ul.menu { float: none; display: inline-block; vertical-align: middle; }
	.topHeader { padding: 6px 0; }
	.mainNavigation, .topHeader { width: 100%; position: relative; top: 0; float: none; margin-right: 0; }
	.callQuestion { display: none !important; }
	#topMenuRight { float: none !important; text-align: left; }
	#mainContainer { display: block !important; }
	#mainContainer:after { content: ''; display: table; clear: both; }
	.scrollNow .mainNavigation { padding-top: 0; }
	.container { width: 97% !important; }

	/* banner */
	.journalInfoCol { padding-top: 40px; }
	.journalInfoCol:not(.indexJournalPage) { height: 280px; min-height: 0; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 60px; }
	.journalInfoCol:not(.indexJournalPage) h1, .journalInfoCol:not(.indexJournalPage) .bannerTitle { width: 100%; }
	.indexJournalPage .sliderWrp { position: relative; bottom: auto; margin-bottom: 30px; }
	.journalInfoCol h1, .journalInfoCol .bannerTitle { font-size: 32px; }
	.journalInfoCol h1 small { font-size: 15px; }
	.journalInfoCol h1.bannerLogo a { width: 100%; }
	.journalInfoCol h1.bannerLogo img { width: 100%; padding: 10px 14px; }
	.journalInfoCol .bannerTagline { font-size: 16px; margin-top: 14px; padding: 0 10px; }
	.indexJournalPage.journalInfoCol { height: auto; min-height: 0; padding-bottom: 120px; }
	#sliderInner img { width: 26%; max-height: none; }

	/* two columns become one */
	.pkp_structure_main, #sidebar { width: 100%; float: none; }
	#sidebar { margin-top: 20px; }
}

@media only screen and (max-width: 800px) {
	#topMenuRight .menu { padding-left: 0; }
	#topMenuRight .menu > li > a { padding: 2px 5px; }
	.journalInfoCol h1, .journalInfoCol .bannerTitle { font-size: 24px; }
	.journalInfoCol .carousel { width: 100%; height: auto; }
	.journalInfoCol { height: auto; margin-bottom: 0; }
	.WrpMediaCnt { width: 100%; }
	.WrpMediaCnt + .galleryLinksWrp { width: 100%; text-align: left; margin-top: 5px; float: none; }
	.article-details h1.page-header { font-size: 22px; }
	.footer-widget { margin-bottom: 30px; }
}

@media only screen and (max-width: 480px) {
	.journalContentWr { padding: 15px; }
	.mainNavigation { padding: 5px 0; }
	.mainNavigation img { max-height: 40px; }
	.journalInfoCol h1, .journalInfoCol .bannerTitle { font-size: 20px; padding: 10px 0; }
	.journalInfoCol h1 small { display: block; margin-top: 6px; font-size: 13px; }
	#sliderInner .item a:not(:nth-child(2)) { display: none; }
	#sliderInner .item a:nth-child(2) { margin: 0; }
	#sliderInner img { width: 50%; }
	.page_index_journal .issue-toc .thumbnail, .page_issue .thumbnail { width: 100%; float: none; }
	.page_index_journal .issue-toc .thumbnail + .description, .page_issue .thumbnail + .description { margin-left: 0; margin-top: 10px; clear: both; }
	.themeEditIcon { display: none; }
	.titleWithThemeEditIcon, .announcementContent, .announcement-full .description { margin-left: 0; padding-left: 0; }
	.boxWrpJournal h2 { font-size: 22px; line-height: 30px; }
	.issue-summary .media-left, .issue-summary .media-body { display: block; width: 100%; }
	.issue-summary .media-left a.cover img { max-width: 100%; margin-bottom: 10px; }
	.footerCopyRight li { display: block !important; text-align: center; line-height: 30px; }
	.searchCntNav input.form-control, .searchCntNav:hover input.form-control { width: 120px; }
}