/*
 Theme Name:   Bricks
 Theme URI:    https://dmcretive.pro/
 Description:  Bricks
 Author:       DMCpro
 Author URI:   https://dmcreative.pro/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
 CSS Author:   Vlatko Mitov
 Date: 06.01.2024
*/

/* 
 Sections naming on the web site
 Home page: 
	MAIN HERO Section
	.main-hero__
	PROJECTS Section
	.project__
	CONTACT Section
	.contact__
	CTA
	.cta__
 
 About us page:
	ABOUT HERO Section
	.about-hero__

 Contact page:
	CONTACT HERO Section
	.contact-hero__

 Projects page:
	PROJECTS HERO Section
	.project-hero__
 
*/

/*
 * VARIABLES
 * 
 * Root Font Size is 100%
 * 
 */

:root {

/* FONTS */
	
	/* Main Font Family */
	--body-font-family: "Fira Sans Extra Condensed", sans-serif;
	
	/* Headings Font Style */
	--heading-font-weight: 900;

	/* Titles Font Style */
	--h-title-font-weight: 700;

	
/* FONTS SIZE */

/* 
 * TEXT SIZE SCALE
 * https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs,s,m,l,xl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 
 * 
 */

    --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);


/*
 * HEADING SIZE SCALE
 * https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6,5,4,3,2,1,title&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900
 * 
 */

    --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
    --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
    --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
    --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
    --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
    --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
    --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);

	
/*
 * MAIN HERO SIZE SCALE
 * 
 */
/*	--heading-xl: clamp(1.56rem, 9.28vw + -0.76rem, 6.67rem);*/

	--heading-xs: clamp(1.38rem, 4.93vi + 0.4rem, 4.34rem);
	--heading-s: clamp(1.56rem, 6.09vi + 0.34rem, 5.21rem);
	--heading-m: clamp(1.75rem, 7.5vi + 0.25rem, 6.25rem);
	--heading-l: clamp(1.97rem, 9.22vi + 0.13rem, 7.5rem);
	--heading-xl: clamp(2.21rem, 11.31vi + -0.05rem, 9rem);
/*
 * PAGE TITLES SCALE
 * 
 */
	
	--title-xs: clamp(0.89rem, 2.86vw + 0.32rem, 2.6rem);
	--title-s: clamp(1rem, 3.54vw + 0.29rem, 3.13rem);
	--title-m: clamp(1.13rem, 4.38vw + 0.25rem, 3.75rem);
	--title-l: clamp(1.27rem, 5.39vw + 0.19rem, 4.5rem);
	--title-xl: clamp(1.42rem, 6.63vw + 0.1rem, 5.4rem);

/* FONTS WEIGHT */

	--font-xlight_weight: 100;
	
	
	
/* --------------------------------------------------------------
 * BOX
 * 
/*

/* BOX Design Variables
 * GLOBAL Variables on website root - video PB101 L07
 * 
 */

	--radius: clamp(1rem, 1.042vw + 0.667rem, 2rem); /* Border radius for all elements 2rem max - 1rem min */ 
	--section-block-padding: clamp(5rem, 8.333vw + 3.333rem, 10rem); /* Section block padding */
	--section-inline-padding: clamp(2.4rem, 6vw + 1.2rem, 6rem); /* Section inline padding */
	--container-block-padding: clamp(1rem, 0.833vw + 0.833rem, 1.5rem); /* Container block padding */
	--container-inline-padding: clamp(1rem, 0.833vw + 0.833rem, 1.5rem); /* Container block padding */
	--container-width: 1280px; /* Container width on the page */

	--p-padding-top: clamp(1rem, 0.521vw + 0.833rem, 1.5rem);
	--p-padding-bottom: clamp(1.17rem, 1.53vw + 0.86rem, 2.08rem);
	--p-margin-top: ;
	--p-margin-bottom: clamp(0.78rem, 2.18vw + 0.34rem, 2.08rem); /* 25px to 10px */
	

	
