/*
 * SiteQode Addon — frontend/css/widgets.css
 *
 * Reuses the SiteQode Theme's design tokens (--sq-color-*, --sq-space-*,
 * --sq-font-*, --sq-radius-*, --sq-shadow-*, --sq-transition-*) by design —
 * this plugin pairs with that theme. On a different theme these custom
 * properties simply resolve to nothing and the declaration is skipped
 * (standard CSS behaviour), so widgets still render with normal document
 * flow and readable text, just without the SiteQode visual language.
 *
 * Card-shaped content (.sq-card, .sq-card-grid) and buttons (.sq-btn)
 * intentionally reuse the exact classes already styled in the theme's
 * assets/css/components.css/base.css — defined once there, not duplicated
 * here — so Elementor-rendered cards and theme-rendered cards look identical.
 */

/* Shared "eyebrow / title / subtitle" heading block ---------------------- */

.sq-widget-heading {
	max-width: 640px;
	margin-bottom: var(--sq-space-8);
}
.sq-widget-heading__title {
	margin-top: var(--sq-space-2);
}
.sq-widget-heading__subtitle {
	color: var(--sq-color-muted);
	margin-top: var(--sq-space-2);
}

/* Hero -------------------------------------------------------------- */

.sq-hero {
	position: relative;
	padding-block: var(--sq-space-16);
	overflow: hidden;
}
.sq-hero--has-bg {
	color: #fff;
}
.sq-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.sq-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--sq-color-ink);
}
.sq-hero__inner {
	position: relative;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-4);
}
.sq-hero__inner--center {
	margin-inline: auto;
	align-items: center;
}
.sq-hero__inner--left {
	align-items: flex-start;
}
.sq-hero--has-bg .sq-hero__description {
	color: rgba(255, 255, 255, 0.85);
}
.sq-hero__description {
	font-size: var(--sq-text-base);
	color: var(--sq-color-muted);
}
.sq-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-4);
	margin-top: var(--sq-space-2);
}
.sq-hero__inner--center .sq-hero__actions {
	justify-content: center;
}

/* Stats -------------------------------------------------------------- */

.sq-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--sq-space-8);
	text-align: center;
	padding-block: var(--sq-space-6);
}
.sq-stats__value {
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	margin: 0 0 var(--sq-space-1);
}
.sq-stats__label {
	color: var(--sq-color-muted);
	font-size: var(--sq-text-base);
	margin: 0;
}

/* Icon Box ----------------------------------------------------------- */

.sq-icon-box {
	display: block;
	background: var(--sq-color-surface);
	border: 1px solid var(--sq-color-border);
	border-radius: var(--sq-radius-md);
	padding: var(--sq-space-6);
	transition: transform var(--sq-transition), box-shadow var(--sq-transition);
}
a.sq-icon-box:hover {
	transform: translateY(-3px);
	box-shadow: var(--sq-shadow-md);
}
.sq-icon-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--sq-radius-sm);
	background: var(--sq-color-ink-100);
	color: var(--sq-color-ink-700);
	font-size: 1.4rem;
	margin-bottom: var(--sq-space-4);
}
.sq-icon-box__title {
	font-size: var(--sq-h6);
	margin: 0 0 var(--sq-space-2);
}
.sq-icon-box__description {
	color: var(--sq-color-muted);
	font-size: var(--sq-text-base);
	margin-bottom: 0;
}

/* --***--Custom Css--***-- */
.sq-icon-box {
	padding: 70px 25px 30px;
	display: flex;
	flex-flow: column nowrap;
    position: relative;
    overflow: visible;
    box-shadow: 0 1px 5px rgba(var(--sq-color-ink-rgb), 0.1);
	border-width: 1px 0 0;
	border-color: var(--sq-color-ink-soft);
	height: 100%;
}
.sq-icon-box span.sq-icon-box__icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 60px;
    background: var(--sq-color-ink);
    height: 60px;
    margin: 0 auto;
    margin-top: -10px;
    border-radius: var(--sq-radius-full);
    aspect-ratio: 1;
    font-size: 25px;
    color: var(--sq-color-accent-white);
}
.sq-icon-box span.sq-icon-box__icon > svg {
    fill: currentColor;
}

