/*
 * SILITIVE theme styles that theme.json cannot express: card hover, the
 * animated green section, icon sizes and the black sections.
 */

/* Header */
.silitive-header {
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.silitive-logo img {
	height: 32px;
	width: auto;
}

/* Sections */
.silitive-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.silitive-hero {
	background:
		radial-gradient(1200px 400px at 85% -10%, rgba(34, 197, 94, 0.16), transparent 70%),
		radial-gradient(900px 400px at -10% 110%, rgba(34, 197, 94, 0.08), transparent 70%);
}

.silitive-eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-dark);
}

.silitive-lead {
	font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
	color: var(--wp--preset--color--muted);
	max-width: 48ch;
}

.silitive-section-head {
	max-width: 62ch;
}

.silitive-section-head p,
.silitive-muted {
	color: var(--wp--preset--color--muted);
}

/* Cards: plain, with a basic lift on hover. */
.is-style-silitive-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: clamp(20px, 3vw, 28px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.is-style-silitive-card:hover {
	transform: translateY(-3px);
	border-color: #d4d4d4;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 14px 32px rgba(0, 0, 0, 0.1);
}

.is-style-silitive-card > * {
	margin-block-start: 0;
}

.is-style-silitive-card > * + * {
	margin-block-start: 0.6rem;
}

.is-style-silitive-card p {
	color: var(--wp--preset--color--muted);
}

.is-style-silitive-card ul {
	margin-top: 0.75rem;
	padding-left: 1.1em;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
}

.silitive-icon,
.silitive-icon img {
	width: 48px;
	height: 48px;
	margin-bottom: 0.5rem;
}

.silitive-product-icon img {
	width: 88px;
	height: 88px;
	border-radius: 20px;
}

.silitive-tag {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.14);
	color: var(--wp--preset--color--brand-dark);
}

/* Numbered steps: white number on a green tile. */
.silitive-step {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-weight: 800;
}

.is-style-silitive-card p.silitive-step {
	color: var(--wp--preset--color--base);
}

