/* ==============================
   store-badges.css: Platform-aware store badges

   Styles the .store-badges block: three badges up front, the remaining
   stores inside an "Other platforms" disclosure. The markup is identical
   wherever the block is pasted; which store goes where is decided here,
   from html[data-platform] (set by platform.js in <head>). Without
   platform.js the default set shows.

   To use it on a page: link this file, load platform.js synchronously in
   <head>, and paste the .store-badges block from any other page.

   Each store that can move carries a badge in both lists and exactly one
   copy is displayed. Badge sizing (.store-badge-img, .platform-btn) comes
   from the page's own stylesheet.
   ============================== */

.store-badges {
  --store-badges-align: center;
  display: flex;
  flex-direction: column;
  align-items: var(--store-badges-align);
  gap: 0.85rem;
  width: 100%;
}

/* For left-aligned layouts such as the tool page hero. */
.store-badges--start { --store-badges-align: flex-start; }

.store-badges-main,
.store-badges-rest {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--store-badges-align);
  gap: 0.75rem;
}

.store-badges-more { text-align: center; }

.store-badges--start .store-badges-more { text-align: left; }

.store-badges-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}

.store-badges-toggle::-webkit-details-marker { display: none; }

.store-badges-toggle:hover { color: var(--accent); }

.store-badges-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }

.store-badges-more[open] .store-badges-toggle svg { transform: rotate(180deg); }

.store-badges-rest { margin-top: 0.85rem; }

/* ---- Which stores lead ----
   Default (Mac, Windows, Linux, phones, unknown): Mac App Store, Microsoft
   Store and Flathub lead; the iPad App Store and Snap Store sit under
   "Other platforms". */
.store-badges-main [data-store="ipad"],
.store-badges-main [data-store="snap"],
.store-badges-rest [data-store="mac"],
.store-badges-rest [data-store="windows"],
.store-badges-rest [data-store="flathub"] { display: none; }

/* iPad: the App Store takes Flathub's place. */
html[data-platform="ipad"] .store-badges-main [data-store="ipad"],
html[data-platform="ipad"] .store-badges-rest [data-store="flathub"] { display: block; }

html[data-platform="ipad"] .store-badges-main [data-store="flathub"],
html[data-platform="ipad"] .store-badges-rest [data-store="ipad"] { display: none; }

/* The visitor's own store goes first. */
html[data-platform="mac"] .store-badges-main [data-store="mac"],
html[data-platform="windows"] .store-badges-main [data-store="windows"],
html[data-platform="ipad"] .store-badges-main [data-store="ipad"],
html[data-platform="linux"] .store-badges-main [data-store="flathub"] { order: -1; }