/* ---- Phase G5c: tool identity (accent per tool, specimen banner, chips, share, sections) ---------------- */

@font-face { font-family: "DAF Spec Pixel"; src: url("../fonts/pixelify-sans-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DAF Spec Heavy"; src: url("../fonts/luckiest-guy-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DAF Spec Hand"; src: url("../fonts/gaegu-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DAF Spec Display"; src: url("../fonts/anton-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DAF Spec Serif"; src: url("../fonts/young-serif-400.woff2") format("woff2"); font-display: swap; }

/* Each tool page sets --tool-accent from its body class. The card header uses it. */
body.daf-tool-font-studio { --tool-accent: #C93C44; }
body.daf-tool-font-generator,
body.daf-tool-instagram-font-generator,
body.daf-tool-symbol-font-generator,
body.daf-tool-cute-font-generator,
body.daf-tool-tattoo-font-generator { --tool-accent: #6A4BC4; }
body.daf-tool-cursive-font-generator { --tool-accent: #2B4C8C; }
body.daf-tool-minecraft-font-free-download { --tool-accent: #5B8C2A; }
body.daf-tool-roblox-font-download { --tool-accent: #E2231A; }
.daf-tool[data-tool]::before {
	background: var(--tool-accent, var(--daf-ink));
	font-weight: 700;
}
/* The logo maker keeps the ink header on every page it appears on. */
.daf-tool.daf-lg[data-tool]::before {
	background: var(--daf-ink);
}

/* Specimen banner above the tool: fixed height, CSS-only motion, no outside requests. */
.daf-spec {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	margin: 24px 0 0;
	padding: 0 16px;
	overflow: hidden;
	border: 1px solid var(--daf-line);
	border-radius: 14px;
	background: var(--daf-paper);
	color: var(--daf-ink);
	text-align: center;
}
.daf-spec__word {
	display: block;
	max-width: 100%;
	line-height: 1.1;
	white-space: nowrap;
}
.daf-spec--minecraft {
	background-color: #F4F8EE;
	background-image: linear-gradient(rgba(91, 140, 42, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 140, 42, .12) 1px, transparent 1px);
	background-size: 16px 16px;
}
.daf-spec--minecraft .daf-spec__word {
	font-family: "DAF Spec Pixel", "Courier New", monospace;
	font-size: 60px;
	letter-spacing: .04em;
	text-shadow: 3px 3px 0 #2D4A14;
}
.daf-spec__ch {
	display: inline-block;
	animation: daf-spec-drop .7s steps(5) both;
	animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes daf-spec-drop {
	from { transform: translateY(-28px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
.daf-spec--roblox .daf-spec__word {
	display: inline-block;
	font-family: "DAF Spec Heavy", Impact, sans-serif;
	font-size: 64px;
	color: #E2231A;
	text-shadow: 4px 4px 0 #111;
	letter-spacing: .02em;
	animation: daf-spec-tilt 2.4s ease-in-out infinite alternate;
	transform-origin: 50% 80%;
}
@keyframes daf-spec-tilt {
	from { transform: rotate(-6deg); }
	to { transform: rotate(4deg) translateY(-4px); }
}
.daf-spec--cursive {
	background: linear-gradient(180deg, #FFFFFF, var(--daf-paper));
}
.daf-spec--cursive .daf-spec__word {
	font-family: "DAF Spec Hand", "Segoe Script", cursive;
	font-size: 64px;
	color: #2B4C8C;
	animation: daf-spec-write 2.4s ease-out both;
}
@keyframes daf-spec-write {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}
.daf-spec--ticker {
	justify-content: flex-start;
	padding: 0;
}
.daf-spec--ticker .daf-spec__word {
	width: 100%;
	max-width: none;
}
.daf-spec__track {
	display: inline-flex;
	white-space: nowrap;
	font-size: 44px;
	letter-spacing: .06em;
	animation: daf-spec-ticker 22s linear infinite;
}
.daf-spec__track span {
	padding-right: .3em;
}
@keyframes daf-spec-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.daf-spec--studio .daf-spec__word {
	font-family: "DAF Spec Display", Impact, sans-serif;
	font-size: 58px;
	letter-spacing: .04em;
	background: linear-gradient(90deg, #C93C44, #FFC24B, #C93C44);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transform: perspective(320px) rotateX(16deg);
	animation: daf-spec-shine 6s linear infinite;
}
@keyframes daf-spec-shine {
	from { background-position: 0 0; }
	to { background-position: 200% 0; }
}
.daf-spec--tattoo .daf-spec__word {
	font-family: "DAF Spec Serif", Georgia, serif;
	font-size: 56px;
	color: var(--daf-ink);
	animation: daf-spec-fade 1.4s ease-out both;
}
@keyframes daf-spec-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Try these chips and the share link, inside the tool card (above the controls). */
.daf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 14px;
}
.daf-chips__label {
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: var(--daf-muted);
}
.daf-chip {
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--daf-line);
	border-radius: 999px;
	background: #fff;
	color: var(--daf-ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}
.daf-chip:hover,
.daf-chip:focus-visible {
	border-color: var(--daf-ink);
}
.daf-chip[aria-pressed="true"] {
	background: var(--tool-accent, var(--daf-ink));
	border-color: var(--tool-accent, var(--daf-ink));
	color: #fff;
}
.daf-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	margin: 0 0 14px;
}
.daf-share[hidden] {
	display: none;
}
.daf-share__msg {
	font-size: 14px;
	color: var(--daf-muted);
	overflow-wrap: anywhere;
}

/* Sections under the tool: How to use, Ideas, FAQ, More free tools. */
.daf-tool-info {
	margin: 40px 0 0;
}
.daf-tool-info h2,
.daf-more h2 {
	margin: 0 0 14px;
	font-size: 28px;
}
.daf-tool-info ol,
.daf-tool-info ul {
	padding-left: 22px;
	line-height: 1.65;
	color: var(--daf-text);
}
.daf-tool-info li + li {
	margin-top: 6px;
}
.daf-faq {
	margin-top: 8px;
}
.daf-faq h3 {
	margin: 18px 0 4px;
	font-size: 19px;
	color: var(--daf-ink);
}
.daf-faq p {
	margin: 0;
	line-height: 1.6;
}
.daf-more {
	margin: 40px 0 0;
}
.daf-more__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.daf-more__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--daf-line);
	border-top: 1px solid var(--daf-line);
	border-radius: 12px;
	background: #fff;
	color: var(--daf-text) !important;
	text-decoration: none !important;
	box-shadow: var(--daf-shadow);
}
.daf-more__name {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 19px;
	line-height: 1.2;
	color: var(--daf-ink);
}
.daf-more__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--daf-muted);
}

/* Tool tiles on /tools/: the accent bar and the mini specimen take the tool's colour. */
.daf-hub__card a {
	border-top: 1px solid var(--daf-line);
}
.daf-hub__sample {
	color: var(--daf-ink);
}
.daf-hub__group {
	margin: 36px 0 12px;
}

@media (max-width: 767px) {
	.daf-spec {
		height: 72px;
		margin-top: 16px;
	}
	.daf-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.daf-chips__label {
		width: auto;
		flex: 0 0 auto;
	}
	.daf-chip {
		flex: 0 0 auto;
		white-space: nowrap;
		scroll-snap-align: start;
	}
	.daf-spec--minecraft .daf-spec__word {
		font-size: 42px;
	}
	.daf-spec--roblox .daf-spec__word {
		font-size: 46px;
	}
	.daf-spec--studio .daf-spec__word,
	.daf-spec--cursive .daf-spec__word,
	.daf-spec--tattoo .daf-spec__word {
		font-size: 42px;
	}
	.daf-spec__track {
		font-size: 34px;
	}
	.daf-more__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Reduced motion: no animation anywhere in the specimens. */
@media (prefers-reduced-motion: reduce) {
	.daf-spec,
	.daf-spec *,
	.daf-spec__ch,
	.daf-spec__track {
		animation: none !important;
		transition: none !important;
	}
}

/* G6c: specimens are static. Motion runs only while the banner is hovered, and never with reduced motion. */
.daf-spec .daf-spec__ch,
.daf-spec .daf-spec--roblox .daf-spec__word,
.daf-spec .daf-spec--cursive .daf-spec__word,
.daf-spec .daf-spec__track {
	animation: none;
}
.daf-spec:hover .daf-spec__ch {
	animation: daf-spec-drop .7s steps(5) both;
	animation-delay: calc(var(--i, 0) * 110ms);
}
.daf-spec:hover .daf-spec--roblox .daf-spec__word {
	animation: daf-spec-tilt 2.4s ease-in-out infinite alternate;
}
.daf-spec:hover .daf-spec--cursive .daf-spec__word {
	animation: daf-spec-write 2.4s ease-out both;
}
.daf-spec:hover .daf-spec__track {
	animation: daf-spec-ticker 22s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.daf-spec,
	.daf-spec *,
	.daf-spec:hover *,
	.daf-spec:hover .daf-spec__ch {
		animation: none !important;
		transition: none !important;
	}
}

/* Hub tiles with a real screenshot. */
.daf-hub__card--shot a {
	display: block;
}
.daf-hub__shot {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--daf-line);
	border-radius: 10px;
	background: var(--daf-paper);
}
.daf-hub__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

/* Ads on tool pages sit well clear of inputs, buttons and chips (150px minimum). */
body[class*="daf-tool-"] .daf-ad[data-placement="tool_after_output"],
body[class*="daf-tool-"] .daf-ad[data-placement="tool_bottom"] {
	margin-top: 110px;
	margin-bottom: 90px;
}

/* Hub cards: title and description are separate blocks. */
.daf-hub__card a {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.daf-hub__card strong {
	display: block;
	margin-top: 8px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 20px;
	line-height: 1.2;
	color: var(--daf-ink);
}
.daf-hub__card a > span:not(.daf-hub__sample):not(.daf-hub__shot) {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--daf-muted);
}
.daf-hub__card--shot .daf-hub__shot {
	margin: 0;
}

/* Try these chips: no visible scrollbar, scrolling kept, right-edge fade as the hint on phone. */
.daf-chips {
	scrollbar-width: none;
}
.daf-chips::-webkit-scrollbar {
	display: none;
}
@media (max-width: 767px) {
	.daf-chips {
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
		mask-image: linear-gradient(to right, #000 88%, transparent);
	}
}

/* Font Studio and other tool cards contain their floated children, so the ad after the output never overlaps the controls. */
body[class*="daf-tool-"] .daf-tool {
	display: flow-root;
}
body[class*="daf-tool-"] .daf-ad[data-placement="tool_after_output"],
body[class*="daf-tool-"] .daf-ad[data-placement="tool_bottom"] {
	clear: both;
}

/* Every output ad (tool pages and logo presets) keeps 150px+ from the controls above and below it. */
.daf-ad[data-placement="tool_after_output"] {
	margin-top: 110px;
	margin-bottom: 90px;
}