/*
 * components.css
 * Componentes reutilizáveis (section, container, card, heading, button, etc.).
 * Usam as variáveis --jrx-s-* definidas pelo pai .jrx-section[data-variant].
 */

/* ---------- Container ------------------------------------------------------ */
.jrx-container {
	width: 100%;
	max-width: var(--jrx-container-default);
	margin: 0 auto;
	padding-left: var(--jrx-container-gutter);
	padding-right: var(--jrx-container-gutter);
}
.jrx-container--wide { max-width: var(--jrx-container-wide); }
.jrx-container--boxed { max-width: var(--jrx-container-boxed); }
.jrx-container--full { max-width: 100%; padding-left: 0; padding-right: 0; }

/* ---------- Section -------------------------------------------------------- */
.jrx-section {
	background: var(--jrx-s-bg-custom, var(--jrx-s-bg, var(--jrx-color-bg)));
	background-image: var(--jrx-s-bg-gradient, var(--jrx-s-bg-image, none));
	background-repeat: no-repeat;
	background-position: var(--jrx-s-bg-position, center center);
	background-size: var(--jrx-s-bg-size, cover);
	color: var(--jrx-s-text, var(--jrx-color-text));
	padding-top: var(--jrx-section-py-top, var(--jrx-section-py));
	padding-bottom: var(--jrx-section-py-bottom, var(--jrx-section-py));
	position: relative;
	isolation: isolate;
}

.jrx-section > .jrx-container,
.jrx-section > .ct-container {
	position: relative;
	z-index: 2;
}

.jrx-section__overlay {
	position: absolute;
	inset: 0;
	background: var(--jrx-s-overlay, transparent);
	z-index: -1;
	pointer-events: none;
}

/* Vídeo de fundo (HTML5 / YouTube): camada atrás do overlay e do conteúdo */
.jrx-section--has-video-bg {
	overflow: hidden;
}

.jrx-section__video-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.jrx-section__video-wrap .jrx-section__video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* iframe não suporta object-fit de forma fiável: centraliza e amplia para “cover” */
.jrx-section__video-wrap .jrx-section__video-iframe {
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	object-fit: cover; /* Fallback visual; sizing principal vem do JS */
}


.jrx-section--has-video-bg .jrx-section__overlay {
	z-index: 1;
}

/* Encaixotado: o fundo, a variante visual e o overlay valem só na caixa do
   container, com elevação; a <section> fica no fundo da página. */
.jrx-section.is-boxed {
	background: var(--jrx-color-bg);
	background-image: none;
	color: inherit;
}

.jrx-section.is-boxed > .jrx-section__box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--jrx-radius-lg);
	color: var(--jrx-s-text, var(--jrx-color-text));
	background: var(--jrx-s-bg-custom, var(--jrx-s-bg, var(--jrx-color-bg)));
	background-image: var(--jrx-s-bg-gradient, var(--jrx-s-bg-image, none));
	background-repeat: no-repeat;
	background-position: var(--jrx-s-bg-position, center center);
	background-size: var(--jrx-s-bg-size, cover);
	box-shadow: var(--jrx-shadow-md);
	border: 1px solid var(--jrx-s-card-border);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* Overlay dentro da caixa fica abaixo do conteúdo, com o recorte do radius. */
.jrx-section.is-boxed > .jrx-section__box .jrx-section__overlay {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 0;
}

.jrx-section.is-boxed > .jrx-section__box > *:not(.jrx-section__overlay):not(.jrx-section__video-wrap):not(.jrx-editor-toolbar):not(.jrx-style-panel) {
	position: relative;
	z-index: 1;
}

.jrx-section.is-boxed > .jrx-section__box .jrx-section__video-wrap {
	z-index: 0;
}

/* Links de conteúdo: usam a cor de destaque da variante. Botões (Blocksy/Gutenberg)
   ficam fora — senão a cor forçada de link sobrescreve --theme-button-text-*. */
.jrx-section a:not(.ct-button):not(.ct-button-ghost):not(.wp-element-button):not(.wp-block-button__link):not(.button) {
	color: var(--jrx-s-accent);
	text-decoration: none;
	transition: opacity var(--jrx-transition);
}
.jrx-section a:not(.ct-button):not(.ct-button-ghost):not(.wp-element-button):not(.wp-block-button__link):not(.button):hover {
	opacity: 0.85;
}

.jrx-section h1,
.jrx-section h2,
.jrx-section h3,
.jrx-section h4,
.jrx-section h5,
.jrx-section h6 {
	color: var(--jrx-s-heading, var(--jrx-color-heading));
}

