/* ---------------------------------------------------------
   HONORNOTES — TEMA GERAL
---------------------------------------------------------- */

:root {
  --hn-bg: #f4f3ef;
  --hn-bg-card: #ffffff;
  --hn-bg-dark: #212c26;

  --hn-text: #27332f;
  --hn-text-soft: #6d7873;
  --hn-text-light: #f7f7f7;

  --hn-primary: #3E4F44;      /* verde médio destaque */
  --hn-primary-hover: #4b6052;

  --hn-radius-md: 12px;
  --hn-radius-lg: 22px;

  --hn-shadow-soft: 0 15px 35px rgba(0,0,0,0.10);
  --hn-shadow-card: 0 6px 24px rgba(0,0,0,0.06);

  --hn-transition: 0.22s ease;
}

/* ---------------------------------------------------------
   BASE
---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #ffffff 0, #f4f3ef 58%);
  color: var(--hn-text);
}

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

/* ---------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.hn-header {
  background: var(--hn-bg-dark);
  color: #f7f6f3;
}

.hn-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hn-logo {
  font-family: "Playfair Display", serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 1rem;
}

/* navegação */
.hn-nav,
.hn-header-nav {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.hn-nav-link,
.hn-header-nav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .89rem;
  color: #f7f4ee;
  opacity: .9;
  transition: background-color var(--hn-transition), opacity var(--hn-transition), transform .15s ease;
}

.hn-nav-link:hover,
.hn-header-nav a:hover {
  opacity: 1;
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.hn-nav-link ion-icon,
.hn-header-nav ion-icon {
  font-size: 1.1rem;
}

/* ---------------------------------------------------------
   LAYOUT PRINCIPAL
---------------------------------------------------------- */

.hn-main {
  min-height: calc(100vh - 120px);
}

.hn-container {
  max-width: 1120px;
  margin: 1.8rem auto 2.4rem;
  padding: 0 1.4rem;
}

/* ---------------------------------------------------------
   CARDS
---------------------------------------------------------- */

.hn-card {
  background: var(--hn-bg-card);
  border-radius: var(--hn-radius-lg);
  padding: 2rem 2.2rem;
  box-shadow: var(--hn-shadow-card);
  margin-bottom: 1.6rem;
  animation: hn-fade-in .4s ease;
}

@keyframes hn-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   TIPOGRAFIA
---------------------------------------------------------- */

h1, h2, h3 {
  font-family: "Playfair Display", serif;
  color: #26332E;
}

h1 { font-size: 2rem; margin: 0 0 .4rem; }
h2 { font-size: 1.4rem; margin: 0 0 .3rem; }

.hn-muted {
  font-size: .9rem;
  color: var(--hn-text-soft);
}

/* ---------------------------------------------------------
   BOTÕES
---------------------------------------------------------- */

.hn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 500;
  padding: .75rem 1.8rem;
  transition: background-color var(--hn-transition), box-shadow var(--hn-transition), transform .15s ease, filter .18s ease;
  background: transparent; /* base transparente */
}

.hn-btn ion-icon {
  font-size: 1.1rem;
}

.hn-btn-primary {
  background: var(--hn-primary);
  color: #fff;
  box-shadow: 0 12px 26px rgba(23, 40, 31, .35);
}

.hn-btn-primary:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 15px 32px rgba(23, 40, 31, .42);
}

/* botões “outline” */
.hn-btn-ghost {
  background: #ffffff;
  color: var(--hn-text);
  border: 1px solid rgba(0,0,0,0.08);
}

.hn-btn-ghost:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.07);
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.18);
}

/* botão “perigoso” (excluir) mantendo estilo outline */
.hn-btn-danger {
  border-color: rgba(153, 41, 41, 0.3);
  color: #8f2b2b;
}

.hn-btn-danger:hover {
  background: rgba(153, 41, 41, 0.06);
}

/* ---------------------------------------------------------
   FORMULÁRIOS
---------------------------------------------------------- */

.hn-form {
  width: 100% !important;
  max-width: 100% !important;
}

.hn-form-group {
  margin-bottom: 1.1rem;
}

.hn-label {
  display: block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .25rem;
  color: var(--hn-text-soft);
}

.hn-input,
.hn-textarea,
.hn-select {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: var(--hn-radius-md);
  border: 1px solid #ddd;
  font-size: .95rem;
  font-family: inherit;
  background: #fdfcfb;
  transition: border-color var(--hn-transition), box-shadow var(--hn-transition), background-color var(--hn-transition);
}

