/*=====================================================
  FOOTER.CSS
  FINTECHOISIS | GPIR
  Executive Footer
======================================================*/


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

#footer{

    position:relative;

    background:var(--hero-light-bg);

    color:var(--hero-light-body);

    padding:80px 0 30px;

    border-top:1px solid var(--hero-light-border);

    overflow:hidden;

    /* The footer is always the last, tallest thing on every page (~1,800px
       of nav columns, tickers and legal links) and is never in the initial
       viewport. Skipping its layout/paint until the reader nears it keeps
       every page's initial render cost independent of footer size —
       content-visibility:auto still keeps it in the accessibility tree
       and keyboard-focusable, it only defers rendering work. */
    content-visibility:auto;
    contain-intrinsic-size:auto 1800px;
}

#footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(200,162,74,.08),
        transparent 45%);

    pointer-events:none;
}

/*=====================================================
  CONTAINER
======================================================*/

.footer-container{

    width:min(92%,1400px);

    margin:auto;

    position:relative;

    z-index:2;
}

/*=====================================================
  TOP LAYOUT — brand sidebar + link columns
======================================================*/

.footer-top{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:60px;

    padding-bottom:50px;

    border-bottom:1px solid var(--hero-light-border);

    align-items:start;
}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px 60px;
}

/*=====================================================
  BRAND
======================================================*/

.footer-brand{

    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.footer-brand-link{

    display:inline-flex;

    margin-bottom:20px;
}

.footer-logo{

    height:40px;

    width:auto;
}

.footer-headline{

    color:var(--hero-navy);

    font-weight:700;

    line-height:1.4;

    font-size:1.15rem;

    max-width:280px;

    margin-bottom:10px;
}

.footer-subtext{

    color:var(--hero-light-body);

    line-height:1.7;

    font-size:.92rem;

    max-width:280px;

    margin-bottom:26px;
}

.footer-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 24px;

    border-radius:var(--radius-pill);

    background:var(--hero-navy);

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    font-size:14px;

    transition:all .3s ease;
}

.footer-cta:hover{

    background:var(--hero-gold);

    color:var(--hero-navy);

    transform:translateY(-2px);
}

/*=====================================================
  COLUMNS
======================================================*/

.footer-column{

    display:flex;

    flex-direction:column;
}

.footer-column h4{

    color:var(--hero-gold);

    margin-bottom:18px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;
}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;
}

.footer-column li{

    margin-bottom:12px;
}

.footer-column li:last-child{

    margin-bottom:0;
}

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

.footer-column a{

    display:inline-flex;

    align-items:center;

    text-decoration:none;

    color:var(--hero-light-body);

    font-size:.92rem;

    line-height:1.5;

    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-column a:hover{

    color:var(--hero-navy);

    transform:translateX(6px);
}

/*=====================================================
  FOOTER BOTTOM
======================================================*/

.footer-bottom{

    padding-top:30px;
}

.footer-compliance{

    margin:0;

    color:#8A94A6;

    font-size:.85rem;

    line-height:1.7;

    max-width:760px;
}

.footer-location{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin:14px 0;

    color:#8A94A6;

    font-size:.85rem;
}

.footer-location .flag-icon{

    width:16px;

    height:auto;

    border-radius:2px;

    flex-shrink:0;
}

.footer-divider{

    height:1px;

    margin:26px 0;

    background:var(--hero-light-border);
}

.footer-legal-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;
}

.footer-legal-links{

    display:flex;

    align-items:center;

    gap:22px;

    flex-wrap:wrap;
}

.footer-legal-links a{

    text-decoration:none;

    color:var(--hero-light-body);

    font-size:.85rem;

    transition:color var(--transition);
}

.footer-legal-links a:hover{

    color:var(--hero-navy);
}

.footer-legal-meta{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}

.footer-legal-meta span{

    color:#8A94A6;

    font-size:.85rem;
}

.back-top{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:var(--hero-navy);

    padding:12px 22px;

    border-radius:var(--radius-pill);

    border:1px solid var(--hero-light-border);

    transition:var(--transition);
}

.back-top:hover{

    background:var(--hero-navy);

    color:#ffffff;

    border-color:var(--hero-navy);

    transform:translateY(-3px);
}

/*=====================================================
  ACCESSIBILITY
======================================================*/

.footer-column a:focus-visible,
.footer-legal-links a:focus-visible,
.footer-cta:focus-visible,
.back-top:focus-visible{

    outline:3px solid var(--hero-gold);

    outline-offset:4px;

    border-radius:var(--radius-sm);
}

@media (prefers-reduced-motion:reduce){

    .footer-column a,
    .footer-legal-links a,
    .footer-cta,
    .back-top{

        transition:none;

        transform:none;
    }

}

/*=====================================================
  RESPONSIVE
======================================================*/

@media (max-width:992px){

    .footer-top{

        grid-template-columns:1fr;

        gap:40px;
    }

    .footer-headline,
    .footer-subtext{

        max-width:520px;
    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:36px 28px;
    }

}

