/* Twelve Pathways responsive layer.
 *
 * The source design uses fixed inline styles (1200px max width containers,
 * many column CSS grids, large display type). Inline styles beat external CSS,
 * so every rule here is scoped to a mobile media query and uses !important to
 * override the inline values. Desktop is untouched. */

/* Mobile menu pieces are hidden on desktop and only revealed in the query. */
.twp-burger { display: none; }
.twp-mnav { display: none; }

@media (max-width: 820px) {

  /* Containers: keep the centered 1200px max width, just tighten the gutters. */
  [style*="max-width: 1200px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hide the dot grid logo marks on mobile. They read as stray bullets at small
     sizes; the wordmark carries the brand cleanly on its own. */
  [style*="grid-template-columns"][style*="width: 34px"],
  [style*="grid-template-columns"][style*="width: 30px"] { display: none !important; }

  /* Collapse content grids to a single stacked column (logos already hidden). */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Rows that sit apart on desktop wrap instead of overflowing. */
  [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    row-gap: 12px !important;
  }

  /* HEADER: one clean row, wordmark on the left, menu button on the right. */
  [style*="padding: 18px 32px"] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
  }
  /* Hide the desktop nav and the phone/button cluster; the menu holds them. */
  [style*="padding: 18px 32px"] > nav,
  [style*="padding: 18px 32px"] > div { display: none !important; }

  /* Hamburger button (built by site.js). */
  .twp-burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px; flex: 0 0 auto;
    padding: 0; background: transparent; border: 0; cursor: pointer;
  }
  .twp-burger span {
    display: block; width: 24px; height: 2px;
    background: #232d20; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .twp-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .twp-burger.open span:nth-child(2) { opacity: 0; }
  .twp-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Slide down menu panel. */
  .twp-mnav.open {
    display: flex; flex-direction: column;
    padding: 6px 22px 24px;
    background: #f4f1ea; border-top: 1px solid #e4dfd2;
  }
  .twp-mnav-link {
    padding: 15px 2px; font-size: 17px; font-weight: 600;
    color: #232d20; text-decoration: none;
    border-bottom: 1px solid #e7e2d6;
  }
  .twp-mnav-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .twp-mnav-phone { font-size: 17px; font-weight: 700; color: #232d20; text-decoration: none; text-align: center; padding: 4px; }
  .twp-mnav-book {
    background: #232d20; color: #f4f1ea; text-decoration: none; text-align: center;
    padding: 16px; font-weight: 600; font-size: 16px;
  }

  /* Announcement bar: keep one tidy centered line, drop the secondary group
     and the decorative dot so it does not strand at the edge. */
  [style*="padding: 11px 32px"] {
    justify-content: center !important;
    text-align: center !important;
    gap: 4px 14px !important;
  }
  [style*="padding: 11px 32px"] > div:last-child { display: none !important; }
  [style*="padding: 11px 32px"] span[style*="border-radius: 50%"] { display: none !important; }

  /* Hide the small decorative dot inside the rounded label pills (the
     "FERTILITY FOCUSED PRACTICE" style eyebrows); it reads as a stray bullet. */
  [style*="border-radius: 40px"] span[style*="border-radius: 50%"] { display: none !important; }

  /* Display type scales with the viewport so headlines never overflow. */
  h1[style] { font-size: clamp(30px, 8.5vw, 46px) !important; line-height: 1.08 !important; }
  h2[style] { font-size: clamp(24px, 6vw,  34px) !important; line-height: 1.15 !important; }

  /* Trim the largest section paddings so vertical rhythm stays sane. */
  [style*="padding: 96px 32px"],
  [style*="padding: 88px 32px"],
  [style*="padding: 80px 32px"],
  [style*="padding: 76px 32px"],
  [style*="padding: 72px 32px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Tall placeholder and quiz boxes do not need full desktop height on mobile. */
  [style*="height: 640px"] { height: auto !important; min-height: 320px !important; }

  /* Safety net: nothing should force horizontal scroll. */
  img, [style*="repeating-linear-gradient"] { max-width: 100% !important; }
}

@media (max-width: 480px) {
  [style*="max-width: 1200px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}