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

/*** GENERAL ***/

html {
	scroll-padding-top: var(--header-height);
}

/** Page Lines **/
:root {
	--hwr-frame-color: rgba(255, 255, 255, 0.1);
	--hwr-frame-color-dark: rgba(14, 21, 30, .1);
	--hwr-frame-width: 1px;
	--hwr-frame-max: 1200px;  
	--hwr-frame-pad: 3%;      
	--corner-length: 8px;
}

body::before,
body::after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--hwr-frame-width);
	background: var(--hwr-frame-color);
	z-index: 2;            /* above section backgrounds, below modals/header */
	pointer-events: none;  /* never blocks clicks */
	mix-blend-mode: difference;
}

body::before {
	left: 3%;
}

body::after {
	right: 3%;
}

#brx-footer {
	z-index: 3;
}

.bricks-button {
	backdrop-filter: blur(10px);
}

/** HEADER **/
/* Logo stays on top of the overlay.
   Add class `header__logo` to your logo Image (or set position:relative
   + z-index:1001 directly in its Style → Layout panel). */
.header__logo {
  position: relative;
  z-index: 1001;
}

/* The fullscreen panel — only while open */
.header__nav.brx-open .header__nav-items {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--header-height) 0 0 0;                 /* clears the logo + X up top */
  background: var(--dark);
  overflow-y: auto;
}

/* The header hamburger → pinned top-right as the X.
   `> .brxe-toggle` targets the OPEN toggle (direct child of nav),
   not the in-menu one. It already animates to an X when .is-active. */
.header__nav.brx-open > .brxe-toggle {
  z-index: 1001;
}

/* Kill Bricks' duplicate in-menu close button and its empty row */
.header__nav.brx-open .menu-item:has(.brx-toggle-div) {
  display: none;
}

/* Replace '.burger-menu' with your actual button class or ID */
.header__nav .brxe-toggle:focus {
  outline: none !important;
  box-shadow: none !important; /* Removes shadow outlines used by frameworks like Bootstrap */
}

/* Fixes the blue highlight on mobile taps */
.header__nav .brxe-toggle {
  -webkit-tap-highlight-color: transparent !important; 
}

/* Full-width rows with dividers */
.header__nav.brx-open .menu-item {
  width: 100%;
  border-bottom: 1px solid var(--hwr-menu-divider, rgba(255, 255, 255, 0.12));
}
.header__nav.brx-open .header__nav-link {
  display: block;
  width: 100%;
  padding: 25px 6%;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--light);
  transition-property: color, background-color, border-color;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}
.header__nav.brx-open .header__nav-link:hover,
.header__nav.brx-open .header__nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.05);
}

.header__nav.brx-open .menu-item:has(.header__nav-footer),
.header__nav.brx-open .header__nav-footer {
  margin-top: auto;
}

@media screen and (min-width:990px) {
	.header__nav-link[aria-current="page"] {
		color: var(--cyan);
	}
}

/** Button Corners **/
/* Primary Button */
.bricks-button.bricks-background-primary {
	position: relative;
}

.bricks-button.bricks-background-primary:hover:before {
	bottom: 0px;
	left: 0px;
}

.bricks-button.bricks-background-primary:hover:after {
	top: 0px;
	right: 0px;
}

.bricks-button.bricks-background-primary:before {
	width: var(--corner-length);
	height: var(--corner-length);
	position: absolute;
	bottom: -2px;
	left: -2px;
	content: "";
	border-bottom: 1px solid var(--cyan);
	border-left: 1px solid var(--cyan);
	transition: all .15s ease-in-out;
}

.bricks-button.bricks-background-primary:after {
	width: var(--corner-length);
	height: var(--corner-length);
	position: absolute;
	top: -2px;
	right: -2px;
	content: "";
	border-top: 1px solid var(--cyan);
	border-right: 1px solid var(--cyan);
	transition: all .15s ease-in-out;
}

/* Secondary Button */
.bricks-button.bricks-background-secondary {
	position: relative;
}

.bricks-button.bricks-background-secondary:hover:before {
	bottom: 0px;
	left: 0px;
}

.bricks-button.bricks-background-secondary:hover:after {
	top: 0px;
	right: 0px;
}

.bricks-button.bricks-background-secondary:before {
	width: var(--corner-length);
	height: var(--corner-length);
	position: absolute;
	bottom: -2px;
	left: -2px;
	content: "";
	border-bottom: 1px solid var(--light);
	border-left: 1px solid var(--light);
	transition: all .15s ease-in-out;
}

.bricks-button.bricks-background-secondary:after {
	width: var(--corner-length);
	height: var(--corner-length);
	position: absolute;
	top: -2px;
	right: -2px;
	content: "";
	border-top: 1px solid var(--light);
	border-right: 1px solid var(--light);
	transition: all .15s ease-in-out;
}

/* Dark Button */
.bricks-button.bricks-background-dark {
	position: relative;
}

.bricks-button.bricks-background-dark:hover:before {
	bottom: 0px;
	left: 0px;
}

.bricks-button.bricks-background-dark:hover:after {
	top: 0px;
	right: 0px;
}

.bricks-button.bricks-background-dark:before {
	width: var(--corner-length);
	height: var(--corner-length);
	position: absolute;
	bottom: -2px;
	left: -2px;
	content: "";
	border-bottom: 1px solid var(--dark);
	border-left: 1px solid var(--dark);
	transition: all .15s ease-in-out;
}

.bricks-button.bricks-background-dark:after {
	width: var(--corner-length);
	height: var(--corner-length);
	position: absolute;
	top: -2px;
	right: -2px;
	content: "";
	border-top: 1px solid var(--dark);
	border-right: 1px solid var(--dark);
	transition: all .15s ease-in-out;
}


