/* =============================================================================
   Párbeszéd (/dialogue, /dialogue/szaz-kerdes)
   Ported from src/components/sections/DialogueSection.jsx,
   src/components/dialogue/DialogueSubNav.jsx and src/pages/HundredQuestions.jsx.
   Accent is #C5A059 (the React dialogue accent), not the site-wide #D4AF37.
   ============================================================================= */

.dlg {
  --dlg-accent: #C5A059;
  --dlg-accent-80: rgba(197,160,89,0.8);
  --dlg-accent-70: rgba(197,160,89,0.7);
  --dlg-accent-50: rgba(197,160,89,0.5);
  --dlg-accent-40: rgba(197,160,89,0.4);
  --dlg-accent-25: rgba(197,160,89,0.25);
  --dlg-accent-15: rgba(197,160,89,0.15);
  --dlg-accent-08: rgba(197,160,89,0.08);
  --dlg-text: #FDFBF7;
  --dlg-text-70: rgba(253,251,247,0.7);
  --dlg-text-65: rgba(253,251,247,0.65);
  --dlg-bg: #000000;
  --dlg-bg-2: #0a0a05;
  --dlg-panel: rgba(10,10,5,0.7);
  --dlg-subnav-bg: rgba(10,10,5,0.92);
  --dlg-shadow: 0 0 30px rgba(197,160,89,0.3);

  padding-top: 5rem; /* React: pt-20, clears the fixed navbar */
  background: var(--dlg-bg);
  color: var(--dlg-text);
}

html.light .dlg {
  --dlg-accent: #8B6914;
  --dlg-accent-80: rgba(139,105,20,0.85);
  --dlg-accent-70: rgba(139,105,20,0.75);
  --dlg-accent-50: rgba(139,105,20,0.6);
  --dlg-accent-40: rgba(139,105,20,0.45);
  --dlg-accent-25: rgba(139,105,20,0.3);
  --dlg-accent-15: rgba(139,105,20,0.2);
  --dlg-accent-08: rgba(139,105,20,0.1);
  --dlg-text: #3D2914;
  --dlg-text-70: rgba(61,41,20,0.8);
  --dlg-text-65: rgba(61,41,20,0.75);
  --dlg-bg: #F0E6D8;
  --dlg-bg-2: #E8DCC8;
  --dlg-panel: rgba(232,220,200,0.7);
  --dlg-subnav-bg: rgba(240,230,216,0.94);
  --dlg-shadow: none;
}

