/*
 * QualityLife — Gutenberg / core block styles
 * Front: .entry-content | Block editor iframe: .editor-styles-wrapper
 * Load after style.css on front; with fonts via add_editor_style in editor.
 */

:root {
  --ql-bg: #fafaf9;
  --ql-surface: #ffffff;
  --ql-text: #1c1917;
  --ql-text-secondary: #57534e;
  --ql-text-muted: #a8a29e;
  --ql-border: #e7e5e4;
  --ql-radius: 16px;
  --ql-radius-sm: 10px;
  --ql-primary: #1d4ed8;
  --ql-primary-light: #eff6ff;
  --ql-primary-soft: #dbeafe;
  --ql-primary-dark: #1e3a8a;
}

/* Map to theme --primary when present (front); else use ql-* fallbacks */
.entry-content,
.editor-styles-wrapper {
  --block-p: var(--primary, var(--ql-primary));
  --block-pl: var(--primary-light, var(--ql-primary-light));
  --block-ps: var(--primary-soft, var(--ql-primary-soft));
  --block-pd: var(--primary-dark, var(--ql-primary-dark));
}

/* ─── Spacing: stack blocks ─── */
.entry-content > .wp-block-spacer,
.editor-styles-wrapper .wp-block-spacer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ─── Paragraph ─── */
.entry-content .wp-block-paragraph,
.editor-styles-wrapper .wp-block-paragraph {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text, var(--ql-text));
}

.entry-content .wp-block-paragraph.has-drop-cap:not(:focus-within)::first-letter,
.editor-styles-wrapper .wp-block-paragraph.has-drop-cap:not(:focus-within)::first-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3.2em;
  line-height: .9;
  margin: .08em .12em 0 0;
  color: var(--block-p);
}

/* ─── Heading (core: class trên chính h1–h6) ─── */
.entry-content h1.wp-block-heading,
.entry-content h2.wp-block-heading,
.entry-content h3.wp-block-heading,
.entry-content h4.wp-block-heading,
.entry-content h5.wp-block-heading,
.entry-content h6.wp-block-heading,
.editor-styles-wrapper h1.wp-block-heading,
.editor-styles-wrapper h2.wp-block-heading,
.editor-styles-wrapper h3.wp-block-heading,
.editor-styles-wrapper h4.wp-block-heading,
.editor-styles-wrapper h5.wp-block-heading,
.editor-styles-wrapper h6.wp-block-heading {
  color: var(--text, var(--ql-text));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  scroll-margin-top: 80px;
}

.entry-content h1.wp-block-heading,
.editor-styles-wrapper h1.wp-block-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  margin: 2.5rem 0 1rem;
}

.entry-content h2.wp-block-heading,
.editor-styles-wrapper h2.wp-block-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  margin: 3rem 0 1rem;
  letter-spacing: -.01em;
}

.entry-content h3.wp-block-heading,
.editor-styles-wrapper h3.wp-block-heading {
  font-size: 1.25rem;
  margin: 2.25rem 0 .75rem;
}

.entry-content h4.wp-block-heading,
.editor-styles-wrapper h4.wp-block-heading {
  font-size: 1.1rem;
  margin: 2rem 0 .65rem;
}

.entry-content h5.wp-block-heading,
.entry-content h6.wp-block-heading,
.editor-styles-wrapper h5.wp-block-heading,
.editor-styles-wrapper h6.wp-block-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary, var(--ql-text-secondary));
  margin: 1.75rem 0 .5rem;
}

/* ─── List ─── */
.entry-content .wp-block-list,
.editor-styles-wrapper .wp-block-list {
  margin-bottom: 1.5rem;
  padding-left: 1.75rem;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text, var(--ql-text));
}

.entry-content .wp-block-list li,
.editor-styles-wrapper .wp-block-list li {
  margin-bottom: .5rem;
}

.entry-content .wp-block-list.is-style-checkmark-list li::marker,
.editor-styles-wrapper .wp-block-list.is-style-checkmark-list li::marker {
  color: var(--block-p);
}

/* ─── Quote ─── */
.entry-content .wp-block-quote,
.editor-styles-wrapper .wp-block-quote {
  border-left: 3px solid var(--block-p);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  background: var(--block-pl);
  border-radius: 0 var(--ql-radius-sm) var(--ql-radius-sm) 0;
  font-style: italic;
  color: var(--text-secondary, var(--ql-text-secondary));
  font-size: 1.05rem;
  line-height: 1.8;
}

