/* =============================================================================
 * TOTAL Sub-Services Navigator 100 — frontend styles
 *
 * Self-contained: no resets, no global overrides — every selector scoped under
 * .tssn-100 so the widget can drop into any theme without collisions.
 * Variables are local to .tssn-100 so Elementor's Style-tab controls can
 * override individual props via inline selectors without leaking globally.
 *
 * Built to MD3 conventions: 48px+ touch targets, prefers-reduced-motion
 * respected, focus-visible rings, RTL-safe via logical properties.
 * ===========================================================================*/

.tssn-100 {
	/* Internal tokens — overridable via Elementor Style controls */
	--tssn-motion-short: 200ms;
	--tssn-motion-ease: cubic-bezier(0.2, 0, 0, 1);
	--tssn-state-hover: 0.06;
	--tssn-state-focus: 0.10;

	display: block;
	width: 100%;
	border: 1px solid var(--tssn-border, #E0E0E4);
	box-sizing: border-box;
	font-family: inherit;
	color: inherit;
	direction: inherit;
}

.tssn-100 *,
.tssn-100 *::before,
.tssn-100 *::after { box-sizing: border-box; }

/* ---- topbar ------------------------------------------------------------- */
.tssn-100__topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block-end: 16px;
}

.tssn-100__heading { flex: 1 1 auto; margin: 0; min-width: 0; }

.tssn-100__eyebrow {
	display: block;
	margin: 0 0 4px;
	color: #CC3366;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.tssn-100__title {
	margin: 0;
	color: #07174A;
	font-size: 22px;
	line-height: 1.27;
	font-weight: 800;
}

/* ---- nav arrows --------------------------------------------------------- */
.tssn-100__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.tssn-100__nav-btn {
	width: 44px; height: 44px;
	border: 1.5px solid #A1A1A9;
	border-radius: 9999px;
	background: #FFFFFF;
	color: #07174A;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color var(--tssn-motion-short) var(--tssn-motion-ease),
	            color var(--tssn-motion-short) var(--tssn-motion-ease),
	            border-color var(--tssn-motion-short) var(--tssn-motion-ease);
}

.tssn-100__nav-btn:hover {
	background-color: #07174A;
	color: #FFFFFF;
	border-color: #07174A;
}

.tssn-100__nav-btn:focus-visible {
	outline: 2px solid #0056A7;
	outline-offset: 2px;
}

.tssn-100__nav-btn[disabled] {
	opacity: 0.32;
	cursor: not-allowed;
	pointer-events: none;
}

.tssn-100__arrow-svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* RTL: flip the chevron polylines so visual direction stays intuitive
   (Previous button's chevron points right in RTL, Next points left). */
[dir="rtl"] .tssn-100__nav-btn .tssn-100__arrow-svg {
	transform: scaleX(-1);
}

/* ---- track / cards ------------------------------------------------------ */
.tssn-100__track {
	list-style: none;
	margin: 0;
	padding: 4px 20px 16px;
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 20px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.tssn-100__track::-webkit-scrollbar { display: none; }

.tssn-100__track:focus-visible {
	outline: 2px solid #0056A7;
	outline-offset: -2px;
	border-radius: 12px;
}

.tssn-100__item {
	list-style: none;
	margin: 0;
	padding: 0;
	display: contents; /* the <a> is the snap target, not the <li> */
}

.tssn-100__card {
	flex: 0 0 360px;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 96px 1fr;
	min-height: 96px;
	background: #FFFFFF;
	border: 1px solid #E0E0E4;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	transition: transform var(--tssn-motion-short) var(--tssn-motion-ease),
	            box-shadow var(--tssn-motion-short) var(--tssn-motion-ease),
	            border-color var(--tssn-motion-short) var(--tssn-motion-ease);
}

/* State layer overlay (MD3 hover/focus tint) */
.tssn-100__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #07174A;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tssn-motion-short);
}

.tssn-100__card:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px 0 rgba(7, 23, 74, 0.10), 0 4px 12px 0 rgba(7, 23, 74, 0.08);
}
.tssn-100__card:hover::before  { opacity: var(--tssn-state-hover); }

.tssn-100__card:focus-visible {
	outline: 2px solid #0056A7;
	outline-offset: 2px;
}
.tssn-100__card:focus-visible::before { opacity: var(--tssn-state-focus); }

/* ---- icon block --------------------------------------------------------- */
.tssn-100__icon {
	background: #07174A;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.tssn-100__icon::after {
	content: '';
	position: absolute;
	inset-inline-end: 0;
	top: 18%;
	bottom: 18%;
	width: 3px;
	background: #CC3366;
	border-radius: 9999px;
}

.tssn-100__icon-svg {
	width: 32px;
	height: 32px;
	display: block;
	color: inherit;
}

/* ---- card content ------------------------------------------------------- */
.tssn-100__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 14px 16px;
	min-width: 0;
}

.tssn-100__card-title {
	margin: 0 0 4px;
	color: #07174A;
	font-size: 16px;
	line-height: 1.37;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tssn-100__card-desc {
	margin: 0;
	color: #4B4B52;
	font-size: 13px;
	line-height: 1.38;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tssn-100__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	color: #0056A7;
	font-size: 14px;
	font-weight: 600;
}

.tssn-100__cta-text {
	display: inline;
}

.tssn-100__cta-arrow {
	width: 16px;
	height: 16px;
	display: inline-block;
	transition: transform var(--tssn-motion-short) var(--tssn-motion-ease);
}

/* RTL flip for the leftward arrow (it should point in the reading direction) */
[dir="rtl"] .tssn-100__cta-arrow {
	transform: scaleX(-1);
}

.tssn-100__card:hover .tssn-100__cta-arrow {
	transform: translateX(3px);
}
[dir="rtl"] .tssn-100__card:hover .tssn-100__cta-arrow {
	transform: scaleX(-1) translateX(3px);
}

/* ---- editor empty state ------------------------------------------------- */
.tssn-100__editor-empty,
.tssn-100__editor-placeholder {
	padding: 20px;
	background: #F4F4F4;
	border: 1px dashed #A1A1A9;
	border-radius: 12px;
	color: #4B4B52;
	font-size: 13px;
	line-height: 1.5;
}
.tssn-100__editor-empty strong,
.tssn-100__editor-placeholder strong {
	display: block;
	color: #07174A;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 4px;
}
.tssn-100__editor-empty p,
.tssn-100__editor-placeholder p {
	margin: 4px 0 0;
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 599px) {
	.tssn-100__topbar { flex-wrap: wrap; gap: 12px; padding-block-end: 12px; }
	.tssn-100__nav { display: none; }
	.tssn-100__track { padding: 4px 16px 12px; gap: 10px; scroll-padding-inline: 16px; }
	.tssn-100__title { font-size: 18px; line-height: 1.33; }
	.tssn-100__card { flex-basis: 86%; max-width: 320px; grid-template-columns: 80px 1fr; }
	.tssn-100__icon-svg { width: 28px; height: 28px; }
}

/* ---- prefers-reduced-motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tssn-100__track { scroll-behavior: auto; }
	.tssn-100,
	.tssn-100 *,
	.tssn-100 *::before {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}