/** Section Line Top **/
.line-top {
	position: relative;
}

.line-top:after {
	content: '';
	position: absolute;
	width: 94%;
	height: 1px;
	background: var(--hwr-frame-color);
	top: 0;
	mix-blend-mode: difference;
}

/** Section Line Bottom **/
.line-btm {
	position: relative;
}

.line-btm:after {
	content: '';
	position: absolute;
	width: 94%;
	height: 1px;
	background: var(--hwr-frame-color);
	bottom: 0;
	mix-blend-mode: difference;
}

/** Text Link **/
.text-link .icon {
	transition: all .15s ease-in-out;
}

.text-link:hover .icon {
	transform: translatex(5px);
}

/** Image Gradient **/
.img-gradient {
	--parent-padding: 15px;
	padding: var(--parent-padding);
}

.img-gradient:before {
	top: var(--parent-padding) !important;
	left: var(--parent-padding)!important;
	right: var(--parent-padding)!important;
	bottom: var(--parent-padding)!important;
}

/** UL List Bullets **/
.custom-list ul {
  list-style: none;
  padding: 0;
  margin: 10px 0px 0px 0px;
}

/* Style the list item to accommodate the icon */
.custom-list ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

/* Insert the SVG icon */
.custom-list ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; /* Set icon width */
  height: 8px; /* Set icon height */
  background-image: url('/wp-content/uploads/2026/06/diamond-list-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

/*** HOME ***/

/** Cards **/
.cards__card .cards__link .icon {
	transition: all .15s ease-in-out;
}

.cards__card:hover .cards__link .icon {
	transform: translatex(5px);
}

/*** PRODUCTS ***/
.products-card .products-card__link .icon {
	transition: all .15s ease-in-out;
}

.products-card:hover .products-card__link .icon {
	transform: translatex(5px);
}

/* ===== Product Filters ===== */
.product-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-filters li { margin: 0; }

/* Hide the native radio dot — we want pills, not radio inputs */
.product-filters .brx-input-indicator { display: none; }

/* The label IS the pill */
.product-filters label {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1;
	color: var(--neutral);
	background: #e6e6e7;
	border: 1px solid hsla(214, 36%, 9%, 0.1);
	cursor: pointer;
	transition: all .15s ease-in-out;
}

.product-filters label:hover {
	background: var(--dark-cyan);
	color: var(--light);
	border-color: var(--dark-cyan);
}

/* Active pill — Telemetry accent */
.product-filters label.brx-option-active {
	background: var(--dark-cyan);
	color: var(--light);
	border-color: var(--dark-cyan);
}

/* Keyboard focus (real input is visually hidden) */
.brxe-filter-radio[data-mode=button] input[type=radio]:focus-visible+.bricks-button, .brxe-filter-radio[data-mode=button] label:focus-within .bricks-button {
	outline: 1px solid var(--dark-cyan, #3b82f6);
}

/*** SINGLE PRODUCT ***/
.features__list-item:not(:last-child):after {
	content: '' !important;
	width: 100%;
	height: 1px;
	position: relative;
	display: block;
	background: rgba(14, 21, 30, .1);
	margin: 20px 0px;
}

.hwr-spec-table {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Header row (static) */
.hwr-spec-table__header {
	position: relative;
	display: grid;
	grid-template-columns: var(--hwr-spec-col, 40%) 1fr;
	gap: 24px;
	padding: 16px 20px;
	border: 1px solid hsla(214, 36%, 9%, 0.1);
}

/* Corner brackets (top-left + top-right) */
.hwr-spec-table__header::before,
.hwr-spec-table__header::after {
	content: "";
	position: absolute;
	top: 0;
	width: 10px;
	height: 10px;
	border-top: 1px solid var(--dark-cyan);
}
.hwr-spec-table__header::before {
	left: 0;
	border-left: 1px solid var(--dark-cyan);
}
.hwr-spec-table__header::after {
	right: 0;
	border-right: 1px solid var(--dark-cyan);
}

/* Bottom corner brackets — placed on the header cells, since the
header's own ::before/::after are used by the top corners */
.hwr-spec-table .header-cell:first-child::before,
.hwr-spec-table .header-cell:last-child::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 10px;
	height: 10px;
	border-bottom: 1px solid var(--dark-cyan);
}
.hwr-spec-table .header-cell:first-child::before {
	left: 0;
	border-left: 1px solid var(--dark-cyan);
}
.hwr-spec-table .header-cell:last-child::after {
	right: 0;
	border-right: 1px solid var(--dark-cyan);
}

.hwr-spec-table__header-cell {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hwr-accent, #2d8fd5);
}

/* Body row (looped) */
.hwr-spec-table__row {
	display: grid;
	grid-template-columns: var(--hwr-spec-col, 40%) 1fr;
	gap: 24px;
	padding: 14px 20px;
	align-items: start;
}

.hwr-spec-table__row:not(:last-child) {
	border-bottom: 1px solid hsla(214, 36%, 9%, 0.1);
}

.hwr-spec-table__row:nth-child(even) {
	background-color: var(--hwr-spec-stripe, #f5f5f5);
}

.hwr-spec-table__row:nth-child(odd) {
	background-color: #fff;
}

/* Cells */
.hwr-spec-table__cell {
	font-size: 15px;
	line-height: 1.45;
	color: #333;
}
.hwr-spec-table__cell--value {
	color: #000;
}

/* Mobile: stack into label + value */
@media (max-width: 478px) {
	.hwr-spec-table__header {
		display: none;
	}
	.hwr-spec-table__row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 16px;
	}
	.hwr-spec-table__cell--spec {
		font-weight: 700;
		color: var(--hwr-accent, #2d8fd5);
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
}