/*
 * Chemical Research Insights design system
 *
 * This is intentionally a small, shared visual layer. Page copy and each
 * category's factual content remain in their own templates; common hierarchy,
 * density and interaction rules live here.
 */
:root {
  --chem-navy: #093a78;
  --chem-navy-deep: #062b63;
  --chem-blue: #0c6284;
  --chem-green: #45b83f;
  --chem-ink: #153d70;
  --chem-copy: #4e6787;
  --chem-rule: #d8e3eb;
  --chem-mist: #f2f6fa;
  --chem-page: #ffffff;
  --chem-content: 1170px;
}

/* The central Chemical Research Insights hub has a section root, rather than
 * a page <main>. It keeps the same restrained hierarchy without inheriting
 * the collection-template selectors below. */
.chem-hub-ui {
  background: var(--chem-page) !important;
}

.chem-hub-ui .chem-hero {
  border-radius: 0 0 28px 28px !important;
  box-shadow: 0 12px 26px rgba(6, 42, 96, .12) !important;
}

.chem-hub-ui .chem-card,
.chem-hub-ui .chem-featured-story,
.chem-hub-ui .chem-cta-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.chem-hub-ui .chem-card-head {
  border-top: 2px solid var(--chem-navy) !important;
}

.chem-hub-ui .chem-coverage-grid {
  gap: 0 !important;
  border-top: 1px solid var(--chem-rule) !important;
  border-left: 1px solid var(--chem-rule) !important;
}

