@media (max-width: 768px) {
  .site-header {
    padding: 1.5rem 1rem;
  }

  .title-cell .tagline {
    font-size: 1rem;
  }

  /* === (01) Index Page ===
     Sections: Header, Tagline, Navigation
  ---------------------------------------------------------- */
  .logo-cell img {
    max-width: 5rem; /* 80px */
  }

  .title-cell h1 {
    font-size: 1.5rem; /* 24px */
  }

  .title-cell .tagline {
    font-size: 1rem; /* 16px */
  }
/* removed reference to nav code */

/*removed .submenu references to the navitgttion menu */

  footer {
    font-size: 0.875rem;
    padding: 1rem 1.25rem;
    text-align: center;
  }

  /* === (02) Menu Page ===
     Sections: Menu Layout, Item Grid
  ---------------------------------------------------------- */
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .menu-card {
    margin-bottom: 2rem;
    text-align: center;
  }

  .menu-card h3 {
    font-size: 1.25rem;
  }

  .menu-card p {
    font-size: 1rem;
  }

  /* === (03) Our Mission ===
     Sections: Core Values, Impact Blocks
  ---------------------------------------------------------- */
  .mission-grid {
    flex-direction: column;
    gap: 2rem;
  }

  .mission-block {
    padding: 1rem;
  }

  .mission-block h3 {
    font-size: 1.25rem;
  }

  .responsive-img {
    max-width: 100%;
    height: auto;
  }


  /* === (04) Founding Circle ===
     Sections: Founders Grid, Supporter Lists
  ---------------------------------------------------------- */
  .founder-grid {
    grid-template-columns: 1fr;
  }

  .supporter-list {
    text-align: center;
  }

  /* === (05) Healing in Motion ===
     Sections: Timeline, Movement Cards
  ---------------------------------------------------------- */
  .motion-timeline {
    flex-direction: column;
    gap: 2rem;
  }

  .motion-card {
    margin-bottom: 1.5rem;
  }

  /* === (06) Trauma-Informed Design ===
     Sections: Design Pillars, Accessibility Notes
  ---------------------------------------------------------- */
  .design-pillars {
    flex-direction: column;
    gap: 2rem;
  }

  .pillar-card {
    padding: 1rem;
  }

  .accessibility-note {
    font-size: 0.95rem;
    text-align: left;
  }

  /* === (07) How You Can Help ===
     Sections: Action Cards, Donation Info
  ---------------------------------------------------------- */
  .help-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .action-card {
    margin-bottom: 2rem;
  }

  .donation-box {
    text-align: center;
  }

  /* === (08) Resilience Market ===
     Sections: Product Grids & CTA Scaling
  ---------------------------------------------------------- */
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card {
    margin-bottom: 2rem;
  }

  .product-card .cta {
    width: 100%;
    font-size: 1rem;
    padding: 10px 16px;
  }

  .featured-collection,
  .resilience-display,
  .sip-with-purpose,
  .pages-of-healing,
  .voices-on-the-wall {
    padding: 30px 20px;
    text-align: center;
  }

  .featured-collection h2,
  .resilience-display h2,
  .sip-with-purpose h2,
  .pages-of-healing h2,
  .voices-on-the-wall h2 {
    font-size: 1.5rem;
  }

  .featured-collection p,
  .resilience-display p,
  .sip-with-purpose p,
  .pages-of-healing p,
  .voices-on-the-wall p {
    font-size: 1rem;
  }

  /* 📢 Social Sharing (Global) */
  .social-share {
  padding: 1.25rem;
  text-align: center;
  }

  .share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  }

  .share-buttons a {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
  border-radius: 6px;
  background-color: var(--mint-healing);
  color: var(--deep-plum);
  text-decoration: none;
  transition: background-color 0.3s ease;
  }

  .share-buttons a:hover {
  background-color: var(--resilience-teal);
  color: var(--dignity-cream);
  }

}

/* hide submenus by default */
.nav-container .submenu { display:none; visibility:hidden; opacity:0; }

/* desktop only: show on hover/focus */
@media (hover: hover) and (pointer: fine) {
  .nav-container li:hover > .submenu,
  .nav-container li:focus-within > .submenu {
    display:block; visibility:visible; opacity:1;
  }
}

/* mobile: show only when parent li is .open */
@media (max-width:768px){
  .nav-container li.open > .submenu {
    display:block; visibility:visible; opacity:1;
  }
}