/* ------------------------------------------------------------------
   cleberalex.com/blog — article content styling reference
   Extracted 2026-08-18 from the live Oxygen stylesheets:
     /blog/wp-content/uploads/oxygen/css/universal.css  (the custom code)
     /blog/wp-content/uploads/oxygen/css/8.css          (header)
     /blog/wp-content/uploads/oxygen/css/12.css         (byline/author)
   All four reference posts render from these same three files.
   Fonts: Roboto (body) + Playfair Display (headings), Google Fonts.
   Brand: green #66ff66 highlight, pink #db0a5b accent, ink #241c15.
------------------------------------------------------------------ */

/* @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600,700|Playfair+Display:400,700'); */

/* --- 1. Base typography ------------------------------------------ */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 21px;
  font-weight: 300;
  line-height: 28.2667px;      /* ~1.346 — Oxygen writes it in px */
  color: #241c15;
  background-color: #f0f3f5;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 400; color: #241c15; }
h1 { font-size: 73px; line-height: 1.19; }
h2 { font-size: 48px; line-height: 1.25; }
h3 { font-size: 36px; line-height: 1.33333; }
h4 { font-size: 30px; line-height: 1.4; }
h5 { font-size: 24px; line-height: 1.5; }
h6 { font-size: 21px; line-height: 1.57; }

/* rem-based scale also declared in the custom block (kicks in with the
   responsive overrides at the bottom of this file) */
/* h1 3.48rem · h2 2.29rem · h3 1.71rem · h4 1.43rem · h5 1.14rem · h6 1rem */

/* Text rendering — applied to every paragraph */
p {
  text-shadow: 1px 1px 1px rgba(0,0,0,.004) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizelegibility !important;
}

/* --- 2. Article layout ------------------------------------------- */
.article {
  width: 70%;
  padding-left: 5%;
  padding-right: 5%;
  text-align: left;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1400px) { .article { width: 100%; } }

.article-header { width: 100%; padding-bottom: 70px; }
@media (max-width: 767px) { .article-header { padding-bottom: 20px; } }

.article-body { width: 100%; }

/* the rhythm of the content: 40px between every block */
.article-body p,
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6,
.article-body ul {
  margin: 0 0 40px 0;
}

/* --- 3. The signature H1 green swash ------------------------------ */
/* a green block painted behind the first ~247px of the title */
.article-h1 {
  letter-spacing: -0.01em;
  padding-top: 14px;
  position: relative;
  z-index: 0;
}
.article-h1::before {
  background: #6f6;
  content: "";
  display: block;
  height: 70px;
  left: 0;
  position: absolute;
  top: 0;
  width: 247px;
  z-index: -1;
}

/* --- 4. Links, highlights, selection ------------------------------ */
.article-body a {
  color: #db0a5b;
  border-bottom: 1px solid #db0a5b;
  border-bottom-color: #db0a5b;
  transition: .5s border-bottom-color;
  text-decoration: none;
}

