/*
 * Minimal Lexxy extensions for app-specific consistency.
 * Keep this small and prefer the gem defaults unless something is visibly missing.
 */

/* Sticky editor toolbar: keep formatting controls in reach while writing long
   posts. Sticks just below the fixed app header (h-16 / ~65px). The opaque
   background stops content from showing through as it scrolls underneath. */
:where(lexxy-editor) lexxy-toolbar {
  position: sticky;
  top: 65px;
  z-index: 20;
  background: var(--lexxy-color-canvas, var(--color-base-100, #fff));
}

:where(.post-content) {
  font-family: var(--font-reading, "Source Serif 4", Georgia, serif);
  font-size: 1.125rem;
  line-height: 1.75;
}

:where(.reading-copy) :where(.post-content) {
  font-size: inherit;
  line-height: inherit;
}

:where(.post-content) :where(h1, h2, h3, h4) {
  font-family: var(--font-title, "Satoshi", ui-sans-serif, system-ui, sans-serif);
}

:where(lexxy-editor) :where(.lexxy-editor__content) {
  font-family: var(--font-reading, "Source Serif 4", Georgia, serif);
  font-size: 1.125rem;
  line-height: 1.75;
}

:where(lexxy-editor) :where(.lexxy-editor__content) :where(h1, h2, h3, h4) {
  font-family: var(--font-title, "Satoshi", ui-sans-serif, system-ui, sans-serif);
}

/* Serif intermediate heading — same font as the reading body, italic.
   Emitted as <h5> by the editor (see app/javascript/lexxy_config.js). */
:where(.post-content) h5,
:where(lexxy-editor) :where(.lexxy-editor__content) h5 {
  font-family: var(--font-reading, "Source Serif 4", Georgia, serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
}

:where(.lexxy-content) :where(.lexxy-content__table-wrapper) {
  margin: 0;
  margin-block: 1ch;
  overflow-x: auto;
}

:where(.lexxy-content) table,
:where(lexxy-editor) table {
  border-collapse: collapse;
  border-spacing: 0;
  inline-size: calc(100% - 0.5ch);
  margin: 0.25ch;
}

:where(.lexxy-content) th,
:where(.lexxy-content) td,
:where(lexxy-editor) th,
:where(lexxy-editor) td {
  border: 1px solid var(--lexxy-color-table-cell-border, var(--lexxy-color-ink-lighter));
  min-width: 5ch;
  max-width: 50ch;
  padding: 1ch;
  text-align: start;
  word-break: normal;
}

:where(.lexxy-content) th.lexxy-content__table-cell--header,
:where(.lexxy-content) td.lexxy-content__table-cell--header,
:where(lexxy-editor) th.lexxy-content__table-cell--header,
:where(lexxy-editor) td.lexxy-content__table-cell--header {
  background-color: var(--lexxy-color-table-header-bg, var(--lexxy-color-ink-lightest));
  font-weight: bold;
}

.lexxy-selection-toolbar {
  align-items: center;
  background: var(--lexxy-color-canvas, white);
  border: 1px solid var(--lexxy-color-ink-lighter, rgb(0 0 0 / 15%));
  border-radius: 8px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 20%);
  color: var(--lexxy-color-ink, #222);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  left: 0;
  max-inline-size: min(92vw, 36rem);
  padding: 4px;
  position: fixed;
  top: 0;
  z-index: calc(var(--lexxy-z-popup, 1000) + 10);
}

.lexxy-selection-toolbar[hidden] {
  display: none;
}

.lexxy-selection-toolbar__group {
  align-items: center;
  display: inline-flex;
  gap: 2px;
}

.lexxy-selection-toolbar__group+.lexxy-selection-toolbar__group {
  border-inline-start: 1px solid var(--lexxy-color-ink-lighter, rgb(0 0 0 / 15%));
  padding-inline-start: 4px;
}

.lexxy-selection-toolbar button {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  inline-size: 2rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.lexxy-selection-toolbar summary {
  align-items: center;
  block-size: 2rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  inline-size: 2rem;
  justify-content: center;
  list-style: none;
  user-select: none;
}

.lexxy-selection-toolbar summary::-webkit-details-marker {
  display: none;
}

.lexxy-selection-toolbar svg {
  -webkit-touch-callout: none;
  block-size: 1.125rem;
  fill: currentColor;
  inline-size: 1.125rem;
  pointer-events: none;
  user-select: none;
}

.lexxy-selection-toolbar button:hover,
.lexxy-selection-toolbar button:focus-visible,
.lexxy-selection-toolbar button[aria-pressed="true"],
.lexxy-selection-toolbar summary:hover,
.lexxy-selection-toolbar summary:focus-visible,
.lexxy-selection-toolbar details[open]>summary {
  background: var(--lexxy-color-selected, rgb(0 0 0 / 8%));
}

.lexxy-selection-toolbar button:focus-visible,
.lexxy-selection-toolbar summary:focus-visible {
  outline: 2px solid var(--lexxy-focus-ring-color, #2563eb);
  outline-offset: 2px;
}

.lexxy-selection-toolbar [data-command="italic"] span {
  font-style: italic;
}

.lexxy-selection-toolbar [data-command="strikethrough"] span {
  text-decoration: line-through;
}

.lexxy-selection-toolbar [data-command="clearFormatting"] span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.lexxy-selection-toolbar__lexxy-toolbar {
  --lexxy-toolbar-button-size: 2rem;
  --lexxy-toolbar-gap: 3px;
  --lexxy-toolbar-spacing: 4px;

  background: transparent;
  border: 0;
  color: inherit;
  display: flex;
  gap: 0;
  max-inline-size: none;
  padding: 0;
}

.lexxy-selection-toolbar__lexxy-toolbar .lexxy-editor__toolbar-dropdown--chevron summary {
  gap: 0.3rem;
  grid-template-columns: auto auto;
  inline-size: 2.75rem;
  justify-content: center;
  padding-inline: 0.25rem;
}

.lexxy-selection-toolbar__lexxy-toolbar .lexxy-editor__toolbar-dropdown-content {
  inset-block-start: calc(100% + 6px);
}

.lexxy-selection-toolbar__lexxy-toolbar lexxy-highlight-dropdown {
  max-inline-size: min(var(--max-inline-size), 90vw);
}

.lexxy-selection-toolbar__lexxy-toolbar lexxy-highlight-dropdown .lexxy-highlight-colors {
  grid-template-columns: repeat(9, minmax(var(--lexxy-toolbar-button-size), 1fr));
}

.lexxy-selection-toolbar__lexxy-toolbar .lexxy-editor__toolbar-overflow {
  display: none !important;
}

/* Format/heading dropdown → lexxy.dev-style vertical list with descriptions.
   Buttons are relabelled (Turkish label + description) by
   lexxy_heading_labels_controller.js, which injects .lhl-title / .lhl-desc and
   marks the serif option with .lhl-serif.

   The gem collapses this menu into a compact 4-column icon grid (hiding the text
   labels) whenever its toolbar runs out of horizontal room ([overflowing]). Since
   our labels + descriptions need the width, we force the labelled vertical list in
   all states — hence the !important overrides against that responsive fallback. */
.lexxy-editor__toolbar-dropdown-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  min-inline-size: 13rem;
}

/* Full-width text rows: direct-child buttons (Normal/Clear) and the heading
   buttons nested under the display:contents wrappers. */
.lexxy-editor__toolbar-dropdown-list > button,
.lexxy-heading-options .lexxy-heading-button {
  align-items: flex-start;
  aspect-ratio: auto;
  inline-size: auto;
  justify-content: flex-start;
  text-align: start;
}

.lexxy-heading-options .lexxy-heading-button {
  display: flex;
  flex-direction: column !important;
  gap: 1px;
  line-height: 1.25;
  white-space: normal;
}

/* Keep our labels visible even in the [overflowing] state, where the gem hides
   all button spans. */
.lhl-title,
.lhl-desc {
  display: block !important;
  font-family: var(--font-title, "Satoshi", ui-sans-serif, system-ui, sans-serif);
}

.lhl-title {
  font-weight: 600;
}

.lhl-desc {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.6;
}

/* Serif option previews its real font, and is set apart from the Satoshi trio. */
.lexxy-heading-button.lhl-serif {
  border-block-start: 1px solid var(--lexxy-color-ink-lighter, rgb(0 0 0 / 12%));
  margin-block-start: 4px;
  padding-block-start: 6px;
}

.lexxy-heading-button.lhl-serif .lhl-title {
  font-family: var(--font-reading, "Source Serif 4", Georgia, serif);
  font-style: italic;
}