/* ================= BJBS theme extras on top of Tailwind ================= */
html { scroll-behavior: smooth; }
body { padding-top: 64px; } /* room for the fixed glass nav */

/* Mobile safety: nothing may force the page wider than the screen */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Accessibility: keyboard focus ---------- */
/* Global focus-visible ring — matches the existing focus:ring-indigo-500
   pattern already used on form inputs, applied sitewide so nav links, tab
   buttons, icon buttons, and cards all get a visible keyboard-focus state. */
:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Fully-rounded controls (pills, icon buttons, avatars) get a matching round ring */
.rounded-full:focus-visible { border-radius: 9999px; }
.dark :focus-visible { outline-color: #2997ff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow-ring::before,
  .glow-ring::after {
    animation: none;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Flat-bordered card (grid/list content) ----------
   Second of the two reconciled card patterns: .glass stays reserved for
   genuinely elevated/floating surfaces (nav, dropdown, modals, CTA panels);
   everything else — grid items, feed cards, list cards — uses this flatter,
   bordered treatment instead of glassmorphism. */
.card {
  border-radius: 0.75rem;
  border: 1px solid #e8e8ed;
  background: #f5f5f7;
  transition: border-color 0.2s, background-color 0.2s;
}
.dark .card {
  background: #161617;
  border-color: #1d1d1f;
}
a.card:hover, .card.card-link:hover {
  border-color: #0071e3;
}
.dark a.card:hover, .dark .card.card-link:hover {
  border-color: #2997ff;
}

/* ---------- Elevation shadow for non-glass overlays (modals) ---------- */
.elevation {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.dark .elevation {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ---------- Semantic status colors (form/subscribe feedback) ---------- */
.text-success { color: #1a8f4c; }
.dark .text-success { color: #34d399; }
.text-error { color: #d92d20; }
.dark .text-error { color: #f87171; }

/* ---------- iOS liquid-glass surfaces ---------- */
.glass {
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    inset 1.5px 1.5px 1px 0 rgba(255, 255, 255, 0.55),
    inset -1px -1px 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.08);
}
.dark .glass {
  background: rgba(22, 22, 23, 0.6);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 1.5px 1.5px 1px 0 rgba(255, 255, 255, 0.08),
    inset -1px -1px 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

.glass-btn {
  backdrop-filter: blur(10px) saturate(1.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.6);
}
.glass-btn:hover { transform: scale(1.04); }
.dark .glass-btn {
  background: rgba(44, 44, 46, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ---------- Brand glow: Bitcoin-orange <-> Apple-blue, no purple/teal drift ---------- */
@keyframes glow-spin { to { --glow-angle: 360deg; } }
@property --glow-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.glow-ring { position: relative; }
.glow-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--glow-angle, 0deg),
    #f7931a, #ffb340, #0071e3, #ffb340, #f7931a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: glow-spin 6s linear infinite;
}
.glow-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle, 0deg),
    #f7931a, #ffb340, #0071e3, #ffb340, #f7931a);
  filter: blur(18px);
  opacity: 0.45;
  z-index: -1;
  animation: glow-spin 6s linear infinite;
}

.glow-text {
  background: linear-gradient(100deg, #f7931a, #ffb340 35%, #0071e3 75%, #f7931a 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Single-row scroll-snap carousel ---------- */
.carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.carousel > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(280px, 78vw);
}

/* ---------- Tabs / pillars (Apple-toned) ---------- */
.tab { background: #e8e8ed; color: #6e6e73; }
.dark .tab { background: #1d1d1f; color: #86868b; }
.tab:hover { color: #0071e3; }
.tab-active { background: #0071e3; color: #fff; }

.pillar {
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid #d2d2d7;
  color: #6e6e73;
}
.dark .pillar { border-color: #424245; color: #86868b; }

/* ---------- Top nav ---------- */
#site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
#site-nav .nav-item { color: #1d1d1f; opacity: 0.75; transition: opacity 0.2s; font-size: 0.875rem; font-weight: 500; }
.dark #site-nav .nav-item { color: #f5f5f7; }
#site-nav .nav-item:hover, #site-nav .nav-item.active { opacity: 1; }

#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* Keyboard access for the desktop "Content" dropdown — same reveal the
   mouse gets via :hover, but for Tab users too. */
#site-nav .group:focus-within > .nav-dropdown { display: block; }

/* ---------- Loading skeleton (fetch()-driven showcases) ---------- */
.skeleton {
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #e8e8ed 25%, #f5f5f7 37%, #e8e8ed 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1d1d1f 25%, #2c2c2e 37%, #1d1d1f 63%);
  background-size: 400% 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #e8e8ed; }
  .dark .skeleton { background: #1d1d1f; }
}

/* ---------- Pointer-tracking spotlight glow (vanilla port of GlowCard) ---------- */
[data-glow] {
  /* Brand-locked: blends Bitcoin orange <-> Apple blue with cursor X,
     matching .glow-ring — never drifts through green/purple */
  --glow-color: color-mix(in oklab, #0071e3 calc(var(--xp, 0) * 100%), #f7931a);
  --radius: 16;
  --border: 2;
  --size: 220;
  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  position: relative;
  touch-action: auto;
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    color-mix(in srgb, var(--glow-color) 8%, transparent), transparent
  );
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
}

[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
}

[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    color-mix(in srgb, var(--glow-color) 90%, transparent), transparent 100%
  );
  filter: brightness(1.8);
}

[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / 0.8), transparent 100%
  );
}

/* ---------- Mobile-only carousel: grids become one swipeable row on phones ----------
   No longer applied to content grids — an 80vw card leaves the next one clipped
   at the right edge and nothing centred, which reads as a layout bug rather than
   a swipe affordance. Content grids now stack full-width on phones; the class is
   kept for any deliberate one-row carousel that still wants this. */
@media (max-width: 639px) {
  .m-carousel { display: flex !important; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-gutter: stable; }
  .m-carousel > * { scroll-snap-align: start; flex: 0 0 auto; width: 80vw; }

  .carousel { display: flex !important; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-gutter: stable; }
  .carousel > * { scroll-snap-align: start; flex: 0 0 auto; width: 80vw; }
}

/* ---------- Page shell: use the whole desktop canvas ----------
   Content pages were capped at Tailwind's max-w-4xl (896px), which left most
   of a desktop screen empty and squeezed card grids down to two columns.
   This is defined here rather than as a Tailwind utility because
   tailwind-built.css is a pre-built artifact (zero-build site) and only
   contains the classes that were in the markup when it was generated. */
.page-shell {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}

/* ---------- Responsive content grid (articles, reads, videos, podcast) ----------
   Replaces the `carousel sm:grid sm:grid-cols-2` pattern, which never became a
   grid on desktop: style.css loads after tailwind-built.css, so the unscoped
   `.carousel { display: flex }` rule beat `.sm\:grid` at equal specificity and
   every breakpoint got a clipped one-row scroller. Pairs with .m-carousel,
   which restores the swipeable row on phones only. */
.content-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 640px) {
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .content-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Shorts row ----------
   Short-form is vertical, so its cards use a portrait thumb and sit narrower
   than the standard 280px carousel card — a 9:16 thumb at full card width
   makes a ~500px-tall row. Defined here rather than as Tailwind's
   aspect-[9/16], which isn't in the pre-built stylesheet. */
.aspect-short { aspect-ratio: 9 / 16; }
.carousel.carousel-shorts > * { width: min(200px, 52vw); }

/* line-clamp-2 ships in tailwind-built.css but -3 does not, and the feed cards
   need a slightly longer excerpt than the showcase rows. */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Page gutter ----------
   The horizontal padding each <main> actually uses, exposed as a variable so
   carousels can cancel it on the right. Values mirror the Tailwind classes on
   each page's <main>; left padding is untouched so nothing shifts. */
main           { --page-gutter: 1.5rem; }  /* every page: px-6 */

/* Width of the centred container a carousel has to break out of. */
.page-shell      { --shell-max: 1600px; }
main.max-w-4xl   { --shell-max: 56rem; }
@media (min-width: 768px) {
  main      { --page-gutter: 2.5rem; }  /* content pages: md:px-10 */
  main.grow { --page-gutter: 3rem; }    /* index.html:    md:px-12 */
}

/* ---------- Carousels run to the edge of the screen ----------
   A scrolling row clipped at the page gutter looks like a bug: the card stops
   short of the screen edge with dead space beside it. Cancel the right gutter
   so the row bleeds to the edge, and re-add it as scroll padding so the last
   card still lands flush with the left margin when you reach the end. */
/* The page container is capped and centred, so on a wide screen a row stopped
   at the container edge with dead space beyond it. Cancel the centring margin
   as well as the gutter so the row always runs to the edge of the screen; keep
   a gutter of scroll padding so the last card lands cleanly at the end. */
.carousel {
  --bleed-right: calc(max(0px, (100vw - var(--shell-max, 100vw)) / 2) + var(--page-gutter, 0px));
  margin-right: calc(-1 * var(--bleed-right));
  padding-right: var(--page-gutter, 0px);
  scroll-padding-right: var(--page-gutter, 0px);
}

/* Tailwind's whitespace-nowrap isn't in the pre-built stylesheet, so the
   "See all" link wrapped onto two lines instead of staying on one. */
.whitespace-nowrap { white-space: nowrap; }