/**
 * Shop Customizations – Account Dashboard NetSuite Info
 *
 * Styles the User Profile and Practice Information sections rendered by
 * SC_Feature_Account_Dashboard on the WooCommerce My Account dashboard.
 *
 * Layout:
 *   - .sc-account-fields is a CSS Grid <dl>. Each .sc-account-field is a
 *     grid row containing one <dt> (label) and one <dd> (value).
 *   - The Practice Information section nests a Customer Care callout
 *     (.sc-account-message) and a Linked Accounts subsection
 *     (.sc-account-linked) below the practice fields.
 *   - On narrow viewports the label/value pairs stack vertically.
 *
 * Greeting cleanup:
 *   The :not(:has(*)) rule on direct paragraph children of
 *   .woocommerce-MyAccount-content hides the leftover <p></p> wrappers
 *   from WC's default greeting paragraphs, whose inner content is nulled
 *   out by the feature's gettext filter. We can't use :empty here because
 *   those <p> tags contain whitespace from WC's surrounding template.
 */

.woocommerce-MyAccount-content {
	--myaccount-base-font-size: .9375rem;
}

/* Hide WC's emptied greeting paragraphs */
.woocommerce-MyAccount-content > p:not(:has(*)) {
	display: none;
}

/* Section container */
.sc-account-section {
	background: unset;
	border: 1px solid #ddd;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-block: 2.5rem;
}

.sc-account-section:first-of-type {
	margin-top: 0;
}

.sc-account-section h3 {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0 0.5rem;
	display: inline;
	position: relative;
	background: white;
	top: -1.75rem;
	height: 1px;
	overflow: visible;
}

.sc-account-section h4 {
	margin: 0 0 0.5rem 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Field grid (<dl>) */
.sc-account-fields,
.sc-account-linked-list {
	display: grid;
	gap: .625rem;
	margin: 0;
	padding: 0;
	font-size: var(--myaccount-base-font-size);
}

.sc-account-field:not(:last-of-type) {
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: .5rem;
}

@media (min-width: 460px) {
	.sc-account-fields,
	.sc-account-linked-list {
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	}
	
	.sc-account-field {
		padding: 1rem;
		border: 1px solid #e5e5e5;
		border-radius: .375rem;
	}
}

.sc-account-field dt {
	font-weight: 600;
	margin: 0 0 .5rem 0;
	line-height: 1;
}

.sc-account-field dd {
	margin: 0;
	color: #1a1a1a;
}

/* Customer Care callout (nested inside Practice Information) */
.sc-account-message {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--gold-10);
	border: solid 1px var(--wp--preset--color--gold-30) !important;
	border-radius: .5rem;
}

.sc-account-message p:not(.sc-account-actions) {
	font-size: var(--myaccount-base-font-size);
}

.sc-account-message p {
	margin: 0 0 1rem 0;
}

.sc-account-message p:last-child {
	margin-bottom: 0;
}

/* Linked Accounts subsection (also nested) */
.sc-account-linked {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
	font-size: var(--myaccount-base-font-size);
}

.sc-account-linked-description {
	margin: 0 0 1rem 0;
	font-size: var(--myaccount-base-font-size);
}


.sc-account-linked-item {
	display: grid;
	gap: .5rem;
	padding: 1rem;
	border: 1px solid #e5e5e5;
	border-radius: .375rem;
}

.sc-account-linked-name {
	font-weight: 600;
	line-height: 1;
	
}

.sc-account-linked-email {
	font-variant-numeric: tabular-nums;
}

/* Action buttons */
.sc-account-actions {
	margin: 1rem 0 0 0;
}

/* "(not you? Log out)" hint inline next to the Name value */
.sc-account-not-you {
	display: inline-block;
	margin-left: 0.5em;
	font-size: var(--wp--preset--font-size--x-small);
}

.sc-account-not-you a {
	color: var(--wp--preset--color--blue);
}

