/*
Theme Name: SaaS in the City
Theme URI: https://saasinthecity.com
Author: Octiv Digital
Author URI: https://octivdigital.com
Description: Block theme for SaaS in the City, an independent guide to business software sorted by industry. Built for the block editor and the Site Editor.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saas-in-the-city
Tags: block-patterns, full-site-editing, wide-blocks, editor-style, blog, news
*/

/* ---------- Base ---------- */
:root {
	--sitc-midnight: #10151F;
	--sitc-blue: #1F4FD8;
	--sitc-blue-deep: #1A3FA8;
	--sitc-taxi: #FFC629;
	--sitc-fog: #F2F3F5;
	--sitc-line: #E2E5EA;
	--sitc-slate: #556070;
	--sitc-ink: #333C4A;
	--sitc-mist: #CBD2DC;
	--sitc-archivo: 'Archivo', system-ui, sans-serif;
}
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--sitc-blue); outline-offset: 2px; }
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Highlighted word in headings */
.sitc-hl { color: var(--sitc-blue); }
.sitc-dark .sitc-hl { color: var(--sitc-taxi); }

/* Eyebrow labels */
.sitc-eyebrow,
.wp-block-post-terms.sitc-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sitc-blue-deep);
	margin: 0;
}
.sitc-dark .sitc-eyebrow { color: var(--sitc-taxi); }

/* Lede text */
.sitc-lede { font-size: 19px; color: var(--sitc-ink); max-width: 640px; }
.sitc-dark .sitc-lede, .sitc-dark p { color: var(--sitc-mist); }
.sitc-muted { color: var(--sitc-slate); }

/* Breadcrumbs */
.sitc-crumbs { font-size: 14px; color: var(--sitc-slate); margin: 0; }
.sitc-crumbs a { padding: 10px 0; }
.sitc-crumbs a:hover { color: var(--sitc-blue); }

/* ---------- Header ---------- */
.sitc-topbar {
	background: var(--sitc-midnight);
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 24px;
	margin: 0 !important;
}
.sitc-header { border-bottom: 1px solid var(--sitc-line); background: #fff; }
.sitc-header-inner { padding-block: 16px; }
.sitc-logo { display: flex; align-items: center; gap: 12px; color: var(--sitc-midnight); }
.sitc-logo:hover { color: var(--sitc-midnight); }
.sitc-wordmark {
	font-family: var(--sitc-archivo);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.sitc-wordmark span { color: var(--sitc-blue); }
.sitc-header .wp-block-navigation { font-weight: 500; font-size: 15px; gap: 4px 28px; }
.sitc-header .wp-block-navigation a { padding: 12px 0; }
.sitc-header .wp-block-button__link { padding: 12px 22px; }
@media (max-width: 600px) {
	.sitc-wordmark { font-size: 22px; }
	.sitc-header .wp-block-buttons { display: none; }
}

/* ---------- Sections ---------- */
.sitc-section { padding-top: 80px; padding-bottom: 24px; }
.sitc-section-tight { padding-top: 56px; padding-bottom: 24px; }
.sitc-hero { background: var(--sitc-fog); padding-top: 28px; padding-bottom: 72px; }
.sitc-hero h1 { margin-block: 0; }
.sitc-dark { background: var(--sitc-midnight); color: #fff; }
.sitc-dark a:hover { color: var(--sitc-taxi); }
.sitc-dark h2, .sitc-dark h3 { color: #fff; }
.sitc-band { padding-top: 72px; padding-bottom: 72px; margin-top: 80px; }
.sitc-head { margin-bottom: 28px; }
.sitc-head > * { margin-block: 0 !important; }
.sitc-head > * + * { margin-top: 10px !important; }
.sitc-headrow { margin-bottom: 28px; }
.sitc-headrow .sitc-head { margin-bottom: 0; }
.sitc-textlink a, a.sitc-textlink {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.sitc-entry > .alignfull:last-child { padding-bottom: 80px; }
.sitc-entry > .alignfull.sitc-dark:last-child { padding-bottom: 72px; }

/* ---------- Cards ---------- */
.sitc-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--sitc-line);
	border-radius: 16px;
	padding: 22px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sitc-card > * { margin-block: 0; }
.sitc-card > * + * { margin-top: 8px; }
.sitc-card h2, .sitc-card h3 { font-size: 19px; line-height: 1.3; }
.sitc-card p { color: var(--sitc-slate); font-size: 15px; }
.sitc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 21, 31, .12); }
.sitc-card :is(h2, h3, h4) a::after,
.sitc-card .sitc-stretch a::after,
.sitc-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.sitc-card :is(h2, h3) a:hover { color: var(--sitc-blue); }
.sitc-card-arrow h3::after {
	content: "\2192";
	color: var(--sitc-blue);
	float: right;
	font-family: system-ui, sans-serif;
}
.sitc-box {
	background: var(--sitc-fog);
	border-radius: 20px;
	padding: 28px;
}
.sitc-box > * { margin-block: 0; }
.sitc-box > * + * { margin-top: 10px; }
.sitc-dark .sitc-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.sitc-dark .sitc-card:hover { transform: none; box-shadow: none; }
.sitc-dark .sitc-card h3 { color: #fff; }

/* Badges */
.sitc-badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--sitc-midnight);
	color: var(--sitc-taxi) !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	width: fit-content;
}
.sitc-dark .sitc-badge, .sitc-feature .sitc-badge { background: var(--sitc-taxi); color: var(--sitc-midnight) !important; }
.sitc-dark .wp-block-read-more { color: var(--sitc-taxi); font-weight: 600; }
.sitc-tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sitc-blue-deep) !important;
}

