/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/



/* =========================================
   1. CONFIGURATION (THEME VARIABLES)
   ========================================= */


/* =========================================
   2. BASE & UTILITIES (Atomic)
   ========================================= */
.text-m{font-size: clamp(1.6rem, 1.4rem + 0.5556vw, 2.2rem);}

body {
  -webkit-font-smoothing: antialiased;
}

/* --- Layout Utilities --- */
.block { display: block !important; }
.hidden { display: none !important; }

/* Flexbox Utilities */
.u-flex-3 { width: 32%; }
.u-flex-4 { width: 23%; }

/* Colors */
.text--action { color: var(--action); }
.text--secondary { color: var(--secondary); }
.text--muted { color: var(--shade-dark); }
.text--danger { color: var(--danger); }
.text--white { color: var(--white); }


/* =========================================
   3. COMPONENTS (BEM + ACSS Tokens)
   ========================================= */

/* --- NAVBAR (.nav) --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  background-color: var(--white);
  border-bottom: 1px solid var(--shade-light);
}

.nav--dark {
  background-color: var(--base);
  color: var(--white);
  border-bottom: none;
}

.nav__brand {
  font-size: var(--text-l);
  font-weight: 800;
  text-decoration: none;
  color: inherit;
}

.nav__menu {
  display: flex;
  gap: var(--space-m);
  list-style: none;
  align-items: center;
}

.nav__link {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.nav__link:hover { opacity: 1; color: var(--action); }
.nav--dark .nav__link:hover { color: var(--white); opacity: 1; }
.header--desktop-btn{ display: block; }
.header--mobile-btn{ display: none; }


/* --- CARDS (.card) --- */
.card {
  background-color: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--shade-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__header {
  padding: var(--space-m);
  border-bottom: 1px solid var(--shade-light);
  font-weight: 600;
  background-color: var(--white);
}

.card__body { padding: var(--space-m); flex: 1; }

.card__footer {
  padding: var(--space-m);
  background-color: var(--base-light);
  border-top: 1px solid var(--shade-light);
}



/* =========================================
   MOBILE RESPONSIVE
   ========================================= */

@media (max-width: 768px) {
  .header--desktop-btn{ display: none; }
  .header--mobile-btn{ display: block; }
  .u-flex-3 { width: 48%; }
  .u-flex-4 { width: 48%; }
}
@media (max-width: 478px) {
  .u-flex-3 { width: 100%; }
  .u-flex-4 { width: 100%; }
}

/* =========================================
   CONTACT FORM
   ========================================= */
.piotnet-section__container {
  max-width: 100% !important;
}
.contact-form input {
  background: transparent;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #fff;
}
.contact-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
}
.app-form .piotnetforms-field-inline {
  width: 80% !important;
  color: #fff;
}
.app-form .piotnetforms-label-inline {
  width: 20% !important;
  color: #fff;
}

@media (max-width: 768px) {
	.app-form .piotnetforms-field-inline {
	  width: 100% !important;
	}
	.app-form .piotnetforms-label-inline {
	  width: 100% !important;
	}
}


/* =========================================
   CAREERS SINGLE PAGE
   ========================================= */
.single-openings h2, .single-openings h3, .single-openings h4, .single-openings h5{
	font-weight: 400;
}