/*
 * Styles for ss-lead-capture.php.
 *
 * Design intent: this block is the primary action on an article page, so it
 * should read as a deliberate card, not as a faint grey box the eye slides past.
 * It borrows the theme's own palette tokens (with literal fallbacks) so it can
 * never drift away from the site, and it uses the accent colour for the button
 * so the action matches the "Work with me" pill in the navigation.
 *
 * TWO THINGS HERE ARE LOAD BEARING. Do not "tidy" either one.
 *
 * 1. The honeypot rule hides the field with position plus a large negative
 *    offset, NOT display:none, because some spam bots specifically skip
 *    display:none fields when deciding what to fill in. Weakening that rule
 *    weakens layer 2 of the REST routes' defence. See ss-lead-capture.php.
 *
 * 2. There is deliberately NO prefers-color-scheme: dark block. An earlier
 *    version had one, and it was a real bug rather than a nicety: the
 *    skillsuites theme is light only, so a visitor whose operating system is set
 *    to dark got a dark card with pale text sitting inside a white article. The
 *    form has to match the page it is on, not the visitor's OS.
 */

/* THE VARIABLES MUST BE DECLARED ON BOTH WRAPPERS.
 *
 * There are two independent roots in this plugin's markup. The auto-injected
 * lead block is an <aside class="ss-lc">. The [ss_contact_form] shortcode is a
 * <div class="ss-lc-contact-form"> with NO .ss-lc ancestor at all.
 *
 * When these were declared on .ss-lc alone, every var() inside the contact form
 * resolved to nothing. The visible symptom was subtle and misleading: the submit
 * button's `background: var(--ss-lc-accent)` became an invalid declaration, so
 * the button painted transparent, which on the dark panel of /work-with-me/
 * looked exactly like a deliberately dark button rather than a broken one. I
 * chased CSS specificity twice before measuring it.
 *
 * If a third entry point is ever added, add it to this selector list too.
 */
