/* ==========================================================================
   The admin bar — shown only to someone signed in to dsweb-admin.
   Every selector is prefixed dsab- or scoped under html.ds-has-adminbar, so on
   a visitor's page (where the bar never renders) nothing here matches anything.
   ========================================================================== */

html.ds-has-adminbar {
  --dsab-h: 40px;
}
@media (max-width: 782px) {
  html.ds-has-adminbar {
    --dsab-h: 46px;
  }
}

/* Push the site down by the bar's height, the way WordPress does. The header,
   the drawer and the reading line are fixed to the top of the window, so each
   needs its own offset; the page itself gets padding. */
html.ds-has-adminbar .ds-header {
  top: var(--dsab-h);
}
html.ds-has-adminbar .ds-header.is-hidden {
  transform: translateY(calc(-100% - var(--dsab-h)));
}
html.ds-has-adminbar #smooth-content,
html.ds-has-adminbar .ds-standalone {
  padding-top: var(--dsab-h);
}
html.ds-has-adminbar .ds-drawer,
html.ds-has-adminbar .ds-scrollbar {
  top: var(--dsab-h);
}

.dsab {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100000;
  height: var(--dsab-h, 40px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  background:
    radial-gradient(120% 220% at 0% 0%, rgba(47, 212, 196, 0.2), transparent 55%),
    linear-gradient(90deg, #0a1514, #0f1f1d 60%, #0a1514);
  border-bottom: 1px solid rgba(47, 212, 196, 0.18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  color: #e3efed;
  font: 500 13px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  animation: dsabIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dsabIn {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.dsab *,
.dsab *::before,
.dsab *::after {
  box-sizing: border-box;
}
.dsab-left,
.dsab-right {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.dsab-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.dsab-item:hover,
.dsab-item:focus-visible,
.dsab-menu.is-open > .dsab-item {
  background: rgba(47, 212, 196, 0.12);
  color: #fff;
  outline: none;
}
.dsab-item::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #2fd4c4;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.dsab-item:hover::after,
.dsab-menu.is-open > .dsab-item::after {
  transform: scaleX(1);
}
.dsab-item:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ── icons: line icons with one moving part each ────────────────────────── */
.dsab-ic,
.dsab-mark svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dsab-ic {
  color: #8fd9cf;
  transition: color 0.2s ease, transform 0.3s ease;
}
.dsab-item:hover .dsab-ic {
  color: #2fd4c4;
}

.dsab-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2fd4c4, #0d9488);
  color: #062321;
  box-shadow: 0 0 0 0 rgba(47, 212, 196, 0.5);
  animation: dsabPulse 3.2s ease-in-out infinite;
}
.dsab-mark svg {
  stroke-width: 2.2;
}
.dsab-mark-tick {
  stroke-dasharray: 14;
  stroke-dashoffset: 0;
}
.dsab-brand:hover .dsab-mark-tick {
  animation: dsabDraw 0.6s ease forwards;
}
@keyframes dsabPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 212, 196, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(47, 212, 196, 0); }
}
@keyframes dsabDraw {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: 0; }
}

.dsab-edit {
  color: #fff;
}
.dsab-edit .dsab-ic-pen {
  color: #2fd4c4;
}
.dsab-item:hover .dsab-ic-pen {
  animation: dsabWiggle 0.5s ease;
}
@keyframes dsabWiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-14deg); }
  60% { transform: rotate(9deg); }
}
.dsab-item:hover .dsab-ic-plus,
.dsab-menu.is-open .dsab-ic-plus {
  transform: rotate(90deg);
}
.dsab-page-back {
  transition: transform 0.3s ease;
}
.dsab-item:hover .dsab-page-back {
  transform: translate(-1.5px, -1.5px);
}
.dsab-sun {
  transition: transform 0.35s ease;
}
.dsab-item:hover .dsab-sun {
  transform: translateY(-2px);
}
.dsab-out-arrow {
  transition: transform 0.3s ease;
}
.dsab-item:hover .dsab-out-arrow {
  transform: translateX(-3px);
}

/* ── menus ──────────────────────────────────────────────────────────────── */
.dsab-menu {
  position: relative;
  display: flex;
}
.dsab-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  padding: 6px;
  border: 1px solid rgba(47, 212, 196, 0.2);
  border-radius: 0 0 12px 12px;
  background: #0f1f1d;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dsab-menu-right .dsab-drop {
  left: auto;
  right: 0;
}
.dsab-menu.is-open .dsab-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dsab-drop a,
.dsab-drop button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d5e8e5;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.dsab-drop a:hover,
.dsab-drop button:hover {
  background: rgba(47, 212, 196, 0.14);
  color: #fff;
}

.dsab-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2fd4c4, #0d9488);
  color: #062321;
  font-weight: 800;
  font-size: 12px;
}

/* ── phone: icons only, like WordPress ─────────────────────────────────── */
@media (max-width: 782px) {
  .dsab {
    padding: 0 4px;
    gap: 2px;
  }
  .dsab-item {
    padding: 0 10px;
  }
  .dsab-label {
    display: none;
  }
  .dsab-ic {
    width: 20px;
    height: 20px;
  }
  .dsab-me {
    display: none;
  }
}
@media (max-width: 360px) {
  .dsab-hide-sm {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dsab,
  .dsab-mark,
  .dsab * {
    animation: none !important;
    transition: none !important;
  }
}

/* The real logo, made for dark backgrounds. */
.dsab-logo {
  display: block;
  height: 26px;
  width: auto;
}