/* ---------------------------------------------------------------------
 * Document pages — /about/purpose/, /about/articles-of-faith/,
 * /about/why-a-board/. Mrs. Taylor, 2026-08-17.
 *
 * These three pages share one shape: a white sheet of text on a plain
 * background. Divi painted a dark grey row behind that sheet and inset the
 * sheet inside it, so the grey showed at the rounded corners — the "black
 * tips". The grey row goes; the background it sat on becomes HBM navy, so
 * the sheet reads as a document laid on the brand colour rather than a
 * panel floating on nothing.
 *
 * Scoped to body.hbm-doc so nothing here can reach the other pages.
 * ------------------------------------------------------------------ */

body.hbm-doc {
  --doc-navy: #0f2c49;
  --doc-ink: #14385c;
}

/* The navy field the document sits on. Divi pins this section's background
   with !important from its own inline stylesheet, so the override has to
   answer in kind — it is the only way to reach it without editing Divi's
   generated CSS. The colour is carried on the page behind it as well, so
   the navy runs the full height rather than stopping under the sheet. */
body.hbm-doc,
body.hbm-doc #main-content {
  background-color: var(--doc-navy);
}

body.hbm-doc #main-content .et_pb_section {
  background-color: var(--doc-navy) !important;
  padding: 46px 0 56px;
}

/* The black tips: Divi's row carried a #3a3a3a background and the white
   module sat inside it with a 12px radius, so the grey peeked out at every
   corner. Clearing the row removes them at the source — nothing is layered
   over the top to hide them. */
body.hbm-doc #main-content .et_pb_row {
  background-color: transparent;
  background-image: none;
}

/* The sheet itself. */
body.hbm-doc .et_pb_text,
body.hbm-doc .et_pb_video {
  background-color: #fff;
  border-radius: 12px;
}

body.hbm-doc .et_pb_text .et_pb_text_inner {
  padding: 40px 44px 44px;
}

/* Consecutive modules are one continuous sheet, not a stack of cards —
   square off the edges where they meet so no seam shows. */
body.hbm-doc .et_pb_text + .et_pb_text,
body.hbm-doc .et_pb_text + .et_pb_video {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body.hbm-doc .et_pb_text:has(+ .et_pb_text),
body.hbm-doc .et_pb_text:has(+ .et_pb_video) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ------------------------------------------------------------ headings */

body.hbm-doc .et_pb_text_inner h1,
body.hbm-doc .et_pb_text_inner h2,
body.hbm-doc .et_pb_text_inner h3,
body.hbm-doc .et_pb_text_inner h4 {
  color: var(--doc-ink);
  font-weight: 800;
}

/* Sub-headings inside Articles of Faith are plain paragraphs in the source
   (THE HOLY SCRIPTURES, THE GODHEAD, …) — tagged by hand rather than
   guessed at from their capitals. */
body.hbm-doc .hbm-doc__sub {
  margin-top: 4px;
  color: var(--doc-ink);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* The page title: centred, with air beneath it before the body begins. */
body.hbm-doc .hbm-doc__title {
  margin-bottom: 26px;
  padding-bottom: 0;
  text-align: center;
  font-weight: 800;
}

/* Section headings further down the page keep their own rhythm. */
body.hbm-doc .et_pb_text_inner h2:not(.hbm-doc__title),
body.hbm-doc .et_pb_text_inner h3:not(.hbm-doc__title) {
  margin-top: 30px;
  margin-bottom: 6px;
}

body.hbm-doc .et_pb_text_inner > *:first-child {
  margin-top: 0;
}

/* Room after the closing sentence so the text is not flush to the edge of
   the sheet. */
body.hbm-doc .et_pb_text_inner > p:last-child,
body.hbm-doc .et_pb_text_inner > blockquote:last-child {
  padding-bottom: 18px;
}

/* Divi's blockquote rule was invisible against grey; against white it is
   the only thing marking these as indented lists. */
body.hbm-doc .et_pb_text_inner blockquote {
  margin: 14px 0 24px;
  border-left-color: #c9d6e2;
}

/* ---------------------------------------------------------------- video */

body.hbm-doc .et_pb_video {
  overflow: hidden;
}

body.hbm-doc .et_pb_video video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--doc-ink);
}

