/* ── Inner-page hero + top banner (driven by ACF "Page Options") ─────────── */

.page-top-banner {
    width: 100%;
    min-height: 60px;
    line-height: 33px;
    padding: 13.5px 6%;
    text-align: left;
    font-family: 'Geogrotesque Regular', sans-serif;
    font-size: 16px;
    letter-spacing: 1.25px;
    color: #fff;
}

.page-top-banner span { color: #fff; }

/* Banner text is a textarea: keep its line breaks with CSS. <br> can't be used, the theme bundle (teasdalelatinfoods.js) removes every <br> on load. */
.page-top-banner span { white-space: pre-line; }

/* ACF "Top banner header": styled as "FROM THE FIELD TO THE FAMILY" on the source Capability intro (.capability-overview-content h3: Geogrotesque Semibold 28px / 30.8px, uppercase as typed there). Color and alignment follow the banner's. */
.page-top-banner__header { margin: 0 0 14px; font-family: 'Geogrotesque Semibold', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 28px; line-height: 30.8px; font-weight: 500; letter-spacing: normal; text-transform: uppercase; color: inherit; }
.page-top-banner__header:last-child { margin-bottom: 0; }

/* ACF "Top banner line with flower": 4px dark line under the banner with the leaf mark centred on it (source: .capability-overview-content + .organic-marine-logo) */
.page-top-banner.page-top-banner--flower { position: relative; border-bottom: 4px solid #343E48; }
.page-top-banner__flower { position: absolute; left: 50%; bottom: -2px; width: 30px; height: auto; transform: translateX(-50%); }

/* ACF "Top banner text alignment" (default left) */
.page-top-banner.page-top-banner--center { text-align: center; }

/* Long banner text (a paragraph, not a one-line heading): sentence case, roomier, as the source's intro block */
.page-top-banner.page-top-banner--long { padding: 56px 70px; }
.page-top-banner.page-top-banner--long span { text-transform: none; letter-spacing: normal; }
/* ...in a fixed-width centred column (980px = the source's text width at 1440px: 16% side padding), not edge to edge */
.page-top-banner.page-top-banner--long > span,
.page-top-banner.page-top-banner--long > .page-top-banner__header { display: block; max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
    .page-top-banner.page-top-banner--long { padding: 20px 25px; }
}

/* ── Side images (ACF repeater side_images) ───────────────────────────────── */
/* top = % down the content area; offset = % in from that side's page edge
   (negative bleeds off-screen); hidden below 992px like the source. */

.site-main.has-side-images {
    position: relative;
    overflow-x: clip;
}

.side-images {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.side-images .side-image {
    position: absolute;
    max-width: none;
    height: auto;
}

.site-main.has-side-images .container { position: relative; z-index: 1; }

/* Desktop: body text sits in the centre column (815px, as on the source) between the side images. */
@media (min-width: 992px) {
    .site-main.has-side-images { min-height: 1400px; }
    .site-main.has-side-images .container { max-width: none; padding: 0; }
    .site-main.has-side-images .content-area { width: 815px; max-width: 100%; margin: 0 auto; }
}

/* ── Full-width source-style pages (Contact Us, Sitemap, Privacy Policy) ─── */
.teasdale-wide .site-main .container { width: 100%; max-width: none; padding: 0; }
.teasdale-wide .site-main .content-area { width: 100%; }
.teasdale-wide #site-map { width: 70%; margin: 0 auto; text-align: left; padding: 10px 0 50px; display: flex; flex-direction: column; }
.teasdale-wide #site-map .top-level { color: #343E48; text-align: left; font-size: 1.5rem; padding: 8px 8px 8px 42px; }
.teasdale-wide #site-map .top-level:hover { color: #E84B37; }
.teasdale-wide #site-map .mobile-dropdown-content.two { display: block; position: relative; top: 0; margin: 0; font-size: 1rem; text-align: left; list-style: circle outside; padding: 10px 0 20px 82px; }
.teasdale-wide #site-map .mobile-dropdown-content.two li { display: list-item; font-size: 1rem; color: #000; }
.teasdale-wide #site-map .mobile-dropdown-content.two a { display: block; color: #000; font-size: 1rem; text-align: left; padding: 5px 0; }
.teasdale-wide #site-map .mobile-dropdown-content.two a:hover { color: #E84B37; }
.teasdale-wide .site-main { padding-bottom: 20px; }

/* ── Beaver Builder full-width rows ──────────────────────────────────────── */
/* page.php wraps the body in a width-limited .container; let BB rows set to
   "Full width" break out of it to the viewport edges (e.g. the Hero block). */
.site-main { overflow-x: clip; }
.site-main .fl-builder-content > .fl-row-full-width {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
}

/* H3 in Beaver Builder content: styled as the "Our Key Areas of Focus:" h3 on the source /sustainability/ (Geogrotesque Semibold 28px / 30.8px, #343E48, 20px bottom margin). The page-title banner h3 is outside BB content, so it is unaffected. */
.fl-builder-content h3, .fl-builder-content h3.fl-module-heading.fl-heading { font-family: 'Geogrotesque Semibold', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 28px; line-height: 30.8px; font-weight: 500; color: #343E48; }
/* the Heading module's own size/typography setting (e.g. 20px) would otherwise win, hence the extra classes above */
.fl-builder-content h3 { margin: 0 0 20px; }