/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

html, body {
  max-width: 100% !important;
  overflow-x: clip;
}

body {
  --link-color: var(--e-global-color-secondary);
  --link-color-hover: var(--e-global-color-primary);

  /** "card" image size **/
  --image-size: 200px;
}

a {
  --_link-color: var(--link-color, rgb(204, 51, 102));
  --_link-color-hover: var(--link-color-hover, rgb(204, 51, 102));
  color: var(--_link-color);

  &:hover,
  &:focus-within {
    color: var(--_link-color-hover);
  }
}

/* Custom navigation bg colors for the menu items hover and active with custom css class "customnav"
 *
 * actually, set classes on the items instead of assuming they'll stay in the same location in the menu,
 * and target based on the fact that it's the header nav.
 *
 *  */

header nav {
  .menu-item {
    --_active-background-color: var(--active-background-color, var(--e-global-color-03b1b0d));
    --_active-text-color: var(--active-text-color, var(--e-global-color-text));
	  --border-radius: 5px;

    &.heating {
      --active-background-color: var(--e-global-color-primary);
      --active-text-color: var(--e-global-color-neutral-light);
    }

    &.cooling {
      --active-background-color: var(--e-global-color-secondary);
      --active-text-color: var(--e-global-color-neutral-light);
    }

    &:has( > .elementor-item-active) a,
    a:hover,
    a:focus-within {
      background-color: var(--_active-background-color) !important;
	  border-radius: var(--border-radius);
      color: var(--_active-text-color);
      /** bodge because Elementor has super specific styles for its menu items. this sets the global text color, but only for hovered or active menu items.  */
      --e-global-color-text: var(--_active-text-color);
    }

  }
}

footer {
  --link-color: var(--e-global-color-neutral-light);
}

/* Second child of main menu for HEATING services page */
/* .customnav li:nth-child(2) > .elementor-item:hover,
.customnav .elementor-nav-menu--dropdown li:nth-child(2) > .elementor-item:hover,
.customnav li:nth-child(2) > .elementor-item.elementor-item-active,
.customnav li:nth-child(2).current-menu-item > .elementor-item {
  background-color: #FF7613 !important;
  color: #E6E7E8 !important;
} */

/* Third child of main menu for COOLING services page */
/* .customnav li:nth-child(3) > .elementor-item:hover,
.customnav .elementor-nav-menu--dropdown li:nth-child(3) > .elementor-item:hover,
.customnav li:nth-child(3) > .elementor-item.elementor-item-active,
.customnav li:nth-child(3).current-menu-item > .elementor-item {
  background-color: #0ABBF5 !important;
  color: #E6E7E8 !important;
}
 */

[class*="owm-elementor-section-"] {
  @media (max-width: 1024px) {
    --section-padding: 2rem;
  }

  @media (max-width: 767px) {
    --section-padding: 1rem;
  }

  .elementor-widget-rating {
    filter: drop-shadow(0px 0px 3px var(--owm-color-dark));
  }
}

[class*="owm-elementor-section-"].pattern {
  --_pattern-color: var(--pattern-color, var(--owm-color-light));
  --_pattern-opacity: var(--pattern-opacity, .2);
  --_pattern-size: var(--pattern-size, 160px);

  &.dark {
    --pattern-color: var(--owm-color-dark);
  }

  &::before {
    content: '';
    background-color: var(--_pattern-color);
    mask-image: url(/wp-content/uploads/2025/10/yurtek-pattern-repeatable.svg);
    mask-image: url(/wp-content/uploads/2025/11/yurtek-pattern-repeatable-3.svg);
    mask-size: var(--_pattern-size);
    opacity: var(--_pattern-opacity);
  }
}

