/* ------------------------------------------------------------------
   Static-host fixes. NOT part of the original koncept8.com design.
   Nothing here changes how the site looks at desktop. It restores a
   background-video behaviour the static host breaks, and fixes mobile
   overflow bugs that reproduce on the original WordPress site too.
   Keep every rule commented with why it exists.
   ------------------------------------------------------------------ */

/* Elementor sizes its hosted background video from JS, and that handler does
   not run for a root-relative src the way it does for the absolute URL on the
   live site, so the <video> never received a src or its cover dimensions.
   We set src directly on the tag and do the cover-fit here instead. */
.elementor-background-video-container .elementor-background-video-hosted {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ==================================================================
   RESPONSIVE FIXES
   Every issue below reproduces on the ORIGINAL koncept8.com at the same
   viewport widths. These are inherited bugs, fixed here, not regressions
   introduced by the clone. Verified by screenshotting the live site at
   390px alongside this one.
   ================================================================== */

/* 1. Elementor flexbox containers (.e-con) lay children out with grid, and a
      grid item defaults to min-width:auto, so it refuses to shrink below its
      own content width. On /tadelakt-plaster-austin/ that pushed 813px-wide
      children out of a 767px cell and blew the page ~456px past the viewport. */
.e-con-inner > .elementor-element,
.e-con-inner > * {
  min-width: 0;
  max-width: 100%;
}

/* 2. A widget on the homepage carries an Elementor custom width of 124.705%,
      which is fine at the design width and overflows every viewport below it
      (23px at 390px, 3px at 768px). Cap it once the layout starts narrowing. */
@media (max-width: 1024px) {
  .elementor-widget__width-initial,
  .elementor-widget__width-inherit,
  .elementor-element-68a3038f {
    max-width: 100% !important;
  }
}

/* 3. (removed) This used to force the mobile dropdown to left:0/right:0/
      width:auto. That was written when the dropdown code never loaded. With
      it loaded, Elementor's "stretch" handler sets an inline full-width box,
      and forcing auto width squeezed the open menu into a ~70px column. */

/* 4. (removed) The /blog/ grid's -15px gutters overhang by 5px. Zeroing them
      shrank the cards ~30px, a visible change, so the overhang is left as on the
      original and the root lock in 6a keeps it from scrolling sideways. */

/* 5. Elementor writes a fixed pixel width for custom-width widgets, e.g.
         .elementor-896 .elementor-element.elementor-element-a61f52f {
             width: var(--container-widget-width, 813px);
             max-width: 813px; --flex-shrink: 0; }
      That is three classes of specificity and it also switches shrinking off,
      so a generic rule loses to it and the widget cannot narrow. Scope to
      flexbox-container children and cap below the desktop breakpoint, where
      Elementor stacks these full width anyway. */
@media (max-width: 1024px) {
  .e-con-inner > .elementor-element,
  .e-con > .elementor-element {
    max-width: 100% !important;
    --container-widget-width: 100% !important;
    --flex-shrink: 1 !important;
  }
}

/* ==================================================================
   6. MOBILE HORIZONTAL DRIFT
   Reported on a real phone: the page slid left/right while scrolling.
   Three separate causes, plus a root-level lock so nothing new can
   reintroduce it.
   ================================================================== */

/* 6a. Root lock. Nothing on this site is meant to scroll sideways.
       `clip` is preferred over `hidden` because it does not create a scroll
       container, so position:sticky keeps working. `hidden` is listed first
       as the fallback for older iOS Safari, which ignores `clip`.
       overscroll-behavior-x kills the iOS/Android sideways rubber-band that
       makes a page feel loose even when nothing actually overflows. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
}

/* (removed) body{position:relative} made body the containing block for the
   stretched mobile menu, and Elementor measures that menu's offset against the
   viewport, so the open menu sat 8px right of the screen edge. */

/* 6b. Carousel slides sit on a long horizontal track and depend on the swiper
       container to clip them. On /prather-row/ the slides reach 1458px inside
       a 744px viewport. Clip at the container, never at .swiper-wrapper, which
       is the element swiper translates to actually move the carousel. */
.swiper,
.swiper-container,
.elementor-swiper,
.elementor-main-swiper {
  overflow: hidden;
  max-width: 100%;
}

/* 6c. The ElementsKit off-canvas menu is parked at left:-100vw while closed,
       which on iOS can leave the document pannable sideways. */
.elementskit-menu-offcanvas-elements,
.ekit-nav-menu--overlay {
  max-width: 100vw;
}

/* 6d. The nav dropdown arrow overhangs the right edge by ~20px at some widths. */
.elementor-nav-menu .sub-arrow {
  max-width: 100%;
}

/* ==================================================================
   CLIENT-REQUESTED CHANGES (2026-09-16)
   These deliberately differ from the original koncept8.com.
   ================================================================== */

/* 7. Header inset. The header is a full-width Elementor section with
      column-gap:no, so the phone number sat flush against the left edge
      (its icon clipped) and Contact Us against the right. Inset the whole
      row so the logo stays centred and the nav keeps its own spacing. */
header.elementor-element-40af2b9f > .elementor-container {
  box-sizing: border-box;
  padding-left: clamp(24px, 4vw, 80px);
  padding-right: clamp(24px, 4vw, 80px);
}
@media (max-width: 767px) {
  header.elementor-element-40af2b9f > .elementor-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 8. One typeface. The original mixes Montserrat with Roboto (body copy,
      form fields, blog cards) and Saira Condensed (phone number, labels).
      Omran asked for Montserrat throughout. Every Montserrat weight 100-900
      is already self-hosted by the page. Icons are SVG or ::before pseudo-
      elements with their own font-family, which a universal selector does
      not reach, so they are untouched. */
:root {
  --e-global-typography-primary-font-family: "Montserrat";
  --e-global-typography-secondary-font-family: "Montserrat";
  --e-global-typography-text-font-family: "Montserrat";
  --e-global-typography-accent-font-family: "Montserrat";
}
body,
body *:not(svg):not(svg *):not(i):not(.eicon):not([class^="eicon-"]):not([class*=" eicon-"]):not(.ekit):not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: "Montserrat", sans-serif !important;
}

/* 9. Mobile type scale (client feedback: "something not right with the font
      on mobile"). Measured at phone width, the original's per-widget mobile
      settings were all over the place: the homepage headline was 18px while
      every other page's headline was 45-50px; body copy ran 12px to 20px at
      weights from 200 to 400; the three service cards on the homepage used
      three different description sizes (14, 13, 12px) in grey on taupe.
      Phone widths only. Desktop and tablet are untouched. */
@media (max-width: 767px) {
  /* homepage headline, in line with the other page headlines */
  .elementor-element-68a3038f .elementor-heading-title {
    font-size: 34px !important;
    line-height: 1.15 !important;
    color: #fff !important;
  }
  /* body copy: one readable size and weight */
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor li,
  .elementor-widget-text-editor .elementor-widget-container > div {
    font-size: 16px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }
  /* card descriptions: one size, darker so they read on the taupe */
  .elementor-cta__description {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #2f343a !important;
  }
  /* only the small stacked feature boxes (14px). The large intro icon-boxes
     ("What We Do", "Whether you are looking to build") are already 18-19px. */
  .elementor-view-stacked .elementor-icon-box-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* 10. Service headings (client feedback 2026-09-18: "the desktop version has
       certain wording/headings bolded, but that formatting is not carrying
       over to mobile"). On the four Services pages the section headings
       ("Plaster Services", "Kitchen Renovations", ...) are text-editor widgets,
       not <h> tags, set at 28px / weight 500 on desktop. Rule 9's body-copy
       reset caught them and flattened them to 16px / 400, the same as the
       paragraph under them. Restore them as headings on phones. Desktop runs
       these at 500 over 300 body copy; rule 9 lifts body to 400 on phones, so
       600 keeps the same step. The list is every text-editor widget on the
       site with a desktop weight of 500+. */
@media (max-width: 767px) {
  .elementor-element-051a171 p, .elementor-element-b28f49b p, .elementor-element-f897530 p,
  .elementor-element-2d73a02 p, .elementor-element-102f70a p, .elementor-element-8425e74 p,
  .elementor-element-43b857f p,
  .elementor-element-34d2590 p, .elementor-element-ca2e2b7 p, .elementor-element-a4825a3 p,
  .elementor-element-39c044f p, .elementor-element-52046f4 p {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
}

/* 11. Zig-zag rows on phones (2026-09-18). On desktop the Renovation and New
       Construction pages alternate photo-left/text-right, and the text beside
       a left photo is right-aligned to hug it. Phones stack every row, so
       those blocks ended up right-aligned on their own ("Room Additions").
       Left-align them on phones like every other block. This is every block
       measured right-aligned at 390px, not a guess from the stylesheets. */
@media (max-width: 767px) {
  .elementor-element-34d2590, .elementor-element-34d2590 p,
  .elementor-element-5d0bd49, .elementor-element-5d0bd49 p,
  .elementor-element-a4825a3, .elementor-element-a4825a3 p,
  .elementor-element-0ee3536, .elementor-element-0ee3536 p,
  .elementor-element-52046f4, .elementor-element-52046f4 p,
  .elementor-element-489c9fd, .elementor-element-489c9fd p,
  .elementor-element-2d73a02, .elementor-element-2d73a02 p,
  .elementor-element-fb4c34b, .elementor-element-fb4c34b p,
  .elementor-element-8425e74, .elementor-element-8425e74 p,
  .elementor-element-06b50f8, .elementor-element-06b50f8 p {
    text-align: left !important;
  }
}

/* 12. Mid-sentence line breaks (2026-09-18). build.py tags the three hard
       breaks in service descriptions as .k8-soft-br. Kept on desktop, where
       they were placed; dropped on phones, where they split a sentence. */
@media (max-width: 767px) {
  br.k8-soft-br {
    display: none;
  }
}