/* =====================================================================
   black_chamber - the ONE theme stylesheet.
   =====================================================================
   BUILT FROM the three inline <style> blocks in
   layouts/landing_header.php (lines 34-139, 141-196 and 259-266). Rule 1
   of the theme contract is "No inline CSS or JS in a theme view - ever",
   and a style block in a LAYOUT is the worst case: it loads on every page
   of every portal on the theme and can never be cached.

   This theme is NOT Sinace. west_chester and school_digital both ship the
   Sinace template (sinace.css, .main-menu__*, .thm-btn); black_chamber
   ships its own base - main.css, Bootstrap navbar markup, GSAP and AOS.
   None of the other two themes' selectors mean anything here, which is
   why this file shares nothing with theirs beyond the QME components.

   Loaded LAST by Theme_engine::head_assets(), after main.css, so it wins
   the cascade without !important, and stamped ?v=filemtime so an edit is
   live without a hard refresh.
   ===================================================================== */


/* ---------- Captcha honeypot ----------
   Off-screen but not display:none - a field some bots skip is the point.
   removeFakeCaptcha() in theme.js drops it once a human has solved the
   challenge. */

.captcha-fake-field {
    background: transparent;
    bottom: 0;
    border: none;
    display: block;
    height: 1px;
    left: 12px;
    width: 1px;
    position: absolute;
    z-index: -1;
}

.form_group.captcha {
    margin-bottom: 30px;
}

.captcha {
    position: relative;
}


/* =====================================================================
   THEME-SCOPED - under .bc-scope, which the layout puts on the page
   wrapper. main.css owns the base; everything here is this theme's own
   layer on top of it.
   ===================================================================== */

/* ---------- Sections ---------- */

.bc-scope .section-box.mt-50 {
    margin: 30px 0;
}


/* ---------- Navbar ---------- */

.bc-scope .navbar .navbar-nav .nav-item .nav-link {
    font-size: 1.1rem;
    font-weight: 600 !important;
}

.bc-scope .navbar-light .navbar-nav .nav-item .nav-link:hover,
.bc-scope .navbar-light .navbar-nav .nav-item .nav-link.active {
    color: #ddd;
    background-color: transparent;
}

.bc-scope .navbar .navbar-nav .nav-item.menu-item-has-children .nav-link::after {
    top: 15px;
}

/* THESE TWO NUMBERS COME FROM THE LEGACY HEADER, NOT FROM TASTE.
 *
 * header.php carries an inline <style> that every legacy page gets, ending
 * `.navbar { padding: 10px 12px !important; }` and `.navbar .logoo {
 * max-width: 250px }`. The v2 header partial renders the same markup - same
 * .navbar, same <img class="logoo"> - but none of that inline CSS, because it
 * lives in a file v2 pages do not include. So the logo fell back to its
 * natural width and the header grew with it: 320x56 in a 110px bar on an
 * inner page against 250x44 in a 70px bar on the landing page, from identical
 * HTML. The landing page looked right and every inner page did not.
 *
 * Matching legacy exactly is the point. Anything else here is a third header.
 */
.bc-scope .navbar {
    padding: 10px 12px !important;
}

.bc-scope .navbar .logoo {
    max-width: 250px;
}

@media only screen and (max-width: 600px) {
    .bc-scope .navbar .logoo {
        max-width: 200px !important;
    }
}


/* ---------- Banner ---------- */

.bc-scope .box-banner {
    background-size: cover !important;
}

.bc-scope .box-banner::before {
    display: none;
}

.bc-scope .banner.img-custom-anim-left {
    max-width: 730px;
}

.bc-scope .banner.img-custom-anim-left .paragraph-base {
    font-size: 18px;
    word-spacing: 2px;
}


/* ---------- Typography ---------- */

.bc-scope .heading-2xl {
    font-size: 30px;
    line-height: 40px;
}


/* ---------- Buttons ---------- */

/* The Login/Join buttons, copied from legacy header.php's inline <style>
 * rather than approximated. Only border-color was carried over before, so the
 * other five declarations fell through to main.css and the buttons rendered
 * 60px tall against legacy's 50 - which is the whole of the header's
 * remaining 10px difference, the logo having accounted for the rest. */
