/**
 * Guestbook Plugin - Custom Styles
 *
 * Ce fichier contient uniquement les styles personnalisés du plugin.
 * Les classes utilitaires Tailwind sont fournies par le thème.
 */

/* ========================================
   MASONRY GRID LAYOUT
   ======================================== */

#guestbook-feed {
  margin: 0 auto;
}

/**
 * Grid-sizer : Définit la largeur de référence pour les colonnes Masonry
 * Gutter-sizer : Définit l'espacement horizontal entre les colonnes
 * 
 * IMPORTANT : Ces éléments sont invisibles mais essentiels pour le calcul Masonry
 */
.guestbook-grid-sizer,
.guestbook-gutter-sizer {
  /* Éléments invisibles pour le calcul */
}

/* Gutter horizontal entre les colonnes */
.guestbook-gutter-sizer {
  width: 24px;
}

/* ----------------------------------------
   Mobile first : 1 colonne
   ---------------------------------------- */
.guestbook-grid-sizer,
.guestbook-card {
  width: 100%;
}

/* Espacement vertical entre les cartes */
.guestbook-card {
  margin-bottom: 24px;
}

/* ----------------------------------------
   Tablette (≥768px) : 2 colonnes
   ---------------------------------------- */
@media (min-width: 768px) {
  .guestbook-grid-sizer,
  .guestbook-card {
    /* 2 colonnes : (100% - 1 gutter) / 2 = (100% - 24px) / 2 */
    width: calc((100% - 24px) / 2);
  }
}

/* ----------------------------------------
   Desktop (≥1024px) : 3 colonnes
   ---------------------------------------- */
@media (min-width: 1024px) {
  .guestbook-grid-sizer,
  .guestbook-card {
    /* 3 colonnes : (100% - 2 gutters) / 3 = (100% - 48px) / 3 */
    width: calc((100% - 48px) / 3);
  }

  /* Cartes avec image : 2/3 de la largeur (span 2 colonnes) */
  .guestbook-card.has-image {
    /* 2 colonnes + 1 gutter : ((100% - 48px) / 3 * 2) + 24px */
    width: calc(((100% - 48px) / 3 * 2) + 24px);
  }
}

/* ----------------------------------------
   Grand écran (≥1280px) : 4 colonnes
   ---------------------------------------- */
@media (min-width: 1280px) {
  .guestbook-grid-sizer,
  .guestbook-card {
    /* 4 colonnes : (100% - 3 gutters) / 4 = (100% - 72px) / 4 */
    width: calc((100% - 72px) / 4);
  }

  /* Cartes avec image : span 2 colonnes */
  .guestbook-card.has-image {
    /* 2 colonnes + 1 gutter : ((100% - 72px) / 4 * 2) + 24px */
    width: calc(((100% - 72px) / 4 * 2) + 24px);
  }
}

/* Animation pour les cartes */
.guestbook-card {
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  animation: guestbook-fadeIn 0.3s ease-out;
}

.guestbook-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@keyframes guestbook-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spinner d'animation */
@keyframes guestbook-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.guestbook-spinner {
  animation: guestbook-spin 1s linear infinite;
}

/* Focus visible pour accessibilité */
.guestbook-feed :focus-visible,
.guestbook-login :focus-visible {
  outline: 2px solid black;
}

/* Styles prose pour le texte d'introduction */
.guestbook-prose {
  line-height: 1.6;
}

.guestbook-prose p {
  margin-bottom: 0.75em;
}

.guestbook-prose a {
  color: #1c64f2;
  text-decoration: underline;
}

.guestbook-prose a:hover {
  color: #1a56db;
}

/* Z-index personnalisé pour la modal (au-dessus de z-50) */
.guestbook-modal-overlay {
  z-index: 60;
}

/* Toast notification */
.guestbook-toast {
  z-index: 70;
}

/* ========================================
   QUILL EDITOR STYLES
   ======================================== */

/* Container de l'éditeur Quill */
.guestbook-quill-container {
  background: white;
}

.guestbook-quill-container .ql-toolbar {
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px 8px 0 0;
}

.guestbook-quill-container .ql-container {
  border: none;
  font-family: inherit;
  font-size: 16px;
}

.guestbook-quill-container .ql-editor {
  min-height: 150px;
  padding: 16px;
  line-height: 1.6;
}

