/* Shared header nav, mobile menu, and layout updates (Nov 5, 2026).
   Loaded after each page's own styles so these rules take priority. */

/* Intro paragraphs run the full content width */
.intro { max-width: none; }
.who-box, .who-list { max-width: none; }
.ap-section .body-text { max-width: none; }

/* Header button and menu */
.header-inner .btn { white-space: nowrap; }
.btn-short { display: none; }
.menu-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid #d8d2c6; border-radius: 6px;
  background: var(--white); cursor: pointer; padding: 0; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; }
.read-more { display: none; }

@media (max-width: 720px) {
  .nav { gap: 10px; }
  .nav-link { display: none; }
  .subnav { display: none !important; }
  .menu-toggle { display: inline-flex; }
  .btn-full { display: none; }
  .btn-short { display: inline; }
  .header-inner .btn { padding: 10px 14px; font-size: 13px; }
  .mobile-menu.open { display: block; border-top: 1px solid rgba(0,0,0,0.06); background: var(--white); }
  .mobile-menu a { display: block; padding: 14px 20px; color: var(--charcoal); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,0.05); }
  .mobile-menu a[aria-current="page"] { color: var(--red); }

  /* Assess / Balance / Build: first sentence shown, rest behind "Read more" */
  .pillar .more { display: none; }
  .pillar.open .more { display: inline; }
  .read-more { display: inline-block; margin-top: 10px; background: none; border: none; padding: 0; color: var(--red); font-weight: 700; font-size: 14px; font-family: var(--font); cursor: pointer; }

  /* Approach: 6 principles in two rows of three */
  .chips { gap: 8px; }
  .chips span { flex: 1 1 calc(33.333% - 6px); text-align: center; font-size: 13px; padding: 8px 4px; }
}