/*
 Theme Name:   Hello Elementor BMXA
 Theme URI:    https://bmxauctions.com
 Description:  BMXAuctions custom child theme of Hello Elementor. Overrides header.php and footer.php to provide the site-wide BMXAuctions chrome (black header with logo + search + nav, secondary nav strip, matching footer). Inherits everything else from hello-elementor.
 Author:       BMXAuctions
 Author URI:   https://bmxauctions.com
 Template:     hello-elementor
 Version:      1.1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hello-elementor-bmxa
*/

/* ============================================================================
   BMXA — site-wide header & footer styles
   ============================================================================ */

:root {
	--bmxa-black: #0a0a0a;
	--bmxa-orange: #e05a00;
	--bmxa-white: #ffffff;
	--bmxa-light-gray: #f8f8f8;
	--bmxa-border-gray: #e5e5e5;
	--bmxa-text-gray: #666;
	--bmxa-muted-white: #ccc;
	--bmxa-radius: 4px;
}


/* ----------------------------------------------------------------------------
   Header — black bar (logo, search, primary nav)
   ---------------------------------------------------------------------------- */

.bmxa-header {
	background: var(--bmxa-black);
	color: var(--bmxa-white);
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #1a1a1a;
}

.bmxa-header-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 24px;
}

.bmxa-logo-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.bmxa-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

/* Logo size — selector is scoped to header.bmxa-header so specificity (0,1,2)
   beats WooCommerce's `body.woocommerce img` / `.woocommerce-page img` rules
   (0,1,1) on cart/checkout/my-account/browse. v1.0.8 fix for site-wide
   logo blowout (was rendering at natural 895x448 on Woo-templated pages). */
header.bmxa-header .bmxa-logo-img {
	height: 64px;
	width: auto;
	display: block;
}

header.bmxa-header .bmxa-pro-badge-header {
	height: 52px;
	width: auto;
	display: block;
	margin-left: 8px;
}

/* Search */
.bmxa-search {
	flex: 1;
	max-width: 600px;
	position: relative;
}

.bmxa-search form {
	display: flex;
	align-items: stretch;
	background: var(--bmxa-white);
	border-radius: var(--bmxa-radius);
	overflow: hidden;
}

.bmxa-search input[type="search"] {
	flex: 1;
	border: none;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--bmxa-black);
	background: transparent;
	outline: none;
}

.bmxa-search input[type="search"]::placeholder {
	color: #888;
}

.bmxa-search button[type="submit"] {
	background: transparent;
	border: none;
	padding: 0 14px;
	cursor: pointer;
	color: #555;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bmxa-search button[type="submit"]:hover {
	color: var(--bmxa-orange);
}

.bmxa-search button[type="submit"] svg {
	width: 18px;
	height: 18px;
}

/* Primary nav */
.bmxa-primary-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bmxa-primary-nav a {
	color: var(--bmxa-white) !important;
	text-decoration: none;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--bmxa-radius);
	transition: color 0.15s ease, background 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.bmxa-primary-nav a:hover {
	color: var(--bmxa-orange) !important;
}

.bmxa-primary-nav .bmxa-cta-login {
	background: var(--bmxa-orange);
	color: var(--bmxa-white) !important;
}

.bmxa-primary-nav .bmxa-cta-login:hover {
	background: var(--bmxa-white);
	color: var(--bmxa-orange) !important;
}

/* User menu (logged in) */
.bmxa-user-menu {
	position: relative;
}

.bmxa-user-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bmxa-white) !important;
	text-decoration: none;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 700;
	border-radius: var(--bmxa-radius);
	cursor: pointer;
	background: transparent !important;
	border: none !important;
	font-family: inherit;
	box-shadow: none !important;
}

.bmxa-user-menu-trigger:hover,
.bmxa-user-menu-trigger:focus,
.bmxa-user-menu-trigger:active {
	color: var(--bmxa-orange) !important;
	background: transparent !important;
	outline: none;
}

.bmxa-user-menu-trigger .bmxa-pro-pill {
	display: inline-block;
	background: var(--bmxa-orange);
	color: var(--bmxa-white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	margin-left: 2px;
}

.bmxa-user-menu-trigger .bmxa-caret {
	font-size: 10px;
	margin-left: 2px;
}

.bmxa-user-menu-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	background: var(--bmxa-white);
	border: 1px solid var(--bmxa-border-gray);
	border-radius: var(--bmxa-radius);
	min-width: 220px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	display: none;
	padding: 4px 0;
}

