/*
 Theme Name:   Tecnica+
 Theme URI:    https://bricksbuilder.io/
 Description:  Tecnica+ main theme.
 Author:       Landform Development Consultancy Pte. Ltd.
 Author URI:   https://landformconsult.asia/
 Template:     bricks
 Version:      1.1
 Text Domain:  tecnicaplus
*/

* {
  /**  Reset global  */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}  
  
  
:root {
  /**  Variables  */  

  /**  Typography styles  */
  --h1: clamp(3.2rem, calc(3.2rem + ((1vw - 0.48rem) * 3.5)), 6rem);
  --h2: clamp(2.8rem, calc(2.8rem + ((1vw - 0.48rem) * 2.5)), 4.8rem);
  --h3: clamp(2.5rem, calc(2.5rem + ((1vw - 0.48rem) * 1.875)), 4rem);
  --h4: clamp(2.2rem, calc(2.2rem + ((1vw - 0.48rem) * 1.25)), 3.2rem);
  --h5: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 0.625)), 2.5rem);
  --h6: clamp(1.8rem, calc(1.8rem + ((1vw - 0.48rem) * 0.25)), 2rem);
  --text: clamp(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 0.25)), 1.8rem);
  --text-xxl: calc(var(--text) * 1.5);
  --text-xl: calc(var(--text) * 1.25);
  --text-l: calc(var(--text) * 1.125);
  --text-s: calc(var(--text) * 0.875);
  --text-xs: calc(var(--text) * 0.75);
  --text-xxs: calc(var(--text) * 0.625);
  --footnote: var(--text-xxs);
  --header-menu-text: var(--h6);
  --footer-menu-text: clamp(1.4rem, calc(1.4rem + ((1vw - 0.48rem) * 0.5)), 1.8rem);
  --footer-top__text: clamp(1.2rem, calc(1.2rem + ((1vw - 0.48rem) * 0.5)), 1.6rem);
  --footer-bottom__text: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.25)), 1.2rem);




  
  /**  Spacings  */
  --space-xxxs: clamp(0.4rem, calc(0.4rem + ((1vw - 0.48rem) * 0.5)), 0.8rem);
  --space-xxs: clamp(0.8rem, calc(0.8rem + ((1vw - 0.48rem) * 0.5)), 1.2rem);
  --space-xs: clamp(1.2rem, calc(1.2rem + ((1vw - 0.48rem) * 0.5)), 1.6rem);
  --space-s: clamp(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 0.5)), 2rem);
  --space-m: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 2.5)), 4rem);
  --space-l: clamp(4rem, calc(4rem + ((1vw - 0.48rem) * 2.5)), 6rem);
  --space-xl: clamp(6rem, calc(6rem + ((1vw - 0.48rem) * 2.5)), 8rem);
  --space-xxl: clamp(8rem, calc(8rem + ((1vw - 0.48rem) * 2.5)), 10rem);
  --space-xxxl: clamp(10rem, calc(10rem + ((1vw - 0.48rem) * 2.5)), 12rem);
  
  --section-padding-block: var(--space-xxxl);
  --section-padding-inline: clamp(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 8)), 8rem);
  --content-gap: var(--space-xl);
  --card-content-gap: var(--space-m);
  --grid-column-gap: var(--space-m);
  --grid-row-gap: var(--space-l);
  
  
  
  

  /**  Color Palette  */
  
  /** Color modifier multiplier */
  --lighten-mplier: 0.4;
  --darken-mplier: 0.3;
  
  
  /**  Primary color */
  --primary-color-h: 79;
  --primary-color-s: 7%;
  --primary-color-l: 14%;
  
  --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
  --primary-color--light: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + (100% - var(--primary-color-l)) * var(--lighten-mplier)));
  --primary-color--dark: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - var(--primary-color-l) * var(--darken-mplier)));
  
  
  /**  Secondary color */
  --secondary-color-h: 81;
  --secondary-color-s: 5%;
  --secondary-color-l: 59%;
  
  --secondary-color: hsl(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l));
  --secondary-color--light: hsl(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) + (100% - var(--secondary-color-l)) * var(--lighten-mplier)));
  --secondary-color--dark: hsl(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) - var(--secondary-color-l) * var(--darken-mplier)));
  
  
  /**  Accent color */
  --accent-color-h: 0;
  --accent-color-s: 0%;
  --accent-color-l: 0%;
  
  --accent-color: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l));
  --accent-color--light: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + (100% - var(--accent-color-l)) * var(--lighten-mplier)));
  --accent-color--dark: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - var(--accent-color-l) * var(--darken-mplier)));
  
  
  /**  Custom color */
  --menu-background-color: var(--primary-color);
  
  
  
  

  /**  Header-Footer Elements  */
  
  /** Header Logo */
  --header-logo-width: clamp(14rem, calc(14rem + ((1vw - 0.36rem) * 5.4054)), 18rem);
  --header-logo-width--shrink: clamp(13rem, calc(13rem + ((1vw - 0.36rem) * 4.0541)), 16rem);
  
  /** Footer */
  /* --footer-height: 0; */
}




/**  Global elemets styling  */

html {
  font-size: 62.5%;
}

h1 {
  font-size: var(--h1);
  font-weight: 400;
  line-height: 1.2;
}

h2 {
  font-size: var(--h2);
  font-weight: 300;
  line-height: 1.2;
}

h3 {
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
}

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

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

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

p {
  font-size: var(--text);
}

button[type=submit].bricks-button {
  margin-top: 1.2rem;
  padding: 1.2rem 3.2rem;
  color: var(--bodytext);
  background-color: var(--secondary-color);
  font-weight: 700;
  border-radius: 10rem;
  transition: all 0.2s ease-in-out;
}

button[type=submit].bricks-button:hover {
  background-color: var(--primary-color);
}


/**  Custom utility styling  */

.lowercase {
  text-transform: lowercase;
}


/**  Custom element styling  */

.brx-body {  /*  Modify Bricks' main body element's height to allow footer to stick at bottom of the screen */
  height: 100dvh;
}

.main-nav__menu-item {
  font-size: var(--header-menu-text);
}

.disclaimer-text {
  font-size: var(--text-xs);
  line-height: 1.5;
}

.disclaimer-text-link {
  border-bottom: 1px transparent solid;
  transition: border-color 0.15s ease-in-out;
}

.disclaimer-text-link:hover {
  color: var(--primary-color);
  border-bottom-color: var(--bodytext);
}

.long-list-item {
  margin-bottom: 1ch !important;
}