/* Internal link suggestions panel. Built on Wagtail's own colour variables so
   it follows the admin's light and dark themes. A light tint (a note, a
   caution, marked words) stays light in the dark theme too, so its text is a
   fixed dark colour, never the theme's (light) text. */

.seohub { display: flex; flex-direction: column; gap: 0.75rem; }
.seohub__muted { color: var(--w-color-text-meta, #5c5c5c); margin: 0; font-size: 0.875rem; }
.seohub__note {
  margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem;
  background: #faecd5; color: #262626;
}
.seohub__tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--w-color-border-furniture, #e0e0e0); }
.seohub__tab {
  background: none; border: 0; padding: 0.5rem 0; font-weight: 600; font-size: 1rem; margin: 0;
  color: var(--w-color-text-meta, #5c5c5c); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.seohub__tab[aria-pressed="true"] {
  color: var(--w-color-text-label, #262626); border-bottom-color: var(--w-color-secondary, #007d7e);
}
.seohub__tab:focus-visible { outline: 3px solid var(--w-color-focus, #ffbf47); outline-offset: 2px; }
.seohub__section { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 700; }
.seohub__note--done {
  background: var(--w-color-positive-50, #e0fbf4); color: var(--w-color-positive-100, #1b8666);
}
.seohub__note--error {
  background: var(--w-color-critical-50, #fde9e9); color: var(--w-color-critical-200, #b4191d);
}
.seohub__body { display: flex; flex-direction: column; gap: 0.75rem; }
.seohub__footer {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  border-top: 1px solid var(--w-color-border-furniture, #e0e0e0); padding-top: 0.75rem;
}

.seohub-card {
  border: 1px solid var(--w-color-border-field-default, #c8c8c8); border-radius: 0.5rem;
  padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--w-color-surface-page, #fff);
}
.seohub-card--high { border-color: var(--w-color-secondary, #007d7e); }
.seohub-card__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.seohub-card__anchor { margin: 0; font-size: 1rem; font-weight: 700; }
.seohub-card__row { display: flex; flex-direction: column; gap: 0.125rem; }
.seohub-card__label, .seohub-card__facts dt {
  font-size: 0.75rem; color: var(--w-color-text-meta, #5c5c5c); margin: 0;
}
.seohub-card__dest { font-weight: 600; word-break: break-word; }
.seohub-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; }
.seohub-card__facts dd { margin: 0; font-weight: 600; }
.seohub-card__quote {
  margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--w-color-text-meta, #5c5c5c);
  border-left: 3px solid var(--w-color-border-furniture, #e0e0e0); padding-left: 0.5rem;
}
.seohub-card__quote mark {
  background: #c8eeee; color: #1a1a1a; padding: 0 0.125rem; border-radius: 0.125rem;
}
.seohub-card__caution {
  margin: 0; padding: 0.375rem 0.5rem; border-radius: 0.25rem; font-size: 0.8125rem;
  background: #faecd5; color: #262626;
}
/* Two suggestions competing for one H2 section: a note, not a warning —
   both are valid links and the editor picks one. */
.seohub-card__clash {
  margin: 0; padding: 0.375rem 0.5rem; border-radius: 0.25rem; font-size: 0.8125rem;
  /* The background follows the theme and this colour did not, so in dark mode
     the note was #262626 on #38312e — about 1.2:1, and unreadable. */
  background: var(--w-color-surface-field-inactive, #f2f2f2);
  color: var(--w-color-text-label, #262626);
  border-left: 3px solid var(--w-color-border-furniture, #c8c8c8);
}
.seohub-card__meta { margin: 0; font-size: 0.8125rem; color: var(--w-color-text-meta, #5c5c5c); }
.seohub-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.seohub-card__why, .seohub-card__idea { margin: 0; font-size: 0.875rem; }
.seohub-card--stored { border-style: dashed; }
.seohub-card--gap { border-color: var(--w-color-warning-100, #faa500); }
.seohub-card--focus { box-shadow: 0 0 0 3px var(--w-color-focus, #ffbf47); }
.seohub-reject__open { align-self: flex-start; }
.seohub-reject__form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.seohub-reject__why { max-width: 100%; font-size: 0.875rem; }

.seohub-badge {
  font-size: 0.75rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 1rem; white-space: nowrap;
}
.seohub-badge--high { background: #e0fbf4; color: #1b8666; }
.seohub-badge--caution { background: #faecd5; color: #6b4500; }
.seohub-badge--good { background: var(--w-color-surface-field-inactive, #f6f6f8); color: var(--w-color-text-label, #262626); }

/* The words a suggestion would link, marked in the editor without editing it. */
::highlight(seohub-anchor) { background-color: #8ee0dd; color: #1a1a1a; }
.seohub-flash { outline: 3px solid var(--w-color-secondary, #007d7e); outline-offset: 2px; }

/* From 1200px: a column beside the editor, in view while the writer works,
   instead of a panel after the whole body. Wagtail's form is 840px wide, 280px
   from the left; from 1520px the column fits beside it, and on a laptop
   (1200-1519px, e.g. 1470px at 100% zoom) the form gives up the width the
   column needs (at 1470px: 750px of form, 20rem of suggestions). */
@media (min-width: 1200px) {
  :root:has([data-seohub-panel]) {
    --seohub-width: clamp(20rem, calc(100vw - 1200px), 26rem);
  }
  :root:has([data-seohub-panel]) .w-form-width {
    max-width: min(52.5rem, calc(100vw - 360px - var(--seohub-width)));
  }
  .w-panel:has(> .w-panel__content > [data-seohub-panel]) {
    position: fixed;
    /* Below the tab bar's "Collapse all", clear of the minimap on the right. */
    top: 11rem;
    right: 3.25rem;
    width: var(--seohub-width);
    max-height: calc(100vh - 12.5rem);
    overflow-y: auto;
    z-index: 5;
    padding: 1rem 1.25rem;
    background: var(--w-color-surface-page, #fff);
    border: 1px solid var(--w-color-border-furniture, #e0e0e0);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
  }
}
.seohub__more { align-self: flex-start; }