/*
 * LINE Design Variables
 * 
 */
	/* Text line height*/
	--line-height-xl: 1.4; /* Line height sizes */
	--line-height-l: 1.5;
	--line-height-m: 1.5;
	--line-height-s: 1.6;
	--line-height-xs: 1.7;
	
	/* Heading line height */
	--line-height-h1: 1.1;
	--line-height-h2: 1.2;
	--line-height-h3: 1.3;
	--line-height-h4: 1.4;
	--line-height-h5: 1.5;
	--line-height-h6: 1.6;
	--line-height-h-title: 1.05;
	
	
	
/*
 * Border style
 * 
 */
	/* Global */
	--border-size: 1px;
	--border-style: solid;
	
	/* Divider style */
	
/* --------------------------------------------------------------
 * COLOR
 * 
 */
	/* COLOR Design Variables - format: hsla */
	/* Global */
	--primary: ;
	--secondary: ;
	--warning: ;
	--danger: ;
	--success: ;
	
	--light: #ffffff ;
	--dark: #333333;

	--white-trans-20: #ffffff;
	--black-trans-20: #777777;

	
	/* Local */
	/* FONT ---------------- */
	
	--subhead-light: red;
	--subhead-dark: gray;
	
	/* BUTTONS ---------------- */
	
	/* pulse button */
	--pulse-button-h: 46.023;
	--pulse-button-s: 100%;
	--pulse-button-l: 66%;
	--pulse-button-a: 0.5;
	--pulse-button-border-radius: 2rem;
	
	/* button 1 */
	
	/* button 2 */
	
	/* TITLES ---------------- */
	
	/* hero titles color */
	--main-hero-light-h: 46.023;
	--main-hero-light-s: 100%;
	--main-hero-light-l: 66%;
	--main-hero-light-a: 0.5;
	
	/* hero text color */
	--main-hero-text-light-h: 0;
	--main-hero-text-light-s: 0%;
	--main-hero-text-light-l: 100%;
	--main-hero-text-light-a: 1;
	
	/* BORDER and DIVIDER */
	/* border color */
	--border-color-light: var(--white-trans-20);
	--border-color-dark: var(--black-trans-20);
	
	/* divider color */
	--divider-color-light: var(--white-trans-20);
	--divider-color-dark: var(--black-trans-20);

/* 
 * Full Tokens
 */
	
	--main-hero-light: var(--main-hero-light-h) var(--main-hero-light-s) var(--main-hero-light-l);
	--main-hero-text-light: var(--main-hero-text-light-h) var(--main-hero-text-light-s) var(--main-hero-text-light-l);

/* COLOR END */
	

/*  --------------------------------------------------------------
 * Specific TEMPLATE STYLING
 * 
 */
	
/* Border Style
 * 
 */
	/* Full Tokens - BORDERs */
	--border: var(--border-size) var(--border-style) var(--border-color-dark);
	--border-light: var(--border-size) var(--border-style) var(--border-color-light);
	--border-warning: var(--border-size) var(--border-style) var(--warning);
	--border-danger: var(--border-size) var(--border-style) var(--danger);
	--border-success: var(--border-size) var(--border-style) var(--success);	
	
/* Divider Style
 * 
 */
	/* Full Tokens - DIVIDERs*/
	--divider: var(--divider-size) var(--divider-style) var(--divider-color-dark);   
	


	/* SECTION: Main Hero Style */
	/* SECTION: Projects Style*/
	
	--hover-image__height: clamp(12.5rem, 36.65vw + 5.06rem, 34.38rem);
	--hover-image__height-max: clamp(18.75rem, 20.94vw + 14.5rem, 31.25rem);
	--hover-image__icon-size: clamp(1.88rem, 3.14vw + 1.24rem, 3.75rem);
}

	/* SECTION: Services Style */
	/* SECTION: About Style */
	/* SECTION: CTA - Call To Action Style */




/* ---------------------- END of VARIABLES-------------------------- */

/* ########################## CSS Styling ########################## */

/*
 TEXT SIZE UTILITY CLASSES 
 You now don't need to set ANY typography in Theme Styles - not even body copy. The below code handles it all from here in one place. REMOVE any font sizes or line heights set for body copy in Bricks Theme Style typography settings.
*/

