/*
Theme Name: Novel Starter Notes
Theme URI: https://novelstarter.com/blog
Author: Novel Starter
Description: Block theme for the Novel Starter essays. Shares the shop's system: a drafting sheet — cool white, ink rules, blue for links, ink buttons with white text, red and teal as the layer colours of Structure and Worlds.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: notes
Tags: blog, one-column, block-patterns, full-site-editing
*/

/* Mesmo sistema da loja (DESIGN-loja.md), na gramática do WordPress. Nada de sombra, nada de
   raio; profundidade é régua de tinta de 2px e a grade de desenho DENTRO das folhas. */

:root{ --ns-rule:2px solid var(--wp--preset--color--ink); --ns-hair:1px solid var(--wp--preset--color--line); }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ height:auto; }
h1,h2,h3{ text-wrap:balance; }
.wp-site-blocks{ overflow-x:clip; } /* clip, não hidden: não quebra sticky */
:where(a,button,input,textarea,summary):focus-visible{ outline:3px solid var(--wp--preset--color--blue); outline-offset:2px; }

/* ── Rótulo condensado: só para dado (tipo, data, contagem), nunca acima de um título ── */
.ns-lbl{ font-family:var(--wp--preset--font-family--cond); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--muted); }
.ns-lbl.is-structure{ color:var(--wp--preset--color--red); } .ns-lbl.is-worlds{ color:var(--wp--preset--color--teal); }

/* ── Botão: retângulo, tinta, texto branco. Igual ao da loja. ── */
.ns-btn,.wp-block-read-more.ns-btn,.wp-block-button__link,.wp-block-jetpack-subscriptions button[type="submit"],.wp-block-search__button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px;
  background:var(--wp--preset--color--btn); color:#fff; border:2px solid var(--wp--preset--color--btn); border-radius:0;
  font-family:var(--wp--preset--font-family--cond); font-weight:700; font-size:1.02rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; line-height:1;
  transition:background .18s,border-color .18s; }
