/*
 * Category header and long-form text pages ("Entenda", "A Hipno Online").
 *
 * Linked from hipnoonline/content-css.phtml with ?v=<mtime> at the end of the body, so it reaches past
 * the `expires max` cache and wins over local.css without !important. The text markup it styles is
 * normalised first by HipnoOnline_Content_Helper_Data::prettify() (real h2/h3 headings, no font-size
 * spans, no spacer paragraphs), which is what makes a consistent rhythm possible at all.
 *
 * Brand: lime #a8df00 (too light for text, used for accents only), dark #322c29.
 */

/* ---------- Category header (every category) ---------------------------------------------------- */

.category-description.hn-cat-head {
	position: relative;
	border: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(50, 44, 41, .08), 0 8px 24px -12px rgba(50, 44, 41, .18);
	padding: 34px 40px 30px;
	margin: 0 0 30px;
	text-align: center;
	color: #6b6561;
	overflow: hidden;
}
.category-description.hn-cat-head:before {
	content: '';
	position: absolute; left: 0; right: 0; top: 0;
	height: 4px;
	background: linear-gradient(90deg, #a8df00, #7cc300);
}
.category-description.hn-cat-head h1 {
	margin: 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 300;
	letter-spacing: -.5px;
	text-transform: none;
	color: #322c29;
}
.category-description.hn-cat-head .hn-cat-lead {
	max-width: 680px;
	margin: 14px auto 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #6b6561;
}
.category-description.hn-cat-head .hn-cat-lead p { margin: 0 0 .6em; }
.category-description.hn-cat-head .hn-cat-lead p:last-child { margin-bottom: 0; }
.category-description.hn-cat-head .link-rss {
	position: absolute; right: 16px; top: 14px;
	font-size: 11px; color: #a39d99;
}

/* Text pages: a taller, more editorial header. */
.category-description.hn-cat-head--page { padding: 48px 40px 42px; }
.category-description.hn-cat-head--page h1 { font-size: 38px; }
.category-description.hn-cat-head--page h1:after {
	content: '';
	display: block;
	width: 56px; height: 3px;
	margin: 18px auto 0;
	border-radius: 2px;
	background: #a8df00;
}
.category-description.hn-cat-head--page .hn-cat-lead { font-size: 17px; margin-top: 18px; }

/* ---------- Long-form text ---------------------------------------------------------------------- */

.hn-content {
	max-width: 760px;
	margin: 0 auto 60px;
	padding: 6px 0 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.75;
	color: #3b3633;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}
.hn-content .texto_conteudo { font-size: inherit; }

/* Anything the cleanup did not unwrap (a span with a colour, say) still follows the page's size. */
.hn-content span[style*="font-size"],
.hn-content font { font-size: inherit !important; line-height: inherit; }

.hn-content p { margin: 0 0 1.15em; }

.hn-content h1, .hn-content h2, .hn-content h3, .hn-content h4 {
	font-family: 'Open Sans', Arial, sans-serif;
	text-transform: none;
	letter-spacing: -.2px;
	color: #322c29;
}
.hn-content h1, .hn-content h2 {
	position: relative;
	margin: 2.1em 0 .7em;
	padding-left: 16px;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 700;
}
.hn-content h1:before, .hn-content h2:before {
	content: '';
	position: absolute; left: 0; top: .2em; bottom: .2em;
	width: 4px;
	border-radius: 2px;
	background: #a8df00;
}
.hn-content h3, .hn-content h4 {
	margin: 1.8em 0 .5em;
	font-size: 19px;
	line-height: 1.4;
	font-weight: 700;
}
.hn-content > :first-child,
.hn-content .texto_conteudo > :first-child { margin-top: 0; }

.hn-content strong, .hn-content b { font-weight: 700; color: #2a2522; }

.hn-content a {
	color: #4d7a00;
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(rgba(168, 223, 0, .55), rgba(168, 223, 0, .55));
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: color .15s, background-size .15s;
}
.hn-content a:hover { color: #322c29; background-size: 100% 100%; }
.hn-content a strong { color: inherit; }

/* Lists: the theme puts a sprite bullet on .std ul.disc li; replace it with a brand dot. */
.hn-content ul, .hn-content ol { margin: 0 0 1.3em; padding: 0; }
.hn-content ul { list-style: none; }
.hn-content ol { padding-left: 1.4em; }
.hn-content ul li,
.hn-content.std ul.disc li,
.hn-content ul.disc li {
	position: relative;
	margin: 0 0 .45em;
	padding: 0 0 0 24px;
	line-height: 1.65;
	background: none;
}
.hn-content ul li:before {
	content: '';
	position: absolute; left: 4px; top: .68em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #a8df00;
}
.hn-content ol li { margin: 0 0 .45em; padding-left: 4px; }

/* Paragraphs that are wholly italic are quotations. */
.hn-content p.hn-quote,
.hn-content blockquote {
	margin: 1.6em 0;
	padding: 18px 24px;
	border-left: 4px solid #a8df00;
	border-radius: 0 6px 6px 0;
	background: #f4f8e8;
	font-size: 18px;
	line-height: 1.65;
	color: #4a4440;
}
.hn-content p.hn-quote em, .hn-content p.hn-quote i { font-style: italic; }
.hn-content blockquote p { margin: 0 0 .8em; }
.hn-content blockquote p:last-child { margin-bottom: 0; }
.hn-content blockquote p.hn-cite {
	font-size: 15px;
	font-style: normal;
	color: #6b6561;
}
.hn-content blockquote p.hn-cite:before { content: '\2014\00a0'; color: #a8df00; }
.hn-content blockquote p.hn-cite strong { color: #4d7a00; }

.hn-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}
.hn-content img[style*="float: left"], .hn-content img[style*="float:left"], .hn-content img[align="left"] {
	margin: 6px 28px 16px 0 !important;
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
}
.hn-content img[style*="float: right"], .hn-content img[style*="float:right"], .hn-content img[align="right"] {
	margin: 6px 0 16px 28px !important;
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
}
.hn-content:after { content: ''; display: table; clear: both; }

.hn-content table { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: 15px; }
.hn-content table td, .hn-content table th { padding: 10px 12px; border-bottom: 1px solid #ebe8e4; vertical-align: top; }
.hn-content hr { margin: 2.4em 0; border: 0; border-top: 1px solid #e6e2dd; }

/* ---------- Table of contents (a list made only of links) --------------------------------------- */

.hn-content ul.hn-toc, .hn-content ol.hn-toc {
	counter-reset: hn-toc;
	max-width: 620px;
	margin: 0 auto 1.5em;
	padding: 0;
	list-style: none;
}
.hn-content .hn-toc li {
	counter-increment: hn-toc;
	margin: 0 0 12px;
	padding: 0;
	text-align: left;
}
.hn-content .hn-toc li:before { display: none; }
.hn-content .hn-toc li a {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	border: 1px solid #ebe8e4;
	border-radius: 8px;
	background: #fff;
	font-size: 17px;
	font-weight: 600;
	color: #322c29;
	box-shadow: 0 1px 2px rgba(50, 44, 41, .05);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hn-content .hn-toc li a:before {
	content: counter(hn-toc);
	flex: 0 0 34px;
	height: 34px;
	border-radius: 50%;
	background: #f1f8dc;
	color: #4d7a00;
	font-size: 15px;
	font-weight: 700;
	line-height: 34px;
	text-align: center;
}
.hn-content .hn-toc li a:after {
	content: '\203A';
	margin-left: auto;
	font-size: 26px;
	line-height: 1;
	color: #a8df00;
}
.hn-content .hn-toc li a:hover {
	border-color: #a8df00;
	box-shadow: 0 8px 22px -12px rgba(77, 122, 0, .55);
	transform: translateY(-1px);
	color: #322c29;
}
/* The TOC's own title, which the cleanup turns into an h2, sits centred above the cards. */
.hn-content h2.hn-heading:first-child,
.hn-content .texto_conteudo > h2.hn-heading:first-child + .hn-toc { margin-top: 0; }
.hn-content h2.hn-heading + .hn-toc { margin-top: 1em; }
.hn-content h2:has(+ .hn-toc) {
	padding-left: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #8a847f;
}
.hn-content h2:has(+ .hn-toc):before { display: none; }

/* ---------- Product listing on categories -------------------------------------------------------- */

.catalog-category-view .products-list > li.item {
	padding: 22px;
	margin: 0 0 22px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(50, 44, 41, .07), 0 10px 28px -18px rgba(50, 44, 41, .25);
	transition: box-shadow .2s;
}
.catalog-category-view .products-list > li.item:hover {
	box-shadow: 0 1px 3px rgba(50, 44, 41, .08), 0 16px 34px -16px rgba(50, 44, 41, .32);
}
.catalog-category-view .products-list .product-name {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.2px;
}
.catalog-category-view .products-list .product-name a { color: #322c29; }
.catalog-category-view .products-list .product-name a:hover { color: #4d7a00; }
.catalog-category-view .products-list .desc {
	font-size: 15px;
	line-height: 1.65;
	color: #57514d;
}

@media only screen and (max-width: 767px) {
	.category-description.hn-cat-head { padding: 26px 20px 22px; }
	.category-description.hn-cat-head h1 { font-size: 26px; }
	.category-description.hn-cat-head--page { padding: 34px 20px 30px; }
	.category-description.hn-cat-head--page h1 { font-size: 28px; }
	.category-description.hn-cat-head .hn-cat-lead { font-size: 15px; }
	.hn-content { font-size: 16px; padding: 0 4px; }
	.hn-content h1, .hn-content h2 { font-size: 21px; }
	.hn-content h3, .hn-content h4 { font-size: 17px; }
	.hn-content img[style*="float"] { float: none !important; display: block; margin: 0 auto 20px !important; }
	.hn-content .hn-toc li a { padding: 14px 16px; font-size: 16px; }
	.catalog-category-view .products-list > li.item { padding: 14px; }
}