/*
 * Footer styles for Shri OM Darbar
 * Rebuilt on the semantic token layer from style.css — no new tokens introduced.
 */

/* ==========================================================
   FOOTER SHELL
   ========================================================== */

.od-footer {
    position: relative;
    background-color: var(--od-bg-inverse);
    color: var(--od-text-inverse-muted);
    padding-block-start: var(--od-space-16);
    overflow: hidden;
}

/* Signature threshold accent — a diya-lit line marking the site's close */
.od-footer::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--od-saffron-base) 0%,
        var(--od-gold-base) 50%,
        var(--od-saffron-base) 100%
    );
}

.od-footer a {
    color: var(--od-link-inverse);
}

.od-footer a:hover,
.od-footer a:focus-visible {
    color: var(--od-link-inverse-hover);
}


/* ==========================================================
   NEWSLETTER / DARSHAN UPDATES BAND
   ========================================================== */

.od-footer__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--od-space-6);
    padding-block-end: var(--od-space-12);
    margin-block-end: var(--od-space-12);
    border-block-end: 1px solid var(--od-border-inverse);
}

.od-footer__cta-copy {
    max-width: 32rem;
}

.od-footer__cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    font-size: var(--od-type-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--od-weight-medium);
    color: var(--od-gold-base);
    margin-block-end: var(--od-space-2);
}

.od-footer__cta-title {
    font-size: var(--od-type-h4);
    color: var(--od-text-inverse);
    margin-block-end: var(--od-space-2);
}

.od-footer__cta-desc {
    font-size: var(--od-type-sm);
    color: var(--od-text-inverse-muted);
    margin-block-end: 0;
    line-height: var(--od-leading-base);
}

.od-footer__cta-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--od-space-3);
    flex: 0 1 auto;
    width: 100%;
    max-width: 26rem;
}

.od-footer__cta-input {
    flex: 1 1 0;
    min-width: 180px;
    padding: var(--od-space-3) var(--od-space-4);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--od-border-inverse);
    border-radius: var(--od-radius-md);
    color: var(--od-text-inverse);
    font-family: var(--od-font-sans);
    font-size: var(--od-type-sm);
    transition: border-color var(--od-duration-fast) var(--od-ease-standard),
                background-color var(--od-duration-fast) var(--od-ease-standard);
}

.od-footer__cta-input::placeholder {
    color: var(--od-text-inverse-muted);
    opacity: 0.75;
}

.od-footer__cta-input:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.od-footer__cta-input:focus-visible {
    outline: none;
    border-color: var(--od-saffron-base);
    background-color: rgba(255, 255, 255, 0.1);
}

/*
 * Newsletter submit reuses the site's .od-btn / .od-btn--primary system
 * (defined in header.css) instead of inventing a one-off button style.
 * Only the form-specific layout behavior lives here.
 */
.od-footer__cta-submit {
    white-space: nowrap;
    flex-shrink: 0;
}

.od-footer__cta-submit svg {
    transition: transform var(--od-duration-fast) var(--od-ease-standard);
}

.od-footer__cta-submit:hover svg {
    transform: translateX(3px);
}

.od-footer__cta-note {
    display: block;
    width: 100%;
    font-size: var(--od-type-xs);
    color: var(--od-text-inverse-muted);
    opacity: 0.75;
    margin-block-start: var(--od-space-2);
}


/* ==========================================================
   MAIN LINK GRID
   ========================================================== */

.od-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--od-space-8);
    padding-block-end: var(--od-space-12);
}

.od-footer__brand {
    display: inline-block;
    margin-block-end: var(--od-space-4);
}

.od-footer__logo {
    height: 48px;
    width: auto;
}

.od-footer__col--about p {
    font-size: var(--od-type-sm);
    color: var(--od-text-inverse-muted);
    line-height: var(--od-leading-base);
    margin-block-end: var(--od-space-6);
    max-width: 26rem;
}

.od-footer__title {
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--od-gold-base);
    margin-block-end: var(--od-space-4);
}

