/* =====================================================================
   Viable Brand theme overrides
   Built on top of Bootstrap 5.3 — see style.css for theme metadata.
   ===================================================================== */

:root {
	/* Brand palette */
	--vb-brand-dark:   #03045E;
	--vb-brand-mid:    #0077B6;
	--vb-brand-bright: #00B4D8;
	--vb-brand-light:  #90E0EF;
	--vb-brand-pale:   #CAF0F8;

	/* Semantic tokens */
	--vb-bg:           #ffffff;
	--vb-surface:      #f0f9ff;
	--vb-ink:          #0f0f10;
	--vb-muted:        #6c6c75;
	--vb-accent:       #0077B6;
	--vb-accent-hover: #03045E;
	--vb-ring:         rgba(0, 119, 182, 0.2);
	--vb-border:       #d0eaf5;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--vb-ink);
	background: var(--vb-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	letter-spacing: -0.02em;
	color: var(--vb-brand-dark);
}

a {
	color: var(--vb-accent);
}
a:hover {
	color: var(--vb-accent-hover);
}

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

.site-header {
	backdrop-filter: saturate(180%) blur(8px);
	background-color: rgba(255, 255, 255, 0.92) !important;
}

.navbar-brand span {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.navbar .nav-link {
	color: var(--vb-ink);
	font-weight: 500;
	padding-inline: 0.85rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
	color: var(--vb-accent);
}

/* --- Hero -------------------------------------------------------------- */

.viable-hero {
	background: linear-gradient(160deg, var(--vb-brand-pale) 0%, var(--vb-surface) 55%, #ffffff 100%);
}

.viable-hero-search .form-control,
.viable-hero-search .input-group-text {
	border-color: var(--vb-border);
	padding-block: 0.85rem;
}

.viable-hero-search .input-group {
	border-radius: 1rem;
	overflow: hidden;
}

/* --- Cards ------------------------------------------------------------- */

.card {
	border-radius: 1rem;
}

.tool-card {
	transition: transform 150ms ease, box-shadow 150ms ease;
	overflow: hidden;
}
.tool-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -14px rgba(15, 15, 16, 0.25) !important;
}

.tool-card--featured {
	border: 1px solid var(--vb-brand-bright) !important;
}

.category-card {
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.category-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -14px rgba(15, 15, 16, 0.2) !important;
}

/* --- Buttons ----------------------------------------------------------- */

.btn-dark {
	background-color: var(--vb-accent);
	border-color: var(--vb-accent);
	border-radius: 0.75rem;
	padding-inline: 1.1rem;
	font-weight: 500;
}
.btn-dark:hover,
.btn-dark:focus {
	background-color: var(--vb-accent-hover);
	border-color: var(--vb-accent-hover);
}
.btn-outline-dark {
	border-radius: 0.75rem;
	font-weight: 500;
	color: var(--vb-accent);
	border-color: var(--vb-accent);
}

.btn-lg {
	border-radius: 0.9rem;
	padding-inline: 1.4rem;
}

/* --- Pricing cards ----------------------------------------------------- */

.pricing-card {
	border-radius: 1.25rem;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.pricing-card:hover {
	transform: translateY(-3px);
}
.pricing-card--popular {
	box-shadow: 0 20px 45px -25px rgba(0, 119, 182, 0.4) !important;
	transform: translateY(-6px);
}

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

.site-footer {
	background-color: var(--vb-brand-dark) !important;
}
.site-footer a:hover {
	color: #ffffff !important;
}

/* --- Misc utilities ---------------------------------------------------- */

.object-fit-cover {
	object-fit: cover;
}

.content-prose {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #1c1c1e;
}
.content-prose p { margin-bottom: 1.15rem; }
.content-prose h2 { margin-top: 2.25rem; }
.content-prose h3 { margin-top: 1.75rem; }
.content-prose img { border-radius: 0.75rem; }
.content-prose blockquote {
	border-left: 3px solid var(--vb-ink);
	padding: 0.25rem 1rem;
	color: var(--vb-muted);
	font-style: italic;
}

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

.pagination,
.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}
.page-numbers a,
.page-numbers span,
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.75rem;
	border-radius: 0.6rem;
	border: 1px solid var(--vb-border);
	text-decoration: none;
	color: var(--vb-ink);
}
.page-numbers.current,
.pagination .current {
	background: var(--vb-ink);
	color: #fff;
	border-color: var(--vb-ink);
}

/* --- Stars ------------------------------------------------------------- */

.viable-stars i {
	font-size: 0.95rem;
}

/* --- Forms ------------------------------------------------------------- */

.form-control,
.form-select {
	border-radius: 0.65rem;
	border-color: var(--vb-border);
}
.form-control:focus,
.form-select:focus {
	border-color: var(--vb-ink);
	box-shadow: 0 0 0 0.2rem var(--vb-ring);
}

/* --- Dark footer inputs ------------------------------------------------ */

.site-footer .form-control {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* --- Accordion --------------------------------------------------------- */

.accordion-flush .accordion-button {
	background: transparent;
	font-weight: 600;
}
.accordion-flush .accordion-button:not(.collapsed) {
	color: var(--vb-ink);
	background: var(--vb-surface);
}

/* --- Recent tools: tabs + view toggle ----------------------------------- */

.viable-recent-tabs {
	gap: 0.4rem;
	padding-bottom: 0.25rem;
	margin-bottom: 0;
	scrollbar-width: thin;
}
.viable-recent-tabs::-webkit-scrollbar {
	height: 4px;
}
.viable-recent-tabs::-webkit-scrollbar-thumb {
	background: var(--vb-border);
	border-radius: 4px;
}

.viable-recent-tabs .nav-link {
	color: var(--vb-ink);
	background: transparent;
	border: 1px solid var(--vb-border);
	border-radius: 999px;
	padding: 0.4rem 0.95rem;
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
}
.viable-recent-tabs .nav-link:hover {
	background: var(--vb-surface);
}
.viable-recent-tabs .nav-link.active {
	background: var(--vb-ink);
	color: #fff;
	border-color: var(--vb-ink);
}

.viable-view-toggle .btn {
	padding: 0.35rem 0.85rem;
	font-size: 0.9rem;
}
.viable-view-toggle .btn.active {
	background: var(--vb-ink);
	color: #fff;
	border-color: var(--vb-ink);
}

.tool-list-item__thumb {
	width: 220px;
	min-height: 140px;
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
}
@media (max-width: 767.98px) {
	.tool-list-item__thumb {
		width: 100%;
		height: 180px;
		border-radius: 1rem 1rem 0 0;
	}
}

.tool-list-item .card {
	overflow: hidden;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.tool-list-item .card:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -14px rgba(15, 15, 16, 0.25) !important;
}

/* View mode switching */
.viable-recent-results[data-view="card"] .viable-recent-list {
	display: none !important;
}
.viable-recent-results[data-view="list"] .viable-recent-cards {
	display: none !important;
}

/* --- Responsive tweaks -------------------------------------------------- */

@media (max-width: 767px) {
	.display-4 { font-size: 2.25rem; }
	.display-5 { font-size: 1.85rem; }
	.pricing-card--popular { transform: none; }
}