/*
Theme Name: FileTaco
Theme URI: https://filetaco.com
Author: Chris Erbstoesser
Description: Dark, engineered block theme for FileTaco's free in-browser file tools. Hairline cards, one electric-green accent, Inter and mono type, built-in ad slots via the FileTaco Tools plugin.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: filetaco
Tags: dark, block-patterns, full-site-editing, one-column, wide-blocks
*/

/* ---------- Base ---------- */
body {
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "calt", "rlig";
	text-rendering: optimizeLegibility;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
::selection { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
code, kbd, samp { font-family: var(--wp--preset--font-family--mono); font-size: 0.875em; }
:where(p, li) > code {
	background: var(--wp--preset--color--canvas-soft);
	color: var(--wp--preset--color--canvas-text-soft);
	padding: 2px 8px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--hairline);
	font-size: 13px;
	white-space: nowrap;
}
.wp-element-button, .wp-block-button__link { transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition), color var(--wp--custom--transition); }
:where(.wp-site-blocks) a { transition: color var(--wp--custom--transition); }

/* ---------- Header ---------- */
.ft-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--canvas) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.admin-bar .ft-header { top: var(--wp-admin--admin-bar--height, 0px); }
.ft-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1;
}
.ft-brand img { width: auto; height: 28px; display: block; }
/*
 * Phone menu: a dropdown panel under the header bar, not a full-screen overlay.
 * The header's backdrop-filter makes it the containing block for the overlay, which
 * squeezed the core full-screen menu into the header's own height. So the panel is
 * positioned against the header on purpose: it starts at the header's bottom edge
 * and is as wide as the header. `.ft-header.ft-header` outranks core's overlay
 * colors and the admin-bar offset. assets/js/menu.js lets the menu button close it.
 */
.ft-header .wp-block-navigation { position: static; }
.ft-header.ft-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	position: absolute;
	top: calc(100% + 1px);
	right: 0;
	bottom: auto;
	left: 0;
	max-height: calc(100dvh - 100%);
	overflow-y: auto;
	padding: var(--wp--preset--spacing--xs) var(--wp--style--root--padding-right, 16px) var(--wp--preset--spacing--md) var(--wp--style--root--padding-left, 16px);
	background-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	animation: ft-menu-in 0.12s ease-out;
}
@keyframes ft-menu-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.ft-header.ft-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; }
.ft-header.ft-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-close { max-width: none; }
.ft-header.ft-header .wp-block-navigation .is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: 0;
	align-items: stretch;
	gap: 0;
}
.ft-header.ft-header .wp-block-navigation .is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
}
.ft-header.ft-header .wp-block-navigation .is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item { align-items: stretch; }
.ft-header.ft-header .wp-block-navigation .is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content {
	display: block;
	padding: 12px 0;
	font-size: 18px;
	line-height: 24px;
	color: var(--wp--preset--color--body);
}
.ft-header.ft-header .wp-block-navigation .is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content:hover,
.ft-header.ft-header .wp-block-navigation .is-menu-open:not(.disable-default-overlay) .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
/* The menu button does the closing; core's close button stays for keyboard users and shows only when focused. */
.ft-header.ft-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close:not(:focus-visible) {
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.ft-header.ft-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	top: 0;
	right: -10px;
}
/* Menu button: a 44px target that turns into a close icon while the panel is open. */
.ft-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px;
	color: var(--wp--preset--color--ink);
}
.ft-header .wp-block-navigation__responsive-container-open svg path {
	transform-box: view-box;
	transform-origin: 12px 12px;
	transition: transform 0.15s ease-out;
}
html.ft-menu-open .ft-header .wp-block-navigation__responsive-container-open svg path:first-child { transform: rotate(45deg) translateY(3.75px); }
html.ft-menu-open .ft-header .wp-block-navigation__responsive-container-open svg path:last-child { transform: rotate(-45deg) translateY(-3.75px); }
@media (prefers-reduced-motion: reduce) {
	.ft-header.ft-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
	.ft-header .wp-block-navigation__responsive-container-open svg path { transition: none; }
}

/* ---------- Block styles ---------- */
/* Eyebrow: uppercase tracked label above section headlines */
.is-style-eyebrow {
	font-size: 14px !important;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 2.52px;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
}
/* Card: hairline-bordered surface, glow on hover when it links somewhere */
.is-style-card {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	background: var(--wp--preset--color--canvas);
	padding: var(--wp--preset--spacing--2-xl);
	transition: box-shadow var(--wp--custom--transition), border-color var(--wp--custom--transition);
}
.is-style-card:has(a:hover) { box-shadow: var(--wp--preset--shadow--glow); border-color: #57524f; }
.is-style-card-featured {
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--2-xl);
}
.is-style-inset {
	background: var(--wp--preset--color--canvas-soft);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--2-xl);
}
/* Buttons: outline and ghost */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 12px 16px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--body); box-shadow: var(--wp--preset--shadow--glow); color: var(--wp--preset--color--ink); background: transparent; }
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--primary-soft);
	padding-inline: 4px;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover { color: var(--wp--preset--color--primary); box-shadow: none; background: transparent; }
/* Separators: dashed rhythm line, and the rare green divider */
.wp-block-separator { opacity: 1; }
.wp-block-separator.is-style-green { border-top: 2px solid var(--wp--preset--color--primary) !important; }
/* Code block used as hero "image" */
.is-style-terminal {
	position: relative;
	padding-top: 44px !important;
	overflow-x: auto;
	white-space: pre;
}
.is-style-terminal::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 20px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--hairline);
	box-shadow: 16px 0 0 var(--wp--preset--color--hairline), 32px 0 0 var(--wp--preset--color--hairline);
}
/* Status tag */
.ft-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--hairline);
	font-size: 14px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.ft-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--primary); }