.chem-hub-ui .chem-coverage-item {
  border: 0 !important;
  border-right: 1px solid var(--chem-rule) !important;
  border-bottom: 1px solid var(--chem-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The report repository stays functional and information-dense, but loses the
 * stacked-card treatment so it reads as a professional research directory. */
.chem-repository-intro,
.chem-list-shell,
.chem-filter-bar,
.chem-repository-breadcrumb-bar {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.chem-list-shell {
  border-color: var(--chem-rule) !important;
}

.chem-repository-intro {
  border-top: 3px solid var(--chem-green) !important;
}

.chem-filter-bar {
  border-top: 2px solid var(--chem-navy) !important;
}

/* Shared page canvas and reading rhythm */
main.chem-ui {
  background: var(--chem-page) !important;
  color: var(--chem-ink);
}

main.chem-ui .container {
  max-width: var(--chem-content);
}

main.chem-ui :is(h1, h2, h3) {
  text-wrap: balance;
}

main.chem-ui :is(p, li) {
  color: var(--chem-copy);
}

/* Copy inside the dark hero needs its own accessible foreground colour.  The
 * page-level hero rules already set this colour, but the shared body-copy rule
 * above has a higher selector weight on some legacy category templates. */
main.chem-ui :is(
  .tax-hero, .adhhero, .water-hero, .spc-hero, .watersub-hero,
  .watercov-hero, .spcs-hero, .spcc-hero, .adhsub-hero,
  .adhtapes-hero, .category-report-hero
) :is(p, li) {
  color: #e7f2ff !important;
}

main.chem-ui a:focus-visible {
  outline: 3px solid rgba(69, 184, 63, .46);
  outline-offset: 3px;
}

/* The hero is the only intentionally dramatic component on a page. */
main.chem-ui :is(
  .tax-hero, .adhhero, .water-hero, .spc-hero, .watersub-hero,
  .watercov-hero, .spcs-hero, .spcc-hero, .adhsub-hero,
  .adhtapes-hero, .category-report-hero
) {
  border-radius: 0 0 28px 28px !important;
  box-shadow: 0 12px 26px rgba(6, 42, 96, .12) !important;
}

main.chem-ui :is(
  .tax-hero h1, .adhhero h1, .water-hero h1, .spc-hero h1,
  .watersub-hero h1, .watercov-hero h1, .spcs-hero h1,
  .spcc-hero h1, .adhsub-hero h1, .adhtapes-hero h1,
  .category-report-hero h1
) {
  letter-spacing: -.028em;
}

/* Specialty sub-category/function pages use their existing, server-rendered
 * breadcrumb shell. It is part of the hero rhythm, not a floating overlay. */
main.chem-ui :is(.spcs-breadcrumb-shell, .spcc-breadcrumb-shell) {
  position: relative !important;
  z-index: 1 !important;
  height: auto !important;
  margin: 0 !important;
  background: linear-gradient(120deg, #071f50, #0b467d 66%, #167867) !important;
}

main.chem-ui :is(.spcs-hero-breadcrumb, .spcc-hero-breadcrumb) {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 18px 40px 19px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
  color: #dceaff !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

main.chem-ui :is(.spcs-hero-breadcrumb a, .spcc-hero-breadcrumb a) {
  color: #dceaff !important;
  font-weight: 700;
  text-decoration: none !important;
}

main.chem-ui :is(.spcs-hero-breadcrumb span, .spcc-hero-breadcrumb span) {
  margin: 0 8px !important;
  color: #fff !important;
}

main.chem-ui :is(.spcs-hero, .spcc-hero) {
  margin: 0 !important;
  padding: 28px 40px 0 !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(120deg, #071f50, #0b467d 66%, #167867) !important;
}

main.chem-ui :is(.spcs-crumb, .spcc-crumb) {
  display: none !important;
}

/* Section heads use one restrained consulting-style rule and hierarchy. */
main.chem-ui :is(
  .tax-head, .adhsection-head, .adhfocus-head, .water-heading,
  .spc-heading, .watersub-heading, .watercov-heading, .spcs-heading,
  .spcc-heading, .adhsub-heading, .adhtapes-heading,
  .category-report-head, .packaging-section-head, .paints-section-head
) {
  margin-bottom: 20px !important;
  padding-top: 16px !important;
  border-top: 2px solid var(--chem-navy) !important;
}

main.chem-ui :is(
  .tax-head h2, .adhsection-head h2, .adhfocus-head h2, .water-heading h2,
  .spc-heading h2, .watersub-heading h2, .watercov-heading h2,
  .spcs-heading h2, .spcc-heading h2, .adhsub-heading h2,
  .adhtapes-heading h2, .packaging-section-head h2, .paints-section-head h2
) {
  color: var(--chem-navy) !important;
  font-size: clamp(1.55rem, 2vw, 1.9rem) !important;
  letter-spacing: -.022em;
}

main.chem-ui :is(
  .tax-head p, .adhsection-head p, .adhfocus-head p, .water-heading p,
  .spc-heading p, .watersub-heading p, .watercov-heading p,
  .spcs-heading p, .spcc-heading p, .adhsub-heading p,
  .adhtapes-heading p, .packaging-section-head p, .paints-section-head p
) {
  max-width: 800px;
  color: var(--chem-copy) !important;
  font-size: .95rem;
  line-height: 1.72;
}

/* Overview: text first, then a quiet factual sidebar. */
main.chem-ui :is(
  .watersub-overview, .watercov-copy, .spcs-overview-copy,
  .spcc-overview-copy, .adhsub-copy, .adhtapes-copy
) {
  padding: 0 26px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

main.chem-ui :is(
  .watersub-sidebar, .watercov-side, .spcs-apps, .spcc-requirements,
  .adhsub-side, .adhtapes-side
) {
  padding: 19px 18px 12px !important;
  border: 0 !important;
  border-top: 3px solid var(--chem-green) !important;
  background: var(--chem-mist) !important;
  color: var(--chem-ink) !important;
  box-shadow: none !important;
}

main.chem-ui :is(
  .watersub-sidebar h3, .watercov-side h3, .spcs-apps h3,
  .spcc-requirements h3, .adhsub-side h3, .adhtapes-side h3
) {
  color: var(--chem-blue) !important;
  font-size: 1rem !important;
}

main.chem-ui :is(
  .watersub-sidebar li, .watercov-side li, .spcs-apps li,
  .spcc-requirements li, .adhsub-side li, .adhtapes-side li
) {
  color: var(--chem-ink) !important;
  border-top-color: var(--chem-rule) !important;
  font-size: .82rem !important;
  line-height: 1.45;
}

/* Coverage and related links are an editorial directory—not a deck of cards. */
main.chem-ui :is(
  .tax-grid, .adhfocus-grid, .adhendgrid, .water-coverage, .water-end-grid,
  .spc-coverage, .spc-end-grid, .spc-functions, .packaging-coverage-grid,
  .packaging-end-grid, .paints-coverage-grid, .paints-end-grid
) {
  gap: 0 !important;
  border-top: 1px solid var(--chem-rule);
  border-left: 1px solid var(--chem-rule);
}

main.chem-ui :is(
  .tax-card, .adhfocus-panel, .adhendcard, .water-cover, .water-end,
  .spc-cover-card, .spc-end-card, .spc-function, .packaging-coverage-card,
  .packaging-end-card, .paints-coverage-card, .paints-end-card
) {
  min-height: 0 !important;
  padding: 22px 20px !important;
  border: 0 !important;
  border-right: 1px solid var(--chem-rule) !important;
  border-bottom: 1px solid var(--chem-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

main.chem-ui :is(
  .tax-card, .adhfocus-panel, .adhendcard, .water-cover, .water-end,
  .spc-cover-card, .spc-end-card, .spc-function, .packaging-coverage-card,
  .packaging-end-card, .paints-coverage-card, .paints-end-card
):hover {
  background: #f5faf8 !important;
  box-shadow: none !important;
  transform: none !important;
}

main.chem-ui :is(
  .tax-card h3, .tax-card strong, .adhfocus-panel h3, .adhendcard h3,
  .water-cover h3, .water-end h3, .spc-cover-card h3, .spc-end-card h3,
  .spc-function h3, .packaging-coverage-card h3, .packaging-end-card h3,
  .paints-coverage-card h3, .paints-end-card h3
) {
  color: var(--chem-navy) !important;
  font-size: 1rem !important;
  line-height: 1.35;
}

main.chem-ui :is(
  .tax-card p, .adhfocus-panel p, .adhendcard p, .water-cover p,
  .water-end p, .spc-cover-card p, .spc-end-card p, .spc-function p,
  .packaging-coverage-card p, .packaging-end-card p,
  .paints-coverage-card p, .paints-end-card p
) {
  font-size: .82rem !important;
  line-height: 1.6 !important;
}

main.chem-ui :is(
  .tax-card a, .adhfocus-panel a, .adhendcard a, .water-cover span,
  .water-end a, .spc-cover-card a, .spc-end-card a, .spc-function a,
  .packaging-coverage-card a, .packaging-end-card a,
  .paints-coverage-card a, .paints-end-card a
) {
  color: var(--chem-blue) !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Report rows remain the highest-density component but no longer look boxed. */
main.chem-ui :is(
  .category-report-section, .watersub-reports, .watercov-reports,
  .spcs-reports, .spcc-reports, .adhsub-reports, .adhtapes-reports
) {
  border: 0 !important;
  border-top: 2px solid var(--chem-navy) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

main.chem-ui :is(
  .category-report-item, .watersub-report, .watercov-report,
  .spcs-report, .spcc-report, .adhsub-report, .adhtapes-report
) {
  padding: 21px 0 !important;
  border-bottom-color: var(--chem-rule) !important;
}

main.chem-ui :is(
  .category-report-item h3, .watersub-report h3, .watercov-report h3,
  .spcs-report h3, .spcc-report h3, .adhsub-report h3, .adhtapes-report h3
) {
  font-size: clamp(1rem, 1.45vw, 1.13rem) !important;
  line-height: 1.42 !important;
}

main.chem-ui :is(
  .category-report-item p, .watersub-report p, .watercov-report p,
  .spcs-report p, .spcc-report p, .adhsub-report p, .adhtapes-report p
) {
  font-size: .86rem !important;
  line-height: 1.62 !important;
}

/* Related navigation becomes a light link directory. */
main.chem-ui :is(
  .watersub-related, .watercov-related, .spcs-related, .spcc-related,
  .adhsub-related, .adhtapes-related
) {
  gap: 0 !important;
  border-top: 1px solid var(--chem-rule) !important;
  border-left: 0 !important;
}

main.chem-ui :is(
  .watersub-related a, .watercov-related a, .spcs-related a,
  .spcc-related a, .adhsub-related a, .adhtapes-related a
) {
  min-height: 0 !important;
  padding: 16px 18px 16px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chem-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chem-navy) !important;
  font-size: .9rem !important;
  box-shadow: none !important;
}

main.chem-ui :is(
  .watersub-related a:nth-child(3n+2), .watersub-related a:nth-child(3n+3),
  .watercov-related a:nth-child(3n+2), .watercov-related a:nth-child(3n+3),
  .spcs-related a:nth-child(3n+2), .spcs-related a:nth-child(3n+3),
  .spcc-related a:nth-child(3n+2), .spcc-related a:nth-child(3n+3),
  .adhsub-related a:nth-child(3n+2), .adhsub-related a:nth-child(3n+3),
  .adhtapes-related a:nth-child(3n+2), .adhtapes-related a:nth-child(3n+3)
) {
  padding-left: 18px !important;
  border-left: 1px solid var(--chem-rule) !important;
}

main.chem-ui :is(
  .watersub-related i, .watercov-related i, .spcs-related i, .spcc-related i,
  .adhsub-related i, .adhtapes-related i
) {
  display: none !important;
}

/* Company and news content should read as a publication, not a dashboard. */
main.chem-ui :is(.spc-company-roster, .paints-company-directory, .packaging-company-grid) {
  gap: 0 !important;
  border-top: 1px solid var(--chem-rule) !important;
  border-left: 0 !important;
}

main.chem-ui :is(.spc-company-roster article, .packaging-company-card) {
  min-height: 0 !important;
  padding: 18px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chem-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* End-use pages use the same reading-first treatment as sub-categories. */
main.chem-ui .peu-hero {
  border-radius: 0 0 28px 28px !important;
  box-shadow: 0 12px 26px rgba(6, 42, 96, .12) !important;
}

main.chem-ui .peu-overview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

main.chem-ui .peu-copy {
  padding: 0 26px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}

main.chem-ui .peu-panel {
  padding: 19px 18px 12px !important;
  background: var(--chem-mist) !important;
  border: 0 !important;
  border-top: 3px solid var(--chem-green) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

main.chem-ui .peu-panel :is(h2, h3) {
  color: var(--chem-blue) !important;
  font-size: 1rem !important;
}

main.chem-ui .peu-panel li {
  color: var(--chem-ink) !important;
  border-top-color: var(--chem-rule) !important;
  font-size: .82rem !important;
}

main.chem-ui .peu-reports,
main.chem-ui .peu-report-list {
  background: transparent !important;
  border: 0 !important;
  border-top: 2px solid var(--chem-navy) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

main.chem-ui .peu-report {
  padding: 21px 0 !important;
  border-bottom-color: var(--chem-rule) !important;
}

main.chem-ui .peu-report h3 {
  font-size: clamp(1rem, 1.45vw, 1.13rem) !important;
  line-height: 1.42 !important;
}

main.chem-ui .peu-report p {
  font-size: .86rem !important;
  line-height: 1.62 !important;
}

main.chem-ui .peu-related-grid {
  gap: 0 !important;
  border-top: 1px solid var(--chem-rule) !important;
  border-left: 1px solid var(--chem-rule) !important;
}

main.chem-ui .peu-related-grid a {
  min-height: 0 !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-right: 1px solid var(--chem-rule) !important;
  border-bottom: 1px solid var(--chem-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chem-navy) !important;
  box-shadow: none !important;
}

main.chem-ui .peu-related-grid :is(i, .fa) {
  display: none !important;
}

@media (max-width: 900px) {
  main.chem-ui :is(
    .tax-grid, .adhfocus-grid, .adhendgrid, .water-coverage, .water-end-grid,
    .spc-coverage, .spc-end-grid, .spc-functions, .packaging-coverage-grid,
    .packaging-end-grid, .paints-coverage-grid, .paints-end-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main.chem-ui .peu-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  main.chem-ui :is(
    .tax-grid, .adhfocus-grid, .adhendgrid, .water-coverage, .water-end-grid,
    .spc-coverage, .spc-end-grid, .spc-functions, .packaging-coverage-grid,
    .packaging-end-grid, .paints-coverage-grid, .paints-end-grid,
    .watersub-related, .watercov-related, .spcs-related, .spcc-related,
    .adhsub-related, .adhtapes-related
  ) {
    grid-template-columns: 1fr !important;
  }

  main.chem-ui .peu-overview {
    grid-template-columns: 1fr !important;
  }

  main.chem-ui .peu-copy {
    padding-right: 0 !important;
  }

  main.chem-ui .peu-related-grid {
    grid-template-columns: 1fr !important;
  }

  main.chem-ui :is(
    .watersub-overview, .watercov-copy, .spcs-overview-copy,
    .spcc-overview-copy, .adhsub-copy, .adhtapes-copy
  ) {
    padding-right: 0 !important;
  }

  main.chem-ui :is(
    .watersub-related a, .watercov-related a, .spcs-related a,
    .spcc-related a, .adhsub-related a, .adhtapes-related a
  ) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}