/*
 * Unified public page layout and compact secondary navigation.
 * The same content edges are used by main sections, breadcrumbs and public UX pages.
 * An explicit, wrapping list prevents the previously crowded eleven-tab rail
 * from shrinking text into its neighbours. This file loads after legacy CSS.
 */
:root {
  --page-gutter: clamp(16px, 2.65vw, 32px);
}
body .container,
body .site-header .container {
  width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
body :is(.reading-width, .article-reading) {
  width: min(var(--reading), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
body .ux-page {
  box-sizing: border-box;
  width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding: clamp(30px, 4vw, 52px) 0 clamp(52px, 6vw, 80px);
}
body .ux-page.ux-reading {
  width: min(920px, calc(100% - (var(--page-gutter) * 2)));
}
body #main :is(.container, .ux-page) > * { min-width: 0; }
body #main :is(.ux-page, .container) :is(img, video, iframe) { max-width: 100%; }
body #main :is(.ux-page, .container) :is(pre, table) { max-width: 100%; }
body #main :is(.ux-page, .container) :is(h1, h2, h3) { overflow-wrap: break-word; }
body .ux-breadcrumbs { padding-block: 18px 12px; }

/* Each quick link has its own hit area. No shrinking, text collision or clipped labels. */
.public-explore-strip {
  background: #f3f8fa;
  border-bottom: 1px solid #d3e1e8;
}
.public-explore-strip nav.public-explore-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-block: 11px;
  overflow: visible;
  white-space: normal;
  scrollbar-width: auto;
}
.public-explore-strip .public-explore-label {
  flex: 0 0 auto;
  margin-right: 2px;
  color: #526b7c;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
}
.public-explore-strip .public-explore-links {
  display: flex;
  flex: 1 1 530px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.public-explore-strip .public-explore-links a,
.public-explore-strip a.public-explore-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #294d64;
  background: transparent;
  font-size: .83rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.public-explore-strip .public-explore-links a:hover,
.public-explore-strip a.public-explore-all:hover {
  background: #fff;
  border-color: #b8cdd8;
}
.public-explore-strip .public-explore-links a[aria-current="page"],
.public-explore-strip a.public-explore-all[aria-current="page"] {
  color: #073b6a;
  background: #fff;
  border-color: #afc8d6;
  box-shadow: inset 0 -2px 0 #2f6f3e;
}
.public-explore-strip a.public-explore-all {
  flex: 0 0 auto;
  margin-left: auto;
  color: #073b6a;
  font-weight: 700;
}
.public-explore-strip a.public-explore-all span {
  margin-left: 7px;
  font-size: .95rem;
}
.public-explore-strip a:focus-visible {
  outline: 3px solid #2f6f3e;
  outline-offset: 2px;
}

/* Keep main navigation consistent across legacy 820/1150px breakpoints. */
.site-header .header-actions { flex: 0 0 auto; }
.site-header .main-nav a { flex: 0 0 auto; }
.site-header .nav-mobile-book { display: none; }
@media (min-width: 1181px) {
  body .site-header .header-inner { flex-wrap: nowrap; gap: clamp(10px, 1.2vw, 18px); }
  body .site-header .main-nav { gap: clamp(10px, 1.25vw, 20px); }
  body .site-header .main-nav a { font-size: .82rem; }
}
@media (max-width: 1180px) {
  body .site-header .header-inner {
    flex-wrap: nowrap;
    height: 76px;
    min-height: 76px;
    padding-block: 0;
  }
  body .site-header .main-nav.open {
    display: flex;
    position: absolute;
    z-index: 12;
    top: 100%;
    left: var(--page-gutter);
    right: var(--page-gutter);
    width: auto;
    max-height: calc(100dvh - 90px);
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #fff;
    border: 1px solid #cedfe8;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 14px 36px #073b6a20;
  }
  body .site-header .main-nav.open a {
    min-height: 44px;
    padding: 10px 12px;
    white-space: normal;
  }
  body .site-header .menu-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 72px; }
}
@media (max-width: 740px) {
  .public-explore-strip nav.public-explore-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 12px;
  }
  .public-explore-strip .public-explore-label { display: none; }
  .public-explore-strip .public-explore-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .public-explore-strip .public-explore-links a {
    flex: initial;
    padding-inline: 9px;
    background: #fff;
    border-color: #dae6ed;
  }
  .public-explore-strip a.public-explore-all {
    justify-self: end;
    min-height: 34px;
    margin-left: 0;
    padding: 5px 9px;
  }
}
@media (max-width: 600px) {
  body .site-header .header-inner { height: 72px; min-height: 72px; }
  body .site-header .brand.brand-approved img { max-width: 100%; }
}
@media (max-width: 440px) {
  /* The legacy 380px rule uses !important to force a Support pill back into
     the header. Override that only for Book time: its link moves into Menu. */
  body .site-header .header-actions a.header-book-button { display: none !important; }
  body .site-header .header-actions a.header-support-link,
  body .site-header .header-actions a.icon-button { display: none !important; }
  body .site-header .header-actions { min-width: 0; }
  body .site-header .main-nav.open a.nav-mobile-book { display: block; }
}
@media (max-width: 360px) {
  body .site-header .brand.brand-approved img { width: 178px !important; }
  body .site-header .menu-button { min-width: 62px; }
}
@media print {
  .public-explore-strip { display: none; }
}

/* Current public search uses search-page-form, not the retired .search-form layout. */
.site-header .nav-mobile-search { display: none; }
@media (max-width: 1180px) {
  .site-header .main-nav.open a.nav-mobile-search { display: block; }
}
.page-search .page-intro {
  padding-block: clamp(42px, 5vw, 70px);
  background: linear-gradient(180deg, #f3f8fa, #f8fbfc);
}
.page-search .page-intro > .container.search-intro-container,
.page-search .search-results-section > .container.search-results-container {
  /* These sections share the site's 1180px container and responsive gutters. */
  max-width: none;
  margin-inline: auto;
}
.page-search .page-intro h1 {
  margin: 12px 0 18px;
  max-width: 920px;
  font: 500 clamp(2.4rem, 5.4vw, 4.6rem) / 1.08 var(--serif);
  letter-spacing: -.035em;
  color: #073b6a;
}
.page-search .page-intro .lead {
  max-width: 72ch;
  margin: 0;
  color: #526b7c;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.7;
}
.page-search .search-page-form {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 230px) auto;
  align-items: end;
  gap: 12px;
  width: 100%;
  /* Do not cap at 1100px: the header, search panel, filters and results
     all use the same full-width site container, including at wide viewports. */
  max-width: none;
  margin: 28px 0 14px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid #cedfe8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px #073b6a0d;
}
.page-search .search-page-form .search-control { display: grid; gap: 7px; min-width: 0; }
.page-search .search-page-form label {
  color: #294d64;
  font-size: .87rem;
  line-height: 1.4;
  font-weight: 700;
}
.page-search .search-page-form :is(input,select) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #a9c1ce;
  border-radius: 9px;
  background: #fff;
  color: #203c4f;
  font: inherit;
  font-size: 1rem;
}
.page-search .search-page-form input[type=search] { appearance: none; }
.page-search .search-page-form .search-submit {
  min-width: 116px;
  min-height: 50px;
  border-radius: 9px;
  padding-inline: 20px;
}
.page-search .search-page-form :is(input,select,button):focus-visible {
  outline: 3px solid #2f6f3e;
  outline-offset: 2px;
}
.page-search .page-intro .form-help {
  margin: 0 0 20px;
  color: #526b7c;
  font-size: .85rem;
  line-height: 1.65;
}
.page-search .topic-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 14px 0 0;
}
.page-search .topic-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid #c4d7e1;
  border-radius: 999px;
  color: #294d64;
  background: #fff;
  font-size: .84rem;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.page-search .topic-pills a:hover,
