/* Indigo Group: styles for the SEO additions (FAQ blocks, guide articles, heading fixes).
   Built only from the site's own colour and font variables so everything matches. */

/* A job title promoted to a real <h1> keeps exactly the look it had before. */
h1:where(.seo-h1) { font: inherit; letter-spacing: inherit; margin: 0; }

/* The newsroom header, switched back on with corrected copy. */
.section.header.seo-show { display: block; }

/* Contact details under the Contact Us heading */
.seo-contact { margin-top: 2.5em; max-width: 38ch; }
.seo-contact p { margin: .8em 0 0; line-height: 1.5; }
.seo-contact a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* FAQ blocks */
.seo-faq { color: var(--colors--neutral-600); }
.seo-faq-head { display: flex; flex-direction: column; gap: 1em; max-width: 55ch; margin-bottom: 3em; }
.seo-faq-list { border-top: 1px solid var(--colors--neutral-300); }
.seo-faq-item { border-bottom: 1px solid var(--colors--neutral-300); }
.seo-faq-item summary {
  display: grid; grid-template-columns: 4.5em 1fr 1.5em; align-items: baseline; gap: 1em;
  padding: 1.6em 0; cursor: pointer; list-style: none;
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary:focus-visible { outline: 2px solid var(--colors--neutral-600); outline-offset: 4px; }
.seo-faq-q {
  margin: 0; font-family: var(--primary); font-weight: 400; letter-spacing: -.03em; line-height: 1.2;
  font-size: var(--font-size--large);
}
.seo-faq-toggle { font-family: var(--mono); font-size: var(--font-size--large); line-height: 1; justify-self: end; }
.seo-faq-toggle::before { content: "+"; }
.seo-faq-item[open] .seo-faq-toggle::before { content: "\2212"; }
.seo-faq-a { padding: 0 2.5em 1.8em 5.5em; max-width: 80ch; }
.seo-faq-a p { margin: 0; line-height: 1.55; }
.seo-faq-more { display: flex; flex-wrap: wrap; gap: .6em 2em; margin-top: 2.5em; }
.seo-faq-more a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* Guide articles */
.rich-text.seo-guide h2 {
  font-size: var(--font-size--2xl); line-height: 1.1; letter-spacing: -.03em; font-weight: 400;
  margin-top: 3rem; margin-bottom: 1rem;
}
.rich-text.seo-guide h3 {
  font-size: var(--font-size--large); line-height: 1.2; letter-spacing: -.02em; font-weight: 400;
  margin-top: 2rem; margin-bottom: .6rem;
}
.rich-text.seo-guide p, .rich-text.seo-guide ul { margin-bottom: 1.5rem; }
.rich-text.seo-guide li { margin-bottom: .5rem; line-height: 1.5; }
.rich-text.seo-guide a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.rich-text.seo-guide .seo-summary { font-size: var(--font-size--large); line-height: 1.35; letter-spacing: -.02em; }
.rich-text.seo-guide .seo-sources li { font-size: var(--font-size--small); word-break: break-word; }
.rich-text.seo-guide .seo-disclaimer { font-size: var(--font-size--xs); color: var(--colors--neutral-400); }

@media screen and (max-width: 767px) {
  .seo-faq-item summary { grid-template-columns: 2.8em 1fr 1.2em; gap: .75em; padding: 1.3em 0; }
  .seo-faq-q { font-size: 1.25rem; }
  .seo-faq-a { padding: 0 0 1.5em 3.55em; }
  .rich-text.seo-guide h2 { font-size: var(--font-size--xl); }
}
@media screen and (max-width: 479px) {
  .seo-faq-item summary { grid-template-columns: 1fr 1.2em; }
  .seo-faq-item summary .mono-text { display: none; }
  .seo-faq-a { padding-left: 0; padding-right: 0; }
}
