/* =====================================================
   ADVOCATES RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .advocate-directory-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .advocate-filters {
        grid-template-columns:
            1fr 1fr;
    }

    .filter-reset {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 700px) {

    .advocate-directory-grid {
        grid-template-columns: 1fr;
    }

    .advocate-filters {
        grid-template-columns: 1fr;

        padding: 20px;
    }

    .filter-reset {
        grid-column: auto;

        width: 100%;
    }

    .directory-advocate-image {
        height: 300px;
    }

    .profile-modal {
        padding: 10px;
    }

    .profile-modal-header {
        flex-direction: column;

        align-items: flex-start;

        padding: 35px 25px;
    }

    .profile-modal-body {
        padding: 25px;
    }

    .profile-modal-header h2 {
        font-size: 29px;
    }

    .profile-detail {
        flex-direction: column;

        gap: 5px;
    }

    .profile-detail strong {
        text-align: left;
    }

}
/* =====================================================
   PRACTICE AREAS RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .practice-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .practice-search {
        flex-direction: column;
    }

    .practice-reset {
        width: 100%;
    }

    .practice-grid {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .practice-tabs {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;
    }

    .practice-tab {
        flex-shrink: 0;
    }

    .legal-notice-inner {
        flex-direction: column;

        padding: 25px;
    }

}

/* =====================================================
   APPOINTMENT RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .appointment-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .appointment-sidebar {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 25px;
    }

    .appointment-intro {
        grid-column: 1 / -1;
    }

    .appointment-contact-card,
    .appointment-process,
    .appointment-sidebar-notice {
        margin-top: 0;
    }

    .appointment-info-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .appointment-form-wrapper {
        padding: 25px 20px;
    }

    .appointment-sidebar {
        display: block;
    }

    .appointment-contact-card,
    .appointment-process,
    .appointment-sidebar-notice {
        margin-top: 30px;
    }

    .form-grid.two-columns {
        grid-template-columns: 1fr;
    }

    .consultation-options {
        grid-template-columns: 1fr;
    }

    .form-submit-area {
        flex-direction: column;

        align-items: stretch;
    }

    .appointment-submit {
        width: 100%;
    }

    .form-submit-area p {
        max-width: none;
    }

    .appointment-success {
        flex-direction: column;
    }

    .appointment-info-grid {
        grid-template-columns: 1fr;
    }

    .appointment-form-header h2 {
        font-size: 28px;
    }

    .appointment-intro h2 {
        font-size: 30px;
    }

}

/* =====================================================
   CONTACT PAGE RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .contact-intro-grid {
        grid-template-columns: 1fr 320px;

        gap: 45px;
    }

    .contact-main-grid {
        grid-template-columns: 300px 1fr;

        gap: 40px;
    }

    .office-hours-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

}


@media (max-width: 900px) {

    .contact-intro-grid {
        grid-template-columns: 1fr;
    }

    .contact-quick-card {
        max-width: 500px;
    }

    .contact-main-grid {
        grid-template-columns: 1fr;
    }

    .contact-information {
        max-width: 650px;
    }

    .office-hours-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .contact-intro-content h2 {
        font-size: 32px;
    }

    .contact-direct-actions {
        flex-direction: column;
    }

    .contact-direct-link {
        width: 100%;
    }

    .contact-quick-card {
        padding: 25px;
    }

    .contact-form-wrapper {
        padding: 25px 20px;
    }

    .contact-form-heading h2 {
        font-size: 28px;
    }

    .contact-form .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-submit {
        flex-direction: column;

        align-items: stretch;
    }

    .contact-submit button {
        width: 100%;
    }

    .contact-submit p {
        max-width: none;
    }

    .contact-success {
        flex-direction: column;
    }

    .contact-location-section {
        min-height: 650px;
    }

    .location-card {
        width: auto;

        margin-right: 20px;

        margin-left: 20px;

        margin-top: 330px;

        padding: 25px;
    }

    .office-hours-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .contact-final-cta .cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 450px) {

    .office-hours-grid {
        grid-template-columns: 1fr;
    }

    .office-hours-card {
        min-height: 90px;
    }

}
/* =====================================================
   FAQ RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .faq-intro-grid {
        grid-template-columns: 1fr 300px;

        gap: 40px;
    }

    .faq-layout {
        grid-template-columns: 200px 1fr;

        gap: 40px;
    }

}


@media (max-width: 800px) {

    .faq-intro-grid {
        grid-template-columns: 1fr;
    }

    .faq-intro-card {
        max-width: 450px;
    }

    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-sidebar {
        position: static;
    }

    .faq-category {
        display: inline-flex;

        width: auto;

        margin-right: 5px;

        padding:
            10px 15px;

        border:
            1px solid
            var(--border);
    }

    .faq-category.active {
        padding-left: 15px;

        border:
            1px solid
            var(--accent);
    }

    .faq-sidebar-cta {
        display: none;
    }

    .faq-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .faq-page-hero {
        min-height: 420px;
    }

    .faq-intro-content h2 {
        font-size: 32px;
    }

    .faq-search-box input {
        height: 52px;

        font-size: 12px;
    }

    .faq-search-status {
        text-align: left;
    }

    .faq-category {
        margin-bottom: 5px;

        font-size: 12px;
    }

    .faq-question {
        grid-template-columns:
            30px 1fr 30px;

        gap: 10px;

        padding: 20px 0;
    }

    .faq-question-text {
        font-size: 15px;
    }

    .faq-answer-inner {
        padding:
            0 20px
            20px 40px;
    }

    .faq-disclaimer-inner {
        flex-direction: column;
    }

    .faq-cta-actions {
        width: 100%;

        flex-direction: column;
    }

    .faq-cta-actions .btn {
        width: 100%;

        text-align: center;
    }

}


@media (max-width: 400px) {

    .faq-category {
        width: 100%;

        justify-content: space-between;

        margin-right: 0;
    }

    .faq-question {
        grid-template-columns:
            25px 1fr 28px;
    }

    .faq-number {
        font-size: 12px;
    }

    .faq-question-text {
        font-size: 14px;
    }

}

/* =====================================================
   LEGAL RESOURCES RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .resources-intro-grid {
        grid-template-columns: 1fr 300px;

        gap: 45px;
    }

    .resources-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .resource-newsletter-inner {
        gap: 40px;
    }

}


@media (max-width: 800px) {

    .resources-intro-grid {
        grid-template-columns: 1fr;
    }

    .resources-intro-note {
        max-width: 450px;
    }

    .featured-resource {
        grid-template-columns: 1fr;
    }

    .featured-resource-image {
        min-height: 300px;
    }

    .featured-resource-content {
        padding: 40px;
    }

    .resource-newsletter-inner {
        grid-template-columns: 1fr;
    }

    .resources-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .legal-resources-hero {
        min-height: 420px;
    }

    .resources-intro-grid h2 {
        font-size: 32px;
    }

    .resources-search input {
        height: 52px;
    }

    .resource-category {
        padding:
            14px 15px;

        font-size: 9px;
    }

    .resource-section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    .resource-section-heading h2 {
        font-size: 30px;
    }

    .featured-resource-image {
        min-height: 250px;
    }

    .featured-resource-content {
        padding: 30px 25px;
    }

    .featured-resource-content h3 {
        font-size: 27px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

    .resource-card-content h3 {
        min-height: auto;
    }

    .resource-card-content p {
        min-height: auto;
    }

    .newsletter-input-wrap {
        flex-direction: column;

        border: 0;

        gap: 10px;
    }

    .newsletter-input-wrap input {
        border:
            1px solid
            rgba(255,255,255,.2);

        background:
            rgba(255,255,255,.05);
    }

    .newsletter-input-wrap button {
        height: 50px;
    }

    .resources-disclaimer-inner {
        flex-direction: column;
    }

    .resources-cta-actions {
        width: 100%;

        flex-direction: column;
    }

    .resources-cta-actions .btn {
        width: 100%;

        text-align: center;
    }

}


@media (max-width: 400px) {

    .featured-resource-content h3 {
        font-size: 24px;
    }

    .resource-card-image {
        height: 170px;
    }

}

/* =====================================================
   PRIVACY RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .privacy-layout {
        grid-template-columns: 210px 1fr;

        gap: 35px;
    }

    .privacy-content {
        padding: 40px;
    }

}


@media (max-width: 800px) {

    .privacy-layout {
        display: block;
    }

    .privacy-sidebar {
        position: relative;

        top: auto;

        margin-bottom: 30px;
    }

    .privacy-sidebar-inner {
        overflow: hidden;
    }

    .privacy-nav {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);
    }

    .privacy-nav a {
        border-right:
            1px solid
            var(--border);
    }

    .privacy-content {
        padding: 35px;
    }

    .privacy-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .legal-page-hero {
        min-height: 390px;
    }

    .privacy-nav {
        grid-template-columns: 1fr;
    }

    .privacy-nav a {
        border-right: 0;
    }

    .privacy-content {
        padding: 25px 20px;
    }

    .privacy-block {
        padding-bottom: 40px;

        margin-bottom: 40px;
    }

    .privacy-block h2 {
        font-size: 26px;
    }

    .privacy-warning {
        flex-direction: column;
    }

    .privacy-contact-card {
        flex-direction: column;
    }

    .privacy-contact-details {
        text-align: left;
    }

    .privacy-cta-buttons {
        width: 100%;

        flex-direction: column;
    }

    .privacy-cta-buttons .btn {
        width: 100%;

        text-align: center;
    }

}

/* =====================================================
   LEGAL DESK BD - MOBILE NAVIGATION
   Clean replacement for WordPress mobile menu
===================================================== */

