/*
 * Craftlo Legal Footer v1.0.0
 * Default palette mengikuti identitas earth-tone/terracotta Craftlo.
 */

:root{
    --clf-accent: var(--craftlo-accent, var(--cl-accent, #c95833));
    --clf-accent-deep: #a84327;
    --clf-cream: #fff8f3;
    --clf-cream-soft: #f6dfd3;
    --clf-ink: #261713;
    --clf-line: rgba(255,255,255,.18);
    --clf-muted: rgba(255,255,255,.78);
}

/* Footer lama theme disembunyikan hanya ketika footer legal aktif. */
body.craftlo-has-legal-footer .cl-footer{
    display:none!important;
}

.craftlo-legal-footer{
    position:relative;
    z-index:5;
    width:100%;
    margin-top:56px;
    background:
        radial-gradient(circle at 82% 14%, rgba(255,255,255,.10), transparent 27%),
        linear-gradient(135deg, var(--clf-accent) 0%, #b74e30 52%, var(--clf-accent-deep) 100%);
    color:#fff;
    border-top:1px solid rgba(255,255,255,.14);
}

.clf-shell{
    width:min(1440px, calc(100% - 48px));
    margin:0 auto;
    padding:52px 0 24px;
}

.clf-top{
    display:grid;
    grid-template-columns:minmax(260px,1.25fr) repeat(3,minmax(170px,.82fr));
    gap:38px;
    align-items:start;
}

.clf-brand{
    max-width:360px;
}

.clf-brand-link{
    display:inline-flex;
    align-items:center;
    min-height:46px;
    text-decoration:none;
}

.clf-logo{
    display:block;
    width:auto;
    max-width:156px;
    max-height:54px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.clf-brand p{
    margin:18px 0 16px;
    max-width:330px;
    color:var(--clf-muted);
    font-size:14px;
    line-height:1.75;
}

.clf-email{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:.2s ease;
}

.clf-email:hover{
    background:#fff;
    color:var(--clf-accent-deep);
    transform:translateY(-1px);
}

.clf-col{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.clf-col h3{
    margin:0 0 7px;
    color:#fff;
    font-size:13px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.clf-col a{
    width:fit-content;
    max-width:100%;
    color:var(--clf-muted);
    font-size:13px;
    line-height:1.5;
    font-weight:550;
    text-decoration:none;
    transition:color .18s ease, transform .18s ease;
}

.clf-col a:hover{
    color:#fff;
    transform:translateX(2px);
}

.clf-divider{
    height:1px;
    margin:38px 0 20px;
    background:var(--clf-line);
}

.clf-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    color:rgba(255,255,255,.72);
}

.clf-bottom p{
    margin:0;
    font-size:12px;
}

.clf-bottom-links{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.clf-bottom-links a{
    color:rgba(255,255,255,.78);
    font-size:12px;
    text-decoration:none;
}

.clf-bottom-links a:hover{
    color:#fff;
}

/* Light/dark theme tetap konsisten karena footer memakai brand color sendiri. */
body[data-theme="dark"] .craftlo-legal-footer,
body.dark .craftlo-legal-footer,
body.is-dark .craftlo-legal-footer{
    box-shadow:0 -18px 45px rgba(0,0,0,.12);
}

@media (max-width:1050px){
    .clf-top{
        grid-template-columns:1.15fr 1fr 1fr;
    }
    .clf-brand{
        grid-column:1/-1;
        max-width:620px;
    }
}

@media (max-width:760px){
    .craftlo-legal-footer{
        margin-top:40px;
    }
    .clf-shell{
        width:min(100% - 30px, 680px);
        padding:38px 0 22px;
    }
    .clf-top{
        grid-template-columns:1fr 1fr;
        gap:30px 24px;
    }
    .clf-brand{
        grid-column:1/-1;
    }
    .clf-brand p{
        font-size:13.5px;
    }
}

@media (max-width:520px){
    .clf-shell{
        width:calc(100% - 28px);
    }
    .clf-top{
        grid-template-columns:1fr;
        gap:27px;
    }
    .clf-brand{
        grid-column:auto;
    }
    .clf-col h3{
        font-size:12px;
    }
    .clf-col a{
        font-size:13px;
    }
    .clf-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }
}