mark, ins { background: #66ff66; text-decoration: none; }

::selection      { background-color: #db0a5b !important; color: #FFFFFF; }
::-moz-selection { background-color: #db0a5b !important; color: #FFFFFF; }

/* --- 5. The dotted section divider (Medium-style) ----------------- */
hr {
  display: block;
  border: 0;
  text-align: center;
  overflow: visible;
  margin: 60px 0 40px;
  height: 0;
}
hr::before {
  content: '......';
  display: inline-block;
  margin-left: .6em;
  color: rgba(0,0,0,.68);
  position: relative;
  top: -30px;
  -x-height-multiplier: 0.342;
  -baseline-multiplier: 0.22;
  font-family: medium-content-slab-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 1.5em;
}

/* --- 6. Images and captions --------------------------------------- */
.wp-block-image {
  max-width: 100%;
  margin-bottom: 2em;
  margin-left: 0;
  margin-right: 0;
}
.wp-block-image figcaption {
  margin-top: .5em;
  margin-bottom: 1em;
  color: #555d66;
  text-align: center;
  font-size: 18px;
  overflow-wrap: break-word;
}

/* --- 7. Code blocks ----------------------------------------------- */
pre {
  background: #efefff;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 18px;
  line-height: 1.6;
  margin: 40px 0;
  max-width: 100%;
  overflow: auto;
  padding: 40px;
  white-space: pre-line;
}
pre p { margin: 0 !important; }

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], textarea { background-color: #FFFFFF; }

/* --- 8. Byline / author block ------------------------------------- */
.byline {
  width: 90%;
  color: #828282;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: bold;
  line-height: 1.5;
  padding-left: 14px;
  vertical-align: middle;
}
.imagem-autor { border-radius: 100px; margin-bottom: 0; padding-bottom: 0; }
.imagem-autor > * { flex-direction: unset; }

/* author row above and below the article */
.article-author-top,
.article-bottom {
  width: 100%;
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media (max-width: 479px) {
  .article-author-top { margin-top: 20px; }
  .article-bottom {
    border-top: 2px solid #66ff66;
    padding-top: 20px;
    margin-top: 40px;
  }
}
/* from 12.css — the small meta line under the name */
.byline-label { display: inline; float: left; margin-right: 5px; font-size: 12px; font-weight: 600; color: #828282; }
.byline-value { display: inline; float: left; font-size: 12px; font-weight: 600; }
.byline-name  { display: inline; float: left; font-size: 18px; font-weight: 600; }
.author-avatar { border-radius: 500px; width: 70px; }

/* post-list titles */
.posts-block { width: 70%; }
@media (max-width: 991px) { .posts-block { width: 100%; } }
.posts-block .oxy-post-title {
  font-family: 'Playfair Display', serif;
  font-weight: normal;
  text-decoration: none;
  line-height: 48px;
}

/* --- 9. Responsive ------------------------------------------------ */
@media only screen and (max-width: 1120px) {
  body { font-size: 19px; }
  h1 { font-size: 3.84rem; } h2 { font-size: 2.53rem; } h3 { font-size: 1.89rem; }
  h4 { font-size: 1.58rem; } h5 { font-size: 1.26rem; } h6 { font-size: 1.11rem; }
}
@media only screen and (max-width: 768px) {
  body { font-size: 17px; }
  h1 { font-size: 4.29rem; } h2 { font-size: 2.82rem; } h3 { font-size: 2.12rem; }
  h4 { font-size: 1.76rem; } h5 { font-size: 1.41rem; } h6 { font-size: 1.24rem; }
}
@media only screen and (max-width: 480px) {
  .article-body p,
  .article-body h1, .article-body h2, .article-body h3,
  .article-body h4, .article-body h5, .article-body h6,
  .article-body ul { margin: 0 0 20px 0; }
  .article-h1 { font-size: 43px; line-height: 110%; }
  .article-h1::before { height: 44px; width: 120px; }
}

/* --- 10. Header / nav (for reference) ----------------------------- */
.oxy-header-row { background-color: #66ff66; padding-top: 15px; padding-bottom: 15px; }
.oxy-header-container, .ct-section-inner-wrap { max-width: 1400px; padding-left: 5%; padding-right: 5%; }
.oxy-nav-menu .menu-item a {
  padding: 20px; color: #241c15; font-size: 21px; font-weight: 300;
  text-transform: none; text-decoration: none; letter-spacing: -0.21px;
}
.oxy-nav-menu .menu-item:hover a,
.oxy-nav-menu .current-menu-item a { background-color: #66ff66; color: #241c15; }
.navbar { font-family: 'Playfair Display', serif; font-style: italic; line-height: 36px; text-decoration: none; }
.oxy-social-icons a svg { width: 1em; height: 1em; color: #241c15; }
.oxy-social-icons a:hover svg { color: #db0a5b; }