/* =============================================================
   Real Estate Footer Plugin – Frontend Styles
   ============================================================= */

/* ── CSS Custom Properties (overridden via inline <style>) ── */
:root {
    --ref-bg:       #1C3553;
    --ref-tools-bg: #16304a;
    --ref-copy-bg:  #122840;
    --ref-accent:   #00A7E1;
    --ref-text:     #FFFFFF;
}

/* =============================================================
   Reset scope
   ============================================================= */
.ref-footer,
.ref-footer * {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* =============================================================
   Footer base
   ============================================================= */
.ref-footer {
    background-color: var(--ref-bg);
    color:            var(--ref-text);
    font-family:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:        0.9rem;
    line-height:      1.65;
    width:            100%;
}

/* =============================================================
   Container
   ============================================================= */
.ref-container {
    max-width: 1490px;
    margin:    0 auto;
    padding:   0 2rem;
}

/* Main footer inner padding */
.ref-footer > .ref-container {
    padding-top:    3rem;
    padding-bottom: 2.75rem;
}

/* =============================================================
   5-Column Grid
   ============================================================= */
.ref-grid {
    display:               grid;
    grid-template-columns: 1.5fr 1.1fr 1fr 1fr 1.3fr;
    gap:                   2rem 3rem;
    align-items:           start;
}

/* =============================================================
   Column base
   ============================================================= */
.ref-col {
    display:        flex;
    flex-direction: column;
    gap:            1.1rem;
}

/* =============================================================
   Brand column
   ============================================================= */
.ref-logo-link {
    display:     inline-block;
    line-height: 0;
}

.ref-logo {
    max-width:  220px;
    height:     auto;
    display:    block;
}

.ref-site-name {
    color:           var(--ref-text);
    font-size:       1.4rem;
    font-weight:     700;
    text-decoration: none;
    line-height:     1.2;
}

.ref-desc {
    color:      rgba(255, 255, 255, 0.72);
    font-size:  0.845rem;
    font-weight: 300;
    max-width:  380px;
    line-height: 1.7;
}

/* =============================================================
   Social Icons
   ============================================================= */
.ref-social {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.65rem;
    margin-top:  0.5rem;
    align-items: center;
}

.ref-social-link {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    background:       none !important;
    background-color: transparent !important;
    border:           none !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    outline:          none !important;
    padding:          0 !important;
    width:            auto !important;
    height:           auto !important;
    color:            rgba(255, 255, 255, 0.78) !important;
    text-decoration:  none !important;
    line-height:      1 !important;
    transition:       color 0.2s ease, transform 0.15s ease;
}

.ref-social-link:hover,
.ref-social-link:focus {
    background:       none !important;
    background-color: transparent !important;
    color:            var(--ref-accent) !important;
    transform:        translateY(-2px);
    outline:          none !important;
    box-shadow:       none !important;
}

.ref-footer .ref-social .ref-social-link,
.ref-footer .ref-social .ref-social-link i,
.ref-footer .ref-social .ref-social-link .fa-brands,
.ref-footer .ref-social .ref-social-link .fas,
.ref-footer .ref-social .ref-social-link .far {
    font-size:   18px !important;
    line-height: 1 !important;
    display:     block !important;
    color:       #ffffff !important;
    visibility:  visible !important;
    opacity:     1 !important;
}

.ref-footer .ref-social .ref-social-link:hover,
.ref-footer .ref-social .ref-social-link:hover i,
.ref-footer .ref-social .ref-social-link:hover .fa-brands {
    color: var(--ref-accent) !important;
}

/* =============================================================
   Column titles (h3)
   ============================================================= */
.ref-col-title {
    font-size:      1rem;
    font-weight:    300;
    color:          rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
    margin-bottom:  0.1rem;
}

/* =============================================================
   Link lists
   ============================================================= */
.ref-links {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            0.8rem;
}

.ref-links li a,
.ref-links li span,
.ref-links li button {
    color:           rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size:       0.875rem;
    transition:      color 0.2s ease;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0;
    text-align:      left;
    font-family:     inherit;
    font-weight:     400;
    line-height:     1.5;
}

.ref-links li a:hover,
.ref-links li button:hover {
    color: var(--ref-accent);
}

/* =============================================================
   Contact – icon links
   ============================================================= */
.ref-icon-link {
    display:         flex;
    align-items:     center;
    gap:             0.55rem;
    color:           rgba(255, 255, 255, 0.72) !important;
    text-decoration: none;
    font-size:       0.875rem;
    transition:      color 0.2s ease;
    line-height:     1.4;
}

.ref-icon-link:hover,
.ref-icon-link:focus {
    color: var(--ref-accent) !important;
}

.ref-icon-link svg {
    flex-shrink: 0;
    opacity:     0.8;
    position:    relative;
    top:         1px;
}

/* =============================================================
   Certifications & logos
   ============================================================= */
.ref-logo-group {
    display:        flex;
    flex-direction: column;
    gap:            0.65rem;
}

.ref-logos-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.75rem;
}

.ref-logos-row img {
    object-fit: contain;
    opacity:    0.9;
    transition: opacity 0.2s;
}

.ref-logos-row a {
    display:     inline-block;
    line-height: 0;
}

.ref-logos-row a:hover img {
    opacity: 1;
}

/* =============================================================
   Tools Bar
   ============================================================= */
.ref-tools-bar {
    background-color: var(--ref-tools-bg);
    border-top:       1px solid rgba(255, 255, 255, 0.08);
    border-bottom:    1px solid rgba(255, 255, 255, 0.08);
    padding:          0.9rem 0;
}

.ref-tools-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             1rem;
}

.ref-tools-left {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         1.75rem;
}

.ref-tool-link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    color:           rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size:       0.845rem;
    font-weight:     400;
    transition:      color 0.2s ease;
    white-space:     nowrap;
}

.ref-tool-link:hover,
.ref-tool-link:focus {
    color: var(--ref-accent);
}

.ref-tool-link svg {
    opacity: 0.75;
}

/* =============================================================
   Copyright Bar
   ============================================================= */
.ref-copy-bar {
    background-color: var(--ref-copy-bg);
    padding:          0.85rem 0;
}

.ref-copy-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
}

.ref-copy-text {
    font-size:   0.8rem;
    color:       rgba(255, 255, 255, 0.5);
    font-weight: 300;
}

.ref-copy-link {
    font-size:       0.8rem;
    color:           rgba(255, 255, 255, 0.5) !important;
    font-weight:     300;
    text-decoration: none !important;
    white-space:     nowrap;
    transition:      color 0.2s ease;
}

.ref-copy-link:hover {
    color: var(--ref-accent) !important;
}

/* =============================================================
   Responsive – Tablet  (≤ 1199px)
   ============================================================= */
@media (max-width: 1199px) {
    .ref-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 2rem 2rem;
    }

    .ref-col--brand {
        grid-column: 1 / -1;
    }

    .ref-desc {
        max-width: 100%;
    }
}

/* =============================================================
   Responsive – Small Tablet  (≤ 899px)
   ============================================================= */
@media (max-width: 899px) {
    .ref-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 2rem;
    }

    .ref-col--brand {
        grid-column: 1 / -1;
    }
}

/* =============================================================
   Responsive – Mobile  (≤ 575px)
   ============================================================= */
@media (max-width: 575px) {
    .ref-container {
        padding: 0 1rem;
    }

    .ref-footer > .ref-container {
        padding-top:    2rem;
        padding-bottom: 2rem;
    }

    .ref-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ref-tools-inner {
        flex-direction: column;
        align-items:    flex-start;
    }

    .ref-tools-left {
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
}