/* Shared custom styles for PBC site */

/* Corporate radius system: structured surfaces with restrained controls. */
:where(div, section, article, aside, form, fieldset, table, img, input, select, textarea)[class*="rounded"] {
  border-radius: 0 !important;
}

:where(button, a)[class*="rounded"] {
  border-radius: 3px !important;
}

:where([role="dialog"], .modal-overlay > div, [data-member-menu-panel])[class*="rounded"] {
  border-radius: 4px !important;
}

/* Preserve true avatars, icons, progress dots, and compact status badges. */
:where(img, span)[class*="rounded-full"],
:where(div)[class*="rounded-full"][class*="h-"][class*="w-"] {
  border-radius: 9999px !important;
}

/* Corporate spacing system: compact, readable, and consistent. */
:where(section, main > div, main section > div)[class~="py-24"],
:where(section, main > div, main section > div)[class~="py-20"] {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

:where(section, main > div, main section > div)[class~="py-16"] {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

:where(section, main > div, main section > div)[class~="py-14"] {
  padding-top: 2.75rem !important;
  padding-bottom: 2.75rem !important;
}

:where(section, main > div, main section > div)[class~="py-12"] {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

:where(section, main > div, main section > div)[class~="py-10"] {
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

:where(section, main > div, main section > div)[class~="py-8"] {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

:where(div)[class~="mb-20"],
:where(div)[class~="mb-16"] {
  margin-bottom: 2.5rem !important;
}

:where(div)[class~="mb-12"],
:where(div)[class~="mb-10"] {
  margin-bottom: 2rem !important;
}

:where(div)[class~="gap-16"],
:where(div)[class~="gap-12"] {
  gap: 2.5rem !important;
}

:where(div)[class~="gap-10"],
:where(div)[class~="gap-8"] {
  gap: 2rem !important;
}

:where(article, aside, form, fieldset, .modal-overlay > div)[class~="p-12"],
:where(article, aside, form, fieldset, .modal-overlay > div)[class~="p-10"] {
  padding: 2rem !important;
}

:where(article, aside, form, fieldset, .modal-overlay > div)[class~="p-8"] {
  padding: 1.5rem !important;
}

/* Major hero and CTA bands retain slightly more breathing room. */
:where(section)[class*="bg-neutral800"][class~="py-24"],
:where(section)[class*="bg-neutral900"],
:where(section)[class*="bg-brandBlue"][class*="text-white"] {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media (max-width: 640px) {
  :where(section, main > div, main section > div)[class~="py-24"],
  :where(section, main > div, main section > div)[class~="py-20"],
  :where(section, main > div, main section > div)[class~="py-16"],
  :where(section, main > div, main section > div)[class~="py-14"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  :where(div)[class~="mb-20"],
  :where(div)[class~="mb-16"] {
    margin-bottom: 2rem !important;
  }
}

/* Page title - large, bold heading for main page title */
.page-title {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 36px;
  line-height: 40px;
  font-weight: 800;
  color: #000240; /* tertiary2-500 - matches active nav link */
  margin-bottom: 8px;
}

/* Section subheading */
.subheading {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  color: #171A1F; /* neutral-900 */
  margin-bottom: 8px;
}

.subheading.inline {
  display: inline-block;
  margin-bottom: 0;
}

/* Normal body text */
.text-normal {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 29px;
  font-weight: 400;
  color: #171A1F; /* neutral-900 */
  max-width: 75ch; /* Optimal reading width */
}

/* Small muted text for meta information */
.text-muted {
  font-size: 14px;
  line-height: 20px;
  color: #6B7280;
  margin-bottom: 24px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .page-title {
    font-size: 28px;
    line-height: 34px;
  }
  
  .subheading {
    font-size: 22px;
    line-height: 28px;
  }
  
  .text-normal {
    font-size: 16px;
    line-height: 26px;
  }
}