/**
 * single-content-feedback.css
 *
 * Rate-and-review form at the bottom of single blog posts.
 *
 * Markup is in comments.php — the section is `.single-content-feedback`,
 * the form is `.thisismyurl-testimonial-feedback` inside `.single-content-feedback__form`,
 * the star widget is `<fieldset class="comment-form-rating"> <span class="star-rating-selection">`,
 * each star is a clipped `<input type="radio">` + decorative `<label>★</label>` pair.
 *
 * Token reference: assets/css/tokens.css. Gold-text variant (--color-gold-text,
 * #8B6914) is the AA-compliant amber for foreground use on the light surface
 * the card sits on — `--color-gold` is reserved for accent fills and fails
 * AA at small sizes against white.
 *
 * Conditionally enqueued on is_singular('post') alongside single-article.css.
 */

@layer components {

	/* ---------- container ---------- */

	.single-content-feedback {
		margin: 3rem auto 0;
		padding: 2rem 1.75rem;
		background: var(--gradient-form-bg);
		border: 1px solid rgba(18, 52, 86, 0.18);
		border-radius: var(--radius-card);
	}

	.single-content-feedback__inner {
		max-inline-size: 640px;
		margin-inline: auto;
	}

	.single-content-feedback__header {
		margin-bottom: 1.5rem;
	}

	.single-content-feedback__header h2 {
		margin: 0 0 0.25rem;
		font-size: clamp(1.375rem, 2vw + 0.5rem, 1.75rem);
		line-height: 1.2;
		color: var(--color-text-strong);
	}

	.single-content-feedback__summary {
		margin: 0.25rem 0 0;
		font-size: var(--fs-sm);
		color: var(--color-muted);
	}

	.single-content-feedback__summary strong {
		color: var(--color-text-strong);
		font-size: 1rem;
		font-weight: 700;
	}

	.single-content-feedback__status {
		margin: 0 0 1.25rem;
		padding: 0.65rem 0.85rem;
		font-size: var(--fs-sm);
		border-radius: var(--radius-sm);
	}

	/* Empty status placeholder leaves no visual chrome; JS / server flash
	   states fill in the text. */
	.single-content-feedback__status:empty {
		display: none;
	}

	.single-content-feedback__status--queued {
		background: rgba(14, 116, 144, 0.08);
		color: var(--color-text-strong);
	}

	.single-content-feedback__status--invalid,
	.single-content-feedback__status--error,
	.single-content-feedback__status--rate_limited,
	.single-content-feedback__status--unsupported,
	.single-content-feedback__status--spam,
	.single-content-feedback__status--turnstile_failed {
		background: var(--color-error-soft);
		color: var(--color-error-text);
	}

	/* ---------- existing reviews ---------- */

	.single-content-feedback__reviews {
		margin: 0 0 2rem;
	}

	.single-content-feedback__reviews h3 {
		margin: 0 0 0.75rem;
		font-size: var(--fs-sm);
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.single-content-feedback__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.single-content-feedback__list > li {
		padding-top: 1rem;
		border-top: 1px solid var(--color-border);
	}

	.single-content-feedback__list > li:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.single-content-feedback__list .comment-body {
		margin: 0;
	}

	.single-content-feedback__list .comment-meta {
		display: flex;
		align-items: baseline;
		gap: 0.75rem;
		margin: 0 0 0.35rem;
	}

	.single-content-feedback__list .fn {
		font-weight: 600;
		font-size: 0.9rem;
		font-style: normal;
		color: var(--color-text-strong);
	}

	.single-content-feedback__list .comment-metadata {
		font-size: var(--fs-xs, 0.75rem);
		color: var(--color-muted);
	}

	.single-content-feedback__list .comment-rating {
		margin: 0 0 0.3rem;
		font-size: 1rem;
		color: var(--color-gold-text);
		letter-spacing: 0.05em;
	}

	.single-content-feedback__list .comment-content p {
		margin: 0;
		font-size: 0.9rem;
		line-height: 1.55;
		color: var(--color-text);
	}

	/* ---------- form ---------- */

	.single-content-feedback__form {
		margin-top: 0;
	}

	.thisismyurl-testimonial-feedback {
		display: flex;
		flex-direction: column;
		gap: 1.1rem;
	}

	.thisismyurl-testimonial-feedback .rating-nudge {
		margin: 0;
		font-size: var(--fs-sm);
		color: var(--color-muted);
	}

	/* Name + Email side-by-side at ≥ 520px. */
	@media (min-width: 520px) {
		.thisismyurl-testimonial-feedback {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem 1rem;
		}
		.thisismyurl-testimonial-feedback > .rating-nudge,
		.thisismyurl-testimonial-feedback > .comment-form-rating,
		.thisismyurl-testimonial-feedback > .comment-form-comment,
		.thisismyurl-testimonial-feedback > .thisismyurl-contact-form__honeypot,
		.thisismyurl-testimonial-feedback > .cf-turnstile,
		.thisismyurl-testimonial-feedback > .form-submit,
		.thisismyurl-testimonial-feedback > input[type='hidden'] {
			grid-column: 1 / -1;
		}
	}

	/* Field wrappers (Name / Email / Review). */
	.thisismyurl-testimonial-feedback .comment-form-author,
	.thisismyurl-testimonial-feedback .comment-form-email,
	.thisismyurl-testimonial-feedback .comment-form-comment {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}

	.thisismyurl-testimonial-feedback label {
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--color-text);
	}

	.thisismyurl-testimonial-feedback .required {
		color: var(--color-error);
		font-weight: 600;
	}

	.thisismyurl-testimonial-feedback input[type='text'],
	.thisismyurl-testimonial-feedback input[type='email'],
	.thisismyurl-testimonial-feedback textarea {
		width: 100%;
		padding: 0.65rem 0.75rem;
		font-size: 1rem; /* ≥ 16px prevents iOS auto-zoom on focus. */
		line-height: 1.5;
		color: var(--color-text);
		background: var(--color-bg);
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		box-sizing: border-box;
	}

	.thisismyurl-testimonial-feedback textarea {
		resize: vertical;
		min-height: 9rem;
		font-family: inherit;
	}

	.thisismyurl-testimonial-feedback input:focus-visible,
	.thisismyurl-testimonial-feedback textarea:focus-visible {
		border-color: var(--color-accent);
	}

	/* ---------- star widget ---------- */

	.thisismyurl-testimonial-feedback .comment-form-rating {
		margin: 0;
		padding: 0;
		border: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.thisismyurl-testimonial-feedback .comment-form-rating legend {
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--color-text);
		width: auto;
	}

	/* Reverse the 5→1 DOM order so the visible row reads 1★ → 5★, while the
	   `~` sibling selectors still fill correctly because in row-reverse, the
	   "next siblings" of a checked radio sit visually to its left. */
	.star-rating-selection {
		display: inline-flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		gap: 0;
	}

	/* Clip the native radio without removing it from the focus order. */
	.star-rating-selection input[type='radio'] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.star-rating-selection label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0.25rem;
		font-size: 1.75rem;
		line-height: 1;
		color: var(--color-border-strong);
		cursor: pointer;
		user-select: none;
		transition: color 120ms ease-out;
	}

	/* Selected — fill the chosen star and all visually-left stars (the
	   "next siblings" in DOM-reverse). */
	.star-rating-selection input[type='radio']:checked ~ label {
		color: var(--color-gold-text);
	}

	/* Hover — fill the hovered star and everything to its left, but only
	   when no rating is locked in yet. */
	.star-rating-selection:not(:has(input:checked)):hover label:hover,
	.star-rating-selection:not(:has(input:checked)):hover label:hover ~ label {
		color: var(--color-gold-text);
	}

	/* If a rating is already selected, hover still previews a different
	   value cleanly (fill from hovered star leftward, override the static
	   selection). */
	.star-rating-selection:has(input:checked):hover label:hover,
	.star-rating-selection:has(input:checked):hover label:hover ~ label {
		color: var(--color-gold-text);
	}

	/* Focus ring on the visible label whenever its associated radio is
	   keyboard-focused. */
	.star-rating-selection input[type='radio']:focus-visible + label {
		outline: 3px solid var(--color-teal);
		outline-offset: 2px;
		border-radius: 2px;
	}

	/* Disabled / submitted lock. */
	.thisismyurl-testimonial-feedback[aria-busy='true'] .star-rating-selection label,
	.star-rating-selection:has(input[disabled]) label {
		opacity: 0.6;
		cursor: default;
		pointer-events: none;
	}

	/* ---------- honeypot ---------- */

	.thisismyurl-testimonial-feedback .thisismyurl-contact-form__honeypot {
		position: absolute;
		left: -10000px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* ---------- turnstile ---------- */

	.thisismyurl-testimonial-feedback .cf-turnstile {
		margin: 0;
	}

	/* ---------- submit button ---------- */

	.thisismyurl-testimonial-feedback .form-submit {
		margin: 0;
	}

	.thisismyurl-testimonial-feedback .form-submit .submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0.78rem 1.25rem;
		font: inherit;
		font-weight: 600;
		letter-spacing: -0.005em;
		color: #fff;
		background: var(--color-accent);
		border: 1px solid var(--color-accent);
		border-radius: var(--radius-sm);
		cursor: pointer;
		transition: background-color 140ms ease-out, transform 80ms ease-out;
	}

	.thisismyurl-testimonial-feedback .form-submit .submit:hover {
		background: var(--color-accent-strong);
		border-color: var(--color-accent-strong);
		transform: translateY(-1px);
	}

	.thisismyurl-testimonial-feedback .form-submit .submit:focus-visible {
		outline: 3px solid var(--color-teal);
		outline-offset: 2px;
	}

	.thisismyurl-testimonial-feedback .form-submit .submit.is-pending {
		opacity: 0.6;
		cursor: wait;
		pointer-events: none;
		transform: none;
	}

	/* Mobile: submit goes full-width below 520px. */
	@media (max-width: 519.98px) {
		.thisismyurl-testimonial-feedback .form-submit .submit {
			width: 100%;
		}
	}

	/* ---------- mobile padding ---------- */

	@media (max-width: 599.98px) {
		.single-content-feedback {
			padding: 1.5rem 1.25rem;
		}
		.single-content-feedback__header h2 {
			font-size: 1.25rem;
		}
		.star-rating-selection label {
			font-size: 2rem; /* Bigger glyph at touch sizes. */
		}
	}

	/* ---------- reduced motion ---------- */

	@media (prefers-reduced-motion: reduce) {
		.star-rating-selection label,
		.thisismyurl-testimonial-feedback .form-submit .submit {
			transition: none;
		}
		.thisismyurl-testimonial-feedback .form-submit .submit:hover {
			transform: none;
		}
	}
}