@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Stylesheet for the blog posts (/post/*), /resources/* and /bitcoin-depot-toolkit/. */

/* ---------- Tokens ---------- */
:root {
  --ink: #062526;
  --sky: #a7d2dd;
  --white: #fff;

  --fs-eyebrow: clamp(19.2px, 1.67vw, 24px);
  --fs-body: clamp(17px, 1.48vw, 21.33px);

  --wrap: 1232px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-body);
  /* Canva's "regular" Montserrat renders like Google's 500. */
  font-weight: 500;
  line-height: 1.36;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: min(var(--wrap), 100% - 32px);
  margin-inline: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Listing (/resources/*, /bitcoin-depot-toolkit/) ---------- */
/* A text-only list of posts or external articles, in the same reading column
   and colours as a blog post. Each row is clickable as a whole via the title
   link's ::after. */
.listing {
  --fs-listing: clamp(17px, 0.45vw + 15px, 19.5px);
  --text: #e3eef0;
  --muted: #9fb9bd;
  --rule: rgb(167 210 221 / 0.22);
  --panel: rgb(167 210 221 / 0.06);

  width: min(72ch, 100% - 32px);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 7vw, 96px);
  font-size: var(--fs-listing);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: break-word;
}

.listing__header {
  padding-bottom: 1.6em;
  border-bottom: 1px solid var(--rule);
}

.listing__header > * + * {
  margin-top: 0.75rem;
}

.listing__eyebrow {
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}

.listing h1 {
  font-size: clamp(34px, 3.2vw + 16px, 54px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--white);
  text-wrap: balance;
}

.listing__intro {
  font-size: 1.1em;
  line-height: 1.5;
}

/* Entries */
.listing__item {
  position: relative;
  padding: 1.5em 0;
  border-bottom: 1px solid var(--rule);
}

.listing__item > * + * {
  margin-top: 0.4em;
}

.listing__meta {
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.listing__source {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}

.listing__title {
  font-size: clamp(21px, 0.8vw + 17px, 27px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--white);
  text-wrap: balance;
}

.listing__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.listing__title a:focus-visible {
  outline: none;
}

.listing__title a:focus-visible::after {
  outline: 2px solid var(--sky);
  outline-offset: 4px;
  border-radius: 4px;
}

.listing__external {
  display: inline-block;
  margin-left: 0.2em;
  font-weight: 500;
  color: var(--sky);
}

.listing__excerpt {
  color: var(--muted);
}

.listing__more {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--sky);
}

.listing__item:hover .listing__title,
.listing__item:focus-within .listing__title {
  color: var(--sky);
}

.listing__item:hover .listing__more {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Phone layout (Canva's 390px design, capped at 560px) ---------- */
@media (max-width: 800px) {
  :root {
    --wrap: 560px;
  }
}

/* ---------- Blog post (long-form article) ---------- */
/* One narrow reading column; the hero image may break out a little wider.
   Vertical rhythm is in em of the body text so it scales with --fs-post. */
.post {
  --fs-post: clamp(17px, 0.45vw + 15px, 19.5px);
  --measure: 68ch;
  --text: #e3eef0;
  --muted: #9fb9bd;
  --rule: rgb(167 210 221 / 0.22);
  --panel: rgb(167 210 221 / 0.08);

  width: min(var(--measure), 100% - 32px);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 7vw, 96px);
  font-size: var(--fs-post);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: break-word;
}

.post > article > * + * {
  margin-top: 1.1em;
}

/* Zero specificity, so the rhythm rules below always win. */
:where(.post) :where(figure, blockquote) {
  margin: 0;
}

/* Header */
.post__header {
  margin-bottom: 2.2em;
}

.post__header > * + * {
  margin-top: 0.75rem;
}

.post__meta {
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.post h1 {
  margin: 0;
  font-size: clamp(34px, 3.2vw + 16px, 54px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--white);
  text-wrap: balance;
}

.post__header .post__meta:first-child {
  color: var(--sky);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post__dek {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--white);
}

/* Hero image: a bit wider than the text column on large screens */
.post__hero {
  margin-inline: calc(min(96px, (100vw - 100%) / 2 - 16px) * -1);
}

.post .post__hero {
  margin-bottom: 2.4em;
}

/* The <picture> wrapper from the responsiveImage shortcode must not affect layout. */
.post__hero picture {
  display: contents;
}

.post__hero source {
  display: none;
}

.post__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Headings */
.post h2,
.post h3 {
  margin: 0;
  color: var(--white);
  text-wrap: balance;
}

.post h2 {
  font-size: clamp(25px, 1.2vw + 18px, 34px);
  font-weight: 800;
  line-height: 1.2;
}

.post h3 {
  font-size: clamp(20px, 0.6vw + 16px, 24px);
  font-weight: 700;
  line-height: 1.3;
}

.post > article > h2,
.post__footer > h2 {
  margin-top: 2.2em;
}

.post > article > h3 {
  margin-top: 1.8em;
}

.post > article > :is(h2, h3) + * {
  margin-top: 0.7em;
}

.post > article > h2 + h3 {
  margin-top: 1.2em;
}

.post [tabindex="-1"]:focus {
  outline: none;
}

/* Inline text */
.post strong {
  font-weight: 700;
  color: var(--white);
}

.post a {
  color: var(--sky);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.post a:hover {
  color: var(--white);
  text-decoration-thickness: 2px;
}

/* Lists */
.post ul {
  padding-left: 1.4em;
  list-style: disc;
}

.post li + li {
  margin-top: 0.4em;
}

.post li::marker {
  color: var(--sky);
}

/* Quotes */
.post blockquote {
  padding: 0.1em 0 0.1em 1.1em;
  border-left: 3px solid var(--sky);
  font-size: 1.12em;
  font-style: italic;
  line-height: 1.55;
  color: var(--white);
}

.post blockquote {
  margin-block: 1.5em;
}

/* Callouts: tax traps, cheat-sheet and newsletter prompts */
.post__callout {
  padding: 1.1em 1.3em;
  border-left: 3px solid var(--sky);
  border-radius: 0 10px 10px 0;
  background: var(--panel);
}

.post .post__callout {
  margin-block: 2em;
}

.post__callout > * + * {
  margin-top: 0.6em;
}

.post__callout-title {
  font-weight: 800;
  color: var(--white);
}

/* Embedded Google Forms */
.post__embed {
  display: block;
  width: 100%;
  min-height: 50rem;
  border: 0;
  border-radius: 10px;
  background: var(--white);
}

.post .post__embed {
  margin-block: 2em;
}

/* Footer: sign-off, resources, disclaimer */
.post__footer {
  padding-top: 2em;
  border-top: 1px solid var(--rule);
}

.post .post__footer {
  margin-top: 3em;
}

.post__footer > * + * {
  margin-top: 1em;
}

.post__signoff {
  line-height: 1.6;
}

.post .post__small-heading {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.post .post__small-heading + ul {
  margin-top: 0.5em;
}

.post__disclaimer {
  font-size: 0.78em;
  font-style: italic;
  line-height: 1.55;
  color: var(--muted);
}

.post .post__disclaimer {
  margin-top: 2em;
}