.hn-input:focus,
.hn-textarea:focus,
.hn-select:focus {
  outline: none;
  border-color: var(--hn-primary);
  box-shadow: 0 0 0 3px rgba(62, 79, 68, 0.20);
  background: #ffffff;
}

.hn-textarea {
  min-height: 130px;
  resize: vertical;
}

/* ---------------------------------------------------------
   DASHBOARD — CARDS DE HOMENAGENS
---------------------------------------------------------- */

.hn-tribute-card-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}

.hn-tribute-thumb {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.hn-tribute-card-title {
  font-size: 1.1rem;
  margin: 0 0 .2rem;
}

.hn-tribute-card-sub {
  margin: 0;
  font-size: .85rem;
  color: var(--hn-text-soft);
}

.hn-tribute-meta {
  margin-top: .35rem;
  font-size: .86rem;
  color: var(--hn-text-soft);
}

/* área dos botões do card */
.hn-tribute-actions {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hn-tribute-actions .hn-btn {
  padding-inline: 1.6rem;
}

.hn-tribute-delete-form {
  margin: 0;
}

/* ---------------------------------------------------------
   PÁGINA DE HOMENAGEM — LANDING ESCURA
---------------------------------------------------------- */

.hn-public-body {
  background: #111b16;
  color: #f7f5f1;
}

.hn-public-main {
  max-width: 960px;
  margin: 2.6rem auto 3rem;
  padding: 0 1.4rem;
}

/* hero escuro com foto */
.hn-tribute-landing {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--hn-shadow-soft);
  margin-bottom: 2rem;
  background: #111;
}

.hn-tribute-landing-photo img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  display: block;
  filter: grayscale(.25);
}

/* faixa escura no rodapé com texto */
.hn-tribute-landing-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 2.4rem 2.2rem;
  background: linear-gradient(to top,
    rgba(10,18,14,0.98),
    rgba(10,18,14,0.72),
    transparent
  );
  text-align: center;
}

.hn-landing-overline {
  font-size: .85rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .85;
}

.hn-landing-name {
  font-family: "Playfair Display", serif;
  font-size: 2.4rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: .7rem 0 .3rem;
  color: #ffffff;
}

.hn-landing-dates {
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  color: #f5f2ea;
}

.hn-landing-burial {
  margin-top: 1.3rem;
  font-size: .9rem;
  color: #e9e1d4;
}

.hn-landing-message {
  margin-top: 1.3rem;
  font-size: .95rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: #f4efe4;
}

/* Card escuro para comentários */
.hn-card-dark {
  background: #1f2b25; /* levemente mais claro para contraste */
  color: #f7f5f1;
  box-shadow: var(--hn-shadow-soft);
}

.hn-card-dark .hn-label {
  color: #d1dad5;
}

.hn-card-dark .hn-input,
.hn-card-dark .hn-textarea,
.hn-card-dark .hn-select {
  background: #151f1a;
  border: 1px solid #3b4f45;
  color: #f7f5f1;
}

.hn-card-dark .hn-input::placeholder,
.hn-card-dark .hn-textarea::placeholder {
  color: rgba(231, 233, 229, 0.55);
}

.hn-card-dark .hn-muted {
  color: #c5cec8;
}

/* título em bege na seção de comentários */
.hn-comments-section h2,
.hn-card-dark h2,
.hn-comments-title {
  color: #EDE5D6 !important;
}

/* ---------------------------------------------------------
   RESPONSIVO
---------------------------------------------------------- */

@media (max-width: 768px) {
  .hn-header-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: .8rem;
  }

  .hn-card {
    padding: 1.6rem 1.5rem;
  }

  .hn-tribute-landing-photo img {
    height: 360px;
  }

  .hn-tribute-landing-overlay {
    padding: 2.1rem 1.5rem 1.8rem;
  }

  .hn-landing-name {
    font-size: 2rem;
    letter-spacing: .12em;
  }

  .hn-tribute-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------
   COMENTÁRIOS — EXIBIÇÃO NA LANDING
---------------------------------------------------------- */

