/**
 * footer.css — top footer (4 columns) + bottom footer.
 *
 * Structure:
 *   .ice-footer (positioned container)
 *     ├── ::before  (background image layer)
 *     ├── ::after   (dark overlay for text readability)
 *     └── .ice-footer__top / .ice-footer__bottom (content, z-indexed above)
 *
 * Transitions (Elementor-style):
 *   background var(--overlay-transition,.3s),
 *   border-radius var(--border-transition,.3s),
 *   opacity var(--overlay-transition,.3s)
 *
 * @package ICE_GeneratePress_Child
 * @since   1.0.0
 */

.ice-footer {
        position: relative;
        background: var(--ice-footer-bg);
        color: var(--ice-footer-color);
        margin-top: auto;
        overflow: hidden;
        /* Gradient gold border on top — fades in from transparent, peaks at
         * the accent color, fades out to transparent. Creates a subtle
         * divider between content and footer. */
        border-top: var(--ice-footer-top-border-width, 2px) solid;
        border-image: var(--ice-footer-top-border-image) 1;
        transition: background var(--overlay-transition, .3s),
                    border-radius var(--border-transition, .3s),
                    opacity var(--overlay-transition, .3s);
}

/* ----- Background image layer ----- */
.ice-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--ice-footer-bg-image);
        background-size: var(--ice-footer-bg-size);
        background-position: var(--ice-footer-bg-position);
        background-repeat: var(--ice-footer-bg-repeat);
        background-attachment: var(--ice-footer-bg-attachment);
        z-index: 0;
        transition: background var(--overlay-transition, .3s),
                    border-radius var(--border-transition, .3s),
                    opacity var(--overlay-transition, .3s);
}

/* ----- Overlay layer (dark, for text readability) ----- */
.ice-footer::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--ice-footer-overlay);
        opacity: var(--ice-footer-overlay-opacity, 0.92);
        z-index: 1;
        transition: background var(--overlay-transition, .3s),
                    border-radius var(--border-transition, .3s),
                    opacity var(--overlay-transition, .3s);
}

/* ----- Content layers (above background + overlay) ----- */
.ice-footer__top,
.ice-footer__bottom {
        position: relative;
        z-index: 2;
}

/* Safety net: hide any GeneratePress default footer markup that survives
 * the remove_action calls in inc/setup.php (covers all GP versions). */
.site-info,
footer.site-info,
.inside-site-info,
.footer-widgets-container,
#footer-widgets {
        display: none !important;
}

.ice-footer a {
        color: var(--ice-footer-link-color);
        text-decoration: none;
        transition: color var(--ice-t-fast);
}

.ice-footer a:hover {
        color: var(--ice-footer-link-hover);
        text-decoration: none;
}

/* ----- Top footer ----- */

.ice-footer__top {
        padding-top: var(--ice-spacing-3xl);
        padding-bottom: var(--ice-spacing-2xl);
}

.ice-footer__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--ice-spacing-xl);
        max-width: var(--ice-container);
        margin: 0 auto;
        padding: 0 var(--ice-spacing-sm);
}

/* Brand column gets more breathing room on desktop */
.ice-footer__col--brand {
        grid-column: span 1;
}

@media (max-width: 1024px) {
        .ice-footer__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--ice-spacing-lg);
        }
}

@media (max-width: 600px) {
        .ice-footer__grid {
                grid-template-columns: 1fr;
                gap: var(--ice-spacing-lg);
        }
}

.ice-footer__col {
        min-width: 0;
}

.ice-footer__title {
        font-family: var(--ice-font-heading);
        font-size: var(--ice-fs-md);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-footer-title-color);
        margin: 0 0 var(--ice-spacing-md);
        letter-spacing: var(--ice-ls-tight);
        position: relative;
        padding-bottom: var(--ice-spacing-xs);
        /* Thin grey line spanning the full title width (extends beyond the
         * gold underline). Combined with the ::after gold line, this creates
         * the visual: "━━━━━ ----------------------------"
         * (gold thick short + grey thin long) */
        border-bottom: 1px solid var(--ice-footer-title-line-color, rgba(255, 255, 255, 0.12));
}

/* Gold underline accent below footer column titles.
 * Short, thick, gold — sits on top of the thin grey border-bottom.
 * Matches the reference design (28px wide, 2px tall, gold, rounded). */
.ice-footer__title::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: var(--ice-footer-title-underline-width, 28px);
        height: var(--ice-footer-title-underline-height, 2px);
        background: var(--ice-footer-title-underline-color, var(--ice-accent));
        border-radius: 2px;
}

/* Brand column */

.ice-footer__brand {
        display: flex;
        flex-direction: column;
        gap: var(--ice-spacing-md);
}

/* NOTE: The .ice-footer__widgets / .ice-footer__widgets--1 classes were
 * removed in v1.0.4 along with the ice-footer-1 sidebar. The brand column
 * is now entirely template-driven. */

.ice-footer__brand .ice-logo {
        color: var(--ice-white);
}

.ice-footer__brand .ice-logo:hover {
        color: var(--ice-white);
}

.ice-footer__brand .ice-logo__mark {
        background: var(--ice-accent);
        color: var(--ice-primary);
}

.ice-footer__brand .ice-logo__text {
        color: var(--ice-white);
}

