/*
 * URL Trimmer — styled to match evaoutreachsolutions.com
 * Design tokens pulled from the live site:
 *   accent indigo  #3a46d8
 *   deep navy text #10163a
 *   lavender panel #f2f3ff
 *   heading font   "Plus Jakarta Sans", 800
 */

.url-trimmer {
	--ut-accent: #3a46d8;
	--ut-accent-hover: #2f3ac0;
	--ut-navy: #10163a;
	--ut-navy-soft: #1b2350;
	--ut-lavender: #f2f3ff;
	--ut-border: #e2e4f5;
	--ut-radius: 16px;
	--ut-radius-pill: 999px;
	--ut-font: "Open Sans", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ut-mono: Calibri, Carlito, "Segoe UI",
		Roboto, Helvetica, Arial, sans-serif;

	max-width: 1240px;
	margin: 0 auto;
	font-family: var(--ut-font);
	color: var(--ut-navy);
}

.url-trimmer *,
.url-trimmer *::before,
.url-trimmer *::after {
	box-sizing: border-box;
}

/* ---- Panes ---- */
.url-trimmer__panes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.url-trimmer__pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.url-trimmer__label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ut-accent);
	margin: 0 0 10px 2px;
}

/* ---- Shared textarea sizing ---- */
.url-trimmer__input,
.url-trimmer__output {
	width: 100%;
	min-height: 320px;
	padding: 18px 20px;
	font-family: var(--ut-mono);
	font-size: 0.95rem;
	line-height: 32px;            /* fixed row height for the ruled lines */
	border-radius: var(--ut-radius);
	resize: vertical;
	outline: none;
	white-space: pre;
	overflow-x: auto;
	overflow-wrap: normal;
	word-break: normal;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ---- Input: looks like stacked data rows ---- */
.url-trimmer__input {
	color: var(--ut-navy);
	background-color: #fbfbff;
	background-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent 31px,
		var(--ut-border) 31px,
		var(--ut-border) 32px
	);
	background-size: 100% 32px;
	background-attachment: local;  /* lines scroll with the text */
	background-position: 0 18px;    /* align lines to first text row */
	border: 1.5px solid var(--ut-border);
}

.url-trimmer__input:focus {
	border-color: var(--ut-accent);
	box-shadow: 0 0 0 4px rgba(58, 70, 216, 0.12);
}

.url-trimmer__input::placeholder {
	color: #9aa0c2;
}

/* ---- Result: command-prompt panel ---- */
.url-trimmer__output {
	color: #eef0ff;
	background-color: var(--ut-navy);
	background-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent 31px,
		rgba(255, 255, 255, 0.06) 31px,
		rgba(255, 255, 255, 0.06) 32px
	);
	background-size: 100% 32px;
	background-attachment: local;
	background-position: 0 18px;
	border: 1.5px solid var(--ut-navy);
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.url-trimmer__output:focus {
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25),
		0 0 0 4px rgba(58, 70, 216, 0.25);
}

/* ---- Controls ---- */
.url-trimmer__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.url-trimmer__btn {
	font-family: var(--ut-font);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	padding: 14px 22px;
	border-radius: var(--ut-radius-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease,
		border-color 0.15s ease, transform 0.05s ease;
}

.url-trimmer__btn:active {
	transform: translateY(1px);
}

/* Primary trim actions: solid indigo */
.url-trimmer__btn[data-action="scheme"],
.url-trimmer__btn[data-action="www"],
.url-trimmer__btn[data-action="root"] {
	background-color: var(--ut-accent);
	color: #fff;
}

.url-trimmer__btn[data-action="scheme"]:hover,
.url-trimmer__btn[data-action="www"]:hover,
.url-trimmer__btn[data-action="root"]:hover {
	background-color: var(--ut-accent-hover);
}

/* Undo: ghost / outlined, pushed to the right */
.url-trimmer__btn--undo {
	margin-left: auto;
	background-color: transparent;
	color: var(--ut-accent);
	border-color: var(--ut-border);
}

.url-trimmer__btn--undo:hover {
	border-color: var(--ut-accent);
	background-color: var(--ut-lavender);
}

/* Copy: navy solid to echo the result panel */
.url-trimmer__btn--copy {
	background-color: var(--ut-navy);
	color: #fff;
}

.url-trimmer__btn--copy:hover {
	background-color: var(--ut-navy-soft);
}

/* ---- Status line ---- */
.url-trimmer__status {
	min-height: 1.4em;
	margin: 14px 2px 0;
	font-size: 0.85rem;
	font-weight: 500;
	color: #5b6191;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
	.url-trimmer__panes {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.url-trimmer__input,
	.url-trimmer__output {
		min-height: 240px;
	}
	.url-trimmer__btn--undo {
		margin-left: 0;
	}
	.url-trimmer__btn {
		flex: 1 1 auto;
		text-align: center;
	}
}