/* The line introducing the video, under its centred heading. */
body.hbm-doc .hbm-doc__watch {
  margin-top: 14px;
  text-align: center;
  font-weight: 700;
  color: var(--doc-ink);
}

@media (max-width: 720px) {
  body.hbm-doc #main-content .et_pb_section { padding: 24px 0 30px; }
  body.hbm-doc .et_pb_text .et_pb_text_inner { padding: 26px 20px 30px; }
}

/* Where two text modules run on as one sheet, the first one's bottom padding
   and the second one's top padding stacked into a gap the size of a
   paragraph. */
body.hbm-doc .et_pb_text + .et_pb_text .et_pb_text_inner {
  padding-top: 6px;
}

/* ---------------------------------------------------------------------
 * Articles of Faith, 2026 revision — a lettered list rather than the
 * headed sections it replaced. Divi strips list markers site-wide, so the
 * letters have to be asked for again.
 * ------------------------------------------------------------------ */

body.hbm-doc .hbm-doc__articles {
  margin: 0;
  padding-left: 2.4em;
  list-style: upper-alpha outside;
}

body.hbm-doc .hbm-doc__articles > li {
  margin-bottom: 20px;
  padding-left: 6px;
}

body.hbm-doc .hbm-doc__articles > li::marker {
  color: var(--doc-ink);
  font-weight: 800;
}

body.hbm-doc .hbm-doc__articles > li > p {
  padding-bottom: 0;
}

body.hbm-doc .hbm-doc__articles > li > p + p {
  margin-top: 12px;
}

/* A text module and the video beneath it are one sheet, so Divi's module
   spacing between them has to go or the navy shows through as a seam. */
body.hbm-doc .et_pb_text:has(+ .et_pb_video) {
  margin-bottom: 0;
}

body.hbm-doc .et_pb_text + .et_pb_video {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
 * /about/policies-procedures/ — the handbook was reached straight from the
 * About menu as a raw PDF, which opened on the browser's own white page and
 * matched nothing around it. It has a page of its own now, on the same navy,
 * with the document itself inside it.
 * ------------------------------------------------------------------ */

body.hbm-doc .hbm-doc__docactions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 4px;
  padding-bottom: 0;
}

body.hbm-doc .hbm-doc__docbtn {
  display: inline-block;
  padding: 9px 18px;
  color: var(--doc-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--doc-ink);
  border-radius: 8px;
}

body.hbm-doc .hbm-doc__docbtn:hover,
body.hbm-doc .hbm-doc__docbtn:focus-visible {
  color: #fff;
  background: var(--doc-ink);
}

body.hbm-doc .hbm-doc__viewer {
  margin-top: 22px;
  border: 1px solid #d3dde6;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f7fa;
}

body.hbm-doc .hbm-doc__viewer iframe {
  display: block;
  width: 100%;
  height: min(1100px, 118vh);
  border: 0;
}

/* iOS will not render a PDF inside an iframe, so the frame is dropped there
   and the two buttons above carry the document instead. */
@media (max-width: 820px) {
  body.hbm-doc .hbm-doc__viewer { display: none; }
}

/* ---------------------------------------------------------------------
 * /contact/ — Mrs. Taylor, 2026-08-17. The heading given room and weight,
 * the two lines beneath it, and a submit button that sits in the middle of
 * the form rather than off in the corner.
 * ------------------------------------------------------------------ */

body.hbm-doc .hbm-contact__title {
  margin-top: 18px;
  margin-bottom: 18px;
  font-size: clamp(30px, 3.6vw, 46px);
}

/* This page's text was white throughout and relied on inline black spans to
   be legible; these two lines carry no inline colour, so the colour is set
   here rather than inherited into invisibility. */
body.hbm-doc .hbm-contact__lead {
  margin: 0;
  padding-bottom: 4px;
  color: #1f2a36;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
}

body.hbm-doc .hbm-contact__lead:last-of-type {
  padding-bottom: 26px;
}

