/* 
Theme Name: Hello Elementor Child - Experiment
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.0.0
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
*/

/* BEGIN Working with Gemini on Overrides 03272026 */
/* 1. Define your custom color variables */
:root {
  --rich-black: hsla(0, 0%, 2%, 1);
  --deep_iron_grey: hsla(45, 3%, 27%, 1);
  --burnt_sienna: hsla(27, 100%, 27%, 1);
  --charcoal: hsla(120, 1%, 20%, 1);
  --my-accent-color: #C0FFEE; /* Another example */
  --my-heading-color: var(--rich-black); /* You can even base variables on other variables */
  --e-global-color-primary: var(--rich-black);
}

/* 2. Use your custom color variables in your override rules */

/* For the h2 parent of the menu item (example selector) */
h2.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use your custom variable */
}

/* For the link within that h2 (example selector) */
h1.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use a different custom variable */
}

h2.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use a different custom variable */
}

h3.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use a different custom variable */
}

h3.elementor-heading-title.elementor-size-default a {
    color: var(--rich-black); /* Use a different custom variable */
}

h3.elementor-post__title a  {
    color: var(--rich-black); /* Use a different custom variable */
}

h4.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use a different custom variable */
}

h4.elementor-image-box-title: hover,
h4,elementor-image-box-title:has(focus){
    color: var(--burnt_sienna);
}
.elementor-widget-image-box:has(:hover) .elementor-image-box-title, .elementor-widget-image-box:has(:focus) .elementor-image-box-title {
    color: var(--burnt_sienna);
}

h5.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use a different custom variable */
}

h6.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use a different custom variable */
}

p.elementor-heading-title.elementor-size-default {
    color: var(--rich-black); /* Use a different custom variable */
}

/* For the h3 within the Elementor posts widget (example selector) */
.elementor-widget-posts .elementor-post__title h3 {
    color: var(--rich-black);
}

/* For the h5 within the Elementor heading widget (example selector) */
.elementor-widget-heading .elementor-heading-title {
    color: var(--rich-black);
}

.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a  {
    color: var(--rich_black);
}

.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus {
    color: var(--burnt_sienna);
}

.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon {
    color: var(--rich-black);
    border-color: var(--rich-black);
}

.elementor-widget-icon-list .elementor-icon-list-icon i {
    color: var(--burnt_sienna);
    border-color: var(--burnt_sienna);
}

.elementor-widget-icon-list .elementor-icon-list-icon iHover {
    color: var(--rich-black);
    border-color: var(--rich-black);
}

/* 2. Apply this variable to all heading tags */
h1, h2, h3, h4, h5, h6 {
    color: var(--rich-black);
}

/* 1. Define your custom font using @font-face, using the actual URLs */
@font-face {
  font-family: 'AlegreyaSansSC'; /* This is the name you'll use in font-family properties */
  src: url('https://bluecollarwebtech.com/wp-content/bcf-fonts/AlegreyaSansSC/AlegreyaSansSC-Regular.ttf') format('woff2'),
       url('https://bluecollarwebtech.com/wp-content/bcf-fonts/AlegreyaSansSC/AlegreyaSansSC-Regular.ttf') format('woff');
  font-weight: normal; /* Or 400, if regular */
  font-style: normal;
  font-display: swap;
}

/* Apply to body for general text */
body {
  font-family: 'AlegreyaSansSC', sans-serif;
}

/* Apply to all headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'AlegreyaSansSC', sans-serif;
    /* color: var(--my-heading-color); // Keep your custom color if desired */
}

/* Override Elementor's specific font settings where needed */

/* For Elementor's main heading widget */
.elementor-widget-heading .elementor-heading-title {
    font-family: 'AlegreyaSansSC', sans-serif;
}

/* For Elementor's text editor widget */
.elementor-widget-text-editor {
    font-family: 'AlegreyaSansSC', sans-serif;
}

/* For headings within Elementor's posts/loop widgets */
.elementor-widget-posts .elementor-post__title,
.elementor-widget-loop-grid .elementor-loop-item__title
{
    font-family: 'AlegreyaSansSC', sans-serif;
}


/* END Working with Gemini on Overrides 03272026 */

/* Add your custom styles here */

