/* ============================================================================
 * tp-footer.css — v1 (2026-07-27)
 *
 * THE ONE stylesheet for everything from the CTA cards down to the copyright
 * line. It replaces three near-identical ~290-line inline <style> blocks that
 * lived in footer.php / footerhome.php / footerInsta.php and had already drifted
 * apart (three different grid definitions, three different phone link paddings,
 * only one of the three ever received the mobile overhaul). Every component fix
 * had to be made three times, and the last one still missed a file.
 *
 * LOAD ORDER — this must come AFTER tp-foundation.css.
 * The rules below used to live in an inline <style> inside <body>, which beat
 * every stylesheet on document order. Moving them into an external sheet drops
 * them down the cascade, so they have to sit last among the sheets or
 * tp-foundation.css starts winning ties it never used to win. Loaded from:
 *   otherLinks/mainFiles/header/header.php       (24 pages)
 *   otherLinks/mainFiles/header/headerhome.php   (/ and /promo)
 *   legal/{about,contact,dmca,privacy-policy,terms}.php  (own <head>, 5 pages)
 *
 * DESIGN NOTES
 * - Column content is CENTRED (owner's explicit ask). Centred ragged lists are
 *   harder to scan than left-aligned ones, so the measure is capped (~220px per
 *   column) and heading + list share one axis: nothing is centred "loosely",
 *   every column is a narrow centred block of the same width.
 * - The grid is FLEX, not grid. `repeat(auto-fit, minmax(200px,1fr))` stretched
 *   a leftover 5th column across a whole row at some widths. Wrapped flex with
 *   `justify-content:center` centres the leftovers instead, at their real width.
 * - Headings outrank links by CASE + TRACKING + COLOUR rather than by size, so
 *   the gold stays quiet: 11px uppercase gold label over 13.6px neutral links.
 * - Dark only. One accent (--tp-gold). Two radii (6px surfaces / 8px controls).
 *   No gradients, no glow, no hover-lift, no emoji. Tokens only, no hex
 *   literals — the four `[data-theme="light"]` overrides that used to close each
 *   inline block are gone because --tp-chrome / --tp-line already flip.
 * ========================================================================== */


/* ============================================================================
 * 1. CTA CARDS
 * Unchanged in substance — this block was unified across all three footers
 * immediately before the extraction, so it is ported as-is and now cannot drift
 * again. It carries the SUPERSET of selectors: footerInsta is the only file that
 * renders .tp-cta-pink, but defining it here keeps one rule for all three.
 * Only two things were added: an explicit 44px control height, and a full-width
 * button on phone (the card already stacks there).
 * ========================================================================== */
.tp-cta-section {
  padding: 30px 20px;
  max-width: 600px;
  margin: 0 auto;
}
/* PRIMARY card: gold-tinted surface, the loud one. Tokens, not literals, so it
   tracks the palette instead of drifting from it. */
