/*
 * Small overrides on top of the reused WordPress theme CSS.
 * Keep this minimal — only fixes that match the live original.
 */

/*
 * ---- Blog category filter (show/hide) ----
 * The blog grid is the ORIGINAL native Bootstrap flex row (`col-md-4` = 3-up). The category tabs
 * are wired by WpBlogFilter.tsx with a tiny show/hide handler (no isotope, no absolute positioning,
 * so the native flex reflows deterministically). It adds `.pbmit-filter-hidden` to the cards that
 * don't match the active tab; this hides them so only the matching category's cards remain visible.
 * Scoped to the blog grid's `.pbmit-ele` cards inside the WP subtree (`.elementor-kit-302`).
 */
.elementor-kit-302 .pbmit-element-posts-wrapper > .pbmit-ele.pbmit-filter-hidden {
  display: none !important;
}

/*
 * ---- Remove the duplicate "request a call" button (#pbmit-call-btn-injected) ----
 * The live source ships a custom inline <script> (baked into the reused header HTML) that
 * builds a SECOND "ზარის მოთხოვნა" button and injects it into the nav menu area. It is a
 * one-shot gated on `window.innerWidth < 1200` at load time and the node is never removed,
 * so if the page first loads narrow (un-maximized window, DevTools open) and is then widened,
 * the injected pill persists ALONGSIDE the real header button — the intermittent duplicate
 * that floats below the header. It is a non-original bolt-on and is broken (renders full-width
 * and mis-placed), so we suppress it. The real header button (`.pbmit-button-box-second`
 * inside `.pbmit-right-box`) carries no id and is untouched.
 */
#pbmit-call-btn-injected {
  display: none !important;
}

/* Center the footer logo (footer-style-3), as on the original site. */
.pbmit-footer-style-3 .pbmit-footer-widget-col-2,
.pbmit-footer-style-3 .pbmit-footer-logo {
  text-align: center;
}
.pbmit-footer-style-3 .pbmit-footer-logo img {
  display: inline-block;
}

/* Gold copyright bar — keep the Terms link inheriting the dark text colour. */
.pbmit-footer-copyright-text-area a {
  color: inherit;
  text-decoration: none;
}
.pbmit-footer-copyright-text-area a:hover {
  opacity: 0.8;
}

/*
 * Elementor stretched sections (elementor-section-stretched). On the live site
 * these break out of the 1394px boxed container and span the FULL viewport width
 * — done at runtime by Elementor's stretchElement JS. We reproduce that exact
 * result in CSS so it's deterministic and not dependent on the WP/Elementor JS
 * stack initialising. `calc(50% - 50vw)` equals the negative left offset
 * Elementor computes for a centered container; width:100vw spans the viewport.
 *
 * SCOPED to >1200px to MATCH THE ORIGINAL. The theme's responsive.min.css does the
 * breakout ONLY above 1200px (desktop, where stretchElement uses the document width,
 * which excludes the scrollbar); at `@media (max-width:1200px)` it forces stretched
 * sections to `width:100%!important;left:0!important` (full-width container, no
 * negative margin). Our `100vw` includes the vertical scrollbar, so applying it ≤1200px
 * overshot the viewport on mobile → horizontal overflow → the white body background
 * showed on the right/bottom of the page. Below 1201px we now let the theme's own
 * width:100% rule govern, exactly as the live site does = no gap.
 */
@media (min-width: 1201px) {
  .elementor-section.elementor-section-stretched {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
  }
}
/* Prevent the full-bleed sections from creating horizontal scroll (the 100vw
   includes the scrollbar width). */
html,
body {
  overflow-x: hidden;
}

/*
 * NOTE: "რემონტის ეტაპები" / Renovation Steps (elementor id c5cbeeb) is intentionally
 * NOT re-contained here. On the live original it is a real elementor-section-stretched
 * section: the teal rounded panel (+favicon overlay) spans the FULL viewport (100vw),
 * exactly like the hero and the other stretched sections we copied, while its 4 cards
 * stay centered because the section is also elementor-section-boxed (the inner
 * .elementor-container caps at 1140px / 1024 / 767 per breakpoint). The rounded corners
 * (border-radius:30px), padding (0 40px desktop → 2.5rem 0 mobile) and vertical margins
 * are all driven by the original post-114.css media-query rules, so the responsive
 * behaviour matches 1:1. An earlier max-width:1394px cap was removed — it shrank the
 * full-width panel into a narrow box, which is NOT how the original renders.
 */

/*
 * Restore Swiper's slide animation inside the reused theme. The create-tigra
 * design system sets `transition-property: background-color, color, border-color,
 * box-shadow` on EVERY element (globals.css @layer base) — which excludes
 * `transform`. Swiper slides by animating `transform: translate3d(...)` with an
 * inline `transition-duration`, so with transform stripped from the property list
 * the slides JUMP instantly instead of sliding smoothly (hero, services, blog).
 * Re-enable transform (+ opacity for fade effects) for the theme's Swiper nodes.
 * Duration/easing stay driven by Swiper's own inline styles.
 */
