/*
 * Phone and tablet refinements on top of the mirrored theme. Not on live:
 * Tim asked (2026-10-15) for every site to be adaptive and up to modern
 * mobile standards. Desktop is untouched: visible changes sit under
 * max-width: 1023px, and the larger tap areas under (pointer: coarse) are
 * invisible pseudo-elements or padding cancelled by margin, which draw
 * nothing and move nothing.
 */

/* Keyboard focus on the blog and work category pills (made focusable by
   public/a11y.js): a ring outside the pill, drawn only while it has keyboard
   focus, so every width looks as before otherwise. !important: the theme
   removes every outline with `* {outline: 0 !important}`. */
.cl-post__category-wrap .cl-post__category:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 4px;
}

/* Keyboard focus everywhere else: a ring in the theme's accent (--c-active,
   #00C8FF), with a thin dark band between it and the element so it also reads
   on the white and light-grey sections. :focus-visible only, so mouse and
   touch rendering are unchanged; the pills above keep their own ring. */
:focus-visible {
  outline: 2px solid #00c8ff !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #030b13;
}

/* WordPress caption figures carry an inline width (1474px on
   /deploying-nestjs-microservices/, 1024px on the QA-bot post), which made
   those pages scroll sideways on phones and, for the 1474px one, at 1440 too
   (live does the same). Keep them inside the column; captions that already
   fit are unchanged. */
[id^="attachment_"],
.wp-caption {
  max-width: 100%;
}
[id^="attachment_"] img,
.wp-caption img {
  max-width: 100%;
  height: auto;
}

/* Extra H1s in post bodies and builder sections are H2s now (one H1 per
   page). They carry the theme's own .h1 class, which gives them the h1 font
   size and line height at every width; only the margins a post body gives
   its h2s need putting back to the h1 ones (top 0, bottom .5rem). */
.cl-blog--single-wrapper .cl-blog--single__post h2.h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
/* Inside a .desc-big block (the service pages' intro box) the theme's
   `.desc-big *` sized the old h1 like the text around it; .h1 would win over
   it, so the block's own sizes are restated. */
.desc-big h2.h1 {
  font-size: 24px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .desc-big h2.h1 {
    font-size: 16px;
  }
}

/* Tap areas of at least 44px on touch screens, without changing what is drawn. */
@media (pointer: coarse) {
  /* The 22x18 hamburger. */
  .cloudoki-header .cloudoki-header--mob-nav__hamburger::after {
    content: '';
    position: absolute;
    inset: -13px -11px;
  }
  /* Mobile menu rows are 44px apart (li padding), but only the 24px link took a tap. */
  #menu-main-menu > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
    margin-bottom: -10px;
  }
  /* "Read more" and the other arrow links (their ::after is the arrow). */
  .cl-link::before {
    content: '';
    position: absolute;
    inset: -10px 0;
  }
  /* The hero's service links (their ::after is the "|" separator). */
  .cl-main-banner__link {
    position: relative;
  }
  .cl-main-banner__link::before {
    content: '';
    position: absolute;
    inset: -9px 0;
  }
  /* Slider dots: 18px tall bars. */
  .swiper-pagination-bullet {
    position: relative;
  }
  .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    inset: -13px -1px;
  }
  /* Inline links in the footer's fine print (vertical padding on an inline box moves nothing). */
  .cloudoki-footer#footer .cloudoki-footer__bottom p a {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

@media screen and (max-width: 1023px) {
  /* Footer fine print: the theme drops it to 12px below 992px. */
  .cloudoki-footer#footer .cloudoki-footer__desc,
  .cloudoki-footer#footer .cloudoki-footer__bottom p {
    font-size: 14px;
  }

  /* Card labels and dates: 12px on every width. */
  .cl-post__item-cat,
  .cl-post__item-author-date {
    font-size: 13px;
  }

  /*
   * Post and case-study heroes: the featured image is a designed 16:9 card
   * (often with its title in it), cropped by the theme to a fixed 410-550px
   * band that cut it to a slice on a phone. Show all of it.
   */
  .cl-blog--single-wrapper .cl-banner__img img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  /* Post text ran ~92 characters a line across a tablet; keep it near 75. */
  .cl-blog--single-wrapper .cl-banner__text.container {
    max-width: 710px !important; /* the theme's .container sizes are !important */
  }
  .cl-blog--single-wrapper .cl-blog--single__post {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 768px) {
  /* Footer menus (an accordion here): 18px links 30px apart. */
  .cloudoki-footer#footer .cloudoki-footer__link {
    margin-bottom: 0;
    padding: 13px 0;
    max-width: none;
  }

  /* Blog and work filters: 12px text on 27px pills. The active pill has no
     2px ring (its ::before), so it is 2px bigger each way, as in the theme. */
  .cl-post__category-wrap .cl-post__category.button.button-small {
    font-size: 14px;
    line-height: 18px;
    padding: 13px 18px;
    margin-bottom: 10px;
  }
  .cl-post__category-wrap .cl-post__category.button.button-active.button-small {
    padding: 15px 20px;
  }
}

/* Spacing that empty paragraphs used to make (round 3, 2026-10-16: the
   spacer paragraphs were removed from the content). The theme gives a
   feature-list description's paragraphs no margin, so a heading after text
   gets the space it keeps below itself; a paragraph after a list in section
   text gets the space paragraphs keep below themselves; in a full-width text
   section (the privacy policy) a bold line that heads the text after it
   stands off the text before it. All widths. */
.cl-textarea.full .cl-textarea__text > p + p:has(> strong:only-child) {
  margin-top: 25px;
}
.cl-feature-items-simple__item-description > * + h4 {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .cl-feature-items-simple__item-description > * + h4 {
    margin-top: 10px;
  }
}
.desc-big > ul + p,
.desc-big > ol + p {
  margin-top: 10px;
}

/* A short banner without a picture (a new page's starting banner): the text
   takes the full width, lined up with the sections below; the picture
   column's glow stays, behind the text, without taking room; no space is
   kept below for a picture. A description gets the space below it that the
   title keeps when there is none. Banners with a picture are unchanged. */
.cl-banner-short__container:not(:has(.cl-banner-short__img img)) {
  padding-bottom: 0;
}
.cl-banner-short__container:not(:has(.cl-banner-short__img img)) .cl-banner-short__text {
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
}
.cl-banner-short__container:not(:has(.cl-banner-short__img img)) .cl-banner-short__img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
.cl-banner-short__container:not(:has(.cl-banner-short__img img)) .cl-banner-short__desc:not(:empty) {
  margin-bottom: 80px;
}
@media screen and (max-width: 1024px) {
  .cl-banner-short__container:not(:has(.cl-banner-short__img img)) .cl-banner-short__desc:not(:empty) {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 768px) {
  .cl-banner-short__container:not(:has(.cl-banner-short__img img)) .cl-banner-short__desc:not(:empty) {
    margin-bottom: 40px;
  }
}

/* A bold line heading the text after it in a post or case study (a
   paragraph that is all bold: data-subheading, src/structured/portable.ts)
   stands off the text before it, as the empty paragraph before it used to
   make it (round 3). Only after text, a list, a picture or code: not when
   it opens the body or follows a heading. */
.cl-blog--single__post > :is(p, ul, ol, blockquote, figure, div, pre, hr) + p[data-subheading] {
  margin-top: 32px;
}
@media screen and (max-width: 768px) {
  .cl-blog--single__post > :is(p, ul, ol, blockquote, figure, div, pre, hr) + p[data-subheading] {
    margin-top: 24px;
  }
}