/*
 *  nb_footer.css
 *
 *  New-branding site footer. Ported from the USA Lacrosse new-brand site
 *  to hand-written CSS so AMMS does not need a Tailwind build step.
 *
 *  Every value below was taken from the reference site's generated
 *  Tailwind bundle (/_nuxt/entry.*.css), not inferred:
 *    --spacing                          .25rem
 *    --default-transition-duration      .15s
 *    --default-transition-timing-fn     cubic-bezier(.4,0,.2,1)
 *    breakpoints                        md 48rem, lg 64rem
 *
 *  Two behaviours of the reference are reproduced deliberately because
 *  they are load-bearing for a pixel match:
 *    1.  Tailwind Preflight. The reference resets margin/padding/border
 *        on *every* element and sets html line-height 1.5. Reproduced
 *        below scoped to `.nb-footer` so AMMS/bootstrap cannot leak in.
 *    2.  `hover:` variants are emitted inside `@media (hover:hover)`,
 *        so hover styling does not stick on touch devices.
 *
 *  Every selector is rooted at `.nb-footer` and every class is prefixed
 *  `nbf-`, so nothing here can collide with core.min.css, style.min.css,
 *  bootstrap, or b2uPanel. Design tokens are re-declared as `--nbf-*`
 *  custom properties scoped to `.nb-footer` for the same reason.
 *
 *  Font families are defined in assets/css/fonts.css, which must be
 *  loaded before this file.
 */

.nb-footer {
    /*  Palette -- verbatim from the reference @theme block  */
    --nbf-navy-900: #00063f;
    --nbf-navy-400: #8f9ab2;
    --nbf-off-white: #faf7f6;
    --nbf-off-white-90: #faf7f6e6;
    --nbf-off-white-80: #faf7f6cc;
    --nbf-off-white-55: #faf7f68c;
    --nbf-gold-800: #e9c546;
    --nbf-usal-red: #fc222d;
    --nbf-divider-1: #d6d3ce;

    /*  Spacing: --spacing * n, and the named spacer tokens  */
    --nbf-spacer-5: 0.8rem;
    --nbf-spacer-7: 1rem;
    --nbf-spacer-10: 1.3rem;
    --nbf-spacer-22: 2.5rem;
    --nbf-px-5: 1.25rem;
    --nbf-px-8: 2rem;

    /*  Type  */
    --nbf-font-display: "Vanguard CF", system-ui, "-apple-system", sans-serif;
    --nbf-font-body: "Mundial Narrow Variable", system-ui, "-apple-system", sans-serif;
    --nbf-regular: 450;
    --nbf-medium: 540;
    --nbf-bold: 640;

    /*  transition-colors, expanded  */
    --nbf-transition-colors:
        color .15s cubic-bezier(.4, 0, .2, 1),
        background-color .15s cubic-bezier(.4, 0, .2, 1),
        border-color .15s cubic-bezier(.4, 0, .2, 1),
        outline-color .15s cubic-bezier(.4, 0, .2, 1),
        text-decoration-color .15s cubic-bezier(.4, 0, .2, 1),
        fill .15s cubic-bezier(.4, 0, .2, 1),
        stroke .15s cubic-bezier(.4, 0, .2, 1);

    width: 100%;
    background-color: var(--nbf-navy-900);
    color: var(--nbf-off-white);
    /*  style.min.css has `footer { position: relative }`; the reference
        footer is static.  */
    position: static;

    /*
     *  The reference footer element carries no font utilities -- it
     *  inherits `body { font-family: var(--font-body) }` and
     *  `html { line-height: 1.5 }`, at the browser default 16px root.
     *  Restated here so AMMS's own body typography is not inherited.
     */
    font-family: var(--nbf-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
}


/* ------------------------------------------------------------------
 *  Scoped Tailwind Preflight
 * ------------------------------------------------------------------ */

/*
 *  Selectors here are DOUBLED (`.nb-footer.nb-footer`) to raise specificity
 *  from (0,1,0) to (0,2,0). Repeating a class on the same element is valid
 *  and changes nothing about what matches -- only the weight.
 *
 *  This is required because AMMS inflates the specificity of plain element
 *  rules with :not() and pseudo-classes, e.g. in style.min.css:
 *
 *      ul:not(.toolbar-menu) li { margin: 0 0 20px; font-family: acumin-pro }
 *
 *  `:not(.toolbar-menu)` counts as a class, making that (0,1,2) -- which
 *  outranks a single-class `.nb-footer *` (0,1,0) and was adding 20px of
 *  margin under every footer link. Doubling to (0,2,0) wins on the class
 *  column. Component rules below are also (0,2,0) and still beat this block
 *  on document order, since they come later in the file.
 */
.nb-footer.nb-footer,
.nb-footer.nb-footer *,
.nb-footer.nb-footer *::before,
.nb-footer.nb-footer *::after,
.nb-footer.nb-footer *::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
    /*
     *  `width`/`height` are reset to their CSS initial value because
     *  style.min.css carries `p { color:#252525; width:100% }`. In the
     *  flex legal bar that made both paragraphs claim the full row and
     *  flex-shrink crushed the links group into a wrapped column.
     *  Component rules below re-declare width/height where needed and
     *  win on document order.
     */
    width: auto;
    height: auto;
}

