/**
 * IDW — components.
 *
 * Buttons, cards, forms, badges, media frames, pagination, breadcrumbs.
 * Shared by both the PHP templates and the Elementor widgets so a person card
 * looks identical wherever it is rendered.
 */

/* ---------------------------------------------------------------- Buttons */

.idw-btn {
	--btn-bg: var(--idw-primary);
	--btn-fg: #fff;
	--btn-border: transparent;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 1.9em;
	border: 1px solid var(--btn-border);
	border-radius: var(--idw-radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--idw-font-heading);
	font-size: var(--idw-fs-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--idw-dur) var(--idw-ease),
		box-shadow var(--idw-dur) var(--idw-ease),
		background-color var(--idw-dur-fast) var(--idw-ease-soft),
		color var(--idw-dur-fast) var(--idw-ease-soft),
		border-color var(--idw-dur-fast) var(--idw-ease-soft);
}

/* Sheen that wipes across the button on hover. */
.idw-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform var(--idw-dur-slow) var(--idw-ease);
}

.idw-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--idw-shadow);
	color: var(--btn-fg);
}

.idw-btn:hover::after {
	transform: translateX(120%);
}

.idw-btn:active {
	transform: translateY(0);
}

.idw-btn__icon {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	transition: transform var(--idw-dur) var(--idw-ease);
}

.idw-btn:hover .idw-btn__icon {
	transform: translateX(3px);
}

.idw-btn--accent {
	--btn-bg: var(--idw-accent);
	--btn-fg: #04302a;
}

.idw-btn--dark {
	--btn-bg: var(--idw-ink);
}

.idw-btn--outline {
	--btn-bg: transparent;
	--btn-fg: var(--idw-primary);
	--btn-border: var(--idw-line-strong);
}

.idw-btn--outline:hover {
	--btn-bg: var(--idw-primary);
	--btn-fg: #fff;
	--btn-border: var(--idw-primary);
}

.idw-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: currentColor;
	--btn-border: currentColor;
}

.idw-btn--light {
	--btn-bg: #fff;
	--btn-fg: var(--idw-primary);
}

/*
 * Dark bands turn every link white (.idw-invert a), which outranks .idw-btn
 * and left light buttons with white text on white. Buttons keep their own
 * foreground there; variants whose default is dark-on-dark are re-pointed.
 */
.idw-invert a.idw-btn,
.idw-invert a.idw-btn:hover {
	color: var(--btn-fg);
}

.idw-invert .idw-btn--outline {
	--btn-fg: #fff;
}

.idw-invert .idw-btn--dark {
	--btn-fg: var(--idw-primary);
}

.idw-btn--sm {
	padding: 0.7em 1.35em;
	font-size: var(--idw-fs-xs);
}

.idw-btn--lg {
	padding: 1.1em 2.3em;
	font-size: var(--idw-fs-base);
}

.idw-btn--block {
	display: flex;
	width: 100%;
}

/* Text link that behaves like a button but reads as a link. */
.idw-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--idw-font-heading);
	font-size: var(--idw-fs-sm);
	font-weight: 700;
	color: var(--idw-primary);
	text-decoration: none;
}

.idw-link svg {
	width: 1em;
	height: 1em;
	transition: transform var(--idw-dur) var(--idw-ease);
}

.idw-link:hover svg {
	transform: translateX(4px);
}

/* Circular play button used on video heroes. */
.idw-play {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: #fff;
	color: var(--idw-primary);
	flex: none;
}

.idw-play svg {
	width: 22px;
	height: 22px;
	margin-inline-start: 3px;
}

.idw-play::before,
.idw-play::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	animation: idw-ripple 2800ms var(--idw-ease-soft) infinite;
}

.idw-play::after {
	animation-delay: 1400ms;
}

/* ------------------------------------------------------------------ Cards */

.idw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--idw-surface);
	border-radius: var(--idw-radius-lg);
	box-shadow: var(--idw-shadow-ring), var(--idw-shadow-sm);
	overflow: hidden;
	transition:
		transform var(--idw-dur) var(--idw-ease),
		box-shadow var(--idw-dur) var(--idw-ease);
}

.idw-card:hover,
.idw-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--idw-shadow-ring), var(--idw-shadow-lg);
}