body.hbm-doc .gform-footer,
body.hbm-doc .gform_footer {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

body.hbm-doc .gform-footer .gform_button,
body.hbm-doc .gform_footer .gform_button {
  padding: 14px 46px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 10px;
}

/* The band carries its own full-bleed background, so it must not sit inside
   the white sheet's padding. */
body.hbm-doc .hbm-contact-band {
  margin-top: 34px;
}

/* ---------------------------------------------------------------------
 * /missionary/letters/ — the page a missionary reaches through the private
 * link the office sends them.
 * ------------------------------------------------------------------ */

body.hbm-doc .hbm-letter__gate {
  padding: 14px 16px;
  color: #6b4a12;
  background: #fdf6e6;
  border: 1px solid #e8d6a8;
  border-radius: 8px;
}

body.hbm-doc .hbm-letter__who {
  margin-bottom: 22px;
  color: var(--doc-ink);
}

body.hbm-doc .hbm-letter__field {
  margin: 0 0 20px;
  padding-bottom: 0;
}

body.hbm-doc .hbm-letter__field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--doc-ink);
}

body.hbm-doc .hbm-letter__field input[type="text"] {
  width: min(460px, 100%);
  padding: 11px 13px;
  font-size: 16px;
  border: 1px solid #c3cfda;
  border-radius: 8px;
}

body.hbm-doc .hbm-letter__hint {
  display: block;
  margin-top: 6px;
  color: #6b7a89;
  font-size: 14px;
}

body.hbm-doc .hbm-letter__actions button {
  padding: 13px 34px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background: var(--doc-ink);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

body.hbm-doc .hbm-letter__actions button[disabled] {
  opacity: 0.6;
  cursor: default;
}

body.hbm-doc .hbm-letter__status:empty { display: none; }

body.hbm-doc .hbm-letter__status {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  font-weight: 600;
  background: #eef2f6;
}

body.hbm-doc .hbm-letter__status.is-good { color: #14532d; background: #e8f6ec; }
body.hbm-doc .hbm-letter__status.is-bad  { color: #7f1d1d; background: #fdecec; }

body.hbm-doc .hbm-letter__note {
  margin-top: 22px;
  color: #6b7a89;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * /about/ — the landing page reached by clicking "About" itself rather
 * than using the dropdown. Mrs. Taylor, 2026-08-17: "make background blue,
 * About centered, look like the other pages please."
 *
 * This one is NOT a Divi builder page. It is the theme's old sidebar
 * layout — #content-area holding #left-area beside #sidebar — so none of
 * the .et_pb_section rules above reach it and it kept the grey background
 * and a search box no other page shows. These rules give it the same navy
 * field and the same white sheet by addressing the layout it actually has.
 * ------------------------------------------------------------------ */

body.hbm-about-landing #main-content,
body.hbm-about-landing #content-area {
  background-color: var(--doc-navy);
}

body.hbm-about-landing #content-area {
  display: block;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 46px 20px 56px;
}

/* The search widget appears on no other page, and search already lives in
   the header on every page. Removed rather than restyled. */
body.hbm-about-landing #sidebar {
  display: none;
}

body.hbm-about-landing #left-area {
  float: none;
  width: 100%;
  padding: 40px 44px 44px;
  background: #fff;
  border-radius: 12px;
}

body.hbm-about-landing #left-area .entry-title {
  margin: 0 0 26px;
  padding-bottom: 0;
  color: var(--doc-ink);
  font-weight: 800;
  text-align: center;
}

body.hbm-about-landing #left-area p {
  color: var(--hbm-ink, #1f2a36);
}

body.hbm-about-landing #left-area > *:last-child {
  padding-bottom: 6px;
}

@media (max-width: 720px) {
  body.hbm-about-landing #content-area { padding: 24px 14px 30px; }
  body.hbm-about-landing #left-area { padding: 26px 20px 30px; }
}

/* The article inside #left-area carries the site's own card styling, which
   put a second white card inside the first one. #left-area is the sheet here;
   the article is just its contents. And Divi's sidebar layout draws a 1px
   rule down .container to separate the column that has now been removed. */
