/* ============================================================================
   Site footer — shared component ("gg-footer")
   Behaviour: static/js/footer.js

   The 2026 footer introduced with the Growthguru.ai home page, made reusable
   for every Growthguru / GrowthCanvas page that carries site chrome. Same
   spirit as the top navigation (topnav.js / topnav.css): a markup contract +
   stylesheet + small behaviour script.

   Before this existed the footer was copy-pasted per page and had drifted into
   four different designs — the navy bar here, an older gradient `.site-footer`,
   a purple three-column grid on the home2 drafts, and a brand-line-only strip
   on the cowork and kumii pages. Half of them were missing the Support link,
   half offered a language selector nothing wired, and the copyright line was a
   plain <span> on some pages and a link on others.

   Usage — one <footer> per page, nothing page-local around it:

       <footer id="contact" class="gg-footer">
         <div class="gg-footer-inner">
           <div class="gg-footer-copy">
             <span data-i18n="growthguru:footer.copyright">&copy; 2026</span>
             <a class="gg-footer-brand" href="https://growthguru.ai"
                target="_blank" rel="noopener noreferrer">Growthguru.ai</a> Limited.
             <span data-i18n="growthguru:footer.allRightsReserved">All rights reserved.</span>
             <span data-i18n="growthguru:footer.registered">Registered in the Republic of Mauritius</span>
             <span class="gg-footer-note">…optional page-specific line…</span>
           </div>
           <div class="gg-footer-links">
             <a href="…">Terms &amp; Conditions</a>
             <span class="sep">|</span>
             …
             <select id="footerLangSelect" class="footer-lang-select"> … </select>
           </div>
         </div>
       </footer>

   THE BAR IS BRAND CHROME, on the same explicit decision the top navigation
   records: one deep-navy footer on every page under every theme, a rule-5
   opt-out rather than an oversight. GrowthCanvas pages carry it unchanged even
   though that app runs its own dark/ocean/light themes — the footer belongs to
   Growthguru.ai Limited, not to the surface it sits under.

   The `.gg-footer-note` slot is the one sanctioned per-page variation: the
   kumii pages state their partnership there. Anything else that "only this
   page needs" belongs in the page, above the footer.

   The language selector is optional markup, not optional wiring. Include it
   only on pages that actually initialise i18n — a control that changes nothing
   is worse than no control. footer.js is inert when the select is absent.
   ============================================================================ */

.gg-footer {
    background: #1c1f38;
    color: #c8d3e0;
}

.gg-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 22px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 26px;
}

/* ── Left: copyright, legal seat, optional page note ─────────────────────── */

.gg-footer-copy {
    font-size: 13.5px;
    line-height: 1.65;
    color: #c8d3e0;
    margin: 0;
}

/* The company name is a link to the marketing site on every page, including
   the marketing site itself — it was a bare <span> on the home pages and a
   link everywhere else, which is exactly the kind of drift this file ends. */
.gg-footer-brand {
    color: #f97316;
    font-weight: 600;
    text-decoration: none;
}

.gg-footer-brand:hover,
.gg-footer-brand:focus-visible {
    color: #fb923c;
    text-decoration: underline;
}

.gg-footer-note {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: #9fb0c2;
}

.gg-footer-note a {
    color: #c8d3e0;
    text-decoration: underline;
}

.gg-footer-note a:hover,
.gg-footer-note a:focus-visible {
    color: #ffffff;
}

/* ── Right: legal links, contact, language ───────────────────────────────── */

.gg-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    font-size: 13.5px;
}

.gg-footer-links a {
    color: #c8d3e0;
    white-space: nowrap;
    text-decoration: none;
}

.gg-footer-links a:hover,
.gg-footer-links a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.gg-footer-links .sep {
    color: #3a4a60;
    user-select: none;
}

.gg-footer .footer-lang-select {
    background: #2a2e4d;
    color: #c8d3e0;
    border: 1px solid #3a4a60;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    outline: none;
}

.gg-footer .footer-lang-select:hover,
.gg-footer .footer-lang-select:focus-visible {
    border-color: #7c3aed;
    color: #ffffff;
}

/* Native <option> lists inherit the page, not the control, on Windows —
   state both or the menu opens as dark-on-dark. */
.gg-footer .footer-lang-select option {
    background: #2a2e4d;
    color: #e8eef5;
}

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .gg-footer-inner {
        padding: 20px 22px;
    }
}

@media (max-width: 720px) {
    .gg-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .gg-footer-links {
        gap: 10px 12px;
    }
}