.text-xl, .text-xl-light {
    font-size: var(--text-xl);
    line-height: var(--line-height-xl);
}

.text-l, .text-l-light {
    font-size: var(--text-l);
    line-height: var(--line-height-l);
}

body, .text-m, .text-m-light {
    font-size: var(--text-m);
    line-height: var(--line-height-m);
}

.text-s, .text-s-light {
    font-size: var(--text-s);
    line-height: var(--line-height-s);
}

.text-xs, .text-xs-light {
    font-size: var(--text-xs);
    line-height: var(--line-height-xs);
}

	/* Text light */

.text-xl-light,
.text-l-light, .text-m-light,
.text-s-light,
.text-xs-light {
	color: var(--light);
	font-weight: 100;
}




/*
 HEADING SIZE UTILITY CLASSES
 REMOVE any font sizes or line heights set for all heading levels in Bricks Theme Style typography settings.
 */

.h-title {
    font-size: var(--h-title);
    line-height: var(--line-height-h-title);
	font-weight: var(--h-title-font-weight);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--heading-font-weight);
}

h1, .h1 {
    font-size: var(--h1);
    line-height: var(--line-height-h1);
}

h2, .h2 {
    font-size: var(--h2);
    line-height: var(--line-height-h2);
}

h3, .h3 {
    font-size: var(--h3);
    line-height: var(--line-height-h3);
}

h4, .h4 {
    font-size: var(--h4);
    line-height: var(--line-height-h4);
}

h5, .h5 {
    font-size: var(--h5);
    line-height: var(--line-height-h5);
}

h6, .h6 {
    font-size: var(--h6);
    line-height: var(--line-height-h6);
}

	/* Define body, section, container, block... */
	/*		*/

body {
	font-family: var(--body-font-family);
	font-size: var(--text-m);
}

section {
	padding-block: var(--section-block-padding);
	padding-inline: var(--section-inline-padding);
}

p {
	padding-top: var(--p-padding-top);
}

/* Page TITLES */
/* 
 * .title-xl - 100px
 * .title-l - 80px
 * .title-m - 60px
 * .title-s - 40px
 * .title-xs - 28px
 * 
 */