/* ---------- Section header ------------------------------------------------- */
.jrx-section-header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.jrx-section-header[data-align="center"] { text-align: center; align-items: center; }
.jrx-section-header[data-align="right"]  { text-align: right; align-items: flex-end; }
.jrx-section-header[data-align="left"]   { text-align: left; align-items: flex-start; }

.jrx-section-header__kicker {
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jrx-s-accent);
}
.jrx-section-header__title {
	margin: 0;
}
.jrx-section-header__description {
	color: var(--jrx-s-muted);
	max-width: 720px;
}

/* ---------- Card ----------------------------------------------------------- */
.jrx-card {
	background: var(--jrx-s-card-bg);
	border: 1px solid var(--jrx-s-card-border);
	color: var(--jrx-s-card-text);
	border-radius: var(--jrx-radius-md);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.jrx-card--image-side,
.jrx-card--media-side {
	flex-direction: row;
	align-items: stretch;
	padding: 0;
}

.jrx-card--image-side .jrx-card__media,
.jrx-card--media-side .jrx-card__media {
	margin: 0;
	border-radius: 0;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
	flex: 0 0 auto;
	width: var(--jrx-card-media-width, 38%);
	max-width: min(100%, var(--jrx-card-media-max-width, 100%));
}

.jrx-card--image-side .jrx-card__icon-wrap,
.jrx-card--media-side .jrx-card__icon-wrap {
	margin: 0;
	flex: 0 0 auto;
	width: var(--jrx-card-media-width, 38%);
	max-width: min(100%, var(--jrx-card-media-max-width, 100%));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.jrx-card--image-side .jrx-card__body,
.jrx-card--media-side .jrx-card__body {
	padding: 1.5rem;
	flex: 1 1 auto;
}

.jrx-card--image-cover,
.jrx-card--media-cover {
	justify-content: flex-end;
	color: #fff;
	padding: 1.5rem;
	aspect-ratio: var(--jrx-card-media-ratio, auto);
	min-height: var(--jrx-card-media-height, 12rem);
	height: auto;
}

.jrx-card--media-cover.jrx-card--ratio-original {
	min-height: var(--jrx-card-media-height, auto);
}

.jrx-card--image-cover .jrx-card__media,
.jrx-card--media-cover .jrx-card__media {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
	z-index: 0;
}

.jrx-card--image-cover .jrx-card__icon-wrap,
.jrx-card--media-cover .jrx-card__icon-wrap {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jrx-card--image-cover .jrx-card__media img,
.jrx-card--media-cover .jrx-card__media img {
	width: 100%;
	height: 100%;
	object-fit: var(--jrx-card-image-fit, cover);
	transform: none;
}

.jrx-card--image-cover .jrx-card__overlay,
.jrx-card--media-cover .jrx-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 30%,
		var(--jrx-card-overlay, rgba(0, 0, 0, 0.85)) 100%
	);
	z-index: 1;
	pointer-events: none;
}

.jrx-card--image-cover > .jrx-card__title,
.jrx-card--image-cover > .jrx-card__text,
.jrx-card--image-cover > .jrx-card__link,
.jrx-card--media-cover > .jrx-card__title,
.jrx-card--media-cover > .jrx-card__text,
.jrx-card--media-cover > .jrx-card__link {
	position: relative;
	z-index: 2;
}

.jrx-card--image-cover .jrx-card__title,
.jrx-card--image-cover .jrx-card__text,
.jrx-card--image-cover .jrx-card__link,
.jrx-card--media-cover .jrx-card__title,
.jrx-card--media-cover .jrx-card__text,
.jrx-card--media-cover .jrx-card__link {
	color: #fff;
}

.jrx-card[data-text-align="center"] { text-align: center; }
.jrx-card[data-text-align="right"] { text-align: right; }
.jrx-card[data-text-align="justify"] { text-align: justify; }
.jrx-card[data-text-align="center"]:not(.jrx-card--media-side) .jrx-card__icon {
	margin-left: auto;
	margin-right: auto;
}

.jrx-card__icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--jrx-radius-sm);
	background: color-mix(in srgb, var(--jrx-s-accent) 15%, transparent);
	color: var(--jrx-s-accent);
	font-size: 1.25rem;
}

.jrx-card--media-custom-size .jrx-card__icon {
	width: min(100%, 3rem);
	height: auto;
	aspect-ratio: 1;
}

.jrx-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

