/*
Theme Name: icequê
Theme URI: https://filipecarvalho.com.br
Author: Filipe Carvalho
Description: O visual cartum do icequê: papel creme pontilhado, tinta de 2px, sombra dura, pastéis chapados, Fredoka nos títulos e Nunito no texto.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: iceque
*/

/* A gramática do cartum (pele-cartum.css do runiverse): contorno e sombra são
   traço, nunca desfoque. O theme.json dá os tokens; aqui só o que ele não diz. */
:root {
  --tinta: #2b2440;
  --traco: 2px solid var(--tinta);
  --sombra-dura: 3px 3px 0 var(--tinta);
  --sombra-dura-alta: 5px 5px 0 var(--tinta);
  --pontinho: rgb(43 36 64 / 0.1);
}

body {
  background-color: #fdf8ef;
  background-image: radial-gradient(circle at 1px 1px, var(--pontinho) 1px, transparent 0);
  background-size: 22px 22px;
}

/* ── cabeçalho: uma barra de papel com traço ── */
.cabecalho-cartum {
  background: #fff;
  border: var(--traco);
  border-radius: 1.25rem;
  box-shadow: var(--sombra-dura);
}
.cabecalho-cartum .wp-block-site-title a { text-decoration: none; }
.flor-do-site { width: 44px; height: 44px; transform: rotate(-12deg); transition: transform .3s; }
.flor-do-site:hover { transform: rotate(20deg); }

.wp-block-navigation a {
  padding: .35rem .8rem;
  border-radius: .875rem;
  border: 2px solid transparent;
  text-decoration: none;
}
.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a {
  background: #fff1b8;
  border-color: var(--tinta);
}

/* ── cartões soltos no papel, um pastel por vez ── */
.cartao-cartum,
.wp-block-post-template > li {
  background: #fff;
  border: var(--traco);
  border-radius: 1.125rem;
  box-shadow: var(--sombra-dura);
  padding: 1.25rem 1.4rem;
  transition: transform .15s, box-shadow .15s;
}
.wp-block-post-template > li:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sombra-dura-alta);
}
.wp-block-post-template > li:nth-child(6n+1) { background: #d9ccff; }
.wp-block-post-template > li:nth-child(6n+2) { background: #c4f0dc; }
.wp-block-post-template > li:nth-child(6n+3) { background: #ffd4c2; }
.wp-block-post-template > li:nth-child(6n+4) { background: #fff1b8; }
.wp-block-post-template > li:nth-child(6n+5) { background: #c9e6ff; }
.wp-block-post-template > li:nth-child(6n+6) { background: #ffc9e0; }

.wp-block-post-template .wp-block-post-featured-image img,
.wp-block-post-featured-image img {
  border: var(--traco);
  border-radius: .875rem;
}
.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* ── botões e campos com tinta ── */
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
input[type="submit"] {
  border: var(--traco) !important;
  box-shadow: var(--sombra-dura);
  transition: transform .12s, box-shadow .12s;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra-dura-alta);
}
.wp-element-button:active,
.wp-block-button__link:active { transform: translate(2px, 2px); box-shadow: none; }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
  border: var(--traco);
  border-radius: .875rem;
  padding: .6rem .8rem;
  background: #fff;
  font: inherit;
}

/* ── o texto do artigo ── */
.conteudo-do-artigo {
  background: #fff;
  border: var(--traco);
  border-radius: 1.25rem;
  box-shadow: var(--sombra-dura);
}
.wp-block-quote {
  background: #efe8ff;
  border: var(--traco) !important;
  border-radius: 1.125rem;
  padding: 1rem 1.25rem !important;
}
.wp-block-image img { border: var(--traco); border-radius: 1rem; }
code, pre { background: #f4eee2; border-radius: .5rem; }
pre { border: var(--traco); padding: 1rem; }

.etiqueta,
.wp-block-post-terms a {
  display: inline-block;
  background: #fff;
  border: var(--traco);
  border-radius: 999px;
  padding: .1rem .6rem;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.rodape-cartum { border-top: var(--traco); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}