/* Hand-written styles for this site's own blocks. Loaded after the CSS
   exported from WordPress (site.css / inline.css / gb-content.css) so it can
   correct and extend it without those generated files being edited. */

/* ── Image captions ─────────────────────────────────────────────────────
   Restores the GeneratePress child-theme rule from the WordPress site, which
   the migration didn't carry over: single-image captions read left-aligned
   and italic. The gallery rule in site.css is more specific, so gallery
   captions keep their centred overlay and only inherit the italic — matching
   WordPress exactly. */
.wp-block-image figcaption {
  text-align: left;
  font-style: italic;
  font-family: Roboto, sans-serif;
  font-weight: 500;
}

/* ── Callout boxes ──────────────────────────────────────────────────────
   Replaces the nested GenerateBlocks containers used on WordPress for the
   "Warning Red Box", "Disclaimer Yellow Box" and "Grey Box". Colours and
   metrics are taken from the live site. */
.ng-callout {
  --ng-callout-bg: #fafafa;
  --ng-callout-border: #e1e1e1;
  margin: 30px 0;
  border-radius: 6px;
}

.ng-callout--warning {
  --ng-callout-bg: #f9e8e8;
  --ng-callout-border: var(--contrast-3, #b2b2be);
}

.ng-callout--note {
  --ng-callout-bg: rgb(255 235 59 / 25%);
  --ng-callout-border: #e2e2e2;
}

.ng-callout--tip {
  --ng-callout-bg: #fafafa;
  --ng-callout-border: #e1e1e1;
}

.ng-callout__head {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  margin: 0;
  padding: 20px 20px 10px;
  background-color: var(--ng-callout-bg);
  border: 1px solid var(--ng-callout-border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #2a2e31;
}

.ng-callout__icon {
  line-height: 0;
  flex: none;
}

/* Icons are the original WordPress illustrations, so they keep their own
   colours rather than inheriting the label colour. Height is fixed and width
   follows each drawing's aspect ratio. */
.ng-callout__icon img {
  height: 1.8em;
  width: auto;
  display: block;
}

.ng-callout__body {
  padding: 0 20px 20px;
  background-color: var(--ng-callout-bg);
  border: 1px solid var(--ng-callout-border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  font-size: 15px;
  color: #2a2e31;
}

/* A callout with no label still needs its top corners and border. */
.ng-callout__body:first-child {
  padding-top: 20px;
  border-top: 1px solid var(--ng-callout-border);
  border-radius: 6px;
}

.ng-callout__body > *:first-child { margin-top: 0; }
.ng-callout__body > *:last-child { margin-bottom: 0; }

.ng-callout__body ul,
.ng-callout__body ol {
  font-size: 15px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .ng-callout__head { font-size: 17px; padding: 16px 16px 8px; }
  .ng-callout__body { padding: 0 16px 16px; }
  .ng-callout__body:first-child { padding-top: 16px; }
}

/* ── Code blocks ────────────────────────────────────────────────────────
   WordPress applied no styling to its core code block; these render as a
   dark terminal window instead. */
.ng-code {
  margin: 30px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #16181d;
  border: 1px solid #2c313a;
}

.ng-code__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #21252d;
  border-bottom: 1px solid #2c313a;
}

.ng-code__dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}

.ng-code__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3d434e;
}

.ng-code__dots i:nth-child(1) { background: #ff5f56; }
.ng-code__dots i:nth-child(2) { background: #ffbd2e; }
.ng-code__dots i:nth-child(3) { background: #27c93f; }

.ng-code__title {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #8a93a1;
  letter-spacing: 0.02em;
}

.ng-code__pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: none;
  border: 0;
}

.ng-code__pre code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.65;
  color: #e6e9ef;
  background: none;
  padding: 0;
  white-space: pre;
  display: block;
}

@media (max-width: 768px) {
  .ng-code__pre { padding: 14px; }
  .ng-code__pre code { font-size: 13px; }
}