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

/*
==========================================================================
  MAKE BODY FULL HEIGHT
==========================================================================
*/
.brx-body {
    min-height: 100vh;
    min-height: 100dvh;
}

/*
==========================================================================
  END MAKE BODY FULL HEIGHT
==========================================================================
*/

/*
==========================================================================
  CLICKABLE PARENT
==========================================================================
*/

.clickable-parent {
	position: relative;
	transition: translate .25s ease-in-out;
}
/*.clickable-parent:hover, .clickable-parent:focus-within {
	translate: 0 -0.25rem;
}
*/
.clickable-parent a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.clickable-parent:focus-within {
	box-shadow: 0 0 0 3px var(--tertiary);
}
.clickable-parent:focus-within :focus {
	box-shadow: none;
	outline: none;
}

/*
==========================================================================
  END CLICKABLE PARENT
==========================================================================
*/

/*
==========================================================================
  NAVIGATION HOVER STYLES
==========================================================================
*/

/* 
 * ----------------------------------------------------------------------
 * TOP-LEVEL MENU ITEMS
 * ---------------------------------------------------------------------- 
*/

/* Target the top-level items for positioning context */
#brxe-lzfhks .brx-nav-nested-items > .menu-item > a:not(.nav-cta-main)
/*, #brxe-lzfhks .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle > a */       /* <-- UNCOMMENT to apply to "Services" LINK */
, #brxe-lzfhks .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle > span     /* <-- UNCOMMENT to apply to "Learn" & "About" SPANs */
{
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

/* Create the ::before pseudo-element for the line */
#brxe-lzfhks .brx-nav-nested-items > .menu-item > a:not(.nav-cta-main)::before
, #brxe-lzfhks .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle > a::before    /* <-- UNCOMMENT to apply to "Services" LINK */
, #brxe-lzfhks .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle > span::before /* <-- UNCOMMENT to apply to "Learn" & "About" SPANs */
{
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: -6px; 
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-60); /* Test color. Change to #ffffff when ready. */
  transition: all 0.4s ease-in-out;
}

/* Define the hover and active states */
#brxe-lzfhks .brx-nav-nested-items > .menu-item > a:not(.nav-cta-main):hover::before,
#brxe-lzfhks .brx-nav-nested-items > .menu-item > a:not(.nav-cta-main)[aria-current="page"]::before
, #brxe-lzfhks .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle > a:hover::before        /* <-- UNCOMMENT to apply to "Services" LINK */
, #brxe-lzfhks .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle > span:hover::before     /* <-- UNCOMMENT to apply to "Learn" & "About" SPANs */
{
  width: 100%;
  transform: translateX(0);
  left: 0;
}


/* 
 * ----------------------------------------------------------------------
 * SUB-MENU ITEMS
 * ---------------------------------------------------------------------- 
 * Each group is separated so they can be enabled or disabled individually.
 * The line is thinner (2px) and padding is used for spacing.
*/

/* --- "Services" Sub-Menu Items (ID: #brxe-fbzpbn) --- */
/* UNCOMMENT THE THREE RULES BELOW to enable the effect for 'Services' sub-menu items. */
/*
#brxe-lzfhks #brxe-fbzpbn a {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

#brxe-lzfhks #brxe-fbzpbn a::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-60);
  transition: all 0.4s ease-in-out;
}

#brxe-lzfhks #brxe-fbzpbn a:hover::before {
  width: 100%;
  transform: translateX(0);
  left: 0;
}
*/


/* --- "Learn" Sub-Menu Items (ID: #brxe-bzgidl) --- */
/* UNCOMMENT THE THREE RULES BELOW to enable the effect for 'Learn' sub-menu items. */

#brxe-lzfhks #brxe-bzgidl a {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

#brxe-lzfhks #brxe-bzgidl a::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-60);
  transition: all 0.4s ease-in-out;
}

#brxe-lzfhks #brxe-bzgidl a:hover::before,
#brxe-lzfhks #brxe-bzgidl a[aria-current="page"]::before {
  width: 100%;
  transform: translateX(0);
  left: 0;
}



/* --- "About" Sub-Menu Items (ID: #brxe-tkkcjh) --- */
/* UNCOMMENT THE THREE RULES BELOW to enable the effect for 'About' sub-menu items. */

#brxe-lzfhks #brxe-tkkcjh a {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

#brxe-lzfhks #brxe-tkkcjh a::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-60);
  transition: all 0.4s ease-in-out;
}

#brxe-lzfhks #brxe-tkkcjh a:hover::before,
#brxe-lzfhks #brxe-tkkcjh a[aria-current="page"]::before {
  width: 100%;
  transform: translateX(0);
  left: 0;
}

/*
==========================================================================
  END NAVIGATION HOVER STYLES
==========================================================================
*/