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

/**
 * Reset Bricks root font-size to standard 16px base
 *
 * Bricks uses 62.5% (10px) by default for easier REM calculations,
 * but our Design System is built on 16px standard base.
 */
html {
	font-size: 100% !important; /* 16px base (browser standard) */
	margin: 0;
	padding: 0;
	min-height: 100%;
}

/**
 * Prevent horizontal scrolling
 * Note: overflow-x on html can cause scroll issues on mobile,
 * so we only apply it to body with max-width constraint
 */
body {
	max-width: 100vw;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	min-height: 100%;
}

/**
 * Automatic Wavy Dividers between Sections
 * Color is set dynamically via JavaScript based on previous section's background
 */
.brxe-section,
footer {
	position: relative;
}

/* Wave divider at top - only shows when JS adds the class */
.brxe-section.has-wave-divider::before,
footer.has-wave-divider::before {
	content: '';
	position: absolute;
	top: -1px; /* Slight overlap to prevent gaps */
	left: 0;
	width: 100%;
	height: var(--space-1, 12px); /* Mobile: very subtle height */
	background-image: var(--wave-svg); /* Set dynamically by JavaScript */
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top;
	pointer-events: none;
	z-index: 0; /* Behind content */
}

/* Special positioning for gradient sections - wave in the middle */
.brxe-section.has-gradient-wave::before {
	top: 50%;
	transform: translateY(-50%);
}

/* Tablet: small wave height */
@media (min-width: 768px) {
	.brxe-section.has-wave-divider::before,
	footer.has-wave-divider::before {
		height: var(--space-2, 16px);
	}
}

/* Desktop: medium wave height */
@media (min-width: 1024px) {
	.brxe-section.has-wave-divider::before,
	footer.has-wave-divider::before {
		height: var(--space-3, 24px);
	}
}

/* Prevent horizontal overflow from waves */
body {
	overflow-x: hidden;
}

/**
 * Fix for dropdown menus being clipped by header
 * Ensure header and navigation containers don't clip dropdowns
 */
header,
.brxe-section:has(.bricks-nav-menu),
.bricks-nav-menu-wrapper {
	overflow: visible !important;
}

/* Ensure dropdown menus have proper z-index */
.bricks-nav-menu .sub-menu,
.bricks-nav-menu .brx-submenu-positioned {
	z-index: var(--z-dropdown, 1000);
}