/* ══════════════════════════════════════════════════════
   Sofia Loren Salon - Two-Row Footer Layout
   Converts 4-column footer from unbalanced layout
   (col1 very tall from newsletter form) to a clean
   two-row design: Row1=nav columns, Row2=newsletter

   NOTE: Theme sets html{font-size:10px} so ALL sizes
   must use px values, NOT rem.
   ══════════════════════════════════════════════════════ */

/* ── Row 1: Convert from float-based to CSS grid ── */
.footer-sidebars {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 0 30px !important;
}

/* Remove Bootstrap floats */
.footer-sidebar.col-sm-3 {
    float: none !important;
    width: 100% !important;
}

/* Column 1: display:contents so children become grid items */
.footer-sidebar.col-sm-3:first-child {
    display: contents !important;
}

/* Logo/address/phone/social stays in column 1, row 1 */
#text-4 {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* Newsletter widget spans full width as row 2 */
#text-16 {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    text-align: center !important;
    padding-top: 25px !important;
    margin-top: 15px !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}

/* Columns 2-4 in row 1 */
.footer-sidebar.col-sm-3:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
.footer-sidebar.col-sm-3:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
}
.footer-sidebar.col-sm-3:nth-child(4) {
    grid-column: 4 !important;
    grid-row: 1 !important;
}

/* Remove theme vertical divider pseudo-elements */
.footer-sidebar.col-sm-3::after {
    display: none !important;
}

/* ── Row 2: Newsletter Styling ── */

/* Widget title "STAY CONNECTED" centered */
#text-16 .widget-title {
    text-align: center !important;
    margin-bottom: 5px !important;
    font-size: 18px !important;
}

/* Widget description text centered */
#text-16 > .textwidget > p:first-of-type {
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Hide CF7 form's own header "Stay Beautiful!" - redundant with widget title */
#text-16 .wpcf7-form > p:nth-of-type(1) {
    display: none !important;
}

/* Hide CF7 form's own description "Get hair tips..." - redundant */
#text-16 .wpcf7-form > p:nth-of-type(2) {
    display: none !important;
}

/* Make form fields horizontal */
#text-16 .wpcf7-form {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* Each form <p> wrapper */
#text-16 .wpcf7-form > p {
    margin: 0 !important;
}

/* Hide labels - rely on placeholder text */
#text-16 .wpcf7-form label {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Input fields side by side */
#text-16 .wpcf7-form input[type="text"],
#text-16 .wpcf7-form input[type="email"] {
    font-size: 14px !important;
    width: 200px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Submit button inline */
#text-16 .wpcf7-form input[type="submit"] {
    margin: 0 !important;
    padding: 10px 25px !important;
    white-space: nowrap !important;
}

/* "No spam" disclaimer - full width centered below */
#text-16 .wpcf7-form > p:last-of-type {
    flex-basis: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* Hide <br> tags that mess up flex layout */
#text-16 .wpcf7-form br {
    display: none !important;
}

/* Response output full width */
#text-16 .wpcf7-response-output {
    flex-basis: 100% !important;
}

/* ── Responsive: Stack on mobile ── */
@media (max-width: 768px) {
    .footer-sidebars {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    #text-4 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .footer-sidebar.col-sm-3:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .footer-sidebar.col-sm-3:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    .footer-sidebar.col-sm-3:nth-child(4) {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    #text-16 {
        grid-row: 4 !important;
    }

    #text-16 .wpcf7-form input[type="text"],
    #text-16 .wpcf7-form input[type="email"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    #text-16 .wpcf7-form {
        flex-direction: column !important;
        align-items: center !important;
        max-width: 300px !important;
    }
}

@media (max-width: 480px) {
    .footer-sidebars {
        grid-template-columns: 1fr !important;
    }

    .footer-sidebar.col-sm-3:nth-child(2),
    .footer-sidebar.col-sm-3:nth-child(3),
    .footer-sidebar.col-sm-3:nth-child(4) {
        grid-column: 1 !important;
    }

    .footer-sidebar.col-sm-3:nth-child(3) {
        grid-row: 3 !important;
    }
    .footer-sidebar.col-sm-3:nth-child(4) {
        grid-row: 4 !important;
    }
    #text-16 {
        grid-row: 5 !important;
    }
}