/* ==========================================================================
   BRASA & AGULHA EDITORIAL — folha de estilos
   Identidade herdada do guia de marca da linha editorial nórdica/rúnica.
   ========================================================================== */

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* ---------- Tokens de marca ---------- */
:root{
  /* paleta nomeada */
  --ink-night:   #12283a;   /* fundo, céu noturno */
  --ash-blue:    #16324a;   /* superfícies/painéis */
  --ash-blue-2:  #1c3c58;   /* superfícies elevadas */
  --gold-ember:  #d4af37;   /* chama/sabedoria — acento principal */
  --gold-soft:   #e9d18e;
  --moss:        #4a5d23;   /* Yggdrasil/natureza */
  --brasa:       #9a3412;   /* brasa — leve ajuste sobre #8b2500 p/ contraste */
  --stone:       #a29c8f;   /* pedra/runas, clareado p/ legibilidade no escuro */
  --snow:        #f5efe3;   /* texto principal, branco quente */
  --snow-muted:  #cbc2ae;   /* texto secundário */
  --liturgico-accent: #4d7ea8; /* acento do tipo Litúrgico (mais claro que o fundo) */

  --radius: 8px;
  --radius-lg: 14px;
  --shadow-1: 0 10px 28px rgba(0,0,0,.35);
  --shadow-2: 0 4px 14px rgba(0,0,0,.25);

  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sidebar-w: 288px;
  --topbar-h: 68px;
}