/* ----- Sub-navigation (sticky under the site header) ----- */
.dlg-subnav {
  position: sticky; top: 72px; z-index: 40;
  background: var(--dlg-subnav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dlg-accent-15);
}
.dlg-subnav-inner {
  display: flex; align-items: center; gap: 1rem;
  max-width: 80rem; margin: 0 auto; padding: 0.75rem 1.5rem;
}
.dlg-subnav-brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; color: var(--dlg-accent); text-decoration: none; }
.dlg-subnav-brand svg { width: 1rem; height: 1rem; }
.dlg-subnav-brand span { font-family: 'Cinzel Decorative', serif; font-size: 0.875rem; letter-spacing: 0.05em; }
@media (max-width: 640px) { .dlg-subnav-brand span { display: none; } }
.dlg-subnav-sep { width: 1px; height: 1.25rem; flex-shrink: 0; background: var(--dlg-accent-15); }
.dlg-subnav-links { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.dlg-subnav-links::-webkit-scrollbar { display: none; }
.dlg-subnav-link {
  padding: 0.375rem 0.75rem; border-radius: 0.25rem; white-space: nowrap;
  font-size: 0.75rem; text-decoration: none;
  color: var(--dlg-accent-50); border: 1px solid var(--dlg-accent-08);
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.dlg-subnav-link:hover { color: var(--dlg-accent); border-color: var(--dlg-accent-25); }
.dlg-subnav-link.is-active {
  font-family: 'Cinzel Decorative', serif;
  color: var(--dlg-accent); background: var(--dlg-accent-15); border-color: var(--dlg-accent-25);
}

/* ----- Sections ----- */
.dlg-section { position: relative; overflow: hidden; padding: 6rem 0; }
.dlg-hero { padding: 4rem 0; }
.dlg-section--body { padding: 3rem 0 5rem; }
@media (min-width: 768px) {
  .dlg-section { padding: 8rem 0; }
  .dlg-hero { padding: 6rem 0; }
  .dlg-section--body { padding: 5rem 0 7rem; }
}

.dlg-bg { position: absolute; inset: 0; pointer-events: none; }
.dlg-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.1; }
.dlg-bg-overlay, .dlg-bg--hero, .dlg-bg--body { position: absolute; inset: 0; }
.dlg-bg-overlay { background: linear-gradient(to bottom, var(--dlg-bg), rgba(10,10,5,0.97), var(--dlg-bg)); }
html.light .dlg-bg-overlay { background: linear-gradient(to bottom, var(--dlg-bg), rgba(232,220,200,0.97), var(--dlg-bg)); }
.dlg-bg--hero { background: linear-gradient(to bottom, var(--dlg-bg), rgba(10,10,5,0.98), var(--dlg-bg)); }
.dlg-bg--body { background: linear-gradient(to bottom, rgba(10,10,5,0.95), var(--dlg-bg), rgba(10,10,5,0.95)); }
html.light .dlg-bg--hero, html.light .dlg-bg--body { background: linear-gradient(to bottom, var(--dlg-bg-2), var(--dlg-bg), var(--dlg-bg-2)); }

.dlg-wrap { position: relative; z-index: 10; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.dlg-wrap--narrow { max-width: 48rem; }

/* ----- Headings ----- */
.dlg-head { text-align: center; margin-bottom: 4rem; }
/* Line heights below mirror Tailwind's computed values in the React build. */
.dlg-eyebrow { color: var(--dlg-accent-50); font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.3em; text-transform: uppercase; }
.dlg .dlg-title {
  font-family: 'Cinzel Decorative', serif; color: var(--dlg-accent);
  font-size: 1.875rem; line-height: 2.25rem; letter-spacing: normal;
  margin: 1rem 0; text-shadow: var(--dlg-shadow);
}
@media (min-width: 768px) { .dlg .dlg-title { font-size: 3rem; line-height: 1; } }
.dlg .dlg-arabic { font-family: serif; color: var(--dlg-accent-40); font-size: 1.125rem; line-height: 1.75rem; margin: 0; }
.dlg-divider { width: 4rem; height: 1px; margin: 1.5rem auto 0; background: linear-gradient(to right, transparent, var(--dlg-accent-40), transparent); }
.dlg-divider--wide { width: 6rem; background: var(--dlg-accent-40); margin: 0 auto 1.5rem; }
.dlg-lead { color: var(--dlg-text-70); font-size: 1rem; line-height: 1.625rem; max-width: 42rem; margin: 0 auto; }

/* ----- Split layout (Shia / Sunni) ----- */
.dlg-split { position: relative; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .dlg-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dlg-split-line { display: none; }
@media (min-width: 1024px) {
  .dlg-split-line { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; }
  .dlg-split-line span {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, var(--dlg-accent), transparent);
    animation: dlg-pulse 3s ease-in-out infinite;
  }
}
@keyframes dlg-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dlg-split-line span { animation: none; opacity: 0.6; } }

.dlg-split-line--mobile { height: 1px; margin-bottom: 3rem; background: linear-gradient(to right, transparent, var(--dlg-accent-40), transparent); }
@media (min-width: 1024px) { .dlg-split-line--mobile { display: none; } }

.dlg-col { display: flex; flex-direction: column; gap: 1.5rem; }
.dlg-col--shia { margin-bottom: 3rem; }
@media (min-width: 1024px) {
  .dlg-col--shia { padding-right: 3rem; margin-bottom: 0; text-align: right; }
  /* React keeps the hidden mobile divider in the space-y-6 flow, which offsets
     this column by one gap; mirror that so both versions line up. */
  .dlg-col--sunni { padding-left: 3rem; padding-top: 1.5rem; }
}
.dlg .dlg-col-title {
  font-family: 'Cinzel Decorative', serif; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: normal;
  color: var(--dlg-accent-80); text-align: center; margin: 0 0 0.5rem;
}
@media (min-width: 1024px) {
  .dlg-col--shia .dlg-col-title { text-align: right; }
  .dlg-col--sunni .dlg-col-title { text-align: left; }
}

.dlg-point { border: 1px solid var(--dlg-accent-08); border-radius: 0.5rem; padding: 1.5rem; }
.dlg-col--shia .dlg-point { background: linear-gradient(to right, var(--dlg-panel), transparent); }
.dlg-col--sunni .dlg-point { background: linear-gradient(to left, var(--dlg-panel), transparent); }
.dlg .dlg-point-title {
  font-family: 'Cinzel Decorative', serif; font-size: 1rem; line-height: 1.5rem; letter-spacing: normal;
  color: var(--dlg-text); margin: 0 0 0.5rem;
}
.dlg .dlg-point-text { color: var(--dlg-text-65); font-size: 0.875rem; line-height: 1.625; margin: 0; }

/* ----- 100 questions ----- */
.dlg-intro {
  display: flex; flex-direction: column; gap: 1rem;
  background: linear-gradient(to bottom, var(--dlg-accent-08), transparent);
  border: 1px solid var(--dlg-accent-15); border-radius: 0.5rem;
  padding: 1.5rem; margin-bottom: 3rem;
}
@media (min-width: 768px) { .dlg-intro { padding: 2rem; } }
.dlg .dlg-intro-p { display: block; color: var(--dlg-text-70); font-size: 0.875rem; line-height: 1.5rem; }
@media (min-width: 768px) { .dlg .dlg-intro-p { font-size: 1rem; } }
.dlg .dlg-intro-p--closing { color: var(--dlg-accent-50); font-style: italic; margin-top: 0.5rem; }

.dlg-questions {
  background: linear-gradient(to bottom, rgba(197,160,89,0.05), transparent);
  border: 1px solid var(--dlg-accent-08); border-radius: 0.5rem; padding: 1.5rem;
}
@media (min-width: 768px) { .dlg-questions { padding: 2rem; } }
.dlg-q-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; margin: 0; padding: 0; }
.dlg-q { display: flex; align-items: flex-start; gap: 1rem; }
.dlg-q-num {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px;
  border: 1px solid var(--dlg-accent-25);
  display: flex; align-items: center; justify-content: center;
  color: var(--dlg-accent-70); font-size: 0.75rem; line-height: 1rem; font-family: 'Cinzel Decorative', serif;
}
.dlg .dlg-q-text { color: var(--dlg-text-65); font-size: 0.875rem; line-height: 1.5rem; padding-top: 0.25rem; margin: 0; }
@media (min-width: 768px) { .dlg .dlg-q-text { font-size: 1rem; } }

.dlg-source { display: flex; align-items: center; gap: 0.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--dlg-accent-15); }
.dlg-source-label { font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dlg-accent-40); }
.dlg-source a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--dlg-accent-50); text-decoration: none; transition: color .3s ease; }
.dlg-source a:hover { color: var(--dlg-accent); }
.dlg-source svg { width: 0.75rem; height: 0.75rem; }