/* =============================================================
   Tools-app footer
   The converter-style site footer for tool pages under /tools-app/
   that have no visible footer of their own. Colours are the
   converters' dark-theme values, except the muted text, which is
   raised to #718199 for at least 4.5:1 contrast.
   The footer sits just below the tool area (absolute, top: 100%),
   so the tool above it is not moved, resized or recoloured.
   Side space: 16px on phones, 24px from 640px, full width.
   ============================================================= */
body{position:relative}

.site-footer{
  position:absolute;top:100%;left:0;right:0;
  padding:48px 24px 36px;
  border-top:1px solid #1e293b;
  background:#0a0e17;color:#8b9bb4;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.6;
}
.site-footer .footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:40px;
}
.site-footer .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.site-footer .footer-brand svg{width:32px;height:32px;color:#a855f7;flex-shrink:0}
.site-footer .footer-brand img{width:32px;height:32px;flex-shrink:0;display:block;border-radius:7px}
.site-footer .footer-brand-name{
  font-size:20px;font-weight:700;
  background:linear-gradient(90deg,#8B5CF6,#EC4899,#3B82F6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.site-footer .footer-desc{color:#718199;margin-bottom:16px;max-width:360px}
.site-footer .footer-copy{font-size:12px;color:#718199}
.site-footer h2{font-weight:700;margin-bottom:16px;color:#e8edf5;font-size:15px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.site-footer a{color:#8b9bb4;text-decoration:underline;text-decoration-color:#1e293b;text-underline-offset:2px;transition:color .2s,text-decoration-color .2s}
.site-footer a:hover{color:#a855f7;text-decoration-color:#a855f7}
.site-footer .footer-bottom{
  border-top:1px solid #1e293b;
  padding-top:20px;text-align:center;
}
.site-footer .footer-bottom p{color:#718199;font-size:13px}
.site-footer .footer-bottom span{color:#a855f7}

/* Phones and small tablets: brand on top, link groups in two columns
   (Legal above Support on the left, Company on the right), so the links
   take less height and stay clear of a tool's fixed top bars. */
@media(max-width:768px){
  .site-footer .footer-grid{
    grid-template-columns:1fr 1fr;gap:32px 16px;
    grid-template-areas:"brand brand" "legal company" "support company";
  }
  .site-footer .footer-grid>div:first-child{grid-area:brand}
  .site-footer nav[aria-label="Legal links"]{grid-area:legal}
  .site-footer nav[aria-label="Company links"]{grid-area:company}
  .site-footer nav[aria-label="Support links"]{grid-area:support}
  .site-footer{padding-top:36px;padding-bottom:28px}
}
@media(max-width:639px){
  .site-footer{padding-left:16px;padding-right:16px}
}

/* Light theme of a tool that adds html.light (Dice Roller, 2 Oct 2026). */
html.light .site-footer{background:#f3f4f8;color:#4b5563;border-top-color:#d9dde5}
html.light .site-footer h2{color:#0a0a14}
html.light .site-footer a{color:#4b5563;text-decoration-color:#d9dde5}
html.light .site-footer .footer-desc,html.light .site-footer .footer-copy,html.light .site-footer .footer-bottom p{color:#5b6475}
html.light .site-footer .footer-bottom{border-top-color:#d9dde5}

/* Extra bottom space for tools with a fixed bar at the bottom of the
   screen (Dice's result box: up to 105px tall above 480px wide, up to
   161px at 480px and below), so it cannot cover the last footer line. */
.site-footer--clear-fixed-bottom{padding-bottom:124px}
@media(max-width:480px){
  .site-footer--clear-fixed-bottom{padding-bottom:180px}
}

/* Tools whose page already scrolls (UUID Generator): the footer sits in normal
   flow after the content instead of below the first screen. */
.site-footer--in-flow{position:static}

/* Footer in the tool's own theme colours, for tools that define --bg-primary,
   --text-primary, --text-secondary and --border-primary in every theme (UUID
   Generator). Muted text uses --text-secondary so it keeps at least 4.5:1. */
.site-footer--tool-theme{background:var(--bg-primary);border-top-color:var(--border-primary);color:var(--text-secondary)}
.site-footer--tool-theme h2{color:var(--text-primary)}
.site-footer--tool-theme a,
.site-footer--tool-theme .footer-desc,
.site-footer--tool-theme .footer-copy,
.site-footer--tool-theme .footer-bottom p{color:var(--text-secondary)}
.site-footer--tool-theme a{text-decoration-color:var(--border-primary)}
.site-footer--tool-theme .footer-bottom{border-top-color:var(--border-primary)}

/* Footer on a tool's FAQ and help pages whose own element rules would reach it
   (Epoch Converter: h2 with a side bar, top margin and left padding; p and li
   with their own spacing, line height and colour; a with a bar on hover).
   These rules undo them, so the footer looks the same as on Dice Roller. */
.site-footer--doc-page h2{margin-top:0;padding-left:0;position:static}
.site-footer--doc-page h2::before,
.site-footer--doc-page a::after{content:none}
.site-footer--doc-page p{margin-bottom:0;line-height:inherit}
.site-footer--doc-page li{margin-bottom:0;line-height:inherit;color:inherit}
.site-footer--doc-page a{position:static}

/* Cookie banner (/libs/cookie-consent.js): keep its normal look on tool
   pages. Tool stylesheets may style every button (Dice: margin, uppercase,
   green hover; UltraPass: lift and glow on hover, with stronger selectors).
   These id-level rules restate the banner's own button look, so no tool's
   button rules can win. Line heights match the homepage. */
#zdu-cookie-banner{line-height:1.5}
#zdu-cookie-banner button{margin:0;letter-spacing:normal;text-transform:none;line-height:inherit;transform:none;box-shadow:none}
#zdu-cookie-banner .zdu-cb-accept{background:linear-gradient(135deg,#8B5CF6,#EC4899);transition:transform .2s,box-shadow .2s}
#zdu-cookie-banner .zdu-cb-accept:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(139,92,246,.4)}
#zdu-cookie-banner .zdu-cb-reject{background:rgba(255,255,255,.05);transition:background .2s,border-color .2s}
#zdu-cookie-banner .zdu-cb-reject:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
#zdu-cookie-banner .zdu-cb-more{background:none;border:none;border-radius:0;padding:2px 0;width:auto;min-width:0;min-height:0;height:auto;color:#a78bfa;font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
#zdu-cookie-banner .zdu-cb-more:hover{background:none;color:#c4b5fd;transform:none;box-shadow:none}

/* The banner's Cookie Policy link, against tool stylesheets that style every link
   (System Intelligence: blue, no underline, inline-block, a bar on hover). */
#zdu-cookie-banner .zdu-cb-text a{display:inline;position:static;color:#a78bfa;text-decoration:underline;text-underline-offset:2px;transition:all 0s ease 0s}
#zdu-cookie-banner .zdu-cb-text a:hover{color:#c4b5fd}
#zdu-cookie-banner .zdu-cb-text a::after{content:none}