/**
 * plugins/themes/italianoTheme/styles/italiano.css
 *
 * Styles for the journal's customisations on top of the OJS default theme.
 *
 * This file makes the custom components work: layout, sizing and behaviour.
 * The journal's colours and typography live in branding.css, which defines the
 * --italiano-* custom properties used below. The fallbacks in each var() keep
 * this file sane on its own if branding.css is ever removed.
 *
 * Breakpoint 768px matches @screen-tablet in the default theme, so the mobile
 * cut is the same one the previous bootstrap3 markup used with .hidden-xs.
 */

/* -------------------------------------------------------------------------
 * Homepage: carousel of the last closed issue
 * ---------------------------------------------------------------------- */

.previous_issue {
	margin-bottom: 40px;
}

.previous_issue_title {
	margin-bottom: 20px;
	font-style: italic;
}

.previous_issue_carousel {
	position: relative;
	max-width: 100%;
	overflow: hidden;
}

.previous_issue_carousel .carousel_track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.previous_issue_carousel .carousel_track::-webkit-scrollbar {
	display: none;
}

.previous_issue_carousel .carousel_item {
	flex: 0 0 280px;
	max-width: 280px;
	scroll-snap-align: start;
}

.previous_issue_carousel .article_card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 15px;
	border: 1px solid var(--italiano-grey-300, #ddd);
	border-radius: 4px;
	background: #fff;
}

.previous_issue_carousel .card_body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.previous_issue_carousel .card_cover img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 12px;
}

.previous_issue_carousel .card_title {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.35;
}

.previous_issue_carousel .card_subtitle {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--italiano-grey-500, #666);
}