.od-footer__list {
    list-style: none;
}

.od-footer__list li {
    margin-block-end: var(--od-space-3);
}

.od-footer__list a {
    position: relative;
    font-size: var(--od-type-sm);
    display: inline-flex;
    align-items: center;
}

/* Underline-on-hover instead of a bare color swap — gives the link list intent */
.od-footer__list--plain a::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -2px;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width var(--od-duration-fast) var(--od-ease-standard);
}

.od-footer__list--plain a:hover::after,
.od-footer__list--plain a:focus-visible::after,
.od-footer__list--plain a.is-current::after {
    width: 100%;
}

/*
 * .is-current mirrors the header's active-nav pattern (od_is_current()).
 * Gold matches this footer's existing section-title accent so it reads
 * as "you are here" without introducing a new color meaning.
 */
.od-footer__list--plain a.is-current {
    color: var(--od-gold-base);
    font-weight: var(--od-weight-medium);
}

.od-footer__list--icons li {
    display: flex;
    align-items: flex-start;
    gap: var(--od-space-3);
}

.od-footer__list--icons svg {
    flex-shrink: 0;
    margin-block-start: 0.2rem;
    color: var(--od-saffron-base);
}

.od-footer__list--icons span,
.od-footer__list--icons a {
    font-size: var(--od-type-sm);
    line-height: var(--od-leading-snug);
}

.od-footer__list--icons a {
    color: var(--od-link-inverse);
}


/* ==========================================================
   SOCIAL LINKS
   ========================================================== */

.od-footer__social-links {
    display: flex;
    gap: var(--od-space-3);
}

.od-footer__social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--od-radius-pill);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--od-border-inverse);
    color: var(--od-text-inverse);
    transition: background-color var(--od-duration-fast) var(--od-ease-standard),
                border-color var(--od-duration-fast) var(--od-ease-standard),
                transform var(--od-duration-fast) var(--od-ease-standard);
}

.od-footer__social-links a:hover,
.od-footer__social-links a:focus-visible {
    background-color: var(--od-action-primary-bg);
    border-color: var(--od-action-primary-bg);
    color: var(--od-action-primary-text);
    transform: translateY(-3px);
}


/* ==========================================================
   BOTTOM BAR
   ========================================================== */

.od-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--od-space-4);
    border-block-start: 1px solid var(--od-border-inverse);
    padding-block: var(--od-space-6);
    font-size: var(--od-type-xs);
    color: var(--od-text-inverse-muted);
}

.od-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--od-space-2) var(--od-space-6);
    list-style: none;
}

.od-footer__bottom-links a {
    font-size: var(--od-type-xs);
}

.od-footer__credit {
    opacity: 0.85;
}


/*
 * NOTE: a floating "back to top" button was intentionally left out here.
 * This site already ships sticky-cta.css/js — almost certainly a
 * fixed-position bar pinned to the bottom of the viewport — and a second
 * floating button in the same corner is a likely visual collision on
 * mobile. Add it back once sticky-cta.css's exact position/z-index are
 * known, so the two can be coordinated instead of guessed at.
 */

/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 991px) {
    .od-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--od-space-8);
    }

    .od-footer__col--about {
        grid-column: 1 / -1;
    }

    .od-footer__col--about p {
        max-width: none;
    }

    .od-footer__cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .od-footer__cta-form {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
    }
}


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 575px) {
    .od-footer {
        padding-block-start: var(--od-space-12);
    }

    .od-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--od-space-8);
        padding-block-end: var(--od-space-8);
    }

    .od-footer__cta {
        padding-block-end: var(--od-space-8);
        margin-block-end: var(--od-space-8);
    }

    .od-footer__cta-input,
    .od-footer__cta-submit {
        flex: 1 1 auto;
        width: 100%;
    }

    .od-footer__social-links {
        gap: var(--od-space-2);
    }

    .od-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
    }
}


/* ==========================================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .od-footer__cta-submit:hover,
    .od-footer__social-links a:hover {
        transform: none;
    }
}