/* Pills (outline buttons in a row) */
.sitc-pills { gap: 10px; }
.sitc-pills .wp-block-button__link {
	background: transparent;
	color: var(--sitc-midnight);
	border: 1px solid var(--sitc-midnight);
	padding: 10px 18px;
	font-size: 14px;
}
.sitc-pills .wp-block-button__link:hover { background: var(--sitc-midnight); color: #fff; }
.sitc-hero .sitc-pills .wp-block-button__link { background: #fff; border-color: var(--sitc-line); }
.sitc-hero .sitc-pills .wp-block-button__link:hover { background: var(--sitc-midnight); border-color: var(--sitc-midnight); color: #fff; }
.sitc-dark .sitc-pills .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .6); }
.sitc-dark .sitc-pills .wp-block-button__link:hover { background: var(--sitc-taxi); border-color: var(--sitc-taxi); color: var(--sitc-midnight); }
.sitc-pills .is-style-fill .wp-block-button__link { background: var(--sitc-taxi); border-color: var(--sitc-taxi); color: var(--sitc-midnight); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid currentColor; background: transparent; color: var(--sitc-midnight); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--sitc-midnight); color: #fff; }
.sitc-btn-taxi .wp-block-button__link { background: var(--sitc-taxi); color: var(--sitc-midnight); }
.sitc-btn-taxi .wp-block-button__link:hover { background: #fff; color: var(--sitc-midnight); }

/* ---------- Images ---------- */
.sitc-img-hero img { width: 100%; height: 340px; object-fit: cover; border-radius: 24px; }
.sitc-img-card img { width: 100%; height: 190px; object-fit: cover; border-radius: 14px; }
.sitc-img-band img { width: 100%; height: 400px; object-fit: cover; border-radius: 24px; }
.sitc-img-hero, .sitc-img-card, .sitc-img-band { margin: 0; }

/* ---------- Feature card (dark) ---------- */
.sitc-feature {
	background: var(--sitc-midnight);
	color: #fff;
	border-radius: 24px;
	padding: 32px;
	position: relative;
	overflow: hidden;
}
.sitc-feature > * { margin-block: 0; }
.sitc-feature > * + * { margin-top: 14px; }
.sitc-feature h2 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; font-weight: 600; }
.sitc-feature h2 a::after { content: ""; position: absolute; inset: 0; }
.sitc-feature h2 a:hover { color: var(--sitc-taxi); }
.sitc-feature p { color: var(--sitc-mist); }
.sitc-feature .sitc-readmore { color: var(--sitc-taxi); font-weight: 600; }
.sitc-feature .sitc-img-card img { height: 210px; }

/* ---------- Homepage ---------- */
.sitc-home-hero { padding-top: 72px; padding-bottom: 80px; }
.sitc-home-hero h1 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1; }
.sitc-search .wp-block-search__inside-wrapper { gap: 10px; border: 0; padding: 0; max-width: 520px; }
.sitc-search .wp-block-search__input {
	height: 52px;
	border-radius: 999px;
	border: 1px solid var(--sitc-midnight);
	padding: 0 20px;
	font: inherit;
	background: #fff;
}
.sitc-search .wp-block-search__button {
	height: 52px;
	border-radius: 999px;
	padding: 0 28px;
	margin: 0;
	background: var(--sitc-midnight);
	color: #fff;
	font-weight: 600;
	border: 0;
}
.sitc-search .wp-block-search__button:hover { background: var(--sitc-blue); }
.sitc-popular { font-size: 15px; font-weight: 500; }
.sitc-popular a { text-decoration: underline; text-underline-offset: 4px; margin-right: 14px; }

