/* Core Web Vitals: reserve space for content that arrives after first paint (prevents layout shift). */
.cwv-skeleton { background: linear-gradient(90deg, #eceff3 25%, #f5f7f9 50%, #eceff3 75%); background-size: 200% 100%; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) { .cwv-skeleton { animation: cwv-shimmer 1.4s ease-in-out infinite; } }
@keyframes cwv-shimmer { to { background-position: -200% 0; } }

/* Header logo/ad row: fixed height before logo and banner ad load */
.header-mid .row { min-height: 90px; }
.header-mid .logo img { height: auto; max-height: 65px; width: auto; }

/* Slider placeholder: same height as the real main slide (desktop/tablet heights come from style.css) */
@media (max-width: 767px) {
  .post-height-1.cwv-skeleton { height: 180px; }
}

/* Trending ticker (lazy-loaded) keeps its height while its code downloads */
.cwv-trending-slot { display: flow-root; min-height: 82px; }

/* Visible keyboard focus (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }

/* Former javascript:void(0) links, now real buttons: keep the old link look */
.btn-link-reset { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; line-height: inherit; cursor: pointer; text-align: inherit; }
.btn-link-reset.theme-color, .btn-link-reset.read-more { color: #0c4da2; }

/* Slider title link covers the caption area (keeps the whole caption clickable without nested links) */
.slider-post .post-text { position: absolute; }
.slider-post .post-text h2 a.cwv-stretched-link { color: inherit; }
.slider-post .post-text h2 a.cwv-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.slider-post .post-text .td-category, .slider-post .post-text .post-category { position: relative; z-index: 2; }

/* Header parts: measured heights, so late menu data / icon fonts cannot push the page down */
.header-top { min-height: 41px; }
@media (min-width: 768px) { .header-mid { min-height: 118px; } }
header .navbar { min-height: 51px; }

/* First lazily-loaded home section: holds at least one screen so later sections never jump into view */
.cwv-section-slot { min-height: 100vh; }

/* Icon fonts load asynchronously: give every icon its final box up front so text never reflows */
i.fa, i.fas, i.far, i.fab, i[class^="fa-"], i[class*=" fa-"], i[class^="ti-"], i[class*=" ti-"] {
  display: inline-block; min-width: 1em; min-height: 1em; line-height: 1; text-align: center;
}

/* Owl carousels are hidden (0px) until initialised, then expand: keep the first screen's carousel box */
@media (min-width: 768px) {
  .post-inner .post-slider.owl-carousel:not(.owl-loaded) { display: block; height: 360px; overflow: hidden; }
}

/* Article title became the page <h1> (SEO); keep the look it had as an <h2> */
.post_details_block h1.article-title { color: #111; font-weight: 400; margin-bottom: 10px; }
.post-header h1.article-title { margin-bottom: 10px; }
@media (max-width: 767px) { .post-header h1.article-title { font-size: 21px; } }
.skin-dark .post_details_block h1.article-title { color: #fff; }

/* Images that carry their real width/height attributes (ads, slider): keep the ratio when CSS scales
   the width. Zero specificity, so every theme rule that sets a height still wins. */
:where(img.cwv-sized) { height: auto; }

/* Main column while its data is loading: hold a full screen so the sidebar/footer below or beside it
   does not get pushed around when the content arrives */
.cwv-loading-slot { min-height: 100vh; }