/*
 * footer.css — Tigray Insights site footer
 * Child theme: ashe-pro-child
 *
 * Loaded on ALL pages via tigrayinsights_enqueue_child_theme_styles().
 * This stylesheet replaces the parent theme footer (social icons,
 * FikProjects ©) with the unified Tigray Insights brand footer.
 *
 * The footer markup is rendered by footer.php (child theme override).
 * The header background image is passed as --ti-footer-bg via an
 * inline style attribute set in footer.php using get_header_image().
 *
 * Design language:
 *   Dark background (#1a2330) + header image overlay at 85–92% opacity.
 *   Gold/cream accent text hierarchy. Restrained hover transitions.
 */

/* ─── CSS variables needed by this file ─────────────────────────────
   --ti-dark and --ti-duration are also defined in homepage.css
   (on :root for front-page only). We re-declare them here so the
   footer renders correctly on non-homepage pages. ────────────────── */
:root {
    --ti-dark:     #1a2330;
    --ti-duration: 0.22s;
}

/* ─── Outer shell ────────────────────────────────────────────────── */

.ti-hp-footer {
    /* Layered background: header image + dark gradient overlay.
     * --ti-footer-bg is injected as an inline CSS custom property
     * by footer.php using get_header_image(). Falls back gracefully
     * to solid dark if no header image is configured. */
    background-color: var(--ti-dark);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.92)),
        var(--ti-footer-bg, none);
    background-size: cover;
    background-position: center top;

    color: rgba(255, 255, 255, 0.82);

    /* Footer sits outside .page-content (at #page-wrap level),
     * so no negative margins are needed — it is already full-width.
     * Horizontal padding mirrors the theme's standard 30px content gutter. */
    padding: 3rem 1.875rem 3.5rem;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ─── Inner grid ─────────────────────────────────────────────────── */

.ti-hp-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 3rem;
    row-gap: 1.6rem;
    align-items: start;
    /* Constrain line length on very wide viewports and centre within the
     * full-width footer background — mirrors the site's 1600px boxed wrapper
     * with the same 1.75rem horizontal gutter used by .ti-hp-container. */
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Brand block ────────────────────────────────────────────────── */

.ti-hp-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
}

.ti-hp-footer-site-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.03em;
}

.ti-hp-footer-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.58);
    margin: 0;
    max-width: 380px;
}

/* ─── Navigation ─────────────────────────────────────────────────── */

.ti-hp-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    align-items: flex-end;
}

.ti-hp-footer-nav a {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: color var(--ti-duration);
}

.ti-hp-footer-nav a:hover {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
}

/* ─── Copyright bar ──────────────────────────────────────────────── */

.ti-hp-footer-copy {
    grid-column: 1 / -1;
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.32);
    margin: 0;
    padding-top: 1.6em;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    letter-spacing: 0.04em;
}

/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ti-hp-footer {
        padding: 2.4rem 1.25rem 3rem;
    }

    .ti-hp-footer-inner {
        grid-template-columns: 1fr;
    }

    .ti-hp-footer-nav {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.55em 1.2em;
    }
}