@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/**
 * plugins/themes/italianoTheme/styles/branding.css
 *
 * Look and feel of the journal: colours and typography.
 *
 * Structured after the stylesheet of Revista de la Facultad de Ciencias
 * Medicas (UNC), which runs on the same OJS default theme, so the selectors
 * are the same. Two deliberate differences:
 *
 *  - Palette. That journal builds gradients out of a teal and a purple. The
 *    Italiano brand manual only has the blue below plus greys, so every
 *    gradient here is built from shades of the one brand colour instead of
 *    introducing a second hue.
 *  - Their journal-specific blocks (.portada-revis, .contacto) are not carried
 *    over: those are custom sidebar blocks of that site and have no markup here.
 *
 * Contrast: white on --italiano-primary is 4.93:1, and --italiano-primary on
 * white is likewise 4.93:1 -- both pass WCAG AA for normal text. Keep that in
 * mind before lightening the blue.
 */

:root {
	/* Brand blue: RGB 74-112-179 */
	--italiano-primary: #4A70B3;
	--italiano-primary-dark: #3A5890;
	--italiano-primary-darker: #2E4571;
	--italiano-primary-light: #7392C7;
	--italiano-primary-tint: #E8EEF7;

	/* Greys -- the only other colours in the brand manual */
	--italiano-grey-900: #212529;
	--italiano-grey-700: #495057;
	--italiano-grey-500: #6C757D;
	--italiano-grey-300: #DEE2E6;
	--italiano-grey-100: #F5F5F5;

	--italiano-on-primary: #FFFFFF;

	--italiano-font: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--italiano-header-gradient: linear-gradient(325deg, var(--italiano-primary-darker) 0%, var(--italiano-primary) 85%);
	--italiano-footer-gradient: linear-gradient(159deg, var(--italiano-primary-darker) 4%, var(--italiano-primary) 51%);
}

/* -------------------------------------------------------------------------
 * Typography
 *
 * The parent theme's `typography` option loads its own font stylesheet and
 * sets the body font. This file is registered after it, so these rules win
 * without needing !important.
 * ---------------------------------------------------------------------- */

body,
.pkp_structure_page,
input,
button,
select,
textarea {
	font-family: var(--italiano-font);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--italiano-font);
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.pkp_structure_head {
	background: var(--italiano-primary);
	background: var(--italiano-header-gradient);
	border-bottom: 5px solid var(--italiano-primary);
}

.pkp_navigation_primary_row,
.pkp_site_nav_menu {
	background: var(--italiano-primary);
	background: var(--italiano-header-gradient);
}

.pkp_navigation_primary_wrapper {
	margin-top: 25px;
	margin-bottom: 20px;
	padding-left: 15px;
	padding-right: 15px;
}

/* The header logo is white artwork on a transparent background, so it only
   becomes visible once the header carries the brand colour. */
.has_site_logo .pkp_site_name {
	background: transparent;
}

.pkp_site_nav_menu a,
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper a,
.pkp_navigation_user a {
	color: var(--italiano-on-primary);
}

.pkp_navigation_primary > li > a {
	padding: 5px;
	border-bottom: 2px solid transparent;
	font-family: var(--italiano-font);
	font-size: 1.1em;
	font-weight: 400;
}

.pkp_site_nav_toggle {
	box-shadow: none;
}

/* No underline in the main menu: the hover accent is the bottom border set
   on .pkp_navigation_primary > li > a, otherwise entries without a dropdown
   ("Publicación continua", "Números anteriores") get a double cue. */
.pkp_site_nav_menu a:hover,
.pkp_site_nav_menu a:focus,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
	color: var(--italiano-on-primary);
	text-decoration: none;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
	border-bottom-color: var(--italiano-on-primary);
	text-decoration: none;
}

/* The user menu (Registrarse / Entrar) has no border accent, so it keeps the
   underline as its hover cue. */
.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus {
	color: var(--italiano-on-primary);
	text-decoration: underline;
}

/* Dropdowns in the primary menu */
ul.dropdown-menu.show {
	background: var(--italiano-primary);
}

/* -------------------------------------------------------------------------
 * Sidebar blocks and buttons
 * ---------------------------------------------------------------------- */

.pkp_block .title {
	color: var(--italiano-primary);
	font-family: var(--italiano-font);
	font-size: 1.3em;
}

.cmp_form .buttons button {
	background: var(--italiano-primary);
	border: 1px solid var(--italiano-primary);
	border-top-color: var(--italiano-primary-light);
	box-shadow: none;
	color: var(--italiano-on-primary);
}

.cmp_form .buttons button a {
	color: var(--italiano-on-primary);
}

a.block_make_submission_link {
	background: var(--italiano-primary);
	color: var(--italiano-on-primary);
}

a.block_make_submission_link:hover,
a.block_make_submission_link:focus {
	background: var(--italiano-primary-dark);
	color: var(--italiano-on-primary);
}

/* -------------------------------------------------------------------------
 * Main content headings
 * ---------------------------------------------------------------------- */

.pkp_structure_main h1 {
	color: var(--italiano-primary);
	font-family: var(--italiano-font);
	font-size: 1.4em;
}

.pkp_structure_main h2,
.obj_issue_toc .section > h2 {
	color: var(--italiano-primary);
	font-family: var(--italiano-font);
	font-size: 1.3em;
	font-weight: bold;
	line-height: 2.143rem;
}

.pkp_structure_main h3,
.obj_issue_toc .section > h3 {
	color: var(--italiano-primary);
	font-family: var(--italiano-font);
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.43rem;
}

/* -------------------------------------------------------------------------
 * Issue table of contents / article listings
 * ---------------------------------------------------------------------- */

.obj_galley_link {
	background: #fff;
	border: 1px solid var(--italiano-primary);
	color: var(--italiano-primary);
}

.obj_galley_link:hover,
.obj_galley_link:focus {
	background: var(--italiano-primary-tint);
	border-color: var(--italiano-primary-dark);
	color: var(--italiano-primary-dark);
}

.obj_article_summary .pages {
	color: var(--italiano-primary);
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.pkp_structure_footer_wrapper {
	background: var(--italiano-primary);
	background: var(--italiano-footer-gradient);
	border-top: 2px solid var(--italiano-primary);
	color: var(--italiano-on-primary);
	font-family: var(--italiano-font);
	font-size: 1.1em;
}

.pkp_structure_footer_wrapper a {
	color: var(--italiano-on-primary);
	text-decoration: underline;
}

/* The PKP brand mark is dark artwork; invert it so it reads on the footer */
.pkp_brand_footer {
	padding: 2em;
	filter: invert(1);
}

/* -------------------------------------------------------------------------
 * Desktop
 * ---------------------------------------------------------------------- */

@media (min-width: 992px) {
	.pkp_site_name .is_img img {
		max-height: 120px;
		margin-bottom: 20px;
	}

	.pkp_structure_footer_wrapper {
		background: linear-gradient(38deg, var(--italiano-primary-darker) 4%, var(--italiano-primary) 51%, var(--italiano-primary-light) 100%);
	}

	.pkp_navigation_primary_wrapper {
		border: solid var(--italiano-on-primary) 1px;
		border-radius: 4px;
	}

	.pkp_navigation_primary > li > a:hover,
	.pkp_navigation_primary > li > a:focus,
	.pkp_navigation_search_wrapper a:hover,
	.pkp_navigation_search_wrapper a:focus {
		border-color: var(--italiano-on-primary);
		color: var(--italiano-on-primary);
		outline: 0;
	}

	/* Dropdown items sit on white, so they take the brand colour as text */
	.pkp_nav_list ul a {
		background: #fff;
		border-color: var(--italiano-primary);
		color: var(--italiano-primary);
	}

	.pkp_nav_list ul a:hover,
	.pkp_nav_list ul a:focus {
		background: var(--italiano-primary-tint);
		border-color: var(--italiano-primary-dark);
		color: var(--italiano-primary-dark);
	}

	.pkp_navigation_user li {
		background: var(--italiano-primary-dark);
	}
}

/* -------------------------------------------------------------------------
 * Phones
 * ---------------------------------------------------------------------- */

@media (max-width: 430px) {
	.has_site_logo .pkp_head_wrapper {
		min-height: 75px;
	}

	.pkp_site_name .is_img img {
		max-height: 85px;
		margin-bottom: 5px;
	}

	.pkp_navigation_primary_wrapper {
		margin-top: 5px;
		margin-bottom: 5px;
		padding-left: 15px;
		padding-right: 15px;
		border: none;
	}
}