/* Single-post reading experience. Loaded only on articles. */
.awp-blog-single {
  --awp-article-text: #3e444a;
  --awp-article-muted: #68717b;
  --awp-article-panel: #f7f8fa;
  --awp-article-link: #705a00;
  --awp-article-note: #fff9e5;
}

.awp-blog-single-head {
  position: relative;
  padding: 32px clamp(20px, 3vw, 42px) 28px;
  background: linear-gradient(135deg, var(--awp-primary-soft), transparent 52%);
}
.awp-blog-single-head::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 96px;
  height: 4px;
  background: var(--awp-primary);
}
.awp-blog-single-head h1 { text-wrap: pretty; }
.awp-blog-single-head .awp-blog-meta { gap: 10px 16px; color: var(--awp-article-muted); }
.awp-blog-single-featured { padding: 0; background: var(--awp-article-panel); }
.awp-blog-single-featured img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: none; object-fit: contain; }
.awp-blog-single-featured figcaption { color: var(--awp-article-muted); font-size: 12px; }

.awp-blog-content {
  width: 100%;
  max-width: 930px;
  margin-inline: auto;
  padding: 32px clamp(20px, 3vw, 42px) 42px;
  color: var(--awp-article-text);
  font-size: 16px;
  line-height: 2.15;
  overflow-wrap: break-word;
}
.awp-blog-content p { margin-block: 0 1.45em; }
.awp-blog-content :is(h2, h3, h4, h5, h6)[id] { scroll-margin-top: 155px; }
.awp-blog-content h2 {
  margin-block: 2em .85em;
  padding-inline-start: 16px;
  border-inline-start: 4px solid var(--awp-primary);
}
.awp-blog-content h3 { margin-block: 1.8em .7em; }
.awp-blog-content h4 { margin-block: 1.6em .6em; }
.awp-blog-content a {
  color: var(--awp-article-link);
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 5px;
}
.awp-blog-content a:hover { text-decoration-thickness: 2px; }
.awp-blog-content :is(a, button, pre, [tabindex]):focus-visible {
  outline: 3px solid var(--awp-primary);
  outline-offset: 4px;
}
.awp-blog-content :is(ul, ol) { padding-inline-start: 1.6em; padding-inline-end: 0; }
.awp-blog-content li { padding-inline-start: .25em; padding-inline-end: 0; margin-block: .6em; }
.awp-blog-content li::marker { color: var(--awp-article-link); font-weight: 700; }
.awp-blog-content li > :is(ul, ol) { margin-block: .5em; }
.awp-blog-content blockquote {
  padding: 22px 26px;
  border: 1px solid var(--awp-border);
  border-inline-start: 4px solid var(--awp-primary);
  background: var(--awp-article-note);
  color: var(--awp-article-text);
}
.awp-blog-content :is(.note, .warning, .success) {
  padding: 18px 22px;
  margin-block: 26px;
  border: 1px solid var(--awp-border);
  border-inline-start: 4px solid var(--awp-primary);
  border-radius: 12px;
  background: var(--awp-article-note);
  color: var(--awp-article-text);
}
.awp-blog-content .warning { border-inline-start-color: #d97706; background: #fff5e9; }
.awp-blog-content .success { border-inline-start-color: #268458; background: #edf8f1; }
.awp-blog-content mark { padding: 1px 5px; border-radius: 4px; color: #24241b; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Images stay uncropped: screenshots often contain important UI at their edges. */
.awp-blog-content figure { margin-block: 32px; }
.awp-blog-content img { max-width: 100%; height: auto; }
.awp-blog-content .wp-block-image img { display: block; margin-inline: auto; border: 1px solid var(--awp-border); border-radius: 12px; }
.awp-blog-content .inline-img { display: inline-block; vertical-align: middle; border-radius: 4px; margin-inline: 3px; }
.awp-blog-content :is(figcaption, .wp-caption-text) { margin-top: 10px; color: var(--awp-article-muted); font-size: 12px; line-height: 1.9; }
.awp-blog-content .alignfull { width: 100%; max-width: 100%; margin-inline: 0; }
.awp-blog-content :is(video, iframe) { max-width: 100%; }
.awp-blog-content .wp-block-embed.is-type-video .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.awp-blog-content .wp-block-embed.is-type-video iframe { width: 100%; height: 100%; }
.awp-blog-content :is(.wp-block-table, .awp-article-table) { max-width: 100%; overflow-x: auto; margin-block: 28px; border-radius: 12px; }
.awp-blog-content table { width: 100%; margin: 0; font-size: 13px; line-height: 1.9; border-color: var(--awp-border); }
.awp-blog-content :not(.wp-block-table):not(.awp-article-table) > table { display: block; max-width: 100%; overflow-x: auto; }
.awp-blog-content :is(th, td) { min-width: 125px; padding: 13px 16px; text-align: start; vertical-align: top; border-color: var(--awp-border); }
.awp-blog-content th { background: var(--awp-article-panel); color: var(--awp-ink); }

/* Rank Math keeps ownership of the outline, links and heading IDs. */
.awp-blog-content .wp-block-rank-math-toc-block {
  scroll-margin-top: 155px;
  margin-block: 32px;
  padding: 22px 26px;
  border: 1px solid var(--awp-border);
  border-block-start: 3px solid var(--awp-primary);
  border-radius: 14px;
  background: var(--awp-article-note);
}
.awp-blog-content .wp-block-rank-math-toc-block > :is(p, h2, h3) {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  color: var(--awp-ink);
  font-size: 16px;
  font-weight: 800;
}
.awp-toc-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.awp-toc-toggle {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 5px 12px;
  border: 1px solid var(--awp-border);
  border-radius: 8px;
  background: var(--awp-surface);
  color: var(--awp-ink);
  font: 600 12px/1.6 var(--awp-font);
  cursor: pointer;
}
.awp-toc-toggle:hover { border-color: var(--awp-primary); }
.awp-blog-content .wp-block-rank-math-toc-block nav[hidden] { display: none; }
.awp-blog-content .wp-block-rank-math-toc-block :is(ul, ol) { margin: 0; padding-inline-start: 22px; }
.awp-blog-content .wp-block-rank-math-toc-block nav > :is(ul, ol) { list-style-type: decimal; }
.awp-blog-content .wp-block-rank-math-toc-block li { margin-block: 5px; padding-inline-start: 3px; }
.awp-blog-content .wp-block-rank-math-toc-block li > :is(ul, ol) { margin-block: 5px 10px; border-inline-start: 1px solid var(--awp-border); list-style: disc; }
.awp-blog-content .wp-block-rank-math-toc-block a { display: block; padding-block: 4px; color: var(--awp-article-text); font-size: 14px; line-height: 1.9; text-decoration: none; }
.awp-blog-content .wp-block-rank-math-toc-block a:hover { color: var(--awp-article-link); text-decoration: underline; }

/* Native code panels support Gutenberg and legacy SyntaxHighlighter <pre> blocks. */
.awp-blog-content :is(pre, code, kbd, samp) {
  font-family: Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
  font-feature-settings: normal;
  font-variant-ligatures: none;
  tab-size: 4;
}
.awp-blog-content code { direction: ltr; unicode-bidi: isolate; padding: 2px 6px; border: 1px solid var(--awp-border); border-radius: 5px; background: var(--awp-article-panel); color: var(--awp-article-text); font-size: .9em; overflow-wrap: anywhere; }
.awp-blog-content kbd { padding: 2px 5px; border: 1px solid var(--awp-border); border-bottom-width: 2px; border-radius: 4px; font-size: .85em; }
.awp-blog-content pre {
  max-width: 100%;
  overflow: auto;
  padding: 22px;
  margin-block: 28px;
  border: 1px solid #303a48;
  border-radius: 12px;
  background: #18212d;
  color: #edf2f7;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 13px;
  line-height: 1.95;
  scrollbar-color: #64748b #18212d;
}
.awp-blog-content pre code { display: block; padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; line-height: inherit; white-space: inherit; overflow-wrap: normal; word-break: normal; }
.awp-code-panel { min-width: 0; margin-block: 28px; overflow: hidden; border: 1px solid #303a48; border-radius: 13px; background: #18212d; }
.awp-code-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #364151; background: #222e3d; color: #e2e8f0; font-size: 12px; line-height: 1.6; }
.awp-code-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.awp-code-label::before { content: "</>"; color: var(--awp-primary); font: 700 14px/1.5 Consolas, monospace; direction: ltr; }
.awp-code-copy { min-width: 80px; min-height: 34px; padding: 5px 12px; border: 1px solid #66758a; border-radius: 7px; background: transparent; color: #fff; font: 600 12px/1.6 var(--awp-font); cursor: pointer; }
.awp-code-copy:hover { border-color: var(--awp-primary); background: #303e51; }
.awp-code-status { flex-basis: 100%; color: #d8e4f1; font-size: 12px; }
.awp-code-status:empty { display: none; }
.awp-blog-content .awp-code-panel pre { margin: 0; border: 0; border-radius: 0; }

.awp-blog-single .awp-blog-post-nav strong { font-size: 13px; line-height: 1.9; white-space: normal; }
.awp-blog-single .awp-blog-post-nav small { color: var(--awp-article-muted); font-size: 11px; }
.awp-blog-single .awp-blog-related-thumb { height: auto; aspect-ratio: 16 / 9; }
.awp-blog-single .awp-blog-related h3 { font-size: 13px; }
.awp-blog-single .awp-blog-author-box p { font-size: 12px; line-height: 2; }

html[data-awp-theme="dark"] .awp-blog-single {
  --awp-article-text: #d7dee7;
  --awp-article-muted: #b1bbc9;
  --awp-article-panel: var(--awp-dark-surface-2);
  --awp-article-link: var(--awp-primary);
  --awp-article-note: var(--awp-dark-accent-soft);
}
html[data-awp-theme="dark"] .awp-blog-content .warning { background: #332719; color: #f7dfbf; }
html[data-awp-theme="dark"] .awp-blog-content .success { background: #173126; color: #d2eddf; }
html[data-awp-theme="dark"] .awp-blog-content .wp-block-rank-math-toc-block a { color: var(--awp-article-text) !important; }
html[data-awp-theme="dark"] .awp-blog-content .wp-block-rank-math-toc-block a:hover { color: var(--awp-primary) !important; }
html[data-awp-theme="dark"] .awp-blog-content pre code { background: transparent !important; color: #edf2f7; }

@media (max-width: 767px) {
  .awp-blog-single-head { padding: 25px 20px 22px; }
  .awp-blog-single-head h1 { font-size: 25px; }
  .awp-blog-content { padding: 26px 20px 32px; font-size: 15px; line-height: 2.1; }
  .awp-blog-content h2 { font-size: 21px; padding-inline-start: 12px; }
  .awp-blog-content h3 { font-size: 18px; }
  .awp-blog-content :is(h2, h3, h4, h5, h6)[id] { scroll-margin-top: 110px; }
  .awp-blog-content .wp-block-rank-math-toc-block { padding: 18px; }
  .awp-blog-content :is(.note, .warning, .success, blockquote) { padding: 16px; }
  .awp-blog-content pre { padding: 18px 16px; font-size: 12px; }
  .awp-code-toolbar { padding-inline: 12px; }
  .awp-blog-content table { display: table; white-space: normal; }
  .awp-blog-content figure { margin-block: 25px; }
}
@media print {
  .awp-toc-toggle, .awp-code-toolbar { display: none; }
  .awp-blog-content .wp-block-rank-math-toc-block nav[hidden] { display: block; }
  .awp-blog-content pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #111; background: #fff; }
}