.elementor-button span {
    text-decoration: none;
}
.elementor-button span:hover {
  text-decoration: : none;
}
 
.elementor-posts .elementor-post__excerpt p{
  text-decoration: none;
  font-size: clamp(0.88rem, 0.74569rem + 0.55172vw, 1.13rem);
  line-height: 1.4em;
}

/* Enable or disable underline links */ 
a:link:hover { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }


/* Adjust the default Elementor Button Behavior */
.elementor-button {
    background-color: transparent;
    border-radius: 15px;
    text-decoration: none;
    color: transparent;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    /* padding: 12px 24px; */
    fill: #fff;
    text-align: center;
    transition: all .3s 
}

/* Override Elementor Defaults 
elementor-button-link {
	background-color: white;
}

elementor-size-sm {
	background-color: white;
}
elementor-element-c00913f {
	background-color: white;
}
*/

/* Rounded Corner Buttons */

.button {
  font-family: 'Poppins', regular; 
  font-size: 1rem;
  text-decoration: none;
  /* padding: 0.75em 1.5em; */
  /* order: none; */
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
  .elementor-button {
    border: 2px solid black;
    border-color: black;
    color: black;
}
  /*
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  */
}
.button-primary { 
  background-color: black;
  border: 2px solid; 
  border-color: black;
  border-radius: 10px; /* All corners rounded with a 10px radius */ 
  .elementor-button {
    color: white;
  }
}
.button-primary:hover {
  background-color: white;
  text-decoration: unset;
  border: 2px solid; 
  border-color: black;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    color: black;
  }
}
.button-outline {
  text-align: center;
  background-color: transparent;
  border: 2px solid; 
  border-color: black;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    color: #000000;
  } 
}
.button-outline:hover {
  background-color: black;
  text-decoration: none;
  .elementor-button {
    color: white;
  }
}

/* MODERN STYLE */
.mod-button-primary {
  background-color: #1f1f1f;
  text-decoration: none;
  border-radius: 10px;
  .elementor-button {
    border: 2px solid;

    border-color: #1f1f1f;
    color: white;
  }
}
.mod-button-primary:hover {
  background-color: white;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    background-color: white;
    color: #1f1f1f;
  }
}
.mod-button-outline {
  text-align: center;	
  background-color: white;
  border-color: #1f1f1f;
  .elementor-button {
    color: #1f1f1f;
  } 
}
.mod-button-outline:hover {
  background-color: #1f1f1f;
  text-decoration: none;
  .elementor-button {
    color: white;
  }
}

/* CLASSIC STYLE */
.cls-button-primary {
  background-color: #003366;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    border: 2px solid;
    border-color: #003366;
    color: white;
  }
}
.cls-button-primary:hover {
  background-color: white;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    background-color: white;
    color: #003366;
  }
}
.cls-button-outline {
  border-color: #003366;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
    .elementor-button {
      border: 2px solid;
      color: #003366 ;
  }
}
.cls-button-outline:hover {
  background-color: #003366;
  text-decoration: none;
  .elementor-button {
    color: white;
  }
}

/* INDUSTRIAL STYLE */
.ind-button-primary {
  background-color: #444444;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    border: 2px solid;
    border-radius: 10px;                  
    color: white;
  }
}
.ind-button-primary:hover {
  background-color: white;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    color: #444444;
  }
}
.ind-button-outline { 
  border-color: #444444;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    border: 2px solid;
    color: #444444;
  } 
}
.ind-button-outline:hover {
  background-color: #444444;
  text-decoration: none;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  .elementor-button {
    border: 2px solid;
    color: white;
  }
}

/* End Rounded Corner Buttons */

/* DeepSeek Button */

/* Copper Button Glow */  
/* Ensure that Elementor object settings are default. Colors or details will override this style */
/* You will go crazy trying to debug why the CSS is not working on the page if the object has modified settings */
/* The editor may not display changes made to the CSS or the object at all with these stylings, you need to check the page */
/* Optimize this! */
.copper-button {
  font-family: 'Poppins', regular; 
  background-color: #1A6BBA;
  border-color: #c77d4a;
  color: #c77d4a;
  border: 2px solid;
  border-radius: 10px; /* All corners rounded with a 10px radius */
  /* text-decoration: none; */
  .elementor-button {
    font-size: 1.1rem;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    color: #c77d4a;
    fill: #c77d4a;
    border-color: #c77d4a;
    border: 2px solid;
    border-radius: 10px; /* All corners rounded with a 10px radius */
  }
}

