/* ============================================================
   main.css
   Estilos globais e componentes do site. Lê tokens de tokens.css.
   ============================================================ */


/* === Container === */

.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-x);
}


/* === Skip link (primeiro focável; escondido até receber foco) === */

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 20;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg);
  font-family: var(--font-body);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link {
    transition: transform var(--transition-duration) var(--transition-ease);
  }
}


/* Trava o scroll do corpo enquanto o menu mobile está aberto */
body.menu-open {
  overflow: hidden;
}


/* === Site header === */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-bg);
  padding-block: var(--space-sm);
  transition: transform var(--transition-duration) var(--transition-ease);
}

/* Smart sticky: escondido (deslizado pra cima) no scroll para baixo */
.site-header--hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Nav e logo sem sublinhado de repouso (mantêm o realce marca-texto no hover) */
.site-header a {
  text-decoration: none;
}

.site-header__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--color-fg);
}

@media (max-width: 767px) {
  .site-header__logo {
    font-size: var(--text-h3-mobile);
  }
}

.site-header__nav ul {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  color: var(--color-fg);
}

/* Página atual: accent + sublinhado de repouso */
.site-header__nav a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}


/* Hamburger toggle: hidden on desktop, mostrado < 768px */

.site-header__toggle {
  display: none;
  position: relative;
  z-index: 11;
  padding: var(--space-xs);
  background: transparent;
  border: 0;
  cursor: pointer;
  gap: 5px;
}

.site-header__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-fg);
  transition: transform var(--transition-duration) var(--transition-ease),
              opacity var(--transition-duration) var(--transition-ease);
}

.site-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* === Mobile nav (< 768px) === */

@media (max-width: 767px) {
  .site-header__nav {
    display: none;
  }

  .site-header__toggle {
    display: grid;
  }

  /* Overlay full-width abaixo do header sticky (z-index 5 vs header 10) */
  .site-header__nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 5;
    background-color: var(--color-bg);
    padding: var(--space-xl) var(--page-padding-x);
  }

  .site-header__nav.is-open ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
  }
}


/* === Hero === */

.hero {
  padding-top: var(--space-lg);
  text-align: center;
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__avatar {
  width: var(--avatar-size-mobile);
  height: var(--avatar-size-mobile);
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-md);
}

.hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1-mobile);
  line-height: var(--lh-heading);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.hero__descritor {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body-mobile);
  line-height: var(--lh-lead);
  color: var(--color-fg);
  max-width: var(--measure-narrow);
}

@media (min-width: 768px) {
  .hero {
    padding-top: var(--space-hero-top);
  }
  .hero__avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
  }
  .hero__name {
    font-size: var(--text-h1);
  }
  .hero__descritor {
    font-size: var(--text-lead);
  }
}


/* === Site footer === */

.site-footer {
  margin-top: var(--space-xl);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-surface-alt);
}

.site-footer__inner {
  text-align: center;
}

.site-footer__signature {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-caption);
  color: var(--color-muted);
}

.site-footer__social {
  font-size: var(--text-caption);
  color: var(--color-fg);
}


/* === Section (scaffold reutilizável: Sobre, Serviços, Contato) === */

.section {
  padding-top: var(--space-lg);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-xl);
  }
}

/* Caption marker compartilhado: títulos de seção (home), rótulo de ano (feed),
   rótulo "Relacionados" (post) e captions de bloco (form, "ou por e-mail") */
.section__caption,
.feed__year,
.related__label,
.block-caption {
  display: flex;
  align-items: center;
  gap: var(--marker-gap);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-caption-mobile);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}

.section__caption::before,
.feed__year::before,
.related__label::before,
.block-caption::before {
  content: "";
  flex-shrink: 0;
  width: var(--marker-width);
  height: var(--marker-height);
  background-color: var(--color-accent);
}

@media (min-width: 768px) {
  .section__caption,
  .feed__year,
  .related__label,
  .block-caption {
    font-size: var(--text-caption);
  }
}

.section__body > p + p {
  margin-top: var(--space-md);
}


