/* The Saturday Paper — Admin Branding */

/* TSP Red: #EF0A0A */

/* Toolbar — dark bar at top */
.toolbar-bar {
  background-color: #1a1a1a !important;
}

/* Primary admin links — active/hover state */
.toolbar-bar .toolbar-tab > a.is-active,
.toolbar-bar .toolbar-tab > a:hover,
.toolbar-bar .toolbar-tab > a:focus {
  background-color: #EF0A0A !important;
  color: #fff !important;
}

/* Admin toolbar tray background */
.toolbar-tray {
  background-color: #f5f5f5 !important;
  border-bottom: 2px solid #EF0A0A !important;
}

/* Primary action buttons (Save, etc.) */
.button--primary,
.form-submit.button--primary {
  background-color: #EF0A0A !important;
  border-color: #EF0A0A !important;
}

.button--primary:hover,
.form-submit.button--primary:hover {
  background-color: #c00808 !important;
  border-color: #c00808 !important;
}

/* Links in admin */
.toolbar-tray a.is-active {
  color: #EF0A0A !important;
}

/* Page title area */
.page-title {
  font-size: 2rem;
  line-height: 2.5rem;
  border-bottom: none;
  padding-bottom: 0.5em;
}

/* Site name in toolbar */
.toolbar-bar .toolbar-item--site-name {
  font-weight: 700;
}

/* Login page branding */
.user-login-form .form-submit {
  background-color: #EF0A0A !important;
  border-color: #EF0A0A !important;
}

/* Tabs — active tab indicator */
.tabs__tab.is-active a,
.tabs__tab.is-active a:hover {
  border-bottom-color: #EF0A0A !important;
  color: #EF0A0A !important;
}

/* Messages — status message accent */
.messages--status {
  border-left-color: #EF0A0A !important;
}

/* Admin header — add "TSP" label */
.toolbar-bar::after {
  content: "TSP";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #EF0A0A;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
}

/* ---- Quiz question numbering ---- */
.field--name-field-questions .field-multiple-table tbody {
  counter-reset: quiz-question;
}

.field--name-field-questions .field-multiple-table tbody tr.draggable {
  counter-increment: quiz-question;
}

.field--name-field-questions .field-multiple-table tbody tr.draggable .paragraphs-subform {
  position: relative;
  padding-left: 50px;
}

.field--name-field-questions .field-multiple-table tbody tr.draggable .paragraphs-subform::before {
  content: "Q" counter(quiz-question);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
  font-weight: 800;
  color: #EF0A0A;
  line-height: 1;
}

/* ---- Node View (preview) page cleanup ---- */
/* Uses :has() to scope styles only when the Next.js preview iframe is present */

/* Hide Olivero site header (branding box, nav, My account/Log out) */
body:has(.next-site-preview-container) .site-header {
  display: none !important;
}

/* Hide footer */
body:has(.next-site-preview-container) .site-footer {
  display: none !important;
}

/* Full width layout — override Olivero container max-width */
body:has(.next-site-preview-container) .layout-main-wrapper.layout-container {
  max-width: 100% !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

body:has(.next-site-preview-container) .main-content__container.container {
  max-width: 100% !important;
}

/* Taller iframe preview area */
.next-site-preview-container {
  height: 85vh;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Preview note above iframe */
.next-site-preview-note {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin-bottom: 0.5em;
}

/* Compact the toolbar above preview */
.next-site-preview-toolbar {
  padding: 0.4em 1em;
  margin-bottom: 0.5em;
}

/* Give the 'aside' paragraphs imported from D7 some styling in the CK Editor */
.ck-content aside {
  border-left: 5px solid #ccc;
  font-size: var(--font-size-h6);
  font-style: italic;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.ck-content[dir=rtl] aside {
  border-left: 0;
  border-right: 5px solid #ccc;
}