/*
 * Cross-template responsive layout guard.
 * Loaded after the legacy CSS bundles. These rules handle intrinsic sizing
 * instead of globally hiding horizontal overflow and clipping real content.
 */
:root { --mm-mobile-gutter: clamp(.625rem, 3vw, 1.25rem); }
:where(main, #main-content, section, article, .container, .content-section,
  .blog-container, .blog-content, .blog-body, .article-content, .guide-body,
  .home-blog-grid, .home-grid, .rest-left-col, .rest-right-col, .tool-shell,
  .mm-calc, .mm-result-card, .blog-grid, .blog-card, .field-group) {
  min-inline-size: 0;
}
:where(.blog-content, .blog-body, .article-content, .guide-body, .content-section,
  .rest-left-col, .rest-right-col, .mm-methodology) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,a) {
  overflow-wrap: anywhere;
}
:where(.blog-card, .home-blog-card, .home-card, .calc-card, .result-card,
  .content-section, .guide-body, .tool-shell, .menu-item, .rd-card) {
  min-inline-size: 0;
}
:where(main, .blog-content, .content-section, .article-content, .guide-body)
  :is(img,video,iframe,svg,canvas) { max-inline-size: 100%; }
:where(.blog-body, .article-content, .guide-body, .content-section, .mm-methodology) pre,
:where(.blog-body, .article-content, .guide-body, .content-section, .mm-methodology) .math-display {
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:where(.blog-body, .article-content, .guide-body, .content-section, .mm-methodology) pre code {
  white-space: pre;
  overflow-wrap: normal;
}
:where(.blog-body, .article-content, .guide-body, .content-section) :is(code, .formula-value, .math-inline) {
  overflow-wrap: anywhere;
}
:where(.blog-body, .article-content, .guide-body, .content-section) :is(table, .table-wrapper, .table-responsive) {
  max-inline-size: 100%;
}
:where(.blog-body, .article-content, .guide-body, .content-section) :is(th,td) {
  overflow-wrap: anywhere;
}
:where(.blog-container, .hero-grid-container, .home-blog-grid, .blog-grid, .calc-grid,
  .tool-grid, #rest-layout-wrapper) > * { min-width: 0; max-width: 100%; }
:where(.search-modal-card, .modal-result-item, .search-modal-header, .search-modal-footer,
  .mobile-link, .nav-dropdown-inner, .mega-feature, .mega-pop, .meal-item-row) {
  min-inline-size: 0;
}
:where(.modal-result-item, .mega-pop-t, .mobile-link, .blog-card-body, .blog-card-body p,
  .meal-item-row .mi-name) { overflow-wrap: anywhere; }

/* Navigation: the previous 190px nonshrinking logo plus two 44px actions
   already exceeded 320px after padding and gaps. */
@media (max-width: 1149px) {
  .header .header-inner {
    gap: clamp(.25rem, 1.2vw, .75rem) !important;
    padding-inline: max(var(--mm-mobile-gutter), env(safe-area-inset-left)) !important;
  }
  .header .logo { margin-right: 0 !important; }
  .mobile-nav {
    max-height: calc(100dvh - 64px) !important;
    overscroll-behavior: contain;
    overflow-y: auto !important;
    overflow-x: hidden;
  }
  .mobile-link { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .header .logo,
  .header .logo-img,
  .header .logo img {
    width: clamp(112px, 39vw, 168px) !important;
    min-width: 0 !important;
    max-width: clamp(112px, 39vw, 168px) !important;
    height: auto !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }
  .header .logo { flex: 0 1 auto !important; }
  .header .header-search-btn {
    margin-left: auto !important;
    min-width: 44px;
    min-height: 44px;
    justify-content: center !important;
    padding: .45rem !important;
  }
  .header .mobile-toggle { flex: 0 0 44px; min-width: 44px; min-height: 44px; }
  .search-modal-backdrop {
    padding: max(.75rem, env(safe-area-inset-top)) var(--mm-mobile-gutter) !important;
    align-items: flex-start !important;
  }
  .search-modal-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 2rem);
  }
  #modal-search-input { min-width: 0 !important; font-size: 16px !important; }
  .search-modal-header { gap: .4rem !important; padding: .7rem !important; }
  .search-modal-footer { flex-wrap: wrap; gap: .4rem .75rem !important; }
}
@media (max-width: 359px) {
  .header .header-inner { gap: .25rem !important; padding-inline: .5rem !important; }
  .header .logo, .header .logo-img, .header .logo img {
    width: clamp(100px, 35vw, 125px) !important;
    max-width: clamp(100px, 35vw, 125px) !important;
  }
  .hero-home.hero-database h1 { font-size: clamp(1.45rem, 7.8vw, 1.85rem); }
}

/* Intrinsic content sizing: preserve scrollable wide data, without making the
   whole document horizontally scroll or crushing numbers into tiny fonts. */
@media (max-width: 991px) {
  .blog-hero .hero-grid-container, .blog-hero .container,
  .hero-grid-container, .blog-container {
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .blog-body, .article-content, .guide-body, .content-section {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .blog-body :is(table, .comparison-table, .blog-table),
  .article-content :is(table, .comparison-table),
  .content-section :is(table, .comparison-table),
  .guide-body :is(table, .comparison-table) {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: normal !important;
  }
}
@media (max-width: 640px) {
  .blog-card-body, .home-blog-card-body, .home-cat-head-text,
  .mega-feature-head > div, .mi-info { min-width: 0 !important; }
  .home-blog-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .blog-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-actions, .home-blog-header, .blog-filters { min-width: 0; }
  .hero-actions :is(.btn,button,a), .blog-filters :is(input,select) {
    max-width: 100%;
    min-width: 0;
  }
  .rd-add-row, .meal-item-row { flex-wrap: wrap; min-width: 0; }
  .rd-add-btn { min-width: min(100%, 120px); }
  .mm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-formula-card dl { grid-template-columns: minmax(0, 1fr); }
  .tool-table-wrap, .diary-table-wrap, .calc-table-wrap {
    max-inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 359px) {
  .mm-metrics { grid-template-columns: minmax(0, 1fr); }
  .hero-stat, .home-card, .blog-card, .calc-card, .result-card { min-width: 0; }
  .home-blog-header :is(a,button) { max-width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .home-blog-card, .hero-stat, .home-card { transition-duration: .01ms !important; }
}

/* Give article cards a readable two-column tablet layout, then one column on phones. */
@media (min-width: 641px) and (max-width: 1100px) {
  .home-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 359px) {
  .ad-unit-container, #div-gpt-ad-1787056921187-0 { min-width: 0 !important; max-width: 100% !important; }
}