/* ---------- Base ---------- */
body{
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 900px 480px at 60% -6%, #24486a 0%, rgba(36,72,106,0) 60%),
    linear-gradient(180deg, var(--ink-night) 0%, #0c1c29 100%);
  background-attachment: fixed;
  color: var(--snow);
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--snow);
  /* regra editorial: títulos nunca em caixa alta */
  text-transform: none;
  letter-spacing: 0;
}
p { margin: 0 0 1em; }
a { color: var(--gold-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

.visually-hidden{
  position: absolute; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:0; top:-60px; background:var(--gold-ember); color:#12283a;
  padding:.6em 1em; z-index:1000; border-radius:0 0 8px 0; font-family:var(--font-ui);
  transition: top .2s ease;
}
.skip-link:focus{ top:0; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--gold-ember);
  outline-offset: 2px;
}

/* ---------- Divisores decorativos (elemento de marca) ---------- */
.section-divider, .sidebar-divider{
  text-align:center;
  color: var(--gold-ember);
  opacity:.75;
  font-size: 1.1rem;
  letter-spacing: .4em;
  padding-left: .4em; /* compensa o letter-spacing final */
  margin: 2.2em 0;
}
.sidebar-divider{ margin: 1.1em 0; font-size: .95rem; }

/* ---------- Botões ---------- */
.btn{
  display:inline-block;
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  padding: .75em 1.4em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn-primary{
  background: var(--gold-ember); color: #14212b;
  box-shadow: var(--shadow-2);
}
.btn-primary:hover{ background: var(--gold-soft); }
.btn-ghost{
  background: transparent; color: var(--snow);
  border-color: rgba(212,175,55,.5);
}
.btn-ghost:hover{ background: rgba(212,175,55,.12); }
.file-btn{ position:relative; overflow:hidden; }

/* ==========================================================================
   LAYOUT — sidebar + topbar + conteúdo
   ========================================================================== */

.sidebar-toggle{
  display:none;
  position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 42px; height:42px; border-radius: 50%;
  background: var(--ash-blue-2); border: 1px solid rgba(212,175,55,.4);
  color: var(--gold-ember); align-items:center; justify-content:center;
}
.sidebar-overlay{
  display:none; position: fixed; inset:0; background: rgba(6,14,20,.6);
  z-index: 40;
}

.sidebar{
  width: var(--sidebar-w);
  position: fixed; top:0; left:0; bottom:0;
  background: linear-gradient(180deg, var(--ash-blue) 0%, #0e2333 100%);
  border-right: 1px solid rgba(212,175,55,.2);
  padding: 1.6rem 1.3rem 1.4rem;
  overflow-y: auto;
  z-index: 50;
}
.sidebar-brand{ text-align:center; margin-bottom:.2rem; }
.brand-mark{ display:inline-block; color: var(--snow); text-align:center; }
.brand-mark:hover{ text-decoration:none; }
.brand-logo-img{
  display:block; width: 92px; height:92px; border-radius:50%; margin: 0 auto .6rem;
  box-shadow: 0 0 0 3px rgba(212,175,55,.35), var(--shadow-2);
}
.brand-name{
  display:block; font-family: var(--font-display); font-weight:700;
  font-size: 1.05rem; letter-spacing: .28em; line-height:1.5;
  padding-left:.28em;
}
.brand-tagline{
  text-align:center; font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing:.18em; font-size:.68rem; color: var(--snow-muted); margin: 0;
}

.nav-group-label{
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing:.14em;
  font-size:.72rem; color: var(--snow-muted); margin: 1.1em 0 .5em;
}
.sidebar-nav{ display:flex; flex-direction:column; }
.nav-link{
  font-family: var(--font-ui); color: var(--snow); padding:.5em .3em;
  border-radius: 6px; font-size:.96rem;
}
.nav-link:hover{ background: rgba(212,175,55,.1); text-decoration:none; }
.nav-link.active{ color: var(--gold-ember); font-weight:600; }

.collections-nav{ display:flex; flex-direction:column; }
.collection-nav-link{
  font-family: var(--font-ui); color: var(--snow-muted); font-size:.9rem;
  padding:.42em .3em .42em .7em; border-left: 2px solid rgba(212,175,55,.25);
  border-radius: 0 6px 6px 0;
}
.collection-nav-link:hover{ background: rgba(212,175,55,.08); text-decoration:none; color: var(--snow); }
.collection-nav-link.active{ border-left-color: var(--gold-ember); color: var(--gold-ember); }

.tag-cloud{ display:flex; flex-wrap:wrap; gap:.4em .5em; }
.tag-pill{
  font-family: var(--font-ui); font-size:.78rem; color: var(--snow-muted);
  background: rgba(255,255,255,.04); border:1px solid rgba(212,175,55,.22);
  padding:.22em .6em; border-radius: 999px; cursor:pointer; line-height:1.6;
}
.tag-pill:hover{ border-color: var(--gold-ember); color: var(--snow); }
.tag-pill.active{ background: var(--gold-ember); color:#14212b; border-color: var(--gold-ember); font-weight:600; }

.sidebar-footer{ margin-top: 1.6rem; text-align:center; }
.admin-link{
  font-family: var(--font-ui); font-size:.78rem; color: var(--snow-muted);
  letter-spacing:.06em;
}
.admin-link:hover{ color: var(--gold-ember); }

.main-wrapper{ margin-left: var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }

.topbar{
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding: 0 2rem; position: sticky; top:0; z-index: 30;
  background: rgba(18,40,58,.86); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(212,175,55,.15);
}
.topbar-title{
  font-family: var(--font-display); font-weight:600; font-size:1.05rem; white-space:nowrap;
}
.search-form{ display:flex; align-items:center; gap:.5em; flex:1; max-width: 420px; margin-left:auto; }
.search-form input{
  flex:1; font-family: var(--font-ui); font-size:.92rem; color: var(--snow);
  background: rgba(255,255,255,.06); border:1px solid rgba(212,175,55,.28);
  border-radius: 999px; padding: .55em 1em;
}
.search-form input::placeholder{ color: var(--snow-muted); }
.search-form button{
  background: transparent; border:none; color: var(--gold-ember); cursor:pointer;
  width: 36px; height:36px; display:flex; align-items:center; justify-content:center;
}

main{ flex:1; padding: 2.4rem 2rem 3rem; max-width: 1180px; width:100%; margin:0 auto; }

.view{ display:none; animation: fadeIn .35s ease; }
.view.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.view-header{ max-width: 720px; margin-bottom: 1.6rem; }
.view-header h1{ font-size: 1.9rem; }
.view-subtitle{ color: var(--snow-muted); font-size:1.05rem; }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{ max-width: 720px; padding-top: .5rem; }
.hero-eyebrow{
  font-family: var(--font-ui); text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; color: var(--gold-ember); margin-bottom:.8em;
}
.hero-title{ font-size: clamp(2rem, 4vw, 3rem); margin-bottom:.5em; }
.hero-lede{ font-size:1.18rem; color: var(--snow-muted); max-width: 60ch; }
.hero-actions{ display:flex; gap:1em; flex-wrap:wrap; margin-top:1.4rem; }

.home-block{ margin: 2.2rem 0; }
.block-title{ font-size:1.4rem; }

.collections-preview{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem; }
.collection-preview-card{
  --accent: #d4af37;
  background: rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.2);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg); padding:1.3rem 1.3rem 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.collection-preview-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); }
.collection-preview-card .type-pill{ margin-bottom:.6em; }
.collection-preview-card h3{ font-size:1.15rem; margin-bottom:.35em; }
.collection-preview-card p{ color: var(--snow-muted); font-size:.98rem; margin-bottom:.9em; }

.promo-strip{ margin: 2rem 0; }
.promo-strip h2{ font-size:1.25rem; }
.promo-items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.promo-item{
  display:flex; align-items:center; gap:.9em; background: rgba(154,52,18,.12);
  border:1px solid rgba(154,52,18,.4); border-radius: var(--radius); padding:.8em 1em;
}
.promo-item .promo-sigil{ font-size:1.4rem; color: var(--gold-ember); }
.promo-item .promo-info{ font-size:.92rem; }
.promo-item .promo-info strong{ display:block; font-family: var(--font-ui); }

.home-cta{ text-align:center; padding: 1.6rem; background: rgba(255,255,255,.02); border-radius: var(--radius-lg); }
.home-cta p{ color: var(--snow-muted); max-width: 55ch; margin: 0 auto 1em; }

/* ==========================================================================
   TYPE PILLS
   ========================================================================== */
.type-pill{
  display:inline-block; font-family: var(--font-ui); text-transform:uppercase;
  letter-spacing:.12em; font-size:.68rem; font-weight:600;
  padding:.28em .65em; border-radius: 999px;
  background: rgba(212,175,55,.15); color: var(--gold-soft);
  border: 1px solid rgba(212,175,55,.4);
}

/* ==========================================================================
   CATÁLOGO
   ========================================================================== */
.active-filters{ display:flex; gap:.6em; flex-wrap:wrap; margin-bottom:1.2rem; }
.filter-chip{
  display:inline-flex; align-items:center; gap:.5em; font-family: var(--font-ui);
  font-size:.85rem; background: rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.4);
  color: var(--snow); padding:.3em .5em .3em .8em; border-radius: 999px;
}
.filter-chip button{
  background:none; border:none; color: var(--gold-ember); cursor:pointer; font-size:1rem;
  line-height:1; padding:.1em .2em;
}

.catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
.empty-state{ color: var(--snow-muted); padding: 2rem 0; }

.card{
  --accent: #d4af37;
  background: rgba(255,255,255,.035); border:1px solid rgba(212,175,55,.2);
  border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-1); border-color: rgba(212,175,55,.5); }

.card-cover{
  height:150px; position:relative; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, var(--accent) 0%, rgba(18,40,58,.9) 78%);
}
.cover-sigil-wrap{
  width: 74px; height:74px; border-radius:50%; background: rgba(18,40,58,.55);
  border: 2px solid rgba(245,239,227,.55); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 4px rgba(0,0,0,.12);
}
.cover-sigil{ font-family: var(--font-display); font-size:2.1rem; color: var(--snow); }
.card-type-pill{ position:absolute; top:.7em; left:.7em; }

.card-body{ padding: 1rem 1.15rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.card-collection{ font-family: var(--font-ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--snow-muted); margin-bottom:.3em; }
.card-title{ font-size:1.08rem; margin-bottom:.15em; }
.card-volume{ font-family: var(--font-ui); font-size:.82rem; color: var(--gold-soft); margin-bottom:.6em; }
.card-tags{ display:flex; flex-wrap:wrap; gap:.35em; margin-bottom:.8em; }
.card-tags .tag-pill{ font-size:.72rem; padding:.15em .55em; }

.price-row{ margin-top:auto; display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; }
.price-original{ color: var(--snow-muted); text-decoration: line-through; font-size:.92rem; }
.price-final{ font-family: var(--font-ui); font-weight:700; font-size:1.2rem; color: var(--gold-soft); }
.promo-badge{
  font-family: var(--font-ui); font-size:.7rem; font-weight:700; letter-spacing:.03em;
  background: var(--brasa); color: var(--snow); padding:.2em .55em; border-radius:5px;
}
.card-actions{ display:flex; gap:.6em; margin-top: 1em; flex-wrap:wrap; }
.card-actions .btn{ padding:.55em 1em; font-size:.86rem; }

/* ==========================================================================
   DETALHE DO LIVRO
   ========================================================================== */
.back-link{ display:inline-block; margin-bottom:1.2rem; font-family: var(--font-ui); font-size:.9rem; }
.book-detail{ display:grid; grid-template-columns: 220px 1fr; gap:2rem; }
.book-detail-cover{
  --accent:#d4af37; height:220px; border-radius: var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, var(--accent) 0%, rgba(18,40,58,.9) 78%);
}
.book-detail-cover .cover-sigil-wrap{ width:110px; height:110px; }
.book-detail-cover .cover-sigil{ font-size: 3rem; }
.book-detail-title{ font-size: 1.8rem; margin-bottom:.15em; }
.book-detail-volume{ font-family: var(--font-ui); color: var(--gold-soft); margin-bottom:.7em; }
.book-detail-desc{ font-size:1.1rem; color: var(--snow-muted); max-width: 62ch; }
.book-detail-tags{ display:flex; flex-wrap:wrap; gap:.5em; margin: 1em 0 1.3em; }
.book-detail-price{ display:flex; align-items:baseline; gap:.7em; margin-bottom:1.4em; flex-wrap:wrap; }
.book-detail-price .price-final{ font-size:1.6rem; }
.book-detail-actions{ display:flex; gap:1em; flex-wrap:wrap; }
@media (max-width: 640px){
  .book-detail{ grid-template-columns: 1fr; }
  .book-detail-cover{ max-width: 220px; }
}

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contact-context{
  background: rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.35);
  border-radius: var(--radius); padding:.9em 1.1em; margin-bottom:1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap;
  font-size:.95rem;
}
.contact-context button{ background:none;border:none; color: var(--gold-ember); cursor:pointer; font-family: var(--font-ui); font-size:.85rem; }

