/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * This used to hardcode its own `:root { ... }` block instead of importing
 * the shared assets/css/_src/_variables.scss (see the other blocks, e.g.
 * inc/blocks/iconstext/style.scss, which `@import` it properly). Because
 * every ACF block's style.css is enqueued as its own <link>, and masthead is
 * the one block present on nearly every page, its copy of `--font-size-default`
 * (18px -- a stale/incorrect value, not the theme's actual 22px default) won
 * the cascade on any page where masthead's stylesheet happened to load last
 * (i.e. any page with no other flex-content block after it), silently
 * shrinking all body text on that page. Removed rather than fixed-in-place:
 * this block never used any SCSS variables/mixins of its own, so the
 * redeclaration was pure dead weight once removed -- the correct 22px value
 * from the main stylesheet now simply isn't clobbered anymore.
 */
.wp-block-acf-masthead {
  /* Full-bleed breakout: `width:100vw` + `margin:0 auto` only looked
     edge-to-edge by accident, because it relied on this block's ancestor
     (the page content's .wp-block-column.shell wrapper) being un-centered
     (margin:0) due to a since-fixed bug. Now that the ancestor is properly
     centered, `margin: auto` on a 100vw box can't re-center relative to a
     narrower parent and the block hangs off the right edge instead. Use the
     standard viewport-relative breakout so this stays edge-to-edge no
     matter how its parent is positioned. */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.wp-block-acf-masthead.style3 {
  border: 1px solid white;
}

.wp-block-acf-masthead.style3 .app__block-inner .app__block-content,
.wp-block-acf-masthead.style3 .app__block-inner .app__block-media {
  flex-basis: 50%;
  max-width: 50%;
}

.wp-block-acf-masthead .shell {
  max-width: 1440px;
  margin: auto;
  /* The generic .shell utility (assets/css/_src/_columns.scss) adds
     32px of top/bottom padding, which reads as an unwanted gap between
     the sticky nav and the masthead's dark background. Masthead shells
     should sit flush against the top of their section. */
  padding-top: 0;
}

@media (max-width: 1024px) {
  .wp-block-acf-masthead .shell {
    padding: 16px;
  }
}
@media (max-width: 768px) {
  .wp-block-acf-masthead .shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
.wp-block-acf-masthead .shell .app__block-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0px;
}

.wp-block-acf-masthead .shell .app__block-inner > * {
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .wp-block-acf-masthead .shell .app__block-inner > * {
    max-width: 100%;
  }
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-media {
  position: relative;
  height: auto;
  width: 100%;
  /* 1:1 Aspect Ratio */
  /* Just for visibility */
}

.wp-block-acf-masthead .shell .app__block-inner .app__block-media > img {
  width: 100% !important;
  height: auto !important;
}

.wp-block-acf-masthead .shell .app__block-inner .app__block-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.wp-block-acf-masthead .shell .app__block-inner .app__block-content h1 {
  color: var(--global--color-primary);
  text-align: left;
  margin-bottom: 0;
  font-size: 48px;
}

@media (max-width: 1024px) {
  .wp-block-acf-masthead .shell .app__block-inner .app__block-content h1 {
    font-size: 36px;
  }
}
@media (max-width: 768px) {
  .wp-block-acf-masthead .shell .app__block-inner .app__block-content h1 {
    font-size: 28px;
  }
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-content p {
  color: var(--global--color-primary);
}

@media (max-width: 1024px) {
  .wp-block-acf-masthead .shell .app__block-inner .app__block-content p {
    font-size: 18px;
  }
}
/* The description now sits in a .app__block-copy wrapper (see render.php)
   rather than being a bare <p>. .app__block-content is a flex column with
   align-items:flex-start, so its children are shrink-to-fit -- which meant the
   wrapper shrink-wrapped, and the "max-width: 50%" that _theme.scss puts on
   .app__block-content p then resolved against that shrink-wrapped box instead
   of against the content column, collapsing the copy to a very narrow strip.
   Stretching the wrapper to the full column width puts the paragraph back on
   exactly the geometry it had when it was the flex item itself. */
.wp-block-acf-masthead .shell .app__block-inner .app__block-content .app__block-copy {
  width: 100%;
}

/* The description ("Content") field is a WYSIWYG, so it can contain inline
   links. The shared masthead rule in assets/css/_src/_theme.scss strips the
   underline off every <a> inside .app__block-content with !important -- that
   is aimed at the featured-document title links in style1, but it would also
   leave a description link looking exactly like the text around it. Re-assert
   a real link treatment, scoped to the .app__block-copy wrapper so the
   featured-document links keep their existing (undecorated) styling. */
.wp-block-acf-masthead .shell .app__block-inner .app__block-content .app__block-copy a {
  color: #FFAC00;
  text-decoration: underline !important;
}

.wp-block-acf-masthead .shell .app__block-inner .app__block-content .app__block-copy a:hover,
.wp-block-acf-masthead .shell .app__block-inner .app__block-content .app__block-copy a:focus {
  text-decoration: none !important;
}

.wp-block-acf-masthead .shell .app__block-inner .app__block-content .tagwrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  gap: 32px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.wp-block-acf-masthead .shell .app__block-inner .app__block-content .tagwrapper .tag {
  color: var(--global--color-secondary);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: uppercase;
  border-bottom: 2px solid var(--global--color-secondary);
}

.wp-block-acf-masthead.style1 {
  padding: 0px !important;
}

.wp-block-acf-masthead.style1 .shell {
  padding: 0px;
}

@media (max-width: 1024px) {
  .wp-block-acf-masthead.style1 .shell {
    padding: 0 16px;
  }
}
@media (max-width: 768px) {
  .wp-block-acf-masthead.style1 .shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
.wp-block-acf-masthead.style1 .app__block-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

@media (max-width: 768px) {
  .wp-block-acf-masthead.style1 .app__block-inner {
    grid-template-columns: 1fr;
  }
}
.wp-block-acf-masthead.style1 .app__block-inner .app__block-content {
  max-width: 100%;
  padding-top: 64px;
  padding-bottom: 32px;
}

.wp-block-acf-masthead.style1 .app__block-inner .app__block-content p {
  max-width: 100%;
}

.wp-block-acf-masthead.style1 .app__block-inner .featured {
  max-width: 100%;
  height: 100%;
}

.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner {
  align-items: center;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 0 !important;
}

@media (max-width: 768px) {
  .wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner {
    grid-template-columns: 1fr;
  }
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media {
  padding-bottom: 0;
  transition: all 0.8s;
  overflow: hidden;
  position: relative;
  z-index: 0;
  border-radius: 0px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media > img {
  position: relative;
  z-index: 1;
  height: 86% !important;
  width: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.8s;
}

.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media:after {
  content: " ";
  background-color: #FFFCF2;
  width: 50%;
  height: 114%;
  position: absolute;
  z-index: -1;
  right: 0;
  top: -32px;
}

@media (max-width: 768px) {
  .wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media:after {
    width: 100%;
  }
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-content {
  background-color: #FFFCF2;
  height: 100%;
  max-width: 100%;
  padding-left: 32px;
  padding-right: 16px;
}

.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-content h3 {
  font-size: 28px;
}

.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-content .tag {
  border-color: #57718D !important;
  color: #57718D !important;
}

.wp-block-acf-masthead.style4 .shell .app__block-inner {
  justify-content: flex-start;
  align-items: flex-start;
}

.wp-block-acf-masthead.style4 .shell .app__block-inner .app__block-content.fullwidth {
  max-width: 100%;
}