/**
 * NHCIBOR My Account styles
 *
 * Styles WooCommerce's /my-account/ layout — sidebar navigation, content
 * area headers, buttons — to match the site's visual language:
 *  - Roboto Condensed labels in the sidebar
 *  - Peach accent (left border + background) on the active item
 *  - Flat, no rounded corners
 *  - Dark (#322d2d) hover state for navigation items
 *  - #e5e5e5 hairline borders and dividers
 *
 * Scoped to .woocommerce-MyAccount-navigation and .woocommerce-MyAccount-content
 * so we don't affect WC output elsewhere on the site (cart, checkout).
 */

:root {
	--nhc-ma-ink:          #252121;
	--nhc-ma-ink-soft:     #555555;
	--nhc-ma-muted:        #767676;
	--nhc-ma-border:       #e5e5e5;
	--nhc-ma-surface:      #ffffff;
	--nhc-ma-surface-alt:  #f3f3f3;
	--nhc-ma-button:       #322d2d;
	--nhc-ma-button-hover: #1f1c1c;
	--nhc-ma-peach:        #f1dbc4;
	--nhc-ma-peach-light:  #f6e9d8;

	--nhc-ma-font-head: var(--wp--preset--font-family--roboto-condensed, "Roboto Condensed", "Arial Narrow", sans-serif);
	--nhc-ma-font-body: var(--wp--preset--font-family--roboto, "Roboto", "Helvetica Neue", Arial, sans-serif);
}

/* --- Layout: enforce a consistent gap between nav and content ------- */

@media (min-width: 769px) {
	/* WooCommerce's clearfix pseudo-elements break the flex layout of
	   .woocommerce — they're empty table elements for float-clearing from
	   the pre-flexbox era. Disabling them is safe. */
	.woocommerce-account .woocommerce::before,
	.woocommerce-account .woocommerce::after {
		display: none;
	}

	.woocommerce-account .woocommerce {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 48px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 0 0 260px;
		max-width: 260px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* --- Page title ----------------------------------------------------- */

.woocommerce-account .entry-title,
.woocommerce-account h1.page-title {
	font-family: var(--nhc-ma-font-head);
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* --- Sidebar navigation --------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	border: 1px solid var(--nhc-ma-border);
	background: var(--nhc-ma-surface);
	padding: 0;
	margin-bottom: 32px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	padding: 14px 20px;
	font-family: var(--nhc-ma-font-head);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nhc-ma-ink-soft);
	text-decoration: none;
	background: transparent;
	border-left: 4px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--nhc-ma-surface-alt);
	color: var(--nhc-ma-ink);
	outline: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a {
	background: var(--nhc-ma-peach-light);
	color: var(--nhc-ma-ink);
	border-left-color: var(--nhc-ma-peach);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a.is-active {
	background: var(--nhc-ma-peach-light);
	color: var(--nhc-ma-ink);
	border-left-color: var(--nhc-ma-peach);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--nhc-ma-muted);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--nhc-ma-ink);
}

/* Hide the WC Memberships-injected Memberships link. WC Memberships adds
   this via a filter that sometimes re-runs after ours; hiding via CSS is
   the reliable backstop. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--members-area {
	display: none;
}

/* --- Content area --------------------------------------------------- */

.woocommerce-MyAccount-content {
	color: var(--nhc-ma-ink);
	font-family: var(--nhc-ma-font-body);
}

/* WC buttons — match the site's flat dark button treatment. */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-MyAccount-content .woocommerce-Button {
	display: inline-block;
	padding: 12px 28px;
	background: var(--nhc-ma-button);
	color: #ffffff;
	font-family: var(--nhc-ma-font-head);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover {
	background: var(--nhc-ma-button-hover);
	color: #ffffff;
}

/* WC form inputs — match the site's flat input treatment. */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	padding: 10px 14px;
	border: 1px solid var(--nhc-ma-border);
	border-radius: 0;
	background: var(--nhc-ma-surface);
	color: var(--nhc-ma-ink);
	font-family: var(--nhc-ma-font-body);
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 0.15s ease;
}

.woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
	outline: none;
	border-color: var(--nhc-ma-ink);
}

/* WC form row labels. */
.woocommerce-MyAccount-content .woocommerce-form-row label,
.woocommerce-MyAccount-content fieldset legend {
	font-family: var(--nhc-ma-font-head);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nhc-ma-ink);
	margin-bottom: 6px;
}

/* Password-change fieldset. Using a simple top-border separator rather than
   a full bordered box — the content area already has enough visual structure,
   and a boxed fieldset on top of the content surface looked heavy. */
.woocommerce-MyAccount-content fieldset {
	border: 0;
	border-top: 1px solid var(--nhc-ma-border);
	padding: 24px 0 0;
	margin: 32px 0 0;
	background: transparent;
}

.woocommerce-MyAccount-content fieldset legend {
	padding: 0;
	margin-bottom: 16px;
}

/* Notices (messages, errors). */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-notices-wrapper .woocommerce-message {
	background: #e7f4e4;
	color: #1e6e14;
	border-left: 4px solid #1e6e14;
	border-radius: 0;
	padding: 14px 20px;
	font-family: var(--nhc-ma-font-head);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-MyAccount-content .woocommerce-error {
	background: #fce4e4;
	color: #a01c1c;
	border-left: 4px solid #a01c1c;
	border-radius: 0;
	padding: 14px 20px;
	font-family: var(--nhc-ma-font-body);
}

/* --- Mobile: collapse sidebar into a toggleable dropdown ------------ */

/* The toggle button is injected by JS above the <ul>. Hidden by default
   (desktop), shown below the 768px breakpoint. */
.nhcibor-ma-nav-toggle {
	display: none;
	width: 100%;
	appearance: none;
	padding: 16px 20px;
	background: var(--nhc-ma-peach-light);
	border: 0;
	border-bottom: 1px solid var(--nhc-ma-border);
	font-family: var(--nhc-ma-font-head);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nhc-ma-ink);
	text-align: left;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.nhcibor-ma-nav-toggle:focus-visible {
	outline: 2px solid var(--nhc-ma-ink);
	outline-offset: -2px;
}

/* Chevron — rotates when open. */
.nhcibor-ma-nav-toggle::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--nhc-ma-ink);
	border-bottom: 2px solid var(--nhc-ma-ink);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease;
	margin-right: 4px;
	margin-top: -4px;
}

.nhcibor-ma-nav-toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
	margin-top: 4px;
}

@media (max-width: 768px) {
	.nhcibor-ma-nav-toggle {
		display: flex;
	}

	/* Hide the <ul> by default on mobile; JS flips it when toggle clicked. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul.is-open {
		display: block;
	}

	/* Tighten padding on mobile to match the existing override below. */
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 14px 16px;
		font-size: 12px;
	}
}