/* Links list in the footer */
.is-style-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.is-style-links a { color: var(--wp--preset--color--body); text-decoration: none; font-size: 14px; }
.is-style-links a:hover { color: var(--wp--preset--color--ink); }
/* Mono numbers */
.has-mono-font-family, .ft-mono { font-variant-numeric: tabular-nums; }

/* ---------- Tool cards on the home page ---------- */
.ft-tool-card { display: flex; flex-direction: column; height: 100%; }
.ft-tool-card .wp-block-buttons { margin-top: auto; }
.ft-stat {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	color: var(--wp--preset--color--canvas-text-soft);
	background: var(--wp--preset--color--canvas-soft);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	padding: 2px 8px;
}

/* ---------- Guides: card grid (3 across on desktop, 2 on tablets, 1 on phones) ---------- */
.ft-guide-grid { margin: 0; padding: 0; list-style: none; }
.ft-guide-grid > li { display: flex; margin: 0; }
.ft-guide-card {
	position: relative;
	flex: 1;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--2-xl);
}
.ft-guide-card > * { margin: 0; }
.ft-guide-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	line-height: 20px;
	color: var(--wp--preset--color--mute);
	font-variant-numeric: tabular-nums;
}
.ft-guide-meta .wp-block-post-terms,
.ft-guide-meta .wp-block-post-date { font: inherit; color: inherit; }
.ft-guide-meta .wp-block-post-date::before { content: "\00B7"; margin-inline-end: var(--wp--preset--spacing--sm); }
.ft-guide-meta a { position: relative; z-index: 1; color: var(--wp--preset--color--body); text-decoration: none; }
.ft-guide-meta a:hover { color: var(--wp--preset--color--ink); }
.ft-guide-card .wp-block-post-title { color: var(--wp--preset--color--ink); letter-spacing: -0.2px; }
.ft-guide-card .wp-block-post-title a { color: inherit; text-decoration: none; }
/* The title link covers the whole card, so the card is one big target. */
.ft-guide-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ft-guide-card:has(.wp-block-post-title a:focus-visible) { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.ft-guide-card .wp-block-post-title a:focus-visible { outline: none; }
.ft-guide-card .wp-block-post-excerpt { color: var(--wp--preset--color--body); }
.ft-guide-card .wp-block-post-excerpt__excerpt { margin: 0; }
.ft-guide-more {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--primary-deep);
	font-weight: 500;
}
.ft-guide-more::after { content: " \2192"; }
.ft-guide-card:has(.wp-block-post-title a:hover) .ft-guide-more { color: var(--wp--preset--color--primary-soft); }
.ft-guide-list .wp-block-query-pagination { font-size: var(--wp--preset--font-size--body-sm); }
.ft-guide-list .wp-block-query-pagination a { color: var(--wp--preset--color--body); text-decoration: none; }
.ft-guide-list .wp-block-query-pagination a:hover { color: var(--wp--preset--color--ink); }

/* Section header with a "more" link on the right, e.g. "All guides" on the home page */
.ft-section-head > * { margin: 0; }
.ft-section-head .wp-block-heading { flex: 1 1 auto; }
.ft-more-link { font-size: 16px; line-height: 20px; font-weight: 600; }
.ft-more-link a {
	display: inline-block;
	padding-block: 12px; /* 44px tall touch target */
	color: var(--wp--preset--color--primary-soft);
	text-decoration: none;
}
.ft-more-link a::after { content: " \2192"; }
.ft-more-link a:hover { color: var(--wp--preset--color--primary); }

/* ---------- Breadcrumbs (every page except the home page) ---------- */
.wp-block-breadcrumbs.ft-breadcrumbs {
	margin-block-end: var(--wp--preset--spacing--2-xl);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 20px;
	color: var(--wp--preset--color--mute);
}
.ft-breadcrumbs ol { flex-wrap: nowrap; }
.ft-breadcrumbs li { flex-shrink: 0; white-space: nowrap; }
/* The current page is already the headline below, so a long title shortens with an ellipsis instead of wrapping. */
.ft-breadcrumbs li:last-child { flex-shrink: 1; min-width: 0; }
.ft-breadcrumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-breadcrumbs a {
	display: inline-block;
	padding-block: 12px; /* 44px tall touch target */
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}
.ft-breadcrumbs a:hover { color: var(--wp--preset--color--ink); }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
	.ft-hide-mobile { display: none !important; }
	.wp-block-columns.ft-stack-tablet { flex-wrap: wrap !important; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* Blog index: show the archive title on archives, the fixed headline on the posts page */
.archive .ft-index-title, .search .ft-index-title { display: none; }

/* Article rhythm inside post content */
.wp-block-post-content > h2.wp-block-heading { margin-block-start: var(--wp--preset--spacing--5-xl); }
.wp-block-post-content > h3.wp-block-heading { margin-block-start: var(--wp--preset--spacing--3-xl); font-size: var(--wp--preset--font-size--display-sm); font-weight: 600; letter-spacing: 0; }
.wp-block-post-content > :is(h2, h3) + p { margin-block-start: var(--wp--preset--spacing--md); }
.wp-block-post-content > .ftt + :is(h2, h3) { margin-block-start: var(--wp--preset--spacing--6-xl); }