.tp-cta-card {
  background: var(--tp-gold-soft, rgba(232, 184, 74, 0.12));
  border: 1px solid var(--tp-gold-line, rgba(232, 184, 74, 0.30));
  border-radius: var(--tp-r-sm, 6px);
  padding: 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
/* Every NON-primary card: one neutral site surface + the site border token.
   These used to be three separate foreign palettes stacked down the page —
   Tailwind purple, blue and pink. Only the top card is the primary, so the rest
   carry no colour of their own; the one piece of gold left on them is the
   hairline of their button, where gold means "interactive". */
.tp-cta-card.tp-cta-secondary,
.tp-cta-card.tp-cta-tertiary,
.tp-cta-card.tp-cta-pink {
  background: var(--tp-surface, #161b22);
  border-color: var(--tp-line, #30363d);
}
.tp-cta-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.tp-cta-icon {
  font-size: 2rem;
}
/* The emoji purge emptied these spans but left their flex gap behind, so every
   card carried ~15px of dead space where the icon used to be. */
.tp-cta-icon:empty,
.tp-cta-btn > span:empty {
  display: none;
}
/* !important because modern-theme.css ships a bare `h4{color:var(--text-primary)
   !important}`. It loads long before this file, and !important cannot be beaten
   by load order — only by a more specific !important. (0,1,1) beats (0,0,1). */
.tp-cta-content h4 {
  margin: 0;
  color: var(--tp-text, #e6edf3) !important;
  font-size: 1.1rem;
}
.tp-cta-content p {
  margin: 4px 0 0;
  color: var(--tp-text-2, #b6bec8);
  font-size: 0.9rem;
}
/* Solid gold = the primary action. The 1px border is transparent-free on
   purpose: it makes every button the same height, since the others have one. */
.tp-cta-btn {
  background: var(--tp-gold, #e8b84a);
  color: #000 !important;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--tp-gold, #e8b84a);
  border-radius: var(--tp-r-btn, 8px);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--tp-t, .18s ease), border-color var(--tp-t, .18s ease);
}
.tp-cta-btn:hover {
  background: var(--tp-gold-lo, #d4a53f);
  border-color: var(--tp-gold-lo, #d4a53f);
  text-decoration: none;
  color: #000 !important;
}
.tp-cta-btn:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a);
  outline-offset: 2px;
}
/* Quieter twins: no fill, neutral label, gold only on the hairline. The fallback
   for --tp-text must be the DARK ink: on any page that paints before
   tp-foundation.css lands, the light-theme value would be near-black on a dark
   card. */
.tp-cta-btn.tp-cta-btn-secondary,
.tp-cta-btn.tp-cta-btn-tertiary,
.tp-cta-btn.tp-cta-btn-pink {
  background: transparent;
  border-color: var(--tp-gold-line, rgba(232, 184, 74, 0.30));
  color: var(--tp-text, #e6edf3) !important;
}
.tp-cta-btn.tp-cta-btn-secondary:hover,
.tp-cta-btn.tp-cta-btn-tertiary:hover,
.tp-cta-btn.tp-cta-btn-pink:hover {
  background: var(--tp-surface-2, #1c2128);
  border-color: var(--tp-gold, #e8b84a);
  color: var(--tp-text, #e6edf3) !important;
}


/* ============================================================================
 * 2. SHARE ROW
 * Was five brand-coloured pills (#25D366 / #000 / #1877F2 / #0088cc) plus a
 * gradient-filled copy button, scaling 5% on hover. That is five foreign
 * colours, a gradient and a hover-lift in one strip — the loudest thing on the
 * page sitting directly above a quiet footer. They are now one neutral chip
 * idiom on the site's surface token; the brand is still legible from the glyph
 * itself, which is the part people actually recognise.
 * ========================================================================== */
.tp-share-section {
  text-align: center;
  padding: 28px 20px 8px;
  margin-bottom: 12px;
}
/* !important for the same reason as .tp-cta-content h4 — see the note there. */
.tp-share-section h4 {
  margin: 0 0 14px;
  color: var(--tp-text-3, #98a2ae) !important;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.tp-share-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--tp-surface, #161b22);
  background-image: none;
  border: 1px solid var(--tp-line, #30363d);
  border-radius: var(--tp-r-btn, 8px);
  color: var(--tp-text-2, #b6bec8);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--tp-t, .18s ease), border-color var(--tp-t, .18s ease),
              background var(--tp-t, .18s ease);
}
.tp-share-btn svg {
  flex-shrink: 0;
}

/* ── Counter-rules for the legacy !important block ────────────────────────────
 * modern-theme.css is loaded 3rd, long before this file, and still ships the
 * 2024 share-button block VERBATIM:
 *
 *   .tp-share-btn,.share-btn,button.tp-share-btn,button.share-btn{
 *       box-shadow:none!important; border:none!important; outline:none!important }
 *   .tp-share-whatsapp{background-color:#25D366 !important}
 *   .tp-share-twitter {background-color:#000    !important}
 *   .tp-share-facebook{background-color:#1877F2 !important}
 *   .tp-share-telegram{background-color:#0088cc !important}
 *   .tp-share-copy{background:linear-gradient(135deg,#e8b84a,#d4a53f)!important;
 *                  color:#000!important}
 *
 * !important cannot be out-ordered — only out-specified by another !important.
 * Plain declarations here lose to it no matter where this file sits in the
 * cascade, so without this block the "neutral chip" share row above never
 * renders: the five brand colours and the gradient copy button survive, the 1px
 * chip border is stripped by `border:none`, and `outline:none` swallows the
 * :focus-visible ring (a keyboard-accessibility regression, not just a visual
 * one). The old inline <style> had exactly the same problem — it simply agreed
 * with the forced values, so nobody noticed.
 *
 * Scoped through .tp-share-buttons so these score (0,2,0)/(0,3,0) and beat
 * `button.tp-share-btn` (0,1,1) outright rather than merely tying with it.
 * Delete this block only together with that block in modern-theme.css.
 * ========================================================================== */
.tp-share-buttons .tp-share-btn {
  border: 1px solid var(--tp-line, #30363d) !important;
}
.tp-share-buttons .tp-share-whatsapp,
.tp-share-buttons .tp-share-twitter,
.tp-share-buttons .tp-share-facebook,
.tp-share-buttons .tp-share-telegram,
.tp-share-buttons .tp-share-copy {
  background: var(--tp-surface, #161b22) !important;
  background-image: none !important;
  color: var(--tp-text-2, #b6bec8) !important;
}
.tp-share-buttons .tp-share-btn:hover {
  background: var(--tp-surface-2, #1c2128) !important;
  border-color: var(--tp-gold-line, rgba(232, 184, 74, 0.30)) !important;
  color: var(--tp-text, #e6edf3) !important;
  transform: none;
  opacity: 1;
}
.tp-share-buttons .tp-share-btn:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a) !important;
  outline-offset: 2px;
}


/* ============================================================================
 * 3. FOOTER SHELL
 * --tp-chrome is the token the palette reserves for chrome — navbar, bottom nav
 * AND footer. The footer was painting --tp-surface, one step LIGHTER than the
 * page body, so it read as another content card instead of the end of the page.
 * On chrome it bookends the layout against the navbar.
 * ========================================================================== */
.tp-footer {
  background: var(--tp-chrome, #0a0a0f);
  border-top: 1px solid var(--tp-line, #30363d);
  padding: 56px 0 28px;
  margin-top: 40px;
}


/* ============================================================================
 * 4. LINK COLUMNS
 *
 * Wrapped flex rather than grid. With `repeat(auto-fit, minmax(200px,1fr))` a
 * leftover column was stretched to fill a whole row, so the 5-column footer
 * showed a single 1100px-wide "column" at some widths. Flex + centre means
 * leftovers keep their real width and sit centred under the row above, which is
 * the only arrangement that looks intentional with centred text.
 *
 * The basis/gap/cap are picked against the real .container ladder that
 * miniAll.css ships (540 / 720 / 960 / 1140 / 1320, and 1440 above 1400px), so
 * the wrap points land where they should instead of near a boundary:
 *
 *   container 1140+ → inner 1110 → 5x160 + 4x24 =  896  fits → 5 columns
 *   container  960  → inner  930 → 5x160 + 4x24 =  896  fits → 5 columns
 *   container  720  → inner  690 → 4x160 + 3x24 =  712  no   → 3 + 2 centred
 *   container  540  → inner  510 → 3x160 + 2x24 =  528  no   → 2 + 2 + 1
 *
 * A 168px basis — the obvious round number — overflows the 960 container by 6px
 * and drops a lone stretched 5th column onto its own row for the whole
 * 992-1199px band, which is exactly the orphan this layout exists to avoid.
 * The 220px cap is also the measure control that makes centring readable, and
 * it is what keeps a 4-column footerInsta from splaying across 1400px.
 * ========================================================================== */
.tp-footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 24px;
  margin: 0 0 8px;
}
.tp-footer-col {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 220px;
  text-align: center;
}

/* Heading rank comes from case + tracking + colour, not from size — a footer
   label should be the smallest text in the block and still read as a heading.
   Every property is stated because miniAll.css ships bare `h5` element rules.

   The colour MUST carry !important: modern-theme.css ships a bare
   `h5,.h5{color:var(--text-primary)!important}`, which a plain declaration here
   can never beat. Without it these headings render near-white (#e6edf3) instead
   of gold — and since they are deliberately SMALLER than the links (11px vs
   13.6px), colour is the only thing left carrying the rank, so losing it
   inverts the hierarchy rather than merely dulling it. The old inline block had
   the same bug (it asked for var(--accent) and lost), which is why the footer
   headings have never actually been gold. */
.tp-footer-col h5,
.tp-footer-about-content h5 {
  margin: 0 0 14px;
  padding: 0;
  color: var(--tp-gold, #e8b84a) !important;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
}
/* A 22px hairline on the same axis as the list below it. This is what makes the
   centring read as deliberate instead of accidental — it gives each column a
   fixed anchor point that a ragged centred list cannot provide on its own. */
.tp-footer-col h5::after,
.tp-footer-about-content h5::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin: 8px auto 0;
  background: var(--tp-gold-line, rgba(232, 184, 74, 0.30));
}

/* Second and third sections inside one column. Keyed off the structure rather
   than the .mt-4 class, and !important because .mt-4 is a Bootstrap-style
   utility in the legacy bundle that ships `margin-top: … !important` — the old
   `.tp-footer-col h5.mt-4{margin-top:30px}` could never win against it. */
.tp-footer-col ul + h5 {
  margin-top: 28px !important;
}

.tp-footer-col ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 220px;
}
.tp-footer-col ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* display:block so the padding forms the tap target. Two separate rules used to
   fight over the row rhythm here (`margin-bottom:10px` then `margin-bottom:2px`
   further down the same block); the spacing is now one padding value. */
.tp-footer-col ul li a {
  display: block;
  padding: 7px 4px;
  color: var(--tp-text-2, #b6bec8);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: color var(--tp-t, .18s ease);
}
.tp-footer-col ul li a:hover {
  color: var(--tp-gold, #e8b84a);
  text-decoration: none;
}
.tp-footer-col ul li a:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a);
  outline-offset: 2px;
}


/* ============================================================================
 * 5. ABOUT BAND
 * One hairline above it, none below — the bottom bar brings its own, softer
 * rule, so the two dividers differ in weight and the page ends in steps rather
 * than in a stack of identical lines.
 * ========================================================================== */
.tp-footer-about-section {
  border-top: 1px solid var(--tp-line, #30363d);
  border-bottom: 0;
  padding: 30px 0 0;
  margin: 40px 0 0;
}
.tp-footer-about-content {
  max-width: 66ch;
  margin: 0 auto;
  text-align: center;
}
.tp-footer-about-content p {
  margin: 0;
  color: var(--tp-text-2, #b6bec8);
  font-size: 0.875rem;
  line-height: 1.7;
}


/* ============================================================================
 * 6. BOTTOM BAR
 * Centred stack on every width. `justify-content:space-between` pushed the
 * copyright hard left and the legal links hard right across a 1440px shell, so
 * the last line of a centred footer was the one thing pinned to the corners.
 * ========================================================================== */
.tp-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--tp-line-soft, #21262d);
  text-align: center;
}
.tp-copyright {
  margin: 0;
  color: var(--tp-text-3, #98a2ae);
  font-size: 0.8125rem;
}
.tp-copyright a {
  color: var(--tp-gold, #e8b84a);
  text-decoration: none;
}
.tp-copyright a:hover {
  text-decoration: underline;
}
.tp-footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 20px;
}
/* 44px tall so these clear the tap-target minimum without the row growing:
   the height is absorbed by the flex line, not added as padding below the text. */
.tp-footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--tp-text-3, #98a2ae);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color var(--tp-t, .18s ease);
}
.tp-footer-links a:hover {
  color: var(--tp-gold, #e8b84a);
}
/* Hairline separators so four short centred links do not read as one run-on. */
.tp-footer-links a + a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: var(--tp-line, #30363d);
}
.tp-footer-links a:focus-visible,
.tp-copyright a:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a);
  outline-offset: 2px;
}


/* ============================================================================
 * 7. TABLET
 * ========================================================================== */
@media (max-width: 991px) {
  .tp-footer {
    padding: 44px 0 24px;
    margin-top: 32px;
  }
  .tp-footer-about-section {
    padding-top: 26px;
    margin-top: 32px;
  }
}

/* ── The 4-column footer's orphan row ─────────────────────────────────────────
 * MEASURED, not reasoned: between 577px and 991px the 160px basis fits exactly
 * THREE columns per row, so a 4-column footer (footerInsta.php) wraps 3 + 1 and
 * leaves one 220px column alone under a 530-708px row — the exact arrangement
 * this layout exists to avoid. The 5-column footers wrap 3 + 2 there and are
 * fine, so this cannot be fixed by retuning the shared basis: one per-row count
 * cannot suit both 4 and 5 columns (4 wants 2 or 4 per row, 5 wants 3 or 5).
 *
 * So it is keyed off the column COUNT instead: `:first-child:nth-last-child(4)`
 * matches only when the grid holds exactly four columns.
 *
 * max-width MUST move with flex-basis. Flex breaks lines on the hypothetical
 * main size, which is the basis CLAMPED BY max-width — so raising the basis
 * alone does nothing while the 220px cap stands (3x220+48 = 708, and the widest
 * container here is 710 inner: three still fit, by 2px). 236px is the smallest
 * round value that clears it, and it is checked against both containers in this
 * band rather than one:
 *
 *   container 720 → inner 710 → 3x236+48 = 756  no  → 2 + 2
 *                              2x236+24 = 496  fits
 *   container 540 → inner 530 → 3x236+48 = 756  no  → 2 + 2
 *                              2x236+24 = 496  fits
 *
 * The 16px the columns gain over the shared 220px cap is invisible and never
 * appears beside it — a page renders one footer, not two. Above 991px this
 * block lapses and all four columns sit in one row at the normal cap.
 * ── */
@media (min-width: 577px) and (max-width: 991px) {
  .tp-footer-col:first-child:nth-last-child(4),
  .tp-footer-col:first-child:nth-last-child(4) ~ .tp-footer-col {
    flex-basis: 236px;
    max-width: 236px;
  }
}


/* ============================================================================
 * 8. PHONE — 375px is the primary case
 *
 * Five stacked columns of ~56 links is 2,000px+ of footer, and honouring the
 * 44px tap-target minimum on every one of them would make it worse, not better.
 * So on phone the columns become collapsible sections. This was already built
 * and proven on the homepage; it now applies to all three footers, which is
 * half the point of this extraction — footerInsta.php in particular was still
 * shipping 39 links as bare 20px inline anchors down a single column.
 *
 * PROGRESSIVE ENHANCEMENT: nothing is hidden until footer/tp-footer.js adds
 * .tp-foot-acc. Without JS — and for any crawler that does not run it — every
 * link renders as a full 44px row. The links are in the DOM either way, so they
 * stay crawlable and indexable.
 * ========================================================================== */
@media (max-width: 576px) {
  .tp-footer {
    padding: 32px 0 20px;
    margin-top: 28px;
  }
  /* Line the footer's edge up with the page content above it. */
  .tp-footer > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Full-width rows, not 220px columns floating in the middle of the screen. */
  .tp-footer-grid {
    flex-direction: column;
    gap: 26px;
  }
  .tp-footer-col {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
  .tp-footer-col ul {
    max-width: 20rem;
  }
  .tp-footer-col ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 0.875rem;
  }

  .tp-footer-about-section {
    padding-top: 22px;
    margin-top: 26px;
  }
  .tp-footer-about-content p {
    font-size: 0.8125rem;
  }
  .tp-footer-bottom {
    margin-top: 22px;
    padding-top: 14px;
  }
  .tp-footer-links {
    gap: 0 18px;
  }

  /* CTA: the card already stacks, so the action should span it. */
  .tp-cta-section {
    padding: 22px 16px;
  }
  .tp-cta-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .tp-cta-content {
    flex-direction: column;
    gap: 2px;
  }
  .tp-cta-btn {
    width: 100%;
  }

  /* Share: icon-only chips. 5 x 44px + 4 x 10px gap = 260px, one row at 375. */
  .tp-share-section {
    padding: 22px 16px 4px;
  }
  .tp-share-btn span:last-child {
    display: none;
  }
  .tp-share-btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }
}

/* ── Accordion mode: added by footer/tp-footer.js on phone only. ── */
@media (max-width: 576px) {
  .tp-foot-acc .tp-footer-grid {
    gap: 0;
  }

  /* The label + chevron travel together as one centred unit, so the accordion
     keeps the same centre axis as the rest of the footer. The tap target is the
     whole row regardless of where the label sits. */
  .tp-foot-acc .tp-footer-col h5 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    padding: 12px 8px;
    border-bottom: 1px solid var(--tp-line-soft, #21262d);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  /* Counterweight. Centring "label + chevron" as one unit centres the UNIT, not
     the label: the chevron's 7px box plus the 10px gap pushed every heading
     8.5px LEFT of the axis its own links are centred on (measured -8.50px at
     375px on all three footers), so the whole accordion stack sat off-centre
     from the about block, the copyright and the legal links. This mirrors the
     chevron on the other side, so the LABEL lands on the axis while the chevron
     stays adjacent to it rather than banished to the far right. */
  .tp-foot-acc .tp-footer-col h5::before {
    content: "";
    flex: 0 0 7px;
    height: 1px;
  }
  /* The desktop hairline becomes a chevron here — every property it set has to
     be reset, not just the ones being added. */
  .tp-foot-acc .tp-footer-col h5::after {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: -3px 0 0;
    background: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
    transition: transform var(--tp-t, .18s ease);
  }
  .tp-foot-acc .tp-footer-col h5[aria-expanded="true"]::after {
    margin: 2px 0 0;
    transform: rotate(-135deg);
  }
  .tp-foot-acc .tp-footer-col h5:focus-visible {
    outline: 2px solid var(--tp-gold, #e8b84a);
    outline-offset: -2px;
  }

  /* Collapsed by default; the heading toggles it. */
  .tp-foot-acc .tp-footer-col h5 + ul {
    display: none;
  }
  .tp-foot-acc .tp-footer-col h5[aria-expanded="true"] + ul {
    display: block;
    padding: 8px 0 14px;
  }
}
