/* footer-layout.css - layout + HUDCO color palette applied */

/* ---------------------------
   Palette (feel free to tweak)
   ---------------------------
   Primary / Brand Blue:  #005bab
   Brand hover:           #2378c0
   Neutral light:         #f8f9fb
   Neutral panel:         #eef2f6
   Neutral subtle:        #dcd7d7
   Deep footer (navy):    #0e1a2b
   Text primary:          #111111
   Text secondary:        #444444
   Muted-on-dark:         #dcd7d7
   Updates gradient:      linear-gradient(to right,#800000,#a21d1d)
*/

:root {
    --container-max: 1300px;
    /* brand */
    --hudco-blue: #ffffff; /*  #005bab*/
    --hudco-blue-hover: #2378c0;
    /* neutrals */
    --neutral-100: #0e1a2b; /* page / footer top bg #0a1832*/
    /*--neutral-200: #eef2f6;*/ /* gov-links ticker bg */
    --neutral-200: #fff;
    --neutral-300: #dcd7d7; /* subtle panel / muted */
    --text-primary: #ffffff; /*#111111*/
    --text-secondary: #d7d7d7; /*#444444*/
    /* footer bottom (deep) */
    --footer-deep: #373e4c; /*#6e7789*/
    --muted-on-dark: #dcd7d7;
    /* rails / separators */
    --rail: rgba(14,26,43,0.08);
    /* updates gradient - keep for update strip if used */
    --updates-grad: linear-gradient(to right,#800000,#a21d1d);
    --scroll-btn-size: 65px;
    --scroll-btn-bg: #ffffff;
    --scroll-btn-border: #800000; /* your maroon maybe */
    --scroll-btn-progress: #800000; /* progress ring color */
    --scroll-btn-shadow: rgba(0, 0, 0, 0.18);
}

/* simple container consistent with your project */
.container-footer {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* overall wrapper background for top area */
.site-footer {
    background: var(--neutral-100);
    color: var(--text-primary);
    /*font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
}

/* GOV ticker top — subtle cool panel */
.gov-links {
    padding: 18px 0;
    background: var(--neutral-200);
    border-bottom: 1px solid rgba(14,26,43,0.03);
}

.logo-ticker {
    overflow: hidden;
}

.logo-list {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}


/* Ticker logo box style */
.logo-item {
    background-color: #fff;
    border-radius: 10px;
}

.logo-box {
    width: var(--logo-box-w, 144px);
    height: var(--logo-box-h, 90px);
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(0,91,171,0.03); /* faint tint of brand */
    transition: background .18s ease, transform .18s ease;
}

    .logo-box img {
        max-width: 70%;
        max-height: 75%;
        display: block;
        object-fit: contain;
    }

/* TOP area: left contact and right columns */
.footer-top {
    display: grid;
    grid-template-columns: 1fr 3fr; /* left (contact) vs right (link columns) */
    gap: 28px;
    padding: 30px 0 5px;
    align-items: start;
   /* background: transparent;*/ /* inherits .site-footer bg */
}

/* LEFT column */
.footer-left-col {
    border-right: 1px solid var(--rail);
    padding-right: 20px;
    color: var(--text-secondary);
    border-right: 1px solid #3e3e3e;
}

.left-inner {
    max-width: 360px;
}

/* headings and address */
.contact-heading {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 8px;
    font-weight: 600;
}

.org-name {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
    margin: 6px 0;
}

.org-sub {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
}

.org-addr {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 6px 0 12px;
}

.org-cin {
    font-size:12px;
}

/* contact list (phones/emails) */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

    .contact-list li {
        margin-bottom: 8px;
        display: flex;
        gap: 8px;
        align-items: center;
    }

/* left logos (ISO, IPv6, certs) */
.left-logos {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}

.cert-img {
    height: 26px;
    display: inline-block;
}

/* RIGHT: columns block */
.footer-right-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns like your screenshot */
    gap: 0;
}

/* each column padding and vertical rail on right (except last) */
.footer-col {
    padding: 0 22px;
    position: relative;
    border-right: 1px solid #3e3e3e;
}

    .footer-col:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 4px;
        bottom: 4px;
        width: 1px;
        background: var(--rail);
    }

/* links list style inside each column */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-list li {
        display: flex;
        align-items: center;
        margin: 8px 0;
    }

        /* the chevron is an inline-block background image so it's crisp on all devices */
        .footer-list li::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 10px;
            flex: 0 0 14px;
            background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23ff654b' d='M9.29 6.71a1 1 0 011.41 0L15 11l-4.29 4.29a1 1 0 01-1.41-1.41L12.17 11 9.29 8.12a1 1 0 010-1.41z'/>\
</svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            color: var(--hudco-blue); /* initial color */
        }

/* top-area links use brand blue */
.footer-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    transition: color .12s ease, transform .08s ease;
    vertical-align: middle;
}

    .footer-link:hover {
        color: #ef0404;
        transform: translateX(3px);
        text-decoration: none;
    }