/* Light section with a slowly drifting white-to-green gradient. */
.is-style-silitive-glow {
	background: linear-gradient(120deg, #ffffff 0%, #dcfce7 25%, #ffffff 50%, #bbf7d0 75%, #ffffff 100%);
	background-size: 300% 300%;
	animation: silitive-glow 16s ease-in-out infinite;
}

.is-style-silitive-glow .is-style-silitive-card {
	background: rgba(255, 255, 255, 0.85);
}

@keyframes silitive-glow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* Black sections and footer. */
.has-black-background-color {
	color: var(--wp--preset--color--base);
}

.has-black-background-color p {
	color: var(--wp--preset--color--muted-light);
}

.has-black-background-color h2,
.has-black-background-color h3 {
	color: var(--wp--preset--color--base);
}

.has-black-background-color a {
	color: var(--wp--preset--color--brand);
}

.has-black-background-color a:hover {
	color: var(--wp--preset--color--base);
}

.has-black-background-color .is-style-silitive-card {
	background: #111111;
	border-color: #262626;
	box-shadow: none;
}

.has-black-background-color .is-style-silitive-card:hover {
	border-color: #3a3a3a;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
}

.silitive-contact-card .silitive-icon {
	margin: 0;
	flex: none;
}

.silitive-contact-card p {
	margin: 0;
}

.silitive-contact-value {
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.silitive-footer {
	border-top: 1px solid #262626;
	font-size: 0.95rem;
}

.silitive-footer a {
	color: var(--wp--preset--color--muted-light);
}

.silitive-footer a:hover {
	color: var(--wp--preset--color--brand);
}

/* Full-width buttons on small phones so labels never squeeze. */
@media (max-width: 479px) {
	.silitive-hero .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.silitive-hero .wp-block-button__link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-silitive-card {
		transition: none;
	}

	.is-style-silitive-card:hover {
		transform: none;
	}

	.is-style-silitive-glow {
		animation: none;
	}
}

/* Header, main and footer sit flush; sections bring their own spacing. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-group {
	margin-block-start: 0;
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0);
}

main > .wp-block-group.alignfull {
	margin-block-start: 0;
}

/* Keep the menu button (and any icons plugins add) together on the right. */
.silitive-header .wp-block-navigation {
	margin-left: auto;
}

.silitive-footer {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.silitive-footer p {
	margin: 0;
}

/* Long words and pasted URLs in posts wrap instead of widening the page. */
body {
	overflow-wrap: break-word;
}

.wp-block-post-content :where(p, li, h1, h2, h3, h4, h5, h6, a),
.wp-block-post-excerpt,
.wp-block-post-title {
	overflow-wrap: anywhere;
}

.wp-block-code {
	overflow-x: auto;
}

/* Phone menu overlay: left-aligned, large tap targets with dividers. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: stretch;
	padding: 1rem clamp(16px, 3vw, 32px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 3rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.9rem 0;
	font-size: 1.15rem;
	font-weight: 700;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-dark);
}


/*
 * Plugin page patterns (silitive/page-slugh, silitive/page-noticeh).
 * They keep the plugins' own blue/teal accent, scoped to .silitive-plugin-page,
 * so the rest of the site stays on the SILITIVE green.
 */
.silitive-plugin-page {
	--silitive-plugin-accent: #3858e9;
	--silitive-plugin-accent-dark: #2a46c9;
	--silitive-plugin-teal: #0e7c86;
	--silitive-plugin-soft: #f4f6fb;
}

.silitive-plugin-page .wp-element-button,
.silitive-plugin-page .wp-block-button__link {
	background-color: var(--silitive-plugin-accent);
	border-color: var(--silitive-plugin-accent);
	color: #ffffff;
}

.silitive-plugin-page .wp-block-button__link:hover {
	background-color: var(--silitive-plugin-accent-dark);
	border-color: var(--silitive-plugin-accent-dark);
	color: #ffffff;
}

.silitive-plugin-page .is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--silitive-plugin-accent);
	border-color: var(--silitive-plugin-accent);
}

.silitive-plugin-page .is-style-outline .wp-block-button__link:hover {
	background-color: var(--silitive-plugin-accent);
	color: #ffffff;
}

.silitive-plugin-page a:where(:not(.wp-element-button)) {
	color: var(--silitive-plugin-accent);
}

.silitive-plugin-page .has-soft-background-color {
	background-color: var(--silitive-plugin-soft) !important;
}

.silitive-plugin-page .silitive-eyebrow {
	color: var(--silitive-plugin-teal);
	margin: 0;
}

.silitive-plugin-hero {
	background:
		radial-gradient(1200px 400px at 85% -10%, rgba(56, 88, 233, 0.14), transparent 70%),
		radial-gradient(900px 400px at -10% 110%, rgba(14, 124, 134, 0.12), transparent 70%);
}

.silitive-title-with-icon {
	gap: 16px;
}

.silitive-plugin-icon,
.silitive-plugin-icon img {
	width: clamp(56px, 10vw, 80px);
	height: clamp(56px, 10vw, 80px);
	margin: 0;
}

.silitive-plugin-icon img {
	border-radius: 22%;
}

.silitive-note {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

.silitive-hero-image img {
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(29, 42, 138, 0.08);
}

.silitive-plugin-page .silitive-icon,
.silitive-plugin-page .silitive-icon img {
	width: 44px;
	height: 44px;
}

.silitive-plugin-page code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
	background: var(--silitive-plugin-soft);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0.05em 0.35em;
	overflow-wrap: anywhere;
}

.silitive-plugin-page .silitive-step {
	background: rgba(56, 88, 233, 0.12);
	color: var(--silitive-plugin-accent);
}

.silitive-plugin-page .is-style-silitive-card p.silitive-step {
	color: var(--silitive-plugin-accent);
}

/* slugH redirect examples: old → new, stacked on phones. */
.redirect-demo {
	display: grid;
	gap: 10px;
}

.redirect-demo > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 10px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.95rem;
}

.redirect-demo code {
	min-width: 0;
}

.redirect-demo code:lang(bn),
.redirect-demo code:lang(ar) {
	font-family: var(--wp--preset--font-family--system);
}

.redirect-demo .old,
.redirect-demo .old-wrap {
	grid-column: 1 / -1;
	justify-self: start;
}

.redirect-demo .old {
	text-decoration: line-through;
	color: var(--wp--preset--color--muted);
}

.redirect-demo .old-wrap {
	display: grid;
	justify-items: start;
	gap: 4px;
	min-width: 0;
}

.redirect-demo .old-wrap .old {
	grid-column: auto;
}