.idw-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--idw-surface-tint);
	aspect-ratio: var(--idw-card-ratio, 3 / 2);
}

.idw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--idw-ease);
}

.idw-card:hover .idw-card__media img {
	transform: scale(1.06);
}

.idw-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--idw-space-3);
	padding: var(--idw-space-5) var(--idw-space-5) var(--idw-space-6);
}

.idw-card__title {
	margin: 0;
	font-size: var(--idw-fs-h5);
	line-height: var(--idw-lh-snug);
}

.idw-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole card is clickable, but only the title is a real link (a11y). */
.idw-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.idw-card__text {
	margin: 0;
	font-size: var(--idw-fs-sm);
	line-height: var(--idw-lh-normal);
	color: var(--idw-body);
}

.idw-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: var(--idw-fs-xs);
	color: var(--idw-muted);
}

.idw-card__foot {
	margin-top: auto;
	padding-top: var(--idw-space-3);
}

/* Icon tile used on service and feature cards. */
.idw-icon-tile {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 18px;
	background: var(--idw-primary-100);
	color: var(--idw-primary);
	flex: none;
	transition:
		background-color var(--idw-dur) var(--idw-ease-soft),
		color var(--idw-dur) var(--idw-ease-soft),
		transform var(--idw-dur) var(--idw-ease);
}

.idw-icon-tile svg,
.idw-icon-tile i,
.idw-icon-tile img {
	width: 28px;
	height: 28px;
	font-size: 26px;
	line-height: 1;
}

.idw-card:hover .idw-icon-tile {
	background: var(--idw-primary);
	color: #fff;
	transform: rotate(-6deg) scale(1.05);
}

.idw-icon-tile--accent {
	background: var(--idw-accent-100);
	color: var(--idw-accent-ink);
}

.idw-card:hover .idw-icon-tile--accent {
	background: var(--idw-accent);
	color: #fff;
}

.idw-icon-tile--lg {
	width: 76px;
	height: 76px;
	border-radius: 22px;
}

.idw-icon-tile--lg svg,
.idw-icon-tile--lg i {
	width: 34px;
	height: 34px;
	font-size: 32px;
}

/* ----------------------------------------------------------------- Badges */

.idw-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.85em;
	border-radius: var(--idw-radius-pill);
	background: var(--idw-primary-100);
	color: var(--idw-primary-600);
	font-family: var(--idw-font-heading);
	font-size: var(--idw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	line-height: 1.4;
}

.idw-badge--accent {
	background: var(--idw-accent-100);
	color: var(--idw-accent-ink);
}

.idw-badge--floating {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 3;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	box-shadow: var(--idw-shadow-xs);
}

/* ------------------------------------------------------------------ Forms */

.idw-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.idw-field__label {
	font-family: var(--idw-font-heading);
	font-size: var(--idw-fs-xs);
	font-weight: 700;
	color: var(--idw-ink);
	letter-spacing: 0.01em;
}

.idw-field__label .required {
	color: var(--idw-danger);
	margin-inline-start: 0.15em;
}

.idw-input,
.idw-select,
.idw-textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.85rem 1.05rem;
	border: 1px solid var(--idw-line-strong);
	border-radius: var(--idw-radius);
	background: var(--idw-surface);
	color: var(--idw-ink);
	font-size: var(--idw-fs-sm);
	line-height: 1.5;
	transition:
		border-color var(--idw-dur-fast) var(--idw-ease-soft),
		box-shadow var(--idw-dur-fast) var(--idw-ease-soft);
	appearance: none;
}

textarea,
.idw-textarea {
	min-height: 130px;
	resize: vertical;
}

select,
.idw-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237d7691' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 16px;
	padding-inline-end: 2.6rem;
}

[dir="rtl"] select,
[dir="rtl"] .idw-select {
	background-position: left 1rem center;
	padding-inline-end: 1.05rem;
	padding-inline-start: 2.6rem;
}

.idw-input:focus,
.idw-select:focus,
.idw-textarea:focus,
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--idw-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--idw-accent) 18%, transparent);
}

.idw-input::placeholder,
textarea::placeholder {
	color: var(--idw-muted);
}

