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

/* --- Layout Utilities --- */
body.page-id-21 #header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: transparent;
}
.block { display: block !important; }
.hidden { display: none !important; }



/* =========================================
   3. COMPONENTS (BEM + ACSS Tokens)
   ========================================= */
.btn{
  padding: 12px 18px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.05) inset, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.btn--white{
	background: #fff;
  color: #000;
}
.btn--white::hover{
  background: var(--secondary-colorf);
}
.heading-xtra--l{
	font-size: clamp(8rem, 0.6667rem + 20.3704vw, 30rem);
}

/* --- 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%; }
}



/* =========================================
   LOGO CARD
   ========================================= */
.logo-card__logo {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.logo-card__logo-bg {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.logo-card:hover .logo-card__logo {
  opacity: 0;
}
.logo-card:hover .logo-card__logo-bg {
  opacity: 1;
}



.team-card__image {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.team-card__subheading {
  color: #6b7280;
  transition: color 0.3s ease;
}
.team-card:hover .team-card__image {
  filter: grayscale(0%);
}
.team-card:hover .team-card__subheading {
  color: #0B6FB8;
}



/* =========================================
   FAQ ACCORDION
   ========================================= */
.faq--accordion li p {
  width: var(--width-l);
  max-width: 100%;
}
.faq--accordion li .icon {
  margin-left: 20px;
}



/* =========================================
   Contact ACCORDION
   ========================================= */
.contact-form input, .contact-form textarea {
  background: rgba(217, 217, 217, 0.25);
  border: 1px solid rgba(217, 217, 217, 0.25);
  padding: 5px;
}
.contact-form label {
  color: #fff;
}

/* ============================================
   ACTIVATION CARDS — Horizontal Accordion
   Structure: trigger > header(number, title), label, content(desc, tags)
   ============================================ */

.activation-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.6rem;
  width: 100%;
}

/* --- Card --- */
.activation-card {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16rem;          /* ← COLLAPSED WIDTH DIAL */
  height: 52rem;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;
  -webkit-user-select: none;
  user-select: none;
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* background: <your color>; */
}
.activation-card.is-active {
  flex-grow: 1;
}

/* --- Trigger: flex-start active, space-between collapsed --- */
.activation-card__trigger {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  padding: 2.4rem;
  gap: 1.6rem;
}
.activation-card:not(.is-active) .activation-card__trigger {
  justify-content: space-between;   /* number top, label bottom — collapsed only */
}

/* --- Header --- */
.activation-card__header {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-direction: row;
    flex-wrap: wrap;
}
.activation-card:not(.is-active) .activation-card__header {
  flex-direction: column;
  align-items: flex-start;
}

/* --- Number: scale from top-left --- */
.activation-card__number {
  line-height: 1;
  margin: 0;
  font-size: 7rem;
  transform: scale(0.47);
  transform-origin: top left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.activation-card.is-active .activation-card__number {
  transform: scale(1);
}

/* --- Title --- */
.activation-card__title {
  display: none;
  margin: 0;
}
.activation-card.is-active .activation-card__title {
  display: block;
}

/* --- Label: vertical, bottom-anchored, wraps if long --- */
.activation-card__label {
  align-self: flex-start;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.02em;
  max-height: 100%;
}
.activation-card.is-active .activation-card__label {
  display: none;
}

/* --- Content --- */
.activation-card__content {
  display: none;
}
.activation-card.is-active .activation-card__content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  animation: activationFadeIn 0.45s ease 0.15s both;
}

@keyframes activationFadeIn {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.activation-card__desc { margin: 0; max-width: 60ch; }

/* --- Tags --- */
.activation-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  flex-direction: row;
}
.activation-card__tag {
  padding: 10px 15px;
  border-radius: 999px;
  background: #226C57;
  border: 1px solid #ffffff42;
}

/* ---tablet--- */
@media (max-width: 991px) {
  .activation-card {
    flex-basis: 13rem;
  }
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .activation-grid { flex-direction: column; }
  .activation-card {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    min-width: 0;
    height: auto;
  }
  .activation-card:not(.is-active) .activation-card__trigger {
    justify-content: flex-start;
  }
  .activation-card:not(.is-active) .activation-card__header {
    flex-direction: row;
    gap: 1.6rem;
  }
  .activation-card__label {
    writing-mode: horizontal-tb;
    transform: none;
    max-height: none;
    margin-top: 1.2rem;
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .activation-card,
  .activation-card__number { transition: none; }
  .activation-card.is-active .activation-card__content { animation: none; }
}