/* The open-roles pages: /bloom-with-us/open-roles and each role's page
   (src/lib/open-roles-page.js, docs/open-roles.md). Linked from
   src/pages/bloom-with-us/open-roles*.astro. Every rule is scoped to an
   open-role class. Site tokens only; text colours keep at least 4.5:1 on
   their backgrounds (navy and ink on cream and paper; the coral button
   uses the site's dark label). */

.open-roles-page a:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.open-roles-header .page-header-copy {
  width: auto;
  max-width: 46rem;
  margin-left: 0;
}

.open-roles-header h1 {
  color: var(--navy);
  overflow-wrap: anywhere;
}

.open-roles-header .page-intro {
  color: var(--ink);
}

.open-roles-body {
  background: var(--paper);
}

.open-roles-items {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.open-role-card {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--coral);
  border-radius: 0.5rem 0.5rem 1.25rem 1.25rem;
  background: var(--white);
}

.open-role-card h2,
.open-role__section h2 {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.open-role-card__summary {
  max-width: 44rem;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.65;
}

.open-role-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
}

.open-role-facts div {
  display: grid;
  gap: 0.1rem;
}

.open-role-facts dt {
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.open-role-facts dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

.open-role-facts--header {
  margin-top: 1.25rem;
}

.open-role-card__action {
  margin: 0.25rem 0 0;
}

.open-roles-state {
  max-width: 42rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
}

.open-roles-state--error {
  display: grid;
  gap: 0.85rem;
  border-color: var(--coral-dark);
}

.open-roles-state--error p {
  margin: 0;
}

.open-roles-aside,
.open-roles-back,
.open-roles-actions {
  margin-top: 1.75rem;
  color: var(--ink);
  line-height: 1.6;
}

.open-roles-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.open-roles-aside a,
.open-roles-back a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.open-role__body {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 48rem;
}

.open-role__section {
  display: grid;
  gap: 0.85rem;
}

.open-role__section p,
.open-role__section li {
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.7;
}

.open-role__section ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.25rem;
}

.open-role__section li::marker {
  color: var(--coral-dark);
}

.open-role-apply {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.open-role-apply p {
  color: var(--muted);
  line-height: 1.5;
}

.open-role-closed {
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--navy);
  border-radius: 0.5rem;
  background: var(--cream);
  color: var(--navy);
  font-size: 1.05rem;
}

@media (max-width: 700px) {
  .open-role-facts {
    display: grid;
    gap: 0.75rem;
  }

  .open-role-card__action .button,
  .open-role-apply .button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}