.bc-scope .btn-white {
    padding: 7px 20px !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    border-color: #252525 !important;
}

.bc-scope .btn-white:hover span,
.bc-scope .btn-white:hover {
    color: #fff !important;
}

.btn-scroll-top {
    background: none;
}


/* ---------- Cards / tiles ---------- */

.bc-scope .item-square-2 {
    border: 1px solid #505050;
}


/* ---------- FAQ banner ----------
   DELIBERATELY EMPTY.

   landing_header.php carries `padding: 90px 0`, `background: none` and
   ::before/::after {display:none} for `.box-faq-single-banner-inner`, and I
   copied them here with the rest of that block. That was wrong: in the legacy
   site those rules only reach pages that INCLUDE landing_header.php. The inner
   pages do not, so they keep main.css's own `padding: 202px 0` and its
   background layers - and the About Us banner is 562px tall there.

   Moving the rules into theme.css applied them to every v2 page, which cut the
   banner to 338px and flattened its overlay: a 224px difference on the first
   thing anyone sees.

   The lesson is in _kb/MIGRATION.md: when you lift an inline <style> block out
   of a legacy layout, check WHICH pages that layout actually renders. A rule
   that was scoped by which file included it becomes global the moment it moves
   into the theme stylesheet. */


/* ---------- About Us page ----------
   THE OTHER HALF OF THAT LESSON.

   Emptying the block above was right, but it left the opposite gap: the legacy
   ABOUT page carries its own inline <style> in pages/about_us.php (lines 3-31),
   and none of it reached v2 either. Three visible consequences, all reported as
   "the page is a mess":

     - `.box-faq-single-banner-inner` kept main.css's decoration layer at its
       own size, so the theme's dark/blue graphic painted over the client's
       banner photo. The photo was loading correctly the whole time - it was
       simply underneath.
     - `.box-info-about-line::before` drew a rule beside the intro paragraph
       that the legacy page hides.
     - `.review-author .review-image` and `.card-best-team` were unconstrained,
       so the quote card and team tiles sized differently.

   Scoped to `.ig-screen-pages-about-us` - the class the engine puts on <body>
   for this template - NOT to `.bc-scope`. That is the distinction the note
   above is about: these rules belong to one page in legacy, so they must reach
   exactly one page here. Values are copied verbatim from about_us.php; none of
   them are mine. */

/* BOTH legacy files contribute here, and the note above got that wrong.
 *
 * Page.php line 305 loads layouts/landing_header.php for EVERY themed page,
 * inner pages included - so its `background: none` and its ::before/::after
 * {display:none} do reach About Us. What does not reach it is that file's
 * `padding: 90px 0`, because about_us.php's own inline <style> prints later in
 * the document and its `padding: 202px 0` wins on source order.
 *
 * So the banner is: no decoration layer, no pseudo-element overlays, 202px of
 * padding - 562px tall, with the client's photo visible because nothing is
 * painted over it. Taking `background: none` as belonging only to the landing
 * page is what left main.css's dark blue graphic covering the photo, and why
 * the banner looked like a different image entirely. */
/* EVERY INNER PAGE, NOT JUST ABOUT US.
 *
 * These come from layouts/landing_header.php, and Page.php line 305 loads that
 * file for EVERY themed page - so in legacy they reach every inner page, and
 * `.bc-scope` (every v2 page) is the matching reach. Scoping them to About Us
 * fixed exactly one page and left the default template still painting
 * bg-faq.png over the author's banner, which is the same bug reported again.
 *
 * Only the decoration is cleared here. `padding` is deliberately NOT included:
 * landing_header's 90px is overridden per page in legacy (about_us.php sets
 * 202px later in the document), and hoisting 90px to every page is what cut the
 * banner from 562px to 338px before. Each page keeps main.css's padding unless
 * its own block below says otherwise. */
.bc-scope .box-faq-single-banner-inner {
    background: none;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    position: relative;
}

.bc-scope .box-faq-single-banner-inner::before,
.bc-scope .box-faq-single-banner-inner::after {
    display: none;
}

