/* ===== Admin pencil — inline edit shortcut ===== */

/*
 * .admin-pencil
 *
 * A small pencil-icon link rendered next to editable content areas when an
 * editor or administrator is logged in. Visible only because templates
 * (page.html.twig, mega-menu.html.twig, callback-modal.html.twig) emit it
 * only inside `{% if user_is_editor %}` guards.
 *
 * Usage variants:
 *   .admin-pencil               — inline, appended to an <h2> or heading
 *   .admin-pencil--menu-item    — absolute-positioned on a supermenu item
 *   .admin-pencil--orphan       — when no content exists yet (shows label too)
 */
.admin-pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-inline-start: 8px;
  padding: 0;
  border: 1.5px solid rgba(32, 63, 146, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #203f92;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Show pencil when admin hovers the nearest block-level ancestor */
h2:hover .admin-pencil,
h2:focus-within .admin-pencil,
.admin-strip-parent:hover .admin-pencil,
.ftr-row-second:hover .admin-pencil {
  opacity: 1;
  pointer-events: auto;
}

.admin-pencil:hover {
  background: #203f92;
  border-color: #203f92;
  color: #fff;
  transform: scale(1.12);
}

/* Supermenu item variant — float at top-right of the <li> */
.supermenu__cat-item {
  position: relative;
}

.supermenu__cat-item .admin-pencil--menu-item {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
}

.supermenu__cat-item:hover .admin-pencil--menu-item {
  opacity: 1;
  pointer-events: auto;
}

/* Orphan variant — shows label text too, always visible */
.admin-pencil--orphan {
  width: auto;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
  pointer-events: auto;
}

.admin-pencil--orphan:hover {
  opacity: 1;
}

.admin-strip {
  position: fixed;
  inset: auto 0 0;
  z-index: 120;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(252, 204, 153, 0.22), transparent 24%),
    linear-gradient(90deg, #132451 0%, #203f92 50%, #365dc9 100%);
  color: #fff;
  box-shadow: 0 -18px 36px rgba(19, 36, 81, 0.18);
}

.admin-strip__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.admin-strip__heading {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 180px;
}

.admin-strip__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.admin-strip__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.admin-strip__content {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.admin-strip__tabs,
.admin-strip__tabs ul,
.admin-strip__actions,
.admin-strip__actions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-strip .block,
.admin-strip .contextual-region,
.admin-strip .contextual-region > * {
  margin: 0;
}

.admin-strip .contextual {
  display: none;
}

.admin-strip__tabs a,
.admin-strip__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.admin-strip__tabs a:hover,
.admin-strip__actions a:hover,
.admin-strip__tabs a.is-active {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.admin-strip__meta {
  display: contents;
}

.admin-strip__meta .messages,
.admin-strip__meta [role="contentinfo"],
.admin-strip__meta [role="complementary"] {
  margin: 0;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.admin-strip #block-tiun-primary-local-tasks ul {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-strip #block-tiun-primary-local-tasks h2 {
  display: none;
}

.admin-strip #block-tiun-primary-local-tasks a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.admin-strip #block-tiun-primary-local-tasks a:hover,
.admin-strip #block-tiun-primary-local-tasks a.is-active {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .admin-strip {
    inset: auto 0 0;
  }

  .admin-strip__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .admin-strip__heading {
    min-width: 0;
    justify-content: space-between;
  }

  .admin-strip__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
  }

  .admin-strip__tabs,
  .admin-strip__actions,
  .admin-strip #block-tiun-primary-local-tasks ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .admin-strip__tabs a,
  .admin-strip__actions a,
  .admin-strip #block-tiun-primary-local-tasks a {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
  }

  .admin-strip__meta {
    display: block;
  }

  .admin-strip__meta .messages,
  .admin-strip__meta [role="contentinfo"],
  .admin-strip__meta [role="complementary"] {
    display: block;
    width: 100%;
  }
}

/* ===== Drupal Admin Toolbar + Gin ===== */

/* === Admin toolbar offsets ===
   ВАЖЛИВО: Gin secondary toolbar має [data-offset-top], тому Drupal Displace
   API ВЖЕ враховує його у --drupal-displace-offset-top. Якщо додатково
   позиціонувати secondary toolbar ЧЕРЕЗ цей же var — виникає feedback loop
   (toolbar зсувається → Drupal перемірює → значення збільшується → ...).

   Рішення: JS (src/js/admin-offsets.js, підключено у main.js) вимірює
   primary та secondary toolbars окремо через ResizeObserver і виставляє
   CSS custom properties на <html>:
     --kristar-primary-toolbar    — висота #toolbar-administration
     --kristar-secondary-toolbar  — висота .gin-secondary-toolbar--frontend
     --kristar-top-offset         — сума обох (bottom edge усіх тулбарів)
   Значення стабільні, не залежать від власного позиціонування секонд-бара,
   оновлюються через ResizeObserver (тільки на реальні зміни розміру). */

/* Ніколи не зсувати контент фронтенду через toolbar */
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
  margin-inline-start: 0 !important;
}

/* Gin secondary toolbar — під primary toolbar, без включення себе */
.gin-secondary-toolbar--frontend {
  position: fixed !important;
  top: var(--kristar-primary-toolbar, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 501 !important;
  margin-inline-start: 0 !important;
}

/* Gin toolbar — прибираємо inline-відступ від Gin navigation */
body.gin--navigation {
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}

/* Site header — зсунути ТІЛЬКИ на висоту secondary toolbar.
   Drupal core вже задає body { padding-top: <primary-toolbar-height> } коли
   `.toolbar-fixed` присутній, тому додавати тут primary вдруге означало б
   подвійний відступ (раніше використовувалась --kristar-top-offset = sum,
   що давало 53 + 113 = 166px замість 113). Secondary toolbar — Gin
   feature, не покривається ядром Drupal, тому компенсуємо лише його. */
body.toolbar-fixed .site-header,
body.gin--horizontal-toolbar .site-header,
body.gin--navigation .site-header {
  margin-top: var(--kristar-secondary-toolbar, 0px);
}

/* Суперменю позиціонується відносно #header через JS-замір
   (web/themes/tiun/src/entries/mega-menu.js → updateAnchor) і
   CSS-змінну --supermenu-anchor-top, тому окремий margin-top тут
   не потрібен — getBoundingClientRect() уже враховує всі fixed
   тулбари автоматично. */

/* Хедер сайту — нижче за всі Gin елементи */
.site-header {
  z-index: 100;
}

/* Gin toolbar dropdowns — поверх хедера сайту */
.gin-secondary-toolbar--frontend .toolbar-menu,
.gin-secondary-toolbar--frontend [data-drupal-subtrees],
#toolbar-administration .toolbar-tray,
#toolbar-administration .toolbar-menu-administration {
  z-index: 503 !important;
}