/* Unified phone navigation and safeguards for the site's varied page layouts. */
.mobile-menu-toggle, .mobile-submenu-toggle { display: none; }

@media (max-width: 768px) {
  html { overflow-x: clip; }
  body { min-width: 0; overflow-x: clip; }
  img, video, iframe { max-width: 100%; }
  .topbar { display: none !important; }
  .header, .site-header { position: relative; z-index: 200; }
  .header .header-inner, body.foundation-page .header .header-inner,
  .site-header .header-inner {
    position: relative; width: 100%; max-width: none; min-height: 62px; height: auto;
    padding: 9px 16px; display: flex; flex-wrap: nowrap; align-items: center;
    gap: 9px;
  }
  .header .brand, body.foundation-page .header .brand, .site-header .brand {
    display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px;
  }
  .header .brand .name, .header .brand-name, body.foundation-page .header .brand .name {
    display: block; max-width: none; overflow: visible; color: #b8332a;
    font-size: clamp(13px, 3.8vw, 17px); letter-spacing: 0; white-space: nowrap;
  }
  .header .brand .en, .header .brand-en, .site-header .brand small { display: none; }
  .header .brand .logo, .header .logo, .site-header .brand img {
    display: block; width: 40px; height: 40px; flex: 0 0 40px;
  }
  .header .brand .logo img { max-width: none; height: 100%; width: auto; }
  .site-header .brand strong { font-size: clamp(13px, 3.8vw, 17px); white-space: nowrap; }
  .header .donate, body.foundation-page .header .donate, .site-header .donate {
    order: 2; display: flex; flex: 0 0 auto; width: 85px; height: 36px;
    margin: 0; padding: 0; align-items: center; justify-content: center;
    font-size: 12px; white-space: nowrap;
  }
  .header .donate img { width: 100%; height: 100%; object-fit: contain; }
  .mobile-menu-toggle {
    order: 3; display: flex; flex: 0 0 40px; width: 40px; height: 40px;
    padding: 10px 8px; flex-direction: column; justify-content: space-around;
    border: 1px solid #e5dcd4; border-radius: 5px; background: #fff;
    color: #a7332a; cursor: pointer;
  }
  .mobile-menu-toggle span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }
  .header .nav.mobile-nav, body.foundation-page .header .nav.mobile-nav,
  .site-header .main-nav.mobile-nav {
    position: absolute; order: 4; top: 100%; left: 0; right: 0; z-index: 210;
    display: none !important; width: 100%; max-height: calc(100dvh - 62px);
    margin: 0; padding: 8px 16px 20px; flex-direction: column;
    align-items: stretch; justify-content: flex-start; gap: 0;
    overflow-x: hidden; overflow-y: auto; white-space: normal;
    background: #fff; box-shadow: 0 15px 25px #301e1e26;
  }
  .header.mobile-menu-open .nav.mobile-nav,
  body.foundation-page .header.mobile-menu-open .nav.mobile-nav,
  .site-header.mobile-menu-open .main-nav.mobile-nav { display: flex !important; }
  .mobile-nav > a, .mobile-nav > .nav-dropdown > a,
  body.foundation-page .header .mobile-nav > a,
  body.foundation-page .header .mobile-nav > .nav-dropdown > a,
  .site-header .mobile-nav > a {
    display: flex; align-items: center; width: 100%; min-height: 46px;
    height: auto; padding: 10px 8px; border-bottom: 1px solid #f0ebe5;
    color: #433a34; font-size: 15px; text-align: left;
  }
  .mobile-nav > .nav-dropdown { display: flex; flex-wrap: wrap; position: relative; align-items: center; width: 100%; }
  .mobile-nav > .nav-dropdown > a { flex: 1 1 auto; width: auto; }
  .mobile-nav > .nav-dropdown > a::after { display: none; }
  .mobile-submenu-toggle {
    display: block; width: 44px; height: 44px; flex: 0 0 44px;
    border: 0; border-bottom: 1px solid #f0ebe5; background: #fff;
    color: #a7332a; font-size: 22px; cursor: pointer;
  }
  .mobile-submenu-open > .mobile-submenu-toggle { transform: rotate(180deg); }
  .mobile-nav .nav-dropdown-menu, .mobile-nav .heritage-dropdown-menu {
    display: none !important; position: static; width: 100%; padding: 4px 0 8px 15px;
    flex: 0 0 100%; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: #faf8f5;
  }
  .mobile-nav .mobile-submenu-open > .nav-dropdown-menu,
  .mobile-nav .mobile-submenu-open > .heritage-dropdown-menu { display: block !important; }
  .mobile-nav .nav-dropdown-menu::before { display: none; }
  .mobile-nav .nav-dropdown-menu a,
  body.foundation-page .header .mobile-nav .nav-dropdown-menu a {
    display: block; height: auto; min-height: 40px; padding: 10px 12px;
    color: #665b53; font-size: 13px; white-space: normal;
  }
  .mobile-nav > a.active::after, .site-header .mobile-nav > a.active::after { display: none; }
  .footer-main, body.foundation-page .footer-main { max-width: 100%; }
  .footer-contact-inner, body.foundation-page .footer-contact-inner {
    flex-wrap: wrap; justify-content: flex-start; line-height: 1.8;
  }
  .footer-contact-inner .sep { display: none; }
  .footer-bottom-inner { line-height: 1.7; }
  .breadcrumb { flex-wrap: wrap; }
  /* The news page's late desktop grid rule otherwise leaves the list at 0px. */
  .news-layout .content-grid { grid-template-columns: minmax(0, 1fr); }
  .news-layout .sidebar { grid-column: 1; }
  .news-layout .news-main, .news-layout .latest-module { min-width: 0; }
  .news-layout .news-item { grid-template-columns: 62px minmax(0, 1fr); gap: 14px; }
  .news-layout .news-title, .news-layout .news-summary { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .header .header-inner, body.foundation-page .header .header-inner, .site-header .header-inner { padding: 8px 10px; gap: 5px; }
  .header .brand .logo, .header .logo, .site-header .brand img { width: 34px; height: 34px; flex-basis: 34px; }
  .header .donate, body.foundation-page .header .donate, .site-header .donate { width: 72px; height: 32px; }
  .mobile-menu-toggle { width: 36px; height: 36px; flex-basis: 36px; }
  .header .brand .name, .header .brand-name, body.foundation-page .header .brand .name,
  .site-header .brand strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}