/* ==========================================================================
   WordPress-specific styles. main.css is the original site's stylesheet,
   untouched; this file maps WordPress / core-block markup onto it.
   ========================================================================== */

/* Dev annotations from the prototype never show on the live theme. */
.spec-note, .notes-toggle { display: none !important; }

/* WordPress core helper class */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Real photos in placeholder frames fill the frame. */
img.ph { padding: 0; object-fit: cover; width: 100%; height: auto; display: block; }

/* Logged-in admin bar sits above the sticky header. */
.admin-bar .site-header { top: 32px; }
.admin-bar .progress-bar,
.admin-bar .topic-bar,
.admin-bar .chapter-nav { top: calc(var(--header-h) + 32px); }
.admin-bar .mobile-nav { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .progress-bar,
  .admin-bar .topic-bar,
  .admin-bar .chapter-nav,
  .admin-bar .mobile-nav { top: calc(var(--header-h) + 46px); }
}
@media (max-width: 600px) {
  /* the admin bar scrolls away on small screens */
  .admin-bar .site-header { top: 0; }
}

/* ---- Core blocks inside articles -------------------------------------- */

.prose .wp-block-heading { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Images */
.prose .wp-block-image { margin: var(--s-6) 0; }
.prose .wp-block-image img { border-radius: var(--radius-lg); height: auto; max-width: 100%; }
.prose .wp-element-caption,
.prose .wp-block-image figcaption,
.prose .wp-block-table figcaption { font-size: 14px; color: var(--ink-300); margin-top: var(--s-3); text-align: center; }

/* "Screenshot" image style: the browser-window frame from the original article */
.prose .wp-block-image.is-style-screenshot .screenshot-frame img { border-radius: 0; display: block; width: 100%; }

/* Tables: the original .table-scroll wrapper behaviour */
.prose .wp-block-table { margin: var(--s-6) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose .wp-block-table thead { border-bottom: 0; }
.prose .wp-block-table tfoot { border-top: 0; }
.prose .wp-block-table th,
.prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--border); text-align: left; padding: 12px 14px; }
.prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--surface-alt); }

/* Quotes */
.prose .wp-block-quote p { margin: 0; }
.prose .wp-block-quote cite { display: block; margin-top: var(--s-3); font-size: 14px; font-style: normal; color: var(--ink-300); }

/* Code */
.prose .wp-block-code { font-family: var(--font-mono); }

/* Separators, buttons, embeds */
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--border); margin: var(--s-8) 0; }
.prose .wp-block-buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.prose .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-md); background: var(--cta); color: #fff; font-weight: 600; text-decoration: none; }
.prose .wp-block-button__link:hover { background: var(--cta-hover); color: #fff; }
.prose .wp-block-embed { margin: var(--s-6) 0; }
.prose .wp-block-embed iframe { max-width: 100%; border-radius: var(--radius-lg); }

/* Wide / full alignment just use the article width. */
.prose .alignwide, .prose .alignfull { max-width: 100%; }
.prose .aligncenter { margin-inline: auto; text-align: center; }
.prose .alignleft { float: left; margin: 0 var(--s-5) var(--s-4) 0; }
.prose .alignright { float: right; margin: 0 0 var(--s-4) var(--s-5); }

/* ---- Theme blocks ------------------------------------------------------ */
/* Inner-block wrappers mustn't add spacing the original markup didn't have. */
.callout > * + *,
.accordion__panel > * + * { margin-top: var(--s-3); }
.proscons__col .wp-block-list,
.takeaways .wp-block-list { margin: 0; }
.steps > li > p { margin: 0; }
.steps > li > * + * { margin-top: var(--s-3); }

/* Post pagination inside a post (<!--nextpage-->) */
.post-page-numbers { padding: 6px 12px; }