/*
 *  Descendants only -- NOT the root, which must keep the font-family and
 *  line-height set on `.nb-footer` above. Mirrors the reference, where every
 *  footer element inherits from `body { font-family: var(--font-body) }` and
 *  `html { line-height: 1.5 }`. Also blocks the `acumin-pro` that the same
 *  AMMS rule pushes onto every `li`.
 */
.nb-footer.nb-footer * {
    font-family: inherit;
    line-height: inherit;
}

.nb-footer h1,
.nb-footer h2,
.nb-footer h3,
.nb-footer h4,
.nb-footer h5,
.nb-footer h6 {
    font-size: inherit;
    font-weight: inherit;
}

.nb-footer a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}

/*
 *  AMMS's style.min.css targets anchors in every state:
 *      a:hover { background-color:#001f58 }          -> navy block behind
 *                                                      hovered links
 *      a:hover { text-decoration-color:transparent } -> underline vanishes
 *                                                      on hover
 *      a       { text-decoration-skip-ink:none }
 *
 *  Those are all (0,1,1), so each component rule below neutralises them at
 *  its own (0,2,0) -- which wins on the class column in every state. This
 *  is deliberately NOT done as one blanket `a:link, a:hover {...}` block:
 *  such a rule needs doubled classes to outrank AMMS, and at (0,3,1) it
 *  then outranks the component rules too, which wiped the gold off
 *  .nbf-cta and left a navy box.
 */

.nb-footer ul,
.nb-footer ol,
.nb-footer menu {
    list-style: none;
}

.nb-footer img,
.nb-footer svg,
.nb-footer video,
.nb-footer canvas,
.nb-footer iframe,
.nb-footer embed,
.nb-footer object {
    display: block;
    vertical-align: middle;
}

.nb-footer img,
.nb-footer video {
    max-width: 100%;
    height: auto;
}

.nb-footer button,
.nb-footer input,
.nb-footer select,
.nb-footer textarea,
.nb-footer optgroup {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
    /*  The reference's submit control is a <div>; this keeps a real
        <button> from picking up the UA's centred text.  */
    text-align: inherit;
}

.nb-footer button,
.nb-footer input[type="button"],
.nb-footer input[type="reset"],
.nb-footer input[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
}

.nb-footer ::placeholder {
    opacity: 1;
}


/* ------------------------------------------------------------------
 *  Call to action bar
 *
 *  Reference classes: w-full min-h-22 flex items-center justify-between
 *  gap-4 px-5 md:px-[2rem] hover:bg-opacity-90 transition-colors
 *  lg:py-6 bg-gold-800
 *
 *  `hover:bg-opacity-90` emits nothing -- Tailwind v4 removed the
 *  bg-opacity-* utilities -- so the reference bar has no hover state
 *  and neither does this one. Only the transition declaration remains.
 * ------------------------------------------------------------------ */

.nb-footer .nbf-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 5.5rem;
    padding-inline: var(--nbf-px-5);
    background-color: var(--nbf-gold-800);
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
    transition: var(--nbf-transition-colors);
}

/*  text-display-large + text-[clamp(...)] + leading-[1.1] + text-navy-blue-900  */
.nb-footer .nbf-cta-title {
    color: var(--nbf-navy-900);
    font-family: var(--nbf-font-display);
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: 0.125rem;
    font-weight: var(--nbf-bold);
}

.nb-footer .nbf-cta-break,
.nb-footer .nbf-cta-sub {
    display: none;
}

/*  width/height come from the svg's own 32x32 attributes  */
.nb-footer .nbf-cta-arrow {
    width: 2rem;
    height: 2rem;
}