@media (max-width:576px){

    #footer{

        padding:60px 0 28px;
    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:32px;
    }

    .footer-legal-row{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;
    }

    .footer-legal-meta{

        width:100%;

        justify-content:space-between;
    }

    .back-top{

        justify-content:center;
    }

}

/*=====================================================
  POLISH
======================================================*/

.footer-column ul li{

    transition:transform .30s ease;
}

.footer-column ul li:hover{

    transform:translateX(4px);
}

/*=====================================================
  FOOTER UTILITY LAYER
  Platform metrics + Personal Intelligence + Global Utilities.
  Sits between the nav-column grid and the legal row.
======================================================*/

.footer-utility{

    padding-top:36px;

    margin-top:36px;

    border-top:1px solid var(--hero-light-border);
}

.footer-utility-divider{

    height:1px;

    margin:26px 0;

    background:var(--hero-light-border);
}

.footer-utility-label{

    display:block;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#8A94A6;

    margin-bottom:16px;
}

/* --- Row 1: Visitors | Identity | Followers --- */

.footer-metrics-row{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:24px;

    text-align:center;
}

.footer-metric{

    opacity:0;

    animation:footerMetricReveal .6s ease forwards;
}

.footer-metric:nth-child(3){
    animation-delay:.1s;
}

@keyframes footerMetricReveal{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
    .footer-metric{
        opacity:1;
        animation:none;
    }
}

.footer-metric-label{

    display:block;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#8A94A6;

    margin-bottom:6px;
}

.footer-metric-value{

    display:block;

    font-family:var(--font-editorial);

    font-size:24px;

    font-weight:700;

    color:var(--hero-navy);

    line-height:1.2;
}

.footer-metric-desc{

    display:block;

    font-size:12px;

    color:#8A94A6;

    margin-top:4px;
}

.footer-identity{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    padding:0 20px;

    border-left:1px solid var(--hero-light-border);

    border-right:1px solid var(--hero-light-border);
}

.footer-identity-name{

    font-size:13px;

    font-weight:800;

    letter-spacing:.06em;

    color:var(--hero-navy);

    text-transform:uppercase;
}

.footer-identity-desc{

    font-size:11.5px;

    color:#8A94A6;

    max-width:220px;
}

.footer-identity-flag{

    margin-top:4px;
}

.footer-identity-flag .flag-icon{

    width:18px;

    height:auto;

    border-radius:2px;

    display:block;
}

/* --- Row 2: Personal Intelligence --- */

.footer-personal-row{

    text-align:center;
}

.footer-personal-links{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;
}

.footer-personal-links a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:var(--hero-navy);

    font-size:13.5px;

    font-weight:600;

    transition:color var(--transition);
}

.footer-personal-links a svg{

    width:16px;

    height:16px;

    flex-shrink:0;

    color:#8A94A6;

    transition:color var(--transition);
}

.footer-personal-links a:hover{

    color:var(--hero-gold);
}

.footer-personal-links a:hover svg{

    color:var(--hero-gold);
}

/* --- Row 3: Global Utilities --- */

.footer-global-row{

    text-align:center;
}

.footer-utility-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;
}

.footer-select{

    display:inline-flex;

    align-items:center;

    gap:8px;
}

.footer-select-label{

    font-size:12px;

    font-weight:600;

    color:#8A94A6;
}

.footer-select-input{

    appearance:none;

    -webkit-appearance:none;

    background:#ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2312325B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;

    background-size:13px;

    border:1px solid var(--hero-light-border);

    border-radius:8px;

    padding:8px 30px 8px 12px;

    font-size:13px;

    font-weight:600;

    color:var(--hero-navy);

    cursor:pointer;

    transition:border-color var(--transition);
}

.footer-select-input:hover{

    border-color:var(--hero-gold);
}

.footer-select-input:focus-visible{

    outline:2px solid var(--hero-gold);

    outline-offset:2px;
}

.footer-language-notice{

    margin-top:14px;

    font-size:12px;

    color:#8A94A6;

    max-width:480px;

    margin-left:auto;

    margin-right:auto;
}

.footer-language-notice[hidden]{

    display:none;
}

@media (max-width:767px){

    .footer-metrics-row{

        grid-template-columns:1fr;

        gap:20px;
    }

    .footer-identity{

        border-left:none;

        border-right:none;

        border-top:1px solid var(--hero-light-border);

        border-bottom:1px solid var(--hero-light-border);

        padding:20px 0;
    }

    .footer-personal-links{

        flex-direction:column;

        gap:14px;
    }

    .footer-utility-controls{

        flex-direction:column;

        align-items:stretch;

        gap:12px;
    }

    .footer-select{

        justify-content:space-between;
    }

    .footer-select-input{

        flex:1;
    }
}

/* --- RTL layout (Arabic / Urdu) --- */

[dir="rtl"] .footer-select-input{

    background-position:left 10px center;

    padding:8px 12px 8px 30px;
}

/*=====================================================
  END OF FOOTER.CSS
======================================================*/