/* ZIBADIS top-menu-network — canonical source.
   Do not edit per-site copies; edit this file (and the sync tool, once it
   exists) to push changes to every site. */

:root {
  --tmn-paper2:       #fffdf7;
  --tmn-ink:          #101014;
  --tmn-soft:         #5a5550;
  --tmn-muted:        #7a7570;
  --tmn-line:         #161616;
  --tmn-thin:         rgba(16,16,20,.25);
  --tmn-faint:        rgba(16,16,20,.08);
  --tmn-glass-strong: rgba(247,243,234,.97);
  --tmn-shadow:       0 6px 28px rgba(16,16,20,.10);
  --tmn-accent:       #28c7d9;
  --tmn-text-2xs:     .56rem;
  --tmn-text-xs:      .64rem;
  --tmn-dur-fast:     .16s;
}
[data-theme="dark"] {
  --tmn-paper2:       #1a1816;
  --tmn-ink:          #e8e4dc;
  --tmn-soft:         #8a8580;
  --tmn-muted:        #5a5550;
  --tmn-line:         #e8e4dc;
  --tmn-thin:         rgba(232,228,220,.2);
  --tmn-faint:        rgba(232,228,220,.06);
  --tmn-glass-strong: rgba(26,24,22,.97);
}

.top-ribbon {
  border-bottom: 1px solid var(--faint, var(--tmn-faint));
  background: var(--glass-strong, var(--tmn-glass-strong));
}

.ribbon-row {
  min-height: 38px;
  display: flex; align-items: center; gap: 14px;
}

.ribbon-label {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--text-xs, var(--tmn-text-xs)); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, var(--tmn-muted));
}
.ribbon-label-arrow {
  display: block; width: 100%; height: 6px;
  color: var(--muted, var(--tmn-muted));
  opacity: .55;
}

.ribbon-links {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.ribbon-links::-webkit-scrollbar { display: none }

.ribbon-group { flex: 0 0 auto; position: relative }

.ribbon-group-title {
  list-style: none;
  min-height: 28px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; background: transparent;
  font-size: var(--text-xs, var(--tmn-text-xs)); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, var(--tmn-muted)); white-space: nowrap;
  cursor: pointer; transition: var(--dur-fast, var(--tmn-dur-fast));
}
.ribbon-group-title::-webkit-details-marker { display: none }

.ribbon-group-title::after {
  content: "";
  width: 10px; height: 10px;
  flex: 0 0 10px;
  background: var(--soft, var(--tmn-soft));
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.5L5 6.5 7.5 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.5L5 6.5 7.5 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--dur-fast, var(--tmn-dur-fast));
}

.ribbon-group:hover .ribbon-group-title::after,
.ribbon-group[open] .ribbon-group-title::after { transform: rotate(180deg); background: var(--accent, var(--tmn-accent)) }

.ribbon-group:hover .ribbon-group-title,
.ribbon-group[open] .ribbon-group-title,
.ribbon-group.active .ribbon-group-title {
  border-color: var(--thin, var(--tmn-thin));
  background: var(--paper2, var(--tmn-paper2));
  color: var(--ink, var(--tmn-ink));
}
.ribbon-group[open] .ribbon-group-title::after { transform: rotate(180deg) }

.ribbon-group-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 95;
  min-width: 200px; padding: 8px;
  display: grid; gap: 4px;
  border: 2px solid var(--line, var(--tmn-line));
  background: var(--glass-strong, var(--tmn-glass-strong));
  box-shadow: var(--shadow, var(--tmn-shadow));
}
[dir="rtl"] .ribbon-group-menu { left: auto; right: 0 }

.ribbon-item {
  min-height: 46px; padding: 8px 10px;
  display: grid; gap: 3px;
  border: 1px solid transparent;
  color: var(--soft, var(--tmn-soft)); transition: var(--dur-fast, var(--tmn-dur-fast));
  text-decoration: none;
}
.ribbon-item:hover,
.ribbon-item.active {
  color: var(--ink, var(--tmn-ink));
  border-color: var(--thin, var(--tmn-thin));
  background: var(--paper2, var(--tmn-paper2));
}

.ribbon-item-main {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.ribbon-item-copy { min-width: 0; display: grid; gap: 2px; flex: 1 }

.ribbon-logo {
  width: 22px; height: 22px;
  object-fit: contain; flex: 0 0 22px;
  filter: brightness(0) saturate(100%);
}
[data-theme="dark"] .ribbon-logo { filter: brightness(0) saturate(100%) invert(1) }

.ribbon-kind {
  font-size: var(--text-2xs, var(--tmn-text-2xs)); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, var(--tmn-muted));
}
.ribbon-name {
  font-size: var(--text-xs, var(--tmn-text-xs)); font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink, var(--tmn-ink));
}
.ribbon-url {
  font-size: var(--text-2xs, var(--tmn-text-2xs)); letter-spacing: .04em;
  color: var(--soft, var(--tmn-soft)); white-space: nowrap;
}

/* navigation stays LTR even when the page is RTL */
[dir="rtl"] .top-ribbon { direction: ltr; text-align: left }

.ribbon-mobile-toggle { display: none }

/* Below this, 9 groups no longer fit on one line and wrap ugly (measured:
   wraps somewhere around 905-915px) — collapse to the mobile pattern with
   margin to spare rather than cut it razor-thin. */
@media (min-width: 961px) {
  .top-ribbon, .ribbon-row, .ribbon-links { overflow: visible }
  .ribbon-links { flex-wrap: wrap }
  .ribbon-group:hover .ribbon-group-menu { display: grid }
  .ribbon-group:not([open]) .ribbon-group-menu { display: none }
}

@media (max-width: 960px) {
  .ribbon-row { display: block; position: relative; padding: 8px 40px 8px 0 }
  .ribbon-label { display: inline-flex; margin-bottom: 8px }

  .ribbon-mobile-toggle {
    display: grid; place-items: center;
    position: absolute; top: 8px; right: 0;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--thin, var(--tmn-thin));
    background: transparent; color: var(--ink, var(--tmn-ink));
    font-size: 18px; line-height: 1; cursor: pointer;
    transition: transform var(--dur-fast, var(--tmn-dur-fast));
  }
  .ribbon-mobile-toggle[aria-expanded="true"] { transform: rotate(45deg) }

  .ribbon-links { display: none; gap: 6px; overflow: visible; padding-bottom: 14px }
  .ribbon-links.open { display: grid }
  .ribbon-group { display: block }
  .ribbon-group-title { display: flex; width: 100%; justify-content: space-between }
  .ribbon-group-menu { position: static; min-width: 0; margin-top: 4px; box-shadow: none }
  .ribbon-url { white-space: normal }
}