/* These styles are used in the backend editor AND in the Theme (frontend) */

/* Most themes nowadays provide an extra stylesheet of classes which WordPress itself then */
/* applies to the backend editor TinyMCE. However, custom CSS - set in Plugins, in the WP  */
/* Customizer or in Theme options, will normally not be reflected to TinyMCE. So better to */
/* put such styles all here, where they will apply to TinyMCE *and* the frontend.          */

/* The goal is not only to make the visual editor display look as much like the frontend as    */
/* possible, but also to make sure that all important CSS classes are available for convenient */
/* selection in TinyMCEs "Formats" dropdown - so do not forget to configure the TinyMCE styles */
/* dropdown with elements to match those here.                                                 */

/* If you do not need this file then upload an empty one (zero bytes) which will not be loaded at all. */

/* Suggested general non-tag-specific visual styles */

.list       { margin: 0.35rem 0; }
.topless    { margin-top: 0 !important; }
.bottomless { margin-bottom: 0 !important; }
.beforelist { margin-bottom: 0.5rem; }
.lastitemem { margin-bottom: 0; padding-bottom: 1.3rem; }

strong { font-weight: bold; }
/* Revert to normal text within strong */
.notstrong { font-weight: normal; }

.smaller { font-size: 0.95rem; line-height: 1.25; }
.small   { font-size: 0.89rem; line-height: 1.2; }

.screen-reader-text, .dispnone { display: none; }

/* Append your site-specific styles here */




/* [EDITOR] Headings - FONT FAMILY */
body.wp-editor.post-type-post h2,
body.wp-editor.post-type-post h3,
body.wp-editor.post-type-post h4,
body.wp-editor.post-type-post h5,
body.wp-editor.post-type-post h6 {
	font-family: Oswald;
}

/* [EDITOR] Paragraph - FONT FAMILY */
body.wp-editor.post-type-post p {
	font-family: Lato; 
}

/* [EDITOR] List element - FONT FAMILY */
body.wp-editor.post-type-post li {
	font-family: Lato; 
}

/* [EDITOR] Hiperlinks */
body.wp-editor.post-type-post a {
    color: #8d1622;
    font-weight: 900;
    text-decoration: underline;	
}

/* [FRONT] Hiperlinks */
body:not(.wp-editor).single-post a {
    color: #dd2235;
    font-weight: 900;	
    text-decoration: underline;	
}

/* [EDITOR] Paragraph */
body.wp-editor.post-type-post p {
	font-size: 17px;
	line-height: 27px;
	color: #1d1d1d;
}

/* [EDITOR] List element */
body.wp-editor.post-type-post li {
	font-size: 17px;
	line-height: 27px;
	color: #1d1d1d;
}

.dark-mode body.wp-editor.post-type-post p { 
	color: yellow;	
}

/* [EDITOR] Paragraph (mobile) */
@media (max-width: 768px) {
body.wp-editor.post-type-post p {
	/* put here */
}}

/* [FRONT] Paragraph */
body:not(.wp-editor).single-post p {
	/* put here */
}

/* [FRONT] Paragraph (mobile) */
@media (max-width: 768px) {
body:not(.wp-editor).single-post p {
	/* put here */
}}

/* [EDITOR] List item (mobile) */
@media (max-width: 768px) {
body.wp-editor.post-type-post li {
	font-size: 17px;
	line-height: 27px;
	color: #1d1d1d;
}}

/* [FRONT] List item */
body:not(.wp-editor).single-post li {
	color: #c0c0c0;
}

/* [FRONT] List item (mobile) */
@media (max-width: 768px) {
body:not(.wp-editor).single-post li {
	color: #c0c0c0;
}}




