/* Valour Chambers — 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: #019ba5;
    margin-bottom: 8px;
}
.about-columns-section .section-title-centered h2 {
    font-size: 34px;
    color: #111111;
    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: #111111 !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: #019ba5 !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);
    }
}

/* ---------------------------------------------------------------------------
   Preloader
   The template only hides the preloader on window.load, i.e. after every image
   has downloaded. The override in partials/scripts.blade.php adds this class as
   soon as the page is laid out so a heavy image can't hold the screen hostage.
   --------------------------------------------------------------------------- */
.preloader.preloader-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* ---------------------------------------------------------------------------
   Logo sizing
   The Valour lockup is wider than the template's original logo (aspect ~3.9 vs
   ~3.1), so the template's 147px cap rendered it noticeably shorter than the
   header was designed for. 190px restores the original ~48px logo height.
   The footer logo had no cap at all and rendered at its natural pixel width —
   it needs an explicit one so the asset can ship at 3x for retina.
   --------------------------------------------------------------------------- */
.header-style-1 .navbar-brand img,
.header-style-2 .navbar-brand img,
.header-style-3 .navbar-brand img {
    max-width: 190px;
    height: auto;
}

.site-footer .social-newsletter-area .logo-area img {
    max-width: 220px;
    height: auto;
}

/* ---------------------------------------------------------------------------
   Logo variants
   script.js clones .site-header .navigation into the sticky bar, so both bars
   share identical markup and a clone cannot be handed a different src. Both
   lockups are therefore rendered and CSS chooses: the colour logo (black
   wordmark) on the white header, the white logo on the dark sticky bar.
   --------------------------------------------------------------------------- */
.navbar-brand .logo-inverse {
    display: none;
}

.site-header .sticky-header .navbar-brand .logo-default {
    display: none;
}

.site-header .sticky-header .navbar-brand .logo-inverse {
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   Dark header
   The template header is transparent and absolutely positioned, designed to sit
   over the dark homepage hero — where its white logo and white nav links are
   legible. On inner pages it overlays a white body, making both invisible.
   A solid dark bar makes the header read consistently on every page and lets
   the white logo work throughout. The sticky header is already #111111, so it
   is deliberately left untouched here.
   --------------------------------------------------------------------------- */
.site-header .topbar {
    background-color: #111111;
}

.site-header .navigation:not(.sticky-header) {
    background-color: #111111;
}

/* Thin divider between the top contact bar and the main nav row. */
.site-header .navigation:not(.sticky-header) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* The template's search icon is a muted slate that vanishes on the dark bar. */
.site-header .cart-search-contact .search-toggle-btn {
    color: #fff;
}

/* On the dark header the standard (dark-wordmark) logo would disappear, so use
   the white lockup here too — matching the sticky bar. */
.site-header .navigation:not(.sticky-header) .navbar-brand .logo-default {
    display: none;
}
.site-header .navigation:not(.sticky-header) .navbar-brand .logo-inverse {
    display: inline-block;
}