/* Daily Invoice Maker — the shared site footer (includes/site-footer.php), 2026-10-31.
   Linked from the footer itself, so it works on main.css pages AND on the
   older layout.php pages. Colours read the site tokens (tokens.css) and fall
   back to Sandstone, so dark mode follows wherever tokens.css is loaded. */
.dim-sf {
  position: relative; overflow: hidden; clear: both;
  padding: clamp(56px, 8vw, 88px) 0 36px;
  background: var(--bg, #F5EDE1); color: var(--ink-body, #4A3C2E);
  border-top: 1px solid var(--line, rgba(43, 33, 23, .12));
  font: 400 1rem/1.6 var(--font-body, 'Manrope', -apple-system, 'Segoe UI', sans-serif);
}
.dim-sf__wrap { width: min(1200px, 100% - 2 * clamp(16px, 5vw, 64px)); margin-inline: auto; }
.dim-sf__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.dim-sf__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink, #2B2117); font: 700 1.05rem/1 var(--font-display, 'Sora', -apple-system, sans-serif); letter-spacing: -.01em; }
.dim-sf__mark { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand, #4648D4), var(--brand-deep, #3B3AC2)); box-shadow: 0 6px 14px -6px var(--brand, #4648D4); }
.dim-sf__mark svg { width: 17px; height: 17px; }
.dim-sf__intro p { margin: 14px 0 20px; max-width: 34ch; font-size: .9375rem; color: var(--ink-muted, #6E5E4A); }
.dim-sf__cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand, #4648D4), var(--brand-deep, #3B3AC2)); color: var(--brand-ink, #fff);
  font: 700 .875rem/1 var(--font-body, 'Manrope', sans-serif); text-decoration: none;
  box-shadow: 0 10px 24px -12px var(--brand, #4648D4), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.dim-sf__cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.dim-sf__cta:hover { transform: translateY(-2px); }
.dim-sf__cta:hover::after { transform: translateX(120%); }
.dim-sf__col { display: grid; gap: 9px; align-content: start; }
.dim-sf__col strong { font: 700 .75rem/1.2 var(--font-body, 'Manrope', sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted, #6E5E4A); margin-bottom: 5px; }
.dim-sf__col a {
  justify-self: start; text-decoration: none; font-size: .9375rem; font-weight: 600; color: var(--ink-body, #4A3C2E);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s cubic-bezier(.22, 1, .36, 1), color .2s;
}
.dim-sf__col a:hover { color: var(--ink, #2B2117); background-size: 100% 1px; }
.dim-sf__word {
  margin: clamp(40px, 6vw, 64px) 0 0; white-space: nowrap; user-select: none; pointer-events: none;
  font: 800 min(7.2vw, 6.4rem)/.9 var(--font-display, 'Sora', -apple-system, sans-serif); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px var(--line-hi, rgba(43, 33, 23, .2));
  background: linear-gradient(180deg, var(--line, rgba(43, 33, 23, .12)), transparent 85%); -webkit-background-clip: text; background-clip: text;
}
.dim-sf__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; border-top: 1px solid var(--line, rgba(43, 33, 23, .12)); padding-top: 20px; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--ink-muted, #6E5E4A); }
.dim-sf__base a { color: inherit; }
.dim-sf__social { display: flex; gap: 8px; }
.dim-sf__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line, rgba(43, 33, 23, .12)); color: var(--ink-muted, #6E5E4A); transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .2s, border-color .2s; }
.dim-sf__social a:hover { color: var(--ink, #2B2117); border-color: var(--line-hi, rgba(43, 33, 23, .2)); transform: translateY(-3px); }
.dim-sf :focus-visible { outline: 2px solid var(--brand, #4648D4); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 960px) { .dim-sf__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dim-sf__intro { grid-column: 1 / -1; } }
@media (max-width: 420px) { .dim-sf__top { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }
@media (prefers-reduced-motion: reduce) { .dim-sf *, .dim-sf *::after { transition: none !important; } }