/* ==========================================================================
   Reset CSS inicial
   ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  background: #060403;
  color: #eee7db;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Fontes
   ========================================================================== */

:root {
  --special-elite-regular: "Special Elite", system-ui;
  --slackey-regular: "Slackey", sans-serif;
  --barlow-semi-condensed-extralight: "Barlow Semi Condensed", sans-serif;
  --barlow-semi-condensed-regular: "Barlow Semi Condensed", sans-serif;
  --barlow-semi-condensed-semibold: "Barlow Semi Condensed", sans-serif;
  --barlow-semi-condensed-extralight-italic: "Barlow Semi Condensed", sans-serif;
  --barlow-semi-condensed-regular-italic: "Barlow Semi Condensed", sans-serif;
  --barlow-semi-condensed-semibold-italic: "Barlow Semi Condensed", sans-serif;
}

body {
  font-family: var(--barlow-semi-condensed-regular);
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}

.font_links_destaque {
  font-family: var(--special-elite-regular);
  font-weight: 400;
  font-style: normal;
}

/* ==========================================================================
   Tipografia geral
   ========================================================================== */

.h2_geral {
  font-family: var(--slackey-regular);
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  margin-bottom: 16px;
  color: #373635;
  background: url(images/fundo_hs.png) right center repeat-y;
  display: inline-block;
  padding: 8px 32px 6px 8px;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Estrutura geral
   ========================================================================== */

.full_body {
  width: 100%;
  height: 100%;
  background-color: #060403;
}

.all_content {
  width: 100%;
  background-color: #406933;
  border-radius: 0px 0px 20px 20px;
  padding: 0px 0px 32px 0px;
}

/* Header
   ---------------------------------------------------------------------- */

header {
  width: 100%;
  background: url(images/fundo_header.png) -100px center repeat-x;
}

.header_content {
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1 {
  height: 80px;
  width: 300px;
  background: url(images/logo-camilo.png) center center no-repeat;
  opacity: 0.70;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

button.menu-toggle {
  display: none;
}

.all_content nav ul {
  display: inline-flex;
}

/* Link destaque (componente)
   ---------------------------------------------------------------------- */

.link_destaque a,
a .link_destaque,
a.link_destaque,
.links_tags li.link_destaque a {
  position: relative;
  display: inline-block;
  background-color: #F78400;
  color: #282726;
  font-family: var(--special-elite-regular);
  font-size: 16px;
  padding: 8px 14px 8px 8px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  transform-origin: center;
  border-radius: 2px 0 0 2px;
  font-style: normal;
}

.link_destaque a::after,
a .link_destaque::after,
a.link_destaque::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 8px;
  height: 100%;
  background-image:
    linear-gradient(135deg, #F78400 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, #F78400 50%);
  background-size: 4px 7px;
  background-repeat: repeat-y;
}

.link_destaque a:hover,
a .link_destaque:hover,
a.link_destaque:hover {
  background-color: #c76c03;
  color: #171716;
}

.link_destaque a:hover::after,
a .link_destaque:hover::after,
a.link_destaque:hover::after {
  background-image:
    linear-gradient(135deg, #c76c03 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, #c76c03 50%);
}

.single_page .link_destaque a,
.links_tags li.link_destaque a {
  font-size: 12px;
  background-color: #d5aa3d;
}

.single_page .link_destaque a:hover {
  background-color: #b38c2f;
  color: #171716;
}

.single_page .link_destaque a::after {
  background-image:
    linear-gradient(135deg, #d5aa3d 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, #d5aa3d 50%);
}

.single_page .link_destaque a:hover::after {
  background-image:
    linear-gradient(135deg, #b38c2f 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, #b38c2f 50%);
}

.current-menu-item a, .current-menu-item a:hover {
  background-color: #282726;
  color: #eee7db;
}

.current-menu-item a::after, .current-menu-item a:hover::after {
  background-image:
    linear-gradient(135deg, #282726 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, #282726 50%);
}

/* Conteúdo principal / grade de posts
   ---------------------------------------------------------------------- */

.main_content {
  border-radius: 6px;
  border: 1px solid #2E875A;
  background: repeat url(images/fundo_grade.png) -8px -8px;
}

.posts-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.posts-grid article {
  text-align: center;
}

.posts-grid article a img {
  transition: transform 0.3s ease;
}

.posts-grid article a:hover img {
  transform: rotate(-2deg);
}

/* Paginação
   ---------------------------------------------------------------------- */

nav.pagination {
  display: flex;
  justify-content: center;
  margin: 64px 0 32px 0;
}

nav.pagination a {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

a.next-page-link {
  background: url(images/fundo_paginacao.png) top right repeat-y;
  color: #065d83;
  font-family: var(--slackey-regular);
  padding: 8px 40px 8px 8px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  transform-origin: center;
  transform: rotate(-2deg);
  border-radius: 2px;
  margin: 0 8px;
}

a.next-page-link:hover {
  color: #065d83;
  transform: rotate(2deg);
}

a.prev-page-link {
  background: url(images/fundo_paginacao_prev.png) top right repeat-y;
  color: #065d83;
  font-family: var(--slackey-regular);
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  transform-origin: center;
  transform: rotate(2deg);
  border-radius: 2px;
  margin: 0 8px;
}

a.prev-page-link:hover {
  color: #065d83;
  transform: rotate(-2deg);
}

/* Página single
   ---------------------------------------------------------------------- */

.single_page {
  position: relative;
  width: calc(100% - 64px);
  padding: 32px;
  background: #eee7db url(images/fundo_geral_single.jpg) bottom center repeat;
  color: #282726;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  margin-top: 16px;
  border-radius: 4px 0px 6px 3px;
}

.single_page::before,
.single_page::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  height: 16px;
}

.single_page::before {
  top: -16px;
  background: url(images/fundo_single_top.png) 0 1px repeat-x;
}

.single_page::after {
  bottom: -16px;
  background: url(images/fundo_single_botton.png) 0 0 repeat-x;
}

.single_page h2 {
  font-family: var(--slackey-regular);
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #373635;
  display: block;
}

.single_page small {
  font-family: var(--special-elite-regular);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #065d83;
  margin: 8px 0;
  transform-origin: center;
  transform: rotate(2.5deg);
  display: inline-block;
}

.single_page nav ul {
  gap: 16px;
}

.links_tags {
  display: flex;
  margin: 0 0 16px 0;
}

.links_tags nav ul {
  margin: 0;
  padding: 0;
}

.links_tags nav ul li {
  list-style: none;
}

.links_tags .shop {
  margin-left: auto;
  margin-top: 0px;
}

.shop .link_destaque a {
  background-color: #406933;
  color: #eee7db;
  font-size: 16px;
}

.shop .link_destaque a:hover {
  background-color: #2E875A;
  color: #eee7db;
}

.shop .link_destaque a::after {
  background-image:
    linear-gradient(135deg, #406933 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, #406933 50%);
}

.shop .link_destaque a:hover::after {
  background-image:
    linear-gradient(135deg, #2E875A 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, #2E875A 50%);
}

.single_page img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto;
}

.single_page p {
  margin: 16px 0;
  line-height: 1.1;
}

.single_page strong,
.page_404 strong {
  font-weight: 600;
  font-family: var(--barlow-semi-condensed-semibold);
}

.single_page p a,
.single_page li a {
  color: #065d83;
  text-decoration: underline;
  font-family: var(--barlow-semi-condensed-regular-italic);
  font-style: italic;
}

.single_page ul,
.single_page ol {
  margin: 16px 0;
  padding-left: 24px;
}

.single_page ul li {
  list-style: disc;
}

.single_page ol li {
  list-style: decimal;
}

.single_page blockquote {
  margin: 16px 0;
  padding: 8px 16px;
  background-color: #c7c5b4;
  border-left: 4px solid #065d83;
  font-style: italic;
  border-radius: 0 12px 12px 0;
}

.single_page cite {
  font-family: var(--barlow-semi-condensed-semibold-italic);
  text-align: right;
  display: block;
  padding-bottom: 8px;
}

/* Footer
   ---------------------------------------------------------------------- */

footer {
  width: 100%;
  height: 250px;
  background: url(images/footer_bckground.jpg) bottom center repeat-x;
  box-shadow: 0 10px 15px -8px rgba(0,0,0,0.6);
  border-bottom: 1px solid #060403;
}

.footer_content {
  margin: 0 auto;
  width: 1280px;
  padding: 24px;
  position: relative;
  font-family: var(--barlow-semi-condensed-regular);
  font-weight: 200;
}

.footer_content nav ul {
  display: block;
  height: inherit;
}

.footer_content nav ul li.current-menu-item a {
  text-decoration: underline;
  background-color: transparent;
}

.footer_content nav ul li a {
  display: inline-block;
  padding: 4px 0;
  text-decoration: none;
  color: #eee7db;
}

.footer_content nav ul li a:hover {
  text-decoration: none;
  color: #fefbf7;
}

.footer_content p {
  position: absolute;
  right: 24px;
  bottom: -78px;
  text-align: right;
  font-size: 14px;
  margin: 0;
}

/* Página 404
   ---------------------------------------------------------------------- */

.page_404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  background-image: url(images/full-404.jpg);
  background-size: cover;
  background-position: center;
}

.page_404 h1 {
  text-indent: initial;
  margin-bottom: -56px;
  color: #3bff3b;
  background-image: none;
  height: 190px;
  opacity: 1;
  margin-top: -10vh;
}

.page_404 h1 span span {
  transition: font-size 0.15s ease, font-family 0.15s ease;
}

.page_404 p {
  font-size: 18px;
  color: #fff;
  margin-bottom: 24px;
  max-width: 300px;
}

/* ==========================================================================
   Menu mobile (overlay compartilhado — abaixo de 1024px)
   ========================================================================== */

@media screen and (max-width: 1023px) {

  .header_content {
    width: calc(100% - 48px);
  }

  button.menu-toggle {
    display: inline-block;
    background-color: #d8d8d2;
    border: none;
    width: 60px;
    height: 54px;
    border-radius: 4px;
    font-family: var(--special-elite-regular);
  }

  .header_content nav ul {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - 24px);
    background: #c9bca4;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.35s ease-in-out, visibility 0s linear 0.35s;
    visibility: hidden;
  }

  nav ul::after {
    content: "";
    position: absolute;
    bottom: -16px;
    background: url(images/fundo_single_botton.png) 0 0 repeat-x;
    z-index: -1;
    left: 49%;
    transform: translateX(-50%);
    width: 98%;
    height: 16px;
  }

  nav.menu_mobile ul {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.35s ease-in-out, visibility 0s linear 0s;
  }

  nav.menu_mobile ul li {
    margin: 16px 0;
  }

  nav.menu_mobile button.menu-toggle {
    z-index: 101;
    position: relative;
  }

}

/* ==========================================================================
   Layout (mobile — até 480px)
   ========================================================================== */

@media screen and (max-width: 480px) {

  header {
    height: calc(150px - 24px);
  }

  .header_content {
    padding: 20px 24px;
  }

  .main_content {
    margin: 16px auto 0;
    padding: 16px;
    width: calc(100% - 64px);
  }

  .single_page {
    width: calc(100% - 30px);
    padding: 16px;
  }

  .single_page h2 {
    font-size: 24px;
  }

  .links_tags {
    display: block;
  }

  .links_tags .shop {
    margin-top: 16px;
  }

  .footer_content {
    width: calc(100% - 48px);
    padding: 24px;
    position: relative;
  }

  .footer_content nav ul {
    display: block;
    height: inherit;
  }

  .footer_content p {
    position: absolute;
    right: 24px;
    bottom: -78px;
    text-align: right;
    font-size: 14px;
    margin: 0;
  }

  .header_content nav ul {
    align-items: self-start;
  }

}

/* ==========================================================================
   Layout (tablet grande — 769px a 1023px)
   ========================================================================== */

@media screen and (min-width: 769px) and (max-width: 1023px) {

  .main_content {
    margin: 16px auto 0;
    padding: 14px;
    width: calc(100% - 64px);
  }


  .header_content nav ul {
    align-items: self-start;
  }

}

/* ==========================================================================
   Footer — ajuste tablet grande e desktop pequeno (769px a 1279px)
   ========================================================================== */

@media screen and (min-width: 769px) and (max-width: 1279px) {

  .footer_content {
    width: calc(100% - 64px);
  }

  .footer_content p {
    bottom: -68px;
  }

}

/* ==========================================================================
   Desktop — compartilhado (a partir de 1024px)
   ========================================================================== */

@media screen and (min-width: 1024px) {

  header {
    height: calc(150px - 32px);
  }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ==========================================================================
   Layout desktop pequeno (1024px a 1279px)
   ========================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1279px) {

  .header_content {
    width: calc(100% - 24px);
    padding: 24px 12px;
  }

  .header_content nav ul {
    display: flex;
    gap: 12px;
  }

  .link_destaque a,
  a .link_destaque {
    padding: 8px;
  }

  .main_content {
    margin: 24px auto 0;
    width: calc(100% - 64px);
    padding: 16px;
  }

}

/* ==========================================================================
   Layout desktop (a partir de 1280px)
   ========================================================================== */

@media screen and (min-width: 1280px) {

  .header_content {
    width: 1280px;
  }

  .header_content nav ul {
    display: flex;
    gap: 32px;
    align-items: center;
    height: 100%;
    margin: 0;
  }

  .main_content {
    margin: 32px auto 0;
    width: 1280px;
    padding: 32px;
  }

}

/* ==========================================================================
   Desktop grande (1600px+)
   ========================================================================== */

@media (min-width: 1600px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1500px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Desktop XL (1920px+)
   ========================================================================== */

@media (min-width: 1920px) {
  .posts-grid {
    max-width: 1800px;
  }
}