/*
 Theme Name:   dLawyers Child
 Theme URI:    https://legalnetwork.ca
 Description:  Child theme for dLawyers — keeps all LegalNetwork customizations safe from parent theme updates.
 Author:       LegalNetwork Dev
 Template:     dlawyers
 Version:      1.0.0
 Text Domain:  dlawyers-child
*/

/* ── Hero Spider Map — responsive scaling handled via JS in the HTML widget ── */

/* ── Mobile Nav — collapse into hamburger below 991px ── */
@media (max-width: 991px) {
    .navbar-expand-lg .navbar-toggler {
        display: block !important;
    }
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
        position: fixed;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        flex-direction: column;
        padding: 20px;
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 2px 0 15px rgba(0,0,0,0.15);
    }
    .navbar-expand-lg .navbar-collapse.show {
        display: flex !important;
        left: 0;
    }
    .navbar-expand-lg .navbar-collapse .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    .navbar-expand-lg .navbar-collapse .navbar-nav > li {
        padding: 8px 0;
        margin: 0;
    }
    .navbar-expand-lg .navbar-collapse .navbar-nav > li > a {
        line-height: 1.8;
    }
    .navbar-expand-lg .navbar-collapse .theme-nav-close {
        display: flex !important;
        align-self: flex-end;
        cursor: pointer;
        font-size: 24px;
        margin-bottom: 15px;
    }
}

/* ── Enlarge Header Logo ── */
.theme-header-logo__img img {
    max-width: 180px;
}
@media (max-width: 479px) {
    .theme-header-logo__img img {
        max-width: 120px;
    }
}


/* ── Widen the search bar to fit Profession + Name + Location ── */
.directorist-search-form-wrap .directorist-search-form-inline {
    flex-wrap: nowrap !important;
}
.directorist-search-form-wrap .directorist-with-search-border {
    max-width: 100% !important;
}

/* ── Profession Dropdown in Search Bar ── */
.ln-profession-field {
    flex: 1 1 auto;
    min-width: 200px;
    padding: 0 !important;
    border-right: 1px solid #e9e9e9 !important;
}
.ln-profession-field .directorist-search-field__label {
    display: none;
}
.ln-profession-select {
    border: none !important;
    background: transparent !important;
    font-size: 15px;
    color: #555;
    padding: 0px 14px !important;
    cursor: pointer;
    width: 100%;
    height: 100%;
    -webkit-appearance: menulist;
    appearance: auto;
    box-shadow: none !important;
    outline: none !important;
}
.ln-profession-select:focus {
    outline: none !important;
    box-shadow: none !important;
}
@media (max-width: 991px) {
    .directorist-search-form-wrap .directorist-search-form-inline {
        flex-wrap: wrap !important;
    }
    .ln-profession-field {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none !important;
        border-bottom: 1px solid #e9e9e9 !important;
    }
}

/* ── Pricing Plan Buttons — green style ── */
.elementor-element-btn_free2 .elementor-button,
.elementor-element-btn_vip2 .elementor-button {
    background-color: #2d8c3c !important;
    color: #fff !important;
    padding: 12px 35px;
    font-size: 15px;
}
.elementor-element-btn_free2 .elementor-button:hover,
.elementor-element-btn_vip2 .elementor-button:hover {
    background-color: #236e2f !important;
}


/* ── Hero Text Overlay — Responsive ── */
.center-text-new {
    font-size: clamp(14px, 4vw, 34px);
    line-height: 1.5;
    padding: 0 10px;
}


/* ln-no-hyphens: stop the browser splitting words like "across"/"other" in the About CTAs */
.theme-cta, .theme-cta p, .theme-cta h2, .theme-cta__content { hyphens: none !important; -webkit-hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; }

/* ── Referral Link header button + "?" explainer ─────────────────────── */
.ln-referral { position: relative; display: flex; align-items: center; gap: 6px; }
.ln-referral__btn { display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 999px; background: #1e40af; color: #fff !important;
    font-size: 13.5px; font-weight: 600; text-decoration: none !important; white-space: nowrap;
    transition: background .25s ease; }