.elementor-kit-302 .swiper-wrapper,
.elementor-kit-302 .swiper-slide {
  transition-property: transform, opacity !important;
}
/* The clients marquee scrolls at a constant speed (Swiper speed:12000, loop) —
   it needs linear timing, not the global ease-out, or it visibly eases + jumps
   on every loop. */
.elementor-kit-302 .pbmit-marquee-container .swiper-wrapper {
  transition-timing-function: linear !important;
}

/*
 * ---- Carousel pre-init "no-flash" (services + blog + all viewtype-carousels) ----
 * The xinterio theme defaults every carousel item (.pbmit-ele) to display:none and
 * shows only the first `columns` items as display:BLOCK — i.e. full-width, stacked
 * vertically — until its Swiper builds and lays them out N-up in a single row.
 * On WordPress this is never seen: the theme JS runs before first paint, so the page
 * paints straight into the Swiper layout. Here we inject the theme JS from a
 * post-paint useEffect (WpHomeScripts), so the full-width-stacked state PAINTS first
 * and then collapses to the N-up carousel — the "elements get bigger then snap to
 * normal" flash on load.
 *
 * Fix: pre-shape every un-initialised carousel wrapper into its final single row
 * (flex, no wrap, clipped) and size the visible items to the column fraction, so the
 * pre-init paint already matches the post-init Swiper. Swiper 7 adds `swiper-initialized`
 * to the wrapper on build, after which these rules stop matching and Swiper's own inline
 * widths take over. The hidden (display:none) overflow items are unaffected — they only
 * set width, so they stay hidden until Swiper wraps them into the slide track.
 */
.elementor-kit-302 .pbmit-element-viewtype-carousel .pbmit-element-posts-wrapper:not(.swiper-initialized) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  overflow: hidden;
}
.elementor-kit-302 .pbmit-element-viewtype-carousel .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele {
  flex: 0 0 auto;
}
/* IMPORTANT: every selector below is compound-scoped to .pbmit-element-viewtype-carousel
 * so it ONLY pre-shapes real CAROUSELS. A viewtype-row-column element (e.g. the
 * "რემონტის ეტაპები" / Renovation Steps section, id c5cbeeb — pbmit-element-column-four,
 * a static Bootstrap grid) never becomes a Swiper, so its .pbmit-element-posts-wrapper is
 * permanently :not(.swiper-initialized). Without the carousel scope, the `width:25%` line
 * leaked onto its cards at EVERY breakpoint — forcing 4-up squished even on mobile, instead
 * of letting Bootstrap's col-md-6 col-lg-3 stack them (4-up ≥992, 2-up ≥768, 1-up below). */
.elementor-kit-302 .pbmit-element-viewtype-carousel.pbmit-element-column-one   .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele { width: 100%; }
.elementor-kit-302 .pbmit-element-viewtype-carousel.pbmit-element-column-two   .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele { width: 50%; }
.elementor-kit-302 .pbmit-element-viewtype-carousel.pbmit-element-column-three .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele { width: 33.3333%; }
.elementor-kit-302 .pbmit-element-viewtype-carousel.pbmit-element-column-four  .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele { width: 25%; }
.elementor-kit-302 .pbmit-element-viewtype-carousel.pbmit-element-column-five  .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele { width: 20%; }
.elementor-kit-302 .pbmit-element-viewtype-carousel.pbmit-element-column-six   .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele { width: 16.6666%; }
/* Phones collapse most of these carousels to 1-up (Swiper breakpoints); match that
   pre-init so narrow screens don't flash a squeezed multi-column row first. */
@media (max-width: 767px) {
  .elementor-kit-302 .pbmit-element-viewtype-carousel .pbmit-element-posts-wrapper:not(.swiper-initialized) > .pbmit-ele {
    width: 100%;
  }
}

/*
 * ---- Inner-page title banner (.pbmit-title-bar-wrapper) — about-us & all inner pages ----
 * The live site runs header-style-7, whose CSS turns the title bar into an INSET ROUNDED
 * CARD — verbatim from header-style-7.css:
 *     @media (min-width:1201px){
 *       .pbmit-header-style-7 .pbmit-title-bar-wrapper{
 *         margin:0 15px; max-width:100%; overflow:hidden; border-radius:20px; }}
 * That rule is scoped to a `.pbmit-header-style-7` ANCESTOR (the live <header id="masthead">).
 * In our WP-reuse render the banner is extracted out of <header> and prepended to the page
 * body, so it has no `.pbmit-header-style-7` ancestor and the rule never matched — the banner
 * rendered square and full-bleed (and an earlier invented `max-width:1394px` cap made it a
 * narrow box, NOT how the original looks). Reproduce the EXACT header-style-7 values here, at
 * the SAME >1200px breakpoint, so desktop gets the rounded inset card and mobile stays
 * full-width + square, identical to the live site. Then center the content below.
 */
