/*
Custom theme overrides for CFITEL
Purpose: focus only on footer styles (navbar overrides removed as requested).
Primary color: #205697
Place this file after the main CSS so it overrides defaults.
*/

:root {
    --cfitel-primary: #205697;
    --cfitel-primary-strong: #174a74; /* darker variant for accents */
    --cfitel-primary-light: #3b6fb1; /* lighter/tint for hover/focus */
    --cfitel-footer-gradient-start: #205697;
    --cfitel-footer-gradient-end: #2a6fb5;
    --cfitel-footer-text: rgba(255, 255, 255, 0.9);
    --cfitel-footer-muted: rgba(255, 255, 255, 0.72);
}

/* FOOTER overrides --------------------------------------------------------- */
/* Replace existing footer background with a primary-based gradient */
.ftco-footer {
    background: linear-gradient(
        135deg,
        var(--cfitel-footer-gradient-start) 0%,
        var(--cfitel-footer-gradient-end) 100%
    ) !important;
    color: var(--cfitel-footer-text) !important;
    padding: 7em 0;
    z-index: 0;
}

/* Footer headings and logo */
.ftco-footer .ftco-heading-2,
.ftco-footer .ftco-footer-logo {
    color: #ffffff !important;
    font-weight: 500;
}

/* Footer paragraph and general text */
.ftco-footer p {
    color: var(--cfitel-footer-muted) !important;
}

/* Footer links: default -> slightly muted white; hover -> full white and underline for contrast */
.ftco-footer a,
.ftco-footer .ftco-footer-widget ul li a {
    color: var(--cfitel-footer-muted) !important;
    text-decoration: none;
    transition:
        color 180ms ease,
        transform 120ms ease;
}

/* On hover/focus we MUST NOT use a color equal to the background.
   Use pure white (high contrast) and underline for clarity. */
.ftco-footer a:hover,
.ftco-footer a:focus,
.ftco-footer .ftco-footer-widget ul li a:hover,
.ftco-footer .ftco-footer-widget ul li a:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
    transform: translateY(-1px);
}

/* Links that are already muted / small (e.g., contact right column) */
.ftco-footer .block-23 .text,
.ftco-footer .ftco-footer-widget ul li a span {
    color: var(--cfitel-footer-muted) !important;
}

/* Footer buttons (if any) - keep readable: white background, primary text */
.ftco-footer .ftco-footer-widget .btn-primary {
    background: #fff !important;
    color: var(--cfitel-primary) !important;
    border: 2px solid #fff !important;
    padding: 10px 18px;
    transition:
        background 180ms ease,
        color 180ms ease;
}
.ftco-footer .ftco-footer-widget .btn-primary:hover,
.ftco-footer .ftco-footer-widget .btn-primary:focus {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--cfitel-primary-strong) !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
}

/* SOCIAL ICONS - ensure icons render visibly and keep good contrast ------- */
/* The template places an <a> with a <span> inside; keep the icon centered and visible */
.ftco-footer-social {
    padding: 0;
    margin: 1em 0 0 0;
}
.ftco-footer-social li {
    list-style: none;
    margin: 0 10px 0 0;
    display: inline-block;
}

/* Anchor is the circular background; span holds the icon (font-awesome) centered */
.ftco-footer-social li a {
    height: 40px;
    width: 40px;
    display: block;
    float: left;
    color: #fff !important; /* ensures screen readers / fallbacks show white */
    border-radius: 50%;
    position: relative;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    background: var(
        --cfitel-primary-light
    ) !important; /* friendly primary tint */
    -webkit-transition:
        background 180ms ease,
        transform 120ms ease;
    transition:
        background 180ms ease,
        transform 120ms ease;
    box-shadow: 0 2px 8px rgba(16, 40, 70, 0.12);
}

/* The template often uses an inner span positioned absolutely - ensure it is visible */
.ftco-footer-social li a span {
    position: absolute;
    font-size: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff !important;
    display: inline-block;
}

/* Hover/focus on social icons: increase contrast and slightly lift */
.ftco-footer-social li a:hover,
.ftco-footer-social li a:focus {
    background: var(--cfitel-primary-strong) !important;
    transform: translateY(-4px);
    color: #fff !important;
}

/* If any social icons were hidden by a translucent overlay in custom styles,
   ensure the icon element is on top */
.ftco-footer-social li a span,
.ftco-footer-social li a i {
    z-index: 2;
}

/* Small contrast helpers & separators ------------------------------------- */
/* Ensure small separators remain visible but subtle */
.ftco-footer .ftco-footer-widget ul li a span,
.ftco-footer .ftco-footer-widget .btn-primary span {
    color: rgba(255, 255, 255, 0.16) !important;
}

/* Accessibility: focus outlines for keyboard navigation */
.ftco-footer a:focus,
.ftco-footer .ftco-footer-widget .btn-primary:focus,
.ftco-footer-social li a:focus {
    outline: 3px solid rgba(32, 86, 151, 0.18);
    outline-offset: 3px;
}

/* Optional: ensure footer copyright center text is visible on very small screens */
@media (max-width: 576px) {
    .ftco-footer .ftco-footer-widget {
        text-align: center;
    }
    .ftco-footer-social {
        margin-top: 1.25rem;
    }
}

/* End of custom footer-only overrides */

/* Fix: ensure block-23 icons inside footer inherit footer text color (prevent template's cyan color) */
.ftco-footer .block-23 ul li .icon,
.ftco-footer .block-23 ul li .icon i,
.ftco-footer .block-23 ul li .icon span {
    color: inherit !important;
}

/* Also ensure icon containers in footer don't get an unintended background */
.ftco-footer .block-23 ul li .icon {
    background: transparent !important;
}

.ftco-animate.heading-section,
.heading-section.ftco-animate {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.hero-wrap .heading-section h2,
.hero-wrap .heading-section .subheading,
.hero-wrap .heading-section p {
    color: #ffffff !important;
}