/* ============================================================
   US Preppers — Site-wide footer styles
   ============================================================
   Consolidated from hero.css (which was loaded homepage-only), so
   the footer renders identically on the homepage and every inner
   page (posts, pages, tags, archives). Loaded LAST on every page so
   it is the single source of truth for footer styling.
   ============================================================ */

/* --- Footer shell: dark charcoal surface with warm top edge --- */
.gh-footer {
    position: relative;
    z-index: 4;
    background: var(--color-char);
    color: var(--color-sand);
    border-top: 1px solid rgba(184, 107, 60, 0.15);
    box-shadow:
        0 -1px 0 rgba(184, 107, 60, 0.12),
        0 -4px 24px rgba(0, 0, 0, 0.15);
}

.gh-footer a {
    color: var(--color-sand);
    transition: color 0.3s ease;
}

.gh-footer a:hover {
    color: var(--color-copper);
}

.gh-footer .gh-card-title,
.gh-footer h2,
.gh-footer h3 {
    color: var(--color-cream);
}

/* --- Multi-column top: brand + Categories / Company / Legal --- */
.gh-footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: flex-start;
}

.gh-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 40px);
}

.gh-footer-heading {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-copper);
    margin-bottom: clamp(8px, 2vmin, 14px);
}

.gh-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gh-footer-col ul li {
    margin-bottom: 6px;
}

.gh-footer-col ul li a {
    color: var(--color-secondary-text);
    font-size: 1.15rem;
    text-decoration: none;
    transition: color 0.2s;
}

.gh-footer-col ul li a:hover {
    color: var(--color-primary-text);
}

/* --- Footer bar: top border + spacing (screen.css keeps it a
   centered column; this only adds the space-between + top spacing
   that was previously homepage-only) --- */
.gh-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: clamp(24px, 4vw, 36px);
    margin-top: clamp(24px, 4vw, 36px);
}

.gh-footer-copyright {
    font-size: 1.15rem;
    color: var(--color-secondary-text);
}

/* --- Dark mode overrides ---
   The footer stays dark charcoal in both modes, but the sand/clay/cream
   tokens remap to dark colors under [data-theme="dark"], so text colors
   are pinned explicitly here for legibility. */
[data-theme="dark"] .gh-footer {
    color: #F7F3ED;
}

[data-theme="dark"] .gh-footer h2,
[data-theme="dark"] .gh-footer h3,
[data-theme="dark"] .gh-footer .gh-card-title {
    color: #F7F3ED;
}

[data-theme="dark"] .gh-footer a {
    color: var(--color-copper);
}

[data-theme="dark"] .gh-footer a:hover {
    color: var(--color-ember);
}

[data-theme="dark"] .gh-footer-heading {
    color: var(--color-ember);
}

[data-theme="dark"] .gh-footer-col ul li a {
    color: #A08C7E;
}

[data-theme="dark"] .gh-footer-col ul li a:hover {
    color: var(--color-copper);
}

[data-theme="dark"] .gh-footer-copyright {
    color: #A89B8C;
}

/* --- Responsive: stack on mobile --- */
@media (max-width: 768px) {
    .gh-footer-top {
        grid-template-columns: 1fr;
    }

    .gh-footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gh-footer-links {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gh-footer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}