/* Sitewide phone + small-laptop. Loaded after page <style>, so it wins on equal selectors. */

html, body {
  max-width: 100%;
  overflow-x: clip;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
}

.article-layout,
.article-content,
.article-header,
.toc-sidebar,
.data-card,
.data-grid,
.table-wrapper,
.article-table-wrap,
.related-grid,
.cta-section,
.page-header,
.content-section {
  min-width: 0;
  max-width: 100%;
}

.article-content,
.page-header,
.content-section {
  overflow-wrap: break-word;
}

.breadcrumb,
.breadcrumb ol {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.article-header-meta,
.article-share {
  flex-wrap: wrap;
}

.table-wrapper,
.article-table-wrap,
.article-content table,
table.baro-table,
table.article-table {
  max-width: 100%;
}

.logo-img {
  max-width: min(240px, calc(100vw - 88px));
}

.mobile-menu-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.mobile-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
}

.legal-nav {
  width: 100%;
}

.legal-nav a {
  max-width: 100%;
}

.legal-content,
.legal-content a {
  overflow-wrap: anywhere;
}

@media (max-width: 1360px) {
  .navbar-actions .btn-primary {
    display: none !important;
  }
}

@media (max-width: 1120px) {
  .navbar-links,
  .navbar-actions {
    display: none !important;
  }
  .mobile-menu-btn {
    display: flex !important;
    position: relative;
    z-index: 203;
    background: rgba(250, 250, 248, 0.94);
    border: 1px solid var(--border, rgba(15, 15, 14, 0.08));
    border-radius: 10px;
  }
  .mobile-menu-btn span {
    background: var(--navy, #001F54);
  }
  .article-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .toc-sidebar {
    display: none !important;
  }
  .toc-mobile {
    display: block !important;
    padding: 16px 16px;
  }
  .toc-mobile .toc-box {
    background: var(--bg-off, #F4F3F0);
    border-radius: 12px;
    padding: 16px 18px;
  }
}

@media (max-width: 900px) {
  .navbar {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .article-header,
  .article-content,
  .article-share,
  .related-section,
  .cta-section,
  .faq-section,
  .footer,
  .page-header,
  .content-section,
  .breadcrumb,
  .toc-mobile {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
  .article-content {
    max-width: 100% !important;
  }
  .data-grid,
  .data-grid-4,
  .related-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }
  .cta-section > div,
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cta-section .btn-primary,
  .cta-section .btn-secondary,
  .hero-actions a,
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .faq-item.open .faq-answer {
    max-height: none !important;
  }
  .faq-question {
    min-height: 44px;
  }
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .table-wrapper,
  .article-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .article-content .table-wrapper table,
  .article-content table,
  table.baro-table,
  table.article-table {
    min-width: 0 !important;
  }
  .legal-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .legal-content h1 {
    font-size: clamp(26px, 8vw, 32px) !important;
  }
  .nav-back {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .article-header h1,
  .page-header h1,
  .hero h1 {
    font-size: clamp(22px, 8vw, 28px) !important;
    line-height: 1.15;
  }
  .geo-block,
  .highlight-box,
  .callout {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}