/**
 * LinkedIn Text Formatter — frontend styles.
 * Scoped under .ltf-app. No external fonts, no remote CSS imports, no remote URLs.
 *
 * Layout: full-page feel up to 1440px; desktop ~75% editor / 25% preview;
 * tablet stacks or soft split; mobile single column with touch-friendly targets.
 */

.ltf-app {
	--ltf-canvas: #f6f8fb;
	--ltf-bg: #ffffff;
	--ltf-surface: #f1f5f9;
	--ltf-border: #dbe3ec;
	--ltf-text: #0f172a;
	--ltf-muted: #64748b;
	--ltf-primary: #637c9d;
	--ltf-primary-hover: #536b8a;
	--ltf-danger: #b24020;
	--ltf-radius: 16px;
	--ltf-radius-sm: 12px;
	--ltf-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.07);
	--ltf-focus: 0 0 0 3px color-mix(in srgb, var(--ltf-primary) 35%, transparent);
	--ltf-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ltf-pad: 1rem;
	--ltf-gap: 1rem;
	box-sizing: border-box;
	background: var(--ltf-canvas);
	color: var(--ltf-text);
	font-family: var(--ltf-font);
	font-size: 16px;
	line-height: 1.5;
	/*
	 * Break out of WP block-theme content column (.is-layout-constrained
	 * caps children at --wp--style--global--content-size ~650px).
	 * Root also gets class "alignfull" in the template for theme support.
	 */
	width: 100%;
	max-width: none !important; /* beat theme content-size on the root */
	margin-left: 0 !important;
	margin-right: 0 !important;
	/*
	 * Keep the canvas spacing inside the coloured section. The live theme uses
	 * `.pagebuilder-wrapper > :not(.custom-theme-block)` with higher specificity
	 * and otherwise resets this padding to zero.
	 */
	margin-bottom: 0 !important;
	padding: clamp(1.5rem, 2.5vw, 2.5rem) 0 !important;
	/*
	 * Defensive isolation when a Shortcode was pasted into a Preformatted/Code
	 * block (<pre class="wp-block-preformatted">). Inherited white-space:pre and
	 * overflow:auto make template indentation participate in flex/grid and clip UI.
	 */
	white-space: normal !important;
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
	word-break: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-variant-ligatures: normal;
	letter-spacing: normal;
	display: block;
	position: relative;
	z-index: 1;
}

/* Match the QR builder's responsive content shell. */
.ltf-app__inner {
	width: calc(100% - 1.5rem);
	max-width: 1116px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0.25rem;
	white-space: normal !important;
	overflow: visible;
	min-width: 0;
}

@media (min-width: 576px) {
	.ltf-app__inner {
		max-width: 516px;
	}
}

@media (min-width: 768px) {
	.ltf-app__inner {
		max-width: 696px;
	}
}

@media (min-width: 992px) {
	.ltf-app__inner {
		max-width: 936px;
	}
}

@media (min-width: 1200px) {
	.ltf-app__inner {
		max-width: 1116px;
	}
}

@media (min-width: 1710px) {
	.ltf-app__inner {
		max-width: 1656px;
	}
}

/*
 * Hostile parents: force isolation even if theme/specificity fights us.
 * (Prefer fixing content: Shortcode block or foureck/linkedin-text-formatter.)
 */