.ns-btn:hover,.ns-btn:focus-visible,.wp-block-button__link:hover,.wp-block-jetpack-subscriptions button[type="submit"]:hover,.wp-block-search__button:hover{
  background:var(--wp--preset--color--blue-dk); border-color:var(--wp--preset--color--blue-dk); color:#fff; }
.ns-btn.is-ghost{ background:transparent; color:var(--wp--preset--color--ink); }
.ns-btn.is-ghost:hover{ background:var(--wp--preset--color--ink); color:#fff; border-color:var(--wp--preset--color--ink); }
/* botão branco dentro de faixa tinta: hover em azul profundo, nunca em tinta (sumiria) */
.has-ink-background-color .ns-btn{ background:#fff; border-color:#fff; color:var(--wp--preset--color--ink); }
.has-ink-background-color .ns-btn:hover{ background:var(--wp--preset--color--blue-dk); border-color:var(--wp--preset--color--blue-dk); color:#fff; }
.has-ink-background-color a{ color:var(--wp--preset--color--blue); } /* o azul de acento passa 4.7:1 sobre tinta */
.has-ink-background-color a:hover{ color:var(--wp--preset--color--yellow); }

/* ── Folha: borda de tinta, moldura fina, grade de 24px por dentro ── */
.ns-sheet{ position:relative; border:var(--ns-rule); padding:26px 26px 22px; background-color:#fff;
  background-image:linear-gradient(var(--wp--preset--color--grid) 1px,transparent 1px),linear-gradient(90deg,var(--wp--preset--color--grid) 1px,transparent 1px);
  background-size:24px 24px; background-position:-1px -1px; }
.ns-sheet::before{ content:""; position:absolute; inset:10px; border:var(--ns-hair); pointer-events:none; }
.ns-sheet > *{ position:relative; }

/* ── Cabeçalho ── */
.ns-masthead{ border-bottom:var(--ns-rule); background:rgba(247,248,250,.94); }
.ns-masthead .wp-block-site-title a{ text-decoration:none; color:var(--wp--preset--color--ink); }
.ns-nav a{ font-family:var(--wp--preset--font-family--cond); font-weight:600; font-size:.98rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--wp--preset--color--ink); }
.ns-nav a:hover{ color:var(--wp--preset--color--blue); }
/* O bloco de navegação do WordPress pinta todo <a> com a cor do texto, com mais peso que
   .ns-btn — o botão do menu saía tinta sobre tinta, invisível. Mesmo bug que a loja teve. */
.wp-block-navigation .ns-btn,.ns-nav .ns-btn,.wp-block-navigation .wp-block-navigation-item .ns-btn{ color:#fff !important; background:var(--wp--preset--color--btn); }
.wp-block-navigation .ns-btn:hover,.ns-nav .ns-btn:hover{ color:#fff !important; background:var(--wp--preset--color--blue-dk); border-color:var(--wp--preset--color--blue-dk); }

/* ── Bloco de título de seção: régua grossa, quadrado da camada, nome e contagem ── */
.ns-drawer-head{ display:flex; align-items:center; gap:16px; padding:10px 0; border-top:3px solid var(--wp--preset--color--ink); border-bottom:1px solid var(--wp--preset--color--ink); margin-bottom:22px; }
.ns-drawer-head .sw{ width:16px; height:16px; flex:none; background:var(--wp--preset--color--ink); }
.ns-drawer-head.is-structure .sw{ background:var(--wp--preset--color--red); } .ns-drawer-head.is-worlds .sw{ background:var(--wp--preset--color--teal); }
.ns-drawer-head h2,.ns-drawer-head h3{ margin:0; font-family:var(--wp--preset--font-family--cond); font-weight:700; font-size:1.35rem; letter-spacing:.08em; text-transform:uppercase; }
.ns-drawer-head .count{ margin-left:auto; font-family:var(--wp--preset--font-family--cond); font-weight:600; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--muted); }

/* ── Card de ensaio: capa em cima, texto embaixo, rodapé com data — a gramática do card da loja ── */
.ns-card{ display:flex; flex-direction:column; height:100%; background:#fff; border:var(--ns-rule); transition:transform .18s,border-color .18s; }
.ns-card:hover{ transform:translateY(-3px); border-color:var(--wp--preset--color--blue); }
.ns-card .wp-block-post-featured-image{ margin:0; border-bottom:var(--ns-rule); }
.ns-card .wp-block-post-featured-image img{ display:block; width:100%; aspect-ratio:2/3; object-fit:cover; }
.ns-card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 16px; flex:1; }
.ns-card .wp-block-post-title{ margin:0; font-size:1.28rem; line-height:1.15; }
.ns-card .wp-block-post-title a{ color:inherit; text-decoration:none; } .ns-card .wp-block-post-title a:hover{ color:var(--wp--preset--color--blue); }
.ns-card .wp-block-post-excerpt{ margin:0; color:var(--wp--preset--color--muted); font-size:.98rem; }
.ns-card .wp-block-post-excerpt__excerpt{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ns-card .wp-block-post-excerpt__more-text{ display:none; }
.ns-card__foot{ margin-top:auto; padding-top:14px; border-top:var(--ns-hair); display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ── Herói da home: título à esquerda, folha com a capa e os dados à direita ── */
.ns-hero .wp-block-post-title{ margin:0 0 .9rem; }
.ns-hero .wp-block-post-title a{ color:inherit; text-decoration:none; } .ns-hero .wp-block-post-title a:hover{ color:var(--wp--preset--color--blue); }
.ns-hero .wp-block-post-excerpt{ font-size:1.2rem; color:var(--wp--preset--color--muted); max-width:50ch; }
.ns-hero .wp-block-post-excerpt__more-text{ display:none; }
.ns-hero .wp-block-post-featured-image{ margin:0; }
.ns-hero .wp-block-post-featured-image img{ width:150px; aspect-ratio:2/3; object-fit:cover; border:1px solid var(--wp--preset--color--ink); }
.ns-sheet dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.98rem; }
.ns-sheet dt{ font-family:var(--wp--preset--font-family--cond); font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--muted); padding-top:3px; }
.ns-sheet dd{ margin:0; }
.ns-sheet .tb{ margin-top:20px; padding-top:14px; border-top:var(--ns-rule); display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; }

/* ── Leitura ── */
.ns-essay.ns-essay > .wp-block-post-content{ margin-left:0 !important; margin-right:auto !important; }
.ns-essay.ns-essay .wp-block-post-content > *:not(.alignwide):not(.alignfull){ margin-left:0 !important; margin-right:auto !important; }
.ns-essay.ns-essay .wp-block-post-content > p{ max-width:60ch; color:var(--wp--preset--color--prose); }
.ns-essay .wp-block-post-content > :is(h2,h3,h4){ margin-top:3rem; margin-bottom:.8rem; }
.ns-essay .wp-block-post-content > * + p{ margin-top:1.1rem; }
.ns-essay blockquote,.ns-essay .wp-block-quote{ margin:2.4rem 0; padding:20px 24px; border:var(--ns-rule); background:#fff; color:var(--wp--preset--color--ink); font-size:1.15rem; line-height:1.45; max-width:60ch; }
.ns-essay blockquote p{ margin:0; font-weight:600; }
.ns-essay blockquote cite{ display:block; margin-top:.8rem; font-style:normal; font-family:var(--wp--preset--font-family--cond); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--muted); }

/* ── Índice de seções: uma folha com bloco de título, fixa ao rolar ── */
.ns-index{ position:sticky; top:1.5rem; }
.ns-index .ns-drawer-head{ margin-bottom:12px; padding:8px 0; }
.ns-index .ns-drawer-head h2{ font-size:.95rem; letter-spacing:.14em; }
.ns-index__list{ margin:0; padding:0; list-style:none; }
.ns-index__item{ margin:0 0 .7rem; line-height:1.35; }
.ns-index__item a{ font-size:.95rem; text-decoration:none; color:var(--wp--preset--color--ink); border-bottom:1px solid transparent; }
.ns-index__item a:hover,.ns-index__item a:focus-visible{ color:var(--wp--preset--color--blue-dk); border-bottom-color:var(--wp--preset--color--blue-dk); }

/* Campo do Jetpack: nosso CSS sobre a marcação deles — 2px de tinta como todo container do sistema. */
.wp-block-jetpack-subscriptions input[type="email"],.wp-block-jetpack-subscriptions .components-text-control__input{ border:2px solid var(--wp--preset--color--ink) !important; border-radius:0 !important; min-height:52px; padding:0 14px !important; font-family:var(--wp--preset--font-family--sans) !important; font-size:1rem !important; background:#fff; color:var(--wp--preset--color--ink); }
@media (max-width:900px){ .ns-essay-aside{ display:none; } }
/* Celular: card em linha — capa de 120px ao lado do texto, 2:3 preservada — igual à loja a ≤600px.
   Um card de capa inteira ocupava ~800px por ensaio; a 50 posts/ano o arquivo virava rolagem infinita. */
@media (max-width:600px){
  .ns-card{ display:grid; grid-template-columns:120px minmax(0,1fr); align-items:start; }
  .ns-card .wp-block-post-featured-image{ border-bottom:0; border-right:var(--ns-rule); height:100%; }
  .ns-card .wp-block-post-featured-image img{ height:100%; }
  .ns-card__body{ padding:14px 14px 12px; }
  .ns-card .wp-block-post-title{ font-size:1.05rem; }
  .ns-card .wp-block-post-excerpt__excerpt{ -webkit-line-clamp:2; font-size:.9rem; }
}
@media (max-width:781px){ .ns-hero .wp-block-post-featured-image img{ width:120px; } }
@media (prefers-reduced-motion:reduce){ .ns-card,.ns-btn{ transition:none; } .ns-card:hover{ transform:none; } }