.bmxa-user-menu.open .bmxa-user-menu-dropdown {
	display: block;
}

.bmxa-user-menu-dropdown a {
	display: block;
	padding: 10px 16px;
	color: var(--bmxa-black) !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	background: var(--bmxa-white) !important;
	transition: background 0.12s ease, color 0.12s ease;
}

.bmxa-user-menu-dropdown a:hover {
	background: var(--bmxa-light-gray) !important;
	color: var(--bmxa-orange) !important;
}

/* Section divider — visual separator above this item.
   Items with this class get a top border + small vertical breathing room
   above to mark the start of a new section in the dropdown. */
.bmxa-user-menu-dropdown a.bmxa-user-menu-section-divider {
	border-top: 1px solid var(--bmxa-border-gray);
	margin-top: 4px;
	padding-top: 12px;
}

/* "Become a Seller" CTA — orange to draw attention, BaT-style.
   This is the conversion path for non-vendors. Visually echoes the
   site's other PRO-conversion CTAs (Go PRO banner, footer link). */
.bmxa-user-menu-dropdown a.bmxa-user-menu-cta {
	color: var(--bmxa-orange) !important;
	font-weight: 700;
}

.bmxa-user-menu-dropdown a.bmxa-user-menu-cta:hover {
	background: var(--bmxa-orange) !important;
	color: var(--bmxa-white) !important;
}

/* Log Out — visually deprioritized. Smaller, muted color, less emphasis.
   Destructive-action-by-mistake risk: if Log Out blends with nav links,
   users misclick. Differentiate it. */
.bmxa-user-menu-dropdown a.bmxa-user-menu-logout {
	color: var(--bmxa-text-gray) !important;
	font-size: 13px;
	font-weight: 500;
}

.bmxa-user-menu-dropdown a.bmxa-user-menu-logout:hover {
	color: var(--bmxa-black) !important;
}


/* ----------------------------------------------------------------------------
   Secondary nav strip — white bar beneath header
   ---------------------------------------------------------------------------- */

.bmxa-secondary-nav {
	background: var(--bmxa-white);
	border-bottom: 1px solid var(--bmxa-border-gray);
	font-family: Arial, Helvetica, sans-serif;
}

.bmxa-secondary-nav-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bmxa-secondary-nav-inner::-webkit-scrollbar { display: none; }
.bmxa-secondary-nav-inner { scrollbar-width: none; }

.bmxa-secondary-nav a {
	color: var(--bmxa-black);
	text-decoration: none;
	padding: 14px 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.bmxa-secondary-nav a:hover,
.bmxa-secondary-nav a.active {
	color: var(--bmxa-orange);
	border-bottom-color: var(--bmxa-orange);
}


/* ----------------------------------------------------------------------------
   Mobile responsiveness — collapse nav into hamburger
   ---------------------------------------------------------------------------- */

.bmxa-mobile-toggle {
	display: none;
	background: transparent;
	border: none;
	color: var(--bmxa-white);
	cursor: pointer;
	padding: 8px;
}

.bmxa-mobile-toggle svg {
	width: 24px;
	height: 24px;
}

@media (max-width: 900px) {
	.bmxa-header-inner {
		gap: 12px;
		padding: 12px 16px;
	}

	.bmxa-search {
		max-width: 100%;
	}

	.bmxa-primary-nav {
		display: none;
	}

	.bmxa-mobile-toggle {
		display: inline-flex;
	}

	/* Mobile menu — when toggled open */
	.bmxa-header.mobile-open .bmxa-primary-nav {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bmxa-black);
		flex-direction: column;
		gap: 0;
		border-top: 1px solid #1a1a1a;
		padding: 8px 0;
		z-index: 999;
	}

	.bmxa-header.mobile-open .bmxa-primary-nav a {
		padding: 14px 24px;
		border-radius: 0;
		border-bottom: 1px solid #1a1a1a;
	}

	.bmxa-header.mobile-open .bmxa-primary-nav a:last-child {
		border-bottom: none;
	}

	header.bmxa-header .bmxa-logo-img {
		height: 48px;
	}

	header.bmxa-header .bmxa-pro-badge-header {
		height: 40px;
	}
}