/* Rotating cover story */
.sitc-cover .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.sitc-cover .wp-block-post-template > li { margin: 0; }
.sitc-cover.sitc-js .wp-block-post-template > li { display: none; }
.sitc-cover.sitc-js .wp-block-post-template > li.is-active { display: block; animation: sitc-fade .5s ease; }
.sitc-cover:not(.sitc-js) .wp-block-post-template > li + li { display: none; }
@keyframes sitc-fade { from { opacity: 0; } to { opacity: 1; } }
.sitc-cover-card {
	position: relative;
	background: var(--sitc-midnight);
	color: #fff;
	border-radius: 24px;
	padding: 0 36px 36px;
	overflow: hidden;
}
.sitc-cover-card > * { margin-block: 0; }
.sitc-cover-card > * + * { margin-top: 14px; }
.sitc-cover-card .wp-block-post-featured-image { margin: 0 -36px 22px; }
.sitc-cover-card .wp-block-post-featured-image img { width: 100%; height: 240px; object-fit: cover; }
.sitc-cover-card .wp-block-post-title { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; font-weight: 600; color: #fff; }
.sitc-cover-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.sitc-cover-card .wp-block-post-title a:hover { color: var(--sitc-taxi); }
.sitc-cover-card .wp-block-post-excerpt { color: var(--sitc-mist); }
.sitc-cover-card .wp-block-post-excerpt__more-text { display: none; }
.sitc-cover-card .wp-block-post-terms { color: var(--sitc-mist); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.sitc-cover-card .wp-block-read-more { color: var(--sitc-taxi); font-weight: 600; }
.sitc-dots { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.sitc-dots button {
	width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.sitc-dots button span { display: block; width: 28px; height: 6px; border-radius: 999px; background: var(--sitc-mist); }
.sitc-dots button[aria-current="true"] span { background: var(--sitc-blue); }

/* Industry tiles */
.sitc-tile { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.sitc-tile > * + * { margin-top: 0; }
.sitc-tile p { color: var(--sitc-midnight); font-weight: 600; font-size: 17px; }
.sitc-icon {
	width: 44px; height: 44px; flex: none; border-radius: 12px;
	background: var(--sitc-fog); color: var(--sitc-blue);
	display: flex; align-items: center; justify-content: center;
}
.sitc-tile-all { background: var(--sitc-taxi); border-color: var(--sitc-taxi); }
.sitc-tile-all p { color: var(--sitc-midnight); }

/* Numbered principles */
.sitc-num {
	font-family: var(--sitc-archivo);
	font-weight: 800;
	font-size: 15px;
	color: var(--sitc-blue);
	letter-spacing: 0.06em;
}
.sitc-dark .sitc-num { color: var(--sitc-taxi); }

/* Post query cards */
.sitc-post-cards .wp-block-post { position: relative; }
.sitc-post-card { height: 100%; box-sizing: border-box; }
.sitc-post-card .wp-block-post-featured-image { margin: -22px -22px 6px; }
.sitc-post-card .wp-block-post-featured-image img { width: 100%; height: 190px; object-fit: cover; border-radius: 16px 16px 0 0; }
.sitc-post-card .wp-block-post-title { font-size: 19px; line-height: 1.3; }
.sitc-post-card .wp-block-post-excerpt { color: var(--sitc-slate); font-size: 15px; }
.sitc-post-card .wp-block-post-excerpt__more-text { display: none; }
.sitc-post-card .wp-block-post-terms { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sitc-blue-deep); }

/* ---------- Single article ---------- */
.sitc-article-hero { padding-bottom: 56px; }
.sitc-article-hero .wp-block-post-title { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; }
.sitc-dek { font-size: 20px; color: var(--sitc-ink); }
.sitc-meta { font-size: 15px; color: var(--sitc-slate); gap: 8px 20px; }
.sitc-meta .wp-block-post-author { align-items: center; }
.sitc-meta .wp-block-post-author__avatar img { border-radius: 50%; width: 36px; height: 36px; }
.sitc-meta .wp-block-post-author__name { color: var(--sitc-midnight); font-weight: 600; }
.sitc-meta .wp-block-post-author__byline { font-size: 15px; margin: 0; }
.sitc-meta .wp-block-post-author__content { display: flex; gap: 4px; align-items: baseline; }
.sitc-article-image img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 20px; }
.sitc-article-body { padding-top: 56px; padding-bottom: 32px; }
.sitc-article-body h2 { font-size: clamp(26px, 2.6vw, 32px); margin-top: 48px; }
.sitc-article-body h3 { margin-top: 32px; }
.sitc-prose p a, .sitc-article-body p a, .sitc-article-body li a { color: var(--sitc-blue); text-decoration: underline; text-underline-offset: 3px; }
.sitc-article-body .sitc-card p a, .sitc-article-body .sitc-quick a { text-decoration: none; color: inherit; }
.sitc-article-body p, .sitc-article-body li { font-size: 17px; }
.sitc-quick { gap: 12px; }
.sitc-quick .sitc-card { padding: 16px 18px; }
.sitc-quick .sitc-card p { font-size: 15px; }
.sitc-quick .sitc-tag { font-size: 11px !important; }
.sitc-quick .sitc-card p + p { color: var(--sitc-midnight); font-weight: 700; }
.sitc-toppick { border-radius: 20px; padding: 24px 28px; }
.sitc-toppick > * { margin-block: 0; }
.sitc-toppick > * + * { margin-top: 10px; }
.sitc-tool {
	border: 1px solid var(--sitc-line);
	border-radius: 20px;
	padding: clamp(20px, 3vw, 32px);
	margin-top: 24px !important;
	scroll-margin-top: 24px;
}
.sitc-tool > * { margin-block: 0; }
.sitc-tool > * + * { margin-top: 16px; }
.sitc-tool h3 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 0 !important; }
.sitc-tool .sitc-use { color: var(--sitc-slate); margin-top: 4px; }
.sitc-stats { gap: 12px 32px; background: var(--sitc-fog); border-radius: 14px; padding: 16px 20px; }
.sitc-stats p { margin: 0; font-size: 13px !important; color: var(--sitc-slate); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.sitc-stats strong { display: block; color: var(--sitc-midnight); font-size: 17px; text-transform: none; letter-spacing: 0; }
.sitc-proscons .wp-block-column { background: var(--sitc-fog); border-radius: 14px; padding: 18px 20px; }
.sitc-proscons .wp-block-column > * { margin-block: 0; }
.sitc-proscons .wp-block-column > * + * { margin-top: 8px; }
.sitc-proscons ul, .sitc-tool ul { padding-left: 20px; }
.sitc-proscons li, .sitc-tool li { font-size: 16px !important; }
.sitc-table table { font-size: 15px; border-collapse: collapse; width: 100%; }
.sitc-table th { text-align: left; border-bottom: 2px solid var(--sitc-midnight); padding: 12px 8px; border-top: 0; border-left: 0; border-right: 0; }
.sitc-table td { border: 0; border-bottom: 1px solid var(--sitc-line); padding: 12px 8px; }
.sitc-table td:first-child { font-weight: 600; }
.sitc-table { overflow-x: auto; }
.sitc-faq .wp-block-details { border-top: 1px solid var(--sitc-line); padding: 18px 0; margin: 0; }
.sitc-faq .wp-block-details:last-child { border-bottom: 1px solid var(--sitc-line); }
.sitc-faq summary { font-weight: 700; font-size: 18px; cursor: pointer; }
.sitc-faq .wp-block-details p { margin-top: 10px; color: var(--sitc-ink); }
.sitc-author { margin-top: 48px; padding: 24px; border-radius: 20px; background: var(--sitc-fog); }
.sitc-author .wp-block-post-author__avatar img { border-radius: 50%; }
.sitc-author .wp-block-post-author__name { font-weight: 700; font-size: 18px; }
.sitc-author .wp-block-post-author__bio { color: var(--sitc-ink); margin-top: 6px; }
.sitc-note { background: #FFF6D6; border-left: 4px solid var(--sitc-taxi); padding: 14px 18px; border-radius: 8px; font-size: 15px; color: var(--sitc-ink); }

/* ---------- Forms ---------- */
.sitc-form { display: flex; flex-direction: column; gap: 18px; }
.sitc-form .sitc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.sitc-form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.sitc-form input, .sitc-form select, .sitc-form textarea {
	width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px;
	border: 1px solid var(--sitc-midnight); background: #fff; font: inherit; color: var(--sitc-midnight);
}
.sitc-form input, .sitc-form select { height: 52px; }
.sitc-form .sitc-hint { font-size: 14px; color: var(--sitc-slate); margin-top: 6px; display: block; }
.sitc-form button {
	align-self: flex-start; height: 54px; padding: 0 30px; border-radius: 999px; border: 0;
	background: var(--sitc-blue); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.sitc-form button:hover { background: var(--sitc-blue-deep); }
.sitc-form .sitc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sitc-alert { padding: 16px 20px; border-radius: 12px; font-weight: 600; }
.sitc-alert-ok { background: #E6F4EA; color: #14532D; }
.sitc-alert-err { background: #FDECEC; color: #7F1D1D; }

/* Steps */
.sitc-step-num {
	width: 40px; height: 40px; border-radius: 12px; background: var(--sitc-midnight); color: var(--sitc-taxi);
	font-family: var(--sitc-archivo); font-weight: 800; font-size: 20px;
	display: flex !important; align-items: center; justify-content: center;
}

/* Sitemap */
.sitc-sitemap ul { padding-left: 18px; }
.sitc-sitemap li { padding: 3px 0; }

/* Archive */
.sitc-archive-hero .wp-block-query-title { margin: 0; }
.sitc-empty { background: var(--sitc-fog); border-radius: 20px; padding: 28px; }

/* ---------- Footer ---------- */
.sitc-footer { border-top: 1px solid var(--sitc-line); padding-top: 56px; padding-bottom: 32px; font-size: 15px; }
.sitc-footer h2 { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sitc-slate); margin: 0 0 10px; }
.sitc-footer .sitc-links { list-style: none; padding: 0; margin: 0; }
.sitc-footer .sitc-links li { padding: 5px 0; }
.sitc-footer .sitc-blurb { color: var(--sitc-slate); max-width: 300px; }
.sitc-footer-bottom { border-top: 1px solid var(--sitc-line); padding-top: 24px; margin-top: 40px !important; font-size: 14px; color: var(--sitc-slate); }
.sitc-footer-bottom p { margin: 0; }
.sitc-footer-bottom a { margin-left: 20px; }

/* Industry index cards hold several links, so the title link does not cover the card. */
.sitc-industry-card :is(h2, h3) a::after { content: none; }
.sitc-industry-card:hover { transform: none; box-shadow: none; }
.sitc-catlist { padding-left: 20px; }
.sitc-catlist a:hover { color: var(--sitc-blue); }
.sitc-article-body .sitc-tag { font-size: 12px !important; }
.sitc-article-body .sitc-card p, .sitc-article-body .sitc-card h3 { font-size: 15px; }
.sitc-article-body .sitc-card h3 { font-size: 17px; margin-top: 0; }
.sitc-muted a { text-decoration: underline; text-underline-offset: 3px; }
.sitc-archive-hero .wp-block-term-description { margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.sitc-section { padding-top: 56px; }
	.sitc-hero { padding-bottom: 56px; }
	.sitc-img-hero img, .sitc-img-band img { height: 240px; }
	.sitc-home-hero { padding-top: 48px; }
}

/* Editor helpers: show every cover story while editing */
.editor-styles-wrapper .sitc-cover .wp-block-post-template > li + li { display: block; margin-top: 16px; }