/* ==========================================================================
   Munal UI polish: top bar, mobile menu, footer contact + social icons.
   Colours come from the Brand Settings variables, so it follows your theme.
   ========================================================================== */
:root {
    --munal-ui-primary: var(--munal-primary, #1a2d8a);
    --munal-ui-accent: var(--munal-secondary, #f73714);
    --munal-ui-text: var(--munal-text, #1a1a2e);
}

.munal-ui-icon { display: block; flex: none; }

/* ---------- Top bar ---------- */
.top-bar-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; }
.top-bar-contact .top-bar-item { margin: 0; display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.top-bar-ico {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14); color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.top-bar-item:hover .top-bar-ico { background: var(--munal-ui-accent); transform: translateY(-1px); }
.top-bar-social { display: flex; align-items: center; gap: 14px; }
.top-bar-socials { display: flex; align-items: center; gap: 6px; }
.top-bar-socials a {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255, 255, 255, .12); text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.top-bar-socials a:hover { background: var(--munal-ui-accent); transform: translateY(-2px); }

@media (max-width: 600px) {
    .top-bar-socials { display: none; }
    .top-bar-contact { gap: 6px; flex-direction: column; align-items: flex-start; }
    .top-bar-ico { width: 22px; height: 22px; }
    .top-bar-ico svg { width: 13px; height: 13px; }
}

/* ---------- Mobile menu ---------- */
.mobile-navigation {
    width: 340px; max-width: 88vw; padding: 0;
    display: flex; flex-direction: column;
    background: #fff;
    box-shadow: -14px 0 40px rgba(12, 20, 60, .28);
}
.mobile-nav-header {
    margin: 0; padding: 24px 22px 22px; border: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .14), transparent 55%),
        linear-gradient(145deg, var(--munal-ui-primary), color-mix(in srgb, var(--munal-ui-primary) 62%, #000));
    color: #fff; position: relative;
}
.mobile-nav-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--munal-ui-accent); }
.mobile-nav-brand { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mobile-nav-title { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.mobile-nav-site { font-size: 1.15rem; font-weight: 800; line-height: 1.25; color: #fff; }
.mobile-nav-header .mobile-menu-close {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 1.7rem; line-height: 1; padding: 0;
    transition: background .2s ease, transform .25s ease;
}
.mobile-nav-header .mobile-menu-close:hover { background: var(--munal-ui-accent); transform: rotate(90deg); }

.mobile-nav-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 0; }
.mobile-navigation .mobile-nav-body ul { list-style: none; margin: 0; padding: 0; }
.mobile-navigation .mobile-nav-body li { margin: 0; border-bottom: 1px solid #eef0f6; }
.mobile-navigation .mobile-nav-body li:last-child { border-bottom: 0; }
.mobile-navigation .mobile-nav-body a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 22px 15px 24px;
    font-size: 1.02rem; font-weight: 600; color: var(--munal-ui-text); text-decoration: none;
    box-shadow: inset 0 0 0 0 var(--munal-ui-accent);
    transition: background .2s ease, color .2s ease, padding .2s ease, box-shadow .2s ease;
}
.mobile-navigation .mobile-nav-body a::after {
    content: ""; width: 8px; height: 8px; flex: none; margin-left: 12px;
    border-right: 2px solid currentColor; border-top: 2px solid currentColor;
    transform: rotate(45deg); opacity: .35; transition: transform .2s ease, opacity .2s ease;
}
.mobile-navigation .mobile-nav-body a:hover,
.mobile-navigation .mobile-nav-body a:focus-visible,
.mobile-navigation .mobile-nav-body .current-menu-item > a,
.mobile-navigation .mobile-nav-body .current_page_item > a,
.mobile-navigation .mobile-nav-body a[aria-current="page"] {
    background: color-mix(in srgb, var(--munal-ui-primary) 7%, #fff);
    color: var(--munal-ui-primary);
    padding-left: 30px;
    box-shadow: inset 4px 0 0 0 var(--munal-ui-accent);
}
.mobile-navigation .mobile-nav-body a:hover::after,
.mobile-navigation .mobile-nav-body a:focus-visible::after { opacity: 1; transform: translateX(3px) rotate(45deg); }

/* items glide in when the menu opens */
.mobile-navigation .mobile-nav-body li { opacity: 0; transform: translateX(18px); }
.mobile-navigation.active .mobile-nav-body li { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease; }
.mobile-navigation.active .mobile-nav-body li:nth-child(1) { transition-delay: .06s; }
.mobile-navigation.active .mobile-nav-body li:nth-child(2) { transition-delay: .10s; }
.mobile-navigation.active .mobile-nav-body li:nth-child(3) { transition-delay: .14s; }
.mobile-navigation.active .mobile-nav-body li:nth-child(4) { transition-delay: .18s; }
.mobile-navigation.active .mobile-nav-body li:nth-child(5) { transition-delay: .22s; }
.mobile-navigation.active .mobile-nav-body li:nth-child(6) { transition-delay: .26s; }
.mobile-navigation.active .mobile-nav-body li:nth-child(n+7) { transition-delay: .30s; }

.mobile-nav-footer { flex: none; padding: 18px 22px 24px; background: #f5f7fc; border-top: 1px solid #e6eaf4; }
.mobile-nav-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 18px; border-radius: 10px;
    background: var(--munal-ui-accent); color: #fff !important;
    font-weight: 700; font-size: 1rem; text-decoration: none;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--munal-ui-accent) 32%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mobile-nav-cta:hover { transform: translateY(-2px); }
.mobile-navigation .mobile-nav-contact { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.mobile-navigation .mobile-nav-contact li { margin: 0; }
.mobile-navigation .mobile-nav-contact a { display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; color: var(--munal-ui-text); text-decoration: none; word-break: break-word; }
.mobile-nav-contact .mn-ico {
    width: 32px; height: 32px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--munal-ui-primary) 10%, #fff); color: var(--munal-ui-primary);
}
.mobile-nav-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mobile-nav-socials a {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--munal-ui-primary); border: 1px solid #dfe4f1; text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.mobile-nav-socials a:hover { background: var(--munal-ui-primary); color: #fff; border-color: var(--munal-ui-primary); transform: translateY(-2px); }

.mobile-menu-overlay { background: rgba(10, 16, 48, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.munal-menu-open { overflow: hidden; }

/* ---------- Footer: contact info ---------- */
.site-footer .footer-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.site-footer .footer-contact-list li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0; }
.site-footer .footer-contact-list .fc-icon {
    width: 40px; height: 40px; flex: none; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .07); color: var(--munal-ui-accent);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.site-footer .footer-contact-list li:hover .fc-icon { background: var(--munal-ui-accent); color: #fff; transform: translateY(-2px); }
.site-footer .footer-contact-list .fc-icon-whatsapp { background: rgba(37, 211, 102, .14); color: #25d366; border-color: rgba(37, 211, 102, .25); }
.site-footer .footer-contact-list li:hover .fc-icon-whatsapp { background: #25d366; color: #fff; }
.site-footer .footer-contact-list .fc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-footer .footer-contact-list .fc-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.site-footer .footer-contact-list .fc-value { font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .92); text-decoration: none; word-break: break-word; }
.site-footer .footer-contact-list a.fc-value:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer: social icons ---------- */
.site-footer .munal-social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.site-footer .munal-social-link {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.site-footer .munal-social-link:hover { background: var(--munal-ui-accent); border-color: var(--munal-ui-accent); transform: translateY(-3px); color: #fff; }
.site-footer .munal-social-link.munal-social-whatsapp:hover { background: #25d366; border-color: #25d366; }