/*
 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
*/



/* =========================================
   CONFIGURATION (THEME VARIABLES)
   ========================================= */
:root {

}


/* =========================================
   BASE & UTILITIES (Atomic)
   ========================================= */
body {
  color: var(--base);
  -webkit-font-smoothing: antialiased;
}


/* =========================================
   TYPOGRAPHY
   ========================================= */
.text-l {font-size: clamp(1.8rem, 1.7333rem + 0.2963vw, 2rem);}

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

/* Flexbox Utilities */
.u-flex-3 { width: 31%; }
.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);
}

.card-icon {
  border-top: 1px solid rgba(143, 143, 143, 0.24);
  border-right: 1px solid rgba(143, 143, 143, 0.24);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.card-icon__icon-wrapper {
  position: relative;
  width: 52px;
  height: 52px;
}
.card-icon__icon1,
.card-icon__icon2 {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease;
}
.card-icon__icon2 {
  opacity: 0;
}
.card-icon:hover .card-icon__icon1 {
  opacity: 0;
}
.card-icon:hover .card-icon__icon2 {
  opacity: 1;
}
.card-icon:hover {
  background-color: #231F20;
  color: #fff;
}


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

@media (max-width: 768px) {
  .header--desktop-btn{ display: none !important; }
  .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%; }
}