/* ============================================================
   From Below — theme matched pixel-for-pixel to
   linktr.ee/skylervandermolen (measured from the live page).
   Loaded last via layout.blade.php.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root { --fb-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace; }

/* --- page: grey (top) -> black (bottom) gradient, matched to Linktree
       linear-gradient(0deg, #000, #464646). Fixed so it fills the viewport
       and doesn't tile as you scroll. --- */
html { background: #000 !important; }
body {
  background: linear-gradient(0deg, #000000 0%, #464646 100%) fixed !important;
  min-height: 100vh !important;
  font-family: var(--fb-mono) !important;
}

/* --- flatten LinkStack's inner card: Linktree has no card, links sit
       directly on the page gradient. Keep it as a centered column. --- */
.container {
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 32px 18px 40px !important;   /* top gap = the www↔releases gap (32px) */
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* --- share button: float to the top-right corner (like Linktree) so it
       doesn't occupy vertical flow above the avatar --- */
.sharediv {
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  margin: 0 !important;
  z-index: 20 !important;
}
/* mono everywhere EXCEPT icon glyphs (Font Awesome needs its own family) */
.container, .container *:not(i):not(svg):not([class*="fa-"]) { font-family: var(--fb-mono) !important; }

/* --- name / handle: Space Mono 24px, weight 600, white, no transform --- */
.container h1 {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  padding: 0 !important;
  margin: 12px 0 2px !important;
}

/* --- website link, relocated under the name header by frombelow.js. Tighten
       the bio slot so name↔link and link↔first-heading gaps are small. --- */
.description-parent { padding-bottom: 6px !important; }  /* 6 + heading 26 = 32px www↔releases */
/* the bio text feeds the meta description (set via littlelink_description) but is
   hidden visually — the design shows only the website link under the name */
.description-parent > p { display: none !important; }
.fb-www {
  display: inline-block !important;
  margin: 2px 0 0 !important;
  color: #9a9a9e !important;
  font-family: var(--fb-mono) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}
.fb-www:hover { color: #ffffff !important; }

/* --- avatar: 96px circle (matched) --- */
.container img.rounded, .container .avatar, .container img[src*="avatar"],
#avatar, .container .column > center img:first-of-type {
  border-radius: 50% !important;
  width: 96px !important;
  height: 96px !important;
  object-fit: cover !important;
}

/* --- link buttons: glassmorphism, matched to Linktree "ButtonStyleGlass" --- */
.button {
  min-height: 64px !important;
  width: 100% !important;            /* fill the column so every row is equal width */
  box-sizing: border-box !important; /* keep padding inside that width */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%) !important;
  -webkit-backdrop-filter: blur(20px) brightness(1.1) contrast(0.9) !important;
  backdrop-filter: blur(20px) brightness(1.1) contrast(0.9) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 10px !important;
  color: #999999 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.02) !important;
  margin-bottom: 14px !important;
  transition: background-color .075s, box-shadow .075s, backdrop-filter .075s, -webkit-backdrop-filter .075s !important;
}
.button:hover {
  -webkit-backdrop-filter: blur(20px) brightness(1.2) contrast(0.9) !important;
  backdrop-filter: blur(20px) brightness(1.2) contrast(0.9) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 100%) !important;
  color: #ffffff !important;
  /* glow, not grow — override LinkStack's .button-hover:hover scale(1.1) */
  transform: none !important;
  box-shadow: 0 0 16px rgba(255,255,255,0.16) !important;
}

/* cover-art thumbnails: 48px square, 8px from the button's left edge (matched) */
.button { position: relative !important; padding-left: 64px !important; padding-right: 64px !important; }
.button img.icon {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}
/* swap brand icons for real cover art (thumbnails at assets/favicon/icons/<id>.jpg) */
.button[id="3"]  img.icon { content: url('/assets/favicon/icons/3.jpg')  !important; }
.button[id="4"]  img.icon { content: url('/assets/favicon/icons/4.jpg')  !important; }
.button[id="5"]  img.icon { content: url('/assets/favicon/icons/5.jpg')  !important; }
.button[id="7"]  img.icon { content: url('/assets/favicon/icons/7.jpg')  !important; }
.button[id="8"]  img.icon { content: url('/assets/favicon/icons/8.jpg')  !important; }
.button[id="9"]  img.icon { content: url('/assets/favicon/icons/9.jpg')  !important; }
.button[id="10"] img.icon { content: url('/assets/favicon/icons/10.jpg') !important; }

/* kill LinkStack's Hover.css bounce (.hvr-icon) on the row thumbnails —
   keep them still and centered on hover */
.button .icon, .button img.icon { animation: none !important; }
.button:hover .icon, .button:hover img.icon {
  animation: none !important;
  transform: translateY(-50%) !important;
}

/* --- section headings: no button chrome, centered bold white, extra top space --- */
.button-heading {
  min-height: 0 !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  pointer-events: none !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 26px !important;
  margin-bottom: 6px !important;
}
.button-heading .icon { display: none !important; }

/* --- remove the LinkStack "powered by" badge --- */
.credit-hover, a[href*="linkstack.org"] { display: none !important; }

/* --- hide LinkStack's native social-icon row (top). Our matched footer
       social row is injected at the bottom by frombelow.js, like Linktree. --- */
.social-icon-div { display: none !important; }

/* --- hide the blue "verified" checkmark (your Linktree has none) --- */
.container h1 svg.badge,
.container h1 span[title="Verified user"] { display: none !important; }

/* --- hide the default LinkStack hexagon logo placeholder --- */
#avatar[src*="logo.svg"] { display: none !important; }

/* --- footer: not a card, small grey uppercase links --- */
.container:has(> .footer) {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  max-width: 580px !important;
}
.footer a, .footer-hover {
  color: #6c6c70 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.footer a:hover { color: #c8c8c8 !important; }

/* --- share button: dark, to match --- */
.sharediv .sharebutton, .share-button {
  background: #1b1b1e !important;
  color: #e8e8e8 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
}

/* ============================================================
   Footer social icons (injected by frombelow.js) — 32px white
   glyphs in 48px touch targets, matched to Linktree.
   ============================================================ */
.fb-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 22px auto 8px;
  max-width: 580px;
}
.fb-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #ffffff;
  opacity: 0.92;
  transition: opacity .15s ease, transform .15s ease;
}
.fb-socials a:hover { opacity: 1; transform: translateY(-1px); }
.fb-socials svg { width: 32px; height: 32px; display: block; }

