/**
 * Components used on any page: spec chips, IPLink button styles, eyebrow labels, arrow links.
 *
 * Loaded site-wide (spec chips also appear on WoodMart's product cards) and in the block editor.
 * Logical properties only; motion is transform-only and removed under reduced motion.
 */

/* ─── Spec chips (ipl/spec-chips, product cards) ─────────────────── */

.ipl-spec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ipl-spec-chips .ipl-spec-chips__item {
	display: inline-flex;
	align-items: center;
	min-block-size: 26px;
	margin: 0;
	padding-block: 1px;
	padding-inline: 10px;
	border: 1px solid var(--ipl-gray-line, #E3E6EA);
	border-radius: 999px;
	background-color: var(--ipl-gray-bg, #F5F7FA);
	color: var(--ipl-navy, #0E1B2A);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

/* The first chip is the most decisive spec (usually the port count). */
.ipl-spec-chips .ipl-spec-chips__item:first-child {
	border-color: var(--ipl-navy, #0E1B2A);
	background-color: var(--ipl-navy, #0E1B2A);
	color: var(--ipl-white, #FFFFFF);
}

/* On WoodMart's own product cards (shop and category archives). */
.wd-product .ipl-spec-chips {
	justify-content: center;
	margin-block: 8px 4px;
}

/* ─── Eyebrow label above section titles ──────────────────────────── */

.ipl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ipl-blue, #1668D9);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.ipl-eyebrow::before {
	content: "";
	flex: none;
	inline-size: 28px;
	block-size: 2px;
	border-radius: 2px;
	background-color: currentColor;
}

/* ─── Button styles (core/button → Styles panel) ──────────────────── */

.wp-block-button:is(.is-style-ipl-primary, .is-style-ipl-ghost, .is-style-ipl-light) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-block: 10px;
	padding-inline: 24px;
	border: 1.5px solid transparent;
	border-radius: var(--ipl-radius-sm, 6px);
	font-family: var(--ipl-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	transition: transform 0.2s ease;
}

.wp-block-button:is(.is-style-ipl-primary, .is-style-ipl-ghost, .is-style-ipl-light) > .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button.is-style-ipl-primary > .wp-block-button__link {
	position: relative;
	overflow: hidden;
	background-color: var(--ipl-blue, #1668D9);
	color: var(--ipl-white, #FFFFFF);
	box-shadow: 0 10px 24px -12px rgba(22, 104, 217, 0.8);
}

/* A light sweep crosses the primary button on hover (transform only). */
.wp-block-button.is-style-ipl-primary > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: translateX(-160%) skewX(-18deg);
	transition: transform 0.7s ease;
	pointer-events: none;
}

.wp-block-button.is-style-ipl-primary > .wp-block-button__link:hover::before {
	transform: translateX(320%) skewX(-18deg);
}

[dir="rtl"] .wp-block-button.is-style-ipl-primary > .wp-block-button__link::before {
	transform: translateX(160%) skewX(18deg);
}

[dir="rtl"] .wp-block-button.is-style-ipl-primary > .wp-block-button__link:hover::before {
	transform: translateX(-320%) skewX(18deg);
}

.wp-block-button.is-style-ipl-primary > .wp-block-button__link:hover {
	background-color: var(--ipl-blue-hover, #1150AF);
	color: var(--ipl-white, #FFFFFF);
}

/* The primary action carries a direction arrow that nudges forward on hover. */
.wp-block-button.is-style-ipl-primary > .wp-block-button__link::after {
	content: "";
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s ease;
}

.wp-block-button.is-style-ipl-primary > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* A "continue" arrow points left in RTL. */
[dir="rtl"] .wp-block-button.is-style-ipl-primary > .wp-block-button__link::after {
	transform: scaleX(-1);
}

[dir="rtl"] .wp-block-button.is-style-ipl-primary > .wp-block-button__link:hover::after {
	transform: translateX(-4px) scaleX(-1);
}

.wp-block-button.is-style-ipl-ghost > .wp-block-button__link {
	border-color: var(--ipl-gray-line, #E3E6EA);
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy, #0E1B2A);
}

.wp-block-button.is-style-ipl-ghost > .wp-block-button__link:hover {
	border-color: var(--ipl-navy, #0E1B2A);
	color: var(--ipl-navy, #0E1B2A);
}

.wp-block-button.is-style-ipl-light > .wp-block-button__link {
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy, #0E1B2A);
}

.wp-block-button.is-style-ipl-light > .wp-block-button__link:hover {
	background-color: var(--ipl-gray-bg, #F5F7FA);
	color: var(--ipl-navy, #0E1B2A);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button:is(.is-style-ipl-primary, .is-style-ipl-ghost, .is-style-ipl-light) > .wp-block-button__link,
	.wp-block-button.is-style-ipl-primary > .wp-block-button__link::after {
		transition: none;
	}
}

/* ─── Article tables ──────────────────────────────────────────────── */

/* On narrow screens tables scroll sideways instead of crushing columns and breaking words. */
.ipl-site :is(.entry-content, .wd-entry-content) .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ipl-site :is(.entry-content, .wd-entry-content) .wp-block-table table {
	min-inline-size: 600px;
}

.ipl-site :is(.entry-content, .wd-entry-content) .wp-block-table :is(th, td) {
	overflow-wrap: normal;
	word-break: normal;
}

/* ─── Editor-only preview of the PoE calculator block ─────────────── */

.ipl-poe-calc-editor {
	padding: 24px;
	border: 2px dashed var(--ipl-gray-line, #E3E6EA);
	border-radius: var(--ipl-radius, 10px);
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy, #0E1B2A);
}

/* ─── Phone numbers and email addresses never wrap ────────────────── */

/* A wrapping line would break "021-37662" at the hyphen and reorder its halves in RTL text. */
.ipl-site :is(a[href^="tel:"], a[href^="mailto:"], .ipl-support__text bdo) {
	white-space: nowrap;
}