/* ── Public site footer ──
   One footer for every public page: the EN/FR landing pages, legal pages,
   404s, new-recipes.html and the generated /en/recipes/ + /fr/recettes/
   pages. Self-contained (only needs variables.css and fonts.css) so the
   landing page, which skips styles.css/components.css, can load it too.
   Figma: "Site Footer" and "Language Select" components. */
.site-footer { padding: var(--spacing-72) 0 var(--spacing-40); margin: 0; border: 0; }
.site-footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--spacing-24); }

.site-footer .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--spacing-48); padding-bottom: var(--spacing-48); border-bottom: 1px solid var(--outline-variant); }
.site-footer .logo { display: inline-block; }
.site-footer .logo img { display: block; height: 34px; width: auto; margin-bottom: var(--spacing-16); }
.site-footer .logo .logo-dark { display: none; }
[data-theme="dark"] .site-footer .logo .logo-light { display: none; }
[data-theme="dark"] .site-footer .logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-footer .logo .logo-light { display: none; }
    :root:not([data-theme="light"]) .site-footer .logo .logo-dark { display: block; }
}
.site-footer .foot-grid p { margin: 0; font-family: var(--font-medium); font-size: var(--body-small); line-height: 1.6; color: var(--on-surface-variant); max-width: 30ch; }

.site-footer .foot-col h2 { margin: 0 0 var(--spacing-16); font-family: var(--font-bold); font-size: var(--title-small); line-height: 1.4; color: var(--on-surface); }
.site-footer .foot-col a { display: block; font-family: var(--font-medium); font-size: var(--body-small); color: var(--on-surface-variant); text-decoration: none; padding: var(--spacing-4) 0; }
.site-footer .foot-col a:hover { color: var(--on-surface); }

.site-footer .foot-bottom { padding-top: var(--spacing-24); font-family: var(--font-medium); font-size: var(--body-small); color: var(--on-surface-variant); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap; }

/* Language switcher: native <select> with the OS arrow removed and our own
   chevron drawn on the wrapper, so it sits with even padding on the right. */
.lang-select-wrap { position: relative; display: inline-flex; color: var(--on-surface-variant); }
.lang-select-wrap::after { content: ""; position: absolute; right: var(--spacing-16); top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lang-select { -webkit-appearance: none; appearance: none; margin: 0; font-family: var(--font-semibold); font-size: var(--label-large); line-height: 1.4; color: var(--on-surface-variant); background: var(--band, var(--surface-container-lowest)); border: 1px solid var(--outline-variant); border-radius: var(--radius-12); padding: var(--spacing-8) var(--spacing-40) var(--spacing-8) var(--spacing-16); cursor: pointer; }
.lang-select:hover { border-color: var(--outline); }

@media (max-width: 860px) {
    .site-footer .foot-grid { grid-template-columns: 1fr 1fr; }
    .site-footer .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .site-footer-inner { padding: 0 var(--spacing-16); }
}