/* ============================================================
   Rich embeds — Out the Gate: Bandcamp click-to-load player.
   Big album-art poster with a play button; on click it swaps in
   the Bandcamp embedded player (nothing loads from Bandcamp until
   the visitor asks for it).
   ============================================================ */
.fb-bc-card {
  max-width: 580px;
  margin: 0 auto 14px;
  padding: 24px 16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: blur(20px) brightness(1.1) contrast(0.9);
  backdrop-filter: blur(20px) brightness(1.1) contrast(0.9);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  text-align: center;
  transition: backdrop-filter .075s, -webkit-backdrop-filter .075s, box-shadow .075s;
}
/* whole card is the click target until the player loads (role dropped on load) */
.fb-bc-card[role="button"] { cursor: pointer; }
/* identical to .fb-sc-face:hover. Gated on [role=button] so the loaded player
   (role dropped on load) stops hover-glowing. */
.fb-bc-card[role="button"]:hover {
  -webkit-backdrop-filter: blur(20px) brightness(1.2) contrast(0.9);
  backdrop-filter: blur(20px) brightness(1.2) contrast(0.9);
  border-color: rgba(255,255,255,0.85);   /* bright-white edge, background-independent */
  box-shadow: 0 0 16px rgba(255,255,255,0.16);
}
.fb-bc-poster {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 16px;
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
}
.fb-bc-poster img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  display: block;
}
.fb-bc-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.14);
  transition: background .15s ease;
}
.fb-bc-poster:hover .fb-bc-play { background: rgba(0,0,0,0.30); }
.fb-bc-play::after {
  content: '';
  width: 0; height: 0;
  margin-left: 7px;
  border-left: 26px solid rgba(255,255,255,0.96);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
.fb-bc-title { color: #e8e8e8; font-size: 16px; letter-spacing: normal; }
.fb-bc-sub { color: #8a8a8e; font-size: 0.78rem; letter-spacing: 0.3px; margin-top: 5px; }
/* Bandcamp's large player is square art + an overlaid control bar. At 100%
   column width the art fills the width, so a fixed height clips the bottom
   controls — track height to width (square) so the play/pause stays visible. */
.fb-bc-player { border: 0; border-radius: 8px; display: block; width: 100%; height: auto !important; aspect-ratio: 1 / 1; }

/* ============================================================
   Rich embeds — Phase 2: SoundCloud click-to-load players
   (HydeFM DJ sets). Facade matches a normal button; on click it
   morphs into the SoundCloud iframe (no iframe/tracking until asked).
   ============================================================ */
.fb-sc-card { margin: 0 auto 14px; max-width: 580px; }
.fb-sc-face {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 64px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: blur(20px) brightness(1.1) contrast(0.9);
  backdrop-filter: blur(20px) brightness(1.1) contrast(0.9);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #999999;
  font-family: var(--fb-mono);
  font-size: 16px;
  transition: backdrop-filter .075s, -webkit-backdrop-filter .075s, color .075s, box-shadow .075s;
}
.fb-sc-face:hover {
  -webkit-backdrop-filter: blur(20px) brightness(1.2) contrast(0.9);
  backdrop-filter: blur(20px) brightness(1.2) contrast(0.9);
  color: #ffffff;
  border-color: rgba(255,255,255,0.85);   /* bright-white edge, background-independent */
  box-shadow: 0 0 16px rgba(255,255,255,0.16);
}
.fb-sc-art {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.fb-sc-meta { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.fb-sc-title { font-size: 16px; }
.fb-sc-sub { font-size: 0.7rem; color: #7a7a7e; margin-top: 3px; letter-spacing: 0.3px; }
.fb-sc-play {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 14px solid #cfcfcf;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.fb-sc-face:hover .fb-sc-play { border-left-color: #ffffff; }
.fb-sc-player { border: 0; border-radius: 10px; display: block; width: 100%; }

/* YouTube latest video (auto-refreshed from a playlist) — shown directly as
   the embed, 16:9. YouTube's nocookie player renders its own thumbnail + play
   button in the un-played state. */
.fb-yt-embed { max-width: 580px; margin: 0 auto 14px; }
.fb-yt-player {
  border: 0;
  border-radius: 10px;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}