.previous_issue_carousel .card_authors {
	margin: 0;
	font-size: 13px;
	color: var(--italiano-grey-500, #666);
}

.previous_issue_carousel .card_section {
	margin: 0 0 10px;
}

.previous_issue_carousel .card_section_label {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 3px;
	background: var(--italiano-primary, #4A70B3);
	color: var(--italiano-on-primary, #fff);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: normal;
	/* The theme's body line-height is ~2, which opens a big gap when a long
	   section name wraps to a second line. Tighten it for the badge only. */
	line-height: 1.3;
}

.previous_issue_carousel .card_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: auto 0 0;
	padding-top: 12px;
	font-size: 12px;
	color: var(--italiano-grey-500, #777);
}

.previous_issue_carousel .card_meta svg {
	margin-right: 3px;
	vertical-align: -2px;
}

.previous_issue_carousel .carousel_dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}

.previous_issue_carousel .carousel_dots:empty {
	display: none;
}

.previous_issue_carousel .carousel_dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--italiano-grey-300, #ccc);
	cursor: pointer;
	transition: background .2s;
}

.previous_issue_carousel .carousel_dots button.active {
	background: var(--italiano-primary, #4A70B3);
}

.previous_issue_carousel .carousel_nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--italiano-grey-300, #ddd);
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	color: var(--italiano-grey-900, #333);
	cursor: pointer;
	transform: translateY(-50%);
}

.previous_issue_carousel .carousel_nav.prev {
	left: 0;
}

.previous_issue_carousel .carousel_nav.next {
	right: 0;
}

.previous_issue_carousel .carousel_nav[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.previous_issue_carousel .carousel_nav {
		display: none;
	}

	.previous_issue_carousel .carousel_item {
		flex-basis: 75%;
		max-width: 75%;
	}
}

/* "Ver el número completo" reads as a button rather than a link. Outlined on
   purpose, so it does not compete with the solid section badges on the cards. */
.previous_issue .read_more {
	display: inline-block;
	margin-top: 25px;
	padding: 9px 20px;
	border: 2px solid var(--italiano-primary, #4A70B3);
	border-radius: 4px;
	background: transparent;
	color: var(--italiano-primary, #4A70B3);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.previous_issue .read_more:hover,
.previous_issue .read_more:focus {
	background: var(--italiano-primary, #4A70B3);
	color: var(--italiano-on-primary, #fff);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Article page: share buttons
 * ---------------------------------------------------------------------- */

.obj_article_details .item.share .share_links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.obj_article_details .item.share .share_link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
}

.obj_article_details .item.share .share_link:hover,
.obj_article_details .item.share .share_link:focus {
	color: #fff;
	opacity: .85;
}

.obj_article_details .item.share .share_link.facebook { background: #1877F2; }
.obj_article_details .item.share .share_link.twitter  { background: #000; }
.obj_article_details .item.share .share_link.linkedin { background: #0A66C2; }
.obj_article_details .item.share .share_link.whatsapp { background: #25D366; }
.obj_article_details .item.share .share_link.email    { background: #5A6B73; }

/* -------------------------------------------------------------------------
 * Article page: galley links ("opciones de visualización y descarga")
 *
 * Scoped to .obj_article_details on purpose -- the same buttons appear in the
 * issue table of contents and on the homepage, and those stay as the parent
 * theme draws them.
 *
 * The parent's .cmp_button_wire has `padding: 0 1em` (no vertical padding) and
 * uses `line-height: calc(@triple - 2px)` ~= 28px as the mechanism that gives
 * the button its height. So a label that wraps ("PDF (inglés)") gets 28px of
 * leading between the two lines, and the text drops below the inline ::before
 * icon. The fix is to give the button real vertical padding, a normal
 * line-height, and lay it out as flex so the icon and the label sit side by
 * side and the label wraps as a block next to it. The font size is untouched.
 * ---------------------------------------------------------------------- */

.obj_article_details .obj_galley_link {
	display: inline-flex;
	align-items: center;
	/* Centre the icon+label group: as a flex container the content would
	   otherwise sit at flex-start and any spare width would pile up on the
	   right, reading as uneven padding. */
	justify-content: center;
	gap: .4em;
	/* 1em horizontally is what .cmp_button_wire uses, so these buttons keep
	   the same side padding as every other button in the theme. */
	padding: 8px 1em;
	line-height: 1.25;
	text-align: center;
}

/* The parent theme sets `flex-flow: row nowrap` on this list, so the buttons
   can never move to a second row: if they do not fit they simply overflow the
   sidebar column. Letting the row wrap -- and letting long labels break, so
   "(inglés)" sits on a second line -- keeps everything inside the column.
   `align-items: stretch` plus the flex li makes every button in a row as tall
   as the tallest one, so a wrapped label does not leave uneven heights. */
.obj_article_details .galleys_links {
	flex-wrap: wrap;
	align-items: stretch;
	gap: .5rem 1rem;
}

.obj_article_details .galleys_links li {
	display: flex;
	margin-inline-end: 0; /* superseded by the gap above */
}

.obj_article_details .obj_galley_link::before {
	flex: none;
	margin-right: 0; /* superseded by the flex gap */
}

/* -------------------------------------------------------------------------
 * Article page: cover image
 *
 * The journal does not want the issue/article cover repeated on the article
 * page -- it is already shown on the issue page and in the archive.
 * ---------------------------------------------------------------------- */

.obj_article_details .item.cover_image {
	display: none;
}

/* -------------------------------------------------------------------------
 * Article page: reading order on phones
 *
 * Replaces the duplicated .visible-xs block the bootstrap3 version used: the
 * DOM keeps a single copy of every item and only the visual order changes.
 *
 * The requested order interleaves the two columns, so .row, .main_entry and
 * .entry_details are collapsed with `display: contents` and every item becomes
 * a direct flex child of .obj_article_details, orderable as one sequence.
 * .item.issue is collapsed too, so "Sección" can sit above the title while
 * "Número" stays near the bottom.
 *
 * Steps of 10 leave room to slot something in without renumbering. Anything
 * not listed below keeps order 160 and flows after, in DOM order: cover image,
 * author biographies, data availability, pubIds.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.obj_article_details {
		display: flex;
		flex-direction: column;
	}

	.obj_article_details > .row,
	.obj_article_details .main_entry,
	.obj_article_details .entry_details,
	.obj_article_details .entry_details > .item.issue {
		display: contents;
	}

	.obj_article_details > *,
	.obj_article_details .main_entry > *,
	.obj_article_details .entry_details > *,
	.obj_article_details .entry_details > .item.issue > * {
		order: 160;
	}

	/* .entry_details is full-bleed in the parent theme; once collapsed its
	   items must line up with the ones coming from .main_entry. */
	.obj_article_details .entry_details > .item,
	.obj_article_details .entry_details > .item.issue > .sub_item {
		padding-left: 0;
		padding-right: 0;
	}

	.obj_article_details > .cmp_notification { order: 5; }
	.obj_article_details .item.issue > .sub_item.section { order: 10; }
	.obj_article_details > .page_title { order: 20; }
	.obj_article_details > .subtitle { order: 25; }
	.obj_article_details .main_entry > .authors { order: 30; }
	.obj_article_details .main_entry > .doi { order: 40; }
	.obj_article_details .entry_details > .galleys { order: 50; }
	.obj_article_details .main_entry > .abstract { order: 60; }
	.obj_article_details .main_entry > .keywords { order: 70; }
	.obj_article_details .entry_details > .share { order: 80; }
	.obj_article_details .main_entry > .downloads_chart { order: 90; }
	.obj_article_details .entry_details > .badges { order: 100; }
	.obj_article_details .entry_details > .published { order: 110; }
	.obj_article_details .item.issue > .sub_item.issue { order: 120; }
	.obj_article_details .item.issue > .sub_item.categories { order: 125; }
	.obj_article_details .main_entry > .references { order: 130; }
	.obj_article_details .entry_details > .citation { order: 140; }
	.obj_article_details .entry_details > .copyright { order: 150; }
}

/* -------------------------------------------------------------------------
 * Content images: ORCID icons
 *
 * The parent theme locks every image with `img { max-width: 100%; width: auto;
 * height: auto }` (default/styles/body.less). Those are author declarations, so
 * they outrank the `width`/`height` attributes an editor writes in page
 * content -- those attributes are only presentational hints and sit lower in
 * the cascade.
 *
 * The ORCID icon pasted into "Historial editorial" asks for 10x10 but the
 * uploaded file is 2048x2048, so each of the 37 icons on that page rendered at
 * the full width of the main column. The sidebar blocks embed images the same
 * way and look fine only because max-width caps them at the narrow column.
 *
 * Sized in em so the icon follows the text it sits next to: the markup puts it
 * inside <sup>, whose reduced font-size then scales it down proportionally.
 *
 * The definitive fix is to replace the uploaded file with an actual small icon
 * -- 87 KB for a 10px mark is worth removing on its own. This rule keeps the
 * page readable meanwhile, and guards against the same file being re-uploaded.
 * ---------------------------------------------------------------------- */

.pkp_structure_main img[src*="orcid-id"] {
	width: 1em;
	height: 1em;
}

/* -------------------------------------------------------------------------
 * Sidebar: orange separator rules
 *
 * The rule is not CSS: every custom block (aviso, convocatorias, issn,
 * navegar, numerosanteriores, "números anteriores") carries an
 * `<img src=".../avuotto/linea.png" width="200" height="10">` inside its HTML
 * content, left over from the bootstrap3 design. Hiding it here removes it
 * from all of them at once and is reversible; the definitive fix is to delete
 * the <img> from each block in Ajustes > Sitio web > Plugins > Gestor de
 * bloques personalizados.
 *
 * `$=` matches whatever protocol the block was saved with (some use http://,
 * others //), and the selector is scoped to .pkp_block so an article that
 * legitimately includes a file called linea.png is not affected.
 * ---------------------------------------------------------------------- */

.pkp_block img[src$="linea.png"] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Issue archive: collapsible groups by year
 * ---------------------------------------------------------------------- */

.issues_archive .archive_group {
	list-style: none;
}

.archive_group_header {
	display: block;
	width: 100%;
	margin: 4px 0;
	padding: 8px 16px;
	border: 1px solid var(--italiano-grey-300, #ddd);
	border-radius: 4px;
	background: var(--italiano-grey-100, #f5f5f5);
	color: var(--italiano-primary, #4A70B3);
	font-weight: bold;
	text-align: left;
	cursor: pointer;
	user-select: none;
}

.archive_group_header:hover {
	background: var(--italiano-primary-tint, #e8e8e8);
}

.archive_group_header::before {
	content: '\25B6';
	margin-right: 10px;
	font-size: 11px;
}

.archive_group_header[aria-expanded="true"]::before {
	content: '\25BC';
}

.archive_group_header[aria-expanded="true"] {
	background: var(--italiano-primary-tint, #e8e8e8);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

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

.archive_group_items[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.archive_group_header {
		padding: 10px 14px;
		font-size: 15px;
	}
}