.nb-footer .nbf-cta-arrow path {
    fill: var(--nbf-navy-900);
}


/* ------------------------------------------------------------------
 *  Link columns
 * ------------------------------------------------------------------ */

/*  py-spacer-10 border-b border-navy-blue-400 px-5 md:px-[2rem] min-h-102.5  */
.nb-footer .nbf-links {
    padding-block: var(--nbf-spacer-10);
    padding-inline: var(--nbf-px-5);
    border-bottom: 1px solid var(--nbf-navy-400);
    min-height: 25.625rem;
}

/*  flex flex-wrap justify-between md:gap-spacer-22 w-full  */
.nb-footer .nbf-links-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

/*  flex flex-col py-5 min-w-45  */
.nb-footer .nbf-col {
    display: flex;
    flex-direction: column;
    padding-block: 1.25rem;
    min-width: 11.25rem;
}

/*  text-eyebrow-black text-off-white mb-spacer-7  */
.nb-footer .nbf-col-title {
    color: var(--nbf-off-white);
    font-family: var(--nbf-font-body);
    font-size: 1rem;
    line-height: 1.125rem;
    letter-spacing: 0.125rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: var(--nbf-spacer-7);
}

/*  flex flex-col gap-spacer-7  */
.nb-footer .nbf-col-list {
    display: flex;
    flex-direction: column;
    gap: var(--nbf-spacer-7);
}

/*  text-body-small text-off-white transition-colors font-[450]!  */
.nb-footer .nbf-col-link {
    color: var(--nbf-off-white);
    font-family: var(--nbf-font-body);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 450;
    /*  Blocks AMMS `a:hover { background-color:#001f58 }` (0,1,1)  */
    background-color: transparent;
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
    transition: var(--nbf-transition-colors);
}


/* ------------------------------------------------------------------
 *  Newsletter -- desktop (>= md)
 * ------------------------------------------------------------------ */

/*  hidden md:flex justify-between border-b border-navy-blue-400 min-h-47  */
.nb-footer .nbf-newsletter {
    display: none;
    justify-content: space-between;
    border-bottom: 1px solid var(--nbf-navy-400);
    min-height: 11.75rem;
}

/*  w-4/12 flex flex-col items-start justify-center gap-spacer-10
    border-r border-navy-blue-400 py-5 px-[2rem]  */
.nb-footer .nbf-newsletter-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--nbf-spacer-10);
    width: 33.3333%;
    padding-block: 1.25rem;
    padding-inline: var(--nbf-px-8);
    border-right: 1px solid var(--nbf-navy-400);
}

/*  flex items-center h-full px-6  */
.nb-footer .nbf-newsletter-brand-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline: 1.5rem;
    background-color: transparent;
}

/*  The reference img carries no size utilities: it is bounded only by
    Preflight's `max-width:100%; height:auto`.  */
.nb-footer .nbf-newsletter-brand-logo {
    max-width: 100%;
    height: auto;
}

/*  w-8/12 flex flex-col gap-spacer-10 py-5 px-[2rem]  */
.nb-footer .nbf-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--nbf-spacer-10);
    width: 66.6667%;
    padding-block: 1.25rem;
    padding-inline: var(--nbf-px-8);
}

/*  text-display-medium text-off-white  */
.nb-footer .nbf-newsletter-title {
    color: var(--nbf-off-white);
    font-family: var(--nbf-font-display);
    font-size: 3rem;
    line-height: 3.25rem;
    letter-spacing: 0.125rem;
    font-weight: var(--nbf-medium);
}

/*  w-full flex  */
.nb-footer .nbf-newsletter-row {
    display: flex;
    width: 100%;
}

/*  flex-1 h-16 border border-navy-blue-400 border-r-0 bg-transparent
    px-4 text-off-white placeholder:text-[#FAF7F68C] outline-none
    transition-colors

    No typography utility on the reference input: it inherits font,
    line-height and letter-spacing from the footer via Preflight's
    `font: inherit`.  */
.nb-footer .nbf-newsletter-input {
    flex: 1;
    min-width: 0;
    height: 4rem;
    padding-inline: 1rem;
    border: 1px solid var(--nbf-navy-400);
    border-right-width: 0;
    background-color: transparent;
    color: var(--nbf-off-white);
    outline-style: none;
    transition: var(--nbf-transition-colors);
}

.nb-footer .nbf-newsletter-input::placeholder {
    color: var(--nbf-off-white-55);
    opacity: 1;
}

