/* ============================================================
   CORPORATE CHROME for sustainability-summit.html
   ------------------------------------------------------------
   The summit page ships its own compiled Tailwind (site.css) and
   enhancements.css. This file adds ONLY the hermanntds.com header
   and footer components so the summit page wears the corporate
   chrome without loading css/main.css (which would collide).

   Rules are copied verbatim from css/main.css. Nothing here is a
   class that site.css / enhancements.css already define — the
   shared primitives (.btn, .btn-amber, .btn-sm, .container-site,
   .display, .h2, .lead) and every design token (--ink, --amber,
   --bone, --dim, --line, --nav-h: 72px) are already identical in
   both systems, so they are reused rather than redeclared.
   ============================================================ */

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: rgba(11, 18, 14, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav-inner {
  width: 100%;
  display: flex; align-items: center; gap: 2rem;
}
.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 34px; width: auto; }
.nav-links {
  display: flex; gap: 1.9rem;
  margin-left: auto;
}
.nav-links a {
  text-decoration: none;
  font-weight: 560;
  font-size: 0.97rem;
  color: var(--bone);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-links a:hover { opacity: 1; color: var(--amber); }
.nav-links a[aria-current="page"] { color: var(--amber); opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: 1.1rem; }
.nav-phone {
  font-family: var(--font-mono); font-size: 0.9rem;
  text-decoration: none; color: var(--dim);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--bone); }

/* Six nav items (Sustainability Summit added) need more room between the
   1024px breakpoint and the full container: drop the phone number and
   tighten the gap so the bar never overflows. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1199px) {
  .nav-phone { display: none; }
  .nav-links { gap: 1.35rem; }
}

.nav-burger {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--line);
  border-radius: 999px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--bone);
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11, 18, 14, 0.97);
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: column; justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 6.4vw, 2.3rem);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0;
  color: var(--bone);
  line-height: 1.05;
}
.mobile-menu a:hover { color: var(--amber); }
.mobile-menu a[aria-current="page"] { color: var(--amber); }
.mobile-menu .mobile-contact { margin-top: 2rem; font-family: var(--font-mono); font-size: 1rem; color: var(--dim); }
.mobile-menu .mobile-contact a { font-family: var(--font-mono); font-size: 1.05rem; text-transform: none; color: var(--amber); padding: 0; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--line-soft); padding-block: 3.5rem 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr 5fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer-brand img { height: 42px; width: auto; }
.footer-brand p { color: var(--dim); font-size: 0.95rem; margin-top: 1.1rem; max-width: 34ch; }
.footer h4 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 1rem;
}
.footer-links { display: grid; gap: 0.55rem; }
.footer-links a { color: var(--bone); text-decoration: none; font-size: 0.98rem; opacity: 0.88; }
.footer-links a:hover { color: var(--amber); opacity: 1; }
.footer-locs { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.footer-locs li { font-family: var(--font-mono); font-size: 0.82rem; color: var(--dim); line-height: 1.55; }
.footer-locs strong { color: var(--bone); font-weight: 500; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  color: var(--dim); font-size: 0.88rem;
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a { color: var(--dim); text-decoration: none; }
.footer-legal a:hover { color: var(--bone); }
.footer-social { display: flex; gap: 0.9rem; }
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--dim);
  transition: all 0.2s ease;
}
.footer-social a:hover { color: var(--btn-ink); background: var(--amber); border-color: var(--amber); }

/* ---------- RESPONSIVE (mirrors css/main.css) ---------- */
@media (max-width: 1023px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ---- summit section bar (sticks under the 72px corporate nav) ---- */
.summit-bar{position:sticky;top:var(--nav-h,72px);z-index:40;background:rgba(11,18,14,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(242,239,230,.14)}
.summit-bar-in{max-width:var(--container,1240px);margin:0 auto;padding:.55rem 2.5rem;
  display:flex;align-items:center;gap:1.4rem}
.summit-bar-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);white-space:nowrap}
.summit-bar ul{list-style:none;display:flex;gap:1.35rem;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none}
.summit-bar ul::-webkit-scrollbar{display:none}
.summit-bar a{color:var(--dim);text-decoration:none;font-size:.86rem;white-space:nowrap;
  padding:.2rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.summit-bar a:hover,.summit-bar a:focus-visible{color:var(--bone);border-color:var(--amber)}
@media (max-width:900px){ .summit-bar-tag{display:none} .summit-bar-in{padding:.5rem 1.5rem} }

/* Section targets must clear BOTH bars now, not just the nav. */
#about,#speakers,#agenda,#tickets,#sponsors,#venue,#contact{scroll-margin-top:38px}

/* Pre-existing on the standalone page: tooltip max-widths use 100vw, which counts
   the scrollbar, giving 8px of horizontal scroll between 1024 and 1199px. */
[id^="agenda-bio-"],[id^="bio-"]{max-width:calc(100% - 1.5rem)}