/* ============================================================
   ALLEGORY SYSTEMS — ADDITIONAL CSS
   WordPress.com Premium | allegorysystems.com
   Last updated: April 2026
   ============================================================ */


/* ------------------------------------------------------------
   BLOCK 1: HIDE WORDPRESS THEME HEADER & NAVIGATION
   ------------------------------------------------------------
   WordPress themes render their own header and nav bar above
   our Custom HTML blocks. This hides all of those elements
   so only our custom-built nav (inside each HTML block) shows.
   If the nav ever disappears from your pages, check this block
   hasn't been accidentally removed.
   ------------------------------------------------------------ */
header.wp-block-template-part,
.wp-block-template-part,
.wp-block-navigation,
.site-header,
#masthead,
#site-header {
  display: none !important;
}


/* ------------------------------------------------------------
   BLOCK 2: HIDE WORDPRESS THEME FOOTER
   ------------------------------------------------------------
   Same as above but for the footer. Our pages don't use a
   WordPress footer — each page has its own CTA section at
   the bottom. This prevents the default "Powered by WordPress"
   footer from appearing.
   ------------------------------------------------------------ */
footer.wp-block-template-part {
  display: none !important;
}


/* ------------------------------------------------------------
   BLOCK 3: REMOVE WRAPPER PADDING FROM CONTENT AREA
   ------------------------------------------------------------
   WordPress wraps all page content in container divs that add
   left/right padding and constrain the max-width. This causes
   white space on the sides of our full-width sections.
   These rules remove that padding so our HTML blocks stretch
   edge to edge across the full viewport width.
   ------------------------------------------------------------ */
.wp-site-blocks,
.wp-block-group.is-layout-flow,
.wp-block-post-content.is-layout-constrained,
.entry-content.wp-block-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 4: REMOVE TOP MARGIN FROM MAIN CONTENT BLOCK
   ------------------------------------------------------------
   WordPress adds a top margin to the main content area which
   creates a gap at the top of the page between the nav and
   the first section of our HTML block. This removes it.
   ------------------------------------------------------------ */
