/* ============================================================
   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);
}

/* --- Footer shell padding ---
   .gh-inner carries no block padding (it is max-width + auto margins), so
   without this the column headings sat flush against the footer's top edge
   and the bottom bar ended with dead space. ---- */
.gh-footer-inner {
    padding-block: clamp(44px, 5vw, 64px) clamp(24px, 3vw, 36px);
}

/* --- Brand block ---
   screen.css centres the logo, site title and description inside their
   column, which leaves a ragged two-line description floating in the middle
   of a 400px-wide cell. Left-align it: it then lines up with the affiliate
   note and the columns beside it. --- */
.gh-footer-brand {
    align-items: flex-start;
    max-width: 36ch;
    text-align: left;
}

/* --- Multi-column top: brand + Categories / Company / Legal ---
   Centred, so the brand block sits on the same axis as the link columns
   instead of hugging the top while the six-row column runs past it. --- */
.gh-footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.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-bar {
    /* screen.css leaves 120px of margin under this bar and draws a border on
       both sides; the result was a strip of empty footer below the copyright. */
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.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;
    }
}