body.hbm-about-landing #left-area .post,
body.hbm-about-landing #left-area article {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

body.hbm-about-landing .container::before {
  display: none;
}

/* ---------------------------------------------------------------------
 * Whole-site QA, 2026-08-17 — findings that survived independent
 * reproduction. Each is scoped no wider than the page it belongs to.
 * ------------------------------------------------------------------ */

/* Three of the six document titles rendered in pure black and three in navy,
   because Divi colours h1/h2 inside .entry-content and the class alone did
   not out-specify it. All six navy now. */
body.hbm-doc #main-content .et_pb_text_inner h1.hbm-doc__title,
body.hbm-doc #main-content .et_pb_text_inner h2.hbm-doc__title,
body.hbm-doc #main-content .et_pb_text_inner h1.hbm-doc__title span,
body.hbm-doc #main-content .et_pb_text_inner h2.hbm-doc__title span {
  color: var(--doc-ink) !important;
}

/* The video sat with square top corners in open navy while the sheet above
   it ended in a 12px radius — two different shapes with a gap between. */
body.hbm-doc .et_pb_text + .et_pb_video {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Contact: the form card left 146px of dead white beneath it. */
body.hbm-doc .gform_wrapper {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
 * Text colour inside the white sheet.
 *
 * Several of these pages were built as white type on Divi's dark slabs, and
 * carry no colour of their own — they inherit white from the theme. Once the
 * slab becomes a white card that text is invisible. Setting ink on the card's
 * container fixes it without touching anything that states its own colour:
 * an inline style on a span still wins, so the deliberate blacks and navies
 * elsewhere are untouched.
 * ------------------------------------------------------------------ */

body.hbm-doc .et_pb_text .et_pb_text_inner,
body.hbm-doc .et_pb_text .et_pb_text_inner p,
body.hbm-doc .et_pb_text .et_pb_text_inner li,
body.hbm-doc .et_pb_text .et_pb_text_inner td,
body.hbm-doc .et_pb_text .et_pb_text_inner b,
body.hbm-doc .et_pb_text .et_pb_text_inner i,
body.hbm-doc .et_pb_text .et_pb_text_inner strong,
body.hbm-doc .et_pb_text .et_pb_text_inner em {
  color: var(--hbm-ink, #1f2a36);
}

body.hbm-doc .et_pb_text .et_pb_text_inner a {
  color: var(--hbm-blue, #1d5a92);
  text-decoration: underline;
}

/* Gravity Forms labels and help text on these pages inherit the same white. */
body.hbm-doc .gform_wrapper,
body.hbm-doc .gform_wrapper label,
body.hbm-doc .gform_wrapper legend,
body.hbm-doc .gform_wrapper .gfield_description,
body.hbm-doc .gform_wrapper .gsection_title,
body.hbm-doc .gform_wrapper p {
  color: var(--hbm-ink, #1f2a36);
}

/* The video still sat 30px below the sheet it belongs to — Divi's module
   margin, which needs answering with the id in the selector. */
body.hbm-doc #main-content .et_pb_text + .et_pb_video,
body.hbm-doc #main-content .et_pb_video {
  margin-top: 0 !important;
}

body.hbm-doc #main-content .et_pb_text:has(+ .et_pb_video) {
  margin-bottom: 0 !important;
}

/* Two browser-default <hr> rules on teachers-needed, inset grey and the only
   sub-4px lines on the page, with nothing between them. */
body.hbm-doc #main-content .et_pb_text_inner hr {
  border: 0;
  border-top: 1px solid #dde3e9;
  margin: 22px 0;
}

/* The About landing sheet measured 1040px against 1080px everywhere else.
   #content-area sits inside a 1080px parent, so widening it does nothing —
   min(1120px, 100%) still resolves to 1080. The 40px came from its own side
   padding, which the sheet does not need: #left-area carries its own. */
@media (min-width: 721px) {
  body.hbm-about-landing #content-area {
    padding-left: 0;
    padding-right: 0;
  }
}