/* ==========================================================================
   Shivam Consulting — front-end styles
   Brand: Montserrat / Inter, ink #101828, green #02b08c, blue #0a59fd,
   gradient linear-gradient(135deg, #0a59fd, #02b08c) — taken from
   shivam.consulting so the blog reads as the same property.
   ========================================================================== */

:root {
	--sc-hairline: var(--wp--preset--color--hairline, #e4e7ec);
	--sc-ink: var(--wp--preset--color--contrast, #101828);
	--sc-ink-2: var(--wp--preset--color--contrast-2, #475467);
	--sc-ink-3: var(--wp--preset--color--contrast-3, #667085);
	--sc-green: var(--wp--preset--color--accent, #02b08c);
	--sc-green-ink: var(--wp--preset--color--accent-ink, #017f65);
	--sc-blue: var(--wp--preset--color--accent-blue, #0a59fd);
	--sc-surface: var(--wp--preset--color--base-2, #f7f9fa);
	--sc-mint: var(--wp--preset--color--base-3, #eef7f4);
	--sc-gradient: linear-gradient(135deg, #0a59fd 0%, #02b08c 100%);

	--sc-thumb: var(--wp--custom--thumb, 88px);
	--sc-header-h: 64px;
	--sc-radius: 10px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sc-green);
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link:focus {
	background: #fff;
	color: var(--sc-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	z-index: 1000;
}

/* Never let a runaway image break the layout. */
img,
video,
iframe {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Zero-specificity background so the gradient stays editable in the Site Editor
   while still rendering if the preset class is ever removed. */
:where(.sc-header) {
	background: var(--sc-gradient);
}

.sc-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .sc-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sc-header {
		top: 46px;
	}
}

.sc-header__inner {
	min-height: var(--sc-header-h);
	gap: 1rem;
}

.sc-header .wp-block-site-logo img {
	display: block;
	height: auto;
	width: min(230px, 55vw);
}

/* The Site Logo block renders nothing until a logo is set, so the site title
   stands in — and steps aside the moment a logo exists. */
.sc-brand-fallback,
.sc-brand-fallback a {
	color: #fff;
	text-decoration: none;
}

.sc-header .sc-brand-fallback {
	font-size: 1.05rem;
}

.sc-header__brand:has(.wp-block-site-logo) .sc-brand-fallback,
.sc-footer__brand:has(.wp-block-site-logo) .sc-brand-fallback {
	display: none;
}

.sc-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 600;
	gap: 1.25rem;
}

.sc-header .wp-block-navigation a,
.sc-header .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
}

.sc-header .wp-block-navigation a:hover,
.sc-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Mobile overlay menu is dark-on-light, so reset the white link colour. */
.sc-header .wp-block-navigation__responsive-container.is-menu-open a,
.sc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--sc-ink);
}

.sc-header .wp-block-navigation__responsive-container-open,
.sc-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Compact translucent search in the header bar. */
.sc-header .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 2px;
}

.sc-header .wp-block-search__input {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 0.85rem;
	min-width: 0;
	padding: 0.3rem 0.7rem;
	width: clamp(110px, 16vw, 190px);
}

.sc-header .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

.sc-header .wp-block-search__button {
	background: transparent;
	border: 0;
	color: #fff;
	padding: 0.25rem 0.5rem;
}

.sc-header .wp-block-search__button svg {
	fill: currentColor;
}

@media (max-width: 899px) {
	.sc-header .wp-block-search {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Page shell: list + sidebar
   -------------------------------------------------------------------------- */

.sc-shell {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
}

.sc-shell.wp-block-columns {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60);
}

.sc-aside {
	align-self: flex-start;
	position: sticky;
	top: calc(var(--sc-header-h) + 1rem);
}

.admin-bar .sc-aside {
	top: calc(var(--sc-header-h) + 3rem);
}

@media (max-width: 781px) {
	.sc-aside {
		position: static;
		margin-top: var(--wp--preset--spacing--50);
	}
}

/* --------------------------------------------------------------------------
   Archive heading strip + topic chips
   -------------------------------------------------------------------------- */

.sc-strip {
	border-bottom: 1px solid var(--sc-hairline);
	padding-bottom: var(--wp--preset--spacing--30);
}

.sc-strip__title {
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	margin: 0;
}

.sc-strip__title .wp-block-query-title__prefix,
.sc-strip .wp-block-query-title span {
	color: var(--sc-ink-3);
	font-weight: 500;
}

.sc-eyebrow {
	color: var(--sc-ink-3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	margin: 0;
	text-transform: uppercase;
}

.sc-chips ul,
ul.sc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-chips li {
	background: #fff;
	border: 1px solid var(--sc-hairline);
	border-radius: 999px;
	color: var(--sc-ink-3);
	font-size: 0.78rem;
	line-height: 1.3;
	margin: 0;
	padding: 0.3rem 0.66rem;
	position: relative;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sc-chips li:hover {
	background: var(--sc-mint);
	border-color: var(--sc-green);
}

.sc-chips a {
	color: var(--sc-ink-2);
	font-weight: 600;
	text-decoration: none;
}

.sc-chips li:hover a {
	color: var(--sc-green-ink);
}

/* Make the whole chip clickable without extra markup. */
.sc-chips a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.sc-chips .children {
	display: none;
}

/* --------------------------------------------------------------------------
   Dense post list — the point of this theme.
   One post = one ~110px row instead of one screen.
   -------------------------------------------------------------------------- */

.sc-dense__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-dense__list > li.wp-block-post {
	/* Centred so rows without an excerpt (related posts, 404, mobile) don't
	   leave a gap under the title where the third track would be. */
	align-content: center;
	border-bottom: 1px solid var(--sc-hairline);
	-moz-column-gap: 1rem;
	column-gap: 1rem;
	display: grid;
	grid-template-columns: var(--sc-thumb) minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	margin: 0;
	padding: 0.85rem 0.5rem;
	row-gap: 0.18rem;
	transition: background-color 0.15s ease;
}

.sc-dense__list > li.wp-block-post:hover {
	background: var(--sc-surface);
}

.sc-dense__list > li.wp-block-post > * {
	margin-block-end: 0;
	margin-block-start: 0;
}

.sc-dense__thumb {
	align-self: center;
	grid-column: 1;
	grid-row: 1 / -1;
	overflow: hidden;
}

.sc-dense__thumb,
.sc-dense__thumb img {
	border-radius: 8px;
	width: var(--sc-thumb);
}

.sc-dense__thumb img {
	background: var(--sc-surface);
	display: block;
	transition: transform 0.25s ease;
}

.sc-dense__list > li.wp-block-post:hover .sc-dense__thumb img {
	transform: scale(1.04);
}

/* Posts with no featured image collapse to a single column. */
.sc-dense__list > li.wp-block-post:not(:has(.sc-dense__thumb)) {
	grid-template-columns: minmax(0, 1fr);
}

.sc-dense__list > li.wp-block-post:not(:has(.sc-dense__thumb)) > * {
	grid-column: 1;
}

/* Two classes so this wins over the block-supports layout gap, whose stylesheet
   can be printed after the theme's. */
.wp-block-group.sc-dense__meta {
	align-items: baseline;
	color: var(--sc-ink-3);
	-moz-column-gap: 0.5rem;
	column-gap: 0.5rem;
	font-size: 0.75rem;
	grid-column: 2;
	grid-row: 1;
	row-gap: 0.1rem;
}

.sc-dense__meta > * {
	margin: 0;
}

.sc-dense__meta > * + *::before {
	color: var(--sc-hairline);
	content: "•";
	margin-right: 0.5rem;
}

.sc-dense__meta .wp-block-post-terms a,
.sc-dense__meta .wp-block-post-terms {
	color: var(--sc-green-ink);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.sc-dense__meta .wp-block-post-terms a:hover {
	text-decoration: underline;
}

.sc-readtime:empty {
	display: none;
}

.sc-dense .sc-dense__title,
h2.sc-dense__title,
h3.sc-dense__title {
	font-size: var(--wp--preset--font-size--list-title);
	font-weight: 700;
	grid-column: 2;
	grid-row: 2;
	letter-spacing: -0.018em;
	line-height: 1.3;
	margin: 0;
}

.sc-dense__title a {
	color: var(--sc-ink);
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-decoration: none;
}

.sc-dense__title a:hover {
	color: var(--sc-green-ink);
	text-decoration: none;
}

.sc-dense .sc-dense__excerpt {
	color: var(--sc-ink-2);
	font-size: 0.875rem;
	grid-column: 2;
	grid-row: 3;
	line-height: 1.5;
}

.sc-dense__excerpt p {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	margin: 0;
	overflow: hidden;
}

.sc-dense__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

@media (max-width: 599px) {
	:root {
		--sc-thumb: 68px;
	}

	.sc-dense__list > li.wp-block-post {
		padding-left: 0;
		padding-right: 0;
	}

	.sc-dense .sc-dense__excerpt {
		display: none;
	}

	/* Keep the meta line to one line: long category names truncate rather than
	   pushing the row to three lines. */
	.sc-dense__list .sc-dense__meta {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	/* Core gives the terms separator white-space: pre-wrap, which is the one
	   break opportunity that would still split the meta line in two. */
	.sc-dense__list .sc-dense__meta > *,
	.sc-dense__list .sc-dense__meta .wp-block-post-terms__separator {
		white-space: nowrap;
	}

	.sc-dense__list .sc-dense__meta .wp-block-post-terms {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sc-dense__list .sc-readtime {
		display: none;
	}
}

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

.wp-block-query-pagination {
	align-items: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.85rem;
	font-weight: 600;
	gap: 0.35rem;
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	border: 1px solid var(--sc-hairline);
	border-radius: 8px;
	color: var(--sc-ink-2);
	display: inline-block;
	line-height: 1;
	padding: 0.5rem 0.7rem;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--sc-green);
	color: var(--sc-green-ink);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--sc-gradient);
	border-color: transparent;
	color: #fff;
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sc-card {
	background: #fff;
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius);
	padding: var(--wp--preset--spacing--30);
}

.sc-card--signup {
	background: var(--sc-mint);
	border-color: rgba(2, 176, 140, 0.28);
}

.sc-card__title {
	font-size: 1rem;
	letter-spacing: -0.015em;
	margin: 0 0 0.35rem;
}

.sc-card__note {
	color: var(--sc-ink-2);
	font-size: 0.82rem;
	line-height: 1.45;
	margin: 0;
}

/* The CRM embed script rewrites the iframe (absolute positioning, its own
   wrapper divs) and only reveals it once it has measured the form, so the
   iframe keeps its original inline sizing and this wrapper reserves the space.
   Without a sized, positioned parent the form collapses to zero height. */
.sc-embed-form {
	margin-top: 0.25rem;
	min-height: 432px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.sc-aside .sc-chips li {
	background: transparent;
}

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */

.sc-post-header {
	margin-top: var(--wp--preset--spacing--50);
}

.sc-post-header .sc-dense__meta {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8rem;
	grid-column: auto;
	grid-row: auto;
}

.sc-post-title {
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0.5rem 0 0;
}

.sc-post-hero img {
	border-radius: var(--sc-radius);
	max-height: 420px;
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
}

.sc-content {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.sc-content > * + * {
	margin-top: 1.15em;
}

.sc-content h2 {
	letter-spacing: -0.02em;
	margin-top: 2em;
}

.sc-content h3 {
	margin-top: 1.6em;
}

.sc-content ul,
.sc-content ol {
	padding-left: 1.25em;
}

.sc-content li + li {
	margin-top: 0.35em;
}

.sc-content img {
	border-radius: var(--sc-radius);
	height: auto;
}

.sc-content a {
	text-decoration: underline;
	text-decoration-color: rgba(10, 89, 253, 0.35);
	text-underline-offset: 2px;
}

.sc-content a:hover {
	text-decoration-color: currentColor;
}

.sc-content table {
	border-collapse: collapse;
	font-size: 0.9rem;
	width: 100%;
}

.sc-content table th,
.sc-content table td {
	border: 1px solid var(--sc-hairline);
	padding: 0.5rem 0.65rem;
	text-align: left;
}

.sc-content table th {
	background: var(--sc-surface);
	font-family: var(--wp--preset--font-family--heading);
}

/* Post CTA */
.sc-cta {
	background: var(--sc-gradient);
	border-radius: 14px;
	color: #fff;
	padding: var(--wp--preset--spacing--40);
}

.sc-cta h2,
.sc-cta h3,
.sc-cta p {
	color: #fff;
}

.sc-cta .wp-block-button__link {
	background: #fff;
	color: var(--sc-blue);
}

.sc-cta .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.9);
	color: var(--sc-blue);
}

/* Prev / next */
.sc-postnav {
	border-top: 1px solid var(--sc-hairline);
	gap: 1rem;
	padding-top: var(--wp--preset--spacing--30);
}

.sc-postnav .wp-block-post-navigation-link {
	font-size: 0.9rem;
	max-width: 48%;
}

/* An empty next/previous slot would otherwise hold open a flex column. */
.sc-postnav .wp-block-post-navigation-link:empty {
	display: none;
}

.sc-postnav .post-navigation-link__label {
	color: var(--sc-ink-3);
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.15rem;
	text-transform: uppercase;
}

.sc-postnav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.sc-postnav .wp-block-post-navigation-link a {
	color: var(--sc-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}

.sc-postnav .wp-block-post-navigation-link a:hover {
	color: var(--sc-green-ink);
}

/* Related posts: no heading when the query came back empty. */
.sc-related:not(:has(.wp-block-post)) {
	display: none;
}

.sc-tags .wp-block-post-terms__separator {
	display: none;
}

.sc-tags:not(:has(a)) {
	display: none;
}

.sc-tags a {
	background: var(--sc-surface);
	border: 1px solid var(--sc-hairline);
	border-radius: 999px;
	color: var(--sc-ink-2);
	display: inline-block;
	font-size: 0.76rem;
	margin: 0 0.3rem 0.3rem 0;
	padding: 0.24rem 0.6rem;
	text-decoration: none;
}

.sc-tags a:hover {
	border-color: var(--sc-green);
	color: var(--sc-green-ink);
}

/* --------------------------------------------------------------------------
   Section rule (used above "More on this topic", footers of lists)
   -------------------------------------------------------------------------- */

.sc-section-title {
	border-bottom: 2px solid var(--sc-green);
	display: inline-block;
	font-size: 1.05rem;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
	padding-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   404 / search / no results
   -------------------------------------------------------------------------- */

.sc-empty {
	background: var(--sc-surface);
	border: 1px dashed var(--sc-hairline);
	border-radius: var(--sc-radius);
	padding: var(--wp--preset--spacing--50);
	text-align: center;
}

.sc-empty .wp-block-search__inside-wrapper {
	margin: 0 auto;
	max-width: 420px;
}

.wp-block-search__input {
	border: 1px solid var(--sc-hairline);
	border-radius: 8px;
	font-family: inherit;
	padding: 0.55rem 0.75rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

:where(.sc-footer) {
	background: var(--sc-gradient);
}

.sc-footer {
	color: rgba(255, 255, 255, 0.88);
	margin-top: var(--wp--preset--spacing--60);
}

.sc-footer a {
	color: #fff;
	text-decoration: none;
}

.sc-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sc-footer h2,
.sc-footer h3,
.sc-footer .sc-eyebrow {
	color: #fff;
}

.sc-footer .wp-block-site-logo img {
	height: auto;
	width: min(210px, 60vw);
}

.sc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-footer__links li {
	margin: 0 0 0.35rem;
}

.sc-footer ul.wp-block-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-footer ul.wp-block-categories li {
	margin: 0 0 0.35rem;
}

.sc-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.8rem;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   Editor parity helpers
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .sc-header,
.editor-styles-wrapper .sc-aside {
	position: static;
}