.contact-form{ max-width: 560px; display:flex; flex-direction:column; gap:1.1em; }
.contact-form label{ display:flex; flex-direction:column; gap:.4em; font-family: var(--font-ui); font-size:.9rem; color: var(--snow-muted); }
.contact-form input, .contact-form textarea{
  font-family: var(--font-body); font-size:1rem; color: var(--snow);
  background: rgba(255,255,255,.04); border:1px solid rgba(212,175,55,.28);
  border-radius: var(--radius); padding:.65em .8em; resize: vertical;
}
.form-hint{ font-size:.85rem; color: var(--snow-muted); }

.contact-alt h2{ font-size:1.2rem; }
.social-list{ list-style:none; padding:0; display:flex; gap:1.2em; flex-wrap:wrap; }
.social-list a{ font-family: var(--font-ui); }

/* ==========================================================================
   ADMIN
   ========================================================================== */
.admin-toolbar{ display:flex; gap:1em; margin-bottom:1.6rem; flex-wrap:wrap; }
.admin-collections{ display:flex; flex-direction:column; gap:1.6rem; }
.admin-collection-card{
  --accent:#d4af37; background: rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.22);
  border-left: 4px solid var(--accent); border-radius: var(--radius-lg); padding:1.3rem 1.4rem;
}
.admin-collection-card h3{ font-size:1.2rem; display:flex; align-items:center; gap:.7em; flex-wrap:wrap; }
.admin-volume-list{ display:flex; flex-direction:column; gap:1rem; margin-top:1rem; }
.admin-volume-card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:1rem; }
.admin-volume-name{ font-family: var(--font-ui); font-weight:600; margin-bottom:.6em; }
.admin-field-row{ display:flex; gap:1.2em; flex-wrap:wrap; margin-bottom:.7em; align-items:flex-end; }
.admin-field-row label{ display:flex; flex-direction:column; gap:.3em; font-family: var(--font-ui); font-size:.78rem; color: var(--snow-muted); text-transform:uppercase; letter-spacing:.04em; }
.admin-field-row input, .admin-field-row select{
  font-family: var(--font-ui); color: var(--snow); background: rgba(255,255,255,.05);
  border:1px solid rgba(212,175,55,.25); border-radius:6px; padding:.4em .6em; font-size:.9rem;
}
.checkbox-label{ flex-direction:row !important; align-items:center; gap:.5em !important; text-transform:none !important; letter-spacing:0 !important; }
.admin-preview-price{ font-family: var(--font-ui); font-size:.85rem; color: var(--gold-soft); margin:0; }

