/* Site footer — link columns, legal strip, back-to-top.
   Lifted out of templates/partials/footer.php on 2026-09-16 (audit PERF-02).
   It was inline on EVERY page of the site — 9,509 bytes re-sent with
   every single HTML response and never cacheable. The <link> that replaced it sits
   exactly where the <style> did, so the cascade order is unchanged.
   Edit this file, not the template. asset() cache-busts on filemtime. */


/* ═══ Footer v9 — Animated Premium ═══ */
.tcf{--fg1:#E31937;--fw:#0A132B;--ink:#101828;--muted:#475467;--line:#E7E1D6;--ff:'DM Sans',system-ui,sans-serif;position:relative;background:linear-gradient(175deg,#FFFFFF 0%,#FBFAF7 45%,#F4EEE2 100%);border-top:1px solid var(--line);color:var(--muted);font-family:var(--ff);overflow:hidden}
.tcf *,.tcf *::before,.tcf *::after{margin:0;padding:0;box-sizing:border-box}
.tcf a{color:inherit}
.tcf-wrap{max-width:1440px;margin:0 auto;padding:0 60px}
/* Animated gradient mesh — visible drift */
.tcf::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(227,25,55,.05) 0%,transparent 35%,rgba(255,153,51,.045) 55%,transparent 75%,rgba(227,25,55,.04) 100%);background-size:200% 200%;animation:tcfMesh 18s ease infinite;pointer-events:none;z-index:0}
@keyframes tcfMesh{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
/* Gold orb — top right */
.tcf::after{content:'';position:absolute;width:600px;height:600px;top:-200px;right:-100px;background:radial-gradient(circle,rgba(227,25,55,.07) 0%,rgba(227,25,55,.03) 40%,transparent 65%);pointer-events:none;z-index:0;animation:tcfOrb 14s ease-in-out infinite;filter:blur(20px)}
@keyframes tcfOrb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-40px,25px) scale(1.08)}66%{transform:translate(20px,-15px) scale(.95)}}
.tcf>*{position:relative;z-index:1}
/* Dot grid texture */
.tcf-bg-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(10,19,43,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}
/* Astronomy layer — constellations, star field & orbital rings */
.tcf-astro{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}
.tcf-astro-orbit ellipse{fill:none;stroke:rgba(10,19,43,.05);stroke-width:1}
.tcf-astro-orbit ellipse:first-child{stroke:rgba(227,25,55,.06)}
.tcf-astro-line polyline{fill:none;stroke:rgba(10,19,43,.09);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2.5 4}
/* AUDIT 2026-09-04: the saturated red/gold "stars" landed mid-column beside
   real link text (one next to "Certifications", one next to "PAN Verify") and
   read as stray UI dots or rendering artifacts rather than as background
   texture. Dropped to the same ink tone and opacity as the rest of the field so
   the layer reads as texture. */
.tcf-astro-star circle{fill:rgba(10,19,43,.18)}
.tcf-astro-star--dim circle{fill:rgba(10,19,43,.12)}
.tcf-astro-star--red circle{fill:rgba(227,25,55,.20)}
.tcf-astro-star--gold circle{fill:rgba(180,83,9,.20)}
.tcf-astro .tw{animation:tcfTwinkle 4s ease-in-out infinite}
.tcf-astro .tw2{animation-duration:5.5s;animation-delay:-1.5s}
.tcf-astro .tw3{animation-duration:6.5s;animation-delay:-3s}
@keyframes tcfTwinkle{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.tcf-astro .tw{animation:none}}

/* ── Brand Row ── */
.tcf-brand-row{padding:28px 0 0;border-bottom:1px solid var(--line)}
.tcf-brand-inner{display:flex;align-items:center;gap:28px;padding-bottom:22px}
.tcf-logo{display:inline-block;text-decoration:none;transition:opacity .2s;flex-shrink:0}
.tcf-logo:hover{opacity:.85}
.tcf-logo img{height:42px;width:auto;display:block}
.tcf-desc{font-size:12.5px;line-height:1.65;color:var(--muted);flex:1;max-width:420px}
.tcf-social{display:flex;gap:6px;flex-shrink:0;margin-left:auto}
.tcf-social a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);color:var(--muted);text-decoration:none;transition:all .25s;background:#fff}
.tcf-social a:hover{border-color:var(--fg1);color:var(--fg1);background:rgba(227,25,55,.06);transform:translateY(-2px);box-shadow:0 4px 16px rgba(227,25,55,.12)}
.tcf-social a svg{width:15px;height:15px}