.idw-field--invalid .idw-input,
.idw-field--invalid .idw-select,
.idw-field--invalid .idw-textarea {
	border-color: var(--idw-danger);
}

.idw-field__error {
	font-size: var(--idw-fs-xs);
	color: var(--idw-danger);
}

/* Honeypot — hidden from humans, visible to naive bots. */
.idw-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.idw-form-notice {
	padding: 0.9rem 1.15rem;
	border-radius: var(--idw-radius);
	font-size: var(--idw-fs-sm);
	margin-bottom: var(--idw-space-4);
}

.idw-form-notice--success {
	background: color-mix(in srgb, var(--idw-success) 12%, transparent);
	color: var(--idw-success);
	border: 1px solid color-mix(in srgb, var(--idw-success) 30%, transparent);
}

.idw-form-notice--error {
	background: color-mix(in srgb, var(--idw-danger) 10%, transparent);
	color: var(--idw-danger);
	border: 1px solid color-mix(in srgb, var(--idw-danger) 28%, transparent);
}

/* Search form */
.idw-search {
	display: flex;
	gap: 0.5rem;
}

.idw-search .idw-input {
	border-radius: var(--idw-radius-pill);
}

/* -------------------------------------------------------------- Star rating */

.idw-stars {
	display: inline-flex;
	gap: 2px;
	color: #f5a623;
}

.idw-stars svg {
	width: 16px;
	height: 16px;
}

.idw-stars--muted svg {
	color: var(--idw-line-strong);
}

/* ------------------------------------------------------------- Pagination */

.idw-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--idw-space-8);
}

.idw-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* paginate_links( type=list ) wraps items in ul.page-numbers — reset it. */
.idw-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border-radius: 0;
}

.idw-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.idw-pagination ul.page-numbers li::before,
.idw-pagination ul.page-numbers li::marker {
	content: none;
}

.idw-pagination .page-numbers:not(ul) {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	border-radius: var(--idw-radius-pill);
	background: var(--idw-surface-alt);
	color: var(--idw-ink);
	font-family: var(--idw-font-heading);
	font-size: var(--idw-fs-sm);
	font-weight: 700;
	text-decoration: none;
	transition: all var(--idw-dur-fast) var(--idw-ease-soft);
}

.idw-pagination a.page-numbers:hover,
.idw-pagination .page-numbers.current {
	background: var(--idw-primary);
	color: #fff;
}

/* ------------------------------------------------------------ Breadcrumbs */

.idw-breadcrumbs {
	font-size: var(--idw-fs-xs);
	color: var(--idw-muted);
}

.idw-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.idw-breadcrumbs li::after {
	content: "/";
	margin-inline-start: 0.35rem;
	opacity: 0.5;
}

.idw-breadcrumbs li:last-child::after {
	display: none;
}

.idw-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.idw-breadcrumbs a:hover {
	color: var(--idw-primary);
}

.idw-invert .idw-breadcrumbs a:hover {
	color: #fff;
}

/* ------------------------------------------------------------- Page hero */

.idw-page-hero {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
	background: var(--idw-grad-brand);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.idw-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.16), transparent 45%),
		radial-gradient(circle at 84% 78%, rgba(18, 165, 148, 0.32), transparent 50%);
}

.idw-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.idw-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.28;
}

.idw-page-hero__title {
	margin: 0;
	color: #fff;
	font-size: var(--idw-fs-h1);
	max-width: 20ch;
}

.idw-page-hero__text {
	margin-top: var(--idw-space-4);
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--idw-fs-lg);
}

.idw-page-hero .idw-breadcrumbs {
	margin-bottom: var(--idw-space-4);
	color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------- Skeleton */

.idw-empty {
	padding: var(--idw-space-8);
	border: 1px dashed var(--idw-line-strong);
	border-radius: var(--idw-radius-lg);
	text-align: center;
	color: var(--idw-muted);
	background: var(--idw-surface-alt);
}

/* ------------------------------------------------------- Filter chips */

.idw-filter {
	justify-content: center;
	gap: 0.5rem;
}

.idw-filter .idw-badge {
	padding: 0.55em 1.2em;
	background: var(--idw-surface-alt);
	color: var(--idw-body);
	border: 1px solid var(--idw-line);
	transition: all var(--idw-dur-fast) var(--idw-ease-soft);
}

.idw-filter .idw-badge:hover,
.idw-filter .idw-badge.is-active {
	background: var(--idw-primary);
	border-color: var(--idw-primary);
	color: #fff;
}

/* Unfilled stars in a rating. */
.idw-stars .idw-star--empty {
	color: var(--idw-line-strong);
}

/* Responsive oEmbed wrapper. */
.idw-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--idw-radius);
	overflow: hidden;
	background: var(--idw-surface-tint);
}

