/* Footer CMS object - the public band only.

   Everything themeable is a custom property on .ft, and every default resolves to a site-theme.css
   token, so rebranding that one file rebrands the footer. These read the SHELL tokens
   (--site-footer-*) rather than brand roles: --site-color-accent is allowed to be a neutral, so it
   cannot double as the colour that picks something out.

   TWO AXES, and they compose. A footer carries one STRUCTURE modifier naming the markup tree its
   partial rendered - .ft--sitemap, .ft--centered, .ft--simple, or none for the standard one - and
   one THEME modifier naming its colours: .ft--light, .ft--dark, or none. Structures set layout and
   never a colour; themes set tokens and never a layout, so any structure wears any theme.

   Structures are registered in FooterStructures, themes in FooterThemes. Neither list is inferred
   from this file, so a modifier here with no entry there renders but cannot be chosen.

   The editor chrome lives in footer-editor.css, the same split navigation-megamenu.css and
   navigation-editor.css make. This file is in the ~/Content/css bundle that every public page
   loads. */

.ft {
    /* ---- The body: light, with ordinary page text on it ---- */
    --ft-bg: var(--site-color-background, #ffffff);
    --ft-fg: var(--site-color-text, #344054);
    --ft-fg-muted: var(--site-color-text-muted, #667085);
    --ft-border: var(--site-color-border, #d8dee7);

    /* ---- The accent strip ----
       A gradient rather than a flat fill, taken from the theme's own brand gradients so a rebrand
       changes one file. --site-gradient-1 sweeps primary into its hover shade.

       The text on it defaults to --site-color-primary-contrast, not to white, which is a
       legibility rule rather than a preference: a theme whose primary is light needs dark text.

       --site-footer-utility-text overrides it, for a site that has to match an existing footer the
       token cannot reproduce. Taking that override is a decision about that site - see
       site-theme-biohorizons.css, which sets white on orange knowingly.

       .ft--dark pins the token back to the contrast value below, so the override applies to the
       Default and Light bodies only. */
    /* Top to bottom, not left to right. The theme's --site-gradient-* tokens are 90deg horizontal
       sweeps built for wide bars; this strip is short and full-bleed, where a horizontal sweep
       reads as one side being dimmer than the other. So it builds its own vertical gradient from
       the same two theme colours rather than reusing the token. */
    --ft-utility-bg: linear-gradient(180deg, var(--site-color-primary, #f58025), var(--site-color-primary-hover, #d96b14));
    --ft-utility-fg: var(--site-footer-utility-text, var(--site-color-primary-contrast, #212529));

    /* Derived from --ft-utility-fg rather than from the contrast token directly, so the social
       pills' borders follow the text wherever it goes. Reading the token twice meant a site that
       overrode the text to white got white icons inside a 45%-black ring. */
    --ft-utility-border: color-mix(in srgb, var(--ft-utility-fg) 45%, transparent);

    /* The one colour that picks something out: a link on hover. Reads the link colour rather than
       --site-color-accent, which a theme is allowed to make a neutral - under the BioHorizons
       theme the accent IS a grey, so a footer that used it to mark something marked nothing. */
    --ft-accent: var(--site-color-link, #087f8c);

    --ft-transition: var(--site-transition-fast);

    background: var(--ft-bg);
    color: var(--ft-fg);
    font-size: var(--site-font-size-small);
}

/* ---------------------------------------------------------------------------
   The accent strip
   Full-bleed colour, container-width content. Its own element rather than a hard-stop gradient on
   .ft: a fixed pixel colour break survives exactly until the strip's contents wrap.
   --------------------------------------------------------------------------- */

.ft__utility {
    padding-block: var(--site-space-3);
    background: var(--ft-utility-bg);
    color: var(--ft-utility-fg);
}

.ft__utility-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-space-3);
    align-items: center;

    /* space-between with nothing on the left would push a lone call to action there. The strip
       renders even when empty, so both children have to be optional without moving the other. */
    justify-content: space-between;
}

/* A strip with only the call to action group keeps it on the right, where it sits when the social
   list is present too. Matched on the GROUP, not on .ft__cta: the buttons are always wrapped now,
   so :only-child on the button stopped matching the moment a second one was added and a
   socials-less standard footer would have pulled the pair to the left. */
.ft__utility-inner > .ft__cta-group:only-child {
    margin-left: auto;
}

/* Holds the one or two call-to-action buttons as a row. It exists even for a single button so the
   :only-child rule above has one stable thing to match, and so the three footer partials share one
   container rather than each inventing a wrapper.

   wrap, not nowrap: two of the three parents are column-direction and narrow - .ft__brand in the
   sitemap footer is flex: 0 1 16rem - so on a tight brand block the second button drops under the
   first instead of forcing the block wider and squeezing the link columns beside it. */
.ft__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-space-3);
    align-items: center;
}

.ft__body {
    padding-block: var(--site-space-6) var(--site-space-5);
}

.ft__inner {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
    align-items: flex-start;
}

/* There are no [hidden] container rules here. The partials no longer render empty regions - the
   editor has no in-place preview, the same choice the navigation editor made - so a region with
   nothing in it is not rendered at all. */

/* inline-flex so the anchor is exactly the size of the logo inside it - an inline <a> around a
   block image leaves a few pixels of descender space below, which shows up as a focus ring that
   does not fit the picture. */
.ft__logo-link {
    display: inline-flex;
    border-radius: var(--site-radius-small);
}

/* height, not max-height, and it matters. A logo SVG usually ships with a viewBox and no width or
   height attributes, which gives it an intrinsic RATIO but no intrinsic SIZE. max-height is only a
   constraint, so both dimensions stay auto, and as a flex item of the anchor above the image then
   resolves to zero - present in the DOM, 0x0 on screen, with no broken-image icon to hint at it.
   A definite height gives the ratio something to work from. Same rule as the header's brand logo,
   for the same reason. */
.ft__logo {
    display: block;
    height: var(--site-brand-logo-height-footer, var(--site-brand-logo-height));
    width: auto;
    max-width: 100%;
}

/* Outlined rather than filled. It sits ON the accent strip, so a filled button would need a third
   colour that contrasts with the gradient underneath it; a border in the strip's own text colour
   needs none and cannot be broken by a rebrand. */
.ft__cta {
    display: inline-flex;
    gap: var(--site-space-2);
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    padding: var(--site-space-2) var(--site-space-4);
    border: 1px solid currentColor;
    border-radius: var(--site-radius-small);
    color: var(--ft-utility-fg);
    font-weight: var(--site-font-weight-semibold);
    text-decoration: none;
    transition: background var(--ft-transition);
}

/* min-width, not width: the buttons are author-filled, and the two labels are rarely the same
   length. Without a floor a short one - "Shop", "Contact" - shrinks to its text and sits beside a
   much wider neighbour looking like a different kind of control. 10rem is the measured floor at
   which the pair reads as a pair; a longer label still grows past it.

   justify-content comes with it. The box is now wider than its text whenever the label is short,
   and without this the text sits against the left padding edge and the extra width reads as a
   mistake rather than as a size.

   10rem x 2 plus the group's gap is 21.5rem, so below about 344px of available width the pair
   stops fitting side by side - the group is flex-wrap: wrap, so the second button drops under the
   first and both keep their width. The narrow case that matters is .ft__brand in the sitemap
   footer, at a 16rem basis: that already wrapped before this rule and still does. */


.ft__cta:hover,
.ft__cta:focus-visible {
    background: color-mix(in srgb, var(--ft-utility-fg) 12%, transparent);
    color: var(--ft-utility-fg);
}

/* Filled, for the structures that put the call to action on the BODY rather than on the strip -
   the sitemap and centred footers. An outline in the body's text colour would read as a bordered
   link rather than the footer's one action. The fill is the brand primary with its own contrast
   token on top, which is the pairing the theme guarantees. */
.ft__cta--solid {
    border-color: var(--site-color-primary, #f58025);
    background: var(--site-color-primary, #f58025);
    color: var(--site-color-primary-contrast, #212529);
}

.ft__cta--solid:hover,
.ft__cta--solid:focus-visible {
    border-color: var(--site-color-primary-hover, #d96b14);
    background: var(--site-color-primary-hover, #d96b14);
    color: var(--site-color-primary-contrast, #212529);
}

/* The body-context outline button, and the partner to --solid.

   The base .ft__cta is a utility-STRIP control: it takes its colour from --ft-utility-fg, which is
   whatever reads on the orange gradient behind it. That is why the two body footers have only ever
   used --solid, which states its own colours and so works anywhere. Putting a bare .ft__cta in the
   body of a centred or sitemap footer paints it --ft-utility-fg on --ft-bg - white on white under
   this theme - and the button disappears. Caught in review; the second call to action is the first
   outline button the body has ever carried.

   Border on the brand colour, text on the body colour. Primary-on-background is around 2.4:1 under
   the BioHorizons theme, so the brand colour marks the edge and the readable token carries the
   words. Hover fills with primary and moves the text onto the same chain .btn-primary reads in
   bootstrap-theme.css, so a theme that puts white on filled controls gets white here too.

   It MUST stay below .ft__cta and .ft__cta--solid. Every one of these is a single class, so they
   all weigh the same and source order is the only thing deciding - placed above the base rule,
   this one is simply overwritten by it. */
.ft__cta--outline {
    border-color: var(--site-color-primary, #f58025);
    background: transparent;
    color: var(--ft-fg);
}

.ft__cta--outline:hover,
.ft__cta--outline:focus-visible {
    border-color: var(--site-color-primary, #f58025);
    background: var(--site-color-primary, #f58025);
    color: var(--site-color-primary-button-text, var(--site-color-primary-contrast, #212529));
}

/* Column count is written onto the element by Razor from the number of columns actually rendered,
   so the grid can never declare more tracks than there is content for. Below the menu breakpoint
   the columns stack, which is the same 768px the header uses. */
/* width, not flex. This used to be a flex item of the old row-direction .ft__top, where
   flex: 1 1 28rem gave it a 28rem WIDTH basis. .ft__inner is column-direction now, so in a column
   container flex-basis is the BLOCK size - the same declaration would pin the grid to 448px tall
   and leave ~370px of empty space under a three-link column. */
.ft__columns {
    display: grid;
    width: 100%;
    gap: var(--site-space-5);
    grid-template-columns: repeat(var(--ft-columns, 2), minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .ft__columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ft__col-heading {
    margin-bottom: var(--site-space-2);
    color: var(--ft-fg-muted);
    font-size: var(--site-font-size-small);
    font-weight: var(--site-font-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ft__col-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft__col-item + .ft__col-item {
    margin-top: var(--site-space-2);
}

.ft__link {
    color: var(--ft-fg);
    text-decoration: none;
    transition: color var(--ft-transition);
}

.ft__link:hover,
.ft__link:focus-visible {
    color: var(--ft-accent);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   The flat link row
   One horizontal list, wrapping. Separators are drawn here rather than typed into the markup: a
   literal "|" between links is read out by a screen reader on every one of them.
   --------------------------------------------------------------------------- */

.ft__links {
    width: 100%;
    padding-bottom: var(--site-space-3);
    border-bottom: 1px solid var(--ft-border);
}

.ft__links-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft__links-item {
    display: inline-flex;
    align-items: center;
}

/* The separator belongs to the item that follows it, so the row never ends in one however it
   wraps. aria-hidden is not available on a pseudo-element, but generated content is not part of
   the accessibility tree in any current engine - which is the whole reason it is drawn this way
   rather than written into the markup. */
.ft__links-item + .ft__links-item::before {
    margin-inline: var(--site-space-2);
    color: var(--ft-border);
    content: "|";
}

/* Below the breakpoint the row is going to wrap, and a separator belonging to the item that
   follows it becomes a separator at the START of every wrapped line. Gaps instead: the same
   grouping, and nothing that can land at the edge of a line. */
@media (max-width: 767.98px) {
    .ft__links-list {
        gap: var(--site-space-1) var(--site-space-4);
    }

    .ft__links-item + .ft__links-item::before {
        content: none;
    }
}

/* The closing bar: social on one side, the legal line on the other, under a rule. Used by the
   sitemap footer. Full width, because .ft__inner is a column-direction flex container with
   align-items: flex-start - without this it would shrink to fit and space-between would have
   nothing to distribute. */
.ft__bar {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--site-space-4);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--site-space-4);
    border-top: 1px solid var(--ft-border);
}

.ft__social {
    display: flex;
    gap: var(--site-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* On the accent strip, so these read the strip's colours rather than the body's.

   font-size is what sizes the GLYPH, and it was missing. Font Awesome draws these at a multiple
   of the element's own font-size, so with none set they inherited the body's 1rem and sat small
   inside a 2.25rem circle - the October review's "the size of the circles are good but the icon
   inside of the circle should be increased". The circle is unchanged; only the mark inside it
   grows - 1.25rem in a 2.25rem ring, so the mark fills 56% of the circle where it filled 44%.
   Width and height stay in rem so the ring keeps its size whatever the glyph does. */
.ft__social-link {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ft-utility-border);
    border-radius: var(--site-radius-pill);
    color: var(--ft-utility-fg);
    font-size: 1.25rem;
    text-decoration: none;
    transition: background var(--ft-transition), border-color var(--ft-transition);
}

.ft__social-link:hover,
.ft__social-link:focus-visible {
    border-color: currentColor;
    background: color-mix(in srgb, var(--ft-utility-fg) 12%, transparent);
    color: var(--ft-utility-fg);
}

/* One sentence, not two columns: the copyright and the terms link flow inline and wrap together.
   A space between them rather than a flex gap, because they are words in a line. */
.ft__legal {
    margin: 0;
    color: var(--ft-fg-muted);
}

/* The standard footer makes this a <span> inside the legal line; _SimpleFooter makes it a <p>
   inside a wrapping <div>. The rule is here for the second one - a paragraph's default margins
   would otherwise push the terms link onto its own line. */
.ft__copyright {
    display: inline;
    margin: 0;
}

.ft__terms {
    margin-left: .25rem;
    color: var(--ft-fg-muted);
    text-decoration: underline;
}

.ft__terms:hover,
.ft__terms:focus-visible {
    color: var(--ft-fg);
}

/* The grid cell for one link column. The tracks are declared on .ft__columns; this exists only to
   stop a long link from widening its track and squeezing the others, which minmax(0, 1fr) cannot
   do on its own once the cell's own min-content width is in play. */
.ft__col {
    min-width: 0;
}

/* Staff-only markers on a footer that is still in review, applied by SiteFooterViewModel.StateClass
   and only ever for a signed-in staff member. Shape rather than colour - a dashed outline in
   currentColor is legible on the dark band, the light band and the brand band alike, and survives a
   rebrand; a fixed amber would not. The same reasoning as .mm-in-review on the mega menu. */
.ft-in-review {
    outline: 1px dashed currentColor;
    outline-offset: -4px;
}

.ft__state {
    display: inline-block;
    margin: 0 0 var(--site-space-3);
    padding: 0 .375rem;
    border: 1px solid currentColor;
    border-radius: .1875rem;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Structures
   .ft--sitemap, .ft--centered and .ft--simple describe which markup tree the partial rendered, and
   each is registered in FooterStructures. Themes are the .ft--light / .ft--dark token overrides
   further down; the two axes compose, which is why neither sets a colour.
   --------------------------------------------------------------------------- */

/* ---------- Sitemap: brand block left, headed columns right, bar underneath ---------- */

.ft--sitemap .ft__body {
    padding-block: var(--site-space-7) var(--site-space-5);
}

.ft__top {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--site-space-6);
    align-items: flex-start;
    justify-content: space-between;
}

/* Basis, not a fixed width: the brand block holds whatever the logo's natural size is and gives
   the columns the rest. It sits in a ROW-direction container, so flex-basis is the inline size -
   unlike .ft__columns inside .ft__inner, which is why that one uses width instead. */
.ft__brand {
    display: flex;
    flex: 0 1 16rem;
    flex-direction: column;
    gap: var(--site-space-3);
    align-items: flex-start;
}

/* Inside .ft__top the columns take the remaining space; the grid itself is defined below and
   shared with every structure that draws columns. */
.ft__top > .ft__columns {
    flex: 1 1 24rem;
    width: auto;
}

/* Links an author added without a column, on a structure built around columns. Full width under
   the grid rather than squeezed beside it, so they read as an extra group rather than a broken
   one. */
.ft__loose {
    width: 100%;
}

.ft__loose .ft__col-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-space-2) var(--site-space-4);
}

.ft__loose .ft__col-item + .ft__col-item {
    margin-top: 0;
}

/* ---------- Centered: one axis, everything stacked ---------- */

.ft--centered .ft__body {
    padding-block: var(--site-space-6);
    text-align: center;
}

/* Overrides .ft__inner's flex-start. Every child is centred on the same axis, which is the whole
   effect - so the children that would otherwise stretch are centred rather than full width. */
.ft--centered .ft__inner {
    align-items: center;
    gap: var(--site-space-4);
}

.ft--centered .ft__links-list,
.ft--centered .ft__social {
    justify-content: center;
}

/* ---------- Simple: the legal bar alone ---------- */

.ft--simple {
    padding-block: var(--site-space-5);
}

/* ---------------------------------------------------------------------------
   Variants
   Each is a token override and nothing more. Adding one here plus an entry in FooterThemes is the
   whole job of shipping a new look.
   --------------------------------------------------------------------------- */

/* Both variants override the BODY only. The strip keeps its gradient in every one of them: it is
   the footer's brand mark, and a theme that wants it changed changes --site-gradient-1.

   Light: a pale band rather than the page background, for a site whose page is already white. */
.ft--light {
    --ft-bg: var(--site-color-surface, #f8fafc);
    --ft-fg: var(--site-color-text, #344054);
    --ft-fg-muted: color-mix(in srgb, var(--site-color-text, #344054) 80%, var(--site-color-surface, #f8fafc));
    --ft-border: var(--site-color-border, #d8dee7);
}

/* Dark: the body inverts to the shell's footer colour, for a site that wants the old dark band
   under the strip. This was the default before the footer became two bands; it is a variant now
   because the standard design is light. Every value is derived from the shell tokens, so it
   follows a rebrand rather than pinning a colour. */
.ft--dark {
    --ft-bg: var(--site-footer-background, #10263b);
    --ft-fg: var(--site-footer-text, #e2e8f0);
    --ft-fg-muted: color-mix(in srgb, var(--site-footer-text, #e2e8f0) 78%, var(--site-footer-background, #10263b));
    --ft-border: color-mix(in srgb, var(--site-footer-text, #e2e8f0) 18%, transparent);

    /* The body is dark now, so the hover colour has to be legible on it rather than on white. */
    --ft-accent: var(--site-color-accent, #a8c95f);

    /* The strip ignores --site-footer-utility-text under this theme, by design: that override exists
       to brighten the strip above a LIGHT body, and against a dark body the strip is already the
       bright element. Pinning it here keeps the override scoped to Default and Light without the
       theme file having to know which bodies exist. */
    --ft-utility-fg: var(--site-color-primary-contrast, #212529);
}