pre.wp-block-preformatted .ltf-app,
pre .ltf-app,
code .ltf-app,
.wp-block-code .ltf-app,
.wp-block-preformatted .ltf-app {
	white-space: normal !important;
	overflow: visible !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Collapse accidental whitespace text nodes from indented PHP templates under pre */
.ltf-app > :not(script):not(style),
.ltf-app__inner > :not(script):not(style) {
	white-space: normal;
}

/* Full-bleed when theme still clamps the parent: span viewport, re-center content */
.ltf-app.alignfull {
	position: relative;
	left: 50%;
	right: auto;
	width: 100vw;
	max-width: 100vw !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	box-sizing: border-box;
}

.ltf-app *,
.ltf-app *::before,
.ltf-app *::after {
	box-sizing: border-box;
}

/* Reset inherited pre formatting on all app descendants, then restore intentional wraps */
.ltf-app *:not(textarea):not(pre):not(code) {
	white-space: normal;
}

.ltf-app .ltf-editor__input,
.ltf-app .ltf-post__body {
	white-space: pre-wrap;
}

.ltf-app .ltf-layout,
.ltf-app .ltf-toolbar,
.ltf-app .ltf-fonts__grid,
.ltf-app .ltf-inserters__grid,
.ltf-app .ltf-actions {
	min-width: 0;
	max-width: 100%;
}

/* Avoid page-level horizontal scroll from full-bleed + pre overflow combos */
.ltf-app.alignfull {
	overflow-x: clip;
}

.ltf-app.no-js .js-only {
	display: none !important;
}

.ltf-app--theme-dark {
	--ltf-canvas: #202630;
	--ltf-bg: #2b2b2b;
	--ltf-surface: #343c48;
	--ltf-border: #4b5665;
	--ltf-text: #f8fafc;
	--ltf-muted: #bac5d3;
	--ltf-primary: #9fb1c9;
	--ltf-primary-hover: #b9c7d9;
	--ltf-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 0, 0.24);
}

.ltf-app__heading {
	margin: 0 0 1.25rem;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
}

/* ── Main layout ───────────────────────────────────────────── */

.ltf-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ltf-gap);
	align-items: start;
}

/* Tablet: still stacked so font cards stay wide enough */
@media (min-width: 768px) and (max-width: 1023px) {
	.ltf-layout {
		gap: 1.25rem;
	}
}

/* Desktop: ~75% editor / ~25% preview */
@media (min-width: 1024px) {
	.ltf-layout:not(.ltf-layout--editor-only) {
		grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); /* 75% / 25% */
		gap: 1.5rem;
	}

	.ltf-preview {
		/* Keep the preview in normal document flow. Safari can detach children
		 * from a sticky grid column while repainting this page during scroll. */
		position: static;
		top: auto;
		max-height: none;
		overflow: visible;
	}
}

/* Large desktop: a bit more air between the columns. */
@media (min-width: 1280px) {
	.ltf-layout:not(.ltf-layout--editor-only) {
		gap: 1.75rem;
	}
}

.ltf-editor,
.ltf-preview {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0; /* prevent grid blowout */
}

.ltf-editor__title,
.ltf-preview__title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 650;
}

.ltf-preview__subtitle {
	margin: -0.35rem 0 0.85rem;
	color: var(--ltf-muted);
	font-size: 0.875rem;
}

/* ── Toolbar ───────────────────────────────────────────────── */

.ltf-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.85rem;
}

/* ── Fancy font grid (4eck-Media) ──────────────────────── */

.ltf-fonts {
	margin: 0.5rem 0 1.15rem;
}

.ltf-fonts__title {
	margin: 0 0 0.3rem;
	font-size: 0.95rem;
	font-weight: 650;
}

.ltf-fonts__hint {
	margin: 0 0 0.7rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--ltf-muted);
}

.ltf-fonts__grid {
	display: grid;
	gap: 0.55rem;
	/* Mobile: 1 wide column so “4ECK MEDIA” never clips */
	grid-template-columns: 1fr;
}

/* Small phones in landscape / large phones: 2 columns */
@media (min-width: 420px) {
	.ltf-fonts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}
}

/* Editor has real width: 3 columns of comfortable cards */
@media (min-width: 720px) {
	.ltf-fonts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.65rem;
	}
}

/* Desktop with 75% editor: 3–4 wide cards */
@media (min-width: 1024px) {
	.ltf-fonts__grid {
		grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
		gap: 0.7rem;
	}
}

@media (min-width: 1280px) {
	.ltf-fonts__grid {
		grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
	}
}