.page-search .topic-pills a[aria-current=page] { color: #073b6a; border-color: #2f6f3e; background: #f2f8f2; }
.page-search .archive-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 26px;
}
.page-search .archive-label h2 { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 740px) {
  .page-search .search-page-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }
  .page-search .search-page-form .search-submit { width: 100%; }
  .page-search .page-intro h1 { font-size: clamp(2.25rem, 8vw, 3.3rem); }
}
@media (max-width: 360px) {
  .page-search .search-page-form { padding: 12px; }
  .page-search .search-page-form :is(input,select) { padding: 10px; font-size: 16px; }
}

/* Site-wide content-frame reconciliation — all major public layouts.
 * Route-specific CSS may load within the body after these rules, so selectors
 * intentionally outrank legacy one-class width declarations without !important.
 * Editorial reading columns remain deliberately narrower. */
body #main .desk.desk-public,
body #main .booking-shell {
  box-sizing: border-box;
  width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
}
body #main .booking-shell { padding-inline: 0; }
body #main .container.opp-shell {
  max-width: none;
  padding-inline: 0;
}
body #main .founder-related-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
body #main .founder-related-actions a {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
@media (max-width: 520px) {
  body #main .founder-related-actions a { flex: 1 1 auto; }
}

/* Sponsored features have three filters, not the six-column opportunities grid.
   Keep the search control on the shared line instead of leaving phantom columns. */
body #main .desk-filter.desk-filter-sponsored {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(165px,230px) auto;
  gap: 12px;
  align-items: end;
}
body #main .desk-filter.desk-filter-sponsored > * { min-width: 0; }
body #main .desk-filter.desk-filter-sponsored button { min-height: 45px; }
@media (max-width: 740px) {
  body #main .desk-filter.desk-filter-sponsored {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  body #main .desk-filter.desk-filter-sponsored > label:first-child { grid-column: 1 / -1; }
  body #main .desk-filter.desk-filter-sponsored button { width: 100%; }
}
@media (max-width: 520px) {
  body #main .desk-filter.desk-filter-sponsored {
    grid-template-columns: minmax(0,1fr);
  }
  body #main .desk-filter.desk-filter-sponsored > label:first-child { grid-column: auto; }
}