/*  focus:border-usal-red focus:border-r-divider-level-1  */
.nb-footer .nbf-newsletter-input:focus {
    border-color: var(--nbf-usal-red);
    border-right-color: var(--nbf-divider-1);
    outline-style: none;
}

/*  bg-off-white text-navy-blue-900 px-5 flex items-center transition-colors  */
.nb-footer .nbf-newsletter-submit {
    display: flex;
    align-items: center;
    padding-inline: var(--nbf-px-5);
    background-color: var(--nbf-off-white);
    color: var(--nbf-navy-900);
    transition: var(--nbf-transition-colors);
}

/*  no-underline text-body-default tracking-[2px]! uppercase
    + inline style color:var(--color-navy-blue-900)  */
.nb-footer .nbf-newsletter-submit-label {
    display: inline-flex;
    align-items: center;
    color: var(--nbf-navy-900);
    font-family: var(--nbf-font-body);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: var(--nbf-regular);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration-line: none;
    transition: var(--nbf-transition-colors);
}

/*  text-body-small text-off-white/80  */
.nb-footer .nbf-newsletter-note {
    color: var(--nbf-off-white-80);
    font-family: var(--nbf-font-body);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: var(--nbf-regular);
}

/*  underline transition-colors  */
.nb-footer .nbf-newsletter-note a {
    color: inherit;
    text-decoration-line: underline;
    background-color: transparent;
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
    text-decoration-skip-ink: auto;
    transition: var(--nbf-transition-colors);
}


/* ------------------------------------------------------------------
 *  Newsletter + brand -- mobile (< md)
 * ------------------------------------------------------------------ */

/*  md:hidden py-spacer-10 border-b border-navy-blue-400 flex flex-col
    gap-spacer-10 px-5  */
.nb-footer .nbf-newsletter-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--nbf-spacer-10);
    padding-block: var(--nbf-spacer-10);
    padding-inline: var(--nbf-px-5);
    border-bottom: 1px solid var(--nbf-navy-400);
}

/*  flex w-full flex-col gap-spacer-5  */
.nb-footer .nbf-newsletter-mobile-row {
    display: flex;
    flex-direction: column;
    gap: var(--nbf-spacer-5);
    width: 100%;
}

/*  h-16 w-full border border-off-white/55 bg-transparent px-4
    text-off-white placeholder:text-off-white/55 outline-none  */
.nb-footer .nbf-newsletter-mobile .nbf-newsletter-input {
    flex: 0 1 auto;
    width: 100%;
    border: 1px solid var(--nbf-off-white-55);
}

/*  focus:border-usal-red only -- no border-r override on mobile  */
.nb-footer .nbf-newsletter-mobile .nbf-newsletter-input:focus {
    border-color: var(--nbf-usal-red);
    border-right-color: var(--nbf-usal-red);
}

/*  flex min-h-16 w-full items-center justify-center bg-off-white px-5  */
.nb-footer .nbf-newsletter-mobile .nbf-newsletter-submit {
    justify-content: center;
    width: 100%;
    min-height: 4rem;
}

/*  md:hidden py-spacer-10 border-b border-navy-blue-400 flex flex-col
    items-center justify-center gap-spacer-10 px-5  */
.nb-footer .nbf-brand-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nbf-spacer-10);
    padding-block: var(--nbf-spacer-10);
    padding-inline: var(--nbf-px-5);
    border-bottom: 1px solid var(--nbf-navy-400);
}

/*  Reference is `w-15.5 h-25` (3.875rem x 6.25rem) on a broken src="/".
    Box kept; object-fit added so the real logo is not stretched.  */
.nb-footer .nbf-brand-mobile-logo {
    width: 3.875rem;
    height: 6.25rem;
    object-fit: contain;
}

/*  text-body-small text-off-white  */
.nb-footer .nbf-brand-mobile-caption {
    color: var(--nbf-off-white);
    font-family: var(--nbf-font-body);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: var(--nbf-regular);
}


/* ------------------------------------------------------------------
 *  Legal bar
 *
 *  p-[2rem] md:flex items-center justify-center md:justify-between
 *  gap-spacer-10 -- below md this is a block, so items-center,
 *  justify-center and gap do not apply. Centring comes from the
 *  children's own text-center.
 * ------------------------------------------------------------------ */

.nb-footer .nbf-legal {
    padding: var(--nbf-px-8);
}

