/*
 * Microcubo UI · base
 * Colours, text and widget basics for the pages built in Elementor from the Figma designs.
 *
 * Classes (Elementor → Advanced → CSS Classes):
 *   mc-section                                   top-level container of a page (or of the footer)
 *   mc-title, mc-text, mc-image, mc-embed        widgets: heading, text editor, image, shortcode / HTML
 *   mc-text--info                                contacts and addresses: SemiBold labels, plain phone numbers
 *   mc-link                                      heading used as a text link ("Explorar parcerias"): underlined
 *
 * Per element, Elementor's custom CSS only sets variables:
 *   --mc-wrap    Figma text width, in em: on desktop the lines break where the design breaks them
 *   --mc-shift   horizontal offset of a paragraph (Figma px at 1920, written in vw)
 *
 * Breakpoints: Elementor's tablet (<=1024) and mobile (<=767) are the only ones on the site; 1025-1365 is the
 * "small laptop" range (see sections.css). !important only goes on Elementor's layout variables
 * (--width, --padding-*, --e-con-grid-*, --flex-wrap-mobile), which Elementor sets per element with a stronger
 * selector.
 */

:root {
	--mc-black: #000;
	--mc-white: #fff;
	--mc-grey-bg: #f9f9f9;   /* top zone of the pages */
	--mc-grey-line: #989898; /* lines, form borders, small print */
	--mc-grey-text: #585858; /* placeholders */
	--mc-font: Montserrat, sans-serif;
}

/* On phones Elementor lets every flex container wrap (--flex-wrap-mobile: wrap). In a wrapping column the width
   of a widget is not known yet when its height is worked out, so whatever gets its height from its width (an
   image that has not loaded, a square) counts as empty: the section is too short until the image arrives, or
   for good. Our containers are single columns on phones: they never need to wrap. */
.mc-section,
.mc-section .e-con {
	--flex-wrap-mobile: nowrap !important;
}

/* the kit adds 20px under every widget: the containers already space them */
.mc-section :is(.mc-title, .mc-text, .mc-image, .mc-embed):not(:last-child) {
	margin-block-end: 0;
}

/* the theme sets p { margin: 10px 0 } */
.mc-text p {
	margin: 0 0 1.22em;
}

.mc-text p:last-child {
	margin-bottom: 0;
}

.mc-title strong,
.mc-text strong {
	font-weight: 700;
}

.mc-text a {
	color: inherit;
	text-decoration: underline;
}

.mc-image img {
	display: block;
}

/* linked images: Elementor makes the link inline-block, which adds a text line (~5px) under the image */
.mc-image a {
	display: block;
}

.mc-text--info strong {
	font-weight: 600;
}

.mc-text--info a[href^="tel:"] {
	text-decoration: none;
}

/* text links: the heading's colour, underlined */
.mc-link a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	transition: opacity .2s;
}

.mc-link a:hover {
	color: inherit;
	opacity: .7;
}

/* desktop: text widths as in Figma */
@media (min-width: 1025px) {
	.mc-title :is(h1, h2, h3, h4, h5, h6, p) {
		max-width: var(--mc-wrap, none);
	}

	.mc-text p {
		max-width: var(--mc-wrap, none);
		margin-left: var(--mc-shift, 0px);
	}
}

/* tablet and mobile: no lonely words at the end of titles and paragraphs */
@media (max-width: 1024px) {
	.mc-title :is(h1, h2, h3, h4, h5, h6, p) {
		text-wrap: balance;
	}

	.mc-text p {
		text-wrap: pretty;
	}
}