.redirect-demo .encoded {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

.redirect-demo .encoded code {
	display: block;
	font-size: 1em;
	background: transparent;
	border: 0;
	padding: 0;
}

.redirect-demo .arrow {
	display: none;
}

.redirect-demo .new {
	justify-self: start;
}

.redirect-demo .new::before {
	content: "→ ";
	color: var(--wp--preset--color--muted);
}

.redirect-demo .code301 {
	font-size: 0.8rem;
	font-weight: 800;
	color: #ffffff;
	background: var(--silitive-plugin-teal, #0e7c86);
	border-radius: 999px;
	padding: 2px 10px;
}

@media (min-width: 640px) {
	.redirect-demo > div {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
	}

	.redirect-demo .old,
	.redirect-demo .old-wrap {
		grid-column: auto;
	}

	.redirect-demo .arrow {
		display: inline;
	}

	.redirect-demo .new::before {
		content: none;
	}
}

/* Screenshot grid: tall images cropped to a fixed frame; the viewer shows them whole. */
.silitive-shots .wp-block-image {
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(29, 42, 138, 0.08);
}

.silitive-shots .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
}

.silitive-shots .silitive-shot-fit img {
	object-fit: contain;
	object-position: center;
	background: var(--silitive-plugin-soft, #f4f6fb);
	padding: 12px;
}

.silitive-shots .wp-element-caption {
	margin: 0;
	padding: 14px 18px;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

.silitive-shots .wp-element-caption strong {
	color: var(--wp--preset--color--contrast);
}

/* Requirements table and FAQ. */
.silitive-spec-table table {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.silitive-spec-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 12px 16px;
	vertical-align: top;
}

.silitive-spec-table tr:last-child td {
	border-bottom: 0;
}

.silitive-spec-table td:first-child {
	width: 34%;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 639px) {
	.silitive-spec-table table,
	.silitive-spec-table tbody,
	.silitive-spec-table tr,
	.silitive-spec-table td {
		display: block;
		width: 100% !important;
	}

	.silitive-spec-table tr {
		border-bottom: 1px solid var(--wp--preset--color--line);
		padding: 12px 16px;
	}

	.silitive-spec-table td {
		border: 0;
		padding: 0;
	}
}

.silitive-faq {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 16px 20px;
}

.silitive-faq summary {
	cursor: pointer;
	font-weight: 700;
}

.silitive-faq p {
	margin: 12px 0 0;
	color: var(--wp--preset--color--muted);
}

/* Screenshot viewer (assets/js/lightbox.js). */
.lightbox,
.lightbox *,
.lightbox *::before,
.lightbox *::after {
	box-sizing: border-box;
}

.lightbox {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 56px 72px 48px;
	border: 0;
	background: rgba(10, 12, 20, 0.97);
	color: #ffffff;
	display: none;
	align-items: center;
	justify-content: center;
}

.lightbox[open] {
	display: flex;
}

.lightbox::backdrop {
	background: transparent;
}

.lightbox-open {
	overflow: hidden;
}

.lightbox-figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.lightbox-img {
	max-width: 100%;
	max-height: calc(100dvh - 170px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
	max-width: 70ch;
	text-align: center;
	font-size: 0.95rem;
	color: #d7dbe7;
}

.lightbox-caption strong {
	color: #ffffff;
}

.lightbox-count {
	position: absolute;
	top: 18px;
	left: 20px;
	margin: 0;
	font-size: 0.9rem;
	color: #d7dbe7;
}

.lightbox-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	cursor: pointer;
}

.lightbox-btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

.lightbox-btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.lightbox-btn svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lightbox-close {
	top: 10px;
	right: 12px;
}

.lightbox-prev,
.lightbox-next {
	top: 50%;
	transform: translateY(-50%);
}

.lightbox-prev {
	left: 12px;
}

.lightbox-next {
	right: 12px;
}

/* Phones: arrows sit at the bottom so the image gets the full width. */
@media (max-width: 639px) {
	.lightbox {
		padding: 56px 12px 84px;
	}

	.lightbox-img {
		max-height: calc(100dvh - 220px);
	}

	.lightbox-prev,
	.lightbox-next {
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.lightbox-prev {
		left: calc(50% - 60px);
	}

	.lightbox-next {
		right: calc(50% - 60px);
	}
}