/* core/lib/powered_by.css — platform signature strip.
 *
 * Pairs with core/lib/powered_by.php (render_powered_by()).
 *
 * Deliberately palette-agnostic: every colour is currentColor at a low
 * opacity, so the strip picks up whatever the host site already uses for
 * text. It sits on sites ranging from ayni's warm cream to probalist's
 * near-black, and it must not need to know which.
 */

.pb-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  /* No background of its own — it inherits the page, which is why it
   * reads as platform chrome rather than as a block the site owns. */
  background: transparent;
}

/* ── footer: in de gewone flow, onder alles ─────────────────────── */
.pb-strip--footer {
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-top: 14px;
  padding-bottom: 16px;
}

/* ── header: eigen balk bovenaan, in de gewone flow ─────────────── */
/* Sticky, en aangemeld bij de chrome-stack. Hij plakt op wat er BUITEN de
 * flow hangt (--alovai-chrome-fixed-top: operator- of staging-balk), en de
 * eigen balk van de site plakt op --alovai-chrome-top, waar deze hoogte in
 * meegeteld is. Zo blijven ze bij het scrollen netjes op elkaar staan in
 * plaats van over elkaar heen te schuiven.
 *
 * Hoogte is exact 38px, ook op mobiel: dat getal staat als
 * POWERED_BY_BAR_HEIGHT in powered_by.php en de stack rekent ermee. Een
 * lagere balk op mobiel zou de nav van de site een paar pixels te laag
 * laten plakken. */
.pb-strip--header {
  /* Niet sticky. Geprobeerd, en het werkte in te veel omgevingen net niet:
   * een pagina scrolt niet altijd in het document. In edit mode is body een
   * grid en scrolt .cms-content; ayni opent pagina's in een modal waar
   * .page-modal-body scrolt. Een balk die buiten die container hangt plakt
   * dan aan iets dat niet beweegt, en dat ziet er willekeurig uit.
   *
   * In de flow klopt hij overal meteen. Dat is de ruil: hij scrolt weg,
   * maar hij staat altijd goed. De footerbadge is de permanente. */
  width: 100%;
  padding: 0 16px;
  height: 38px;
  /* Dekkend, want sinds hij plakt scrolt de pagina erachter langs — een
   * doorschijnende balk liet de koptekst er dwars doorheen lopen.
   *
   * `inherit` neemt de achtergrondkleur van body over, dus de balk krijgt
   * precies de kleur van de site zonder dat core hoeft te weten welke. En
   * omdat het dezelfde berekende waarde is, volgt hij de thema-schakelaar
   * van de site vanzelf mee — geen JS, geen dubbele administratie. */
  /* Dekkend blijft goed: hij mag niet doorschijnen als er iets langs
   * schuift, en `inherit` volgt de themaschakelaar van de site. */
  background-color: inherit;
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

/* Hier stond een ::before met `background: Canvas` als vangnet voor een
 * site zonder achtergrondkleur op body. Dat werkte averechts: een kind met
 * z-index:-1 schildert ná de achtergrond van zijn ouder, niet ervoor. Op
 * probalist in donkere modus dekte dat witte vlak dus precies de kleur af
 * die het had moeten aanvullen.
 *
 * Zonder vangnet nu. Alle sites met een eigen stylesheet zetten een kleur
 * op body (ayni --cream, probalist en demo --bg), dus de inherit grijpt.
 * Komt er ooit een site die het op html of een wrapper zet, dan is de balk
 * daar doorzichtig — dat lossen we op als het gebeurt, met een kleur die
 * we dan kennen in plaats van met een systeemkleur die het thema van de
 * site niet volgt. */
.pb-strip--header .pb-link {
  opacity: .9;
  font-weight: 500;
  padding: 4px 6px;
  min-height: 28px;
}
.pb-strip--header .pb-link:hover,
.pb-strip--header .pb-link:focus-visible { opacity: 1; }
@media (max-width: 600px) {
  .pb-strip--header          { padding: 0 12px; }   /* hoogte blijft 38, zie boven */
  .pb-strip--header .pb-link { font-size: 12.5px; min-height: 26px; }
}

/* ── nav: ín de eigen header van de site ────────────────────────── */
/* No positioning of its own — that is the entire point. It sits in
 * .nav-right and inherits whatever that header already does, so there
 * is no offset to get wrong and nothing to push over the content. */
/* Must beat our own display rule below — the UA's [hidden] is a bare
 * attribute selector and loses, which would flash the badge at the
 * bottom of the page until the script relocates it. */
.pb-strip--nav[hidden] { display: none !important; }

.pb-strip--nav {
  display: inline-flex;
  padding: 0;
  margin-right: 4px;
  font-size: 13px;
}
/* In de nav: de brede pil. Vol contrast, rand, eigen vorm — hier moet
 * hij opvallen. In de footer blijft het een kale regel; daar staat hij
 * onder iemands eigen naam en hoort hij zachter te zijn. */
.pb-strip--nav .pb-link {
  padding: 7px 15px;
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: .92;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 6%, transparent);
  transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.pb-strip--nav .pb-link:hover,
.pb-strip--nav .pb-link:focus-visible {
  opacity: 1;
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 11%, transparent);
}
.pb-strip--nav .pb-link b { font-weight: 700; }
.pb-strip--nav .pb-mark { width: 14px; height: 14px; }

