/* Legal Presentation Spotlight — front-end styles.
   Intentionally BRANDED to match tools.thelawtoknow-tools's own
   ink-and-gold design system, and specifically the same visual language
   already established by the Daily Legal Quiz plugin on this site — same
   gold-framed "window" with the Lady Justice statue, same hex values,
   same gold/black/gray-only palette (no other colors anywhere, including
   the button text — white-on-gold was tried once for the quiz's gateway
   buttons and proved hard to read in practice; this plugin starts
   correctly instead of repeating that mistake). */

.lcp-spotlight {
	--lcp-gold: #93731f;
	--lcp-gold-hover: #7a5c15;
	--lcp-gold-bright: #e89e1e;
	--lcp-gold-line: rgba(147, 115, 31, 0.4);
	--lcp-ink: #14120d;
	--lcp-ink-soft: #201d16;
	--lcp-surface: #f7f8f9;
	--lcp-surface-2: #efece3;
	--lcp-border: #e2e0d6;

	max-width: 560px;
	margin: 2em auto;
	padding: 1.75em;
	background: var(--lcp-surface);
	border: 1px solid var(--lcp-border);
	border-radius: 4px;
	color: var(--lcp-ink-soft);
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
}

.lcp-spotlight__window {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	width: 160px;
	margin: 0 auto 1.25em;
	padding: 1em 0.75em 0.85em;
	background: var(--lcp-surface-2);
	border: 1px solid var(--lcp-gold-line);
	border-radius: 2px;
}

.lcp-spotlight__statue {
	width: 88px;
	height: auto;
	filter: drop-shadow(0 6px 12px rgba(20, 18, 13, 0.16));
}

.lcp-spotlight__eyebrow {
	margin: 0;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lcp-gold);
}

.lcp-spotlight__title {
	margin: 0 0 0.35em;
	font-size: 1.4em;
	line-height: 1.2;
	color: var(--lcp-ink);
	font-weight: 700;
}

.lcp-spotlight__tagline {
	margin: 0 0 0.75em;
	font-style: italic;
	font-size: 0.98em;
	opacity: 0.85;
}

.lcp-spotlight__sub {
	margin: 0 auto 1.25em;
	max-width: 40em;
	font-size: 0.9em;
	opacity: 0.75;
}

/* :link and :visited are spelled out explicitly, with !important, because
   this button is an <a> living inside a WordPress theme we don't control.
   Two things happened without this: the browser's own default visited-link
   color (a muddy brown/purple) took over once someone had clicked the
   button once, and/or the theme's own `a`/`a:visited` rules had equal or
   higher effective specificity than our single class selector. Either way
   the result reads as "gold on gold" - same family of bug as the earlier
   white-on-gold contrast fix on the Daily Legal Quiz gateway button, just
   a different route to the same failure. Pinning every link state here
   guarantees the text stays readable regardless of click history or theme. */
.lcp-spotlight__button,
.lcp-spotlight__button:link,
.lcp-spotlight__button:visited {
	display: inline-block;
	padding: 0.65em 1.4em;
	background: var(--lcp-gold) !important;
	color: var(--lcp-ink) !important;
	font-family: inherit;
	font-size: 0.98em;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--lcp-ink);
	border-radius: 2px;
	transition: background 0.15s ease;
}

.lcp-spotlight__button:hover,
.lcp-spotlight__button:focus,
.lcp-spotlight__button:active {
	background: var(--lcp-gold-bright) !important;
	color: var(--lcp-ink) !important;
}

.lcp-spotlight__subscriber-note {
	margin: 1.25em 0 0;
	padding-top: 1em;
	border-top: 1px solid var(--lcp-gold-line);
	font-size: 0.85em;
	opacity: 0.8;
}

.lcp-spotlight__subscriber-note a {
	color: var(--lcp-gold);
	font-weight: 700;
	text-decoration: underline;
}