/* SubjectMate shared footer
   ---------------------------------------------------------------------------
   Deliberately CSS-only. The footer is the site's main internal-linking
   surface: 115 pages link privacy.html from it, 77 link the exam-prep pages.
   Injecting those links with JavaScript, the way nav.js injects the nav, would
   remove them from the raw HTML that non-rendering crawlers read. So the markup
   stays static and per-page (small, and it varies by page family anyway) while
   the styling, which is the part that was actually duplicated across 117 pages,
   lives here and is cached once.

   Depends on the design tokens already defined by each page's :root
   (--ink, --teal-mid, --teal-dark, and the --dur/--ease motion tokens). */

footer{background:var(--ink);padding:52px 48px 26px;}
.footer-inner{max-width:1080px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1fr;gap:40px;margin-bottom:40px;align-items:start;}
.fcol-brand{max-width:260px;}
.fl{font-family:'Nunito',sans-serif;font-size:22px;font-weight:900;color:white;margin-bottom:9px;}
.fl span{color:var(--teal-mid);}
.ft{font-size:14px;color:rgba(255,255,255,0.4);line-height:1.65;font-weight:300;margin-bottom:10px;}
.fp{font-size:12px;color:rgba(255,255,255,0.28);line-height:1.6;}

.fc h5{font-size:11px;font-weight:700;color:rgba(255,255,255,0.32);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:15px;}
.fc a{display:block;font-size:13.5px;color:rgba(255,255,255,0.58);text-decoration:none;margin-bottom:9px;line-height:1.35;position:relative;transition:color var(--dur,0.22s) var(--ease,ease),opacity var(--dur,0.22s) var(--ease,ease);}
.fc a::after{content:'';position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow,0.32s) var(--ease,ease);opacity:0.7;}
.fc a:hover{color:white;opacity:1;}
.fc a:hover::after{transform:scaleX(1);}

.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.fcopy{font-size:12px;color:rgba(255,255,255,0.28);}

/* Bulk subject index. Rendered as static markup inside <details> so the links
   are present in the raw HTML and remain crawlable while collapsed. */
.footer-pages{border-top:1px solid rgba(255,255,255,0.12);padding-top:26px;margin-bottom:30px;}
.fpg{margin-bottom:10px;font-size:13px;line-height:2;}
.fpg-t{display:inline-block;min-width:110px;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.45);margin-right:10px;}
.fpg a{color:rgba(255,255,255,0.58);text-decoration:none;margin-right:14px;white-space:nowrap;transition:color .2s;}
.fpg a:hover{color:white;}

.footer-subjects{border-top:1px solid rgba(255,255,255,0.09);margin-bottom:26px;}
.footer-subjects-toggle{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:18px 0 4px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.09em;color:rgba(255,255,255,0.5);transition:color .2s;-webkit-user-select:none;user-select:none;}
.footer-subjects-toggle::-webkit-details-marker{display:none;}
.footer-subjects-toggle:hover{color:rgba(255,255,255,0.85);}
.footer-subjects-toggle svg{transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.footer-subjects[open] .footer-subjects-toggle svg{transform:rotate(180deg);}
.footer-subjects .footer-pages{border-top:none;padding-top:16px;margin-bottom:8px;animation:fp-in .35s ease;}
@keyframes fp-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.footer-subjects .fpg{margin-bottom:8px;font-size:12.5px;line-height:1.9;opacity:0.9;}
.footer-subjects .fpg a{font-size:12.5px;color:rgba(255,255,255,0.5);}

/* Keyboard focus. The footer sits on --ink, so the nav's teal-dark ring is too
   low contrast here; use a light ring against the dark ground. */
footer a:focus-visible,.footer-subjects-toggle:focus-visible{outline:2px solid rgba(255,255,255,0.85);outline-offset:3px;border-radius:4px;}

@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px 40px;}
  .fcol-brand{grid-column:1 / -1;max-width:none;}
}
@media (max-width:768px){
  footer{padding:44px 24px 24px;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .fpg-t{min-width:0;display:block;margin-bottom:2px;}
}
@media (prefers-reduced-motion:reduce){
  .footer-subjects .footer-pages{animation:none;}
  .footer-subjects-toggle svg{transition:none;}
  .fc a::after{transition:none;}
}