.ss-lc,
.ss-lc-contact-form {
	--ss-lc-primary: var(--wp--preset--color--primary, #0D5C73);
	--ss-lc-dark:    var(--wp--preset--color--primary-dark, #083D4F);
	--ss-lc-accent:  var(--wp--preset--color--accent, #E0731A);
	--ss-lc-ink:     var(--wp--preset--color--ink, #0b1f26);
	--ss-lc-body:    var(--wp--preset--color--body, #27383d);
	--ss-lc-muted:   var(--wp--preset--color--muted, #5a6b70);
	--ss-lc-border:  var(--wp--preset--color--border, #dde7ea);
	--ss-lc-soft:    var(--wp--preset--color--primary-soft, #E8F1F4);
}

.ss-lc {
	margin: 2.6em 0;
	padding: 1.5em 1.6em 1.4em;
	border: 1px solid var(--ss-lc-border);
	border-left: 4px solid var(--ss-lc-primary);
	border-radius: 0 12px 12px 0;
	background: linear-gradient(180deg, var(--ss-lc-soft) 0%, #fff 62%);
	box-shadow: 0 1px 3px rgba(11, 31, 38, .06), 0 8px 24px rgba(11, 31, 38, .05);
}

/* Selector is .ss-lc h2.ss-lc-h rather than .ss-lc-h on purpose. A block theme
   sets a generous margin-block-start on every h2 in the content, and that rule
   beat a single class, leaving roughly 50px of dead space above the heading
   inside the card. Matching element plus class plus ancestor wins on specificity
   without reaching for !important. margin-block is reset explicitly because the
   theme sets the logical property, not the physical one. */
.ss-lc h2.ss-lc-h {
	margin: 0 0 .45em;
	margin-block: 0 .45em;
	font-size: 1.28em;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ss-lc-ink);
}

/* Same reason: the theme's trailing paragraph margin left dead space at the
   bottom of the card. */
.ss-lc > *:last-child { margin-bottom: 0; }

.ss-lc-body {
	margin: 0 0 1.15em;
	font-size: .98em;
	line-height: 1.6;
	color: var(--ss-lc-body);
	max-width: 60ch;
}

.ss-lc-form { margin: 0; }

.ss-lc-row {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	align-items: stretch;
	margin-bottom: .6em;
}

/* The contact form stacks its rows. The lead form keeps the email input and the
   button on one line wherever there is room, and stacks below 30em. */
.ss-lc-contact-form .ss-lc-row {
	flex-direction: column;
	align-items: stretch;
	gap: .35em;
}

/* CRITICAL, and the reason single-line inputs once rendered 270px tall.
   The shared input rule sets `flex: 1 1 15em`. flex-basis resolves along the
   MAIN axis, and this row is flex-direction: column, so 15em became the input's
   HEIGHT rather than its width. Name and Email came out as huge empty boxes.
   Inside the stacked contact form the inputs must size to their content. */
.ss-lc-contact-form .ss-lc-input,
.ss-lc-contact-form .ss-lc-textarea {
	flex: 0 0 auto;
	width: 100%;
}

.ss-lc-label {
	font-weight: 600;
	font-size: .9em;
	color: var(--ss-lc-ink);
	flex: 0 0 100%;
}

/* On the one-field lead form the visible label crowded the input and bought
   nothing: the heading above already says what this is, and the placeholder
   names the field. Hide it visually, keep it for screen readers. */
.ss-lc-lead .ss-lc-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ss-lc-input,
.ss-lc-textarea {
	/* Explicit, not inherited. Without it, width:100% plus this padding and
	   border overflowed the container and the inputs ran past the right edge of
	   the dark panel on /work-with-me/. Never assume a theme has set a global
	   border-box for form controls; many reset everything except inputs. */
	box-sizing: border-box;
	padding: .72em .85em;
	border: 1.5px solid #b9c8cd;
	border-radius: 8px;
	font-size: 1em;
	font-family: inherit;
	line-height: 1.4;
	flex: 1 1 15em;
	min-width: 0;
	background: #fff;
	color: var(--ss-lc-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* The default placeholder grey fails contrast against white. This is WCAG AA
   for normal text and still reads as secondary next to the entered value. */
.ss-lc-input::placeholder,
.ss-lc-textarea::placeholder {
	color: #6b7a80;
	opacity: 1;
}

.ss-lc-textarea {
	width: 100%;
	resize: vertical;
	min-height: 6.5em;
}

.ss-lc-input:hover,
.ss-lc-textarea:hover { border-color: var(--ss-lc-primary); }

.ss-lc-input:focus,
.ss-lc-textarea:focus {
	outline: none;
	border-color: var(--ss-lc-primary);
	box-shadow: 0 0 0 3px rgba(13, 92, 115, .18);
}

/* THERE ARE TWO WRAPPERS AND BOTH MUST BE LISTED, every time.
   The auto-injected lead block is wrapped in .ss-lc. The [ss_contact_form]
   shortcode is wrapped in .ss-lc-contact-form and has NO .ss-lc ancestor.
   Styling only .ss-lc left the contact button completely unstyled.
   The element+class+ancestor form is needed because the theme styles submit
   buttons in the content area and its stylesheet loads after this one, so a
   bare .ss-lc-btn lost on cascade order and rendered dark navy, which on the
   dark panel of /work-with-me/ was nearly invisible. */
.ss-lc button.ss-lc-btn,
.ss-lc-contact-form button.ss-lc-btn,
.ss-lc .ss-lc-btn,
.ss-lc-contact-form .ss-lc-btn {
	padding: .72em 1.35em;
	border: 0;
	border-radius: 8px;
	background: var(--ss-lc-accent);
	color: #fff;
	font-weight: 700;
	font-size: 1em;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	flex: 0 0 auto;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(224, 115, 26, .3);
	transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.ss-lc button.ss-lc-btn:hover,
.ss-lc-contact-form button.ss-lc-btn:hover {
	background: #c4620f;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(224, 115, 26, .38);
}

.ss-lc button.ss-lc-btn:active,
.ss-lc-contact-form button.ss-lc-btn:active { transform: translateY(0); }

.ss-lc button.ss-lc-btn:focus-visible,
.ss-lc-contact-form button.ss-lc-btn:focus-visible {
	outline: 3px solid var(--ss-lc-dark);
	outline-offset: 2px;
}

.ss-lc button.ss-lc-btn:disabled,
.ss-lc-contact-form button.ss-lc-btn:disabled {
	opacity: .65;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* Below this the input and button stop fitting side by side without one of them
   becoming uncomfortably narrow, so both go full width. */
@media (max-width: 30em) {
	.ss-lc { padding: 1.25em 1.15em 1.15em; }
	.ss-lc-h { font-size: 1.15em; }
	/* Same specificity lesson as the base button rule: a bare .ss-lc-btn here
	   would lose to the theme and the button would not go full width on a
	   phone, which is the one place it matters most. */
	.ss-lc .ss-lc-lead .ss-lc-input,
	.ss-lc-lead .ss-lc-input,
	.ss-lc button.ss-lc-btn,
	.ss-lc-contact-form button.ss-lc-btn { flex: 1 1 100%; width: 100%; }
}

.ss-lc-fine,
.ss-lc-noscript {
	margin: .7em 0 0;
	font-size: .85em;
	line-height: 1.5;
	color: var(--ss-lc-muted);
}

/* No reserved min-height. It was holding roughly a line of blank space at the
   bottom of every card to avoid a layout shift on submit, which cost real
   whitespace on every page view to smooth one moment that happens once. The
   :empty rule collapses its margin too, so the card ends where the text ends. */
.ss-lc-status {
	margin: .6em 0 0;
	font-size: .92em;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ss-lc-ink);
}

.ss-lc-status:empty { margin: 0; }

.ss-lc-cta {
	margin: 1.2em 0 0;
	padding-top: 1em;
	border-top: 1px solid var(--ss-lc-border);
	font-size: .96em;
	line-height: 1.55;
	color: var(--ss-lc-body);
}

.ss-lc-cta a {
	color: var(--ss-lc-primary);
	font-weight: 700;
}

/* The end-of-article variant is the last thing on the page, so it carries a
   little more weight than the inline one. */
.ss-lc-end {
	background: linear-gradient(180deg, var(--ss-lc-soft) 0%, #fff 70%);
	border-left-color: var(--ss-lc-accent);
}

/* The contact form on /work-with-me/ sits inside a dark panel, so it inverts. */
.ssw-contact .ss-lc {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .18);
	border-left-color: var(--ss-lc-accent);
	box-shadow: none;
	margin: 1.2em 0 1.4em;
}
.ssw-contact .ss-lc-h,
.ssw-contact .ss-lc-body,
.ssw-contact .ss-lc-label,
.ssw-contact .ss-lc-status { color: #eaf3f6; }
.ssw-contact .ss-lc-fine,
.ssw-contact .ss-lc-noscript { color: #b6ccd4; }
.ssw-contact .ss-lc-input,
.ssw-contact .ss-lc-textarea {
	background: #fff;
	border-color: rgba(255, 255, 255, .3);
	color: var(--ss-lc-ink);
}

/* Honeypot. Present in the DOM, NOT display:none, moved far off screen.
   See the note at the top of this file before changing anything here. */
.ss-lc-honeypot {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}