/* ═══════════════════════════════════════════════════════════════
   SearchStack brand layer (Design A · "Daylight")
   Overrides the Silicon theme's primary + typography and defines the
   shared brand components (logo lockup, cards, steps, demo).
   ═══════════════════════════════════════════════════════════════ */

:root {
	/* sampled from the definitive logo artwork (wwwroot/img/searchstack-icon.png) */
	--ss-orange: #FD8802;
	--ss-orange-rgb: 253, 136, 2;
	--ss-ember: #D97400;      /* hover / deep orange */
	--ss-slate: #515C62;      /* the logo's layer grey */
	--ss-ink: #171A1E;        /* near-black with a slate bias */
	--ss-paper: #FBFAF7;      /* warm page ground, light theme */
	--si-font-sans-serif: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

:root, [data-bs-theme=light] {
	--si-primary: var(--ss-orange);
	--si-primary-rgb: var(--ss-orange-rgb);
	--si-primary-text-emphasis: #c66f00;
	--si-primary-bg-subtle: #fff4e3;
	--si-primary-border-subtle: #ffe3ba;
	--si-link-color: var(--ss-ember);
	--si-link-color-rgb: 221, 117, 0;
}

[data-bs-theme=dark] {
	--si-primary: var(--ss-orange);
	--si-primary-rgb: var(--ss-orange-rgb);
	--si-primary-text-emphasis: #ffb75e;
	--si-primary-bg-subtle: #2a1c05;
	--si-primary-border-subtle: #54380a;
	--si-link-color: var(--ss-orange);
	--si-link-color-rgb: var(--ss-orange-rgb);
}

/* Silicon compiles the old primary into .btn-primary as literals; re-point them */
.btn-primary {
	--si-btn-color: #231503;
	--si-btn-bg: var(--ss-orange);
	--si-btn-border-color: var(--ss-orange);
	--si-btn-hover-color: #fff;
	--si-btn-hover-bg: var(--ss-ember);
	--si-btn-hover-border-color: var(--ss-ember);
	--si-btn-focus-shadow-rgb: var(--ss-orange-rgb);
	--si-btn-active-color: #fff;
	--si-btn-active-bg: var(--ss-ember);
	--si-btn-active-border-color: var(--ss-ember);
	--si-btn-disabled-color: #231503;
	--si-btn-disabled-bg: var(--ss-orange);
	--si-btn-disabled-border-color: var(--ss-orange);
}

/* ── Brand typeface: Poppins for the wordmark and headings (matches the logo lockup) ── */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/poppins-600-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/poppins-700-latin.woff2') format('woff2');
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Poppins', var(--si-font-sans-serif);
}

/* ── Page ground: warm paper in light, theme default in dark ── */
body { background-color: var(--ss-paper); }
[data-bs-theme=dark] body { background-color: var(--si-body-bg); }

/* ── Navbar: flat white surface with a hairline, no shadow band ── */
.ss-navbar {
	background-color: #fff;
	border-bottom: 1px solid #EDEAE2;
	box-shadow: none;
}
[data-bs-theme=dark] .ss-navbar {
	background-color: var(--si-body-bg);
	border-bottom-color: var(--si-border-color);
}
.ss-navbar .nav-link { font-weight: 500; }

/* ── Brand lockup (navbar, footer): the icon is the real logo artwork ── */
.ss-logo { width: 42px; height: 42px; flex: none; object-fit: contain; }
.ss-wordmark {
	font-family: 'Poppins', var(--si-font-sans-serif);
	font-weight: 700;
	letter-spacing: -.02em;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--ss-ink);
}
.ss-wordmark .ss-dev { color: var(--ss-orange); }
[data-bs-theme=dark] .ss-wordmark { color: #fff; }
footer .ss-logo { width: 28px; height: 28px; }
footer .ss-wordmark { font-size: 1rem; }

/* ── Home page (Design A · Daylight) ── */
.home-page {
	padding-top: 67px; /* offset for fixed navbar */
}

.home-page .hero {
	width: 100%;
	padding: 4.5rem 0 4rem;
	position: relative;
	z-index: 0;
	overflow-x: clip;
}
.home-page .hero::after {
	content: "";
	position: absolute;
	top: -90px;
	right: -170px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--ss-orange-rgb), .11) 0%, transparent 65%);
	z-index: -1;
	pointer-events: none;
}

.home-page .hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 4rem;
	align-items: center;
}