.entry-content .wp-block-quote cite,
.editor-styles-wrapper .wp-block-quote cite {
  display: block;
  margin-top: .85rem;
  font-size: .85rem;
  font-style: normal;
  font-weight: 600;
  color: var(--block-p);
}

.entry-content .wp-block-quote p:last-child,
.editor-styles-wrapper .wp-block-quote p:last-child {
  margin-bottom: 0;
}

/* ─── Code (inline) ─── */
.entry-content .wp-block-code,
.editor-styles-wrapper .wp-block-code {
  margin: 1.75rem 0;
  padding: 0;
  border: none;
  background: transparent;
}

.entry-content .wp-block-code code,
.editor-styles-wrapper .wp-block-code code {
  display: block;
  padding: 1.25rem 1.5rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--ql-radius-sm);
  border: 1px solid #1e293b;
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Monaco, monospace;
  font-size: .85rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre !important;
  word-break: normal;
}

/* ─── Details / accordion ─── */
.entry-content .wp-block-details,
.editor-styles-wrapper .wp-block-details {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface, var(--ql-surface));
  border: 1px solid var(--border, var(--ql-border));
  border-radius: var(--ql-radius-sm);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.entry-content .wp-block-details summary,
.editor-styles-wrapper .wp-block-details summary {
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  color: var(--text, var(--ql-text));
  list-style: none;
}

.entry-content .wp-block-details summary::-webkit-details-marker,
.editor-styles-wrapper .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.entry-content .wp-block-details summary::before,
.editor-styles-wrapper .wp-block-details summary::before {
  content: '';
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-right: .6em;
  border-right: 2px solid var(--block-p);
  border-bottom: 2px solid var(--block-p);
  transform: rotate(-45deg);
  transition: transform .2s;
  vertical-align: middle;
  margin-bottom: .15em;
}

.entry-content .wp-block-details[open] summary::before,
.editor-styles-wrapper .wp-block-details[open] summary::before {
  transform: rotate(45deg);
}

.entry-content .wp-block-details > *:not(summary),
.editor-styles-wrapper .wp-block-details > *:not(summary) {
  margin-top: 1rem;
  color: var(--text-secondary, var(--ql-text-secondary));
  font-size: .98rem;
  line-height: 1.75;
}

/* ─── Math (core / plugins) ─── */
.entry-content .wp-block-math,
.editor-styles-wrapper .wp-block-math,
.entry-content .wp-block-jetpack-latex,
.editor-styles-wrapper .wp-block-jetpack-latex {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg, var(--ql-bg));
  border: 1px solid var(--border, var(--ql-border));
  border-radius: var(--ql-radius-sm);
  overflow-x: auto;
  font-size: .95rem;
}

.entry-content .wp-block-math .katex,
.editor-styles-wrapper .wp-block-math .katex {
  font-size: 1.05em;
}

/* ─── Preformatted ─── */
.entry-content .wp-block-preformatted,
.editor-styles-wrapper .wp-block-preformatted {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg, var(--ql-bg));
  border: 1px solid var(--border, var(--ql-border));
  border-radius: var(--ql-radius-sm);
  font-family: ui-monospace, 'JetBrains Mono', Menlo, Monaco, monospace;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--text, var(--ql-text));
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Pullquote ─── */
.entry-content .wp-block-pullquote,
.editor-styles-wrapper .wp-block-pullquote {
  margin: 2.5rem 0;
  padding: 2rem 1.5rem;
  text-align: center;
  border-top: 3px solid var(--block-p);
  border-bottom: 3px solid var(--block-p);
  background: linear-gradient(180deg, var(--block-pl) 0%, transparent 100%);
  border-radius: var(--ql-radius-sm);
}

.entry-content .wp-block-pullquote blockquote,
.editor-styles-wrapper .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.35;
  color: var(--text, var(--ql-text));
}

.entry-content .wp-block-pullquote cite,
.editor-styles-wrapper .wp-block-pullquote cite {
  display: block;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--block-p);
}

/* ─── Table ─── */
.entry-content .wp-block-table,
.editor-styles-wrapper .wp-block-table {
  margin: 2rem 0;
  overflow-x: auto;
  border-radius: var(--ql-radius-sm);
  border: 1px solid var(--border, var(--ql-border));
  background: var(--surface, var(--ql-surface));
}

.entry-content .wp-block-table table,
.editor-styles-wrapper .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border, var(--ql-border));
  text-align: left;
}

.entry-content .wp-block-table thead,
.editor-styles-wrapper .wp-block-table thead {
  background: var(--bg, var(--ql-bg));
}