/* The site logo (uploaded via Customizer → Site Identity) is shown as-is
 * by default. When the Customizer toggle "Force footer logo to white" is
 * ON (default), the body gets the .ice-footer-logo-white class and the
 * logo is forced to pure white via CSS filter. This is the recommended
 * setting for the dark footer background.
 *
 * To use a colored logo in the footer, uncheck the toggle under
 * Appearance → Customize → ICE Theme Options → Footer.
 */
.ice-footer__brand .custom-logo {
        max-height: 56px;
        width: auto;
        height: auto;
        display: block;
}

/* Force the footer logo to white when the body class is present. */
body.ice-footer-logo-white .ice-footer__brand .custom-logo {
        filter: brightness(0) invert(1);
}

/* On hover, restore original colors for a subtle interactive cue. */
body.ice-footer-logo-white .ice-footer__brand a:hover .custom-logo {
        filter: none;
        transition: filter var(--ice-t-base);
}

.ice-footer__about {
        font-size: var(--ice-fs-sm);
        line-height: var(--ice-lh-relaxed);
        color: var(--ice-footer-color);
        margin: 0;
        max-width: 360px;
}

.ice-footer__brand .ice-socials__link {
        color: var(--ice-white);
        background: rgba(255, 255, 255, 0.08);
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all var(--ice-t-fast);
}

.ice-footer__brand .ice-socials__link:hover {
        background: var(--ice-accent);
        color: var(--ice-primary);
        text-decoration: none;
        transform: translateY(-2px);
}

.ice-footer__brand .ice-socials {
        display: flex;
        gap: var(--ice-spacing-xs);
        margin-top: var(--ice-spacing-2xs);
}

/* Footer menus */

.ice-footer-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--ice-spacing-xs);
}

.ice-footer-menu li {
        margin: 0;
}

.ice-footer-menu a {
        display: inline-block;
        padding: 4px 0;
        font-size: var(--ice-fs-sm);
        color: var(--ice-footer-link-color);
        transition: color var(--ice-t-fast), padding var(--ice-t-fast);
}

.ice-footer-menu a:hover {
        color: var(--ice-footer-link-hover);
        padding-left: 6px;
}

.ice-footer-menu .sub-menu,
.ice-footer-menu .children {
        display: none;
}

/* Footer contact */

.ice-footer-contact {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--ice-spacing-sm);
}

.ice-footer-contact__item {
        display: flex;
        align-items: flex-start;
        gap: var(--ice-spacing-sm);
        font-size: var(--ice-fs-sm);
        line-height: var(--ice-lh-normal);
        color: var(--ice-footer-color);
}

.ice-footer-contact__item svg {
        flex-shrink: 0;
        color: var(--ice-accent);
        margin-top: 2px;
}

.ice-footer-contact__item a {
        color: var(--ice-footer-link-color);
        word-break: break-word;
}

.ice-footer-contact__item a:hover {
        color: var(--ice-footer-link-hover);
}

/* Footer widgets */

.ice-footer-widget {
        margin-bottom: var(--ice-spacing-md);
}

.ice-footer-widget__title {
        font-family: var(--ice-font-heading);
        font-size: var(--ice-fs-md);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-footer-title-color);
        margin: 0 0 var(--ice-spacing-md);
        position: relative;
        padding-bottom: var(--ice-spacing-xs);
        /* Thin grey line spanning the full title width (extends beyond the
         * gold underline). Same treatment as .ice-footer__title. */
        border-bottom: 1px solid var(--ice-footer-title-line-color, rgba(255, 255, 255, 0.12));
}

/* Gold underline accent below widget titles (same as .ice-footer__title). */
.ice-footer-widget__title::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: var(--ice-footer-title-underline-width, 28px);
        height: var(--ice-footer-title-underline-height, 2px);
        background: var(--ice-footer-title-underline-color, var(--ice-accent));
        border-radius: 2px;
}

.ice-footer-widget * {
        max-width: 100%;
}

.ice-footer-widget a {
        color: var(--ice-footer-link-color);
}

.ice-footer-widget a:hover {
        color: var(--ice-footer-link-hover);
}

.ice-footer-widget input[type="text"],
.ice-footer-widget input[type="email"],
.ice-footer-widget input[type="url"],
.ice-footer-widget input[type="search"],
.ice-footer-widget textarea {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: var(--ice-white);
        border-radius: var(--ice-btn-radius-sm);
        padding: 10px 12px;
        width: 100%;
}

.ice-footer-widget input:focus,
.ice-footer-widget textarea:focus {
        outline: 2px solid var(--ice-accent);
        outline-offset: 0;
        border-color: transparent;
}

/* ----- Bottom footer ----- */

.ice-footer__bottom {
        background: var(--ice-footer-bottom-bg);
        padding: var(--ice-spacing-md) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ice-footer__bottom-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ice-spacing-md);
        flex-wrap: wrap;
        max-width: var(--ice-container);
        margin: 0 auto;
        padding: 0 var(--ice-spacing-sm);
}

.ice-footer__copyright {
        margin: 0;
        font-size: var(--ice-fs-sm);
        color: rgba(255, 255, 255, 0.6);
}

.ice-footer__legal ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-sm);
        list-style: none;
        margin: 0;
        padding: 0;
}

.ice-footer__legal a {
        font-size: var(--ice-fs-sm);
        color: rgba(255, 255, 255, 0.6);
        transition: color var(--ice-t-fast);
}

.ice-footer__legal a:hover {
        color: var(--ice-accent);
        text-decoration: none;
}

.ice-footer__legal li + li::before {
        content: "|";
        margin-right: var(--ice-spacing-sm);
        color: rgba(255, 255, 255, 0.2);
}