.admin-add-volume{ margin-top:1rem; }
.admin-add-volume summary{ cursor:pointer; font-family: var(--font-ui); font-size:.88rem; color: var(--gold-ember); }
.inline-form{ display:flex; flex-direction:column; gap:.8em; margin-top:.9em; max-width: 460px; }
.inline-form label{ display:flex; flex-direction:column; gap:.3em; font-family: var(--font-ui); font-size:.8rem; color: var(--snow-muted); }
.inline-form input, .inline-form select, .inline-form textarea{
  font-family: var(--font-body); color: var(--snow); background: rgba(255,255,255,.05);
  border:1px solid rgba(212,175,55,.28); border-radius:6px; padding:.5em .7em;
}
.admin-new-collection{ margin-top:1rem; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.site-footer{ padding: 2rem; text-align:center; border-top:1px solid rgba(212,175,55,.15); }
.footer-links{ display:flex; justify-content:center; gap:1.4em; margin-bottom:.8em; flex-wrap:wrap; font-family: var(--font-ui); font-size:.88rem; }
.footer-copy{ font-family: var(--font-ui); font-size:.78rem; color: var(--snow-muted); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 960px){
  .sidebar-toggle{ display:flex; }
  .sidebar{
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-1);
  }
  .sidebar.open{ transform:none; }
  .sidebar.open + .sidebar-overlay, .sidebar-overlay.show{ display:block; }
  .main-wrapper{ margin-left:0; }
  .topbar{ padding-left: 4.4rem; }
  .book-detail{ gap:1.4rem; }
}
@media (max-width: 560px){
  main{ padding: 1.6rem 1.1rem 2.4rem; }
  .topbar{ padding: 0 1rem 0 4.2rem; }
  .search-form{ max-width: none; }
  .hero-title{ font-size: 1.7rem; }
}

@media print{
  .sidebar, .topbar, .sidebar-toggle, .sidebar-overlay{ display:none !important; }
  .main-wrapper{ margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}