/* WordPress-only adjustments on top of bhh.css (the shared prototype stylesheet). */

/* Admin bar offset for the fixed header */
body.admin-bar .bhh-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .bhh-header { top: 46px; } }

/* Parent theme defaults we don't want */
body { font-family: var(--font-body); color: var(--text-body); }
.page-content > .sr-only + section,
.page-content > section:first-child { margin-top: 0; }

/* Accreditation badges come from Partner featured images (single composited image each) */
.accreditation__list li img { position: static; display: block; width: 100%; height: auto; }

/* Logo-only partner cards (featured image, no label) */
.partner-card__logo { width: auto; height: auto; max-width: 200px; max-height: 110px; object-fit: contain; }
@media (min-width: 1200px) { .partner-card__logo { max-width: 230px; max-height: 134px; } }

/* Empty states for dynamic feeds */
.feed-empty { padding-top: var(--space-8); font-size: 16px; color: var(--text-secondary); }
.news .feed-empty { color: rgba(255, 255, 255, 0.9); }

/* Flamingo Forms inside the Let's Talk card — match prototype .contact-form */
.contact-form--wp .ff-form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.contact-form--wp .ff-fields { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 480px) {
  .contact-form--wp .ff-fields { grid-template-columns: 1fr 1fr; }
  .contact-form--wp .ff-field-full { grid-column: 1 / -1; }
}
.contact-form--wp .ff-field { display: flex; flex-direction: column; gap: 6px; margin: 0; width: auto; padding: 0; }
.contact-form--wp .ff-label { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-ink); }
.contact-form--wp .ff-required { display: none; } /* required state is conveyed by the input's required attribute */
.contact-form--wp .ff-input {
  width: 100%; min-height: 48.5px; margin: 0; padding: 12px 14px;
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: none;
  font: 400 16px/1.4 var(--font-body); color: var(--text-body);
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.contact-form--wp textarea.ff-input { height: 116px; min-height: 116px; resize: vertical; }
.contact-form--wp .ff-input:hover { border-color: var(--border-color-strong); }
.contact-form--wp .ff-input:focus,
.contact-form--wp .ff-input:focus-visible { outline: none; border-color: var(--agency-primary); box-shadow: 0 0 0 3px rgba(38, 34, 98, 0.18); }
.contact-form--wp .ff-error { font-size: 13px; line-height: 18px; color: var(--agency-accent); }
.contact-form--wp .ff-error:empty { display: none; }
.contact-form--wp .ff-submit-wrap { margin: 0; padding-top: var(--space-2); }
.contact-form--wp .ff-submit {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 55px; padding: 14px 24px; border: 0; border-radius: var(--radius-pill);
  background: var(--agency-accent); color: #fff;
  font: 600 17px/22.5px var(--font-body);
  transition: transform var(--dur-med) var(--ease-spring);
}
.contact-form--wp .ff-submit:hover { transform: translateY(-2px); background: var(--agency-accent); color: #fff; }
.contact-form--wp .ff-submit:active { transform: scale(0.98); }
.contact-form--wp .ff-submit:focus-visible { outline: 3px solid var(--agency-primary); outline-offset: 4px; }
.contact-form--wp .ff-submit::after, .contact-form--wp .ff-submit::before { display: none; }
.contact-form--wp .ff-message { font-size: 14px; line-height: 20px; color: var(--agency-primary); }

/* Builder edit mode: site chrome isn't editable on the canvas (it's in Menus + BHH Site Settings),
   and the canvas is narrower than the window, so the desktop nav would overflow — hide it there. */
.fb-viewport-frame .bhh-header,
.fb-viewport-frame .mobile-menu,
.fb-viewport-frame .bhh-skip-link { display: none; }
.fb-viewport-frame .hero { padding-top: 112px; }

/* About page: the prototype's single Our Story / Our Impact sections are split into several builder
   modules. Collapse the padding where modules join so the rhythm matches (inner parts carry their own gaps). */
.about-section.about-part--first { padding-bottom: 0; }
.about-section.about-part { padding-block: 0; }
.about-section.about-part--last { padding-top: 0; }
/* The builder wraps each module in its own <section>, which would limit position: sticky to that wrapper. */
.page-content > section:has(> .section-nav) { display: contents; }
.fb-viewport-frame .section-nav { position: static; }

/* Annual Events hub: the two card rows are separate modules, so the prototype's sibling rule
   (.fa-cards:has(+ .fa-cards--tight)) can't match across the builder's <section> wrappers. */
.page-content > section:has(.fa-cards):has(+ section .fa-cards--tight) .fa-cards { padding-bottom: var(--space-6); }

/* Note Box "leads into the block below": the builder wraps each module in its own <section>, so the
   prototype's sibling rule (.fa-note--lead + section) has to reach into the next wrapper. */
.page-content > section:has(> .fa-note--lead) + section > section:first-child { padding-top: 0; }
.page-content > section:has(> .fa-note--lead) + section .donate-embed__card { max-width: calc(860px - 2 * var(--gutter)); }

/* Builder sections: an expandable list under a text + logo row lines up with that text column (bhh.css §26). */
.page-content > section:has(.prog-overview .prog-aside) + section .vol-acc > .bhh-container { max-width: 1240px; }
.page-content > section:has(.prog-overview .prog-aside) + section .vol-acc > .bhh-container > .acc { max-width: calc(860px - 2 * var(--gutter)); }
.page-content > section:has(.prog-overview:not(.donate-embed)):has(+ section .donate-embed__card--wide) .prog-overview > .bhh-container.fa-prose { max-width: 1240px; }

/* ---------------------------------------------------------------------------
   Page builder: everything on the page is visible while editing
   The canvas is re-rendered from the layout after bhh.js has run, so the
   IntersectionObserver is left watching the discarded nodes and the live
   .reveal elements never get .is-visible — they sit at opacity 0 and whole
   modules look blank in the editor. Nothing should animate in while editing
   anyway, so inside the builder the reveal state is simply off.
   ------------------------------------------------------------------------ */
body.flamingo-editing .reveal,
.fb-viewport-frame .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* the hero lines animate from CSS, not the observer, but in the editor they
   should not replay on every re-render either */
body.flamingo-editing :is(.page-hero__content, .prog-hero__content, .hero__content) > *,
.fb-viewport-frame :is(.page-hero__content, .prog-hero__content, .hero__content) > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ---------------------------------------------------------------------------
   A form placed with the stock Flamingo elements (/accessibility/) sits in a
   Bootstrap .row, whose negative side margins ran it the full width of the page
   and 12px past the viewport on each side — the page scrolled sideways. Give it
   the same reading column as the text above it: 812px at 1440, centred, which is
   a fa-prose container's text width. (Bradley, 2026-10-13)
   ------------------------------------------------------------------------ */
.page-content .row:has(.ff-form) {
  --bs-gutter-x: 0;
  /* the reading column at every width: capped like fa-prose on desktop, and the page's own
     gutter on narrower screens, so the form starts exactly where the copy does */
  width: min(calc(860px - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}
.page-content .row:has(.ff-form) > [class*="col-"] { padding-inline: 0; }