.title-xl {
	font-size: var(--title-xl);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-l {
	font-size: var(--title-l);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-m {
	font-size: var(--title-m);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-s {
	font-size: var(--title-s);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-xs {
	font-size: var(--title-xs);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}


/* Main Builder Classes */

.brxe-container {
	width: var(--container-width);
	padding-block: var(--container-block-padding);
	padding-inline: var(--container-inline-padding);

}

.brxe-button {
    width: auto;
}


/* -------------------------------------------
 * --- MAIN HERO SECTION --- 
 * -------------------------------------------
 * - blocks -
 * .main-hero__section
 * .main-hero__container
 * .main-hero__block
 * .main-hero__div
*/

.main-hero__full-img-overlayhalf-bg {
    flex-direction: row;
    padding-top: 75px;
    padding-bottom: 75px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 100vh;
}


/* - headings -
.main-hero__heading-xl-light
.main-hero__heading-x-light
.main-hero__heading-m-light
.main-hero__heading-s-light
.main-hero__heading-xs-light

.main-hero__heading-xl-dark
.main-hero__heading-x-dark
.main-hero__heading-m-dark
.main-hero__heading-s-dark
.main-hero__heading-xs-dark
*/
.main-hero__heading-xl-light {
	font-size: var(--heading-m);
	color: hsla(var(--main-hero-light));
	line-height: var(--line-height-h2);
}


/* - subheadings - 
.main-hero__subheading-s-light
.main-hero__subheading-xs-light

.main-hero__subheading-s-dark
.main-hero__subheading-xs-dark
*/

/* - text - */
.main-hero__text-xl-light {
	color: hsla(var(--main-hero-text-light));
	font-weight: var(--font-xlight_weight);
}

/*
.main-hero__text-x-light
.main-hero__text-m-light
.main-hero__text-s-light
.main-hero__text-xs-light

.main-hero__text-xl-dark
.main-hero__text-x-dark
.main-hero__text-m-dark
.main-hero__text-s-dark
.main-hero__text-xs-dark
*/

/* -------------------------------------------
 * HERO SECTION
 * -------------------------------------------
*/

/* - blocks -
.hero__section
.hero__container
.hero__block
.hero__div
*/


/* - headings -
.hero__heading-xl-light
.hero__heading-x-light
.hero__heading-m-light
.hero__heading-s-light
.hero__heading-xs-light

.hero__heading-xl-dark
.hero__heading-x-dark
.hero__heading-m-dark
.hero__heading-s-dark
.hero__heading-xs-dark
*/

/* - subheadings - 
.hero__subheading-s-light
.hero__subheading-xs-light

.hero__subheading-s-dark
.hero__subheading-xs-dark
*/

/* - text - 
.hero__text-xl-light
.hero__text-x-light
.hero__text-m-light
.hero__text-s-light
.hero__text-xs-light

.hero__text-xl-dark
.hero__text-x-dark
.hero__text-m-dark
.hero__text-s-dark
.hero__text-xs-dark
*/

/* -------------------------------------------
 * PROJECT SECTION
 * -------------------------------------------
 */

.subhead-light {
	color: var(--subhead-light);
	text-transform: uppercase;
	
}

.subhead-dark {
	color: var(--subhead-dark);
	text-transform: uppercase;
}


/* -------------------------------------------
 * SERVICES SECTION
 * -------------------------------------------
 */


/* -------------------------------------------
 * WHY US SECTION
 * -------------------------------------------
 */

.about-section {
/*	background-color: hsla(0, 0%, 3%, 1);*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23fff' fill-opacity='0.024'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}


/* --- CTA SECTION --- */
/* ------------------------------------------- */



/* --- FOOTER SECTION --- */
/* ------------------------------------------- */

.footer-section {

}


/* -------------------------------------------------------------- */

/* TESTING */

/* from templates - to be adjusted - in PROJECT Section */

.hover-image {
	
}	/* Section Hover Image */

.hover-image__grid {
	display: grid;
	grid-gap: 3rem;
	grid-template-columns: 2fr 1fr;
}	/* Container class */

.hover-image__img-wrap {
	position: relative;
	
}	/* IMG Block wrap class */

.hover-image__img {
	object-fit: cover;
	object-position: 0 0;
	height: var(--hover-image__height);
/*	max-height: var(--hover-image__height-max);
	max-height: 500px;*/
	border-radius: 1rem;
	transition: object-position 4s ease-in-out;
    box-shadow: 2px 2px 30px -2px rgba(255, 255, 255, 0.2);

	
}	/* Image class */

.hover-image__img:hover {
	object-position: 0 100%;

}

.hover-image__icon {
/*	font-size: 60px;*/
	font-size: var(--hover-image__icon-size);
	pointer-events: none;
	position: absolute;
	left: calc(50% - 30px);
	top: 50%;
	animation: icon-pulse 5s infinite;
	
}	/* Pulsing Icon class */


/* PULSE Icon */

@keyframes icon-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    opacity: .5:
  }
  100% {
    transform: scale(1);
  }
}


/*  */


/* PULSE BUTTON */

.pulse-button {
	box-shadow: 0 0 0 0 hsla(var(--pulse-button-h) var(--pulse-button-s) var(--pulse-button-l) / var(--pulse-button-a));
	border-radius: var(--pulse-button-border-radius);
}

.pulse-button:hover {
	animation: pulse 1.5s; /* Animate for 1.5 seconds on hover */
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 20px hsla(var(--pulse-button-h) var(--pulse-button-s) var(--pulse-button-l) / 0);
  }
    100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsla(var(--pulse-button-h) var(--pulse-button-s) var(--pulse-button-l) / 0);
  }
}

/* END PULSE BUTTON */

/* END Testing CSS */

/* -------------------------------------------------------------- */


/* Media Queries */
/* -------------------------------------------------------------- */
/* BADGES by DMCreative.pro */

/* Anchor околу сликата */
.badge-anchor{
    position:relative;
    overflow:hidden;
    border-radius:inherit;
}

.badge-anchor>.brxe-shortcode{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;

  pointer-events:none;
  z-index:2
}

/* Сенка на беџ */
.wc-badges-stack{
    position:absolute;
    top:16px;
    left:16px;
    display:flex;
    flex-direction:column;
}

/* Акција правоаголник (АКЦИЈА -XX%) */
.wc-badge-rect { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    margin-top: 16px;
    margin-left: 16px;
    padding: 6px 14px; 
    border-radius: 8px; 
    background: #f9d4dc; 
    color: #853c4e; 
    font-weight: 700; 
    font-family: 'Open Sans', sans-serif;
    font-size: 14px; 
    line-height: 1.2; 
    box-shadow: 0 4px 12px rgba(0,0,0,.12); 
    text-transform: uppercase; } 

.wc-badge-rect .line1{font-size:14px;color:#853c4e; text-transform: uppercase; margin-right: 4px;}
.wc-badge-rect .line2{font-size:18px;font-weight:600;color:#853c4e}

/* Кружни беџови (НОВО/ИСТАКНАТО) */
.wc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 16px;
  margin-left: 16px;
  padding:6px 12px;
  border-radius:999px;
  color:#fff;
  font:700 14px/1.2 'Open Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:.3px
}
.wc-badge.badge-new{background:#22c55e}
.wc-badge.badge-featured{background:#8b5cf6}

/* Нема на залиха – центар со еднакво празно место (desktop) */
.single-product .badge-anchor .wc-badge.badge-out {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  max-width: calc(100% - 40px); /* празно 20px лево/десно */
  width: auto;

  padding: 14px 20px;
  margin: 0 auto;

  background: #FFFFFF99; /* rgba(255,255,255,0.6) */
  color: #853c4e;

  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;

  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  z-index: 3;
  pointer-events: none;
}

/* мобилен – намален gutter и фонт */
@media (max-width: 480px) {
  .single-product .badge-anchor .wc-badge.badge-out {
    max-width: calc(100% - 24px); /* 12px празно лево/десно */
    font-size: 20px;
    padding: 10px 14px;
  }
}


/* -------- ARCHIVE / GRID -------- */
/* сите беџови горе лево */
.post-type-archive-product .badge-anchor .wc-badge.badge-out,
.tax-product_cat .badge-anchor .wc-badge.badge-out,
.woocommerce ul.products li.product .badge-anchor .wc-badge.badge-out{
  position:absolute;
  top:16px;
  left:16px;
  right:auto;
  bottom:auto;
  transform:none;
  margin:0;
  padding:6px 12px;
  white-space:nowrap;
  background:#FFFFFFD9;
  color:#853c4e;
  border-radius:999px;
  font:700 14px/1.2 'Open Sans',sans-serif;
  z-index:3
}

/* Mobile */
@media (max-width:480px){
  .single-product .badge-anchor .wc-badge.badge-out{font-size:24px;padding:12px}
  .post-type-archive-product .badge-anchor .wc-badge.badge-out,
  .tax-product_cat .badge-anchor .wc-badge.badge-out,
  .woocommerce ul.products li.product .badge-anchor .wc-badge.badge-out{
    font-size:12px;
    padding:4px 10px
  }
}

/* archive/grid – исто, само помал gutter и фонт за картичка */ 
body:not(.single-product) .wc-badge.badge-out{ 
    left: var(--badge-gutter-archive, 16px); 
    right:var(--badge-gutter-archive, 16px); 
    font-size:22px; 
    padding:12px 16px; } 
    
/* TL стек за другите беџови (НОВО/АКЦИЈА/ИСТАКНАТО) – одлепени исто */ .badge-anchor .wc-badges-stack{ 
    position:absolute; 
    top:16px; 
    left:16px; 
    display:flex; 
    flex-direction:column; 
}
/* END BADGES by DMCreative.pro */