/* Responsive: stack labels above values on narrow screens */
@media (max-width: 600px) {
	.sc-account-field,
	.sc-account-linked-item {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.sc-account-field dt,
	.sc-account-linked-name {
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}
}


/**
 * My Account navigation icons.
 *
 * WC renders each menu item as:
 *   <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--{key}">
 *     <a href="...">{Label}</a>
 *   </li>
 *
 * The {key} comes from the woocommerce_account_menu_items array, not the
 * URL slug. SC_Feature_Multi_Address replaces the default 'edit-address'
 * key with 'addresses', so we target --addresses below even though some
 * stock WC installs would use --edit-address instead.
 *
 * We attach a ::before pseudo-element to each anchor and paint it with a
 * CSS mask sourced from an inline SVG data URI. background-color: currentColor
 * makes the icon inherit the link's text color, so hover/active/focus states
 * recolor the icon automatically with no per-state CSS needed.
 *
 * mask-mode: alpha is set explicitly so the mask uses the SVG's alpha channel
 * rather than luminance (which would render black strokes as transparent).
 *
 * All literal spaces inside the data URI are encoded as %20. Unencoded
 * spaces work for simple SVGs (rects, circles) but break path data with
 * arc commands in some browsers — fully encoding spaces is the safest
 * choice and costs nothing.
 */

.woocommerce-MyAccount-navigation-link a {
	display: flex !important;
	align-items: center;
	gap: 0.6em;
}

.woocommerce-MyAccount-navigation-link a::before {
	content: '';
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
	background-color: currentColor;
	mask-mode: alpha;
	-webkit-mask-mode: alpha;
	mask-position: center;
	-webkit-mask-position: center;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* Dashboard — 2x2 grid of rounded rectangles */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='9'%20rx='1'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='5'%20rx='1'/%3E%3Crect%20x='14'%20y='12'%20width='7'%20height='9'%20rx='1'/%3E%3Crect%20x='3'%20y='16'%20width='7'%20height='5'%20rx='1'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='9'%20rx='1'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='5'%20rx='1'/%3E%3Crect%20x='14'%20y='12'%20width='7'%20height='9'%20rx='1'/%3E%3Crect%20x='3'%20y='16'%20width='7'%20height='5'%20rx='1'/%3E%3C/svg%3E");
}

/* User Profile — person bust inside a rounded square */
.woocommerce-MyAccount-navigation-link--edit-account a::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'/%3E%3Ccircle%20cx='12'%20cy='9.5'%20r='2.5'/%3E%3Cpath%20d='M7%2018c0-2.5%202.2-4.5%205-4.5s5%202%205%204.5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'/%3E%3Ccircle%20cx='12'%20cy='9.5'%20r='2.5'/%3E%3Cpath%20d='M7%2018c0-2.5%202.2-4.5%205-4.5s5%202%205%204.5'/%3E%3C/svg%3E");
}

/* Addresses — map pin */
.woocommerce-MyAccount-navigation-link--addresses a::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s7-7.5%207-13a7%207%200%200%200-14%200c0%205.5%207%2013%207%2013z'/%3E%3Ccircle%20cx='12'%20cy='9'%20r='2.5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s7-7.5%207-13a7%207%200%200%200-14%200c0%205.5%207%2013%207%2013z'/%3E%3Ccircle%20cx='12'%20cy='9'%20r='2.5'/%3E%3C/svg%3E");
}

/* Orders — shopping bag */
.woocommerce-MyAccount-navigation-link--orders a::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%208h14l-1.2%2011.2a1%201%200%200%201-1%20.8H7.2a1%201%200%200%201-1-.8L5%208z'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%208h14l-1.2%2011.2a1%201%200%200%201-1%20.8H7.2a1%201%200%200%201-1-.8L5%208z'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'/%3E%3C/svg%3E");
}

/* Logout — door with arrow */
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'/%3E%3Cpolyline%20points='16%2017%2021%2012%2016%207'/%3E%3Cline%20x1='21'%20y1='12'%20x2='9'%20y2='12'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'/%3E%3Cpolyline%20points='16%2017%2021%2012%2016%207'/%3E%3Cline%20x1='21'%20y1='12'%20x2='9'%20y2='12'/%3E%3C/svg%3E");
}