/** duplicate the mask-right class to increase specificity */
div[class*="owm-elementor-section-"].mask-right.mask-right {
  --_mask-bg-grid-column-start: var(--mask-bg-grid-column-start, full-start);
  --_mask-bg-grid-column-end: var(--mask-bg-grid-column-end, content-end);
  --_mask-bg-grid-row-start: var(--mask-bg-grid-row-start, full-start);
  --_mask-bg-grid-row-end: var(--mask-bg-grid-row-end, full-end);
  --_mask-grid-column-start: var(--mask-grid-column-start, full-start);
  --_mask-grid-column-end: var(--mask-grid-column-end, image-end);
  --_mask-offset-left: var(--mask-offset-left, clamp(10px, 3vw, 40px));
  --_mask-border-radius: var(--mask-border-radius, calc(var(--_mask-offset-left) + 1vw));
  --_image-align-self: var(--image-align-self, flex-end);

  --display: grid;
  --e-con-grid-template-columns: [full-start] minmax(10px, 1fr) [content-start] minmax(min-content, calc(var(--content-width)  * 2/3 )) [content-end image-start] minmax(min-content, calc(var(--content-width) * 1/3)) [image-end] minmax(var(--_mask-offset-left), 1fr) [full-end];
  --e-con-grid-template-rows: [full-start content-start image-start] 1fr [image-end content-end full-end];
  /*--e-con-grid-template-columns: [full-width-start] minmax(10px, 1fr) [content-start content-lt-start] minmax(min-content, calc(var(--content-width) * 1/3)) [content-lt-end content-ct-start] minmax(min-content, calc(var(--content-width) * 1/3)) [content-ct-end content-rt-start] minmax(min-content, calc(var(--content-width) * 1/3)) [content-rt-end content-end] minmax(var(--_mask-offset-left), 1fr) [full-width-end];*/
  /*--e-con-grid-template-rows: [full-height-start content-start image-start image-top-start] 100px [image-top-end image-bottom-start] 100px [image-bottom-end image-end image-fill-start] 1fr [image-fill-end content-end full-height-end];*/
  --gap: 0px 0px;
  --row-gap: 0;
  --column-gap: 0;
  --grid-auto-flow: row;
  --padding-left: 0;
  --padding-right: 0;

  @media screen and (max-width: 800px) {
    --e-con-grid-template-columns: [full-start] minmax(10px, 1fr) [content-start image-start] auto [image-end content-end] minmax(10px, 1fr) [full-end];
    --e-con-grid-template-rows: [full-start content-start] auto [content-end image-start image-top-start] 1fr [image-top-end image-bottom-start] 1fr [image-bottom-end image-end full-end];

    --image-align-self: center;
    --mask-bg-grid-row-start: full-start;
    --mask-bg-grid-row-end: image-top-end;
    --_mask-bg-grid-column-end: full-end;

    &::before {
      display: none;
    }

    &::after {
      top: calc(-1 * var(--padding-block-start)) !important;
    }

    .elementor-icon,
    .elementor-widget-image img {
      max-width: 30vw;
      min-width: 120px;
      /** the 'after' doesn't show up for images, because img tags can't have pseudo elements. add a class like `rhombus primary` to get somethin'. **/
      &::after:not(.elementor-element-edit-mode &::after) {
        --r: 20px; /* the radius */

        --_g: / calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
        --_s: calc(100% - (1 - tan(22.5deg)) * var(--r));

        content: '';
        display: block;
        background: var(--_section-background-color); /*var(--_section-background-color);*/
        position: absolute;
        inset: calc((-1 * tan(22.5deg) * var(--r)) - 20px);
        z-index: -1;

        aspect-ratio: 1;
        margin: calc(tan(22.5deg) * var(--r));
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) margin-box;

        mask: conic-gradient(#000 0 0) no-repeat 50%/var(--_s) var(--_s),
        top var(--_g) no-repeat space, left var(--_g) space no-repeat;
        translate: 0 -10px;

      }
    }
  }

  /** override background color's use of variable to preserve variable for use later */
  background-color: transparent;
  overflow: clip;

  /* create an element to sit behind the content and hide the left side of the masky rhombus */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    grid-column: var(--_mask-bg-grid-column-start) / var(--_mask-bg-grid-column-end);
    grid-row: var(--_mask-bg-grid-row-start) / var(--_mask-bg-grid-row-end);
    background: var(--_section-background-color);
    z-index: -1;
  }

  /* create an element that will be sized and rotated and moved to be the pointy side */
  &::before {
    content: '';
    position: absolute;
    background: var(--_section-background-color);

    /* make sure this is a square that is as tall as the width it takes up */
    grid-column: var(--_mask-grid-column-start) / var(--_mask-grid-column-end);
    height: auto;
    aspect-ratio: 1;

    /* position it vertically centered */
    top: 50%;
    translate: 0 -50%;

    /* rotate 45 degrees */
    transform-origin: center center;
    rotate: 45deg;

    /* pull it to the left */
    left: calc(-20.71% + var(--_mask-offset-left));

    /* radius the border, completing the illusion */
    border-radius: var(--_mask-border-radius);
  }

  > :nth-child(1 of .elementor-element) {
    --align-self: center;
    grid-area: content;
  }

  > :nth-child(2 of .elementor-element) {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --align-self: center;

    grid-area: image;
    container-type: inline-size;
  }

  /* make sure the image is all the way to the right so that our offsets are reliable */
  .elementor-widget-image,
  .elementor-widget-icon {
    --align-self: var(--_image-align-self);
    margin: var(--_image-margin);
    height: auto;
    /*aspect-ratio: 1;*/
    display: flex;
    justify-content: flex-end;
    > .elementor-icon-wrapper {
      width: clamp(100px, 100%, 250px);
    }

    * {
      width: 100%;
      height: 100%;
    }

    @media screen and (min-width: 801px) {
      width: 100cqi;
    }
  }

  .elementor-image,
  .elementor-icon {
    display: block;
  }
}