@media (max-width: 991px) {

    /*
     * Keep the document at the full viewport width.
     * Do NOT lock the body or add a full-page overlay.
     */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /*
     * Mobile header
     */
    .site-header {
        position: relative;
        width: 100%;
        min-width: 0;
        background: #071b2d !important;
        color: #ffffff;
        z-index: 1000;
    }

    .site-header .header-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    /*
     * Keep the logo from forcing the header wider than the screen.
     */
    .site-header .logo {
        flex: 0 1 auto;
        min-width: 0;
        color: #ffffff;
    }

    .site-header .logo-text {
        min-width: 0;
    }

    .site-header .logo-text strong {
        color: #ffffff;
    }

    .site-header .logo-text small {
        color: #c9a45c;
    }

    .site-header .logo-mark {
        color: #c9a45c;
        border-color: #c9a45c;
    }

    /*
     * Header actions
     */
    .site-header .header-actions {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-left: auto;
        flex: 0 0 auto;
    }

    /*
     * Language button
     */
    .site-header .language-switch {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 8px 0;

        border: 0;
        background: transparent;

        color: #ffffff;
        font-size: 15px;
        line-height: 1;

        cursor: pointer;
    }

    .site-header .language-switch:hover,
    .site-header .language-switch:focus {
        color: #c9a45c;
    }

    /*
     * Hamburger
     */
    .site-header .menu-toggle {
        display: flex;
        flex: 0 0 42px;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        margin: 0;
        padding: 0;

        border: 0;
        background: transparent;

        cursor: pointer;
    }

    .site-header .menu-toggle span {
        display: block;

        width: 24px;
        height: 2px;

        margin: 3px 0;

        background: #ffffff;
    }

    /*
     * Mobile drawer.
     *
     * transform is used instead of right:-100%.
     * This prevents the hidden menu from affecting
     * the document's layout width.
     */
    .site-header .main-navigation {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;

        width: 320px;
        max-width: 86vw;
        height: 100dvh;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        margin: 0;
        padding: 78px 28px 30px;

        background: #071b2d !important;
        color: #ffffff;

        transform: translateX(100%);
        visibility: hidden;

        overflow-x: hidden;
        overflow-y: auto;

        z-index: 9999;

        box-shadow: -12px 0 35px rgba(0, 0, 0, 0.28);

        transition:
            transform 0.3s ease,
            visibility 0s linear 0.3s;
    }

    /*
     * Open state used by main.js
     */
    .site-header .main-navigation.open {
        transform: translateX(0);
        visibility: visible;

        transition:
            transform 0.3s ease,
            visibility 0s linear 0s;
    }

    /*
     * WordPress primary menu
     */
    .site-header .main-navigation .primary-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        gap: 0;

        list-style: none;
    }

    .site-header .main-navigation .primary-menu > li {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .site-header .main-navigation .primary-menu > li > a {
        display: block;

        width: 100%;
        box-sizing: border-box;

        margin: 0;
        padding: 12px 0;

        color: #ffffff;
        font-size: 16px;
        line-height: 1.5;

        text-decoration: none;
        white-space: normal;
    }

    .site-header .main-navigation .primary-menu > li > a:hover,
    .site-header .main-navigation .primary-menu > li > a:focus {
        color: #c9a45c;
    }

    /*
     * Current WordPress page
     */
    .site-header .main-navigation
    .primary-menu > li.current-menu-item > a,
    .site-header .main-navigation
    .primary-menu > li.current_page_item > a {
        color: #c9a45c;
    }

    /*
     * Remove desktop underline from the mobile menu.
     */
    .site-header .main-navigation
    .primary-menu > li > a::after {
        display: none !important;
    }

    /*
     * Close button
     */
    .site-header .mobile-close {
        position: absolute;

        top: 18px;
        right: 18px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        margin: 0;
        padding: 0;

        border: 1px solid rgba(201, 164, 92, 0.65);
        border-radius: 0;

        background: transparent;
        color: #c9a45c;

        font-size: 24px;
        line-height: 1;

        cursor: pointer;
    }

    .site-header .mobile-close:hover,
    .site-header .mobile-close:focus {
        background: #c9a45c;
        color: #071b2d;
    }

    /*
     * Appointment button inside drawer
     */
    .site-header .main-navigation .btn-header {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        box-sizing: border-box;

        margin: 20px 0 0;
    }
}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 480px) {

    .site-header .header-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-header .header-actions {
        gap: 10px;
    }

    .site-header .language-switch {
        font-size: 14px;
    }

    .site-header .menu-toggle {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .site-header .menu-toggle span {
        width: 22px;
    }

    .site-header .main-navigation {
        width: 300px;
        max-width: 88vw;
        padding-left: 24px;
        padding-right: 24px;
    }
}
@media (max-width: 991px) {

    .advocate-cover-section {
        min-height: 380px;
    }

    .advocate-cover-content {
        padding: 80px 0 70px;
    }

    .advocate-profile-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .advocate-profile-photo {
        max-width: 380px;
        margin: 0 auto;
    }

    .advocate-profile-information {
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
    }

    .advocate-details-content {
        margin-top: 60px;
    }
}


@media (max-width: 575px) {

    .advocate-cover-section {
        min-height: 330px;
    }

    .advocate-cover-content {
        padding: 70px 0 60px;
    }

    .advocate-cover-content h1 {
        font-size: 40px;
    }

    .advocate-cover-designation {
        font-size: 17px;
    }

    .advocate-profile-photo {
        max-width: 100%;
        aspect-ratio: 4 / 5;
    }

    .advocate-profile-information h2 {
        font-size: 34px;
    }

    .advocate-info-row {
        padding: 13px 0;
    }

    .advocate-detail-section h2 {
        font-size: 30px;
    }

    .advocate-detail-section h3 {
        font-size: 23px;
    }

    .advocate-biography,
    .advocate-detail-text,
    .advocate-detail-section p {
        font-size: 16px;
    }
}
/* =====================================================
   FIXES - append to the END of responsive.css
   (responsive.css must be loaded AFTER style.css)
===================================================== */

/* -----------------------------------------------------
   1. Advocate card image / initials placeholder
   (.directory-advocate-image had no centering or
   background, so the "AH" circle sat at the top-left)
----------------------------------------------------- */
.directory-advocate-image {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #d7d3c9, #b8b2a6);
}

/* -----------------------------------------------------
   2. Homepage grids that had NO responsive rules
----------------------------------------------------- */
@media (max-width: 1000px) {
    .advocate-grid,
    .features-grid,
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .two-column {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* 4-column feature row: fix the borders for 2 columns */
    .feature:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 700px) {
    .advocate-grid,
    .features-grid,
    .article-grid,
    .footer-main {
        grid-template-columns: 1fr;
    }

    .advocate-grid {
        gap: 24px;
    }

    .feature {
        padding: 30px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .feature:last-child {
        border-bottom: 0;
    }

    .hero-meta {
        flex-wrap: wrap;
        gap: 25px 35px;
        margin-top: 45px;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;
    }
}

/* -----------------------------------------------------
   3. Header: the new header buttons were never handled
   on mobile (responsive.css still targets the old
   .header-actions / .btn-header markup)
----------------------------------------------------- */

/* Drawer copy of the buttons: hidden on desktop */
.mobile-header-buttons {
    display: none;
}

@media (max-width: 991px) {

    /* Hide the two gold buttons from the top bar */
    .site-header .header-buttons {
        display: none;
    }

    .site-header .header-logo {
        min-width: 0;
    }

    .site-header .header-language {
        margin-left: auto;
    }

    /* The two buttons inside the mobile drawer */
    .site-header .main-navigation .mobile-header-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-top: 24px;
    }

    .site-header .main-navigation .mobile-header-buttons .header-action-btn {
        width: 100%;
        height: 48px;
        margin: 0;
        font-size: 15px;
    }
}
/* -----------------------------------------------------
   4. Newsletter form on mobile
   (flex: 1 on the input collapses its height once the
   wrapper switches to flex-direction: column)
----------------------------------------------------- */
@media (max-width: 600px) {
    .newsletter-input-wrap input {
        flex: none;
        width: 100%;
        height: 52px;
        padding: 0 16px;
        box-sizing: border-box;
        font-size: 16px; /* also stops iOS zooming on focus */
    }
 
    .newsletter-input-wrap button {
        flex: none;
        width: 100%;
        height: 52px;
        font-size: 13px;
    }
 
    .newsletter-form small {
        font-size: 12px;
    }
 
    .newsletter-message {
        font-size: 13px;
    }
}
/* -----------------------------------------------------
   5. Footer: About on top, then Firm | Practice | Contact
   side by side
----------------------------------------------------- */
@media (max-width: 1000px) {
    .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 35px 20px;
    }
 
    /* brand / about block spans the full width */
    .footer-main > .footer-about {
        grid-column: 1 / -1;
    }
}
 
@media (max-width: 600px) {
    .footer-main {
        gap: 30px 14px;
    }
 
    .footer-column {
        gap: 8px;
        min-width: 0;
    }
 
    .footer-column h4 {
        font-size: 14px;
        letter-spacing: 1.5px;
    }
 
    .footer-column a,
    .footer-column p {
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere; /* long email / phone wrap instead of overflowing */
    }
}