.entry-content .wp-block-table th,
.editor-styles-wrapper .wp-block-table th {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary, var(--ql-text-secondary));
}

.entry-content .wp-block-table tbody tr:hover td,
.editor-styles-wrapper .wp-block-table tbody tr:hover td {
  background: var(--bg, var(--ql-bg));
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: rgba(0,0,0,.02);
}

/* ─── Verse ─── */
.entry-content pre.wp-block-verse,
.editor-styles-wrapper pre.wp-block-verse,
.entry-content .wp-block-verse pre,
.editor-styles-wrapper .wp-block-verse pre {
  margin: 1.75rem 0;
  padding: 1.5rem 1.25rem;
  background: var(--bg, var(--ql-bg));
  border: 1px solid var(--border, var(--ql-border));
  border-left: 3px solid var(--block-p);
  border-radius: 0 var(--ql-radius-sm) var(--ql-radius-sm) 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text, var(--ql-text));
  white-space: pre-wrap;
}

/* ─── Classic (freeform) ─── */
.entry-content .wp-block-freeform,
.editor-styles-wrapper .wp-block-freeform {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text, var(--ql-text));
}

.entry-content .wp-block-freeform h2,
.editor-styles-wrapper .wp-block-freeform h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  margin: 2.5rem 0 1rem;
}

.entry-content .wp-block-freeform blockquote,
.editor-styles-wrapper .wp-block-freeform blockquote {
  border-left: 3px solid var(--block-p);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--block-pl);
  border-radius: 0 var(--ql-radius-sm) var(--ql-radius-sm) 0;
}

/* ─── Stretchy Paragraph / Heading (plugin hoặc block tùy chỉnh) ─── */
.entry-content [class*="stretchy"][class*="wp-block"],
.editor-styles-wrapper [class*="stretchy"][class*="wp-block"],
.entry-content [class*="wp-block"][class*="stretchy"],
.editor-styles-wrapper [class*="wp-block"][class*="stretchy"] {
  color: var(--text, var(--ql-text));
  line-height: 1.25;
}

.entry-content [class*="stretchy-heading"] h1,
.entry-content [class*="stretchy-heading"] h2,
.entry-content [class*="stretchy-heading"] h3,
.entry-content h1[class*="stretchy-heading"],
.entry-content h2[class*="stretchy-heading"],
.editor-styles-wrapper [class*="stretchy-heading"] h1,
.editor-styles-wrapper [class*="stretchy-heading"] h2,
.editor-styles-wrapper [class*="stretchy-heading"] h3,
.editor-styles-wrapper h1[class*="stretchy-heading"],
.editor-styles-wrapper h2[class*="stretchy-heading"] {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ─── Separator ─── */
.entry-content .wp-block-separator,
.editor-styles-wrapper .wp-block-separator {
  margin: 2.5rem auto;
  border: none;
  border-top: 1px solid var(--border, var(--ql-border));
  max-width: 120px;
}

.entry-content .wp-block-separator.is-style-wide,
.editor-styles-wrapper .wp-block-separator.is-style-wide {
  max-width: none;
}

.entry-content .wp-block-separator.is-style-dots::before,
.editor-styles-wrapper .wp-block-separator.is-style-dots::before {
  color: var(--block-p);
}

/* ─── Buttons ─── */
.entry-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
  border-radius: 100px;
  font-weight: 600;
  font-size: .9rem;
  padding: .65rem 1.5rem;
  transition: transform .2s, box-shadow .2s;
}

.entry-content .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 2px;
}

/* ─── Images / media ─── */
.entry-content .wp-block-image img,
.editor-styles-wrapper .wp-block-image img {
  border-radius: var(--ql-radius-sm);
}

.entry-content .wp-block-image figcaption,
.editor-styles-wrapper .wp-block-image figcaption {
  font-size: .82rem;
  color: var(--text-muted, var(--ql-text-muted));
  text-align: center;
  margin-top: .65rem;
}

/* ─── Group / columns (layout) ─── */
.entry-content .wp-block-group.has-background,
.editor-styles-wrapper .wp-block-group.has-background {
  border-radius: var(--ql-radius);
  padding: 1.5rem 1.75rem;
}

.entry-content .wp-block-columns,
.editor-styles-wrapper .wp-block-columns {
  margin-bottom: 1.5rem;
  gap: 1.5rem;
}

/* ─── Align wide / full inside article column ─── */
.entry-content .alignwide {
  max-width: min(100%, 960px);
  margin-left: auto;
  margin-right: auto;
}

.entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 782px) {
  .entry-content .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}