/* The footer (site/partials/footer.html): its only stylesheet, linked by every page that shows it. Every
   selector sits under .sitefoot, so nothing here reaches page content, and the footer sets its own colours
   and side margins (the Forside's), so no page can change how it looks. Line height, text wrapping and the link
   underline offset repeat the home page's page-wide defaults, so the research pages show the same footer. */
.sitefoot { --bg: #FFFFFF; --surface: #FAF6F5; --text: #2B2B2B; --muted: #4F5E42; --nav: #595959; --border: #E4DBCD; --orange: #BF5B39; --orange-t: #A44829; --orange-dark: #663D29; }
.sitefoot .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 640px) { .sitefoot .wrap { padding-inline: 18px; } }
.sitefoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; line-height: 1.3; color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); margin-top: 40px; padding-block: 44px 28px; }
.sitefoot :is(p, li) { text-wrap: pretty; }
.sitefoot .fgrid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; align-items: baseline; }  /* the menu titles sit on the logo's baseline */
.sitefoot .fgrid > * { min-width: 0; }
@media (max-width: 768px) { .sitefoot .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sitefoot .fabout { grid-column: 1 / -1; } }
.sitefoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sitefoot li a { color: var(--nav); text-decoration: none; text-underline-offset: 2px; font-size: 16px; overflow-wrap: anywhere; }
.sitefoot li a:hover { color: var(--orange-t); text-decoration: underline; }
.sitefoot .footer-brand { display: flex; flex-direction: column; gap: 20px; }
.sitefoot .footer-brand p { margin: 0; }
.sitefoot .footer-brand > a:first-child { align-self: flex-start; }  /* the logo links home; only the logo is clickable */
.sitefoot .footer-logo { width: calc(clamp(170px, 12vw + 100px, 260px) * 0.9); height: auto; display: block; }
@media (max-width: 600px) { .sitefoot .footer-logo { width: 220px; } }
@media (min-width: 601px) and (max-width: 1023px) { .sitefoot .footer-logo { width: min(240px, 100%); } }
.sitefoot .fm { font-size: 16px; line-height: 1.35; color: var(--text); max-width: 380px; }
.sitefoot .fm strong { color: var(--muted); font-weight: var(--weight-strong); }
.sitefoot .fadr { font-size: 14px; color: var(--muted); }
.sitefoot .nowrap { white-space: nowrap; }
.sitefoot .fh { font-family: var(--font-sans); font-weight: var(--weight-strong); line-height: 1.3; margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.sitefoot .some { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.sitefoot .some a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--bg); }
.sitefoot .some a:hover, .sitefoot .some a:focus-visible { background: var(--orange-dark); color: #fff; }
.sitefoot .some .totop { margin-left: auto; }  /* back-to-top arrow: far right of the social icons */
@media (max-width: 600px) { .sitefoot ul.some.row { column-gap: 12px; } }  /* phones: the arrow fits on the icons' row */
.sitefoot .some svg { width: 22px; height: 22px; flex: none; }
.sitefoot .some span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sitefoot .copyrow { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.sitefoot .copy { margin: 0; padding: 0; border: 0; font-family: var(--font-display); font-size: 18px; color: var(--orange-dark); line-height: .95; }
.sitefoot .lang { display: flex; gap: 14px; align-items: center; }
.sitefoot .flag { display: block; overflow: hidden; line-height: 0; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 2px solid transparent; padding: 3px; transition: opacity .2s, transform .2s; }
.sitefoot .flag svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.sitefoot .flag.on { border-color: var(--orange); }
.sitefoot .flag:hover, .sitefoot .flag:focus-visible { transform: translateY(-1px); }
.sitefoot .flag:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }