/* shared/theme/branding/footer.css
   Footer styling — colors and layout.

   Depends on --pg-* and --md-* variables from colors.css — mkdocs-base.yml
   (and splash/mkdocs.yml) list colors.css first in extra_css so those
   variables are defined before this file loads.

   Neutral grey matching code block backgrounds.
   !important needed to override Material's default footer colors.
*/

/* Light mode - light grey like code blocks */
.md-footer,
.md-footer-meta {
    background: var(--pg-code-bg-light) !important;
    border: none !important;
}

.md-footer,
.md-footer-meta,
.md-copyright,
.md-copyright__highlight,
.md-social__link {
    color: var(--pg-gray-600) !important;
}

.md-footer a,
.md-footer-meta a {
    color: var(--pg-gray-600) !important;
}

.md-footer a:hover,
.md-footer-meta a:hover {
    color: var(--pg-dark-green) !important;
}

.md-copyright {
    font-size: var(--pg-footer-font-size);
}

/* Material's .md-social__link is display:inline-block (NOT flex), so the text
   label and globe SVG are inline boxes whose vertical relationship is governed
   by vertical-align — flex properties here are inert. Material ships the globe
   at vertical-align:-25%; align both label and icon to middle so their centers
   sit on the same line. Width is auto (overriding Material's default 1.6rem,
   which clips the label) so the box sizes to the label + globe — a previous
   fixed 400px overflowed narrow phones by ~100px, causing page-wide horizontal
   scroll that made the header green stop short of the right edge. The footer
   meta row is flex/space-between, so the link stays right-aligned without a
   reserved width. */
.md-social__link[title="PowerGEM Website"] {
    width: auto;
    text-align: right;
    /* Keep the label and globe on one line. width:auto lets the box shrink in
       the footer's flex row, and nowrap on the ::before alone doesn't prevent a
       break *between* the label and the globe — so nowrap here on the link keeps
       them side by side (label left, globe right) at the content's natural
       ~180px, which still fits narrow phones. */
    white-space: nowrap;
}

.md-social__link[title="PowerGEM Website"]::before {
    content: "PowerGEM Website";
    /* All footer text shares one size token (see fonts.css --pg-footer-font-size). */
    font-size: var(--pg-footer-font-size);
    margin-right: 6px;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    top: 1px;
}

.md-social__link[title="PowerGEM Website"] svg {
    vertical-align: middle;
}

/* Dark mode - dark grey like code blocks */
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta {
    background: var(--pg-code-bg-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta,
[data-md-color-scheme="slate"] .md-copyright,
[data-md-color-scheme="slate"] .md-copyright__highlight,
[data-md-color-scheme="slate"] .md-social__link {
    color: var(--pg-text-secondary-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer a,
[data-md-color-scheme="slate"] .md-footer-meta a {
    color: var(--pg-text-secondary-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer a:hover,
[data-md-color-scheme="slate"] .md-footer-meta a:hover {
    color: var(--pg-text-primary-dark) !important;
}

/* Support email bar in footer */
.md-footer-support {
    padding: 0.6rem 0;
    font-size: var(--pg-footer-font-size);
    text-align: center;
    background: var(--pg-bright-gray) !important;
    color: var(--pg-gray-600) !important;
}

.md-footer-support a {
    color: var(--pg-dark-green) !important;
    font-weight: 500;
}

.md-footer-support a:hover {
    text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-footer-support {
    background: var(--pg-bg-dark-light) !important;
    color: var(--pg-text-secondary-dark) !important;
}

[data-md-color-scheme="slate"] .md-footer-support a {
    color: var(--pg-green-light-dark-mode) !important;
}