/**
 * How to Invest tabs — mobile-only styling.
 *
 * Scoped to the fund-page "How to Invest" Nested Tabs widget, which
 * how-to-invest-tabs.js tags with `.amplify-htinvest`. Everything here is gated
 * behind the <=767px breakpoint so the desktop tabs are untouched.
 *
 * 1. (+) / (-) affordance on each accordion title (collapsed / expanded).
 * 2. +15px top margin on the SECOND icon list inside the Individual Investor
 *    tab (the two "How to invest" / fee-style lists) — requirement is mobile
 *    only and second list only.
 */

@media (max-width: 767px) {

	/* --- 1. Collapse affordance: (+) when closed, (-) when open --- */
	.amplify-htinvest .e-n-tabs-heading .e-n-tab-title {
		position: relative;
		/* keep room for the +/- glyph at the right edge */
		padding-right: 2.5em;
		cursor: pointer;
	}

	.amplify-htinvest .e-n-tabs-heading .e-n-tab-title::after {
		content: "+";
		position: absolute;
		right: 0.75em;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.4em;
		line-height: 1;
		font-weight: 400;
		opacity: 0.85;
		pointer-events: none;
	}

	/* Expanded -> minus sign (U+2212) */
	.amplify-htinvest .e-n-tabs-heading .e-n-tab-title[aria-expanded="true"]::after {
		content: "\2212";
	}
}

/* --- 2. Mobile-only: +15px above the second Individual-Investor icon list --- */
@media (max-width: 767px) {
	.amplify-htinvest .e-n-tabs-content > [data-tab-index="1"] .elementor-widget-icon-list ~ .elementor-widget-icon-list {
		margin-top: 15px;
	}
}

/* --- 3. Mobile-only: inner tab content padding = 10px 0 10px 10px --- */
/*
 * Elementor applies container padding from the physical --padding-* custom
 * properties it writes per-element. We override the same four vars so the value
 * flows through Elementor's own .e-con padding rules — no physical/logical
 * conflict and no !important. Applies to both tab panels.
 *
 * Specificity note: Elementor's per-element mobile rule is
 * `.elementor-NNN .elementor-element.elementor-element-XXXX` = (0,3,0) and (in
 * prod) loads AFTER this stylesheet, so a (0,3,0) selector here would tie and
 * LOSE the cascade. Including `.elementor-widget-n-tabs` makes this (0,4,0),
 * which wins regardless of load order.
 */
@media (max-width: 767px) {
	.elementor-widget-n-tabs.amplify-htinvest .e-n-tabs-content > .e-con {
		--padding-top: 10px;
		--padding-right: 0px;
		--padding-bottom: 10px;
		--padding-left: 10px;
	}
}