.copper-button:hover {  
  color: #c77d4a;
  animation: copper-glow 1.5s infinite alternate;
  .elementor-button:hover {
    color: #c77d4a;
    fill: #c77d4a;;
  }  
}  
@keyframes copper-glow {  
  from { box-shadow: 0 0 10px rgba(199, 125, 74, 0.6); }  
  to { box-shadow: 0 0 20px rgba(199, 125, 74, 0.9); }  
}  

.copper-button:focus {
  color: #c77d4a;
  animation: copper-glow 1.5s infinite alternate;
  .elementor-button:hover {
    color: #c77d4a;
    fill: #c77d4a;;
  }  
}


/* Claude fill button */
/* Doesn't function properly. Fills container, overlay doesn't fill button */
.copper-button-c {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #1A6BBA;
  color: #c77d4a;
  border: 2px solid #c77d4a;
  border-radius: 10px;
  padding: 0.8em 1.5em;
  position: relative;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Creating pseudo-element for the fill effect */
.copper-button-c::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%; /* Slightly wider to ensure full coverage */
  height: 150%; /* Slightly taller to ensure full coverage */
  background-color: #c77d4a;
  z-index: -1;
  transform: translateX(-100%) translateY(100%) rotate(45deg);
  transition: transform 0.6s ease;
}

/* Hover state - transforms the fill to cover the button */
.copper-button-c:hover {
  color: #1A6BBA; /* Text color changes when background fills */
}

.copper-button-c:hover::before {
  transform: translateX(-30%) translateY(0%) rotate(45deg);
}

/* End Claude fill button */
/* For Elementor compatibility */
.elementor .copper-button-c,
.elementor-button.copper-button-c {
  color: #c77d4a;
  fill: #c77d4a;
}

.elementor .copper-button-c:hover,
.elementor-button.copper-button-c:hover {
  color: #1A6BBA;
  fill: #1A6BBA;
}



/* End claud fill button */
.def-button-primary {
  text-align: center; 
  border-radius: 2em 20px 2.5em 0.2in;
  background-color: blue;
}
.def-button-primary .elementor-button {
    color: white;
}

.one-round-corner {
  text-align: center; 
  border-top-left-radius: 15px;
  background-color: blue;
  color: white;
}
.one-round-corner .elementor-button {
  color: white;
}

.elliptical-corner {
  text-align: center; 
  border-top-left-radius: 20px 60px;
  background-color: blue;
  color: white;
  .elementor-button {
    color: white;
  }
}
.elliptical-corner-four {
  text-align: center; 
  border-top-left-radius: 50px 20%;
  border-top-right-radius: 50px 20%;
  border-bottom-right-radius: 50px 20%;
  border-bottom-left-radius: 50px 20%;
  background-color: blue;
  color: white;
  .elementor-button {
    color: white;
  }
}

.elliptical-arc {
  text-align: center; 
  border-radius: 60px 40px 20px 10px / 21px 49px 27px 7px;
  background-color: blue;
  color: white;
  .elementor-button {
    color: white;
  }
}

.notched-corner {
  text-align: center; 
  background-color: blue;
  color: white;
  overflow: hidden;
  .elementor-button {
    color: white;
  }
}
.notched-corner:before {
  content: "";
  position: absolute;
  margin: -20px;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background-color: white;
  box-shadow: 0 0 0 250px blue;

}

.notched-4-corner {
  text-align: center; 
  background-color: blue;
  color: white;
  .elementor-button {
    color: white;
  }
  overflow: hidden;
  clip-path: polygon(
    0 20%,
    10% 0,
    90% 0,
    100% 20%,
    100% 80%,
    90% 100%,
    10% 100%,
    0% 80%
  )
}

.notched-2-corn-ul-lr {
  text-align: center; 
  background-color: blue;
  color: white;
  .elementor-button {
    color: white;
  }
  clip-path: polygon(
    0 20%,
    10% 0,
    100% 0,
    100% 80%,
    90% 100%,
    0% 100%
  )
}