.sq-icon-box .sq-icon-box__title {
    font-size: clamp(1.375rem, 1.2914rem + 0.3822vw, 1.75rem);
    font-weight: 400;
    line-height: 1.2;
    padding: 0 0 10px;
    text-align: center;
    display: inline-flex;
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    justify-content: center;
}
.sq-icon-box .sq-icon-box__title:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 50px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sq-color-muted);
    margin: 0 auto;
}

.sq-icon-box .sq-icon-box__description {
	color: var(--sq-color-base);
}
.sq-icon-box .sq-icon-box__description a {
	transition: all 0.3s ease-in-out;
	font-size: var(--sq-text-base);
    font-weight: 400;
    font-family: var(--sq-font-body);
}
.sq-icon-box .sq-icon-box__description a:hover{
	color: var(--sq-color-ink);
}

@media (max-width: 767px) {
	.sq-icon-box {
		padding: 70px 20px 20px;
	}
}



/* Logo Grid ----------------------------------------------------------- */

.sq-logo-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sq-space-10);
}
.sq-logo-grid__item {
	display: inline-flex;
	filter: grayscale(1);
	opacity: 0.65;
	transition: opacity var(--sq-transition), filter var(--sq-transition);
}
.sq-logo-grid__item:hover {
	filter: grayscale(0);
	opacity: 1;
}
.sq-logo-grid__item img {
	max-height: 42px;
	width: auto;
}

/* Gallery ------------------------------------------------------------- */

.sq-gallery {
	display: grid;
	gap: var(--sq-space-4);
}
.sq-gallery--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.sq-gallery--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.sq-gallery--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
	.sq-gallery--cols-3,
	.sq-gallery--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
.sq-gallery__item {
	margin: 0;
	border-radius: var(--sq-radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.sq-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sq-transition);
}
.sq-gallery__item a:hover img {
	transform: scale(1.04);
}

/* CTA / Banner --------------------------------------------------------- */

.sq-cta {
	border-radius: var(--sq-radius-lg);
	margin-block: var(--sq-space-10);
}
.sq-cta--teal {
	background: var(--sq-color-ink-700);
	color: #fff;
}
.sq-cta--light {
	background: var(--sq-color-surface-tint);
	color: var(--sq-color-ink);
}
.sq-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-6);
	padding-block: var(--sq-space-8);
}
.sq-cta__title {
	margin: 0 0 var(--sq-space-2);
	color: inherit;
}
.sq-cta--teal .sq-cta__description {
	color: rgba(255, 255, 255, 0.85);
}
.sq-cta__description {
	margin: 0;
	color: var(--sq-color-muted);
}

@media (prefers-reduced-motion: reduce) {
	.sq-icon-box,
	.sq-logo-grid__item,
	.sq-gallery__item img {
		transition: none;
	}
}

/* FAQ ------------------------------------------------------------------ */

.sq-faq {
	max-width: 780px;
}
.sq-faq__item {
	border-bottom: 1px solid var(--sq-color-border);
}
.sq-faq__question {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}
.sq-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-4);
	padding: var(--sq-space-5) 0;
	text-align: left;
	font-family: var(--sq-font-body);
	font-size: var(--sq-text-base);
	font-weight: 600;
	color: var(--sq-color-ink);
}
.sq-faq__trigger .sq-icon {
	flex: none;
	color: var(--sq-color-ink-700);
	transition: transform var(--sq-transition);
}
.sq-faq__trigger[aria-expanded="true"] .sq-icon {
	transform: rotate(180deg);
}
.sq-faq__answer {
	padding-bottom: var(--sq-space-5);
	color: var(--sq-color-muted);
	max-width: 65ch;
}
.sq-faq__answer p {
	margin: 0;
}