1 /* Basestil */
2 .site-footer{
3 --bg:#0f0f10; /* baggrund */
4 --fg:#f6f7f8; /* tekst */
5 --muted:#bfc3c9; /* sekundær tekst */
6 --accent:#ff4d6d; /* valgfri accentfarve */
7 --link:#e6e8ea; /* links */
8 background:var(--bg);
9 color:var(--fg);
10 padding:24px 16px;
11 font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
12 }
13 .site-footer a{ color:var(--link); text-decoration:none; }
14 .site-footer a:hover{ text-decoration:underline; }
15
16 /* Layout: mobil først (stack) */
17 .footer-inner{
18 max-width:1100px;
19 margin:0 auto;
20 display:grid;
21 gap:16px;
22 grid-template-columns:1fr; /* én kolonne på mobil */
23 align-items:center;
24 text-align:center;
25 }
26
27 /* Brand (logo + navn) */
28 .brand{
29 display:inline-flex;
30 align-items:center;
31 gap:12px;
32 justify-content:center;
33 font-weight:700;
34 letter-spacing:.3px;
35 }
36 .brand img{
37 width:68px; height:68px; object-fit:contain;
38 filter: drop-shadow(0 0 0 transparent);
39 }
40 .brand-name{ font-size:1.25rem; }
41
42 /* Sociale ikoner */
43 .social{
44 display:flex;
45 justify-content:center;
46 gap:18px;
47 }
48 .social a{
49 width:40px; height:40px; border-radius:50%;
50 display:inline-grid; place-items:center;
51 background:rgba(255,255,255,.06);
52 transition:transform .15s ease, background .15s ease;
53 }
54 .social a:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); }
55 .social svg{ width:20px; height:20px; fill:var(--fg); }
56
57 /* Kontaktblok */
58 .contact p{ margin:.25rem 0; color:var(--muted); }
59 .contact a{ color:var(--fg); }
60
61 /* Tablet & op (2 kolonner) */
62 @media (min-width:600px){
63 .footer-inner{
64 grid-template-columns:1fr auto 1fr; /* brand | social | kontakt */
65 text-align:initial;
66 }
67 .brand{ justify-content:flex-start; }
68 .social{ justify-content:center; }
69 .contact{ justify-self:end; text-align:right; }
70 }
71
72 /* High‑contrast brugerpræferencer */
73 @media (prefers-contrast: more){
74 .social a{ background:rgba(255,255,255,.18); }
75 }
76
77 /* Dark‑mode venlig (kan justeres efter dit tema) */
78 @media (prefers-color-scheme: light){
79 .site-footer{
80 --bg:#111827; --fg:#f9fafb; --muted:#d1d5db; --link:#ffffff;
81 }
82 }