/*  text-body-small text-off-white text-center font-[450]!  */
.nb-footer .nbf-legal-text {
    color: var(--nbf-off-white);
    font-family: var(--nbf-font-body);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 450;
    text-align: center;
}

/*  pt-[1.5rem] md:pt-0  */
.nb-footer .nbf-legal-charity {
    padding-top: 1.5rem;
}

/*  flex justify-center gap-spacer-10 pt-[1.5rem] md:pt-0  */
.nb-footer .nbf-legal-links {
    display: flex;
    justify-content: center;
    gap: var(--nbf-spacer-10);
    padding-top: 1.5rem;
}

/*  text-body-small text-off-white underline transition-colors font-[450]!  */
.nb-footer .nbf-legal-link {
    color: var(--nbf-off-white);
    font-family: var(--nbf-font-body);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 450;
    text-decoration-line: underline;
    /*  Blocks AMMS a:hover background + transparent underline colour  */
    background-color: transparent;
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
    text-decoration-skip-ink: auto;
    transition: var(--nbf-transition-colors);
}


/* ------------------------------------------------------------------
 *  md breakpoint -- reference emits `@media (width>=48rem)`
 * ------------------------------------------------------------------ */

@media (min-width: 48rem) {
    .nb-footer .nbf-cta {
        padding-inline: var(--nbf-px-8);
    }

    .nb-footer .nbf-cta-title {
        font-size: clamp(3rem, 6vw, 4.5rem);
        line-height: 4.5rem;
    }

    .nb-footer .nbf-cta-break {
        display: block;
    }

    .nb-footer .nbf-cta-sub {
        display: inline;
    }

    .nb-footer .nbf-links {
        padding-inline: var(--nbf-px-8);
    }

    .nb-footer .nbf-links-grid {
        gap: var(--nbf-spacer-22);
    }

    .nb-footer .nbf-newsletter {
        display: flex;
    }

    .nb-footer .nbf-newsletter-mobile,
    .nb-footer .nbf-brand-mobile {
        display: none;
    }

    .nb-footer .nbf-legal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--nbf-spacer-10);
    }

    .nb-footer .nbf-legal-charity,
    .nb-footer .nbf-legal-links {
        padding-top: 0;
    }
}


/* ------------------------------------------------------------------
 *  lg breakpoint -- reference emits `@media (width>=64rem)`
 * ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .nb-footer .nbf-cta {
        padding-block: 1.5rem;
    }
}


/* ------------------------------------------------------------------
 *  hover: variants
 *
 *  The reference emits every `hover:` utility inside
 *  `@media (hover:hover)`, so hover states never latch on touch
 *  devices. Mirrored here.
 * ------------------------------------------------------------------ */

@media (hover: hover) {
    .nb-footer .nbf-col-link:hover {
        color: var(--nbf-off-white-80);
    }

    .nb-footer .nbf-newsletter-submit:hover {
        background-color: var(--nbf-off-white-90);
    }

    .nb-footer .nbf-newsletter-submit:hover,
    .nb-footer .nbf-newsletter-submit-label:hover {
        cursor: pointer;
    }

    .nb-footer .nbf-newsletter-note a:hover {
        color: var(--nbf-off-white-80);
    }

    .nb-footer .nbf-legal-link:hover {
        color: var(--nbf-off-white-80);
    }
}


/* ------------------------------------------------------------------
 *  Legacy bootstrap-grid block inside the footer ("Powered by ...")
 *
 *  The `.py-2.footer-bg > .container > .row > .col-md-12.text-center`
 *  markup relies on bootstrap grid, but the scoped Preflight above resets
 *  `width`/`margin`/`padding` on every descendant at (0,2,0) -- which
 *  outranks bootstrap's (0,1,0) `.container` and `.col-md-12`. The column
 *  therefore collapsed to content width and `.text-center` had nothing to
 *  centre within, pinning the text to the left.
 *
 *  Bootstrap's `!important` utilities (.py-2, .align-items-center,
 *  .text-center) survive the reset; only the plain-specificity ones need
 *  restoring. These selectors are (0,3,0), so they win cleanly.
 * ------------------------------------------------------------------ */

.nb-footer .footer-bg {
    text-align: center;
}

.nb-footer .footer-bg .container {
    width: 100%;
    margin-inline: auto;
}

.nb-footer .footer-bg .row {
    justify-content: center;
}

.nb-footer .footer-bg .col-md-12 {
    width: 100%;
}