/**
 * COSECURE Training Category — Widget Styles
 * Scoped under .tcat__ prefix to avoid theme conflicts.
 */

/* ============================================================
   ELEMENTOR WRAPPER NORMALIZATION
   ============================================================ */
.elementor-widget-cs_training_filter_bar .elementor-widget-container,
.elementor-widget-cs_training_list .elementor-widget-container,
.elementor-widget-cs_training_cta .elementor-widget-container {
	padding: 0;
	max-width: 100%;
	overflow-x: hidden;
}

.elementor-widget-cs_training_filter_bar,
.elementor-widget-cs_training_list,
.elementor-widget-cs_training_cta {
	max-width: 100%;
}

.tcat-list-root,
.tcat-bar-root {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: #0b1f24;
	max-width: 100%;
	overflow-x: hidden;
}

.tcat-list-root *,
.tcat-list-root *::before,
.tcat-list-root *::after,
.tcat-bar-root *,
.tcat-bar-root *::before,
.tcat-bar-root *::after {
	box-sizing: border-box;
}

/* Prevent cards and their direct content from exceeding the container.
   Targeted at layout-level elements only, NOT SVG or other intrinsic-
   sized children, so icons keep their fixed dimensions. */
.tcat__list,
.tcat__card,
.tcat__head,
.tcat__panel,
.tcat__desc,
.tcat__aud,
.tcat__out,
.tcat__foot,
.tcat__bigcta {
	max-width: 100%;
	min-width: 0;
}

/* The chip scroll container — overflow-x:auto on the chips itself,
   hidden on the parent bar prevents page-level horizontal scroll. */
.tcat-bar-root .tcat__bar {
	max-width: 100%;
	overflow: hidden;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.tcat-bar-root--sticky .tcat__bar {
	position: sticky;
	z-index: 20;
}

.tcat__bar {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid rgba(11, 31, 36, 0.08);
}

@media (min-width: 640px) {
	.tcat__bar { padding: 12px 24px; }
}

.tcat__chips {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Default to subtle visible scrollbar — matches the design where users
	   can see there's more content to scroll to on narrow viewports. */
	scrollbar-width: thin;
	scrollbar-color: rgba(11, 31, 36, 0.2) transparent;
	padding-bottom: 6px;
}

.tcat__chips::-webkit-scrollbar {
	height: 4px;
}

.tcat__chips::-webkit-scrollbar-track {
	background: transparent;
}

.tcat__chips::-webkit-scrollbar-thumb {
	background: rgba(11, 31, 36, 0.2);
	border-radius: 999px;
}

.tcat__chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	border: 1px solid rgba(11, 31, 36, 0.12);
	background: #fff;
	color: #5b6e72;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	font-family: inherit;
	line-height: 1.2;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	white-space: nowrap;
}

/* Neutralize theme button hover/focus/active bleed on chips. Same problem
   as the accordion head — themes apply red/accent backgrounds to ALL
   <button> elements which bleeds into our chips. */
.tcat__chip:hover {
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	color: #0b1f24 !important;
	border-color: rgba(31, 135, 134, 0.4) !important;
	box-shadow: none !important;
}

.tcat__chip:focus,
.tcat__chip:focus-visible,
.tcat__chip:active {
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	color: #0b1f24 !important;
	outline: none;
}

.tcat__chip:focus-visible {
	outline: 2px solid rgba(31, 135, 134, 0.5) !important;
	outline-offset: 2px;
}

/* Active chip — important on background-image so theme :hover background
   doesn't fight the gradient. The widget's gradient controls override
   the colors but the !important keeps theme out of the way. */