.guestbook-quill-container .ql-editor.ql-blank::before {
  color: #9ca3af;
  font-style: normal;
  left: 16px;
  right: 16px;
}

/* Styles des boutons toolbar */
.guestbook-quill-container .ql-toolbar button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.guestbook-quill-container .ql-toolbar button:hover {
  background: #e5e7eb;
}

.guestbook-quill-container .ql-toolbar button.ql-active {
  background: #1c64f2;
  color: white;
}

.guestbook-quill-container .ql-toolbar button.ql-active .ql-stroke {
  stroke: white;
}

.guestbook-quill-container .ql-toolbar button.ql-active .ql-fill {
  fill: white;
}

/* ========================================
   MESSAGE CONTENT STYLES (affichage)
   ======================================== */

/* Styles pour le contenu HTML des messages */
.guestbook-message-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.guestbook-message-content p {
  margin-bottom: 0.5em;
}

.guestbook-message-content p:last-child {
  margin-bottom: 0;
}

.guestbook-message-content strong,
.guestbook-message-content b {
  font-weight: 600;
}

.guestbook-message-content em,
.guestbook-message-content i {
  font-style: italic;
}

.guestbook-message-content u {
  text-decoration: underline;
}

.guestbook-message-content s,
.guestbook-message-content strike {
  text-decoration: line-through;
}

.guestbook-message-content a {
  color: #1c64f2;
  text-decoration: underline;
}

.guestbook-message-content a:hover {
  color: #1a56db;
}

/* ========================================
   FAZ-QUILL-EMOJI - INLINE DISPLAY FIX
   ======================================== */

/* Emojis doivent s'afficher inline, pas en bloc */
.faz-emoji {
  display: inline !important;
  vertical-align: middle;
}

.faz-emoji span {
  display: inline !important;
  vertical-align: middle;
}

/* Dans l'éditeur Quill */
.ql-editor .faz-emoji {
  display: inline !important;
  vertical-align: middle;
  font-size: 1.2em;
}

/* Dans l'affichage des messages */
.guestbook-message-content .faz-emoji {
  display: inline !important;
  vertical-align: middle;
  font-size: 1.2em;
}

.guestbook-message-content .faz-emoji span {
  display: inline !important;
}

/* Legacy quill-emoji support */
.guestbook-message-content .ap {
  font-size: 1.2em;
  vertical-align: middle;
}

/* ========================================
   FAZ-QUILL-EMOJI - Z-INDEX FIX
   ======================================== */

/* Dropdown des emojis - position fixed pour sortir de la modal */
.faz-quill-emoji-dropdown {
  z-index: 99999 !important;
  position: fixed !important;
  top: 60% !important;
  left: 50%;
}

.faz-quill-emoji-dropdown-content {
  z-index: 99999 !important;
  max-height: 350px;
  overflow-y: auto;
}

/* ========================================
   RGPD CHECKBOXES
   ======================================== */

/* Style des checkboxes RGPD */
.guestbook-gdpr-checkbox {
  accent-color: #000;
}

/* Label RGPD - support du HTML des WYSIWYG */
.guestbook-gdpr-label p {
  margin: 0;
  display: inline;
}

.guestbook-gdpr-label a {
  color: #1c64f2;
  text-decoration: underline;
}

.guestbook-gdpr-label a:hover {
  color: #1e40af;
}

/* ========================================
   WELCOME POPUP
   ======================================== */

/* Contenu de la popup - styles prose */
.guestbook-welcome-content p {
  margin-bottom: 1em;
}

.guestbook-welcome-content p:last-child {
  margin-bottom: 0;
}

.guestbook-welcome-content strong,
.guestbook-welcome-content b {
  font-weight: 600;
}

.guestbook-welcome-content em,
.guestbook-welcome-content i {
  font-style: italic;
}

.guestbook-welcome-content ul,
.guestbook-welcome-content ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.guestbook-welcome-content ul li {
  list-style-type: disc;
  margin-bottom: 0.5em;
}

.guestbook-welcome-content ol li {
  list-style-type: decimal;
  margin-bottom: 0.5em;
}

.guestbook-welcome-content a {
  color: #1c64f2;
  text-decoration: underline;
}

.guestbook-welcome-content a:hover {
  color: #1e40af;
}