.idw-embed iframe,
.idw-embed video,
.idw-embed object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Multi-page post links. */
.idw-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--idw-space-6);
	font-family: var(--idw-font-heading);
	font-size: var(--idw-fs-sm);
	font-weight: 700;
}

.idw-page-links a,
.idw-page-links > span:not(:first-child) {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 0.5rem;
	border-radius: var(--idw-radius-pill);
	background: var(--idw-surface-alt);
	text-decoration: none;
}

.idw-page-links a:hover {
	background: var(--idw-primary);
	color: #fff;
}

/* Canvas template: no chrome, so give content its own breathing room. */
body.idw-canvas { padding: 0; }

/* ------------------------------------------ Standalone breadcrumb bar
 * Used on page-builder pages, which suppress the theme's page-hero banner
 * and with it the trail that normally lives inside it. Deliberately quiet:
 * it sits between the header and the builder's own first section, so it must
 * read as part of the chrome rather than as a section of its own.
 */
.idw-breadcrumb-bar {
	border-bottom: 1px solid var(--idw-border, rgba(0, 0, 0, 0.08));
	background: var(--idw-surface-2, #f7f7fa);
	padding: 0.75rem 0;
}

.idw-breadcrumb-bar .idw-breadcrumbs {
	margin: 0;
}

/* Breadcrumb trail rendered inside a page-opening hero (dark background). */
.idw-hero__breadcrumbs {
	margin-bottom: var(--idw-space-4, 1rem);
}

.idw-hero__breadcrumbs--center .idw-breadcrumbs ol {
	justify-content: center;
}

.idw-hero__breadcrumbs .idw-breadcrumbs {
	color: rgba(255, 255, 255, 0.72);
}

.idw-hero__breadcrumbs .idw-breadcrumbs a:hover {
	color: #fff;
}

/* ------------------------------------------------------- Price block
 * A price table that reads as a priced offer rather than a data table.
 * Applied by putting `idw-priceblock` on a prose section, so the content
 * stays plain editable prose in Elementor while the presentation is the
 * theme's. Used on service pages, where "what does it cost" is the question
 * the visitor actually arrived with.
 */
.idw-priceblock > .e-con-inner,
.idw-priceblock {
	--idw-priceblock-edge: color-mix(in srgb, var(--idw-primary) 14%, transparent);
}

.idw-priceblock .elementor-widget-text-editor {
	border: 1px solid var(--idw-priceblock-edge);
	border-radius: var(--idw-radius-lg, 18px);
	padding: var(--idw-space-6, 1.5rem) var(--idw-space-6, 1.5rem) var(--idw-space-5, 1.25rem);
	background: var(--idw-surface, #fff);
	box-shadow: var(--idw-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.05));
}

.idw-priceblock .elementor-widget-text-editor table {
	max-width: none;
	margin-block: 0 var(--idw-space-4, 1rem);
	/* Already inside the block's own card, so no second shadow. */
	box-shadow: var(--idw-shadow-ring);
}

/* The figure is the thing being read — give it the weight of a price, not
 * of a table cell. */
.idw-priceblock table td:last-child {
	font-weight: 700;
	color: var(--idw-heading, var(--idw-ink));
	white-space: nowrap;
}

.idw-priceblock table tbody tr:last-child td {
	border-block-end: 0;
}

.idw-priceblock .idw-note {
	margin-block-end: 0;
}

.idw-invert .idw-priceblock .elementor-widget-text-editor {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

@media (max-width: 480px) {
	.idw-priceblock .elementor-widget-text-editor {
		padding: var(--idw-space-5, 1.25rem) var(--idw-space-4, 1rem);
	}

	.idw-priceblock table td:last-child {
		white-space: normal;
	}
}