/*
 * TFH Community: baseline styling for ratings, comments, flagging and the
 * account page.
 *
 * Functional and on-brand, but deliberately restrained: the design refresh
 * restyles these surfaces. Everything visual is driven by the custom
 * properties below, so a theme can re-skin by overriding tokens instead of
 * fighting selectors.
 *
 * Defaults assume the light page surface the single-trailer and article
 * templates sit on.
 */

:root {
	--tfhc-red: #ba2e29;
	--tfhc-red-deep: #661917;
	--tfhc-ink: #1e2a2e;
	--tfhc-muted: #6f7a80;
	--tfhc-line: #dcdcdc;
	--tfhc-surface: #ffffff;
	--tfhc-mark-off: #d5d5d5;
	--tfhc-mark-on: #e0561f;
	--tfhc-radius: 8px;
	--tfhc-font-display: "Oswald", helvetica, arial, sans-serif;
	--tfhc-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ══ Rating marks ═══════════════════════════════════════════════════════════ */
.tfh-rating { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }

.tfh-rating__marks { position: relative; display: inline-block; line-height: 1; white-space: nowrap; }
.tfh-rating__track,
.tfh-rating__fill { display: inline-flex; gap: 2px; }
.tfh-rating__track { color: var(--tfhc-mark-off); }
.tfh-rating__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--tfhc-mark-on);
}
.tfh-rating__mark { display: inline-flex; font-size: 18px; }
.tfh-rating__count { font-size: 12px; color: var(--tfhc-muted); font-variant-numeric: tabular-nums; }

/* ══ Rating widget ══════════════════════════════════════════════════════════ */
.tfh-rating-widget {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin: 16px 0 18px;
	padding: 12px 16px;
	background: var(--tfhc-surface);
	border: 1px solid var(--tfhc-line);
	border-radius: var(--tfhc-radius);
}
.tfh-rating-widget__community,
.tfh-rating-widget__you { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tfh-rating-widget__label {
	font-family: var(--tfhc-font-display);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: 11px;
	color: var(--tfhc-muted);
}
.tfh-rating-widget__summary { font-size: 13px; color: var(--tfhc-muted); font-variant-numeric: tabular-nums; }

.tfh-rating-widget__buttons { display: inline-flex; gap: 2px; }
.tfh-rating__btn {
	padding: 2px;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--tfhc-mark-off);
	cursor: pointer;
	transition: color .15s var(--tfhc-ease), transform .15s var(--tfhc-ease);
}
.tfh-rating__btn .tfh-rating__mark { font-size: 24px; }
.tfh-rating__btn.is-on { color: var(--tfhc-mark-on); }
.tfh-rating__btn:hover { transform: translateY(-2px) scale(1.08); }
.tfh-rating__btn:focus-visible { outline: 2px solid var(--tfhc-red); outline-offset: 1px; }
.tfh-rating-widget.is-busy .tfh-rating__btn { opacity: .6; pointer-events: none; }

.tfh-rating-widget__clear {
	padding: 0;
	font-size: 12px;
	color: var(--tfhc-muted);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}
.tfh-rating-widget__join { margin: 0; font-size: 13px; color: var(--tfhc-muted); }
.tfh-rating-widget__join a { color: var(--tfhc-red); font-weight: 600; }
.tfh-rating-widget__status { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--tfhc-muted); min-height: 0; }
.tfh-rating-widget__status:empty { display: none; }

/* ══ Comments ═══════════════════════════════════════════════════════════════ */
.comments-area .comment-list,
.comments-area .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comments-area .comment-list .children { margin-left: 22px; padding-left: 16px; border-left: 2px solid var(--tfhc-line); }

.tfh-comment { margin: 0 0 14px; }
.tfh-comment__body {
	padding: 14px 16px;
	background: var(--tfhc-surface);
	border: 1px solid var(--tfhc-line);
	border-radius: var(--tfhc-radius);
}
.tfh-comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tfh-comment__avatar img { display: block; width: 36px; height: 36px; border-radius: 50%; }
.tfh-comment__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tfh-comment__author { font-weight: 700; color: var(--tfhc-ink); }
.tfh-comment__when { font-size: 12px; color: var(--tfhc-muted); text-decoration: none; }
.tfh-comment__when:hover { color: var(--tfhc-red); }
.tfh-comment__text { color: var(--tfhc-ink); }
.tfh-comment__text p:last-child { margin-bottom: 0; }

