/* ── access-banner.css — All-Access strip, top of every marketing page (sticky only on home + bundles) ────────
   Replaces the old full-height .access block (home.css) at the bottom of the
   page with a thin, always-visible strip at the very top — the ask was
   "visible right away," which a block a full scroll away never was.

   Four content arrangements, one markup shape each, picked by [data-abanner]
   on <html> — same convention as [data-access]/[data-layout] elsewhere on
   this page: every variant is real markup in the DOM, CSS shows exactly one.
   Dev-only toggle lives in labbar.js (`?lab=1`) so these can be compared
   live rather than judged as static mockups. LOCAL/DEV ONLY as of this
   commit — not yet picked a winner, not pushed.

   Sticky, not fixed: the WRAPPER (.sticky-head, index.html — banner + nav
   together) carries position:sticky + top:0, not this element itself, so
   nav stays pinned directly under the banner as one unit without having to
   hardcode nav's `top` offset to match the banner's actual rendered height
   by hand. Same family as the mobile buy bar's fixed pattern
   (product.css .p-sticky) without needing that bar's bottom-inset math
   since this docks to the top instead. z-index:90 (on the wrapper) matches
   grain.css's own comment that a "sticky nav/buy bar" already lives at
   that layer, below the grain (1000) and the dev lab bar (9999). Applies
   on every width now (desktop and mobile both sticky) — see .sticky-head
   below.

   Inverted (--fg background / --ground text): the same two-tone device this
   site already uses for its section-head bands (sheet.css) and the old
   .access-title's own fill — reads as this site's own accent device, not a
   foreign ad-bar color, and holds correctly across the theme swap since
   --fg/--ground themselves swap with it.

   The whole strip is one <a>, not text next to a separate button — matches
   the "whole cell is the link" idiom already established in plugins.js's
   featured layout (largest possible tap target, no hover affordance needed
   since there's nothing to hover on touch).
   ───────────────────────────────────────────────────────────────────────── */

.access-banner { display: none; }

/* Sitewide now: only the minimal strip ships in the page HTML, so it shows
   without needing [data-abanner]. The other variants still work in the lab
   bar if their markup is added back. */
.access-banner[data-variant="minimal"],
[data-abanner="minimal"] .access-banner[data-variant="minimal"],
[data-abanner="full"]    .access-banner[data-variant="full"],
[data-abanner="split"]   .access-banner[data-variant="split"],
[data-abanner="badge"]   .access-banner[data-variant="badge"] {
  display: flex;
}

/* Pinned only on the homepage (html[data-sticky-nav]); elsewhere the strip + nav scroll away. */
.sticky-head {
  position: static;
  z-index: 90;
}
html[data-sticky-nav]:not([data-navmode="island"]) .sticky-head {
  position: sticky;
  top: 0;
}

.access-banner {
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  /* Thinner specifically on mobile — nav is now sticky too (index.html's
     .sticky-head), so the two stack permanently; every px here is
     permanent screen real estate on the smallest, most space-constrained
     viewport. var(--s1), not --s2 (the old value, still used ≥48em). */
  padding: var(--s1) var(--gutter);
  background: var(--fg);
  color: var(--ground);
  font-family: var(--font-data);
  font-size: var(--fs-data);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
/* Phones: the strip is a link, and base.css gives every anchor a 44px tap floor — which
   made this thin strip tall. A 32px floor keeps it a comfortable target and thinner. */
@media (max-width: 47.99em) {
  .access-banner { min-height: 3.2rem; line-height: 1.2; }
}
@media (min-width: 48em) {
  .access-banner { padding: var(--s3) var(--gutter); gap: var(--s5); }
}

/* ── full: the price reads "$5/mo, or $49/yr (save 18%)", which with the label
   and the "Get access" button no longer fits the strip on a phone — it wrapped
   mid-word ("ALL-/ACCESS"). The whole strip is one link, so below 40em the
   button text goes and the label + price stay whole; the button returns once
   there's room (same breakpoint the descriptive clause below uses). ──────── */
.access-banner[data-variant="full"] .access-banner-tag { white-space: nowrap; }
.access-banner[data-variant="full"] .access-banner-price { text-wrap: balance; }
.access-banner[data-variant="full"] .access-banner-cta { display: none; }
@media (min-width: 40em) {
  .access-banner[data-variant="full"] .access-banner-cta { display: inline; }
}

/* ── split: label left, price+CTA right, ends of the row ────────────────── */
.access-banner[data-variant="split"] { justify-content: space-between; }

/* ── full: the descriptive middle clause only fits without wrapping to a
   second line (breaking "thin") once there's real width to spend. */
.access-banner[data-variant="full"] .access-banner-copy { display: none; }
@media (min-width: 40em) {
  .access-banner[data-variant="full"] .access-banner-copy { display: inline; }
}

/* ── badge: same inverted strip as the others, but the copy sits inside its
   own bordered pill instead of running full-bleed edge to edge — a lighter,
   more restrained read than the other three's flush text. */
.access-banner-pill {
  display: inline-flex;
  padding: var(--s2) var(--s5);
  border: 1px solid color-mix(in srgb, var(--ground) 40%, transparent);
}

/* Minimal strip: "every plugin" is dropped on phones so the line never wraps
   mid-word. */
.access-banner-more { display: none; }
@media (min-width: 40em) { .access-banner-more { display: inline; } }