/* =============================================================================
   Universal fixes — loaded on EVERY front-end page, Classic included.
   Deliberately tiny and layout-neutral: nothing here changes an existing
   design, it only corrects things that were broken on every theme.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   reCAPTCHA containment
   ---------------------------------------------------------------------------
   Google's widget is a fixed 304px-wide iframe. On narrow screens it used to
   overflow its card and get clipped. Scaling from the left keeps the whole
   widget visible and clickable, and the wrapper height is adjusted to match so
   nothing below it overlaps.
   ------------------------------------------------------------------------ */

.captcha {
  margin: 18px 0 22px;
  max-width: 100%;
  overflow: hidden;
}
.captcha .g-recaptcha {
  display: inline-block;
  transform-origin: 0 0;
  max-width: 100%;
}
.captcha iframe { max-width: 100%; }

@media (max-width: 400px) {
  .captcha .g-recaptcha { transform: scale(.86); }
  .captcha { height: 68px; }
}
@media (max-width: 340px) {
  .captcha .g-recaptcha { transform: scale(.76); }
  .captcha { height: 62px; }
}

/* ---------------------------------------------------------------------------
   Media never overflows its column
   ------------------------------------------------------------------------ */

img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* Rich-text bodies frequently contain wide tables pasted from elsewhere. */
.tp-postbox-details-text table,
.tp-about-banner-wrapper table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* NOTE: do not put a placeholder background on img[loading="lazy"].
   Decorative PNGs (the newsletter shapes, logos) are transparent, and a
   background paints a solid block behind them. Placeholder tints belong on the
   thumbnail *containers* below, which are never transparent artwork. */

/* ---------------------------------------------------------------------------
   Thumbnail fit — applies to the ORIGINAL (Classic) templates too
   -----------------------------------------------------------------------------
   --media-fit comes from the account's "Thumbnail fit" setting and is emitted
   for every site, Classic included. "contain" shows the whole picture;
   "cover" fills the box and crops. Previously these images were given a fixed
   height with no object-fit at all, so they were simply squashed.
   ------------------------------------------------------------------------ */

.tp-blog-grid-thumb img,
.tp-product-thumb-2 img {
  width: 100%;
  object-fit: var(--media-fit, contain);
  object-position: center;
  background: #f4f6f8;
}

/* ---------------------------------------------------------------------------
   Sidebar "Trending Blog" rows
   -----------------------------------------------------------------------------
   The original theme shipped no rules for these thumbnails at all, so each one
   rendered at its own natural size: the column was ragged, and where an image
   came out narrow the headline butted straight up against it. A fixed box plus
   a real gap makes every row identical.
   ------------------------------------------------------------------------ */

.tp-sidebar-blog-item { gap: 14px; }

.tp-sidebar-blog-thumb {
  flex: 0 0 92px;
  width: 92px;
  height: 68px;
  overflow: hidden;
  border-radius: 6px;
  background: #f4f6f8;
}
.tp-sidebar-blog-thumb a { display: block; width: 100%; height: 100%; }
.tp-sidebar-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: var(--media-fit, contain);
  object-position: center;
}

/* Lets long headlines wrap instead of forcing the row wider than the sidebar. */
.tp-sidebar-blog-content { min-width: 0; }

/* The homepage slider is a full-bleed banner: it must fill its band. Using
   "contain" here would letterbox it with large empty bars on wide screens. */
.tp-slider-thumb-3 img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Article cover. */
.tp-postbox-details-thumb img { width: 100%; object-fit: var(--media-fit, contain); }

/* ---------------------------------------------------------------------------
   Accessibility helpers used by the newer templates.
   ------------------------------------------------------------------------ */

.sk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Contact page icons
   -----------------------------------------------------------------------------
   These used to be three fixed PNGs shipped with the original theme, so they
   looked out of place on any site with its own colours. They are now inline
   SVGs that take the brand colour, on every theme.
   ------------------------------------------------------------------------ */

.tp-contact-info-icon > span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-soft, #eef4ff);
  color: var(--brand, #0989ff);
}
.tp-contact-info-icon > span svg { width: 22px; height: 22px; display: block; }