/* [EDITOR] Headings h2 */
body.wp-editor.post-type-post h2 {
	color: #f4780b;
	font-size: 27px;
	font-weight: 500;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* [EDITOR] Headings h2 (mobile) */
@media (max-width: 768px) {
body.wp-editor.post-type-post h2 {
	color: #f4780b;
	font-size: 25px;
}}

/* [FRONT] Headings h2 */
body:not(.wp-editor).single-post h2 {
	color: #f5821f;
    font-size: 27px;
	font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* [FRONT] Headings h2 (mobile) */
@media (max-width: 768px) {
body:not(.wp-editor).single-post h2 {
	color: #f5821f;
	font-size: 25px;
}}










/* [EDITOR] Headings h3 */
body.wp-editor.post-type-post h3 {
	color: #585858;
    border-bottom: rgb(0 0 0 / 32%);
    border-bottom-width: 1px;
    border-bottom-style: solid;	
	font-size: 24px;
	font-weight: 400;	
    line-height: 1.3;
    margin-bottom: 20px;
}

/* [EDITOR] Headings h3 (mobile) */
@media (max-width: 768px) {
body.wp-editor.post-type-post h3 {
	color: #585858;
    border-bottom: rgb(0 0 0 / 32%);
    border-bottom-width: 1px;
    border-bottom-style: solid;		
	font-size: 23px;
}}

/* [FRONT] Headings h3 */
body:not(.wp-editor).single-post h3 {
	color: #dedede;
    font-size: 24px;
	font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* [FRONT] Headings h3 (only entry-content) */
body:not(.wp-editor).single-post .entry-content h3 {
    border-bottom: rgb(255 255 255 / 32%);
    border-bottom-width: 1px;
    border-bottom-style: solid;		
}

/* [FRONT] Headings h3 (mobile) */
@media (max-width: 768px) {
body:not(.wp-editor).single-post h3 {
	color: #dedede;
	font-size: 23px;
}}

/* [FRONT] Headings h3 (mobile) (only entry-content) */
@media (max-width: 768px) {
body:not(.wp-editor).single-post h3 {	
    border-bottom: rgb(255 255 255 / 32%);
    border-bottom-width: 1px;
    border-bottom-style: solid;	
}}









/* [EDITOR] Headings h4 */
body.wp-editor.post-type-post h4 {
	color: #d6690a;
    font-size: 21px; 
    font-weight: 400;
    line-height: 1.3;	
    margin-bottom: 15px;	
}

/* [EDITOR] Headings h4 (mobile) */
@media (max-width: 768px) {
body.wp-editor.post-type-post h4 {
	color: #d6690a;
	font-size: 21px; 
}}

/* [FRONT] Headings h4 */
body:not(.wp-editor).single-post h4 {
	color: #f5831f;
    font-size: 22px;
	font-weight: 100;
    line-height: 1.3;
    margin-bottom: 15px;
}

/* [FRONT] Headings h4 (mobile) */
@media (max-width: 768px) {
body:not(.wp-editor).single-post h4 {
	color: #f5831f;
	font-size: 20px;
}}

/* [FRONT & EDITOR] Instagram - iframe for blog posts (center) */
body:not(.wp-editor).single-post iframe.instagram-media:not(.instagram-media-rendered) { opacity: 0 }

body.wp-editor.post-type-post blockquote.instagram-media,
body:not(.wp-editor).single-post iframe.instagram-media-rendered,
body:not(.wp-editor).single-post blockquote.instagram-media,
body:not(.wp-editor).single-post blockquote.instagram-media-registered {
    margin: 0 auto !important;
	margin-top: 30px !important;
	margin-bottom: 30px !important;
	box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05) !important;
	border-color: #f5821f !important;
    border-width: 3px !important;
    border-style: groove !important;
	min-width: 250px !important;
	opacity: 1;
}

/* [EDITOR] Show placeholder of instagram post inline (DESKTOP)*/
@media (min-width: 768px) {
body.wp-editor.post-type-post .instagram_inline_container {
    margin-bottom: 10px !important;
    background: url(/wp-content/uploads/webqualitat/blog/editor/instagram-post-placeholder.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 590px;
    height: 997px;
    margin: 0 auto;
}}

/* [EDITOR] Show placeholder of of instagram post inline (MOBILE)*/
@media (max-width: 768px) {
body.wp-editor.post-type-post .instagram_inline_container {
    margin-bottom: 10px !important;
    background: url(/wp-content/uploads/webqualitat/blog/editor/instagram-post-placeholder.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 313px;
    height: 528px;
    margin: 0 auto;
}}

/* [EDITOR] Hide shortcode of mailter signup newsletters form inline */
body.wp-editor.post-type-post .instagram_inline_shortcode {
    display: none;
}





/* [FRONT & EDITOR] Images inserted as attachment */
body:not(.wp-editor).single-post img[class*=wp-image-],
body:not(.wp-editor).single-post img[class*=attachment-],
body.wp-editor.post-type-post img[class*=wp-image-],
body.wp-editor.post-type-post img[class*=attachment-] {
	border-top-left-radius: 37px 140px;
  	border-top-right-radius: 23px 130px;
  	border-bottom-left-radius: 110px 19px;
  	border-bottom-right-radius: 120px 24px;
  	border: solid 3px #f5821f;
  	transform: rotate(-1deg);
	box-shadow: 5px 29px 73px 0 rgb(138 138 138 / 27%);	
  	transition: all 0.13s ease-in;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* [FRONT] Images inserted as attachment (hover) */
body:not(.wp-editor).single-post img[class*=wp-image-]:hover,
body:not(.wp-editor).single-post img[class*=attachment-]:hover {
  transform: translateY(-10px) rotate(1deg);
  box-shadow: 5px 29px 73px 0 rgb(138 138 138 / 57%);
}

/* [EDITOR] Images inserted as attachment */
body.wp-editor.post-type-post img[class*=wp-image-],
body.wp-editor.post-type-post img[class*=attachment-] {
    display: block;
	width: 60%;
    margin: 25px auto;	
  	box-shadow: 5px 29px 73px 0 rgb(95 95 95 / 44%);
}

/* [FRONT & EDITOR] Images inserted as attachment (only for 512px) */
body:not(.wp-editor).single-post img[class*=wp-image-][width="512"],
body:not(.wp-editor).single-post img[class*=attachment-][width="512"],
body.wp-editor.post-type-post img[class*=wp-image-][width="512"],
body.wp-editor.post-type-post img[class*=attachment-][width="512"] {
   width: 320px;
   border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;	
   border:dashed 5px #f5821f;
   filter: brightness(0.8);
}

/* [FRONT & EDITOR] Images inserted as attachment (only for PNG) */
body:not(.wp-editor).single-post img[class*=wp-image-][src$=".png"],
body:not(.wp-editor).single-post img[class*=attachment-][src$=".png"],
body.wp-editor.post-type-post img[class*=wp-image-][src$=".png"],
body.wp-editor.post-type-post img[class*=attachment-][src$=".png"] {
    border: none;
    box-shadow: none;
    margin-top: 0px;
    margin-bottom: 0px;
	width: 320px;
	filter: drop-shadow(2px 4px 30px rgba(255,130,31,1));
}

/* [FRONT & EDITOR] Youtube videos inserted as links */
body:not(.wp-editor).single-post .container-youtube,
body.wp-editor.post-type-post .container-youtube {   
	border-color: #c01e2f;
    border-width: 7px;
    border-style: groove;
    box-shadow: 5px 19px 53px 0 rgb(80 80 80);
}






/* [EDITOR] Show placeholder of mailter signup newsletters form inline (DESKTOP)*/
@media (min-width: 768px) {
body.wp-editor.post-type-post .mailster_lead_inline_container {
    margin-bottom: 10px !important;
    background: url(/wp-content/uploads/webqualitat/blog/editor/placeholder-mailster-blog-inline-desktop.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 570px;
    height: 244px;
    margin: 0 auto;
}}

/* [EDITOR] Show placeholder of mailter signup newsletters form inline (MOBILE)*/
@media (max-width: 768px) {
body.wp-editor.post-type-post .mailster_lead_inline_container {
    margin-bottom: 10px !important;
    background: url(/wp-content/uploads/webqualitat/blog/editor/placeholder-mailster-blog-inline-mobile.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 313px;
    height: 244px;
    margin: 0 auto;
}}

/* [EDITOR] Hide shortcode of mailter signup newsletters form inline */
body.wp-editor.post-type-post .mailster_lead_inline_shortcode {
    display: none;
}



/* TEST QUOTES */

body.wp-editor.post-type-post .quote-style-1,
body:not(.wp-editor).single-post .quote-style-1 {
  font-family: "Oswald";
  font-size:20px;
  line-height: 1.2;
  background:url(https://thiagovarella.com.br/wp-content/uploads/webqualitat/blog/icon-svg/doubt/asset-01.svg);	
}

body.wp-editor.post-type-post .quote-style-1 blockquote,
body:not(.wp-editor).single-post .quote-style-1 blockquote {
    position: relative; 
    text-align: center;
    padding: 1rem 1.2rem;
    width: 90%;  /* create space for the quotes */
    color: #dedede;
    margin: 0 auto;
    background: linear-gradient(to right, #f5821f 4px, transparent 4px) 0 100%,
    			linear-gradient(to left, #f5821f 4px, transparent 4px) 100% 0,
    			linear-gradient(to bottom, #f5821f 4px, transparent 4px) 100% 0,
    			linear-gradient(to top, #f5821f 4px, transparent 4px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
	border: none ;	/* remove theme original border */
}

/* -- create the quotation marks -- */
body.wp-editor.post-type-post .quote-style-1 blockquote:before,
body.wp-editor.post-type-post .quote-style-1 blockquote:after,
body:not(.wp-editor).single-post .quote-style-1 blockquote:before,
body:not(.wp-editor).single-post .quote-style-1 blockquote:after {
    font-family: FontAwesome;
    position: absolute;
    color: #f5821f;
    font-size: 34px;
}

body.wp-editor.post-type-post .quote-style-1 blockquote:before,
body:not(.wp-editor).single-post .quote-style-1 blockquote:before {
    content: "\f10d";
    top: -12px;
    margin-right: -20px;
    right: 100%;
}
body.wp-editor.post-type-post .quote-style-1 blockquote:after,
body:not(.wp-editor).single-post .quote-style-1 blockquote:after {
    content: "\f10e";
    margin-left: -20px;
    left: 100%;  
    top: auto;
    bottom: -20px;
}