.ln-referral__btn:hover { background: #17307d; }
.ln-referral__info { width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
    background: #1e40af; color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ln-referral__popup { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200;
    width: 300px; background: #fff; border-radius: 10px; padding: 18px 20px;
    box-shadow: 0 10px 34px rgba(10,20,40,.18); font-size: 13.5px; line-height: 1.55; color: #333; text-align: left; }
.ln-referral__popup p { margin: 0 0 10px; }
.ln-referral__close { position: absolute; top: 6px; right: 10px; background: none; border: none;
    font-size: 20px; color: #999; cursor: pointer; padding: 0; line-height: 1; }
.ln-referral__cta { display: inline-block; padding: 8px 16px; border-radius: 6px;
    background: #1e40af; color: #fff !important; font-size: 13px; font-weight: 600;
    text-decoration: none !important; }
@media (max-width: 991px) {
    .ln-referral__btn { padding: 7px 12px; font-size: 12.5px; }
    .ln-referral__popup { right: -60px; width: 270px; }
}

/* ---- Header: keep the whole bar on one row ---------------------------
   The Referral Link button adds roughly 190px to the action column, and
   .theme-header-menu (flex: 2, basis 0) is the only column that flexes —
   so it lost exactly that width and "Sign In/Create Account" wrapped to a
   second line. Recover the space from the spacing on both sides instead of
   dropping anything out of the header. Vertical padding is left alone: it
   sets the header height. */
@media (min-width: 992px) {
    .theme-header-inner .mainmenu__menu .navbar-nav { flex-wrap: nowrap; }
    .theme-header-inner .mainmenu__menu .navbar-nav > li {
        padding-left: 10px;      /* theme default 19px */
        margin-right: 4px;       /* theme default 11px */
    }
    .theme-header-inner .mainmenu__menu .navbar-nav > li > a { white-space: nowrap; }

    .theme-header-action__author li:not(:last-child) { margin-right: 14px; }  /* theme default 25px */

    .ln-referral { gap: 4px; }
    .ln-referral__btn { padding: 7px 13px; font-size: 13px; }
    .ln-referral__info { width: 20px; height: 20px; font-size: 12px; }
}

/* Between the desktop breakpoint and a roomy screen the row is genuinely
   cramped, so tighten a little further before anything can wrap. */
@media (min-width: 992px) and (max-width: 1439px) {
    .theme-header-inner .mainmenu__menu .navbar-nav > li { padding-left: 7px; margin-right: 2px; }
    .theme-header-inner .mainmenu__menu .navbar-nav > li > a { font-size: 13.5px; }
    .theme-header-action__author li:not(:last-child) { margin-right: 10px; }
    .ln-referral__btn { padding: 6px 11px; font-size: 12.5px; }
    .ln-referral__info { width: 19px; height: 19px; }
}

/* ---- Home 3 scrolling marquee: clip the track ------------------------
   The Elementor HTML widget (dceec88) that renders the scrolling text bar
   still carries the comment "Hides the text when it goes off screen", but
   the overflow declaration it described was deleted. Its track is doubled
   nowrap text (~3,000px), so it spilled out and made the whole page ~2,470px
   wide on phones. That inflated the layout viewport, which broke every
   mobile breakpoint and pushed fixed-position UI — the More Filters bottom
   sheet — off the visible screen. Restored here rather than in Elementor
   data so it survives the page being re-saved. */
.scrolling-text-container { overflow: hidden; }

/* ---- Pricing plans on Elementor pages: restore the grid gutter ---------
   dLawyers' elementor.css zeroes .directorist-container-fluid padding on
   every Elementor page, but the rows keep their -15px margins, so the
   pricing grid overhung its container by 15px each side. On Home 3 the
   section's 10px padding couldn't absorb that, leaving the page 5px wider
   than the screen on phones and tablets — a sideways wiggle, and a slight
   zoom-out in mobile browsers. Restoring the padding for the pricing block
   only keeps the pair consistent, and renders these cards the same way the
   shortcode already renders on /select-your-plan/. */
.elementor-page #directorist-pricing-plan-container > .directorist-container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}