/* custom-overrides.css
   Site-wide CSS overrides loaded AFTER the bundled stylesheet so they win.
   Keep this file small and surgical — every rule should target a specific
   problem in the deployed bundle that we cannot fix at the source level
   (see DEPLOY-NOTES.md: do not rebuild assets/index-CnO6335P.js).

   Default values for content-driven CSS variables. Runtime values come
   from /api/style.php which is linked AFTER this file in index.html.
*/
:root {
  --tbms-footer-logo-mobile: 64px;
  --tbms-footer-logo-desktop: 64px;
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile home-hero spacing
   ─────────────────────────────────────────────────────────────────────
   The bundle renders the homepage hero as:
     <section class="min-h-[90vh] flex items-center justify-center
                     px-6 lg:px-8 pt-16 relative">
   On mobile that leaves a tall empty band above the headline because the
   small block of text gets vertically centered inside a 90vh-tall section.
   Below 768px we shrink the section to its natural content height and
   anchor it near the top with modest padding instead.

   The selector intentionally chains five classes from the bundle so it
   matches only the home hero — the inner-page hero component renders
   without `min-h-[90vh]` / `items-center` and is unaffected. */
@media (max-width: 767px) {
  section.min-h-\[90vh\].flex.items-center.justify-center.pt-16 {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Footer logo size — admin-controlled
   ─────────────────────────────────────────────────────────────────────
   The bundle renders the footer logo as a fixed-height <img> with the
   class `h-16` (64px). We override its height with CSS variables whose
   runtime values come from content.json via /api/style.php. The footer
   only contains one <img> (the logo); social icons render as SVGs. */
footer img {
  height: var(--tbms-footer-logo-mobile) !important;
  max-height: var(--tbms-footer-logo-mobile) !important;
  width: auto !important;
}
@media (min-width: 640px) {
  footer img {
    height: var(--tbms-footer-logo-desktop) !important;
    max-height: var(--tbms-footer-logo-desktop) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Footer newsletter form polish
   ─────────────────────────────────────────────────────────────────────
   The bundle renders the footer newsletter form (component VS) inside
   the fourth footer column when site.newsletter_footer_enabled is true.
   Default styling is functional but the submit button is icon-only and
   visually small. Tighten spacing, widen the button hit area, and give
   the success state a clearer accent treatment. */
footer form input[type="email"] {
  min-height: 40px;
}
footer form button[type="submit"] {
  min-height: 40px;
  min-width: 44px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Engagement-builder section
   ─────────────────────────────────────────────────────────────────────
   Mounted by /assets/engagement-builder.js as the last child of <main>,
   so it sits below all homepage sections and above the global footer.
   Hidden on non-homepage routes by the mount script. */
#engagement-builder-section {
  display: block;
  width: 100%;
}