/* === Serviços (lista de serviços, sem cards) === */

.services {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service {
  padding-block: var(--space-md);
}

.services .service:first-child {
  padding-top: 0;
}

.service__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2-mobile);
  line-height: var(--lh-display);
  color: var(--color-fg);
  margin: 0 0 var(--space-tight);
}

.service__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-fg);
  margin: 0;
}

@media (min-width: 768px) {
  .service__title {
    font-size: var(--text-service-title);
  }

  .service__desc {
    font-size: var(--text-body);
  }
}


/* === Contato (último bloco; sem padding-bottom, o footer fecha o gap) === */

.contact__intro {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-fg);
  margin: 0 0 var(--space-md);
}

.contact__email {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2-mobile);
  line-height: var(--lh-display);
  color: var(--color-fg);
  margin: 0 0 var(--space-md);
}

.contact__alt {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-fg);
  margin: 0;
}

@media (min-width: 768px) {
  .contact__intro {
    font-size: var(--text-body);
  }

  .contact__email {
    font-size: var(--text-service-title);
  }

  .contact__alt {
    font-size: var(--text-body);
  }
}


/* === Título de página interna (h1 renderizado em --text-h2) === */

/* h1 de página interna (Artigos, Contato): 56 desktop / 40 mobile, coerente com
   o título de post */
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-post-title-mobile);
  line-height: var(--lh-display);
  color: var(--color-fg);
  text-wrap: balance;
  margin: 0 0 var(--space-lg);
}

@media (min-width: 768px) {
  .page-title {
    font-size: var(--text-h2);
  }
}


/* === Feed de artigos (agrupado por ano; sem separador entre itens) === */

.feed__group + .feed__group {
  margin-top: var(--space-lg);
}

.feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.writing {
  padding-block: var(--space-md);
}

.feed__list .writing:first-child {
  padding-top: 0;
}

.writing__date {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-caption-mobile);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-xs);
}

.writing__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3-mobile);
  line-height: var(--lh-display);
  text-wrap: balance;
  margin: 0 0 var(--space-tight);
}

/* Título é link: sem sublinhado de repouso, mantém o realce marca-texto no hover */
.writing__title a {
  color: var(--color-fg);
  text-decoration: none;
}

.writing__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-muted);
  text-wrap: pretty;
  margin: 0;
}

@media (min-width: 768px) {
  .writing__date {
    font-size: var(--text-caption);
  }

  .writing__title {
    font-size: var(--text-h3);
  }

  .writing__desc {
    font-size: var(--text-body);
  }
}


/* === Post (template canônico /artigos/[slug]) === */

.post__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-post-title-mobile);
  line-height: var(--lh-display);
  color: var(--color-fg);
  text-wrap: balance;
  margin: 0 0 var(--space-md);
}

.post__lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--color-fg);
  text-wrap: pretty;
  margin: 0 0 var(--space-lg);
}

/* Separador accent 40x2 abaixo do lead */
.post__lead::after {
  content: "";
  display: block;
  width: var(--lead-rule-width);
  height: var(--marker-height);
  background-color: var(--color-accent);
  margin-top: var(--space-md);
}

/* Corpo do artigo: ritmo vertical e tipografia por elemento semântico,
   pra que post novo seja só HTML semântico dentro de .post__content */
.post__content > * + * {
  margin-top: var(--space-md);
}

.post__content p {
  font-family: var(--font-body);
  font-size: var(--text-body-post-mobile);
  line-height: var(--lh-body);
  color: var(--color-fg);
  text-wrap: pretty;
}

.post__content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-post-h2-mobile);
  line-height: var(--lh-display);
  color: var(--color-fg);
  text-wrap: balance;
  margin-top: var(--space-lg);
}

.post__content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-post-h3-mobile);
  line-height: var(--lh-display);
  color: var(--color-fg);
  text-wrap: balance;
  margin-top: var(--space-md);
}

.post__content blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-blockquote);
  line-height: var(--lh-lead);
  color: var(--color-fg);
  border-left: var(--marker-height) solid var(--color-accent);
  padding-left: var(--space-sm);
  margin-inline: 0;
}