@media (max-width: 600px) {
	.bmxa-header-inner {
		flex-wrap: wrap;
	}

	.bmxa-search {
		order: 3;
		flex-basis: 100%;
		margin-top: 8px;
	}
}


/* ----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------
   Path B layout: brand block stacked on top, 4 link columns full-width
   below. This avoids the wrapping bug that occurred when brand sat
   alongside the cols in a flex container.
   ---------------------------------------------------------------------------- */

.bmxa-footer {
	background: var(--bmxa-black);
	color: var(--bmxa-muted-white);
	font-family: Arial, Helvetica, sans-serif;
	padding: 48px 24px 32px;
	margin-top: 60px;
}

.bmxa-footer-inner {
	max-width: 1400px;
	margin: 0 auto;
}

.bmxa-footer-top {
	display: block;
	padding-bottom: 32px;
	border-bottom: 1px solid #1a1a1a;
}

.bmxa-footer-brand {
	margin-bottom: 32px;
	max-width: 400px;
}

.bmxa-footer-logo {
	height: 64px;
	width: auto;
	display: block;
	margin-bottom: 12px;
}

.bmxa-footer-tagline {
	font-size: 13px;
	color: var(--bmxa-muted-white);
	margin: 0;
	max-width: 280px;
	line-height: 1.5;
}

.bmxa-footer-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.bmxa-footer-col h4 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bmxa-white);
	margin: 0 0 14px;
}

.bmxa-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bmxa-footer-col li {
	margin-bottom: 8px;
}

.bmxa-footer-col a {
	color: var(--bmxa-muted-white);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.15s ease;
}

.bmxa-footer-col a:hover {
	color: var(--bmxa-orange);
}

/* Reset :visited so visited pages don't randomly highlight */
.bmxa-footer a:visited,
.bmxa-footer-col a:visited {
	color: inherit;
}

/* Highlighted footer links — Go PRO and BMXID Experts.
   Persistent orange to draw attention to upgrade/community paths. */
.bmxa-footer-col a.bmxa-footer-link-highlight,
.bmxa-footer-col a.bmxa-footer-link-highlight:visited {
	color: var(--bmxa-orange);
	font-weight: 700;
}

.bmxa-footer-col a.bmxa-footer-link-highlight:hover {
	color: var(--bmxa-white);
}

.bmxa-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 24px;
	font-size: 12px;
}

.bmxa-footer-copyright {
	color: var(--bmxa-muted-white);
}

.bmxa-footer-social {
	display: flex;
	gap: 12px;
}

.bmxa-footer-social a {
	color: var(--bmxa-muted-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid #2a2a2a;
	border-radius: var(--bmxa-radius);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.bmxa-footer-social a:hover {
	color: var(--bmxa-orange);
	border-color: var(--bmxa-orange);
}

.bmxa-footer-social svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 900px) {
	.bmxa-footer-cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.bmxa-footer-cols {
		grid-template-columns: 1fr;
	}
}


/* ============================================================================
   WC My Account navigation — sidebar nav on /account-settings/
   ============================================================================
   The nav links were rendering as default browser links (pink/purple,
   underlined, with bullet markers). v1.0.9 styles them as a clean
   vertical list matching brand: black text, no underline, orange
   hover, no bullets, comfortable padding.

   WC's HTML structure:
     <nav class="woocommerce-MyAccount-navigation">
       <ul>
         <li class="woocommerce-MyAccount-navigation-link
                    woocommerce-MyAccount-navigation-link--dashboard
                    is-active">
           <a href="...">Dashboard</a>
         </li>
         ...
       </ul>
     </nav>
   ============================================================================ */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bmxa-border-gray);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--bmxa-border-gray);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 16px;
	color: var(--bmxa-black);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	font-family: Arial, Helvetica, sans-serif;
	transition: background 0.15s ease, color 0.15s ease, border-left-color 0.15s ease;
	border-left: 3px solid transparent;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus {
	background: var(--bmxa-light-gray);
	color: var(--bmxa-orange);
	border-left-color: var(--bmxa-orange);
}

/* Active item — current endpoint user is viewing */
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--bmxa-light-gray);
	color: var(--bmxa-orange);
	border-left-color: var(--bmxa-orange);
}

/* Reset visited so nav doesn't randomly turn pink */
.woocommerce-MyAccount-navigation a:visited {
	color: var(--bmxa-black);
}

.woocommerce-MyAccount-navigation li.is-active a:visited {
	color: var(--bmxa-orange);
}