/**
 * Custom Footer Styles for SciuuuS Kids
 * 
 * @package Blocksy_Child_SciuuusKids
 * @version 1.1.0
 */

/* ==========================================================================
   Hide Default Blocksy Footer
   ========================================================================== */

#footer.ct-footer,
footer#footer.ct-footer,
.ct-footer[data-id="type-1"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: var(--opacity-transparent) !important;
}

/* ==========================================================================
   Footer Main Container
   ========================================================================== */

footer.sciuuuskids-custom-footer {
    background: var(--brand-orange) !important;
    background-color: var(--brand-orange) !important;
    color: var(--brand-black) !important;
    padding: var(--padding-xl) var(--spacing-base) !important;
    display: block !important;
    visibility: visible !important;
}

.footer-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* ==========================================================================
   Row 1: Quote
   ========================================================================== */

.footer-quote {
    text-align: center;
    padding-bottom: var(--padding-xl);
}

.footer-quote p {
    font-family: var(--font-display) !important;
    font-size: var(--font-size-xxlarge) !important;
    font-style: italic !important;
    color: var(--brand-darker) !important;
    margin: 0 auto !important;
    line-height: var(--line-height-snug) !important;
    max-width: 100%;
}

/* ==========================================================================
   Row 2: Menu
   ========================================================================== */

.footer-menu-row {
    text-align: center;
    padding-bottom: var(--padding-xl);
    margin-bottom: var(--padding-xl);
    border-bottom: 1px solid rgba(0, 0, 0, var(--opacity-dark));
}

.footer-menu,
ul.footer-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--spacing-small) var(--gap-medium) !important;
}

.footer-menu li {
    margin: 0 !important;
}

.footer-menu li a {
    color: var(--brand-white) !important;
    text-decoration: none !important;
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: color var(--transition-fast) !important;
    padding: var(--padding-xs) var(--padding-medium) !important;
    display: block !important;
    white-space: nowrap !important;
}

.footer-menu li a:hover {
    color: var(--brand-dark) !important;
}

/* ==========================================================================
   Row 3: Company Info and Social
   ========================================================================== */

.footer-bottom-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--spacing-base) !important;
    padding-top: var(--padding-small) !important;
}

.footer-company-info p {
    margin: 0 0 var(--padding-xs) 0 !important;
    color: var(--brand-black) !important;
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-light) !important;
    line-height: var(--line-height-relaxed) !important;
}

.footer-company-info .footer-copyright {
    margin-top: var(--padding-small) !important;
}

/* Social Icons */
.footer-social {
    display: flex !important;
    gap: var(--gap-large) !important;
    align-items: center !important;
}

.social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(0, 0, 0, var(--opacity-darker)) !important;
    transition: color var(--transition-base) !important;
}

.social-link:hover {
    color: var(--brand-white) !important;
}

.social-link svg {
    width: var(--icon-size-base) !important;
    height: var(--icon-size-base) !important;
    fill: currentColor !important;
}

/* ==========================================================================
   Tablet Styles (768px - 991px)
   ========================================================================== */

@media (max-width: 991px) {
    .footer-quote p {
        font-size: var(--font-size-xlarge) !important;
    }
    
    .footer-menu {
        gap: var(--padding-medium) var(--gap-large) !important;
    }
    
    .footer-menu li a {
        font-size: var(--font-size-base) !important;
    }
}

/* ==========================================================================
   Mobile Styles (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
    footer.sciuuuskids-custom-footer {
        padding: var(--padding-large) var(--spacing-base) !important;
    }
    
    /* Quote */
    .footer-quote {
        padding-bottom: var(--padding-large);
    }
    
    .footer-quote p {
        font-size: var(--font-size-large) !important;
    }
    
    /* Menu - Stack vertically on mobile */
    .footer-menu-row {
        padding-bottom: var(--padding-large);
    }
    
    .footer-menu {
        flex-direction: column !important;
        gap: var(--font-size-small) !important;
    }
    
    .footer-menu li a {
        font-size: var(--font-size-base) !important;
        padding: 3px var(--spacing-base) !important;
    }
    
    /* Bottom Row - Stack vertically */
    .footer-bottom-row {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--spacing-base) !important;
    }
    
    .footer-company-info {
        text-align: center !important;
    }
    
    .footer-company-info p {
        font-size: var(--font-size-smaller) !important;
        line-height: var(--line-height-normal) !important;
    }
    
    .footer-social {
        justify-content: center !important;
        gap: var(--gap-large) !important;
    }
    
    .social-link svg {
        width: var(--icon-size-small) !important;
        height: var(--icon-size-small) !important;
    }
}

/* ==========================================================================
   Small Mobile Styles (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .footer-quote p {
        font-size: var(--spacing-base) !important;
    }
    
    .footer-company-info p {
        font-size: var(--font-size-smallest) !important;
    }
    
    .footer-menu li a {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.footer-menu a:focus,
.social-link:focus {
    outline: 2px solid var(--brand-accent-green) !important;
    outline-offset: 2px !important;
}