/* Shared open presentation for WordGeek's formal information pages. */

body.formal-page {
  background: #f5f7f9;
  color: var(--text);
}

body.formal-page .site-header,
body.formal-page .page-intro {
  background: #f7f9fb;
}

body.formal-page .page-intro {
  border-block: 1px solid var(--line);
}

body.formal-page .page-intro .container,
body.formal-page .content-wrap > .container,
body.formal-page main.container.content-wrap {
  width: min(100% - 2rem, 1180px);
  max-width: none;
}

body.formal-page .content-wrap > .container.two-column {
  display: block;
}

/* Former sidebars become open page-navigation bands. */
body.formal-page .sidebar {
  position: static;
  width: 100%;
  margin: 0 0 2rem;
  padding: 1rem 0;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.formal-page .sidebar h2.formal-level-two,
body.formal-page .sidebar h3 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

/* Preserve the established h3 presentation when a corrected h2 is used. */
body.formal-page h2.formal-level-two {
  margin-block: 1em;
  font-size: 1.17em;
}

body.formal-page .sidebar h2.formal-level-two {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

body.formal-page .card > h2.formal-level-two:first-child,
body.formal-page .sitemap-block > h2.formal-level-two:first-child {
  margin-top: 0;
}

body.formal-page .sidebar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.formal-page .sidebar li,
body.formal-page .sidebar li + li {
  margin: 0;
}

body.formal-page .sidebar a {
  font-weight: 700;
  text-underline-offset: 0.18em;
}

body.formal-page .sidebar-divider {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Open ordinary information cards into one continuous reading surface. */
body.formal-page .section-stack {
  gap: 0;
}

body.formal-page .section-stack > .card,
body.formal-page .section-stack > article.card,
body.formal-page .section-stack > section.card {
  margin: 0;
  padding: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.formal-page .section-stack > :first-child {
  border-top: 0;
  padding-top: 0;
}

body.formal-page .notice {
  border-radius: 0;
  box-shadow: none;
}

/* Principles keeps its identity while shedding the boxed grid feeling. */
body.formal-page .principles-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

body.formal-page .principles-grid .principle-card,
body.formal-page .principle-note .card {
  padding: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.formal-page .principles-hero {
  border-radius: 0;
}

/* Site Map becomes a broad, readable directory. */
body.formal-page .sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--line);
}

body.formal-page .sitemap-block {
  min-width: 0;
  padding: 1.75rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.formal-page .sitemap-block:first-child {
  border-left: 0;
}

body.formal-page .sitemap-block a {
  text-underline-offset: 0.18em;
}

/* Status uses open service rows instead of floating panels. */
body.formal-page .status-shell,
body.formal-page .updates-shell {
  width: min(100% - 2rem, 1180px);
  max-width: none;
}

body.formal-page .status-heading,
body.formal-page .status-hero > p:not(.status-kicker),
body.formal-page .updates-hero > p:not(.updates-kicker) {
  max-width: 900px;
}

body.formal-page .service-row,
body.formal-page .status-note {
  padding: 1.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--status-line, var(--line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.formal-page .release {
  padding: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--updates-line, var(--line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.formal-page .release:first-child {
  border-top: 0;
}

body.formal-page .updates-return {
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 820px) {
  body.formal-page .sitemap-grid {
    grid-template-columns: 1fr;
  }

  body.formal-page .sitemap-block,
  body.formal-page .sitemap-block:first-child {
    padding: 1.5rem 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  body.formal-page .sitemap-block:first-child {
    border-top: 0;
  }
}

@media (max-width: 760px) {
  body.formal-page .page-intro .container,
  body.formal-page .content-wrap > .container,
  body.formal-page main.container.content-wrap,
  body.formal-page .status-shell,
  body.formal-page .updates-shell {
    width: min(100% - 1rem, 1180px);
  }

  body.formal-page .sidebar {
    margin-bottom: 1.5rem;
  }
}