/* X-Law — visual overrides on top of the bundled template CSS. */

/* About Us page — 3-column firm-description text block */
.about-columns-section { background: #fff; }
.about-columns-section .section-title-centered .sub {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9b38c;
    margin-bottom: 8px;
}
.about-columns-section .section-title-centered h2 {
    font-size: 34px;
    color: #16243e;
    margin-bottom: 0;
}
.about-text-cols p {
    font-size: 15px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .about-text-cols .col-md-6 { margin-bottom: 24px; }
}

/* Sticky header: snappier slide-in (template uses 700ms which feels laggy). */
.site-header .sticky-header { transition: top 250ms ease-out, opacity 200ms ease-out !important; }

/* Homepage CTA section logo — constrain so an uploaded full-size image
   doesn't blow out the layout, but keep it large enough to be readable. */
.cta-section .cta-logo {
    margin-bottom: 22px;
}
.cta-section .cta-logo img {
    max-width: 180px;
    height: auto;
    display: inline-block;
    /* lift the logo so it pops against the dark gradient overlay */
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
@media (max-width: 600px) {
    .cta-section .cta-logo img { max-width: 140px; }
}

/* Make the CTA background image bleed edge-to-edge on wide screens
   (template default insets it 80px with `margin: 0 80px`). */
@media screen and (min-width: 1200px) {
    .cta-section { margin: 0 !important; }
}

/* Homepage blog grid — clean 2x2 layout, equal-height cards so a long title
   in one card doesn't push the next row out of alignment. */
.blog-section .blog-grids {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px !important;
}
.blog-section .blog-grids .grid {
    width: calc(50% - 30px);
    float: none !important;
    margin: 0 15px 30px !important;
    display: flex;
    flex-direction: column;
}
.blog-section .blog-grids .grid .entry-media,
.blog-section .blog-grids .grid .entry-media img {
    width: 100%;
    display: block;
}
.blog-section .blog-grids .grid .entry-media img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.blog-section .blog-grids .grid .entry-details {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.blog-section .blog-grids .grid .entry-details h3 {
    flex: 1 1 auto;
}
@media (max-width: 767px) {
    .blog-section .blog-grids .grid { width: 100%; }
}

/* Topbar — keep the contact info on a single, readable line and align with socials. */
@media (min-width: 992px) {
    .site-header .topbar .row {
        display: flex;
        align-items: center;
    }
    .site-header .topbar .contact-info ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 28px;
        margin: 0;
        padding: 0;
        list-style: none;
        align-items: center;
    }
    .site-header .topbar .contact-info li {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap;
    }
    .site-header .topbar .social ul {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
        align-items: center;
    }
    .site-header .topbar .social li { float: none !important; margin: 0 !important; }
}

/* Practice-area sidebar "Need Legal Help?" CTA card.
   Force content above the dark overlay, plain-white text, white button. */
.service-sidebar .contact-widget > div {
    position: relative;
    z-index: 2;
}
.service-sidebar .contact-widget h3,
.service-sidebar .contact-widget p,
.service-sidebar .contact-widget a {
    color: #ffffff !important;
    opacity: 1 !important;
    position: relative;
    z-index: 2;
}
.service-sidebar .contact-widget h3 {
    font-size: 22px;
    margin-bottom: 12px;
    font-weight: 700;
}
.service-sidebar .contact-widget .theme-btn {
    background: #ffffff !important;
    color: #16243e !important;
    border: 0;
    display: inline-block;
    padding: 12px 28px;
    font-weight: 700;
    border-radius: 4px;
    margin-top: 10px;
    transition: background 0.2s ease, color 0.2s ease;
}
.service-sidebar .contact-widget .theme-btn:hover {
    background: #c9b38c !important;
    color: #ffffff !important;
}


/* Header: keep logo, menu and CTA on ONE single row (no stacking).
   Applies on tablet & up; the mobile hamburger menu below 991px stays untouched. */
@media (min-width: 992px) {
    .site-header .navigation > .container {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 18px;
    }
    .site-header .navbar-header {
        float: none;
        flex: 0 0 auto;
        margin: 0;
    }
    .site-header #navbar.navigation-holder {
        float: none !important;
        flex: 1 1 auto;
        width: auto !important;
        text-align: center;
    }
    .site-header #navbar.navigation-holder > ul.nav {
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: center;
        float: none;
        margin: 0;
    }
    .site-header #navbar.navigation-holder > ul.nav > li {
        float: none;
    }
    .site-header #navbar.navigation-holder > ul.nav > li > a {
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
    }
    .site-header .cart-search-contact {
        float: none !important;
        flex: 0 0 auto;
        position: static !important;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 0 !important;
    }
    .site-header .cart-search-contact > div {
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
    }
    .site-header .header-cunsalt-btn a.theme-btn {
        margin: 0 !important;
        padding: 12px 26px !important;
        line-height: 1.4 !important;
    }
    .site-header .header-search-form-wrapper .search-toggle-btn {
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
    }
}

/* Practice Areas tile strip (service-section-s2 .service-grids):
   force a single straight row of up to 7 evenly-spaced, centered tiles. */
.service-section-s2 .service-grids,
.service-section .service-grids.row-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    margin: 0;
}

.service-section-s2 .service-grids .grid,
.service-section .service-grids.row-strip .grid {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 14.2857%;          /* 100% / 7 */
    margin: 0;
    float: none;
    text-align: center;
    padding: 28px 14px 28px;
    padding-left: 14px;           /* override the template's 75px left padding */
    box-sizing: border-box;
    position: relative;
}

/* Move the icon above the title (template default positions it absolute on the left). */
.service-section .service-grids.row-strip .grid > i.fi,
.service-section-s2 .service-grids .grid > i.fi {
    position: static !important;
    display: block;
    text-align: center;
    margin: 0 auto 14px;
    font-size: 32px;
    line-height: 1;
}

.service-section-s2 .service-grids .grid h3,
.service-section-s2 .service-grids .grid p,
.service-section .service-grids.row-strip .grid h3,
.service-section .service-grids.row-strip .grid p {
    text-align: center;
}

.service-section-s2 .service-grids .grid i,
.service-section .service-grids.row-strip .grid i {
    display: block;
    text-align: center;
}

/* Hero slider pagination tabs — keep all (up to 7) practice-area tabs
   on one straight horizontal row instead of wrapping to a second line.
   The template default reserves padding for an icon we don't render. */
.hero-style-1 .swiper-cust-pagination {
    flex-wrap: nowrap !important;
}
.hero-style-1 .swiper-pagination-bullet {
    flex: 1 1 0;
    min-width: 0;
    padding: 22px 12px !important;
    text-align: center;
}
.hero-style-1 .swiper-pagination-bullet h4 {
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

/* Below the desktop breakpoint, allow it to wrap gracefully (still centered). */
@media (max-width: 991px) {
    .service-section-s2 .service-grids,
    .service-section .service-grids.row-strip {
        flex-wrap: wrap;
    }
    .service-section-s2 .service-grids .grid,
    .service-section .service-grids.row-strip .grid {
        flex: 0 1 calc(33.33% - 15px);
        max-width: calc(33.33% - 15px);
    }
}
@media (max-width: 600px) {
    .service-section-s2 .service-grids .grid,
    .service-section .service-grids.row-strip .grid {
        flex: 0 1 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
}