/* Footer tab fields (MB-29, from Alexander Group AG-3), Views/Partials/site/footer.cshtml: footer logo, phone buttons,
   footer menu, copyright line and website credit. Loaded only on pages whose footer shows one of them. Tokens only;
   plain like the rest of the starter (a project restyles it). Phone first. */
.site-footer__top {
  display: grid;
  gap: var(--space-6, 24px);
  margin-bottom: var(--space-6, 24px);
}
.site-footer__brand {
  display: grid;
  gap: var(--space-4, 16px);
  justify-items: start;
}
.site-footer__logo { display: inline-block; }
.site-footer__logo-image {
  display: block;
  width: auto;
  max-width: min(var(--footer-logo-width, 15rem), 100%); /* MB-37: "Footer logo width" (empty = 240 px) */
  height: auto;
  max-height: calc(var(--footer-logo-width, 15rem) * 4 / 15); /* 4rem at 240 px: a tall logo stays as low as before */
}
.site-footer__phones,
.site-footer__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__phones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
}
.site-footer__menu ul {
  display: grid;
  gap: var(--space-1, 4px) var(--space-6, 24px);
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
}
.site-footer__menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  color: var(--color-text, #111111);
}
.site-footer__menu a[aria-current="page"] { text-decoration-thickness: 2px; }
.site-footer__credit a { color: inherit; }

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }
  .site-footer__brand:only-child { grid-column: 1 / -1; }
  .site-footer__menu:only-child { grid-column: 1 / -1; }
}

/* MB-30 (from Boyd's footer, shape only): footer buttons, link columns and legal links. */
.site-footer__buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
}
.site-footer__columns {
  display: grid;
  gap: var(--space-6, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.site-footer__heading {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--fs-body, 1rem);
  color: var(--color-text, #111111);
}
.site-footer__column ul,
.site-footer__legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__column a,
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  color: var(--color-text, #111111);
}
.site-footer__column a[aria-current="page"],
.site-footer__legal a[aria-current="page"] { text-decoration-thickness: 2px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-6, 24px);
}
.site-footer__bottom .site-footer__name { margin: 0; }
.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4, 16px);
}

@media (min-width: 768px) {
  .site-footer__columns:only-child { grid-column: 1 / -1; }
}

/* MB-34 (generic options from Alexander Group's footer): site name in the logo's place, the headed profiles icon list,
   and the website credit at the end of the bottom row. Phone buttons stay plain (a project adds an arrow in CSS). */
.site-footer__logo--text {
  font-size: var(--fs-h4, 1.125rem);
  font-weight: 700;
  color: var(--color-text, #111111);
  text-decoration: none;
  min-height: var(--tap-min, 44px);
  display: inline-flex;
  align-items: center;
}
.site-footer__profiles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}
.site-footer__profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min, 44px);
  min-height: var(--tap-min, 44px);
  color: var(--color-text, #111111);
}
.site-footer__profile-icon { width: 1.5rem; height: 1.5rem; flex: none; }
/* MB-139 (FCM-4 c, FuelChief's Follow column, captured CSS): "Profile icons in solid circles": 32px circles in the link colour
   with the icon in the footer's ground colour, 30px apart (each link keeps its 44px tap area, so the gaps are 18px and the
   row starts 6px further left). */