.hn-comment {
  padding: 1.4rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hn-comment:last-child {
  border-bottom: none;
}

.hn-comment-name {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 .3rem;
  color: #EDE5D6;
}

.hn-comment-text {
  margin: 0 0 .6rem;
  line-height: 1.55;
  color: #f0f0f0;
}

.hn-comment-date {
  font-size: .8rem;
  opacity: .6;
}


/* =========================================================
   AJUSTE DEFINITIVO – BOTÃO FIXO + MODAL DE COMENTÁRIOS
   (sobrescreve qualquer coisa anterior)
========================================================= */

/* corpo da landing com espaço pro botão fixo */
.hn-public-body {
  background: #111b16;
  color: #f7f5f1;
  padding-bottom: 90px; /* espaço pro botão "Escreva uma homenagem" */
}

/* BOTÃO FIXO NO RODAPÉ */
.hn-comment-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.4rem;
  z-index: 9999;
  padding-inline: 1.8rem;
}

@media (max-width: 768px) {
  .hn-comment-cta {
    width: calc(100% - 2.8rem);
    bottom: 1rem;
  }
}

/* BACKDROP DO MODAL */
.hn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;               /* começa escondido */
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 1.5rem;
}

/* quando abre (classe adicionada pelo JS) */
.hn-modal-backdrop.is-visible {
  display: flex;
}

/* CAIXA DO MODAL */
.hn-modal {
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  box-shadow: 0 22px 40px rgba(0,0,0,0.55);
  position: relative;
  padding: 1.8rem 1.6rem 1.6rem;
}

/* como usamos hn-card-dark, garantimos o visual aqui também */
.hn-modal.hn-card-dark {
  background: #1f2b25;
}

/* BOTÃO X DE FECHAR */
.hn-modal-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  border: none;
  background: transparent;
  color: #f7f5f1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem;
  border-radius: 999px;
}

.hn-modal-close:hover {
  background: rgba(255,255,255,0.1);
}

/* COMENTÁRIOS EXIBIDOS NA LANDING */
.hn-comment {
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hn-comment:last-child {
  border-bottom: none;
}

.hn-comment-name {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 .3rem;
  color: #EDE5D6;
}

.hn-comment-text {
  margin: 0 0 .6rem;
  line-height: 1.55;
  color: #f0f0f0;
}

.hn-comment-date {
  font-size: .8rem;
  opacity: .6;
}


/* ---------------------------------------------------------
   FAB de ajuda no dashboard
---------------------------------------------------------- */

.hn-help-fab {
  position: fixed;
  left: 1.4rem;
  bottom: 1.4rem;
  background: var(--hn-primary);
  color: #fff;
  border-radius: 999px;
  padding: .6rem 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  text-decoration: none;
  z-index: 10000;
  font-size: .92rem;
}

.hn-help-fab ion-icon {
  font-size: 1.2rem;
}

.hn-help-fab:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   Modal genérico (reusado no dashboard)
---------------------------------------------------------- */

.hn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 1.5rem;
}

.hn-modal-backdrop.is-visible {
  display: flex;
}

.hn-modal {
  width: 100%;
  max-width: 480px;
  border-radius: 18px;
  box-shadow: 0 22px 40px rgba(0,0,0,0.55);
  position: relative;
  padding: 1.8rem 1.6rem 1.6rem;
}

.hn-modal.hn-card-dark {
  background: #1f2b25;
  color: #f7f5f1;
}

.hn-modal-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  border: none;
  background: transparent;
  color: #f7f5f1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem;
  border-radius: 999px;
}

.hn-modal-close:hover {
  background: rgba(255,255,255,0.1);
}

/* Ações do card (ver / baixar / moderar) */
.hn-tribute-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.4rem;
}

/* Container do menu de download */
.hn-download-menu {
  position: relative;
}

/* Botão principal de download (reusa hn-btn/hn-btn-ghost do tema) */
.hn-download-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Setinha do botão */
.hn-download-caret {
  font-size: 1rem;
  margin-left: 0.15rem;
}

/* Dropdown escondido por padrão */
.hn-download-options {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  padding: 0.25rem 0.35rem;
  display: none;
  z-index: 30;
}

/* Links dentro do dropdown */
.hn-download-options a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: #27332f;
  text-decoration: none;
  white-space: nowrap;
}

.hn-download-options a ion-icon {
  font-size: 1.1rem;
}

.hn-download-options a:hover {
  background: #f4f3ef;
}

/* Quando o menu está aberto */
.hn-download-menu.open .hn-download-options {
  display: block;
}


/* área dos botões do card */
.hn-tribute-actions {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* botões dessa área ficam um pouco mais compactos
   pra caber melhor em linha única */
.hn-tribute-actions .hn-btn {
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  white-space: nowrap; /* impede quebrar dentro do botão */
}



/* Força o preview preto e branco quando o select estiver marcado */
.hn-photo-preview.hn-bw {
    filter: grayscale(100%);
}