.tcat__chip.is-active,
.tcat__chip.is-active:hover,
.tcat__chip.is-active:focus,
.tcat__chip.is-active:active {
	background-image: linear-gradient(135deg, #1d5e5d 0%, #1f8786 55%, #4fb8b3 100%) !important;
	background-color: transparent !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px rgba(31, 135, 134, 0.25) !important;
}

.tcat__count {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 999px;
	background: #eef3f4;
	color: #5b6e72;
}

.tcat__chip.is-active .tcat__count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* ============================================================
   CARD LIST
   ============================================================ */
.tcat__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tcat__card {
	border: 1px solid rgba(11, 31, 36, 0.12);
	border-radius: 16px;
	background: #fff;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.4s ease, opacity 0.4s ease;
	opacity: 0;
	transform: translateY(12px);
}

.tcat__card.tcat-in {
	opacity: 1;
	transform: none;
}

.tcat__card.is-open {
	border-color: rgba(31, 135, 134, 0.4);
	box-shadow: 0 20px 40px -20px rgba(11, 31, 36, 0.18);
}

.tcat__head {
	width: 100% !important;
	max-width: 100% !important;
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-width: 0 !important;
	box-sizing: border-box;
}

@media (min-width: 480px) {
	.tcat__head {
		align-items: center;
		padding: 16px;
	}
}

@media (min-width: 640px) {
	.tcat__head {
		gap: 20px;
		padding: 22px;
	}
}

@media (min-width: 768px) {
	.tcat__head {
		gap: 24px;
		padding: 28px;
	}
}

/* Neutralize theme button hover/focus/active states — some themes apply
   accent backgrounds (red, brand color, etc.) to ALL <button> elements
   which then bleeds onto our accordion head. Force-reset every state. */
.tcat__head:hover,
.tcat__head:focus,
.tcat__head:focus-visible,
.tcat__head:active,
.tcat__card .tcat__head:hover,
.tcat__card .tcat__head:focus,
.tcat__card:hover .tcat__head {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: inherit !important;
	box-shadow: none !important;
	outline: none;
}

/* Also neutralize hover state at the card level in case the theme targets
   the card's own background on hover (some themes apply tints to elements
   containing buttons). */
.tcat__card:hover,
.tcat__card:focus-within {
	background: #fff;
}

/* Restore a tasteful focus indicator for keyboard users (the rule above
   removed the default outline). */
.tcat__head:focus-visible {
	outline: 2px solid rgba(31, 135, 134, 0.5) !important;
	outline-offset: -2px;
	border-radius: 16px;
}

.tcat__headL {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	min-width: 0 !important;
	flex: 1 1 0% !important;
	max-width: 100% !important;
}

@media (min-width: 480px) {
	.tcat__headL {
		align-items: center;
	}
}

@media (min-width: 640px) {
	.tcat__headL {
		gap: 14px;
	}
}

@media (min-width: 768px) {
	.tcat__headL {
		gap: 16px;
	}
}

.tcat__num {
	font-family: 'League Spartan', 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	color: #1f8786;
	flex: 0 0 auto;
	display: none;
}

@media (min-width: 640px) {
	.tcat__num {
		display: inline-block;
	}
}

.tcat__icon {
	width: 32px;
	height: 32px;
	flex: 0 0 32px !important;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-image: linear-gradient(135deg, #1d5e5d 0%, #1f8786 55%, #4fb8b3 100%);
	box-shadow: 0 4px 14px rgba(31, 135, 134, 0.25);
	margin-top: 2px;
}

@media (min-width: 480px) {
	.tcat__icon {
		width: 36px;
		height: 36px;
		flex: 0 0 36px !important;
		margin-top: 0;
	}
}

@media (min-width: 640px) {
	.tcat__icon {
		width: 40px;
		height: 40px;
		flex: 0 0 40px !important;
		border-radius: 12px;
	}
}

.tcat__icon svg {
	width: 14px;
	height: 14px;
}

@media (min-width: 480px) {
	.tcat__icon svg {
		width: 16px;
		height: 16px;
	}
}

@media (min-width: 640px) {
	.tcat__icon svg {
		width: 18px;
		height: 18px;
	}
}

.tcat__titles {
	min-width: 0 !important;
	max-width: 100% !important;
	flex: 1 1 0% !important;
	overflow: hidden;
}

.tcat__title {
	font-family: 'League Spartan', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	color: #0b1f24;
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	white-space: normal !important;
}

@media (min-width: 480px) {
	.tcat__title {
		font-size: 15px;
		line-height: 1.3;
	}
}

@media (min-width: 640px) {
	.tcat__title { font-size: 17px; }
}

@media (min-width: 768px) {
	.tcat__title { font-size: 20px; }
}

@media (min-width: 1024px) {
	.tcat__title { font-size: 22px; }
}

.tcat__tag {
	margin-top: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #1f8786;
	display: block;
	max-width: 100% !important;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	white-space: normal !important;
}

.tcat__chev {
	flex: 0 0 18px !important;
	width: 18px;
	height: 18px;
	color: #5b6e72;
	transition: transform 0.25s ease, color 0.25s ease;
	margin-top: 2px;
}

@media (min-width: 480px) {
	.tcat__chev {
		flex: 0 0 20px !important;
		width: 20px;
		height: 20px;
		margin-top: 0;
	}
}

.tcat__chev svg {
	width: 100%;
	height: 100%;
}

.tcat__card.is-open .tcat__chev {
	transform: rotate(180deg);
	color: #1f8786;
}

/* ============================================================
   PANEL (expanded card body)
   ============================================================ */
.tcat__panel {
	display: none;
	padding: 0 16px 20px;
}

@media (min-width: 640px) {
	.tcat__panel { padding: 0 22px 24px; }
}

@media (min-width: 768px) {
	.tcat__panel { padding: 0 28px 32px; }
}

.tcat__card.is-open .tcat__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.tcat__card.is-open .tcat__panel { gap: 24px; }
}

@media (min-width: 1024px) {
	.tcat__card.is-open .tcat__panel {
		grid-template-columns: repeat(12, 1fr);
		gap: 28px;
	}
}

.tcat__desc {
	color: #5b6e72;
	line-height: 1.7;
	font-size: 14px;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	white-space: normal !important;
	max-width: 100% !important;
	min-width: 0;
}

@media (min-width: 640px) {
	.tcat__desc { font-size: 15px; }
}

@media (min-width: 1024px) {
	.tcat__desc       { grid-column: span 5; }
	.tcat__desc.is-wide { grid-column: span 12; }
	.tcat__aud        { grid-column: span 3; }
	.tcat__out        { grid-column: span 4; }
}

.tcat__aud,
.tcat__out {
	max-width: 100% !important;
	min-width: 0;
}

.tcat__metaH {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #1f8786;
}

.tcat__metaH svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.tcat__metaB {
	margin-top: 8px;
	font-size: 14px;
	color: #0b1f24;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	white-space: normal !important;
	max-width: 100% !important;
}

.tcat__out ul {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	max-width: 100% !important;
}

.tcat__out li {
	font-size: 14px;
	color: #0b1f24;
	padding: 3px 0;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	white-space: normal !important;
	max-width: 100% !important;
}

.tcat__foot {
	padding-top: 16px;
	border-top: 1px solid rgba(11, 31, 36, 0.08);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

@media (min-width: 640px) {
	.tcat__foot {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.tcat__foot { grid-column: span 12; }
}

.tcat__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #5b6e72;
	line-height: 1.5;
}

.tcat__note svg {
	width: 14px;
	height: 14px;
	color: #1f8786;
	flex-shrink: 0;
}

.tcat__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 999px;
	background: #1d5e5d;
	color: #fff;
	text-decoration: none;
	padding: 12px 20px;
	font-size: 12px;
	font-weight: 700;
	transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
	align-self: stretch;
	max-width: 100% !important;
	box-sizing: border-box;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.tcat__cta {
		margin-left: auto;
		align-self: auto;
		padding: 10px 20px;
	}
}

.tcat__cta:hover {
	background: #1f8786;
	box-shadow: 0 0 0 4px rgba(31, 135, 134, 0.18), 0 8px 20px rgba(29, 94, 93, 0.3);
	transform: translateY(-1px);
}

.tcat__cta:focus,
.tcat__cta:focus-visible {
	outline: 2px solid rgba(31, 135, 134, 0.6);
	outline-offset: 2px;
}

.tcat__cta svg {
	width: 14px;
	height: 14px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.tcat__empty {
	border: 1px dashed rgba(11, 31, 36, 0.2);
	border-radius: 16px;
	padding: 40px;
	text-align: center;
	color: #5b6e72;
}

.tcat__empty button {
	background: none;
	border: 0;
	color: #1f8786;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
}

/* ============================================================
   BOTTOM CTA BLOCK
   ============================================================ */
.tcat__bigcta {
	border: 1px solid rgba(11, 31, 36, 0.12);
	background: #fff;
	border-radius: 24px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.tcat__bigcta.tcat-in {
	opacity: 1;
	transform: none;
}

@media (min-width: 768px) {
	.tcat__bigcta {
		padding: 48px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.tcat__bigcta h2,
.tcat__bigcta h3,
.tcat__bigcta h4 {
	font-family: 'League Spartan', 'Inter', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: #0b1f24;
}

@media (min-width: 768px) {
	.tcat__bigcta h2,
	.tcat__bigcta h3,
	.tcat__bigcta h4 { font-size: 30px; }
}

.tcat__bigcta p {
	margin: 12px 0 0;
	color: #5b6e72;
	line-height: 1.7;
	max-width: 640px;
}

.tcat__bigcta a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 12px;
	padding: 14px 24px;
	color: #fff;
	background-image: linear-gradient(135deg, #2d8a9e, #1a4a6e);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(45, 138, 158, 0.25);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.tcat__bigcta a:hover {
	box-shadow: 0 12px 28px rgba(45, 138, 158, 0.35);
	transform: translateY(-1px);
}

.tcat__bigcta a svg {
	width: 16px;
	height: 16px;
}

/* ============================================================
   ELEMENTOR EDITOR — FORCE VISIBILITY
   Same pattern as our other widgets: cover the outer editor body,
   the preview iframe body, AND the PHP-stamped editor class.
   ============================================================ */
body.elementor-editor-active .tcat__card,
body.elementor-editor-active .tcat__bigcta,
body.elementor-editor-preview .tcat__card,
body.elementor-editor-preview .tcat__bigcta,
.tcat-list-root--editor .tcat__card,
.tcat-list-root--editor .tcat__bigcta {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* In the editor, the sticky bar shouldn't escape its container — it
   makes positioning weird inside Elementor's drag-and-drop frame. */
body.elementor-editor-active .tcat__bar,
body.elementor-editor-preview .tcat__bar {
	position: static !important;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.tcat__card,
	.tcat__bigcta {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.tcat__chev,
	.tcat__cta,
	.tcat__bigcta a {
		transition: none !important;
	}
}