.site-footer__profiles--solid .site-footer__profiles-list { gap: 18px; margin-inline-start: -6px; }
.site-footer__profiles--solid .site-footer__profile-icon { width: 2rem; height: 2rem; }
.site-footer__profile-glyph { fill: none; stroke: var(--band-bg, var(--color-page, #ffffff)); }
.site-footer__profile-glyph--filled { fill: var(--band-bg, var(--color-page, #ffffff)); }
.site-footer__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.site-footer__bottom .site-footer__credit { margin: 0; }

@media (min-width: 768px) {
  .site-footer__profiles { grid-column: 2; }
  .site-footer__profiles:only-child { grid-column: 1 / -1; }
  .site-footer__bottom .site-footer__credit { margin-left: auto; }
}

/* MB-75 (from Boyd's footer, shape only; DEMO-LOOK1, #135): closing call to action, contact column and "Footer colour".
   Each only when its field is filled; the colours are the section colour's own tokens (css/shared/themes.css). */
.site-footer__cta {
  display: grid;
  gap: var(--space-4, 16px) var(--space-8, 32px);
  align-items: center;
  padding-block: var(--space-8, 32px);
  margin-bottom: var(--space-8, 32px);
  border-bottom: var(--border-width, 1px) solid var(--color-hairline, #d0d0d0);
}
.site-footer__cta-heading {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h2, 1.75rem);
  line-height: var(--lh-heading, 1.15);
  color: var(--color-heading, #111111);
}
@media (min-width: 768px) {
  .site-footer__cta { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer__cta .site-footer__buttons { justify-content: flex-end; }
}
.site-footer__contact-list { font-style: normal; }
.site-footer__contact-list p { margin: 0 0 var(--space-3, 12px); }
.site-footer__contact-line a,
.site-footer__office a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
}
.site-footer__contact-line a { color: var(--color-text, #111111); }
.site-footer__office { line-height: var(--lh-body, 1.5); }
.site-footer__office-name { font-weight: var(--fw-semibold, 600); }

/* Footer colour: the layout's <footer> becomes one full-width band; the contents keep the page's 70rem column. */
.site-footer--band {
  max-width: none;
  border-top: 0;
  padding-block: var(--section-space, 48px) var(--space-6, 24px);
  padding-inline: max(var(--page-gutter, 1rem), calc((100% - 70rem) / 2 + 1rem));
  --color-hairline: color-mix(in srgb, currentColor 25%, transparent);
}
.site-footer--band .site-footer__cta { padding-top: 0; margin-bottom: var(--space-10, 40px); padding-bottom: var(--space-10, 40px); }
.site-footer--band .site-footer__top { margin-bottom: var(--space-10, 40px); }
.site-footer--band .site-footer__heading {
  margin-bottom: var(--space-3, 12px);
  font-size: var(--fs-label, 0.8125rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading, inherit);
}
.site-footer--band .site-footer__column a,
.site-footer--band .site-footer__menu a { min-height: 2.25rem; }
.site-footer--band .site-footer__contact { margin-bottom: var(--space-6, 24px); font-style: normal; }
/* The bottom row: copyright, legal links, credit, then the footer-slot links (Cookie settings, Accessibility statement). */
.site-footer--band .site-footer__bottom,
.site-footer--band > .site-footer__name {
  padding-top: var(--space-6, 24px);
  border-top: var(--border-width, 1px) solid var(--color-hairline);
  font-size: var(--fs-body-sm, 0.875rem);
}
.site-footer--band > p:not(.site-footer__name) {
  display: inline-block;
  margin: var(--space-2, 8px) var(--space-6, 24px) 0 0;
  font-size: var(--fs-body-sm, 0.875rem);
}
/* MB-78 (DEMO-LOOK2 open point 1): one legal row. The bottom row's box steps aside (display: contents; its ::before keeps
   the full-width line), so the copyright, the legal links and the footer-slot links (Cookie settings, Accessibility
   statement) share one wrapping row, with the website credit last at the right when there is room. Footer colour only:
   a plain footer is left as it was (a project such as Alexander Group places its own Cookie settings link). */
.site-footer--band:has(> .site-footer__bottom) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4, 16px);
}
.site-footer--band:has(> .site-footer__bottom) > * { flex: 1 1 100%; min-width: 0; }
.site-footer--band > .site-footer__bottom { display: contents; }
.site-footer--band > .site-footer__bottom::before {
  content: "";
  flex: 1 1 100%;
  margin-bottom: var(--space-6, 24px);
  border-top: var(--border-width, 1px) solid var(--color-hairline);
}
.site-footer--band > .site-footer__bottom > *,
.site-footer--band:has(> .site-footer__bottom) > p:not(.site-footer__name) {
  flex: 0 1 auto;
  margin: 0;
  font-size: var(--fs-body-sm, 0.875rem);
}
.site-footer--band > .site-footer__bottom > .site-footer__name { margin-inline-end: var(--space-2, 8px); }
.site-footer--band > .site-footer__bottom > .site-footer__credit { order: 1; }
.site-footer--band:has(> .site-footer__bottom) > p:not(.site-footer__name) > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
}
@media (min-width: 768px) {
  .site-footer--band > .site-footer__bottom > .site-footer__credit { margin-inline-start: auto; }
}
@media (min-width: 992px) {
  /* Brand, link columns and contact column side by side; the profiles join the brand column. */
  .site-footer--band .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
    gap: var(--space-8, 32px);
  }
  .site-footer--band .site-footer__top > .site-footer__brand:only-child,
  .site-footer--band .site-footer__top > .site-footer__columns:only-child { grid-column: 1 / -1; }
  .site-footer--band .site-footer__profiles { grid-column: 1; grid-row: 2; }
  .site-footer--band .site-footer__top:not(:has(.site-footer__brand)) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .site-footer--band .site-footer__top:not(:has(.site-footer__contact-column)) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .site-footer--band .site-footer__top:not(:has(.site-footer__brand)):not(:has(.site-footer__contact-column)) { grid-template-columns: minmax(0, 1fr); }
}

/* MB-78 (DEMO-LOOK2 open point 2): links in the footer's labelled link lists (footer menu, link columns, contact column,
   legal row, and the Cookie settings / Accessibility statement links on a coloured footer's legal row) are plain, with an
   underline on hover and on keyboard focus; the page you are on stays underlined. Each list is a labelled navigation
   list, so colour isn't the only cue (WCAG 1.4.1). Links inside running text (the website credit, the one-block contact
   details, footer notes) keep their underline. The focus ring (starter.css :focus-visible) is unchanged. */
.site-footer__menu a,
.site-footer__column a,
.site-footer__legal a,
.site-footer--band > .site-consent-link a,
.site-footer--band > .site-accessibility-link a {
  text-decoration-line: none;
  text-underline-offset: 0.2em;
}
.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__column a:hover,
.site-footer__column a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer--band > .site-consent-link a:hover,
.site-footer--band > .site-consent-link a:focus-visible,
.site-footer--band > .site-accessibility-link a:hover,
.site-footer--band > .site-accessibility-link a:focus-visible,
.site-footer__menu a:where([aria-current="page"]),
.site-footer__column a:where([aria-current="page"]),
.site-footer__legal a:where([aria-current="page"]) {
  text-decoration-line: underline;
}

/* MB-125 (FuelChief import, #135): the Newsletter column and the Text column, each only when filled; plain like the other
   columns (a project restyles them). Compact form: the fields and the button in one row, the button after the last field,
   wrapping under it when the column is narrow. "Newsletter email box without focus ring" (off by default) takes the focus
   ring off the email box only; the button keeps its own. */
.site-footer__form--compact .site-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3, 12px);
}
.site-footer__form--compact .site-form > * { flex: 1 1 100%; min-width: 0; }
.site-footer__form--compact .site-form > .site-form__fields { flex: 1 1 12rem; }
.site-footer__form--compact .site-form > .site-form__actions { flex: 0 0 auto; }
.site-footer__newsletter--no-focus-ring .site-form__control input[type="email"]:focus-visible { outline: none; }
/* MB-139 (FCM-4 b, FuelChief's footer, captured CSS): "Newsletter as one email box". The email box is 49px tall with a 1px
   line in the footer's text colour and the footer's own ground; the send button (150 x 42px, the footer's text colour with
   the ground's colour for its words, capitals and a small arrow) sits inside it, 4px from its top and right edges; on hover
   its colours fade in 0.3s (ease), as the old site's buttons. The box's
   words are its placeholder, in the box's text colour. A site sets the colours on .site-footer__newsletter--one-box:
   --newsletter-line, --newsletter-text, --newsletter-button-bg, --newsletter-button-text and the two hover ones. */
.site-footer__newsletter--one-box {
  --newsletter-line: var(--band-text, currentColor);
  --newsletter-text: var(--band-text, currentColor);
  --newsletter-button-bg: var(--band-text, var(--color-text, #111111));
  --newsletter-button-text: var(--band-bg, var(--color-page, #ffffff));
  --newsletter-button-hover-bg: var(--btn-1-hover-bg, var(--newsletter-button-bg));
  --newsletter-button-hover-text: var(--btn-1-hover-fg, var(--newsletter-button-text));
}
.site-footer__newsletter--one-box .site-form--one-box .site-form__control { position: relative; }
.site-footer__newsletter--one-box .site-form--one-box .site-form__control input[type="email"] {
  min-height: 49px;
  padding: 0 calc(150px + 4px + 15px) 0 15px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--newsletter-text);
  background: transparent;
  border: 1px solid var(--newsletter-line);
  border-radius: var(--radius-sm, 4px);
}
.site-footer__newsletter--one-box .site-form--one-box .site-form__control input[type="email"]::placeholder { color: var(--newsletter-text); opacity: 1; }
.site-footer__newsletter--one-box .site-form--one-box .site-form__control .site-form__submit {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 150px;
  min-height: 0;
  height: 42px;
  padding: 0 15px;
  font-family: var(--btn-font, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--newsletter-button-text);
  background: var(--newsletter-button-bg);
  border: 1px solid var(--newsletter-line);
  border-radius: var(--btn-radius, 3px);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; /* the old site's buttons: all .3s ease */
}
.site-footer__newsletter--one-box .site-form--one-box .site-form__submit:hover {
  color: var(--newsletter-button-hover-text);
  background: var(--newsletter-button-hover-bg);
}
.site-footer__newsletter--one-box .site-form--one-box .site-form__submit-arrow { flex: none; width: 8px; height: 13px; }
/* Under the box only the "Sending…" status line, which takes no room while it is empty. In rows, so the fields' 12rem
   (the compact form's basis above) is a width, not a 192px height. */
.site-footer__newsletter--one-box .site-footer__form--compact .site-form--one-box { flex-direction: row; row-gap: 0; }
.site-footer__newsletter--one-box .site-form--one-box > .site-form__actions { flex-basis: 100%; }
.site-footer__newsletter--one-box .site-form--one-box .site-form__status:not(:empty) { margin-top: var(--space-3, 12px); }
.site-footer__text-body { margin: 0; }
@media (min-width: 768px) {
  .site-footer__newsletter,
  .site-footer__text { grid-column: 2; }
  .site-footer__newsletter:only-child,
  .site-footer__text:only-child { grid-column: 1 / -1; }
}

/* MB-136 round 2 (FuelChief footer, lead item 1 a): "Link columns in one row above the rest". The link columns come first,
   across the whole footer: two to a row on phones, three from 992px, all in one row from 1200px, as the original site.
   Under them the footer's own grid; from 1200px the logo and the other columns side by side in one row. Off = as before. */
.site-footer__top--columns-row > .site-footer__columns {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer--band .site-footer__top--columns-row .site-footer__profiles { grid-row: 3; }
@media (min-width: 992px) {
  .site-footer__top--columns-row > .site-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .site-footer__top--columns-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-8, 32px);
  }
  .site-footer__top--columns-row > * { flex: 1 1 0; min-width: 0; }
  .site-footer__top--columns-row > .site-footer__columns {
    flex-basis: 100%;
    order: -1;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* MB-152 (FuelChief import, M-FIX-3 and M-FIX-5), each only when its option is set. A column heading that is a link keeps
   the heading's look. Legal links first: their own row across the bottom line, centred, a line between the links; the
   copyright, credit and extra link follow. The extra link (e.g. Client Login) ends the bottom line. */
.site-footer__heading a { color: inherit; text-decoration: none; }
.site-footer__heading a:hover,
.site-footer__heading a:focus-visible { text-decoration: underline; }
.site-footer__bottom--legal-first .site-footer__legal { flex: 1 1 100%; }
.site-footer__bottom--legal-first .site-footer__legal ul { justify-content: center; gap: 0; }
.site-footer__bottom--legal-first .site-footer__legal li + li::before { content: "|"; padding-inline: var(--space-2, 8px); }
.site-footer__bottom .site-footer__extra { margin: 0; }
.site-footer__extra a { color: inherit; }