.ltf-font-card {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--ltf-border);
	border-radius: var(--ltf-radius-sm);
	background: var(--ltf-bg);
	color: var(--ltf-text);
	cursor: pointer;
	text-align: center;
	box-shadow: 0 1px 2px color-mix(in srgb, #000 5%, transparent);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

@media (min-width: 720px) {
	.ltf-font-card {
		min-height: 3.85rem;
		padding: 0.8rem 1.05rem;
	}
}

.ltf-font-card:hover,
.ltf-font-card:focus-visible {
	border-color: var(--ltf-primary);
	background: color-mix(in srgb, var(--ltf-primary) 7%, var(--ltf-bg));
	outline: none;
	box-shadow: var(--ltf-focus);
	transform: translateY(-1px);
}

.ltf-font-card:active {
	transform: translateY(0);
}

.ltf-font-card__sample {
	display: block;
	width: 100%;
	font-size: clamp(0.85rem, 1.6vw, 1rem);
	line-height: 1.3;
	letter-spacing: 0.01em;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ── Buttons ───────────────────────────────────────────────── */

.ltf-btn {
	appearance: none;
	border: 1px solid var(--ltf-border);
	background: var(--ltf-bg);
	color: var(--ltf-muted);
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
	min-height: 2.5rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ltf-btn:hover,
.ltf-btn:focus-visible {
	border-color: var(--ltf-primary);
	background: color-mix(in srgb, var(--ltf-primary) 8%, var(--ltf-bg));
	color: var(--ltf-primary);
	outline: none;
	box-shadow: var(--ltf-focus);
}

.ltf-btn--primary {
	background: var(--ltf-primary);
	border-color: var(--ltf-primary);
	color: #fff;
}

.ltf-btn--primary:hover,
.ltf-btn--primary:focus-visible {
	background: var(--ltf-primary-hover);
	border-color: var(--ltf-primary-hover);
	color: #fff;
}

.ltf-btn--ghost {
	background: transparent;
	border-color: var(--ltf-primary);
	color: var(--ltf-primary);
}

.ltf-btn__icon {
	margin-right: 0.3rem;
}

/* ── Editor field ──────────────────────────────────────────── */

.ltf-editor__input {
	width: 100%;
	min-height: 11rem;
	resize: vertical;
	border: 1px solid var(--ltf-border);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	/* Arial/Helvetica place U+0336 through the middle of Latin letters
	   (some theme fonts render it too low ≈ underline). */
	font-family: Arial, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	font-size: inherit;
	line-height: 1.55;
	background: var(--ltf-bg);
	color: var(--ltf-text);
	text-decoration: none !important;
	text-decoration-line: none !important;
	-webkit-text-decoration-line: none !important;
}

@media (min-width: 1024px) {
	.ltf-editor__input {
		min-height: 14rem;
	}
}

.ltf-editor__input:focus {
	outline: none;
	border-color: var(--ltf-primary);
	box-shadow: var(--ltf-focus);
}

.ltf-editor__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	align-items: baseline;
	margin-top: 0.55rem;
}

.ltf-editor__hint,
.ltf-editor__counter {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ltf-muted);
}

.ltf-counter__value--over {
	color: var(--ltf-danger);
	font-weight: 700;
}

.ltf-editor__warning {
	margin: 0.5rem 0 0;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	background: #fff4e5;
	color: #5c3b00;
	font-size: 0.85rem;
}

.ltf-app--theme-dark .ltf-editor__warning {
	background: #3d2e12;
	color: #ffd999;
}

/* ── Inserters ─────────────────────────────────────────────── */

.ltf-inserters {
	margin-top: 1.1rem;
}

.ltf-inserters__title {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 650;
}

.ltf-inserters__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ltf-chip {
	appearance: none;
	min-width: 2.5rem;
	min-height: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid var(--ltf-border);
	border-radius: 10px;
	background: var(--ltf-surface);
	color: var(--ltf-text);
	font: inherit;
	font-size: 1.05rem;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ltf-chip:hover,
.ltf-chip:focus-visible {
	border-color: var(--ltf-primary);
	background: color-mix(in srgb, var(--ltf-primary) 8%, var(--ltf-bg));
	color: var(--ltf-primary);
	outline: none;
	box-shadow: var(--ltf-focus);
}

/* ── Actions ───────────────────────────────────────────────── */

.ltf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	justify-content: stretch;
	margin-top: 1.15rem;
}

.ltf-actions .ltf-btn {
	flex: 1 1 auto;
	min-width: 8rem;
}

@media (min-width: 480px) {
	.ltf-actions {
		justify-content: flex-end;
	}

	.ltf-actions .ltf-btn {
		flex: 0 1 auto;
	}
}

.ltf-status {
	min-height: 1.25em;
	margin: 0.55rem 0 0;
	font-size: 0.85rem;
	color: var(--ltf-muted);
}

/* ── LinkedIn post preview card ────────────────────────────── */

.ltf-post {
	background: var(--ltf-bg);
	border: 1px solid var(--ltf-border);
	border-radius: 10px;
	padding: 0.85rem;
}

.ltf-post__header {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 0.55rem;
	align-items: start;
	margin-bottom: 0.75rem;
	/* Isolate this card header from the host theme's fixed site-header rules. */
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: auto !important;
	max-width: none !important;
	z-index: auto !important;
}

@media (min-width: 1024px) {
	.ltf-post__header {
		grid-template-columns: 44px 1fr auto;
	}
}

.ltf-post__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ltf-surface);
}