/* Code inline: mono accent, sem fundo (DESIGN.md) */
.post__content code {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  color: var(--color-accent);
}

/* Code block: fundo surface-alt, scroll horizontal pra linhas longas */
.post__content pre {
  background-color: var(--color-surface-alt);
  padding: var(--space-sm);
  overflow-x: auto;
  line-height: var(--lh-body);
}

.post__content pre code {
  color: var(--color-fg);
  white-space: pre;
}

.post__content figure {
  margin: var(--space-lg) 0;
}

.post__content figcaption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-caption);
  line-height: var(--lh-body);
  color: var(--color-muted);
  margin-top: var(--space-xs);
}

/* Bloco "Relacionados" ao fim do post (reusa .writing do feed) */
.related {
  margin-top: var(--space-xl);
}

/* Link "Voltar para artigos" centralizado antes do footer */
.post__back {
  text-align: center;
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .post__title {
    font-size: var(--text-h2);
  }

  .post__content p {
    font-size: var(--text-body);
  }

  .post__content h2 {
    font-size: var(--text-post-h2);
  }

  .post__content h3 {
    font-size: var(--text-post-h3);
  }
}


/* === Página de contato === */

/* Spacer entre o bloco do formulário e o bloco de e-mail */
.contato__email-block {
  margin-top: var(--space-xl);
}


/* === Formulário === */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative; /* ancora o honeypot off-screen */
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-caption-mobile);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-muted);
}

.form__input {
  width: 100%;
  appearance: none;
  background-color: transparent;
  border: 0;
  border-bottom: var(--underline-thickness) solid var(--color-fg);
  border-radius: 0;
  padding: var(--space-xs) 0;
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-fg);
}

.form__input::placeholder {
  color: var(--color-muted);
  opacity: 1; /* Firefox baixa a opacidade do placeholder por padrão */
}

.form__input:focus {
  border-bottom-color: var(--color-accent);
}

.form__textarea {
  min-height: var(--textarea-min-height-mobile);
  resize: vertical;
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* Botão de envio: link text accent com sublinhado, não caixa preenchida */
.form__submit {
  appearance: none;
  background-color: transparent;
  border: 0;
  padding-inline: 2px;
  margin-inline: -2px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  background-image: linear-gradient(var(--color-accent-tint), var(--color-accent-tint));
  background-repeat: no-repeat;
  background-size: 0 0.5em;
  background-position: 0 92%;
  transition: background-size var(--transition-duration) var(--transition-ease);
}

.form__submit:hover {
  background-size: 100% 0.5em;
  color: var(--color-fg);
}

.form__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-muted);
  margin: 0;
}

/* Erro de envio: padrão do hint (italic serif), mas em ink cheio pra ler com
   mais peso que um hint passivo. Sem cor de estado (DESIGN: paleta não tem
   vermelho de erro por ora). */
.form__error {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-fg);
  margin: 0;
}

/* Honeypot anti-spam: fora da tela, fora do fluxo de foco e de leitura */
.form__honeypot {
  position: absolute;
  left: -100vw; /* off-screen funcional, não é valor de design */
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* === Estado de sucesso (substitui só o bloco do formulário) === */

.contato__success {
  display: none;
}

.contato--enviado .contato__form-block {
  display: none;
}

.contato--enviado .contato__success {
  display: block;
}

.contato__success-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3-mobile);
  line-height: var(--lh-display);
  color: var(--color-fg);
  text-wrap: balance;
  margin: 0 0 var(--space-md);
}

.contato__success-body {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  color: var(--color-fg);
  margin: 0;
}

@media (min-width: 768px) {
  .form__input {
    font-size: var(--text-body);
  }

  .form__textarea {
    min-height: var(--textarea-min-height);
  }

  .form__submit,
  .form__hint,
  .form__error {
    font-size: var(--text-body);
  }

  .contato__success-title {
    font-size: var(--text-h3);
  }

  .contato__success-body {
    font-size: var(--text-body);
  }
}