/* Quickstep custom styles
-------------------------------------------------------------- */


/* Site tokens
   Common values used across the child theme. Extend as needed.
-------------------------------------------------------------- */
:root {
	--space-small:  0.5rem;   /* 8  */
	--space-medium: 1.5rem;   /* 24 */
	--space-large:  2rem;     /* 32 */
}


/* Hero slider
-------------------------------------------------------------- */
.js-slider {
	position: relative;
	overflow: hidden;
}

.js-slide {
	position: absolute;
	inset: 0;
	transform: translateX(100%);
	transition: transform 0.8s ease;
	will-change: transform;
}

.js-slide.active {
	transform: translateX(0);
}

.js-slide.exiting {
	transform: translateX(-100%);
}

.js-slide.no-transition {
	transition: none !important;
}

.js-slider .js-prev,
.js-slider .js-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

.js-slider .js-prev { left: 20px; }
.js-slider .js-next { right: 20px; }

.js-slider .js-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.js-slider .js-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.js-slider .js-dot.active {
	background: #fff;
}

/* Editor: stack slides so each is directly editable. */
.elementor-editor-active .js-slide {
	position: relative;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-slide { transition: none !important; }
	.js-slider .animated { animation: none !important; }
	.js-slider .elementor-invisible { visibility: visible !important; }
}


/* Clickable image accordion
-------------------------------------------------------------- */
.js-clickable-image-accordion .trx-addons-image-accordion-item {
	cursor: pointer;
}


/* Quickstep Testimonials — colours + chrome
   (plugin ships layout only; everything visual lives here)

   The --qst-* vars alias the step theme's own palette so colours stay
   consistent with the rest of the site and track any admin colour changes.
   The Elementor widget's Style controls override these per widget instance
   by re-setting the --qst-* vars inline.
-------------------------------------------------------------- */
.qst {
	--qst-gold: var(--theme-color-link);
	--qst-ink:  var(--theme-color-title);
	--qst-soft: var(--theme-color-meta);
	--qst-card: var(--theme-color-bg_color);
	--qst-line: var(--theme-color-bd_color);

	color: var(--qst-ink);
}

.qst-card {
	background: var(--qst-card);
	border: 1px solid var(--qst-line);
	border-radius: 8px;
}

.qst .qst-card blockquote.qst-pullquote {
	margin: 0;
	padding: 0;
	color: var(--qst-ink);
	font-size: 20px;
}

.qst .qst-pullquote + .qst-body {
	padding-top: 0;
	border-top: 1px solid var(--qst-line);
}

.qst .qst-body-inner {
	padding-top: var(--space-medium);
}

.qst .qst-body-inner p:first-child {
	margin-top: 0;
}

.qst-body {
	color: var(--qst-soft);
}

.qst-fade {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--qst-card));
}

.qst-readmore {
	color: var(--qst-ink);
	border-bottom: 1px solid var(--qst-gold);
}

.qst-readmore:hover,
.qst-readmore:focus-visible {
	border-bottom-color: var(--qst-ink);
}

.qst-scan-open {
	color: var(--qst-ink);
	border: 1px solid var(--qst-line);
	border-radius: 6px;
}

.qst-scan-open:hover,
.qst-scan-open:focus-visible {
	border-color: var(--qst-gold);
}

.qst-scan-thumb {
	border-radius: 4px;
}

.qst-meta {
	border-top: 1px solid var(--qst-line);
}

.qst-initials {
	background: var(--qst-gold);
	color: var(--qst-card);
}

.qst-name {
	color: var(--qst-ink);
}

.qst-role {
	color: var(--qst-soft);
}

.qst-date {
	color: var(--qst-soft);
	font-size: smaller;
}

.qst-empty {
	border: 1px dashed var(--qst-line);
	color: var(--qst-soft);
	text-align: center;
}

:where(.qst) :focus-visible {
	outline: 2px solid var(--qst-gold);
	outline-offset: 2px;
}


/* WooCommerce — single product overrides
-------------------------------------------------------------- */
.product .woocommerce-tabs {
	padding-top: 0;
}


/* TablePress
-------------------------------------------------------------- */
.tablepress td[colspan] {
	text-align: center;
}

.tablepress .column-1 {
	width: auto;
}

table.tablepress td,
table.tablepress th {
	padding: 0.5em;
	border: 1px solid #767676;
	word-break: break-all;
}

table.tablepress td {
	color: #111;
}