/* ── Link Grids ── */
.tcf-body{padding:24px 0 20px}
.tcf-grid{display:grid;align-items:start}
.tcf-grid--main{grid-template-columns:repeat(5,1fr);gap:22px}

/* ── Columns ──
   .tcf-col is a <details> since the D-02 fix (design audit 2026-09-16), so that
   phones can collapse each group. `display:flex` on <details> is fine — the
   <summary> is just the first flex item — and everything below is unchanged
   from when these were plain <div>s. */
.tcf-col{display:flex;flex-direction:column;padding:0 6px;border-left:1px solid var(--line)}
.tcf-col:first-child{border-left:none;padding-left:0}
/* No disclosure triangle on desktop: the group is always open there and the
   marker would just be noise beside the mono heading. Both spellings are
   needed — ::marker for standards, ::-webkit-details-marker for older Safari. */
.tcf-col>summary{list-style:none;cursor:default}
.tcf-col>summary::-webkit-details-marker{display:none}
.tcf-col>summary::marker{content:''}
.tcf-col>summary>.tcf-col-title{margin-bottom:0}
.tcf-col>summary{margin-bottom:8px}
.tcf-col-title{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:var(--fg1);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(227,25,55,.18)}
.tcf-col-title--sub{margin-top:12px}
/* AUDIT 2026-09-04: padding was 2.5px -> 23px row height, under the 24px minimum
   touch target. ~100 footer links per page were affected. Now 26px. */
.tcf-col>a{font-size:12px;color:var(--muted);text-decoration:none;padding:4px 0 4px 13px;display:block;position:relative;transition:all .18s;line-height:1.5}
.tcf-col>a::before{content:'\203A';position:absolute;left:0;color:rgba(227,25,55,.55);font-size:12px;line-height:1.5;transition:all .18s}
.tcf-col>a:hover{color:var(--fw);padding-left:17px}
.tcf-col>a:hover::before{transform:translateX(2px);color:var(--fg1)}