.owm-elementor-section-primary,
.owm-elementor-section-primary-dark,
.owm-elementor-section-secondary,
.owm-elementor-section-secondary-dark {
  --link-color: var(--e-global-color-text);
  --link-color-hover: var(--section-text-color);
}

.owm-elementor-section-primary-light,
.owm-elementor-section-secondary-light {
  --link-color: var(--e-global-color-neutral-light);
  --link-color-hover: var(--section-text-color);
}

.owm-elementor-section-neutral-white,
.owm-elementor-section-neutral-transparent {
  --section-heading-color: var(--e-global-color-text);
}



/** Rhombus for masking images
  * Border width, margin, and padding can be set per-image by setting
  * --border-outer-width, --border-middle-width, --border-inner-width, etc.
  * (without the _ at the beginning)
  */

.rhombus {
  --_border-width-outer: var(--border-width-outer, 5px);
  --_border-width-middle: var(--border-width-middle, 0px);
  --_border-width-inner: var(--border-width-inner, 0px);
  --_image-margin: var(--image-margin, 10px);
  --_image-padding: var(--image-padding, 0px);
  --_clip-path: var(--clip-path, url("#rh-mask"));

  --_icon-color: var(--icon-color, var(--e-global-color-a96b984));
  --_border-color-outer: var(--border-color-outer, var(--e-global-color-a96b984));
  --_border-color-middle: var(--border-color-middle, var(--e-global-color-secondary));
  --_border-color-inner: var(--border-color-inner, var(--e-global-color-a96b984));
  --_padding-total: calc(var(--_image-padding) + var(--_border-width-outer) + var(--_border-width-middle) + var(--_border-width-inner));
  --_text-color: var(--text-color, var(--e-global-color-text));

  &.elementor-widget-image {
    --align-self: center;
  }

  background-color: var(--_border-color-outer);
  color: var(--_text-color);
  padding: var(--_padding-total);
  margin: var(--_image-margin);
  aspect-ratio: 1;
  position: relative;
  isolation: isolate;
  clip-path: var(--clip-path-outer, var(--_clip-path));

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: var(--_border-width-outer);
    background-color: var(--_border-color-middle);
    z-index: 1;
    clip-path: var(--clip-path-inner, var(--_clip-path));
  }

  &::after {
    z-index: 2;
    inset: calc(
        var(--_border-width-outer) + var(--_border-width-middle)
    );
    background-color: var(--_border-color-inner);
  }

  img,
  svg {
    position: relative;
    max-width: 100%;
    z-index: 100;
    display: inline-block;
  }

  img {
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    width: 100%;
    clip-path: var(--clip-path-image, var(--clip-path-inner, var(--_clip-path)));
  }

  svg {
    fill: var(--_icon-color);
  }

  &:has(> .elementor-element) {
    align-items: center;

    &::before {
      z-index: 3;
    }
  }

  > .elementor-element {
    position: relative;
    z-index: 100;
    max-width: 75% !important;
  }
}

