/* =========================================================
   Site-wide overrides
   - Uses Roboto across the site
   - Makes the logo bigger / clearly visible
   - Adds working mobile menu + fixes mobile responsiveness
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

:root{
    --font-brand: 'Roboto', sans-serif;
    --font-sans: 'Roboto', sans-serif;
}

/* ---- Sitewide font (same as logo) ---- */
body,
h1, h2, h3, h4, h5, h6,
.logo-area h1,
nav ul li a,
.dropdown-content li a,
.btn-cta, .btn-primary, .btn-outline, button,
.footer-col h4,
.top-bar a,
.section-tag,
.faq-question,
.serif-font{
    font-family: var(--font-brand) !important;
}

/* Keep long body copy readable while still using the brand font */
p, li, span, td, th, input, textarea, select{
    font-family: var(--font-brand) !important;
}

/* ---- Clean sans-serif for buttons, phone numbers & email addresses ----
   (overrides the brand/serif font applied above for these elements) */
.btn-cta, .btn-primary, .btn-outline, .btn-pill, button,
.btn-cta *, .btn-primary *, .btn-outline *, .btn-pill *, button *,
.top-bar a, .top-bar,
a[href^="tel:"], a[href^="mailto:"],
a[href^="tel:"] *, a[href^="mailto:"] *{
    font-family: var(--font-sans) !important;
}

/* ---- Logo: bigger & clearly visible ---- */
.logo-area{
    display: flex !important;
    align-items: center;
}
.site-logo{
    height: 62px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}

/* ---- Top bar: slightly larger phone/email text ---- */
.top-bar{
    font-size: 15px !important;
}
.top-bar a{
    font-size: 15px !important;
}

/* ---- Buttons & call-to-action pills: bump text size up one step ---- */
.btn-pill{
    font-size: 16px !important;
}
.btn-cta, .btn-primary, .btn-outline{
    font-size: 16px !important;
}

/* ---- Phone icon: keep the receiver upright instead of tilted ---- */
.btn-icon i.fa-phone-alt,
a[href^="tel:"] i.fa-phone-alt,
.top-bar a i.fa-phone-alt{
    display: inline-block;
    transform: rotate(0deg);
    vertical-align: middle;
}

/* ---- Call button: clean straight rectangle instead of pill ---- */
a.btn-pill[href^="tel:"]{
    border-radius: 6px !important;
    padding: 8px 22px 8px 8px !important;
}
a.btn-pill[href^="tel:"] .btn-icon{
    border-radius: 6px !important;
}

/* ---- Practice-area cards that now link to their pages ---- */
a.practice-card{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* ---- Banner heading: tighter line spacing between heading lines ---- */
.hero h2{
    line-height: 1.0 !important;
}

/* ---- Team section: make photos fill their frames neatly ---- */
.team-photo{
    padding: 0 !important;
}
.team-photo img{
    object-fit: cover !important;
    object-position: center top !important;
}

/* ---- Header layout safety net ---- */
header{
    position: relative;
    flex-wrap: wrap;
}

/* =========================================================
   Buttons: make every button/pill/link-button behave on mobile
   ========================================================= */
.btn-cta, .btn-primary, .btn-outline, .btn-pill, .email-btn,
button, .form-submit-btn, a[href^="tel:"], a[href^="mailto:"],
.whatsapp-float{
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 768px){
    /* Hero call-to-action buttons stack and go full width */
    .hero-buttons{
        flex-direction: column;
        width: 100%;
    }
    .hero-buttons .btn-pill,
    .hero-buttons .btn-cta{
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Any generic CTA row (contact/quote forms, cta boxes) stacks too */
    .cta-box .btn-cta,
    .quick-form-btn-row .btn-cta,
    .quick-form-btn-row button{
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Forms: inputs & submit buttons take full width, no overflow */
    form input, form textarea, form select, form button{
        width: 100% !important;
        box-sizing: border-box;
    }
}

@media (max-width: 400px){
    /* Extra-small phones: keep pill buttons from clipping their text */
    .btn-pill{
        padding: 8px 16px 8px 8px !important;
        gap: 8px !important;
        font-size: 14px !important;
    }
    .btn-icon{
        width: 32px !important;
        height: 32px !important;
    }
    .whatsapp-float{
        width: 46px !important;
        height: 46px !important;
        font-size: 22px !important;
    }
}

/* =========================================================
   Mobile responsiveness — header, top bar, nav & menu
   ========================================================= */
@media (max-width: 768px){

    .site-logo{
        height: 40px !important;
    }

    /* About section — center content on mobile only */
    .about-content{
        text-align: center !important;
    }
    .about-content .about-designation,
    .about-content .section-tag{
        text-align: center !important;
    }
    .about-image{
        display: flex;
        justify-content: center;
    }

    /* Member / membership area inside About — center on mobile only */
    .about-membership{
        text-align: center !important;
    }
    .badges-row{
        justify-content: center !important;
    }

    header{
        padding: 12px 4% !important;
    }

    .top-bar{
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 4% !important;
        font-size: 12px !important;
    }
    .top-bar a{
        justify-content: center !important;
        padding: 4px 0 !important;
        font-size: 12px !important;
    }

    /* Hide the static nav, show the hamburger */
    header nav ul{ display: none !important; }
    .mobile-menu-btn{ display: block !important; }

    /* Slide-down mobile nav panel */
    header nav{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg-white, #fff);
        box-shadow: 0 12px 25px rgba(0,0,0,0.14);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        z-index: 999;
    }
    header nav.mobile-nav-open{
        max-height: 80vh;
        overflow-y: auto;
    }
    header nav.mobile-nav-open ul{
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 6% 16px;
    }
    header nav ul li{
        width: 100%;
    }
    header nav ul li a{
        padding: 13px 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-light, #ece7dd);
        font-size: 15px;
    }

    /* Dropdown (Legal Practice Area) becomes tap-to-expand */
    .dropdown-content{
        position: static !important;
        box-shadow: none !important;
        min-width: 0 !important;
        display: none !important;
        padding: 0 0 0 14px;
    }
    .dropdown.mobile-dropdown-open .dropdown-content{
        display: block !important;
    }
    .dropdown.mobile-dropdown-open > a{
        color: var(--primary-gold, #B89B6A);
    }

    /* Hamburger <-> close icon */
    .mobile-menu-btn{
        font-size: 24px;
        z-index: 1001;
    }
    .mobile-menu-btn.active i::before{
        content: "\f00d"; /* fa-times */
    }
}