/* About Us alone carries 202px, from its own inline <style>. */
.ig-screen-pages-about-us .box-faq-single-banner-inner {
    padding: 202px 0px;
}

/* A plain page's banner is a strip, not a hero. main.css's 202px made the
   default template as tall as About Us, which has a full-bleed photo to fill
   it; a page with a title and a breadcrumb does not. */
.ig-screen-pages-default .box-faq-single-banner-inner {
    padding: 40px 0px;
}

.ig-screen-pages-about-us .box-info-about-line { padding-left: 0; }
.ig-screen-pages-about-us .box-info-about-line::before { display: none; }
.ig-screen-pages-about-us .box-info-about-top { padding-left: 0; }

.ig-screen-pages-about-us .card-best-team { height: 100%; }

.ig-screen-pages-about-us .review-author .review-image img { border-radius: 10px; }
.ig-screen-pages-about-us .review-author .review-image {
    min-width: auto;
    width: auto;
    margin-right: 20px;
    max-width: 250px;
}

.ig-screen-pages-about-us .list-why-choose .item-why .item-right p {
    margin-bottom: 0px;
    line-height: 1.2;
}

.ig-screen-pages-about-us .bttnnn {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}


/* ---------- Slick carousel fixes ---------- */

.bc-scope .slick-prev,
.bc-scope .slick-next {
    font-family: "Font Awesome 5 Pro";
    font-size: inherit;
}

.bc-scope .slick-prev:before,
.bc-scope .slick-next:before {
    opacity: 1 !important;
}

.bc-scope .slick-arrow {
    background: #070e54 !important;
}

.bc-scope ul.slick-dots {
    display: none !important;
}


/* ---------- QME shared components ----------
   These class names come from the platform, not from this theme's
   template, so they appear on several themes. They are scoped anyway:
   a portal's page can embed a QME widget beside theme markup, and this
   file has no business styling anything outside the theme's wrapper. */

.bc-scope .qme-header a.navbar-brand.logo {
    align-items: center;
    display: flex;
}

.bc-scope .qme-header a.navbar-brand.logo span.sub-text {
    font-weight: 600;
    margin-top: 10px;
    display: block;
}

.bc-scope .Q-user-menu .open ul.dropdown-menu {
    display: block;
}

.bc-scope .Q-card-links ul li a {
    font-weight: 500;
}

.bc-scope .qme-services-card-caption p {
    font-weight: 400;
    line-height: 19px;
}

.bc-scope .qme-search-select select,
.bc-scope .saerch-state-city select {
    font-weight: 500;
}

.bc-scope .qme-searchbar .form-control {
    font-weight: 400;
}

.bc-scope .qme-modal-list ul li a {
    font-weight: 500 !important;
}

.bc-scope .sidebar-box p {
    font-weight: 600;
    line-height: 17px;
}

.bc-scope .search-section p {
    font-weight: 400;
}

.bc-scope .trading-thumbnail-caption h4 {
    font-size: 11px;
    font-weight: 600;
}

.bc-scope .qmelocal-how-work strong {
    font-size: 16px;
    line-height: 19px !important;
    display: block;
}

.bc-scope .qmelocal-how-work p {
    font-weight: 400;
    line-height: 17px;
}

.bc-scope .rightbar-thumbnail p {
    font-weight: 400;
    line-height: 20px;
}

.bc-scope .experience-items2 .owl-prev .fa,
.bc-scope .experience-items2 .owl-next .fa {
    margin-top: 3px;
    display: block;
}

.bc-scope .portfolio-style-two .img-holder .portfolio-hover .hover-content .cat-btn {
    display: inline-block;
}


/* =====================================================================
   FRONT-END EDIT BUTTON
   =====================================================================
   NOT scoped: the layout renders it last, before </body> and OUTSIDE the
   wrapper, so a .bc-scope prefix would never match. position:fixed and
   admin-only, so it cannot collide with page content.
   ===================================================================== */

.ig-edit-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-size: 14px;
}

.ig-edit-btn .ig-edit-btn__main {
    display: inline-block;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
}

.ig-edit-btn .ig-edit-btn__main:hover {
    background: #222;
    color: #fff;
}