/*
 * The shared tool design system.
 *
 * One statement of the type scale for all six tools. It began life as a block at
 * the bottom of the child theme's style.css that named five wrapper ids by hand
 * — and never got the sixth, so the Gradient Text Generator rendered a size down
 * from its siblings for months.
 *
 * It no longer uses !important. It used to need it, because each tool's own
 * sheet scoped its typography to an id (#gg-wrap h1, and in the text
 * generator's case every single rule), and an id outranks any class selector.
 * The fix was to take those declarations out of the six tool sheets rather than
 * shout over them: each sheet now describes only what makes that tool different,
 * and everything they agreed on lives here once. The text generator's rules also
 * lost their #gt-wrap prefix, which is what had made it the odd one out.
 *
 * So the rule for the seventh tool is: write what is different, inherit the rest.
 * If you find yourself reaching for !important in a tool sheet, the declaration
 * probably belongs in this file instead.
 *
 * Loaded before the per-tool sheet, on tool pages only.
 */

/* ─── Type scale ─────────────────────────────────────────── */

.tg-tool h1 {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 0 0 8px;
}

/* The standfirst under the h1. One class per tool, hence the list — the tools
   predate the shared namespace and renaming their markup is a separate job. */
.tg-tool .gg-sub,
.tg-tool .mg-sub,
.tg-tool .ag-sub,
.tg-tool .tg-sub,
.tg-tool .gb-sub,
.tg-tool .gt-sub {
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	margin: 0 0 32px;
}

/* Small-caps section headings inside control panels. */
.tg-tool .gg-panel-title,
.tg-tool .mg-card-title,
.tg-tool .ag-card-title,
.tg-tool .tg-card-title,
.tg-tool .gb-card-title-p,
.tg-tool .gt-card-title {
	font-size: 12px;
	letter-spacing: 0.08em;
}

/* Control labels. .ag-card-title is deliberately in both groups: the animated
   generator uses one class for what the others split in two, and it should take
   the label size, so this rule follows the one above. */
.tg-tool .gg-color-label,
.tg-tool .mg-point-label,
.tg-tool .ag-card-title,
.tg-tool .tg-slider-label span,
.tg-tool .gb-slider-label span,
.tg-tool .gt-slider-label span,
.tg-tool .gt-field-label {
	font-size: 13px;
}

/* ─── Code output ────────────────────────────────────────── */
/* One code box for every tool, the same as Gradient from Image's: a light
   panel with the code set straight on it. Kadence gives every <pre> its own
   grey box, padding and scrollbar, which made a box inside a box; the old
   word-break: break-all also split codes mid-word ("13 5deg"). */

.tg-tool .gg-output,
.tg-tool .mg-output,
.tg-tool .ag-output,
.tg-tool .tg-output,
.tg-tool .gb-output,
.tg-tool .gt-output {
	position: relative;
	background: #F7F7FA;
	border: 1px solid #EFEFF4;
	border-radius: 20px;
	padding: 16px 18px 18px;
}

.tg-tool .gg-output-label,
.tg-tool .mg-output-label,
.tg-tool .ag-output-label,
.tg-tool .tg-output-label,
.tg-tool .gb-output-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6E6E78;
	margin-bottom: 10px;
	padding-right: 72px;
}

.tg-tool .gg-output pre,
.tg-tool .mg-output pre,
.tg-tool .ag-output pre,
.tg-tool .tg-output pre,
.tg-tool .gb-output pre,
.tg-tool .gt-output pre {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	max-height: none !important;
	overflow: visible !important;
	font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
	font-size: 13px;
	line-height: 1.6;
	color: #1A1A22;
	white-space: pre-wrap;
	word-break: normal;
	overflow-wrap: anywhere;
}

.tg-tool .gg-copy-btn,
.tg-tool .mg-copy-btn,
.tg-tool .ag-copy-btn,
.tg-tool .tg-copy-all,
.tg-tool .gb-copy-btn,
.tg-tool .gt-copy-btn {
	padding: 5px 14px !important;
	border-radius: 999px !important;
	border: 1px solid #DDDDE4 !important;
	background: #fff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #222 !important;
	box-shadow: none !important;
	cursor: pointer;
}
.tg-tool .gg-copy-btn,
.tg-tool .mg-copy-btn,
.tg-tool .ag-copy-btn,
.tg-tool .tg-copy-all,
.tg-tool .gb-copy-btn {
	position: absolute;
	top: 12px;
	right: 12px;
}
.tg-tool .gg-copy-btn:hover,
.tg-tool .mg-copy-btn:hover,
.tg-tool .ag-copy-btn:hover,
.tg-tool .tg-copy-all:hover,
.tg-tool .gb-copy-btn:hover,
.tg-tool .gt-copy-btn:hover {
	background: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}