/* hover: brighten chevron and move slightly */
/* hover changes color + small motion */
.footer-list li:hover::before,
.footer-list li:focus-within::before {
    transform: translateX(3px);
    color: var(--hudco-blue-hover); /* this will recolor the SVG now */
}

/* small muted subtitle (if needed) */
.footer-list--empty {
    height: 20px;
}

/* optional: small chevron / bullet before links using pseudo (uncomment if preferred) */
/* .footer-list li::before { content: '›'; color: var(--hudco-blue); display:inline-block; width:18px; } */

/* bottom dark band with legal links + last-updated/visitors on right */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 15px 0;
    /*background: var(--footer-deep);*/
    color: var(--muted-on-dark);
    border-top: 1px solid rgba(14,26,43,0.06);
}

/* left column inside bottom band (legal links + copyright) */
.footer-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal-links {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.legal-link {
    color: var(--muted-on-dark);
    text-decoration: none;
    font-size: 13px;
}

    .legal-link:hover,
    .legal-link:focus {
        color: #ffffff;
        text-decoration: underline;
    }

.gov-links-wrap {
    width: 100%;
    background: var(--neutral-200);
    border-bottom: 1px solid rgba(14,26,43,0.03);
    display:none;
}

.footer-bottom-left .copyright {
    color: var(--muted-on-dark);
    font-size: 13px;
}

.footer-bottom-right {
    text-align: right;
    color: var(--muted-on-dark);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

    .footer-bottom-right .label {
        color: var(--muted-on-dark);
        font-size: 13px;
    }

#visitor-count,
#last-updated-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}

/* update strip utility (if you want an updates bar) */
.updates-strip {
    background: var(--updates-grad);
    color: #fff;
    padding: 8px 0;
    text-align: center;
    font-weight: 700;
}

/* accessibility focus outlines for keyboard users */
a:focus {
    outline: 3px solid rgba(35,120,192,0.12);
    outline-offset: 2px;
}

.footer-top-wrap {
    width: 100%;
    background: var(--neutral-100);
}

.footer-bottom-wrap {
    width: 100%;
   /* background: var(--footer-deep);*/
}

/* Social buttons (larger and modern) */
.hudco-social {
    display: flex;
    gap: 10px;
    align-items: center;
}

.social-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px; /* softer rounded square for modern look */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #222;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(2,6,23,0.06);
    transition: transform 180ms ease, background 180ms ease, color 180ms ease;
    font-size: 18px;
    border: 1px solid rgba(0,0,0,0.04);
}

    .social-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(2,6,23,0.09);
    }

    /* Brand hover colors */
    .social-btn.facebook:hover {
        background: #1877F2;
        color: #fff;
        border-color: rgba(0,0,0,0.04);
    }

    .social-btn.twitter:hover {
        background: #0a0a0a;
        color: #fff;
    }
    /* black / X brand */
    .social-btn.youtube:hover {
        background: #FF0000;
        color: #fff;
    }

    .social-btn.linkedin:hover {
        background: #0A66C2;
        color: #fff;
    }

.footer-address-link:hover{
    text-decoration: underline;
}

/* Base button styling */
#scrollTopBtn {
    position: fixed;
    right: 1%;
    bottom: 1vw;
    width: var(--scroll-btn-size);
    height: var(--scroll-btn-size);
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 9999;
    /* Progress ring using conic-gradient, value from JS via --scroll */
    background: conic-gradient( var(--scroll-btn-progress) calc(var(--scroll) * 1%), #e4e4e4 0 );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--scroll-btn-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

    /* Inner circle (to create a ring effect) */
    #scrollTopBtn::before {
        content: "";
        position: absolute;
        width: calc(var(--scroll-btn-size) - 10px);
        height: calc(var(--scroll-btn-size) - 10px);
        border-radius: 50%;
        background: var(--scroll-btn-bg);
    }

    /* Arrow icon */
    #scrollTopBtn .scroll-top-arrow {
        position: relative; /* above the inner circle */
        font-size: 20px;
        color: var(--scroll-btn-border);
        line-height: 1;
    }

    /* Show button after scrolling a bit */
    #scrollTopBtn.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Hover effect */
    #scrollTopBtn:hover .scroll-top-arrow {
        transform: translateY(-2px);
    }

    #scrollTopBtn i {
        transition: transform .35s ease;
    }

@media (max-width: 420px) {
    .footer-right-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-left-col {
        border-right: none;
        padding-right: 0;
        margin-bottom: 18px;
        text-align: center;
        margin-left: 22%;
    }

    .footer-right-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .footer-col:not(:last-child)::after {
        display: none;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-bottom-right {
        align-items: center;
    }
}

@media (max-width: 992px) {
    .footer-bottom-wrap, .footer-top-wrap {
        padding: 1%;
    }
}

    /* responsive adjustments */
    @media (max-width: 1100px) {
        .footer-top {
            grid-template-columns: 1fr 2fr;
            gap: 18px;
        }

        .footer-right-cols {
            grid-template-columns: repeat(2, 1fr);
        }

        .footer-col:not(:last-child)::after {
            display: block;
        }
    }