/* --- Mídia do card (aspect ratio, recorte, tamanho via CSS vars no .jrx-card) --- */
.jrx-card--ratio-1-1 { --jrx-card-media-ratio: 1 / 1; }
.jrx-card--ratio-4-3 { --jrx-card-media-ratio: 4 / 3; }
.jrx-card--ratio-16-10 { --jrx-card-media-ratio: 16 / 10; }
.jrx-card--ratio-16-9 { --jrx-card-media-ratio: 16 / 9; }
.jrx-card--ratio-3-4 { --jrx-card-media-ratio: 3 / 4; }
.jrx-card--ratio-9-16 { --jrx-card-media-ratio: 9 / 16; }
.jrx-card--ratio-original { --jrx-card-media-ratio: auto; }

.jrx-card__media {
	margin: 0 calc(1.5rem * -1) 0;
	overflow: hidden;
	max-width: min(100%, var(--jrx-card-media-max-width, 100%));
	width: var(--jrx-card-media-width, 100%);
	height: var(--jrx-card-media-height, auto);
	max-height: var(--jrx-card-media-max-height, none);
	margin-inline: auto;
}

/* Ícone: não usar width 100% (reservado à imagem); coluna lateral usa 38% ou tamanho custom */
.jrx-card__icon-wrap[data-media-ratio] {
	margin: 0 calc(1.5rem * -1) 0;
	max-width: min(100%, var(--jrx-card-media-max-width, 100%));
	width: auto;
	flex: 0 0 auto;
	margin-inline: auto;
}

.jrx-card--media-custom-size .jrx-card__icon-wrap[data-media-ratio] {
	width: var(--jrx-card-media-width, auto);
}

.jrx-card--media-side .jrx-card__media,
.jrx-card--media-side .jrx-card__icon-wrap[data-media-ratio] {
	margin: 0;
	margin-inline: 0;
	border-radius: 0;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

.jrx-card--image-side .jrx-card__icon-wrap[data-media-ratio],
.jrx-card--media-side .jrx-card__icon-wrap[data-media-ratio] {
	width: var(--jrx-card-media-width, 38%);
	max-width: min(100%, var(--jrx-card-media-max-width, 100%));
	flex: 0 0 auto;
}

/* Caixa com aspect ratio fixo (recorte cover/contain via --jrx-card-image-fit) */
.jrx-card__media:not([data-media-ratio="original"]) {
	aspect-ratio: var(--jrx-card-media-ratio);
}

.jrx-card__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	object-fit: var(--jrx-card-image-fit, cover);
}

.jrx-card__media:not([data-media-ratio="original"]) img {
	height: 100%;
}

/* Original: proporção natural; recorte só se altura/largura custom preencher a caixa */
.jrx-card__media[data-media-ratio="original"] {
	aspect-ratio: auto;
}

.jrx-card--ratio-original:not(.jrx-card--media-cover) .jrx-card__media {
	aspect-ratio: auto;
}

.jrx-card__media[data-media-ratio="original"] img,
.jrx-card--ratio-original:not(.jrx-card--media-cover) .jrx-card__media img {
	height: auto;
	max-height: var(--jrx-card-media-max-height, none);
	object-fit: var(--jrx-card-image-fit, cover);
}

/* Tamanho personalizado + original: caixa com dimensões → cover/contain aplicam */
.jrx-card--media-custom-size .jrx-card__media[data-media-ratio="original"] img {
	height: 100%;
}

/* --- Aparência livre (sem borda/padding; mídia respeita proporção) --- */
.jrx-card--appearance-plain {
	border: 0;
	padding: 0;
	background: transparent;
	overflow: visible;
	height: auto;
}

.jrx-card--appearance-plain.jrx-card--media-side,
.jrx-card--appearance-plain.jrx-card--image-side {
	align-items: flex-start;
}

.jrx-card--appearance-plain .jrx-card__body {
	padding: 0;
}

.jrx-card--appearance-plain.jrx-card--media-side .jrx-card__icon-wrap,
.jrx-card--appearance-plain.jrx-card--image-side .jrx-card__icon-wrap {
	padding: 0;
}

.jrx-card--appearance-plain .jrx-card__media,
.jrx-card--appearance-plain .jrx-card__icon-wrap[data-media-ratio] {
	margin: 0;
	margin-inline: 0;
}

.jrx-card--appearance-plain.jrx-card--media-side .jrx-card__media,
.jrx-card--appearance-plain.jrx-card--image-side .jrx-card__media,
.jrx-card--appearance-plain.jrx-card--media-side .jrx-card__icon-wrap,
.jrx-card--appearance-plain.jrx-card--image-side .jrx-card__icon-wrap {
	height: auto;
}

