/* Copyright (c) We Decide Canada * File: footer.css * Purpose: Shared footer styling (theme-aware; responsive columns; bottom meta row). * Requires: global_theme.css (variables) and a .container utility from existing CSS. */ .site_footer { background: var(--color-bg); color: var(--color-text); border-top: 1px solid var(--color-border); /* Fixed footer at bottom of viewport */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; /* below menu overlay (1150) */ /* Ensure the footer never grows to fully cover the page on short viewports */ max-height: 70vh; display: flex; flex-direction: column; } /* Options area (columns) sits above meta bar */ .site_footer__inner { padding-top: 28px; padding-bottom: 28px; padding-left: 16px; padding-right: 16px; /* Allow scrolling when viewport height is small */ overflow: auto; -webkit-overflow-scrolling: touch; /* Prevent flex overflow issues */ min-height: 0; flex: 1 1 auto; } .site_footer__cols { display: grid; grid-template-columns: 1fr; gap: 22px; } .site_footer__col { min-width: 0; margin-left: auto; margin-right: auto; text-align: left; max-width: 22rem; width: 100%; } .site_footer__heading { margin: 0 0 12px 0; font-size: 1.25rem; line-height: 1.2; font-weight: 700; color: var(--color-text); letter-spacing: 0.02em; } .site_footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .site_footer__item { min-width: 0; } .site_footer__link { color: var(--color-text); text-decoration: none; display: inline-block; font-size: 1.05rem; line-height: 1.35; } .site_footer__link:hover, .site_footer__link:focus, .site_footer__link:focus-visible { color: var(--color-primary); text-decoration: none; outline: none; } /* Bottom meta row */ .site_footer__meta { border-top: 1px solid var(--color-border); background: var(--color-bg); /* Keep meta row visible even when options scroll */ flex: 0 0 auto; } .site_footer__meta_inner { box-sizing: border-box; min-height: var(--site-footer-meta-height); /* Small screens: keep everything on one line */ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px; } .site_footer__meta_left, .site_footer__meta_right { display: flex; gap: 8px; align-items: center; min-width: 0; } .site_footer__meta_left { flex: 0 0 auto; } .site_footer__meta_right { flex: 1 1 auto; justify-content: flex-end; } .site_footer__meta_value { color: var(--color-text); font-weight: 400; /* Keep copyright on one line */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Slightly smaller on mobile to avoid wrapping */ font-size: 0.9rem; } .site_footer__toggle_btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--color-border); color: var(--color-text); background: transparent; font: inherit; font-weight: 400; cursor: pointer; /* Avoid the toggle shrinking too much */ flex: 0 0 auto; } .site_footer__toggle_btn:hover, .site_footer__toggle_btn:focus-visible { border-color: var(--color-primary); outline: none; } /* Hidden state controlled by JS */ .site_footer[data-collapsed="true"] .site_footer__inner { display: none; } /* When options are hidden, remove the meta-row top border so we don't get a second line. The footer already has its own border-top. */ .site_footer[data-collapsed="true"] .site_footer__meta { border-top: 0; } /* Prevent blink: decide initial state from before JS runs. */ html[data-footer="collapsed"] .site_footer:not([data-footer-ready="true"]) .site_footer__inner { display: none; } html[data-footer="expanded"] .site_footer:not([data-footer-ready="true"]) .site_footer__inner { display: block; } /* Avoid the double line in the pre-JS "collapsed" state as well. */ html[data-footer="collapsed"] .site_footer:not([data-footer-ready="true"]) .site_footer__meta { border-top: 0; } /* Tablet */ @media (min-width: 641px) { .site_footer { max-height: 60vh; } .site_footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .site_footer__heading { font-size: 1.3rem; } .site_footer__link { font-size: 1.0625rem; } .site_footer__meta_value { font-size: 1rem; } } /* Desktop */ @media (min-width: 1025px) { .site_footer { max-height: 55vh; } .site_footer__inner { padding-top: 34px; padding-bottom: 34px; } .site_footer__heading { font-size: 1.375rem; } .site_footer__link { font-size: 1.1rem; } } /* Extra-short viewports: allow more room for options but keep content visible */ @media (max-height: 520px) { .site_footer { max-height: 65vh; } .site_footer__inner { padding-top: 16px; padding-bottom: 16px; } .site_footer__meta_inner { padding-top: 10px; padding-bottom: 10px; } .site_footer__meta_value { font-size: 0.85rem; } }