/* Responsive layout for phones and tablets. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
  table { max-width: 100%; }

@media (max-width: 767px) {
  body { font-size: 16px; }
  .container, .wrap, .header-inner { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .nav-main .container { padding: 0 !important; }
  .nav-main ul, .nav-main .nav, ul.nav { display: flex !important; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0; padding: 0; }
  .nav-main li { flex: 1 1 auto; text-align: center; }
  .nav-main li a { display: block; padding: 12px 8px; font-size: 14px; }
  .page-title { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.15; word-break: normal; }
  .page-description { font-size: 18px !important; line-height: 1.35; }
  .content.row, .row { margin-left: 0 !important; margin-right: 0 !important; }
  .main, .content, .col-sm-12, .col-md-8, .col-md-4, .sidebar { width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .timeline.two-col { display: block !important; }
  article.post, .entry-inner { width: 100% !important; }
  .entry-thumbnail img, .entry-content img { width: 100%; height: auto; }
  .entry-author img.avatar { width: 32px !important; height: 32px !important; max-width: 32px !important; object-fit: cover; vertical-align: middle; }
  .entry-title, h1, h2, h3 { overflow-wrap: anywhere; }
  .entry-title { font-size: 25px !important; line-height: 1.2; }
  .entry-content { font-size: 16px; line-height: 1.6; }
  .entry-content pre, pre { max-width: 100%; overflow-x: auto; }
  input, select, textarea, button { max-width: 100%; font-size: 16px; }
  .banner.cover { height: auto !important; min-height: 250px !important; padding-bottom: 32px; overflow: visible !important; }
  .banner.cover .header-inner { height: auto !important; min-height: 0 !important; }
  .article-header-title { display: block; padding-top: 58px !important; padding-bottom: 10px; }
  .article-header-title h1 { color: #fff; font-size: clamp(25px, 7vw, 36px) !important; line-height: 1.15; margin: 0; text-align: center; }
  .article-main-column article > header .entry-meta { margin-top: 12px; }
  .footer, footer { height: auto !important; }

  /* Article: text first, article menu below, both full width. */
  .article-layout { display: flex; flex-direction: column; gap: 24px; width: 100%; }
  .article-main-column, .article-sidebar { width: 100%; max-width: none; flex: none; }
  .article-sidebar { position: static; order: 2; }
  .article-sidebar > div { width: 100%; }
  .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table { min-width: 620px; width: max-content; max-width: none; }
}

/* Desktop article layout: content with a sticky sidebar on the right. */
@media (min-width: 768px) {
  .article-layout { display: flex; gap: 30px; align-items: flex-start; width: 100%; }
  .article-main-column { flex: 1 1 auto; min-width: 0; }
  .article-sidebar { flex: 0 0 240px; max-width: 240px; position: sticky; top: 78px; align-self: flex-start; }
  .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; }
  .table-scroll table { min-width: 620px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .container, .wrap { width: 100% !important; max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; }
}