.ss-eyebrow {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ss-ember);
	margin-bottom: 1.1rem;
}
[data-bs-theme=dark] .ss-eyebrow { color: var(--ss-orange); }

.ss-h1 {
	font-size: 3.4rem;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.06;
	text-wrap: balance;
}
.ss-h1 .ss-dot { color: var(--ss-orange); }

.ss-sub {
	font-size: 1.2rem;
	margin-top: 1.3rem;
	max-width: 32em;
}

.ss-meta {
	display: flex;
	gap: .6rem 1.4rem;
	flex-wrap: wrap;
	margin-top: 2.1rem;
	font-size: .86rem;
	font-weight: 500;
	color: var(--si-body-color);
}
.ss-meta span::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ss-orange);
	margin-right: 8px;
	vertical-align: 2px;
}

/* ── live demo card (class deliberately NOT .ss-demo — that's the demos bundle's root) ── */
.ss-livedemo {
	background: #fff;
	border: 1px solid #E7E3DA;
	border-radius: 16px;
	box-shadow: 0 24px 60px -18px rgba(23, 26, 30, .14);
	overflow: hidden;
}
[data-bs-theme=dark] .ss-livedemo {
	background: var(--si-secondary-bg);
	border-color: var(--si-border-color);
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5);
}
.ss-livedemo .ss-searchbar {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 22px 22px 0;
	padding: 13px 18px;
	border: 2px solid var(--ss-orange);
	border-radius: 12px;
}
.ss-livedemo .ss-searchbar .bx { color: var(--ss-orange); font-size: 1.25rem; flex: none; }
.ss-livedemo .ss-q { font-size: 1.05rem; font-weight: 500; color: var(--si-heading-color); }
.ss-caret {
	display: inline-block;
	width: 2px;
	height: 1.15em;
	background: var(--ss-orange);
	vertical-align: -3px;
	animation: ss-blink 1.1s steps(1) infinite;
}
@keyframes ss-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ss-caret { animation: none; } }