main.wp-block-group {
  margin-top: 0 !important;
  padding: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 5: HIDE PAGE TITLE
   ------------------------------------------------------------
   WordPress automatically displays the page title (e.g.
   "Who We Are", "Memoria") above the content area. Our Custom
   HTML blocks have their own hero headings so this would
   create a duplicate. This hides the auto-generated title.
   Also targets the wrapper div that adds top padding around
   the title even when it's hidden.
   ------------------------------------------------------------ */
.wp-block-post-title,
h1.entry-title,
.entry-title,
.page-title {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.wp-block-post-content,
.entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.wp-block-group.has-background.is-layout-constrained {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 6: REMOVE GAP BETWEEN HTML BLOCK AND JETPACK FORM
   ------------------------------------------------------------
   On the Connect With Us page the Jetpack contact form is a
   separate block placed below our Custom HTML block. WordPress
   adds default spacing between blocks which creates a white
   gap. These rules close that gap so the form sits flush
   against the hero section above it.
   ------------------------------------------------------------ */
.wp-block-jetpack-contact-form,
.jetpack-contact-form-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.wp-block-html + .wp-block-jetpack-contact-form,
.wp-block-html + div > .jetpack-contact-form-container {
  margin-top: 0 !important;
}

.entry-content > * + * {
  margin-top: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 7: JETPACK CONTACT FORM — CONTAINER STYLING
   ------------------------------------------------------------
   Styles the outer wrapper of the Jetpack form to match the
   Allegory brand. Sets the navy background, removes default
   padding, and centers the form within the container.
   The form lives on the Connect With Us page only.
   ------------------------------------------------------------ */
.jetpack-contact-form-container {
  background: #1B2A4A !important;
  padding: 40px 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}


/* ------------------------------------------------------------
   BLOCK 8: JETPACK CONTACT FORM — FIELD WIDTH FIX
   ------------------------------------------------------------
   The Jetpack form uses a flex layout that causes input fields
   to shrink to a narrow width. These rules force the form and
   all its field wrappers to fill the full 600px container
   width so Name, Email, and Message fields are full-width.
   ------------------------------------------------------------ */
.wp-block-jetpack-contact-form.is-vertical.is-content-justification-center {
  width: 600px !important;
  max-width: 100% !important;
}

.wp-block-jetpack-contact-form.is-vertical.is-content-justification-center .grunion-field-wrap {
  width: 600px !important;
  max-width: 100% !important;
}

.wp-block-jetpack-contact-form.is-vertical.is-content-justification-center input,
.wp-block-jetpack-contact-form.is-vertical.is-content-justification-center textarea {
  width: 600px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  color: #1a1f35 !important;
}


/* ------------------------------------------------------------
   BLOCK 9: JETPACK CONTACT FORM — LABEL STYLING
   ------------------------------------------------------------
   The form labels (Name, Email, Message) default to dark text
   which is invisible on our navy background. This overrides
   them to Off-White so they're readable.
   ------------------------------------------------------------ */
.grunion-field-label,
.wp-block-jetpack-label {
  color: #F0EDE6 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}


/* ------------------------------------------------------------
   BLOCK 10: JETPACK CONTACT FORM — SUBMIT BUTTON STYLING
   ------------------------------------------------------------
   The default Jetpack submit button inherits WordPress theme
   styles which render it with a dark/black background. This
   overrides it to use Institutional Gold (#C8A832) with dark
   navy text, matching all other CTAs across the site.
   Also applies to any other WordPress button blocks sitewide.
   ------------------------------------------------------------ */
.wp-block-button__link,
.wp-element-button {
  background: #C8A832 !important;
  color: #0D1021 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: #D4B84A !important;
  color: #0D1021 !important;
}


/* ------------------------------------------------------------
   BLOCK 11: JETPACK CONTACT FORM — SUCCESS MESSAGE STYLING
   ------------------------------------------------------------
   After a form is submitted, Jetpack shows a confirmation
   message. By default this text is black and invisible on our
   navy background. This makes the success message and its
   container match the brand — Off-White text on navy.
   ------------------------------------------------------------ */
.contact-form-submission,
.jetpack_forms_contact-form-custom-success-message,
.contact-form-submission h4,
.contact-form-submission p,
.contact-form-submission a {
  color: #F0EDE6 !important;
  background: #1B2A4A !important;
}

/* ------------------------------------------------------------
   BLOCK 12: REMOVE BODY AND SITE-LEVEL WHITESPACE
   ------------------------------------------------------------
   Catches any remaining margin/padding on the body and top-
   level WordPress site wrapper that causes white edges or gap
   at the top of the page.
   ------------------------------------------------------------ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

.wp-site-blocks {
  margin: 0 !important;
  padding: 0 !important;
}

.is-layout-flow,
.is-layout-constrained {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

.wp-block-post-content {
  padding: 0 !important;
  margin: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 13: REMOVE BOTTOM WHITE SPACE AFTER CUSTOM HTML BLOCKS
   ------------------------------------------------------------
   WordPress adds bottom margin/padding to wp-block-html and
   entry-content wrappers, causing white space below the last
   custom HTML block on each page.
   ------------------------------------------------------------ */
.wp-block-html,
.wp-block-html:last-child,
.entry-content > .wp-block-html:last-child,
.wp-block-post-content > .wp-block-html:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.entry-content,
.wp-block-post-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 14: JETPACK CONTACT FORM — LABEL SPACING
   ------------------------------------------------------------
   Adds a space between field labels (Name, Email) and the
   "(required)" text that Jetpack appends.
   ------------------------------------------------------------ */
.grunion-field-label .required,
.contact-form label .required,
.jetpack-contact-form label .required,
label .required {
  margin-left: 4px;
}


/* ------------------------------------------------------------
   BLOCK 15: REMOVE THEME FOOTER PADDING
   ------------------------------------------------------------
   The WordPress theme footer renders with 40px top and bottom
   padding even when hidden, creating white space at the bottom
   of every page. This zeroes it out completely.
   ------------------------------------------------------------ */
footer.wp-block-template-part,
footer.wp-block-template-part .wp-block-group {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 16: REMOVE THEME FOOTER INNER GROUP PADDING
   ------------------------------------------------------------
   The theme footer's inner wp-block-group has inline style
   padding-top:40px;padding-bottom:40px which survives display:none
   on the parent. This targets it directly.
   ------------------------------------------------------------ */
footer.wp-block-template-part .is-layout-constrained,
footer.wp-block-template-part .wp-block-group-is-layout-constrained {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* ------------------------------------------------------------
   BLOCK 17: REMOVE BLANK PARAGRAPH BLOCKS AFTER HTML BLOCKS
   ------------------------------------------------------------
   WordPress injects empty wp-block-paragraph elements after
   Custom HTML blocks, creating white space at the bottom.
   ------------------------------------------------------------ */
.entry-content > p.wp-block-paragraph:empty,
.wp-block-post-content > p.wp-block-paragraph:empty,
p.wp-block-paragraph:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 18: HIDE TRAILING BLANK PARAGRAPHS (WHITESPACE CONTENT)
   ------------------------------------------------------------
   :empty doesn't catch paragraphs with whitespace inside.
   This targets the last child paragraph in the content area
   and forces it to zero height.
   ------------------------------------------------------------ */
.entry-content > p:last-child,
.wp-block-post-content > p:last-child {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ------------------------------------------------------------
   BLOCK 19: MATCH THEME FOOTER BACKGROUND TO SITE COLOR
   ------------------------------------------------------------
   Can't remove the white space but can make it invisible by
   matching the background color to the site's navy.
   ------------------------------------------------------------ */
body,
html,
.wp-site-blocks,
main.wp-block-group,
footer.wp-block-template-part,
footer.wp-block-template-part .wp-block-group,
.entry-content,
.wp-block-post-content {
  background-color: #1B2A4A !important;
}