.rhombus.primary {
  --border-color-middle: var(--e-global-color-primary);
  --icon-color: var(--e-global-color-primary);
  --shadow-color: var(--e-global-color-primary);
  --text-color: var(--e-global-color-text-primary);
}

.rhombus.secondary {
  --border-color-middle: var(--e-global-color-secondary);
  --icon-color: var(--e-global-color-secondary);
  --shadow-color: var(--e-global-color-secondary);
  --text-color: var(--e-global-color-text-secondary);
}

.rhombus.neutral {
  --border-color-middle: var(--e-global-color-03b1b0d);
  --icon-color: var(--e-global-color-03b1b0d);
  --shadow-color: var(--e-global-color-03b1b0d);
  --text-color: var(--e-global-color-text-neutral);
}

.rhombus:not(.shadow):where(.primary, .secondary, .neutral) {
  --border-width-middle: 7px;
  --border-width-inner: 5px;
}

.rhombus.shadow {
  --border-width-outer: 0px;
  --border-color-outer: transparent;
  --clip-path-outer: none;
  --_translate: var(--translate, 50%);
  --_shadow-color: var(--shadow-color, color-mix(in sRGB, #fff, transparent 40%));

  &.left {
    --translate: -50%;
  }

  &::after {
    transform: translateX(var(--_translate));
    background: var(--_shadow-color);
  }
}

.image-card {
  /* image margin is for the rhombus */
  --image-margin: 5px;
  --_image-size: var(--image-size, 150px);
  --_image-max-width: 35cqw;
  --_image-clamp: clamp(150px, var(--_image-size), var(--_image-max-width));
  --_image-size-calc: calc(var(--_image-clamp) / 2);
  --_image-row: var(--image-row, image);
  --_image-column: var(--image-column, image);

  --_header-color-background: var(--header-color-background, var(--e-global-color-0a4ca3a));
  --_header-color-text: var(--header-color-text, #fff);
  --_header-column: var(--header-column, header);
  --_header-row: var(--header-row, header);
  --_header-bg-column: var(--header-bg-column, wrapper);
  --_header-bg-row: var(--header-bg-row, header);
  --_header-flex-align-self: var(--header-flex-align-self, flex-end);

  --_content-color-background: var(--content-color-background, var(--e-global-color-03b1b0d));
  --_content-color-text: var(--content-color-text, var(--e-global-color-text));
  --_content-column: var(--content-column, content);
  --_content-row: var(--content-row, content);
  --_content-bg-column: var(--content-bg-column, wrapper);
  --_content-bg-row: var(--content-bg-row, content);

  --_card-border-radius: var(--card-border-radius, 5px);

  --display: grid;
  --e-con-grid-template-columns: [image-start] var(--_image-size-calc) [wrapper-start] var(--_image-size-calc) [image-end header-start content-start] auto [header-end content-end wrapper-end] !important;
  --e-con-grid-template-rows: [image-start header-start wrapper-start] minmax(max-content, var(--_image-size-calc)) [header-end content-start] var(--_image-size-calc) [image-end] 1fr [content-end wrapper-end] !important;

  --gap: 1em 0em;
  --row-gap: 1em;
  --column-gap: 0em;
  --grid-auto-flow: row;

  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;

  &:has(.elementor-widget-icon) {
    --image-padding: 20px;
  }

  &:has(.elementor-widget-icon:not(.primary, .secondary, .neutral)) {
    --icon-color: var(--e-global-color-primary);
    --border-color-middle: var(--e-global-color-primary);
    --border-width-middle: 5px;
  }

  position: relative;
  isolation: isolate;
  container: image-card / inline-size;

  /* ok this selector is kind of crazy but it's so i can avoid an extra wrapping element
     because css containers can't query themselves:
       &::before,
      > .e-con-inner::before,
      &::after,
      > .e-con-inner::after,
      > .elementor-widget-image,
      > .e-con-inner > .elementor-widget-image,
      > .elementor-widget-icon,
      > .e-con-inner > .elementor-widget-icon,
      > .e-con:nth-child(1 of .e-con),
      > .e-con-inner > .e-con:nth-child(1 of .e-con),
      > .e-con:nth-child(2 of .e-con),
      > .e-con-inner > .e-con:nth-child(2 of .e-con) {

      Alternatively, we can just say "you have to use the 'boxed' width value, because Elementor
      puts an e-con-inner element in on boxed items.
   */

  > .e-con-inner {
    @container (max-width: 450px) {
      --_header-bg-row: header-start / image-end;
      --_header-row: header-start / image-end;
      --_header-flex-align-self: center;
      --_content-bg-row: image-end / content-end;
      --_content-row: image-end / content-end;
      --_content-column: wrapper-start / content-end;

		/* the :not() bit is to make sure we don't catch the second dog photo. there may be a better way to get the second container though. */
      .e-con:nth-child(2 of .e-con:not(:has(> .rhombus))) {
        --padding-left: 1.5em;
        --padding-right: 1.5em;
      }
    }
  }

  > .e-con-inner {
    position: relative;
    isolation: isolate;
  }

  &::before,
  > .e-con-inner::before,
  &::after,
  > .e-con-inner::after {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  &::before,
  > .e-con-inner::before {
    background-color: var(--_header-color-background);
    border-radius: var(--_card-border-radius) var(--_card-border-radius) 0 0;
    grid-row: var(--_header-bg-row);
    grid-column: var(--_header-bg-column);
  }

  &::after,
  > .e-con-inner::after {
    background-color: var(--_content-color-background);
    border-radius: 0 0 var(--_card-border-radius) var(--_card-border-radius);
    grid-row: var(--_content-bg-row);
    grid-column: var(--_content-bg-column);
  }

  &:has(> .e-con-inner) {
    > .e-con-inner::before,
    > .e-con-inner::after {
      content: '';
    }
  }


  &:not(:has(> .e-con-inner)) {
    &::before,
    &::after {
      content: '';
    }
  }

  > .elementor-widget-image,
  > .e-con-inner > .elementor-widget-image,
  > .elementor-widget-icon,
  > .e-con-inner > .elementor-widget-icon {
    align-self: center;
    grid-row: var(--_image-row);
    grid-column: var(--_image-column);
  }

  > .e-con:nth-child(1 of .e-con),
  > .e-con-inner > .e-con:nth-child(1 of .e-con) {
    grid-row: var(--_header-row);
    grid-column: var(--_header-column);
    align-self: var(--_header-flex-align-self);
    color: var(--_header-color-text);

    .elementor-widget-heading:nth-child(1) .elementor-heading-title {
      font-family: var(--e-global-typography-f916a4f-font-family), Sans-serif;
      font-size: var(--e-global-typography-f916a4f-font-size);
      line-height: var(--e-global-typography-f916a4f-line-height);
    }

    .elementor-widget-heading:nth-child(2) .elementor-heading-title {
      font-family: var(--e-global-typography-5a9c92e-font-family), Sans-serif;
      font-size: var(--e-global-typography-5a9c92e-font-size);
      font-weight: var(--e-global-typography-5a9c92e-font-weight);
    }
  }

  > .e-con:nth-child(2 of .e-con),
  > .e-con-inner > .e-con:nth-child(2 of .e-con) {
    grid-row: var(--_content-row);
    grid-column: var(--_content-column);
    color: var(--_content-color-text);

    p:last-child {
      margin-bottom: 0;
    }

    .elementor-widget:last-child {
      margin-bottom: 10px;
    }

    .elementor-widget-button:last-child {
      margin-bottom: 16px;
    }
  }
}

.elementor-button-primary,
.elementor-button-secondary {
  --_lighten-factor: 1.75;
  --owm-color-light: hsl(from var(--owm-color-base) h s calc(l * var(--_lighten-factor)));
  --e-owm-button-color-hover: var(--owm-color-base);

  &:hover {
    --e-owm-button-border-color: var(--owm-color-base);
  }

  /*   --_e-owm-button-background: var(--e-owm-button-background, var(--_owm-color-translucent));
    --_e-owm-button-background-hover: var(--e-owm-button-background-hover, var(--_owm-color-base));
    --_e-owm-button-color: var(--e-owm-button-color, var(--_owm-color-text));
    --_e-owm-button-color-hover: var(--e-owm-button-color-hover, var(--_owm-color-text));
    --_e-owm-button-color-translucent: var(--e-owm-button-color-translucent, invert(var(--_owm-color-text)));
    --_e-owm-button-border-color: var(--e-owm-button-border-color, transparent);


    --_owm-color-light: var(--owm-color-light, color-mix(in srgb, var(--_owm-color-base), #fff 25%));

    --e-owm-button-border-color: var(--_e-owm-button-background-dark);
    --e-owm-button-background-hover: #fff;
    --_e-owm-button-color-hover: var(--_e-owm-button-background-base); */
}

.elementor-button-secondary {
  --_lighten-factor: 1.95;
}

.elementor-button-white-primary {
  /* 	--e-owm-button-background-dark: hsl(from var(--e-global-color-primary) h s calc(l * .85) ); */
}

.elementor-owm-button.elementor-owm-button:not([class*="white-"]) {
  /*   --e-owm-button-background: var(--e-owm-button-background-base); */
  /*   --e-owm-button-background-hover: var(--e-owm-button-background-light); */
}

.elementor-button,
a.elementor-button {
  font-family: var(--e-global-typography-d24c4b5-font-family), Sans-serif;
  font-size: var(--e-global-typography-d24c4b5-font-size);
  font-weight: var(--e-global-typography-d24c4b5-font-weight);
  text-transform: var(--e-global-typography-d24c4b5-text-transform);
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.35);
  border-radius: 5px 5px 5px 5px;
  padding: 15px 25px 15px 25px;
}

header .elementor-button, header a.elementor-button {
  box-shadow: none;
}

[class*="owm-elementor-section-"] > .e-con-inner > .elementor-widget-button:last-child {
  margin-bottom: 1em;
}

.elementor-form {
  --_e-owm-button-background: var(--e-global-color-primary);
  --_e-owm-button-color: var(--e-global-color-text-primary);
  --_e-owm-button-background-hover: color-mix(in srgb, var(--e-owm-button-background, var(--_e-owm-button-background)), #fff 25%);
  --_e-owm-button-color-hover: var(--e-global-color-text-primary);

  .elementor-field-group .elementor-button {
    background-color: var(--e-owm-button-background, var(--_e-owm-button-background));
    color: var(--e-owm-button-color, var(--_e-owm-button-color));

    &:hover {
      background-color: var(--e-owm-button-background-hover, var(--_e-owm-button-background-hover));
      color: var(--e-owm-button-color-hover, var(--_e-owm-button-color-hover));
    }
  }
}