/* =========================================================
   Text Tools Hub — supplementary styles (merged into BrewTrack)
   Loaded only on /tools/ pages. Reuses BrewTrack's --bt-* custom
   properties so tool pages match the Starbucks calculator's look
   instead of introducing a second, competing design system.
   ========================================================= */

.tool-hero { text-align: center; padding-bottom: 2.5rem; }
.tool-hero__icon { font-size: 2.4rem; color: var(--bt-primary); display: block; margin-bottom: .5rem; }
.tool-hero__icon.dashicons { width: 44px; height: 44px; font-size: 44px; margin: 0 auto .5rem; }

/* Tool widget (the actual interactive counter / generator) */
.tool-widget {
	background: #fff; border: 1px solid #EEF1F0; border-radius: var(--bt-radius);
	box-shadow: var(--bt-shadow-sm); padding: 1.75rem; max-width: 880px; margin: 0 auto;
}
.tool-widget__label { display: block; font-weight: 600; margin-bottom: .5rem; font-size: .9rem; }
.tool-widget__input {
	width: 100%; font-family: var(--bt-font-body); font-size: 1rem; padding: .9rem 1rem;
	border: 1px solid #E5E7EB; border-radius: var(--bt-radius-sm); resize: vertical; color: #1F2937;
}
.tool-widget__input:focus { outline: none; border-color: var(--bt-primary); }
.tool-widget__hint { font-family: monospace; font-size: .75rem; color: #6B7280; text-align: right; margin: .4rem 0 0; }

.tool-widget__counters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.counter-chip {
	font-family: monospace; background: #F9FAF9; border: 1px solid #EEF1F0;
	border-radius: var(--bt-radius-sm); padding: .6rem .85rem; min-width: 90px; text-align: center;
}
.counter-chip__value { display: block; font-size: 1.25rem; font-weight: 700; color: var(--bt-dark); }
.counter-chip__label { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; margin-top: 2px; }
.tool-widget__actions { display: flex; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }

.fancy-results { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.fancy-results__empty { color: #6B7280; font-size: .9rem; }
.fancy-result-row {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	background: #F9FAF9; border: 1px solid #EEF1F0; border-radius: var(--bt-radius-sm); padding: .75rem .9rem;
}
.fancy-result-row__text { font-size: 1.05rem; word-break: break-word; }
.fancy-result-row__copy {
	flex-shrink: 0; font-family: var(--bt-font-heading); font-size: .7rem; text-transform: uppercase;
	letter-spacing: .03em; background: var(--bt-dark); color: #fff; border: none;
	border-radius: 999px; padding: .45rem .8rem; cursor: pointer;
}
.fancy-result-row__copy:hover { background: #111827; }
.fancy-result-row__copy.is-copied { background: var(--bt-primary); }

/* Feature card — deliberately NOT named .tool-card (that class is already
   used, with position:sticky, by the calculator's results panel). */
.tt-tools-grid, .tt-related-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.tt-feature-card {
	background: #fff; border: 1px solid #EEF1F0; border-radius: var(--bt-radius);
	box-shadow: var(--bt-shadow-sm); padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem;
}
.tt-feature-card__icon { font-size: 1.5rem; color: var(--bt-primary); }
.tt-feature-card__icon .dashicons { width: 30px; height: 30px; font-size: 30px; }
.tt-feature-card h3 { margin-bottom: 0; }
.tt-feature-card__desc { color: #4B5563; font-size: .93rem; margin-bottom: 0; }
.tt-feature-card__features { list-style: none; margin: 0 0 .4rem; padding: 0; font-size: .86rem; color: #4B5563; }
.tt-feature-card__features li { padding-left: 1.1rem; position: relative; margin-bottom: .3rem; }
.tt-feature-card__features li::before { content: '\2713'; position: absolute; left: 0; color: var(--bt-primary); font-weight: 700; }
.tt-feature-card .btn { align-self: flex-start; margin-top: .3rem; }

/* Checklist / steps used on tool pages (features, benefits, how-to-use) */
.tt-checklist, .tt-steps-list { list-style: none; margin: 0; padding: 0; }
.tt-checklist li { padding-left: 1.9rem; position: relative; margin-bottom: .75rem; }
.tt-checklist li::before { content: '\2713'; position: absolute; left: 0; color: var(--bt-primary); font-weight: 700; }
.tt-steps-list { counter-reset: tt-step; }
.tt-steps-list li { padding-left: 2.5rem; position: relative; margin-bottom: 1rem; }
.tt-steps-list li::before {
	counter-increment: tt-step; content: counter(tt-step);
	position: absolute; left: 0; top: -2px; font-weight: 700; font-family: var(--bt-font-heading);
	background: var(--bt-dark); color: #fff; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: .8rem;
}

@media (max-width: 680px) {
	.tool-widget { padding: 1.25rem; }
}