.ss-sugg {
	list-style: none;
	margin: 10px 8px 8px;
	padding: 0;
	min-height: 178px;
}
.ss-sugg li {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 10px 14px;
	border-radius: 9px;
	font-size: .98rem;
}
.ss-sugg li .bx { flex: none; opacity: .5; font-size: 1.05rem; }
.ss-sugg li b { color: var(--si-heading-color); }
.ss-sugg li.sel { background: #FFF3E2; }
[data-bs-theme=dark] .ss-sugg li.sel { background: rgba(var(--ss-orange-rgb), .12); }
.ss-sugg li .tag {
	margin-left: auto;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .6;
}
.ss-livedemo .ss-foot {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 12px 22px;
	border-top: 1px solid #F0EDE5;
	font-size: .82rem;
	background: #FCFBF8;
}
[data-bs-theme=dark] .ss-livedemo .ss-foot { border-color: var(--si-border-color); background: rgba(255, 255, 255, .03); }
.ss-livedemo .ss-foot .ok { color: #2E9E5B; font-weight: 700; }
.ss-livedemo .ss-foot .api {
	margin-left: auto;
	font-family: var(--si-font-monospace, monospace);
	font-size: .72rem;
	opacity: .55;
}

/* ── steps strip ── */
.ss-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.9rem;
	padding: 2.75rem 0 0;
	border-top: 1px solid #EDEAE2;
}
[data-bs-theme=dark] .ss-steps { border-color: var(--si-border-color); }
.ss-step { display: flex; gap: 1rem; align-items: flex-start; }
.ss-step .num {
	font-family: var(--si-font-monospace, monospace);
	font-weight: 700;
	color: var(--ss-ember);
	font-size: .88rem;
	border: 1.5px solid #F1C48C;
	border-radius: 999px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
[data-bs-theme=dark] .ss-step .num { color: var(--ss-orange); border-color: #54380a; }
.ss-step h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ss-step p { font-size: .9rem; margin: 4px 0 0; }

/* ── feature cards (class deliberately NOT .ss-card — that's a demos-bundle class) ── */
.ss-feat {
	background: #fff;
	border: 1px solid #EAE6DD;
	border-radius: 14px;
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	min-width: 0;
	height: 100%;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ss-feat:hover {
	border-color: #F2C48C;
	box-shadow: 0 14px 30px -14px rgba(23, 26, 30, .14);
	transform: translateY(-2px);
}
[data-bs-theme=dark] .ss-feat { background: var(--si-secondary-bg); border-color: var(--si-border-color); }
[data-bs-theme=dark] .ss-feat:hover { border-color: #54380a; }
@media (prefers-reduced-motion: reduce) { .ss-feat { transition: none; } .ss-feat:hover { transform: none; } }
.ss-feat .icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #FFF1DD;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-feat .icon .bx { font-size: 1.35rem; color: var(--ss-ember); }
[data-bs-theme=dark] .ss-feat .icon { background: rgba(var(--ss-orange-rgb), .14); }
[data-bs-theme=dark] .ss-feat .icon .bx { color: var(--ss-orange); }
.ss-feat h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ss-feat p { font-size: .97rem; margin: 0; }
.ss-feat code.req {
	display: block;
	background: #F6F4EE;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: .8rem;
	color: #5B4A16;
	overflow-x: auto;
	white-space: nowrap;
	margin-top: auto;
}
[data-bs-theme=dark] .ss-feat code.req { background: rgba(255, 255, 255, .05); color: #E8D9AF; }

/* plain-language proof elements */
.ss-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ss-pill {
	font-size: .8rem;
	font-weight: 600;
	color: #6B5B2E;
	background: #FBF3E4;
	border: 1px solid #F0DDB8;
	border-radius: 999px;
	padding: 5px 12px;
}
[data-bs-theme=dark] .ss-pill { color: #E8C989; background: rgba(var(--ss-orange-rgb), .1); border-color: #54380a; }
.ss-say {
	font-style: italic;
	background: #FFF6EA;
	border-left: 3px solid var(--ss-orange);
	border-radius: 0 10px 10px 0;
	padding: 10px 14px;
	margin: auto 0 0 !important;
	font-size: .92rem !important;
}
[data-bs-theme=dark] .ss-say { background: rgba(var(--ss-orange-rgb), .08); }
.ss-miniac { border: 1px solid #EAE6DD; border-radius: 10px; overflow: hidden; margin-top: auto; background: #fff; }
[data-bs-theme=dark] .ss-miniac { background: rgba(255, 255, 255, .03); border-color: var(--si-border-color); }
.ss-miniac .mi {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-bottom: 1px solid #F0EDE5;
	font-size: .88rem;
	font-weight: 500;
}
[data-bs-theme=dark] .ss-miniac .mi { border-color: var(--si-border-color); }
.ss-miniac .mi .bx { color: var(--ss-orange); }
.ss-miniac .ms { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: .85rem; }
.ss-miniac .ms .bx { opacity: .5; }
.ss-miniac .ms.first { background: #FFF3E2; }
[data-bs-theme=dark] .ss-miniac .ms.first { background: rgba(var(--ss-orange-rgb), .12); }
.ss-miniac b { color: var(--si-heading-color); }

/* ── Claude / console band ── */
.ss-claude {
	margin-top: 4rem;
	background: var(--ss-ink);
	color: #F4F2ED;
	border-radius: 18px;
	padding: 52px 56px;
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: 2.5rem;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.ss-claude > * { position: relative; }
.ss-claude .wm { position: absolute; right: -34px; bottom: -60px; opacity: .1; pointer-events: none; width: 300px; height: 300px; filter: grayscale(1) brightness(1.6); }
.ss-claude h2 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0; }
.ss-claude p { color: #B9BEC5; margin: .8rem 0 0; }
.ss-claude .quote { font-family: var(--si-font-monospace, monospace); font-size: .86rem; color: #FFA53C; }
.ss-claude .btn { justify-self: end; white-space: nowrap; }

@media (max-width: 991.98px) {
	.home-page .hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
	.ss-h1 { font-size: 2.6rem; }
	.ss-steps { grid-template-columns: 1fr; gap: 1.4rem; }
	.ss-claude { grid-template-columns: 1fr; padding: 36px 30px; }
	.ss-claude .btn { justify-self: start; }
}

/* phones: scale the hero down so the title, subhead and demo fit the screen width */
@media (max-width: 575.98px) {
	.home-page .hero-grid { gap: 2rem; }
	.ss-eyebrow { font-size: .7rem; letter-spacing: .1em; }
	.ss-h1 { font-size: 2.05rem; letter-spacing: -.03em; }
	.ss-sub { font-size: 1.05rem; margin-top: 1rem; }
	.ss-meta { margin-top: 1.6rem; gap: .5rem 1.1rem; }
}

/* ── Documentation pages ── */

/* Docs sidebar (Learn/Reference): white panel on the paper ground, warm active state */
#componentsNav {
	background-color: #fff;
}
[data-bs-theme=dark] #componentsNav { background-color: var(--si-body-bg); }
#componentsNav .list-group-item {
	font-size: .95rem;
	color: var(--si-body-color);
}
#componentsNav .list-group-item:hover {
	background-color: #FBF6EC;
	color: var(--si-heading-color);
}
#componentsNav .list-group-item.active {
	background-color: #FFF3E2;
	color: var(--ss-ember);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--ss-orange);
}
[data-bs-theme=dark] #componentsNav .list-group-item:hover { background-color: rgba(255, 255, 255, .04); }
[data-bs-theme=dark] #componentsNav .list-group-item.active {
	background-color: rgba(var(--ss-orange-rgb), .12);
	color: var(--ss-orange);
}

/* Readable line lengths and consistent imagery inside docs */
.docs-container p,
.docs-container ul,
.docs-container ol {
	max-width: 56rem;
}

.docs-container h1 {
	font-weight: 800;
	letter-spacing: -.03em;
}

.docs-container img.img-fluid {
	max-width: min(100%, 56rem);
	border: 1px solid #EAE6DD;
	box-shadow: 0 .275rem .75rem -.0625rem rgba(11, 15, 25, .06);
}
[data-bs-theme=dark] .docs-container img.img-fluid { border-color: var(--si-border-color); }

/* Callouts inside docs pick up the warm neutrals instead of the theme's cool grey */
.docs-container .alert-secondary {
	--si-alert-bg: #F6F4EE;
	--si-alert-border-color: #EAE6DD;
}
[data-bs-theme=dark] .docs-container .alert-secondary {
	--si-alert-bg: rgba(255, 255, 255, .04);
	--si-alert-border-color: var(--si-border-color);
}

/* Code blocks */
.docs-container pre.hljs {
	max-width: 56rem;
	padding: 1rem 1.25rem;
	border-radius: .5rem;
	overflow: auto;
}

/* Section headings get breathing room */
.docs-container h4,
.docs-container h5.h4 {
	margin-top: 1rem;
}

/* Tables */
.docs-container .table-responsive {
	max-width: 56rem;
}

/* Placeholder figure used where a screenshot does not exist yet */
.docs-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	max-width: 56rem;
	min-height: 11rem;
	padding: 1.5rem;
	text-align: center;
	color: #9397ad;
	background-color: rgba(var(--ss-orange-rgb), .05);
	border: 2px dashed #EAE6DD;
	border-radius: .5rem;
}

.docs-placeholder i {
	font-size: 2.5rem;
	opacity: .55;
}

.docs-placeholder span {
	font-size: .875rem;
}

[data-bs-theme="dark"] .docs-placeholder {
	background-color: rgba(var(--ss-orange-rgb), .08);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
	opacity: .7;
}

/* ── Demo pages: shared shell + centred mast above each demo app ── */
.demo-page {
	padding: calc(67px + 2.5rem) 0 4rem;
	min-height: 90vh;
}
.demo-mast {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto 1.75rem;
}
.demo-mast .ss-eyebrow { margin-bottom: .6rem; }
.demo-mast h1 {
	font-weight: 700;
	letter-spacing: -.03em;
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	margin: 0;
}
.demo-mast p {
	color: var(--si-gray-600);
	margin: .6rem 0 0;
}
/* "Build this with Claude" — hand-off to the visitor's own Claude */
.demo-build {
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem 1rem;
}
.demo-build-copy {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .9rem;
	color: var(--si-gray-600);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.demo-build-copy:hover { color: var(--ss-ember); }
.demo-build-hint {
	flex-basis: 100%;
	font-size: .85rem;
	color: var(--si-gray-600);
}

/* ── Mast pages (Compare, Terms, Privacy): give the old template classes real styles ── */
.documentation-section-mast {
	padding: 2.5rem 0 1rem;
}
.documentation-section-mast h1,
.documentation-section-mast h2 {
	font-weight: 800;
	letter-spacing: -.03em;
}
.documentation-container {
	padding-bottom: 3.5rem;
}
.documentation-container article p,
.documentation-container article ul,
.documentation-container article ol {
	max-width: 56rem;
}

/* ── Footer: paper ground + hairline, replacing the theme's cool grey band ── */
.site-footer {
	border-top: 1px solid #EDEAE2;
}
[data-bs-theme=dark] .site-footer { border-top-color: var(--si-border-color); }