/*
Theme Name: Most (Child Theme)
Theme URI: http://madsparrow.us/
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Most Creative Agency and Portfolio Theme – The theme is built to take advantage of the Full Site Editing features introduced in WordPress and Elementor plugin, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, page transition
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: most
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Template: most
*/

/* Add your own modification from here
-------------------------------------------------------------- */

/* Icones dos cartoes de servico: o tema poe padding de 1rem na imagem; quando o
   WordPress informa width/height (ex.: 32px), sobra 0px para o desenho. */
.ms-sb--img.boxed img {
	box-sizing: content-box;
}

/* Avatar do autor dos posts (o simbolo da Starmoon).
   O tema monta a tag <img> sem largura nem altura, contando com o tamanho que o Gravatar
   devolvia pronto. Como agora a imagem e nossa e vem em 192px (para ficar nitida em telas
   de alta resolucao), o tamanho precisa ser definido aqui, nos mesmos valores que o tema
   pedia ao Gravatar: 45px nos cartoes e 28px no bloco de posts relacionados. */
.post-footer--author img[src$="avatar-starmoon.png"] {
	width: 45px;
	height: 45px;
}
.ms-rp--top img[src$="avatar-starmoon.png"] {
	width: 28px;
	height: 28px;
}
img[src$="avatar-starmoon.png"] {
	object-fit: contain;
	background: #fff;
}

/* Paginas de texto escritas direto no editor do WordPress, sem Elementor - hoje, a Politica
   de Privacidade. O tema zera a margem dos titulos porque conta com o Elementor para dar o
   espaco entre os blocos; numa pagina de texto corrido nao ha Elementor nenhum, e cada
   subtitulo fica colado no paragrafo de cima, sem separar um assunto do outro.
   O seletor usa a classe que o tema poe no conteudo dessas paginas, entao nada disso vaza
   para as paginas montadas no Elementor. */
.ms-default-page.entry-content h2 {
	margin: 2.2em 0 0.6em;
}
.ms-default-page.entry-content h3 {
	margin: 1.8em 0 0.5em;
}
.ms-default-page.entry-content p,
.ms-default-page.entry-content ul,
.ms-default-page.entry-content ol {
	margin: 0 0 1.1em;
}
.ms-default-page.entry-content ul,
.ms-default-page.entry-content ol {
	padding-left: 1.4em;
}
.ms-default-page.entry-content li {
	margin-bottom: 0.45em;
}
.ms-default-page.entry-content > :first-child {
	margin-top: 0;
}

/* Grade do portfolio no celular: o tema usa margem negativa de 24px de cada lado na grade,
   compensada por um padding igual nos cartoes. Em telas estreitas isso vazava 9px para fora
   e deixava a pagina rolar de lado. Como no celular os cartoes ja ficam um por linha, a
   margem e o padding sao desnecessarios ali.
   O !important e necessario porque quem aplica a margem e o CSS que o Elementor gera para a
   pagina (seletor .elementor-<id> .elementor-element-<id> .row), mais especifico que qualquer
   seletor que possamos escrever aqui. */
/* A lista do blog tem o mesmo defeito da grade do portfolio, com outros nomes de classe:
   .ms-posts--card.row leva margem de -32px de cada lado, compensada por um padding de 32px nos
   cartoes. Em tela estreita isso deixava a pagina do blog rolar 17px para o lado.
   Vale para todas as listas de posts: /blog/, resultados da busca e paginas de categoria. */
@media (max-width: 767px) {
	.portfolio-feed.row,
	.ms-posts--card.row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.portfolio-feed .grid-item-p,
	.ms-posts--card > .grid-item {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Texto das paginas de nicho (classe sm-texto-nicho, posta pelo tools\conteudo-nichos.php).
   Sao 400 palavras com subtitulos dentro de um unico bloco de texto do Elementor. O Elementor
   so sabe formatar o texto corrido desse bloco: os h3 escritos dentro dele nao tem ajuste no
   painel, entao a forma deles vem daqui.
   Os links aparecem na cor da marca e sublinhados de proposito - link que nao parece link nao
   e clicado, e esses dois links por pagina (servicos e contato) existem justamente para o
   visitante seguir adiante. */
.sm-texto-nicho h3 {
	font-size: 22px;
	line-height: 1.3;
	margin: 2em 0 0.6em;
}

.sm-texto-nicho p {
	margin: 0 0 1.1em;
}

.sm-texto-nicho p:last-child {
	margin-bottom: 0;
}

.sm-texto-nicho a {
	color: #D82878;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sm-texto-nicho a:hover {
	color: #A03890;
}

@media (max-width: 767px) {
	.sm-texto-nicho h3 { font-size: 20px; }
}