html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.main-nav .dropdown-menu.site-category-dropdown {
  max-height: min(65vh, 34rem);
  overflow-y: auto;
  overflow-x: hidden;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.img-size-768x419 {
    width: 768px;
    height: 419px;
}

.img-size-568x484 {
  width: 568px;
  height: 484px;
}

.img-size-568x474 {
    width: 568px;
    height: 474px;
}

.img-size-568x379 {
  width: 568px;
  height: 379px;
}

.img-size-384x384 {
    width: 384px;
    height: 384px;
}

.img-size-360x300 {
    width: 360px;
    height: 300px;
}

.img-size-360x240 {
    width: 360px;
    height: 240px;
}

.img-size-360x202 {
    width: 360px;
    height: 202px;
}

.img-size-282x240 {
  width: 282px;
  height: 240px;
}

.img-size-282x235 {
    width: 282px;
    height: 235px;
}

.img-size-282x188 {
  width: 282px;
  height: 188px;
}

.img-size-128x107 {
    width: 128px;
    height: 107px;
}

.img-size-115x77 {
  width: 115px;
  height: 77px;
}

/* Keep Big grid slider + box news responsive on phones.
   These sections use fixed-size helper classes; without a mobile override
   the images can render too large compared to BootNews defaults. */
@media (max-width: 767.98px) {
  .featured-1 .img-size-568x484,
  .featured-1 .img-size-568x474,
  .featured-1 .newsbox .img-size-282x240,
  .featured-1 .newsbox .img-size-282x235,
  .img-size-128x107 {
    width: 100% !important;
    height: auto !important;
  }
}

.footer-popular-posts .image-wrapper {
  position: relative;
  overflow: hidden;
}

.footer-popular-posts .image-wrapper > a {
  position: absolute;
  inset: 0;
  display: block;
}

.footer-popular-posts .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.authors-page .author-card {
  padding: 0.75rem 0;
  margin-bottom: 1.25rem;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 0;
  overflow: visible;
  display: block;
  clear: both;
  isolation: isolate;
}

.authors-page .author-card-content {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}

.authors-page .author-card-text {
  min-width: 0;
  overflow: visible;
}

.authors-page .author-card-text p {
  margin-bottom: 0.75rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.authors-page {
  margin-bottom: 2rem;
}

#article-comments {
  margin-bottom: 2rem;
  clear: both;
  isolation: isolate;
}

#article-comments-list {
  padding-bottom: 1rem;
}

.authors-page .row {
  row-gap: 1.75rem;
}

.authors-page .row > [class*="col-"] {
  margin-bottom: 0.75rem;
}

.authors-page .author-social-links {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
  z-index: 5;
}

.authors-page .author-social-links a {
  position: relative;
  z-index: 6;
  pointer-events: auto;
  display: inline-block;
}

/* Keep article body copy readable; preserve heading emphasis. */
.article-content .post-content p,
.article-content .post-content li,
.article-content .post-content span,
.article-content .post-content div {
  font-weight: 400 !important;
}

.article-content .post-content h1,
.article-content .post-content h2,
.article-content .post-content h3,
.article-content .post-content h4,
.article-content .post-content h5,
.article-content .post-content h6,
.article-content .post-content strong,
.article-content .post-content b {
  font-weight: 700 !important;
}

/* Keep captions under article images, including aligned/float variants. */
.article-content .post-content figure {
  display: block;
}

.article-content .post-content figure figcaption,
.article-content .post-content .align-start + figcaption,
.article-content .post-content .align-end + figcaption {
  display: block;
  clear: both;
  margin-top: 0.5rem;
}

.article-content .post-content .align-start + figcaption,
.article-content .post-content .align-end + figcaption {
  width: 384px;
  max-width: 100%;
}

.article-content .post-content .align-start + figcaption {
  margin-right: auto;
}

.article-content .post-content .align-end + figcaption {
  margin-left: auto;
}

/* Keep article sub-headings below floated/aligned images. */
.article-content .post-content h3 {
  clear: both;
}

.listing-footer {
  clear: both;
  margin-top: 1.5rem;
}

.listing-footer-controls {
  display: block !important;
  min-height: 4rem;
  margin: 0;
}

.listing-footer-controls form {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.listing-footer-pagination {
  clear: both;
  display: block;
  position: relative !important;
  margin: 1rem 0 0 !important;
}

.listing-footer-pagination .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  position: relative !important;
  margin: 0;
}

/* Second header: center logo with 728x90 ad; theme.css .main-logo img uses 1rem vertical margins
   that pull the mark toward the bottom of the row. */
.second-header .main-logo .navbar-brand {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

.second-header .second-header-logo {
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: auto;
  /* Allow the wide wordmark asset to scale with the 728x90 ad (theme default 14.875rem is too narrow) */
  max-width: min(25rem, 100%);
  height: auto;
  max-height: 5.75rem;
  object-fit: contain;
  object-position: left center;
}

/* Leaderboard: IAB 728x90.
   A flex child with min-width:auto + img { width:100% } can resolve the % against the wide column
   (e.g. ~1100px) and ignore the link’s max-width. Cap the *slot* at 728px, then use intrinsic img width. */
.second-header .second-header-ad-col {
  min-width: 0;
}

.second-header .second-header-ad-slot {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 728px !important; /* cap here so percentage widths never see the full col-lg-8 */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.second-header a.second-header-ad-link {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  box-sizing: border-box;
}

/* No width:100% on the image — it forces upscaling to the (wrong) containing block in nested flex. */
.second-header img.second-header-ad-img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 90px !important;
  object-fit: contain;
  object-position: center center;
  box-sizing: border-box;
}