/* ── Tricolor ── */
.tcf-tricolor{height:3px;background:linear-gradient(90deg,#FF9933 0%,#FF9933 33.33%,#FFFFFF 33.33%,#FFFFFF 66.66%,#138808 66.66%,#138808 100%);opacity:.7}

/* ── Certifications ── */
.tcf-certs{background:rgba(227,25,55,.03);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.tcf-certs-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.tcf-certs-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--fg1)}
.tcf-certs-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tcf-cert{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);padding:6px 14px;border-radius:50px;border:1px solid var(--line);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all .25s;background:#fff}
.tcf-cert:hover{border-color:rgba(227,25,55,.30);background:rgba(227,25,55,.05);color:var(--fw)}
/* AUDIT 2026-09-04: the tricolor cycle put a #FFFFFF dot on every 3n+2 badge.
   That was fine on the old dark footer; on the ivory footer it is invisible, so
   "DPIIT Recognised" and "GST Practitioner" read as badges whose icon failed to
   load. The white band now keeps its white fill but gains a ring so it reads as
   deliberate on a light ground. */
.tcf-cert-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.tcf-cert:nth-child(3n+1) .tcf-cert-dot{background:#FF9933;box-shadow:0 0 0 1px rgba(255,153,51,.55)}
.tcf-cert:nth-child(3n+2) .tcf-cert-dot{background:#FFFFFF;box-shadow:0 0 0 1.5px rgba(10,19,43,.35)}
.tcf-cert:nth-child(3n) .tcf-cert-dot{background:#138808;box-shadow:0 0 0 1px rgba(19,136,8,.55)}

/* ── Bottom ── */
.tcf-bottom{background:rgba(10,19,43,.035);padding:14px 0;position:relative}
.tcf-bottom::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#FF9933 0%,#FF9933 33.33%,#FFFFFF 33.33%,#FFFFFF 66.66%,#138808 66.66%,#138808 100%);opacity:.45}
.tcf-bottom-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.tcf-copy{font-size:11.5px;color:var(--muted);text-align:center}
.tcf-copy a{color:var(--fw);text-decoration:none;font-weight:600;transition:color .2s}
.tcf-copy a:hover{color:var(--fg1)}
.tcf-legal{display:flex;flex-wrap:wrap;gap:0;align-items:center;justify-content:center}
/* AUDIT 2026-09-04: was #667085 on the ivory bottom bar = 3.58:1, under AA.
   --muted (#475467) is 6.4:1 on the same ground. This row is the legal/policy
   navigation, so it is exactly the wrong place to be under-contrast. */
.tcf-legal a{font-size:10.5px;color:var(--muted);text-decoration:none;padding:6px 8px;transition:color .15s;border-right:1px solid var(--line)}
.tcf-legal a:last-child{border-right:none}
.tcf-legal a:hover{color:var(--fg1)}

/* ═══ Responsive ═══ */

@media(max-width:1440px){
  .tcf-wrap{padding:0 40px}
  .tcf-grid--main{gap:18px}
  .tcf-col>a{font-size:11.5px}
}

@media(max-width:1024px){
  .tcf-wrap{padding:0 24px}
  .tcf-grid--main{grid-template-columns:repeat(3,1fr);gap:24px 20px}
  .tcf-col{border-left:none;padding:0}
  .tcf-brand-inner{gap:20px}
  .tcf-desc{max-width:280px}
}

/* ═══ Mobile ═══
   Design audit 2026-09-16, D-02 + D-04. Two problems were being solved at once
   here and they were fighting: the footer had to fit on a phone, so every type
   size had been squeezed down to 9.5–11.5 px, which made it fit and made it
   unreadable. Collapsing the groups (see footer.php) buys back all the height,
   so the type can go UP instead of down:

     group heading   9.5px → 12px     link  11.5px → 14px
     certification   9.5px → 11.5px   legal 10px   → 12px
     copyright       11px  → 12.5px

   14 px is the audit's "supporting text" size; nothing in the footer is primary
   body copy. Single column, not two: two 11.5 px columns were the reason the
   links had to be that small in the first place. */
@media(max-width:767px){
  .tcf-wrap{padding:0 16px}
  .tcf-body{padding:16px 0 12px}
  .tcf-brand-row{padding:16px 0 0}
  .tcf-brand-inner{flex-direction:column;align-items:center;gap:12px;padding-bottom:14px;text-align:center}
  .tcf-desc{display:block;max-width:100%;font-size:13.5px;line-height:1.6;text-align:center}
  .tcf-social{margin-left:0;justify-content:center}
  .tcf-social a{width:40px;height:40px;border-radius:8px}
  .tcf-social a svg{width:16px;height:16px}

  /* One full-width accordion per group. */
  .tcf-grid--main{grid-template-columns:1fr;gap:0}
  .tcf-col{padding:0;border-left:none;border-bottom:1px solid var(--line)}
  .tcf-col:last-child{border-bottom:none}

  /* The summary IS the control now, so it gets a real 48px touch target, a
     chevron that reflects state, and a cursor/selection behaviour that says
     "tap me". */
  .tcf-col>summary{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:0;padding:14px 2px;min-height:48px;cursor:pointer;
    -webkit-tap-highlight-color:rgba(227,25,55,.08);user-select:none}
  .tcf-col>summary::after{content:'';flex:0 0 auto;width:8px;height:8px;margin-left:12px;
    border-right:2px solid rgba(227,25,55,.6);border-bottom:2px solid rgba(227,25,55,.6);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
  .tcf-col[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .tcf-col>summary>.tcf-col-title{font-size:12px;letter-spacing:1.4px;
    margin-bottom:0;padding-bottom:0;border-bottom:none}

  /* Links only exist on screen while the group is open, so they can breathe. */
  .tcf-col>a{font-size:14px;padding:9px 0 9px 15px;line-height:1.4}
  .tcf-col>a::before{font-size:13px;line-height:1.4}
  .tcf-col>a:first-of-type{padding-top:2px}
  .tcf-col>a:last-child{padding-bottom:14px}
  .tcf-col-title--sub{font-size:11px;margin-top:14px;letter-spacing:1.2px}

  .tcf-certs{padding:14px 0}
  .tcf-certs-row{gap:6px}
  .tcf-cert{padding:6px 12px;font-size:11.5px}
  .tcf-bottom-inner{gap:8px}
  .tcf-legal a{font-size:12px;padding:8px 8px}
  .tcf-copy{font-size:12.5px;line-height:1.6}

  /* Secondary policy links live on /sitemap on a phone — see footer.php. They
     stay in the DOM (crawlable, and still there for a wider screen), they are
     just not part of the first layer. */
  .tcf-legal-more{display:none}
}

@media(max-width:400px){
  .tcf-col>a{font-size:13.5px}
  .tcf-cert{font-size:11px;padding:6px 10px}
}