/*
Theme Name:   Search To Sale
Theme URI:    https://searchtosale.io/
Description:  Theme for S2S
Author:       John Wilander
Author URI:   https://searchtosale.io/
Template:     bricks
Version:      1.1
Text Domain:  bricks
*/

figure {
	margin: 0;
}

td {
	padding: var(--space-xs);
	border: 1px solid;
}

header.scrolling {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* hero bg fade */
.hero-bg-fade {
	position: relative;
}
.hero-bg-fade::before {
	/*background-image: radial-gradient(100dvw 100dvw at top left, var(--white), var(--white-trans-60) 55%, transparent), linear-gradient(to bottom, transparent, var(--white-trans-60) 60%, var(--white));*/
	background-image: radial-gradient(100dvw 150dvw at top left, var(--white), var(--white-trans-60) 55%, transparent), linear-gradient(to bottom, transparent 10%, var(--white-trans-60) 60%, var(--white));
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

:where(.hero-bg-fade > *) {
	position: relative;
}

.card {
	transition: none;
}


/* ===== Base (light by default) ===== */
.tippy-box[data-theme~="light"] {
	background: #ffffff;
	color: #111827; /* near-neutral 900 */
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 8px;
	box-shadow:
		0 10px 15px -3px rgba(0,0,0,0.10),
		0 4px 6px -2px rgba(0,0,0,0.05);
	font-size: 14px;
	line-height: 1.35;
	max-width: min(550px, 100dvw) !important;
	padding: 6px 12px;
}
.tippy-box[data-theme~="light"] .tippy-arrow:before {
	color: #ffffff; /* arrow matches background */
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));
	
}
.tippy-box[data-theme~="light"] .tippy-content a {
	color: #1d4ed8; /* blue-700 */
	text-decoration: underline;
}
.tippy-box[data-theme~="light"] .tippy-content p { margin: 0; }
.tippy-box[data-theme~="light"] .tippy-content small { opacity: .8; }

/* Subtle entry/exit (works with Tippy's transitions) */
.tippy-box[data-theme~="light"][data-state="hidden"] {
	opacity: 0;
	transform: translateY(2px) scale(.98);
	transition: opacity .12s ease, transform .12s ease;
}

/* ===== Dark mode (scoped to your HTML class) ===== */
html.color-scheme--alt .tippy-box[data-theme~="light"] {
	background: #0b0f19; /* deep navy/black */
	color: #e5e7eb;      /* gray-200 */
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow:
		0 12px 24px -8px rgba(0,0,0,0.6),
		0 2px 6px -2px rgba(0,0,0,0.5);
}
html.color-scheme--alt .tippy-box[data-theme~="light"] .tippy-arrow:before {
	color: #0b0f19;
	filter: drop-shadow(0 2px 0 rgba(255,255,255,0.12));
}
html.color-scheme--alt .tippy-box[data-theme~="light"] .tippy-content a {
	color: #93c5fd; /* blue-300 */
	text-decoration: underline;
}
html.color-scheme--alt .tippy-box[data-theme~="light"] .tippy-content small { opacity: .8; }

/* ===== Accessibility niceties ===== */
@media (prefers-reduced-motion: reduce) {
	.tippy-box[data-theme~="light"] {
		transition: none !important;
	}
}

/* Dotted hint for any element that has a Tippy tooltip */
:where([data-tippy-content]):not(a):not([data-no-hint]) {
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: currentColor;
	text-decoration-thickness: .08em;   /* subtle */
	text-underline-offset: .15em;
	cursor: help;
}

/* If you ever use a class instead of the data-attr */
:where(.has-tippy):not(a):not([data-no-hint]) {
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: currentColor;
	text-decoration-thickness: .08em;
	text-underline-offset: .15em;
	cursor: help;
}

/* Don’t underline icon-only tooltips */
:where([data-tippy-content]:has(i):not(:has(> :not(i)))) {
	text-decoration: none;
	cursor: pointer;
}

/* Optional: a little stronger on hover/focus for affordance */
:where([data-tippy-content]:not(a):not([data-no-hint])):is(:hover, :focus-visible),
:where(.has-tippy:not(a):not([data-no-hint])):is(:hover, :focus-visible) {
	text-decoration-thickness: .12em;
}

/* Dark theme (inherits color; nothing special needed, but you can tweak) */
html.color-scheme--alt :where([data-tippy-content]):not(a):not([data-no-hint]) {
	/* example: lighten the dotted line a touch if text is very light */
	text-decoration-color: currentColor;
}




/*
gradient notes:

radial-gradient(100dvw 100dvw at top left, var(--white), transparent), linear-gradient(0deg, var(--white), 47%, transparent 66%), linear-gradient( 180deg, var(--white-trans-40), 14%, transparent 60%)





*/