/* =============================================================================
   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; }

/* ---------------------------------------------------------------------------
   Contact page — right-hand info column
   -----------------------------------------------------------------------------
   The column was a 3/12 sliver holding a 46px icon plus an address, so every
   line wrapped after two or three words and the block read as squashed. It is
   4/12 now, and the card below gives the content real padding, turns each
   entry into an icon/text row that cannot collapse, and lets long email
   addresses break instead of overflowing.
   ------------------------------------------------------------------------ */

.tp-contact-info-wrapper {
  background: var(--surface-alt, #f6f7f9);
  border: 1px solid var(--hairline, rgba(16, 24, 40, .1));
  border-radius: var(--radius-lg, 12px);
  padding: 30px 28px;
  height: 100%;
}

.tp-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}
.tp-contact-info-item:last-child { margin-bottom: 0; }

/* Without this the flex item shrinks the circle into an oval on narrow cards. */
.tp-contact-info-icon { flex: 0 0 auto; }

.tp-contact-info-content {
  min-width: 0;              /* lets long strings wrap inside a flex child */
  padding-top: 2px;
}
.tp-contact-info-content p {
  margin: 0 0 6px;
  line-height: 1.65;
  overflow-wrap: anywhere;   /* long email addresses, not page overflow */
}
.tp-contact-info-content p:last-child { margin-bottom: 0; }
.tp-contact-info-content a { color: inherit; }
.tp-contact-info-content a:hover { color: var(--brand, #0989ff); }

.tp-contact-social-title {
  font-size: .95rem;
  margin: 0 0 12px;
}
.tp-contact-social-icon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tp-contact-social-icon a {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-soft, #eef4ff);
  color: var(--brand, #0989ff);
  transition: background-color .2s ease, color .2s ease;
}
.tp-contact-social-icon a:hover {
  background: var(--brand, #0989ff);
  color: var(--on-brand, #fff);
}

/* The form column gets matching padding so the two sides sit level. */
.tp-contact-wrapper { padding-right: 10px; }

@media (max-width: 991px) {
  /* Stacked: the info card follows the form, so it needs its own gap. */
  .tp-contact-wrapper { padding-right: 0; margin-bottom: 40px; }
}
@media (max-width: 575px) {
  .tp-contact-info-wrapper { padding: 24px 20px; }
}

/* Intro line under the contact heading; only rendered when one is set. */
.breadcrumb__intro {
  margin: 10px auto 0;
  max-width: 640px;
  line-height: 1.7;
  opacity: .85;
}

/* ---------------------------------------------------------------------------
   Visitor account pages (login / signup / forgot password)
   -----------------------------------------------------------------------------
   Four designs, chosen in Theme designer -> Account pages. "classic" is the
   original markup and gets no rules here at all, so existing sites are
   untouched. These are the reader-facing pages only; the admin, editor and
   superadmin sign-in screens are staff tooling and are styled separately.
   ------------------------------------------------------------------------ */

/* --- shared card ---------------------------------------------------------- */
.tp-login--centered,
.tp-login--split,
.tp-login--minimal { padding-top: 60px; }

.tp-login--centered { background: var(--surface-alt, #f6f7f9); }

.tp-login--centered .tp-login-wrapper,
.tp-login--split .tp-login-wrapper {
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(16, 24, 40, .1));
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--card-shadow, 0 1px 2px rgba(16, 24, 40, .04));
  padding: 42px 40px;
}

.tp-login--minimal .tp-login-wrapper {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 0;
}
.tp-login--minimal .tp-login-title { letter-spacing: -.02em; }

/* --- split ---------------------------------------------------------------- */
.tp-login-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  border: 1px solid var(--hairline, rgba(16, 24, 40, .1));
  box-shadow: var(--card-shadow, 0 1px 2px rgba(16, 24, 40, .04));
  background: var(--surface, #fff);
}

.tp-login-split__panel {
  background: var(--brand, #0989ff);
  color: var(--on-brand, #fff);
  display: flex;
  align-items: center;
  padding: 48px 42px;
}
.tp-login-split__panel-inner { width: 100%; }

.tp-login-split__logo {
  max-width: 190px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 22px;
  /* Most logos are dark-on-transparent and would vanish on the brand colour. */
  background: rgba(255, 255, 255, .92);
  border-radius: 8px;
  padding: 8px 12px;
}
.tp-login-split__brand {
  color: inherit;
  font-size: 1.7rem;
  margin: 0 0 18px;
  line-height: 1.25;
}
.tp-login-split__text {
  color: inherit;
  opacity: .9;
  line-height: 1.7;
  margin: 0 0 24px;
}
.tp-login-split__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-login-split__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: inherit;
  opacity: .92;
  line-height: 1.55;
}
.tp-login-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .85;
}

.tp-login-split__form { display: flex; align-items: center; }
/* The panel already provides the frame, so the inner card must not double it. */
.tp-login-split .tp-login-wrapper {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
}

@media (max-width: 991px) {
  .tp-login-split { grid-template-columns: 1fr; }
  /* On a phone the panel is a header, not half the screen. */
  .tp-login-split__panel { padding: 32px 26px; }
  .tp-login-split__list { display: none; }
}
@media (max-width: 575px) {
  .tp-login--centered .tp-login-wrapper,
  .tp-login--split .tp-login-wrapper { padding: 30px 22px; }
}