/**
 * @file
 * Loaded after Barrio component CSS (see HSHP2021.libraries.yml).
 *
 * Bootstrap 5 spacing (systematic):
 * - Set shared tokens on :root here so they load after Barrio/Bootstrap and apply
 *   site-wide (grid gutters, .container padding, .row negative margins, columns).
 *   BS5’s .row sets --bs-gutter-x: 1.5rem locally; repeat on .row or margins stay rem-based.
 * - Keep numbers in sync with $bs-gutter-x in assets/stylesheets/_variables.scss.
 * - For one-off fixes, prefer component SCSS; add new :root tokens here only when
 *   many regions need the same BS variable (e.g. --bs-border-radius-lg).
 * - Utility renames (pull-right → float-end, mr-* → me-*) need template/class passes
 *   or find-replace; variables do not fix wrong class names.
 * - At viewport ≥1400px BS5 raises .container max-width from 1140px to 1320px; that
 *   changes “margin” (centering inset) by ~90px per side vs viewports just below 1400px
 *   or vs BS3/BS4-era builds — see the max-width cap below if prod should stay xl-wide.
 *
 * css/style.css is inserted before bootstrap_barrio/components/form.css and
 * other component files, so fieldset/box rules there often lose the cascade.
 *
 * D9 commonly rendered login + newsletter processed_text as <fieldset>; D11
 * uses <div>. Normalize both to the same box model with !important so it wins.
 *
 * On D11 alone, those resets usually change nothing visible (divs + Bootstrap 5
 * reboot already match the “flattened” box model). Production still uses
 * Bootstrap 4 + fieldsets, so it sits looser. The login-only pre-footer padding
 * below compensates so /user/login matches the old vertical rhythm.
 */

:root {
  /* 30px total gutter → 15px horizontal padding per .container side (BS3-era rhythm). */
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

/* Late-loaded Barrio/Bootstrap can reset :root tokens; repeat on html + .container + .row. */
html {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

.container {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

/* Keep primary layout at the xl (1140px) cap above 1400px — BS5 xxl default is 1320px; include hero + nested .main-content .container* so they match header/footer. */
@media (min-width: 1400px) {
  .header .main-header .container,
  #main-wrapper .main-content.container,
  .main-content .container,
  .main-content .container-sm,
  .main-content .container-md,
  .main-content .container-lg,
  .main-content .container-xl,
  .main-content .container-xxl,
  .hero .container,
  .hero .container-sm,
  .hero .container-md,
  .hero .container-lg,
  .hero .container-xl,
  .hero .container-xxl,
  .pre-footer > .container,
  .footer > .container {
    max-width: 1140px;
  }
}

/* Approximate legacy gap: shorter login block (div vs fieldset) + BS5 vs BS4. */
body.path-user.page-user-login .pre-footer {
  padding-top: 36px !important;
}

/* Newsletter: one rule per concern (comma list).
 * Title→field gap: h2 margin-bottom (30px tuned to match prod rhythm) — do not zero h2 margin with !important
 * (that blocks DevTools and differs from BS3). Spacing lives on h2, not wrapper padding. */
.pre-footer
  .pre-footer-info
  .webform-submission-subscribe-to-our-newsletter-form
  fieldset,
.pre-footer
  .pre-footer-info
  .webform-submission-subscribe-to-our-newsletter-form
  #edit-processed-text,
.webform-submission-subscribe-to-our-newsletter-form fieldset,
.webform-submission-subscribe-to-our-newsletter-form #edit-processed-text,
form.webform-submission-subscribe-to-our-newsletter-form[id^="webform-submission-subscribe-to-our-newsletter"]
  fieldset,
form.webform-submission-subscribe-to-our-newsletter-form[id^="webform-submission-subscribe-to-our-newsletter"]
  #edit-processed-text {
  display: flow-root;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  border-style: solid !important;
  border-color: transparent !important;
  min-width: 0 !important;
}

/* Barrio .mb-3 on wrappers — kill extra bottom margin on title block only. */
.pre-footer
  .pre-footer-info
  .webform-submission-subscribe-to-our-newsletter-form
  #edit-processed-text.mb-3,
.webform-submission-subscribe-to-our-newsletter-form #edit-processed-text.mb-3,
form.webform-submission-subscribe-to-our-newsletter-form[id^="webform-submission-subscribe-to-our-newsletter"]
  #edit-processed-text.mb-3 {
  margin-bottom: 0 !important;
}

.pre-footer
  .pre-footer-info
  .webform-submission-subscribe-to-our-newsletter-form
  .js-form-item.form-item-email-address,
.webform-submission-subscribe-to-our-newsletter-form
  .js-form-item.form-item-email-address,
form.webform-submission-subscribe-to-our-newsletter-form[id^="webform-submission-subscribe-to-our-newsletter"]
  .js-form-item.form-item-email-address {
  /* No !important — Barrio mb-3 / flex contexts need tweakable margins in DevTools. */
  margin-top: 0;
  padding-top: 0;
}

.navbar-brand {
  padding-left: 15px;
}