/* Adjustments required by the font substitution. Loaded last.
 * Keep this file small - it is the only place the ported Webflow styling is
 * intentionally departed from, so the reason for each rule stays visible.
 */

/* Prata has one weight. Asking for 600/700 makes the browser synthesise a
 * bold, which smears a high-contrast display serif. Use the real weight and
 * let size and letter-spacing carry the emphasis instead. */
.heading-style-h3,
.footer7_link {
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * Mobile navigation fix.
 *
 * INHERITED BUG, not introduced by the port: the compiled Webflow CSS sets
 *   .navbar9_menu-left { min-width: 700px; width: 700px }
 * with no media query, so inside the 375px mobile menu the link list is forced
 * to 700px and Affiliates / The Abbot's Corner / Audio Homilies render off the
 * right edge, unreachable. Verified present on the live Webflow site too
 * (links measured at x=719 in a 375px viewport on stlouisabbey.org).
 *
 * The dropdown panel has the same problem at 500px.
 * Scoped to the burger breakpoint so desktop layout is untouched.
 * ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  .navbar9_menu-left {
    min-width: 0;
    width: 100%;
  }

  .navbar9_dropdown-list.w--open {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * Desktop navigation: six top-level items on one row.
 *
 * Adding "Sacred Art Institute" (Oct 2026) took the links past the fixed
 * 700px the export gives `.navbar9_menu-left`, so the row broke onto a second
 * line at 1280px. The block now sizes to its links, with slightly tighter
 * padding, and steps the type down below 1280px. The logo keeps at least
 * "Saint Louis" on a line, so it can no longer be crushed into the menu.
 *
 * Verified 992-1440px: one row, nav 72px tall, no horizontal scroll. (Before
 * this, 992-1199px was already broken - CONTACT ran off the right edge and the
 * logo overlapped About.)
 * ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .navbar9_logo-link .text-block {
    min-width: 6.2em;
  }

  .navbar9_menu-left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: max-content;
    width: auto;
  }

  .navbar9_menu-left .navbar9_link,
  .navbar9_menu-left .navbar9_dropdown-toggle {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    white-space: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .navbar9_logo-link .text-block { font-size: 1.1rem; }
  .navbar9_menu { margin-left: 0.75rem; }
  .navbar9_menu-right { column-gap: 0.5rem; }
  .navbar9_menu-right .button { padding-left: 0.8rem; padding-right: 0.8rem; }

  .navbar9_menu-left .navbar9_link,
  .navbar9_menu-left .navbar9_dropdown-toggle {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.875rem;
  }
}

@media (min-width: 992px) and (max-width: 1149px) {
  .navbar9_logo-link .text-block { font-size: 1rem; }
  .navbar9_menu-right .button { padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.8125rem; }

  .navbar9_menu-left .navbar9_link,
  .navbar9_menu-left .navbar9_dropdown-toggle {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    font-size: 0.8125rem;
  }
}

/* ---------------------------------------------------------------------------
 * Webflow interaction START states — reveal them.
 *
 * The ported markup keeps Webflow's interaction start states: elements are
 * written out with an INLINE `opacity: 0` and/or an off-screen translate3d,
 * and Webflow's engine is supposed to animate them into place. Here those
 * animations do not fire — the page-load ones because the engine arrives after
 * the load event, the scroll ones because they never trigger reliably — so the
 * content sits invisible or shoved off to one side. That is what made whole
 * sections of the home page look blank: the liturgy horarium, the feature
 * copy and the hero heading are all present in the page, just not shown.
 *
 * The discriminator that makes this safe: an IX2 start state is always INLINE,
 * whereas something meant to stay hidden (the St Benedict's Cross popup) is
 * hidden by the STYLESHEET. Matching on the inline style attribute therefore
 * reveals only what was meant to animate in, and leaves real popups alone.
 *
 * `!important` is needed to beat the inline declaration.
 * ------------------------------------------------------------------------ */

[style*="opacity: 0"],
[style*="opacity:0"],
[style*="translate3d"] {
  opacity: 1 !important;
  transform: none !important;
}

/* A gentle entrance so the page still feels considered rather than snapping
   into place. Purely decorative: the rule above already guarantees the content
   is visible, so nothing depends on these running. */
@media (prefers-reduced-motion: no-preference) {
  .section_header5 [style*="translate3d"],
  .section_header5 [style*="opacity"] {
    animation: grd-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .section_header5 .image { animation-name: grd-from-left; }
  .section_header5 .heading-style-h1 { animation-name: grd-from-right; }
  .section_header5 .landing-section-small-text { animation-delay: 450ms; }
}

@keyframes grd-from-left {
  from { transform: translate3d(-48px, 0, 0); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes grd-from-right {
  from { transform: translate3d(48px, 0, 0); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes grd-rise {
  from { transform: translate3d(0, 20px, 0); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Hero button spacing.
 *
 * The LEARN MORE / VISIT pair was overflowing the hero by 10px - sitting hard
 * against the bottom edge with nothing beneath it. Give the group real
 * breathing room and let the hero grow to hold it.
 * ------------------------------------------------------------------------ */

.section_header5 .button-group {
  margin-bottom: 4rem;
}

@media (max-width: 767px) {
  .section_header5 .button-group {
    margin-bottom: 2.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Transitions.
 *
 * Kept restrained on purpose: this is a monastery, not a product launch.
 * Short, soft easing, and nothing that moves the page around as it is read.
 * ------------------------------------------------------------------------ */

.button,
.w-button,
.navbar9_link,
.navbar9_dropdown-link,
.footer7_link,
.grd-download {
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease,
    opacity 260ms ease, transform 260ms ease;
}

.button:hover,
.w-button:hover,
.grd-download:hover {
  transform: translateY(-2px);
}

.navbar9_dropdown-link:hover {
  background-color: rgba(140, 100, 26, 0.07);
}

/* Images in cards and galleries settle rather than snap. */
.home_feature_image,
.home_features-list_image,
.gallery_image,
.school_feature_image {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sections fade up as they come into view. The class is added by
 * SectionReveal; without JS the content is simply visible, never hidden. */
@media (prefers-reduced-motion: no-preference) {
  .grd-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  .grd-reveal.grd-revealed {
    opacity: 1;
    transform: none;
  }
}

/* "Come and Seek God" on ONE line wherever it fits.
 *
 * At the inherited 62.4px the phrase needs exactly 560px inside a 560px
 * column - right on the boundary, so it wrapped and stranded "God". Easing the
 * display size to 3.6rem brings it to ~517px, which fits with room to spare,
 * and `nowrap` guarantees it never breaks mid-phrase.
 *
 * Only above the burger breakpoint: on a phone the column is far too narrow for
 * one line at any readable size, so it is allowed to wrap there. `balance`
 * keeps that wrap even rather than leaving a single word behind. */
.section_header5 .text-block-5,
.section_header5 .heading-style-h1 {
  text-wrap: balance;
}

@media (min-width: 992px) {
  .section_header5 .text-block-5 {
    white-space: nowrap;
    font-size: 3.6rem;
  }
}

/* ---------------------------------------------------------------------------
 * Homepage events — restore the hover reveal.
 *
 * Each event row carries a picture and a details panel that the original site
 * faded in on hover. That fade was a Webflow interaction, and the stylesheet
 * leaves `.home_event-header_image-wrapper` at opacity 0 until the engine
 * raises it — which never happens here, so hovering an event did nothing.
 *
 * Note this is NOT covered by the inline-start-state rule earlier in this
 * file: that one deliberately matches only inline styles, and this opacity
 * comes from the stylesheet.
 *
 * Desktop only — the panel is already `display: none` below 992px in the
 * original CSS, so there is nothing to reveal on a phone.
 * ------------------------------------------------------------------------ */

@media (min-width: 992px) {
  .home_event-header_image-wrapper {
    transition: opacity 320ms ease;
  }

  .collection-item-5:hover .home_event-header_image-wrapper,
  .collection-item-5:focus-within .home_event-header_image-wrapper {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
 * Gallery — the "Get in Touch" and closing CTA sit on white while the rest of
 * the page is on the abbey's beige. Match them to the surrounding ground.
 * ------------------------------------------------------------------------ */

.section_gallery_contact,
.section_gallery_cta {
  background-color: var(--beige, #f4f0e0);
}