.tg-tool .gg-copy-btn.ok,
.tg-tool .mg-copy-btn.ok,
.tg-tool .ag-copy-btn.ok,
.tg-tool .tg-copy-all.ok,
.tg-tool .gb-copy-btn.ok,
.tg-tool .gt-copy-btn.ok {
	background: #E6F4EA !important;
	border-color: #A8D5B5 !important;
	color: #2D7A4F !important;
}

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

.tg-tool .gg-btn,
.tg-tool .mg-btn,
.tg-tool .ag-btn,
.tg-tool .tg-btn,
.tg-tool .gb-btn,
.tg-tool .gt-btn {
	font-size: 14px;
	padding: 12px 22px;
}

/* ─── Shared primitives ──────────────────────────────────── */
/* Defaults a new tool inherits without writing any CSS of its own. Each tool's
   sheet still wins wherever it sets the same property. */

.tg-tool {
	margin: 0 auto;
	padding: 40px 24px 80px;
	-webkit-font-smoothing: antialiased;
}

.tg-tool .tg-panel,
.tg-tool .tg-card {
	background: #fff;
	border: 1px solid #F0F0F0;
	border-radius: 24px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tg-tool .tg-output-surface {
	background: #F8F8F8;
	border: 1px solid #F0F0F0;
	border-radius: 20px;
	padding: 14px;
	position: relative;
}

.tg-tool pre,
.tg-tool code {
	font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
}

.tg-tool .tg-btn-base {
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.tg-tool .tg-btn-base.is-primary {
	background: #111;
	color: #fff;
}

.tg-tool .tg-btn-base.is-primary:hover {
	background: #333;
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.tg-tool * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ─── Inputs: beat the theme's input styling ───────────────
 * Kadence styles every input as input[type="text"] etc. (0,1,1), which
 * outranks a tool's .xx-hex (0,1,0) — so the tools' rounded corners and
 * borders never applied, and inputs kept their intrinsic min-width and
 * overflowed their row. One rule for every tool, scoped to .tg-tool.
 */
.tg-tool input[type="text"],
.tg-tool input[type="number"],
.tg-tool input[type="url"] {
	border-radius: 999px !important;
	border: 1.5px solid #E8E8EE !important;
	background: #fff !important;
	color: #111 !important;
	min-width: 0;
	box-shadow: none;
}
.tg-tool input[type="text"]:focus,
.tg-tool input[type="number"]:focus,
.tg-tool input[type="url"]:focus { border-color: #111 !important; outline: none; }
.tg-tool input[type="color"] { border-radius: 14px !important; min-width: 0; }
.tg-tool textarea { border-radius: 18px !important; }

/* ─── Range sliders ──────────────────────────────────────────
 * Kadence draws input[type=range] as a bordered text box, which every tool
 * inherited (a white rectangle with a dot in it). One slider for all tools:
 * a 4px rounded track and a 16px black thumb, keyboard focus ring included.
 */
.tg-tool input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px;
	padding: 0 !important;
	margin: 4px 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}
.tg-tool input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #E6E6EC; }
.tg-tool input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: #E6E6EC; }
.tg-tool input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -6px;
	border-radius: 50%;
	background: #111;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.tg-tool input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #111; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.tg-tool input[type="range"]:focus-visible { outline: none; }
.tg-tool input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(91, 79, 207, .35); }

/* ─── Button icons (tgc_icon in helpers.php) ─────────────── */
.tg-tool button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tg-i { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ─── Colour inputs ──────────────────────────────────────────
 * The native colour picker draws its own inner frame (a grey-bordered square
 * with padding), which showed through as a box inside each rounded swatch.
 * Strip the frame so the colour fills the swatch edge to edge.
 */
.tg-tool input[type="color"] { -webkit-appearance: none; appearance: none; padding: 0 !important; overflow: hidden; cursor: pointer; }
.tg-tool input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tg-tool input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.tg-tool input[type="color"]::-moz-color-swatch { border: 0; border-radius: 0; }