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

/* POSTS */
.single-post p, .single-news p { margin: 0 0 3rem; }
.single-post p, .single-news p { margin: 0 0 3rem; }
.single-post ul li p, .single-news ul li p { margin: 0 0 1rem; }
.single-post main a, .single-news main a{ color: var(--color--secondary); }
.single-post main a:hover, .single-news main a:hover { text-decoration: underline; }
.single-post :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 1.5rem; }
.single-news :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 1.5rem; }
/* END POSTS */


/* MENU COLOR BLACK */
body.page-id-611 .menu-item > a { color: #000; }
body.page-id-611 .brx-submenu-toggle > a { color: #000; }
body.page-id-611 .brx-submenu-toggle > button { color: #000; }

/* BRICKS BUTTON */
.bricks-button{
	transition: var(--btn-transition, var(--transition));
}


/* TYPOGRAPHY */
.heading--xl{
	font-size: clamp(5rem, 4.1rem + 2.5vw, 8.9rem);
}
.text--large{
	font-size: clamp(2rem, 1.8846rem + 0.3205vw, 2.5rem);
}
.text--medium{
	font-size: clamp(1.8rem, 1.7538rem + 0.1282vw, 2rem);
}

/* NAV DROPDOWN STYLE */
.dd-link{
  position: relative;
  transition: padding-left .22s cubic-bezier(.22,1,.36,1), color .15s ease;
}
.dd-link:hover{
  padding-left: 12px;
  color: var(--color--secondary);
}
.dd-link::before{
  content:"";
  position:absolute;
  left: 0px; top:50%;
  width: 0; height: 1.4em;
  background: var(--color--secondary);
  border-radius: 2px;
  transform: translateY(-50%);
  opacity: 0;
  transition: width .22s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.dd-link:hover::before{
  width: 3px;
  opacity: 1;
}
/* Active/current item (text + indent) */
.dd-link.is-active,
.dd-link[aria-current="page"],
.current-menu-item > .dd-link{
  padding-left: 12px;
  color: var(--color--secondary);
}
/* Active/current item (left bar) */
.dd-link.is-active::before,
.dd-link[aria-current="page"]::before,
.current-menu-item > .dd-link::before{
  width: 3px;
  opacity: 1;
}
/* END NAV DROPDOWN STYLE */


/* HOMEPAGE */
.hero--btm::before {
  content: '';
  height: 170%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(39, 42, 45, 0.82);
  z-index: 0;
  max-width: ;
  width: 1920px;
}
/* END HOMEPAGE */


/* BLOGS PAGE */
.category--filter .brx-option-text {
  width: 100%;
  justify-content: start;
  padding: 0 0 10px;
}
.category--filter > li:nth-child(7) > label:nth-child(1) > span:nth-child(2) {
  border-bottom: 0 !important;
}
/* END BLOGS PAGE */




/* Reusable dim + reveal */
/* Card: add to each card container */
.dim-hover{ position:relative; isolation:isolate; }
.dim-hover::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: var(--dim-bg, #00000069);
  opacity:0; transition: opacity .25s ease; pointer-events:none;
}
/* Dim non-hovered siblings when any card is hovered */
@supports selector(:has(*)){
  :where(*):has(> .dim-hover:hover) > .dim-hover:not(:hover)::after{ opacity: var(--dim-opacity, 1); }
}
/* Button: add to the button inside the card */
.reveal-on-hover{
  position:relative; z-index:2; display:none !important;
  pointer-events:none; transform:translateY(12px);
}
/* Slide-fade up on hover/focus */
.dim-hover:hover .reveal-on-hover,
.dim-hover:focus-within .reveal-on-hover{
  pointer-events:auto;
  animation: reveal .5s cubic-bezier(.22,1,.36,1) both;
  display:inline-flex !important;
}
@keyframes reveal{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}
/* Tablet/touch: always visible */
@media (min-width:768px) and (max-width:1024px),
       (hover:none) and (pointer:coarse){
  .reveal-on-hover{ opacity:1; transform:none; animation:none; pointer-events:auto; display:inline-flex !important;}
}
/* Simple reveal-block animation for variable-height content */
.reveal-block {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: max-height .36s cubic-bezier(.22,1,.36,1), opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.dim-hover:hover .reveal-block,
.dim-hover:focus-within .reveal-block {
  max-height: var(--reveal-h, 800px);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 1024px) {
  .reveal-block {
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}
/* Reusable: push card down slightly on hover */
.press-down{
  --push-y: 10px;
  --press-dur: .18s;
  transition: transform var(--press-dur) ease;
  will-change: transform;
}
.press-down:hover,
.press-down:focus-within{ transform: translateY(var(--push-y)); }
.press-down:active{ transform: translateY(calc(var(--push-y) + 2px)); }
@media (prefers-reduced-motion: reduce){
  .press-down{ transition:none; }
}
.border--yellow {
  border: 1px solid #000;
}
.border--yellow:hover {
  border: 1px solid var(--color--secondary);
}
.border--white {
  border: 1px solid #fff;
  border-radius: 11px;
}
.border--white:hover {
  border: 1px solid var(--color--secondary);
}

/* END Reusable dim + reveal */


/* Hover/focus state for Project Slider */
.project-slider-card__overlay,
.project-slider-card__heading,
.project-slider-card__block {
  transition: opacity .22s ease-in-out;
}
.project-slider-card:hover .project-slider-card__overlay,
.project-slider-card:focus-within .project-slider-card__overlay { opacity: 0; }

.project-slider-card:hover .project-slider-card__heading,
.project-slider-card:focus-within .project-slider-card__heading { opacity: 0; }

.project-slider-card:hover .project-slider-card__block,
.project-slider-card:focus-within .project-slider-card__block { opacity: 1; }
/* END Hover/focus state for Project Slider */


/* Stagger animation – frontend only */
@media (prefers-reduced-motion: no-preference){
  body.bricks-is-frontend .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
  }
  body.bricks-is-frontend .reveal-up.play {
    animation: fadeSlideUp 1s cubic-bezier(.22,1,.36,1) forwards;
/* 	animation: fadeSlideUp 0.5s cubic-bezier(.33,1,.68,1) forwards; */
  }

  @keyframes fadeSlideUp {
    to { opacity: 1; transform: translateY(0); }
  }
}
/* END Stagger animation – frontend only */


/* CARD OUTLINE HOVER CSS */
.card-outline {
  transition: background .5s ease, border-color .5s ease, color .5s ease, transform .5s ease;
}
.card-outline:hover {
  background: #d9d9d9 !important;
  border-color: #fff24b !important;
}
.card-outline:hover .card-outline__heading,
.card-outline:hover .card-outline__text {
  color: #000 !important;
}
/* END CARD OUTLINE HOVER CSS */



/* FAQ hover + open effects */
.faq-item{
  transition: background .25s ease, transform .2s ease, color .2s ease;
}
.faq-item:hover{
  background: #fff24b;
  transform: translateY(-2px);
}
/* make inner texts black on hover (covers both dash and double-underscore naming) */
.faq-item:hover .faq-item_text-basic,
.faq-item:hover .faq-item__text-basic,
.faq-item:hover .faq-item_text,
.faq-item:hover .faq-item__text {
  color: #000;
}
/* open state (Bricks adds brx-open / brxe-open) */
.faq-item.brx-open,
.faq-item.brxe-open {
  background: #fff24b;
}
.faq-item:hover .faq-item__icon,
.faq-item.brx-open .faq-item__icon,
.faq-item.brxe-open .faq-item__icon {
  stroke: #000 !important;
  fill: #000 !important;
  color: #000 !important;
  font-size: 4rem;
}
/* ensure text also turns black when opened */
.faq-item.brx-open .faq-item_text-basic,
.faq-item.brx-open .faq-item__text-basic,
.faq-item.brx-open .faq-item_text,
.faq-item.brx-open .faq-item__text,
.faq-item.brxe-open .faq-item_text-basic,
.faq-item.brxe-open .faq-item__text-basic,
.faq-item.brxe-open .faq-item_text,
.faq-item.brxe-open .faq-item__text {
  color: #000;
}
/* END FAQ hover + open effects */



/* BUILD CARD STYLING */
.build-card {
  position: relative;
  overflow: hidden;
  display: block;
  height: 214px;   
}
/* media wrapper sits behind content */
.build-card__media {
  position: absolute;
  inset: 0;              
  z-index: 0;
  pointer-events: none;
  height: 100%;
}
/* image fills area and will zoom */
.build-card__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
/* dark overlay that appears on hover */
.build-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 1;
  pointer-events: none;
}
/* persistent right-side yellow bar */
.build-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;          
  height: 100%;
  background: #ffe600;    
  z-index: 4;
}
/* content sits above image and overlay */
.build-card__content {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
  bottom: 0;
  width: 100%;
  padding: 2rem 5rem 2rem 2rem;
  gap: 1rem;
}
/* heading style + small motion on hover */
.build-card__heading {
 z-index: 5; 
}
/* descriptive text */
.build-card__text {
  opacity: 0;
  visibility: hidden;
  transition: opacity .36s cubic-bezier(.2,.9,.2,1), transform .36s cubic-bezier(.2,.9,.2,1);
  z-index: 5;
  height: 0;
}
/* hover states */
.build-card:hover .build-card__image { transform: scale(1.08); }
.build-card:hover::before { opacity: 1; }
.build-card:hover .build-card__text { opacity: 1; visibility: visible; height: auto; }

@media only screen and (max-width: 1024px){
  .build-card__text{
    visibility: visible;
    height: auto;
    opacity: 1;
  }
  .build-card::before {
    opacity: 1;
  }
}