@media (min-width: 1201px) {
  .pbmit-title-bar-wrapper {
    margin: 0 15px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 20px;
  }
}
.pbmit-title-bar-wrapper .pbmit-title-bar-content {
  justify-content: center;
}
.pbmit-title-bar-wrapper .pbmit-title-bar-content-inner,
.pbmit-title-bar-wrapper .pbmit-tbar,
.pbmit-title-bar-wrapper .pbmit-tbar-inner,
.pbmit-title-bar-wrapper .pbmit-breadcrumb {
  text-align: center;
}
.pbmit-title-bar-wrapper .pbmit-tbar img {
  display: inline-block;
}

/*
 * ---- Partner / client logos (client-style-2) — center the logo inside each card ----
 */
.pbmit-client-style-2 .pbmit-featured-wrapper,
.pbmit-client-style-2 .pbmit-client-wrapper {
  text-align: center;
}
.pbmit-client-style-2 .pbmit-featured-wrapper img {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/*
 * ---- FAQ / Elementor accordion question header ----
 * The title is a click-to-toggle header; without user-select:none, clicking it selects the
 * question text (the "gets selected / highlighted" the live site doesn't show). Match the
 * original's clean tap. (The slide-animation fix for these panels lives in WpShellScripts —
 * Tailwind's [hidden]{display:none!important} vs Elementor's jQuery slide; see the note there.)
 *
 * `border:0` removes the faint box that appears around the OPEN/active question: our design
 * system applies `@apply border-border` to every element, so the active title rendered a 1px
 * border in the --border colour (a box the live site doesn't have). Closed titles already have
 * 0-width borders; the real FAQ row dividers live on `.elementor-accordion-item` and are untouched.
 */
.elementor-accordion .elementor-tab-title {
  border: 0 !important;
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-title * {
  -webkit-user-select: none;
  user-select: none;
}

/*
 * ---- Off-canvas MOBILE MENU (≤1200px) — reproduce the live WP customizer inline <style> ----
 * The live site styles the burger menu via a SITE-WIDE WordPress Customizer inline <style>
 * (white text, gold active item, hover = colour-change-ONLY). That inline block wins on the
 * live site because inline <style> cascades after every linked stylesheet. We don't emit it,
 * AND our base-CSS <link>s let core.min.css's `.pbmit-navbar>div>ul li a{color:#000!important}`
 * (+ the desktop `…:hover>a{padding-left:0}` that shrinks the icon) win — so our menu rendered
 * with BLACK text and a hover that shifted the item LEFT, and core's `overflow-y:scroll` forced
 * an always-on inner scrollbar. Reproduce the customizer rules here (wp-overrides.css loads last)
 * with the nav's own `.pbmit-main-active-color-globalcolor` class added to lift specificity ABOVE
 * core's (0,1,4) rules, so these win deterministically regardless of <link> order. Values verified
 * 1:1 against the live site (white #ffffff text, gold #fdb738 active, padding-left:25px on hover).
 */
@media (max-width: 1200px) {
  /* white menu text + white submenu-toggle arrow */
  .pbmit-navbar.pbmit-main-active-color-globalcolor > div > ul li a {
    color: #ffffff !important;
  }
  .pbmit-navbar.pbmit-main-active-color-globalcolor .sub-menu-toggle {
    color: #ffffff !important;
  }
  /* current page = gold — must out-rank the white rule above (extra class → higher specificity) */
  .pbmit-navbar.pbmit-main-active-color-globalcolor li.current-menu-item span,
  .pbmit-navbar.pbmit-main-active-color-globalcolor li.current-menu-item a:before,
  .pbmit-navbar.pbmit-main-active-color-globalcolor li.current-menu-item a {
    color: #fdb738 !important;
  }
  /* hover = COLOUR change only — cancel the desktop rule that removes the left padding and
     shrinks the ::before icon, which made the item jump left on hover */
  body:not(.mega-menu-pbminfotech-top) .pbmit-navbar.pbmit-main-active-color-globalcolor ul > li > ul > li:hover > a {
    padding-left: 25px !important;
  }
  body:not(.mega-menu-pbminfotech-top) .pbmit-navbar.pbmit-main-active-color-globalcolor ul > li > ul > li:hover > a::before {
    width: inherit !important;
  }
  /* no always-on inner scrollbar (core forces overflow-y:scroll on the open panel) */
  .pbmit-navbar.pbmit-main-active-color-globalcolor > div.active {
    overflow-y: auto !important;
  }
}