/* themes/techprosolutions/css/components/footer-hotfix.css */
/*
  Legacy footer hotfix (scoped — touches nothing else in the footer):
  1. Social icons: inline SVG (fill: currentColor) replacing the broken
     linkicon glyph font. Pill shape/size still comes from css/new.css via
     the preserved .item-list--linkicon / .linkicon__item wrapper classes.
  2. ISO/SSL trust badges: strict stacked-text flexbox alignment.
  3. About/legal strip (#block-techprosolutions-footerinfo): fine-print
     prose in two columns, softened dividers, bottom row polish.
  4-pixel rule: every dimension is a multiple of 4px, expressed in rem.
*/

.footer-trust-badges,
.linkicon--svg {
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-5: 1.25rem;  /* 20px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
}

/* ------------------------------------------------------------------ */
/* 1. Social icons — white inline SVG on navy pills (light footer)      */
/*                                                                      */
/* The light-footer override at the end of new.css blankets the footer  */
/* with `.main-footer * { color: #1C3557 !important }` and              */
/* `.main-footer svg path { fill: #1C3557 !important }`, and the pill   */
/* background inherits --c-primary green — navy icons on green pills.   */
/* These rules out-specify that blanket: navy #1C3557 pill, white icon  */
/* (10.9:1), hover = brand accent green 2 #1D9E75 (white ≥3:1 non-text).*/
/* ------------------------------------------------------------------ */

.main-footer .item-list--linkicon .linkicon--svg {
  list-style: none;
}

/* !important: the legacy 40px sizing in new.css uses a 7-class selector. */
.main-footer .item-list--linkicon .linkicon--svg li {
  width: var(--space-12) !important;   /* 48px — 40px pill + 4px pad each side */
  height: var(--space-12) !important;
}

.main-footer .item-list--linkicon .linkicon--svg .linkicon__item {
  background: #1C3557 !important;
  color: #FFFFFF !important;
}

.main-footer .item-list--linkicon .linkicon--svg .linkicon__item:hover {
  background: #1D9E75 !important;
}

.main-footer .item-list--linkicon .linkicon--svg .social-icon-svg,
.main-footer .item-list--linkicon .linkicon--svg .social-icon-svg path {
  fill: #FFFFFF !important;
}

.main-footer .item-list--linkicon .linkicon--svg .social-icon-svg {
  width: var(--space-5);   /* 20px — 50% of the 40px pill */
  height: var(--space-5);  /* 20px */
  display: block;
}

/* Unmapped link text falls back to a small readable label. */
.main-footer .item-list--linkicon .linkicon--svg .linkicon__fallback-text {
  font-size: 0.75rem; /* 12px */
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #FFFFFF !important;
}

.main-footer .item-list--linkicon .linkicon--svg .linkicon__item:focus-visible {
  outline: 2px solid #3CB944;
  outline-offset: 2px;
  border-radius: 9999px;
}

/* ------------------------------------------------------------------ */
/* 2. Trust badges — strict flexbox architecture                        */
/* ------------------------------------------------------------------ */

.footer-trust-badges {
  display: flex;
  gap: var(--space-8);            /* 32px */
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;                /* small screens: badges stack, never overflow */
}

.footer-trust-badges .trust-badge-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);            /* 12px */
}

.footer-trust-badges .badge-img {
  flex-shrink: 0;
  max-height: var(--space-12);    /* 48px */
  width: auto;
}

.footer-trust-badges .badge-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* !important beats the light-footer `.main-footer * { color !important }`
   blanket in new.css so the subtitle keeps its softer gray (7.5:1 on white). */
.footer-trust-badges .badge-title {
  font-size: 0.875rem;            /* 14px */
  font-weight: 600;
  color: #1C3557 !important;
  line-height: 1.2;
}

.footer-trust-badges .badge-subtitle {
  font-size: 0.75rem;             /* 12px */
  color: #4B5563 !important;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ */
/* 3. About/legal strip — the footer-info block                        */
/*                                                                      */
/* new.css squeezes the SEO prose into 75ch at 12px/600 and the         */
/* light-footer blanket forces it bold navy — a heavy half-width text   */
/* wall with a dead right side. Rebuild it as quiet fine print flowing  */
/* in two columns across the full row. !important is required against   */
/* both the ID-selector rules and the `.main-footer * { color …        */
/* !important }` blanket at the end of new.css.                         */
/* ------------------------------------------------------------------ */

.main-footer #block-techprosolutions-footerinfo {
  /* Soften the hard navy divider above the strip. */
  border-top-color: rgba(28, 53, 87, 0.12) !important;
}

/* SEO prose: fine print, normal weight, breathing room. */
.main-footer #block-techprosolutions-footerinfo > .text p {
  max-width: none !important;
  font-size: 0.8125rem;           /* 13px fine print */
  font-weight: 400 !important;
  line-height: 1.6;
  letter-spacing: 0;
  color: #45464F !important;      /* brand body gray, 9.4:1 on white */
  margin: 0 0 1rem;               /* 16px between paragraphs */
}

.main-footer #block-techprosolutions-footerinfo > .text p:last-child {
  margin-bottom: 0;
}

/* Two balanced columns fill the empty right half on desktop. */
@media screen and (min-width: 992px) {
  .main-footer #block-techprosolutions-footerinfo > .text {
    column-count: 2;
    column-gap: var(--space-12);  /* 48px */
  }
  .main-footer #block-techprosolutions-footerinfo > .text p {
    margin-bottom: 0;
  }
  .main-footer #block-techprosolutions-footerinfo > .text p + p {
    margin-top: 1rem;             /* 16px */
  }
}

/* Bottom row: company block left, trust badges right, on one baseline. */
.main-footer .footer-info-bottom {
  align-items: center;
  padding-top: 2rem !important;   /* 32px — was 48px, too detached */
}

.main-footer .footer-info-bottom .left-text-wrapper h4 {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 700 !important;
  letter-spacing: 0.05em;         /* small uppercase label: heavy tracking */
  line-height: 1.2;
  padding-bottom: 0.5rem !important; /* 8px */
}

.main-footer .footer-info-bottom .left-text-wrapper p {
  gap: 0.5rem 1.5rem;             /* 8px / 24px */
}

.main-footer .footer-info-bottom .left-text-wrapper p a {
  font-size: 0.875rem;            /* 14px */
  font-weight: 500 !important;
  line-height: 1.5;
}

/* Hover: AA teal (4.8:1 on white) — brand green fails contrast for text. */
.main-footer .footer-info-bottom .left-text-wrapper p a:hover {
  color: #17835F !important;
}

.main-footer .footer-info-bottom .left-text-wrapper p a::before {
  background: #17835F;
}

.main-footer .footer-info-bottom .left-text-wrapper p a:focus-visible {
  outline: 2px solid #3CB944;
  outline-offset: 2px;
}

/* Copyright: quiet last line under its own hairline. */
.main-footer #block-techprosolutions-footerinfo .copyright-text {
  margin-top: 1.5rem;             /* 24px */
  padding-top: 1rem;              /* 16px */
  border-top: 1px solid rgba(28, 53, 87, 0.08);
}

.main-footer #block-techprosolutions-footerinfo .copyright-text p {
  font-size: 0.75rem;             /* 12px */
  font-weight: 400 !important;
  line-height: 1.5;
  color: #4B5563 !important;
  margin: 0;
}