/* ==========================================================================
   KS Footer Social v1.0.0 — Frontend CSS
   Static layout. Colors and sizes come from dynamic CSS in class-ksfs-frontend.php
   ========================================================================== */

/* ===== The full-width row that sits between widgets and copyright ===== */
.ksfs-row {
    width: 100%;
    box-sizing: border-box;
    /* background, padding, borders set by dynamic CSS */
}

/* ===== Inner container — centered, max-width controlled ===== */
.ksfs-row .ksfs-inner {
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Two-column layout: logo left, social right */
.ksfs-row.ksfs-two-col .ksfs-inner {
    justify-content: space-between;
}

/* Single-column (only logo OR only social) — centered */
.ksfs-row.ksfs-single .ksfs-inner {
    justify-content: center;
}

/* ===== Columns ===== */
.ksfs-row .ksfs-col {
    display: flex;
    align-items: center;
}
.ksfs-row .ksfs-col-left { flex: 0 0 auto; }
.ksfs-row .ksfs-col-right { flex: 0 1 auto; }

/* margin-left:auto only when both columns are present (two-col layout) */
.ksfs-row.ksfs-two-col .ksfs-col-right {
    margin-left: auto;
}

/* Single-column (only logo OR only social) — center the column itself */
.ksfs-row.ksfs-single .ksfs-col {
    margin: 0 auto;
    justify-content: center;
}

/* ===== Logo ===== */
.ksfs-row .ksfs-logo a {
    display: inline-block;
    line-height: 0;
}
.ksfs-row .ksfs-logo img {
    display: block;
    /* height set by dynamic CSS */
}

/* ===== Social wrap (label + icons) ===== */
.ksfs-row .ksfs-social-wrap {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ksfs-row .ksfs-label {
    font-size: 14px;
    font-weight: 500;
    /* color set by dynamic CSS */
}

/* ===== Icons list ===== */
.ksfs-row ul.ksfs-icons {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ksfs-row ul.ksfs-icons li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ksfs-row ul.ksfs-icons li::before,
.ksfs-row ul.ksfs-icons li::marker {
    content: none !important;
    display: none !important;
}

/* ===== Icon links ===== */
.ksfs-row ul.ksfs-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
    /* width and height set by dynamic CSS */
    line-height: 0;
}
.ksfs-row ul.ksfs-icons a:hover {
    transform: translateY(-2px);
}
.ksfs-row ul.ksfs-icons a svg {
    display: block;
    border-radius: 50%;
    /* size set by dynamic CSS */
}
.ksfs-row ul.ksfs-icons a img.ksfs-custom-img {
    display: block;
    object-fit: contain;
    border-radius: 50%;
    /* size set by dynamic CSS */
}

/* Square style: rounded corners instead of circle */
.ksfs-row .ksfs-icons a svg[viewBox="0 0 48 48"]:has(rect) {
    border-radius: 10px;
}

/* Outline style: circular border around the flat logo */
.ksfs-row .ksfs-icons a:has(svg[viewBox="0 0 24 24"]) {
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

/* ===== Mobile: stack columns vertically ===== */
@media (max-width: 768px) {
    .ksfs-row .ksfs-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    .ksfs-row .ksfs-col-right {
        margin-left: 0;
    }
    .ksfs-row .ksfs-social-wrap {
        justify-content: center;
    }
}