.tfh-comment__pending,
.tfh-comment__hidden-note {
	margin: 0 0 8px;
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 4px;
}
.tfh-comment__pending { background: #fff7e0; color: #7a5600; }
.tfh-comment__hidden-note { background: #fbeaea; color: #8a1f1f; }
.tfh-comment--hidden > .tfh-comment__body { border-style: dashed; opacity: .8; }

.tfh-comment__actions {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 10px;
	font-size: 12px;
}
.tfh-comment__actions .comment-reply-link,
.tfh-comment__actions .comment-reply-login {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--tfhc-muted);
	text-decoration: none;
	font-weight: 600;
}
.tfh-comment__actions .comment-reply-link:hover { color: var(--tfhc-red); }

.tfh-comment--ping .tfh-comment__body { padding: 8px 14px; font-size: 13px; background: transparent; }
.tfh-comment__ping-label { color: var(--tfhc-muted); }

/* Staff badges, replacing wpDiscuz role labels */
.tfh-badge {
	display: inline-block;
	padding: 1px 7px;
	font-family: var(--tfhc-font-display);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.6;
	border-radius: 3px;
	color: #fff;
	background: var(--tfhc-muted);
}
.tfh-badge--staff,
.tfh-badge--author { background: var(--tfhc-red); }

/* ══ Flagging ═══════════════════════════════════════════════════════════════ */
.tfh-flag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	margin-left: auto;
	font-size: 12px;
	color: var(--tfhc-muted);
	background: none;
	border: 0;
	cursor: pointer;
	opacity: .7;
}
.tfh-flag:hover { color: var(--tfhc-red); opacity: 1; }
.tfh-flag--done { cursor: default; color: var(--tfhc-muted); font-style: italic; }

.tfh-flag-menu {
	position: absolute;
	z-index: 20;
	right: 0;
	bottom: calc(100% + 6px);
	min-width: 210px;
	padding: 6px;
	background: var(--tfhc-surface);
	border: 1px solid var(--tfhc-line);
	border-radius: var(--tfhc-radius);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.tfh-flag-menu__title { margin: 4px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tfhc-muted); }
.tfh-flag-menu__item {
	display: block;
	width: 100%;
	padding: 7px 8px;
	text-align: left;
	font-size: 13px;
	color: var(--tfhc-ink);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}