.notched-2-corn-ll-ur {
  text-align: center; 
  background-color: blue;
  color: white;
  .elementor-button {
    color: white;
  }
  clip-path: polygon(
    0 100%,
    90% 100%,
    100% 80%,
    100% 0,
    10% 0,
    0% 20%

  )
}

.scooped-corner {
  text-align: center; 
  position: absolute;
  background-color: blue;
  color: white;
  .elementor-button {
    color: white;
  }
  /* scoop bottom both sides works */
  mask: radial-gradient(10px at 40px 40px, transparent 98%, black) -40px 0px; 
  /* scoop top both sides fails */
 /* mask: radial-gradient(20px at 40px 40px, transparent 98%, black) -40px -10px; */
}

/*
.scooped-corner:before {
  content: "";
  position: absolute;
  margin: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%; 
  box-shadow: 0 0 0 250px #white;
}
*/
.inverted-corner {
  text-align: center; 
  position: relative;
  width: 200px;
  height: 60px;
  background: blue;
  .elementor-button {
    color: white;
  }
}

.inverted-corner:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  height: 40px;
  width: 40px;
  border-bottom-left-radius: 50%;
  background-color: white;
  box-shadow: 0 20px 0 0 blue;
}

.inverted-corner-bubble {
  text-align: center; 
  position: relative;
  width: 200px;
  height: 60px;
  background: blue;
  border-radius: 0 15px 15px 15px;
  .elementor-button {
    color: white;
  }
}

.inverted-corner-bubble:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  height: 40px;
  width: 40px;
  border-bottom-left-radius: 50%;
  background-color: white;
  box-shadow: 0 20px 0 0 blue;
}

.drop-corner-bubble {
  text-align: center;
  position: relative;
  width: 200px;
  height: 60px;
  background: blue;
  border-radius: 15px 15px 0 15px;
}

.drop-corner-bubble .elementor-button {
  color: white;
}
.drop-corner-bubble:before {
  content: "";
  position: absolute;
  bottom: -40px;
  right: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 50%;
  background-color: white;
  box-shadow: 0 -20px 0 0 blue;
}

/* Text Bubble */

/* Base CSS class */
.bubble-corner {
  text-align: center;
  position: relative;
  width: 200px;
  height: 60px;
  background: blue;
  border-radius: 15px;
  /* overflow: hidden; /* Ensures pseudo-elements behave nicely */
}

/* Optional: Style buttons inside */
.bubble-corner .elementor-button {
  color: white;
}

/* Unique Shapes - TL/TR/BL/BR for different look and feel */

.bubble-corner-top-left::before {
  /* Usage: class = bubble-corner bubble-corner-top-left */
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  height: 40px;
  width: 40px;
  border-bottom-left-radius: 50%;
  background-color: white;
  box-shadow: 0 20px 0 0 blue;
  z-index: 2;
}

/* Play with this one it's a duplicate 
   Sort out why it is hidden under the bubble-corner class*/
.bubble-corner-top-left2::before {
  /* Usage: class = bubble-corner bubble-corner-top-left */
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  height: 30px;
  width: 40px;
  border-bottom-left-radius: 50%;
  background-color: white;
  box-shadow: 0 20px 0 0 blue;
  
}

.bubble-corner-top-right::before {
  /* Usage: class = bubble-corner bubble-corner-top-right */
  content: "";
  position: absolute;
  top: -40px;
  right: 0;
  height: 40px;
  width: 40px;
  border-bottom-right-radius: 50%;
  background-color: white;
  box-shadow: 0 20px 0 0 blue;
}

.bubble-corner-bottom-left::before {
  /* Usage: class = bubble-corner bubble-corner-bottom-left */
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  height: 40px;
  width: 40px;
  border-top-left-radius: 50%;
  background-color: white;
  box-shadow: 0 -20px 0 0 blue;
  z-index: 2;
}

.bubble-corner-bottom-right::before {
  /* Usage: class = bubble-corner bubble-corner-bottom-right */
  content: "";
  position: absolute;
  bottom: -40px;
  right: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 50%;
  background-color: white;
  box-shadow: 0 -20px 0 0 blue;
}