/*!
 * Location: /assets/css/stm-footer-accordion.css
 * Purpose:
 * - Tablet/Mobile footer refinements:
 *   1) Logo + "Got Questions?" align in one row (logo left, help right) with responsive sizing
 *   2) Convert right-side columns into premium accordion dropdown buttons (with arrow)
 *   3) Mobile UX polish:
 *      - Remove ugly tap/selection highlight after closing
 *      - Footer menu text sizing + spacing (recommended)
 * - Desktop remains unchanged (menus always visible) + desktop arrow hidden.
 *
 * Related PHP:
 * - /template-parts/footer/footer.php
 *
 * Related JS:
 * - /assets/js/stm-footer-accordion.js
 *
 * Linkage/Loader:
 * - Enqueued by: /inc/enqueue/frontend.php (handle: stm-footer-accordion)
 */

/* Base */
.stm-footer__brandrow{
	display:block;
}

/* Accordion button base (desktop looks like a heading row) */
.stm-footer__acc-btn{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;

	background:transparent;
	border:0;
	padding:0;
	margin:0 0 14px;

	cursor:default;
	text-align:left;

	/* Mobile tap highlight safety (harmless on desktop) */
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}

.stm-footer__acc-title{
	font-size:18px;
	font-weight:500;
	text-transform:uppercase;
	letter-spacing:0.4px;
}

.stm-footer__acc-icon{
	width:18px;
	height:18px;
	display:inline-block;
	transition:transform .18s ease, background .18s ease, border-color .18s ease;
	position:relative;
	flex:0 0 auto;
	opacity:.85;
}

/* simple chevron (CSS) */
.stm-footer__acc-icon::before{
	content:"";
	position:absolute;
	left:5px;
	top:6px;
	width:7px;
	height:7px;
	border-right:2px solid #111;
	border-bottom:2px solid #111;
	transform:rotate(45deg);
}

/* Panel default */
.stm-footer__acc-panel{
	display:block;
}

/* Desktop: always open + REMOVE arrow (requested) */
@media (min-width: 981px){
	.stm-footer__acc-btn{margin-bottom:14px;}
	.stm-footer__acc-panel{display:block !important;}

	/* Hide dropdown arrow on desktop */
	.stm-footer__acc-icon{display:none !important;}
	.stm-footer__acc-btn{cursor:default;}
}

/* Tablet/Mobile behavior (Premium accordion buttons) */
@media (max-width: 980px){

	/* Layout becomes stacked */
	.stm-footer__grid{grid-template-columns:1fr;gap:26px}
	.stm-footer__cols{grid-template-columns:1fr;gap:0}

	/* Logo + help in one row */
	.stm-footer__brandrow{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:14px;
	}

	.stm-footer .stm-footer__logo-img{
		height:38px !important;
		width:auto !important;
	}

	.stm-footer__help{margin:0;} /* remove extra spacing in row */
	.stm-footer__help-icon img{width:34px;}

	/* === PREMIUM ACCORDION BUTTON (recommended style) === */
	.stm-footer__acc-btn{
		cursor:pointer;
		padding:14px 14px;
		margin:10px 0 0;
		border:1px solid rgba(0,0,0,.10);
		border-radius:14px;
		background:#fff;
		box-shadow:0 8px 18px rgba(0,0,0,.06);

		/* Prevent “selected text” feeling on tap */
		user-select:none;
		-webkit-user-select:none;
		-ms-user-select:none;
	}

	.stm-footer__acc-title{
		font-size:16px;
		font-weight:800;
		letter-spacing:.4px;
	}

	/* Arrow in a small pill */
	.stm-footer__acc-icon{
		width:34px;
		height:34px;
		border-radius:10px;
		border:1px solid rgba(0,0,0,.10);
		background:#f7f7f7;
		display:flex;
		align-items:center;
		justify-content:center;
		opacity:1;
	}

	/* Re-center chevron for pill */
	.stm-footer__acc-icon::before{
		left:auto;
		top:auto;
	}

	/* ✅ Focus: only for keyboard users (no “stuck highlight” after tapping) */
	.stm-footer__acc-btn:focus{
		outline:0;
		box-shadow:0 8px 18px rgba(0,0,0,.06);
	}
	.stm-footer__acc-btn:focus-visible{
		outline:0;
		box-shadow:0 0 0 3px rgba(255,122,0,.25), 0 8px 18px rgba(0,0,0,.06);
	}

	/* Panel collapsed by default (JS sets aria, CSS supports) */
	.stm-footer__acc-panel{
		display:none;
		padding:10px 10px 14px;
	}

	/* Expanded state */
	.stm-footer__col[data-stm-open="1"] .stm-footer__acc-panel{
		display:block;
		background:#fff;
		border:1px solid rgba(0,0,0,.08);
		border-radius:14px;
		margin:8px 0 0;
		box-shadow:0 10px 22px rgba(0,0,0,.06);
	}

	.stm-footer__col[data-stm-open="1"] .stm-footer__acc-icon{
		transform:rotate(180deg);
		background:#fff3e8;
		border-color:rgba(255,122,0,.35);
	}

	/* ✅ Footer menu text sizing + spacing (recommended) */
	.stm-footer__acc-panel .stm-footer__menu{
		display:flex;
		flex-direction:column;
		gap:0; /* we will use padding on links */
		margin:0;
		padding:2px 0;
		list-style:none;

		/* Prevent long-press selection glow */
		-webkit-tap-highlight-color: transparent;
		tap-highlight-color: transparent;
	}

	.stm-footer__acc-panel .stm-footer__menu a{
		display:block;
		padding:10px 10px;
		border-radius:10px;
		text-decoration:none;

		font-size:14px;
		line-height:1.25;
		font-weight:600;
		color:rgba(0,0,0,.85);

		/* prevent “selection stays” feel */
		user-select:none;
		-webkit-user-select:none;
		-ms-user-select:none;

		-webkit-tap-highlight-color: transparent;
		tap-highlight-color: transparent;
	}

	.stm-footer__acc-panel .stm-footer__menu a:hover{
		background:rgba(0,0,0,.04);
		color:#000;
	}

	/* Also remove default focus ring on tap, keep for keyboard */
	.stm-footer__acc-panel .stm-footer__menu a:focus{ outline:0; }
	.stm-footer__acc-panel .stm-footer__menu a:focus-visible{
		outline:0;
		box-shadow:0 0 0 3px rgba(255,122,0,.18);
	}

}

/* Small phones */
@media (max-width: 420px){
	.stm-footer .stm-footer__logo-img{
		height:34px !important;
		width:auto !important;
	}

	.stm-footer__help-icon img{width:30px;}

	.stm-footer__acc-btn{padding:12px 12px;border-radius:12px;}
	.stm-footer__col[data-stm-open="1"] .stm-footer__acc-panel{border-radius:12px;}

	/* Slightly tighter menu on very small screens */
	.stm-footer__acc-panel .stm-footer__menu a{
		padding:9px 10px;
		font-size:13.5px;
	}
}