.tfh-flag-menu__item:hover,
.tfh-flag-menu__item:focus { background: #f2f2f2; outline: 0; }

.tfh-comment--held-now { opacity: .45; }

/* ══ Comment form ═══════════════════════════════════════════════════════════ */
.tfh-comment-form__join {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 16px;
	background: var(--tfhc-surface);
	border: 1px solid var(--tfhc-line);
	border-radius: var(--tfhc-radius);
}
.tfh-comment-form__join span { color: var(--tfhc-muted); font-size: 14px; }
.tfh-comment-form__review {
	padding: 8px 12px;
	background: #fff7e0;
	color: #7a5600;
	border-radius: 4px;
	font-size: 13px;
}

.tfh-comment-form__join .button,
.tfh-account .button {
	display: inline-block;
	padding: 8px 20px;
	font-family: var(--tfhc-font-display);
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	background: var(--tfhc-red);
	border: 1px solid var(--tfhc-red);
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
}
.tfh-comment-form__join .button:hover,
.tfh-account .button:hover { background: var(--tfhc-red-deep); border-color: var(--tfhc-red-deep); color: #fff; }
.tfh-comment-form__join .button--ghost,
.tfh-account .button--ghost { background: transparent; color: var(--tfhc-red); }
.tfh-comment-form__join .button--ghost:hover,
.tfh-account .button--ghost:hover { background: var(--tfhc-red); color: #fff; }

/* ══ Account page ═══════════════════════════════════════════════════════════ */
.tfh-account { max-width: 760px; margin: 0 auto 60px; }
.tfh-account__panel {
	margin: 0 0 20px;
	padding: 20px 22px;
	background: var(--tfhc-surface);
	border: 1px solid var(--tfhc-line);
	border-radius: var(--tfhc-radius);
}
.tfh-account__panel h2 {
	margin: 0 0 14px;
	font-family: var(--tfhc-font-display);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 20px;
	color: var(--tfhc-ink);
}
.tfh-account__notice { padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.tfh-account__notice--ok { background: #e8f5e9; color: #1e5b23; }
.tfh-account__notice--error { background: #fbeaea; color: #8a1f1f; }
.tfh-account__notice--warn { background: #fff7e0; color: #7a5600; }

.tfh-field { margin: 0 0 14px; }
.tfh-field label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; color: var(--tfhc-ink); }
.tfh-field input {
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	font-size: 14px;
	border: 1px solid var(--tfhc-line);
	border-radius: 4px;
}
.tfh-field input:focus { outline: 0; border-color: var(--tfhc-red); }
.tfh-field input:disabled { background: var(--c-surface-2); color: var(--tfhc-muted); }
.tfh-field__hint { display: block; margin-top: 3px; font-size: 12px; color: var(--tfhc-muted); }

.tfh-account__password { margin: 18px 0; padding: 14px 16px 2px; border: 1px solid var(--tfhc-line); border-radius: 6px; }
.tfh-account__password legend { padding: 0 6px; font-size: 13px; font-weight: 600; }

.tfh-account__actions { display: flex; align-items: center; gap: 16px; margin: 0; }
.tfh-account__signout { font-size: 13px; color: var(--tfhc-muted); }

.tfh-account__list { list-style: none; margin: 0; padding: 0; }
.tfh-account__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--c-border);
}
.tfh-account__list li:last-child { border-bottom: 0; }
.tfh-account__list a { font-weight: 600; color: var(--tfhc-ink); }
.tfh-account__excerpt { flex-basis: 100%; font-size: 13px; color: var(--tfhc-muted); }
.tfh-account__empty { margin: 0; color: var(--tfhc-muted); }

@media (prefers-reduced-motion: reduce) {
	.tfh-rating__btn { transition: none; }
	.tfh-rating__btn:hover { transform: none; }
}

/* ══ A guru's own page (account page, TFH_Community_Gurus) ══════════════════ */
.tfh-guru-panel__intro { margin: 0 0 16px; color: var(--tfhc-muted); font-size: 14px; }
.tfh-guru-photo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; margin: 0 0 18px; }
.tfh-guru-photo .tfh-field { flex: 1 1 260px; margin: 0; }
.tfh-guru-photo__img {
	width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: var(--tfhc-radius);
	border: 1px solid var(--tfhc-line);
	background: var(--c-surface-2, #f4f4f4);
}
.tfh-guru-photo__img--empty { display: grid; place-items: center; font-size: 12px; color: var(--tfhc-muted); }
.tfh-guru-photo input[type="file"] { padding: 6px 0; border: 0; font-size: 13px; }

.tfh-guru-bio textarea,
.tfh-bio-editor__area {
	width: 100%;
	min-height: 220px;
	padding: 10px 12px;
	font: 15px/1.6 var(--font-serif, Georgia, serif);
	color: var(--tfhc-ink);
	background: var(--tfhc-surface);
	border: 1px solid var(--tfhc-line);
	border-radius: 0 0 6px 6px;
	overflow-y: auto;
}
.tfh-guru-bio textarea { border-radius: 6px; resize: vertical; }
.tfh-bio-editor__area { max-height: 480px; }
.tfh-bio-editor__area:focus { outline: 0; border-color: var(--tfhc-red); }
.tfh-bio-editor__area p { margin: 0 0 .8em; }
.tfh-bio-editor__area a { color: var(--tfhc-red); text-decoration: underline; }
.tfh-bio-editor__bar {
	display: flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--tfhc-line);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background: var(--c-surface-2, #f6f6f6);
}
.tfh-bio-editor__bar button {
	min-width: 34px;
	padding: 4px 9px;
	font-size: 13px;
	color: var(--tfhc-ink);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}
.tfh-bio-editor__bar button:hover,
.tfh-bio-editor__bar button:focus-visible { border-color: var(--tfhc-line); background: var(--tfhc-surface); }
.tfh-guru-panel .tfh-account__actions a { font-size: 14px; }