/* ============================================================
   Immigence — How We Work Widget  (how-we-work-widget.css)
   Paste into assets/css/widgets-style.css
   ============================================================ */

.hww-section {
	padding: 5rem 2rem;
	background: var(--white, #ffffff);
}

.hww-inner {
	max-width: 1100px;
	margin: 0 auto;
}

/* ── HEADER ──────────────────────────────────────────────── */

.hww-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3.5rem;
}

/* Pill tag */
.hww-tag {
	display: inline-block;
	background: var(--navy, #0B1D3A);
	color: var(--gold, #C8983C);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0.35rem 1rem;
	border-radius: 100px;
	margin-bottom: 1rem;
}

.hww-heading {
	font-family: var(--font-display, 'Libre Baskerville', Georgia, serif);
	font-size: 2rem;
	line-height: 1.35;
	color: var(--navy, #0B1D3A);
	margin-bottom: 1rem;
}

.hww-subtext {
	font-size: 0.97rem;
	color: var(--slate, #4A5568);
	line-height: 1.7;
	margin-bottom: 0.5rem;
}

.hww-subtext:last-child {
	margin-bottom: 0;
}

/* ── STEPS GRID ──────────────────────────────────────────── */

.hww-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
}

/* Card */
.hww-card {
	background: var(--white, #ffffff);
	border: 1px solid var(--border, #E2E8F0);
	border-radius: 8px;
	padding: 2rem 1.75rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Gold top border on hover */
.hww-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gold, #C8983C);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.hww-card:hover::before {
	transform: scaleX(1);
}

.hww-card:hover {
	box-shadow: 0 12px 32px rgba(11, 29, 58, 0.09);
	transform: translateY(-3px);
}

/* Card top row: icon + step number */
.hww-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	margin-bottom: 1.25rem;
}

/* Icon box */
.hww-icon-box {
	width: 64px;
	height: 64px;
	background: var(--gold-pale, #F5ECD7);
	border: 1px solid rgba(200, 152, 60, 0.3);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hww-icon-box svg {
	width: 28px;
	height: 28px;
	fill: var(--gold, #C8983C);
}

/* Step number badge */
.hww-step-num {
	position: absolute;
	top: -8px;
	right: calc(50% - 48px);
	background: var(--navy, #0B1D3A);
	color: var(--gold, #C8983C);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	line-height: 1.4;
}

/* Card title */
.hww-card-title {
	font-family: var(--font-display, 'Libre Baskerville', Georgia, serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy, #0B1D3A);
	line-height: 1.4;
	margin-bottom: 0.65rem;
}

/* Card description */
.hww-card-desc {
	font-size: 0.88rem;
	color: var(--slate, #4A5568);
	line-height: 1.7;
}

.hww-card-desc p {
	margin: 0;
}

.hww-card-desc a {
	color: var(--gold, #C8983C);
}

/* ── CTA BUTTON ──────────────────────────────────────────── */

.hww-cta-wrap {
	text-align: center;
}

.hww-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--gold, #C8983C);
	color: var(--navy, #0B1D3A);
	border: 2px solid var(--gold, #C8983C);
	padding: 0.85rem 2.5rem;
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: all 0.3s ease;
}

.hww-cta:hover {
	background: transparent;
	color: var(--gold, #C8983C);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 1024px) {
	.hww-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.hww-grid {
		grid-template-columns: 1fr;
	}

	.hww-heading {
		font-size: 1.6rem;
	}
}