/* Het enige dat deze stylesheet buiten .pb-* aanraakt, en met reden: een
 * navbalk is een flexbox en het logo erin krimpt mee zonder ondergrens.
 * Op ayni's telefoonbalk kneep de pil het lotus-logo naar nul — een merk
 * vervangen door een ander merk. Dit zet daar een bodem onder. */
.site-header > .logo,
.site-nav > .nav-logo-link,
.site-header > a[class*="logo"],
.site-nav > a[class*="logo"] { flex-shrink: 0; }
.pb-strip--nav .pb-card {
  padding: 5px 13px;
  min-height: 30px;
  border-radius: 999px;
}
.pb-strip--nav .pb-card__text b { font-size: 12.5px; }
.pb-strip--nav .pb-card__text span { display: none; }

/* Those navs are tight on a phone — ayni carries a logo, a theme toggle,
 * a language picker and a burger. So the badge sheds the words a reader
 * can infer and keeps the mark plus the name. */
@media (max-width: 900px) {
  .pb-strip--nav          { margin-right: 2px; }
  .pb-strip--nav .pb-link { padding: 6px 12px; min-height: 30px; font-size: 12px; gap: 6px; }
  .pb-strip--nav .pb-words { display: none; }
}
@media (max-width: 360px) {
  /* Nothing left to give: the burger wins. */
  .pb-strip--nav { display: none !important; }
}

/* ── de link zelf ───────────────────────────────────────────────── */
.pb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  /* Quiet on purpose. It sits in someone else's footer, under their
   * name — a signature, not a banner. Tried louder (pill, full contrast,
   * 14px) on staging and it read as an ad. */
  opacity: .62;
  transition: opacity .15s ease;
  /* Comfortable tap target on a phone without inflating the desktop
   * strip: the padding grows, the visible text does not. */
  padding: 6px 4px;
  min-height: 32px;
}
.pb-link:hover,
.pb-link:focus-visible { opacity: 1; }
.pb-link b { font-weight: 600; }

/* De ruimte tussen "Powered by" en de merknaam komt van een gap, niet van
 * een spatie in de tekst. core/translate levert een vertaalde tekstnode
 * getrimd terug, en dan staat er "Powered byAlovai". */
.pb-text {
  display: inline-flex;
  align-items: baseline;
  gap: .32em;
}
.pb-text .pb-words:empty { display: none; }

.pb-mark {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: block;
}

/* ── card: alleen voor demo-sites ───────────────────────────────── */
.pb-card {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 10px;
  padding: 11px 16px;
  min-height: 44px;
  transition: border-color .15s ease, transform .15s ease;
}
.pb-card:hover,
.pb-card:focus-visible {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  transform: translateY(-1px);
}
.pb-card .pb-mark { width: 16px; height: 16px; }
.pb-card__text b { display: block; font-weight: 600; font-size: 13.5px; }
.pb-card__text span { font-size: 12px; opacity: .7; }

/* ── focus ──────────────────────────────────────────────────────── */
.pb-link:focus-visible,
.pb-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── mobiel ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pb-strip         { font-size: 12.5px; padding-left: 12px; padding-right: 12px; }
  .pb-link          { min-height: 44px; padding: 10px 6px; }
  .pb-card          { width: 100%; max-width: 320px; justify-content: center; }
  .pb-strip--footer { padding-bottom: 22px; }
}

/* ── motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pb-link, .pb-card { transition: none; }
  .pb-card:hover, .pb-card:focus-visible { transform: none; }
}

/* ── print ──────────────────────────────────────────────────────── */
@media print {
  .pb-strip { display: none; }
}