/* =========================================================
   FFB Connect Quick Actions Strip
   All rules are scoped under .ffb-qas so styles cannot leak.
   Brand tokens are confirmed against ffbf.com and act as the
   default palette. The font defaults to DM Sans through the
   HubSpot font field and falls back to system fonts.
   ========================================================= */

.ffb-qas {
  /* Confirmed First Federal Bank palette (ffbf.com) */
  --ffb-blue: #0094b1;   /* brand teal blue: icons, hovers */
  --ffb-navy: #013d5b;   /* deep navy: titles */
  --ffb-gold: #fcd206;   /* brand gold accent */
  --ffb-gray: #5b6b79;   /* muted description text */
  --ffb-sky: #e6f0f8;    /* light tint */
  --ffb-sky-soft: #f3f7fb; /* soft section background */
  --ffb-line: #dde6ee;   /* borders and dividers */
  --white: #ffffff;

  /* Field driven fallbacks (overridden inline by the module) */
  --ffb-qas-bg: var(--ffb-sky-soft);
  --ffb-qas-font: "DM Sans", system-ui, sans-serif;
  --ffb-qas-item-gap: 28px;
  --ffb-qas-cta-gap: 24px;
  --ffb-qas-vpad: 14px;

  box-sizing: border-box;
  width: 100%;
  background: var(--ffb-qas-bg);
  font-family: var(--ffb-qas-font);
}

.ffb-qas *,
.ffb-qas *::before,
.ffb-qas *::after {
  box-sizing: border-box;
}

.ffb-qas--top-line {
  border-top: 1px solid var(--ffb-line);
}

.ffb-qas--bottom-line {
  border-bottom: 1px solid var(--ffb-line);
}

/* Inner row holds the action list and the right side call to action.
   align-items: center keeps the items and the button on one optical line. */
.ffb-qas__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ffb-qas-vpad) 24px;
  display: flex;
  align-items: center;
  gap: 12px var(--ffb-qas-cta-gap);
}

.ffb-qas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--ffb-qas-item-gap);
}

/* ---- CTA anchored far right: the item list fills the remaining row ---- */
.ffb-qas--cta-sep .ffb-qas__list {
  flex: 1 1 auto;
}

.ffb-qas--cta-sep.ffb-qas--dist-space-between .ffb-qas__list {
  justify-content: space-between;
}

.ffb-qas--cta-sep.ffb-qas--dist-start .ffb-qas__list {
  justify-content: flex-start;
}

.ffb-qas--cta-sep.ffb-qas--dist-center .ffb-qas__list {
  justify-content: center;
}

.ffb-qas--cta-sep.ffb-qas--dist-end .ffb-qas__list {
  justify-content: flex-end;
}

/* ---- CTA inline: items and the button align together as one group ---- */
.ffb-qas--cta-inline .ffb-qas__list {
  flex: 0 1 auto;
}

.ffb-qas--cta-inline.ffb-qas--dist-space-between .ffb-qas__inner {
  justify-content: space-between;
}

.ffb-qas--cta-inline.ffb-qas--dist-start .ffb-qas__inner {
  justify-content: flex-start;
}

.ffb-qas--cta-inline.ffb-qas--dist-center .ffb-qas__inner {
  justify-content: center;
}

.ffb-qas--cta-inline.ffb-qas--dist-end .ffb-qas__inner {
  justify-content: flex-end;
}

.ffb-qas__item {
  display: flex;
}

/* Balanced transparent borders top and bottom reserve the gold underline
   space without shifting the content, so the icon and text stay centered. */
.ffb-qas__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  text-decoration: none;
  border-radius: 10px;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

/* Icon tile: 38px rounded white square with a hairline border */
.ffb-qas__tile {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--ffb-line);
  border-radius: 10px;
  color: var(--ffb-blue);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ffb-qas__tile svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Title plus optional description */
.ffb-qas__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ffb-qas__title {
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.2;
  color: var(--ffb-navy);
  letter-spacing: 0.005em;
}

.ffb-qas__desc {
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--ffb-gray);
}

/* Hover and focus apply only to real links, never to static items.
   The tile fills with brand blue and a gold underline accent appears. */
a.ffb-qas__link:hover .ffb-qas__tile,
a.ffb-qas__link:focus-visible .ffb-qas__tile {
  background: var(--ffb-blue);
  border-color: var(--ffb-blue);
  color: var(--white);
}

a.ffb-qas__link:hover,
a.ffb-qas__link:focus-visible {
  border-bottom-color: var(--ffb-gold);
}

a.ffb-qas__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ffb-blue) 45%, transparent);
  outline-offset: 3px;
}

@supports not (outline-color: color-mix(in srgb, red, blue)) {
  a.ffb-qas__link:focus-visible {
    outline: 3px solid var(--ffb-blue);
    outline-offset: 3px;
  }
}

/* Static item: display only, no pointer, no hover affordance */
.ffb-qas__link--static {
  cursor: default;
}

/* ---------- Right side call to action ---------- */
.ffb-qas__cta-wrap {
  flex: 0 0 auto;
  display: flex;
}

.ffb-qas--cta-divider .ffb-qas__cta-wrap {
  border-left: 1px solid var(--ffb-line);
  padding-left: 16px;
}

.ffb-qas__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--ffb-blue);
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(1, 61, 91, 0.16);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Text stays white in every state */
.ffb-qas__cta,
.ffb-qas__cta:link,
.ffb-qas__cta:visited,
.ffb-qas__cta:hover,
.ffb-qas__cta:focus,
.ffb-qas__cta:focus-visible,
.ffb-qas__cta:active {
  color: var(--white);
}

.ffb-qas__cta-icon {
  flex: 0 0 auto;
  display: inline-flex;
}

.ffb-qas__cta-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.ffb-qas__cta:hover {
  background: color-mix(in srgb, var(--ffb-blue) 86%, var(--ffb-navy));
  box-shadow: 0 7px 18px rgba(1, 61, 91, 0.22);
  transform: translateY(-1px);
}

.ffb-qas__cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ffb-blue) 45%, transparent);
  outline-offset: 3px;
}

@supports not (outline-color: color-mix(in srgb, red, blue)) {
  .ffb-qas__cta:hover {
    background: var(--ffb-navy);
  }
  .ffb-qas__cta:focus-visible {
    outline: 3px solid var(--ffb-blue);
    outline-offset: 3px;
  }
}

/* Stack cleanly on small screens */
@media (max-width: 700px) {
  .ffb-qas__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--ffb-qas-vpad) 18px;
    gap: 12px;
  }

  .ffb-qas__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .ffb-qas__link {
    width: 100%;
    padding: 10px 8px;
  }

  .ffb-qas__cta-wrap {
    width: 100%;
  }

  .ffb-qas--cta-divider .ffb-qas__cta-wrap {
    border-left: none;
    border-top: 1px solid var(--ffb-line);
    padding-left: 0;
    padding-top: 12px;
  }

  .ffb-qas__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffb-qas__link,
  .ffb-qas__tile,
  .ffb-qas__cta {
    transition: none;
  }

  .ffb-qas__cta:hover {
    transform: none;
  }
}