.jrx-card--appearance-plain .jrx-card__media:not([data-media-ratio="original"]) img,
.jrx-card--appearance-plain .jrx-card__media[data-media-ratio="original"] img {
	height: auto;
	max-height: var(--jrx-card-media-max-height, none);
}

.jrx-card--appearance-plain.jrx-card--media-custom-size .jrx-card__media[data-media-ratio="original"] img {
	height: auto;
}

/* Alinhamento da mídia — horizontal (mídia em cima) */
.jrx-card--media-top[data-media-align="left"] .jrx-card__media,
.jrx-card--media-top[data-media-align="left"] .jrx-card__icon-wrap[data-media-ratio] {
	margin-inline-start: 0;
	margin-inline-end: auto;
	width: var(--jrx-card-media-width, auto);
	max-width: min(100%, var(--jrx-card-media-max-width, 100%));
}

.jrx-card--media-top[data-media-align="center"] .jrx-card__media,
.jrx-card--media-top[data-media-align="center"] .jrx-card__icon-wrap[data-media-ratio] {
	margin-inline: auto;
}

.jrx-card--media-top[data-media-align="right"] .jrx-card__media,
.jrx-card--media-top[data-media-align="right"] .jrx-card__icon-wrap[data-media-ratio] {
	margin-inline-start: auto;
	margin-inline-end: 0;
	width: var(--jrx-card-media-width, auto);
	max-width: min(100%, var(--jrx-card-media-max-width, 100%));
}

/* Alinhamento da mídia — vertical (mídia ao lado) */
.jrx-card--media-side[data-media-align="left"] .jrx-card__media,
.jrx-card--media-side[data-media-align="left"] .jrx-card__icon-wrap,
.jrx-card--image-side[data-media-align="left"] .jrx-card__media,
.jrx-card--image-side[data-media-align="left"] .jrx-card__icon-wrap {
	align-self: flex-start;
}

.jrx-card--media-side[data-media-align="center"] .jrx-card__media,
.jrx-card--media-side[data-media-align="center"] .jrx-card__icon-wrap,
.jrx-card--image-side[data-media-align="center"] .jrx-card__media,
.jrx-card--image-side[data-media-align="center"] .jrx-card__icon-wrap {
	align-self: center;
}

.jrx-card--media-side[data-media-align="right"] .jrx-card__media,
.jrx-card--media-side[data-media-align="right"] .jrx-card__icon-wrap,
.jrx-card--image-side[data-media-align="right"] .jrx-card__media,
.jrx-card--image-side[data-media-align="right"] .jrx-card__icon-wrap {
	align-self: flex-end;
}

.jrx-card__title {
	margin: 0 !important;
	color: var(--jrx-s-heading);
}
.jrx-card__text {
	color: var(--jrx-s-muted);
	margin: 0 !important;
}
.jrx-card__text p {
	margin: 0 !important;
}
.jrx-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	color: var(--jrx-s-muted);
}

/* ---------- Botões --------------------------------------------------------- */
/*
 * O visual dos botões é herdado do Blocksy via .ct-button / .ct-button-ghost
 * (tokens --theme-button-*). As classes .jrx-btn / .jrx-btn--* são apenas
 * aliases semânticos e hooks para JS/seletores.
 *
 * .jrx-btn--plain: variação "ghost puro" (sem borda e fundo transparente),
 * complementar ao .ct-button-ghost padrão do Blocksy.
 *
 * O seletor .jrx-btn:not(.ct-button) existe só como fallback para conteúdo
 * legado que por ventura ainda emita .jrx-btn sem .ct-button.
 */

.jrx-btn.jrx-btn--plain,
.jrx-btn--plain.ct-button {
	--theme-button-border: 0;
	border-color: transparent;
	background-color: transparent;
}
.jrx-btn.jrx-btn--plain:hover,
.jrx-btn--plain.ct-button:hover {
	background-color: color-mix(in srgb, var(--theme-palette-color-1, currentColor) 12%, transparent);
	border-color: transparent;
}

/* Outline/ghost em seções com texto claro (dark, primary, gradient).
 * O Blocksy usa --theme-button-background-* no .ct-button-ghost para borda e texto. */