@media (min-width: 1024px) {
	.ltf-post__avatar {
		width: 44px;
		height: 44px;
	}
}

.ltf-post__identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ltf-post__name {
	font-weight: 700;
	font-size: 0.9rem;
}

.ltf-post__tagline,
.ltf-post__meta {
	color: var(--ltf-muted);
	font-size: 0.75rem;
}

.ltf-post__menu {
	color: var(--ltf-muted);
	letter-spacing: 0.1em;
}

.ltf-post__body {
	white-space: pre-wrap;
	word-break: break-word;
	font-family: Arial, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	font-size: 0.9rem;
	min-height: 2.5rem;
	margin-bottom: 0.35rem;
	text-decoration: none !important;
	text-decoration-line: none !important;
}

.ltf-post__more {
	appearance: none;
	border: 0;
	background: none;
	color: var(--ltf-muted);
	padding: 0;
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
	margin-bottom: 0.5rem;
}

.ltf-post__more:hover,
.ltf-post__more:focus-visible {
	color: var(--ltf-primary);
	text-decoration: underline;
}

.ltf-post__stats {
	margin: 0.5rem 0;
	color: var(--ltf-muted);
	font-size: 0.75rem;
}

.ltf-post__actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.35rem 0.25rem;
	border-top: 1px solid var(--ltf-border);
	padding-top: 0.55rem;
	color: var(--ltf-muted);
	font-size: 0.72rem;
	font-weight: 600;
	text-align: center;
}

@media (min-width: 380px) {
	.ltf-post__actions {
		grid-template-columns: repeat(4, 1fr);
		font-size: 0.75rem;
	}
}

/* Narrow preview column: tighter chrome */
@media (min-width: 1024px) {
	.ltf-preview__title {
		font-size: 0.98rem;
	}

	.ltf-preview__subtitle {
		font-size: 0.8rem;
	}

	.ltf-post__actions {
		grid-template-columns: 1fr 1fr;
		font-size: 0.7rem;
	}
}

@media (min-width: 1280px) {
	.ltf-post__actions {
		grid-template-columns: repeat(4, 1fr);
		font-size: 0.72rem;
	}
}

.ltf-notice {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.85rem;
	padding: 0.75rem 0.85rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--ltf-primary) 6%, var(--ltf-bg));
	border: 1px solid color-mix(in srgb, var(--ltf-primary) 28%, var(--ltf-border));
}

.ltf-notice__icon {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--ltf-primary);
}

.ltf-notice__title {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.9rem;
}

.ltf-notice__text {
	margin: 0;
	font-size: 0.82rem;
	color: var(--ltf-muted);
	line-height: 1.4;
}

/* ── Mobile-only tweaks ────────────────────────────────────── */

@media (max-width: 479px) {
	.ltf-app {
		padding: 1rem 0;
		font-size: 15px;
	}

	.ltf-app__inner {
		width: calc(100% - 1.25rem);
	}

	.ltf-editor,
	.ltf-preview {
		padding: 0;
	}

	.ltf-toolbar {
		gap: 0.35rem;
	}

	.ltf-btn {
		font-size: 0.8125rem;
		padding: 0.4rem 0.75rem;
	}

	/* Preview after editor on mobile — already in DOM order */
	.ltf-fonts__hint {
		font-size: 0.78rem;
	}
}

/* Screen-reader only (WP themes may already define this; keep local fallback). */
.ltf-app .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

@media (prefers-reduced-motion: reduce) {
	.ltf-btn,
	.ltf-chip,
	.ltf-font-card {
		transition: none;
	}

	.ltf-font-card:hover,
	.ltf-font-card:focus-visible {
		transform: none;
	}
}