.jrx-section:where(
	[data-variant="dark"],
	[data-variant="primary"],
	[data-variant="gradient"]
) :is(.ct-button.ct-button-ghost, .jrx-btn--outline.ct-button) {
	--theme-button-background-initial-color: var(--jrx-s-btn-outline, var(--jrx-s-heading));
	--theme-button-background-hover-color: var(--jrx-s-btn-outline-hover-bg, var(--jrx-s-heading));
	--theme-button-text-hover-color: var(--jrx-s-btn-outline-hover-text, var(--jrx-color-primary));
}

.jrx-section:where(
	[data-variant="dark"],
	[data-variant="primary"],
	[data-variant="gradient"]
) .jrx-btn--plain.ct-button:hover,
.jrx-section:where(
	[data-variant="dark"],
	[data-variant="primary"],
	[data-variant="gradient"]
) .jrx-btn.jrx-btn--plain:hover {
	background-color: color-mix(in srgb, var(--jrx-s-heading) 14%, transparent);
	border-color: transparent;
}

.jrx-section:where(
	[data-variant="dark"],
	[data-variant="primary"],
	[data-variant="gradient"]
) .jrx-btn--outline:not(.ct-button) {
	color: var(--jrx-s-btn-outline, var(--jrx-s-heading));
	border-color: var(--jrx-s-btn-outline, var(--jrx-s-heading));
	background-color: transparent;
}

.jrx-section:where(
	[data-variant="dark"],
	[data-variant="primary"],
	[data-variant="gradient"]
) .jrx-btn--outline:not(.ct-button):hover {
	color: var(--jrx-s-btn-outline-hover-text, var(--jrx-color-primary));
	background-color: var(--jrx-s-btn-outline-hover-bg, var(--jrx-s-heading));
	border-color: var(--jrx-s-btn-outline-hover-bg, var(--jrx-s-heading));
}

.jrx-btn:not(.ct-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--theme-button-border-radius, var(--jrx-radius-pill));
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--jrx-transition), background var(--jrx-transition), color var(--jrx-transition);
}

.jrx-buttons {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.jrx-buttons--left {
	justify-content: flex-start;
}

.jrx-buttons--center {
	justify-content: center;
}

.jrx-buttons--right {
	justify-content: flex-end;
}

@media (max-width: 767px) {
	.jrx-card--image-side,
	.jrx-card--media-side {
		flex-direction: column;
	}
	.jrx-card--image-side .jrx-card__media,
	.jrx-card--media-side .jrx-card__media {
		border-radius: 0;
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
		width: 100%;
		max-width: 100%;
	}
	.jrx-card--image-side .jrx-card__icon-wrap,
	.jrx-card--media-side .jrx-card__icon-wrap {
		flex-basis: auto;
		width: var(--jrx-card-media-width, auto);
		max-width: min(100%, var(--jrx-card-media-max-width, 100%));
	}
}

.jrx-card__media img,
.jrx-card__image-wrap img,
.jrx-card__image {
	border-radius: var(--jrx-card-media-radius, inherit);
}

.jrx-card--accordion {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	width: 100%;
}

.jrx-card--accordion.jrx-faq {
	max-width: none;
	margin: 0;
	gap: 0;
}

.jrx-card--accordion .jrx-faq__item {
	border: 1px solid var(--jrx-s-card-border);
	border-radius: var(--jrx-radius-md);
	background: var(--jrx-s-card-bg);
	overflow: hidden;
}

.jrx-card--accordion .jrx-faq__trigger {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	text-align: left;
	padding: 1rem 1.25rem;
	font-weight: 600;
	border: none;
	background: transparent;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.jrx-card--accordion .jrx-faq__trigger::after {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: auto;
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.jrx-card--accordion .jrx-faq__item.is-open .jrx-faq__trigger::after {
	transform: rotate(-135deg);
}

.jrx-card--accordion .jrx-faq__panel {
	display: none;
}

.jrx-card--accordion .jrx-faq__item.is-open .jrx-faq__panel {
	display: block;
}

.jrx-card--accordion__thumb {
	flex: 0 0 auto;
	width: var(--jrx-card-media-max-width, 48px);
	max-width: 48px;
}

.jrx-card--accordion__thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--jrx-card-media-radius, var(--jrx-radius-sm));
	object-fit: var(--jrx-card-image-fit, cover);
}

.jrx-card--accordion__icon {
	flex: 0 0 auto;
}

.jrx-card--accordion__label {
	flex: 1 1 auto;
	min-width: 0;
}

.jrx-card--accordion .jrx-faq__panel-inner {
	padding: 0 1.25rem 1.25rem;
}

/* ---------- Ícones FontAwesome defensivo ----------------------------------- */
.jrx-icon i { line-height: 1; }