/*
Theme Name: Tronixis
Theme URI: https://tronixis.com
Author: Tronixis
Description: Lightweight block theme for Tronixis. Warm white, charcoal type and a single restrained blue accent, with light and dark modes. Content, menus and styles are editable in Appearance → Editor.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.7
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tronixis
*/

/* Dark palette: follows the visitor's system setting, and the header toggle (data-theme) overrides it either way. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--base: #121211;
		--wp--preset--color--surface: #1A1A18;
		--wp--preset--color--subtle: #22221F;
		--wp--preset--color--line: #2F2E2A;
		--wp--preset--color--ink: #EEEBE4;
		--wp--preset--color--muted: #A6A298;
		--wp--preset--color--accent: #8FA6FF;
		--wp--preset--color--accent-ink: #0D1433;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--wp--preset--color--base: #121211;
	--wp--preset--color--surface: #1A1A18;
	--wp--preset--color--subtle: #22221F;
	--wp--preset--color--line: #2F2E2A;
	--wp--preset--color--ink: #EEEBE4;
	--wp--preset--color--muted: #A6A298;
	--wp--preset--color--accent: #8FA6FF;
	--wp--preset--color--accent-ink: #0D1433;
	color-scheme: dark;
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 2px; }
.tx-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); padding: .75rem 1rem; border-radius: 4px; text-decoration: none; }
.tx-skip:focus { left: 1rem; top: calc(var(--wp-admin--admin-bar--height, 0px) + .75rem); }
main:focus { outline: none; }
.skip-link:focus { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Eyebrow / mono labels */
.tx-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.tx-muted { color: var(--wp--preset--color--muted); }
.tx-lead { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--muted); max-width: 40ch; }

/* Header */
.tx-header { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.tx-header .wp-block-site-title a, .tx-wordmark a { text-decoration: none; letter-spacing: .22em; font-weight: 600; font-size: 1.05rem; }
.tx-header .wp-block-navigation a { text-decoration: none; }
.tx-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.tx-header .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--line) !important; background: var(--wp--preset--color--surface) !important; padding: .5rem !important; min-width: 260px !important; box-shadow: 0 12px 40px rgb(0 0 0 / .08); }
.tx-header .wp-block-navigation__submenu-container a { padding: .5rem .75rem !important; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--ink) !important; }

/* Mobile menu overlay */
.tx-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem clamp(1rem, 6vw, 2rem) 2.5rem !important; }
.tx-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 2.5rem !important; }
.tx-header .is-menu-open .wp-block-navigation__container { gap: 1.4rem !important; font-size: 1.35rem; font-weight: 520; }
.tx-header .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: .75rem 0 0 1rem !important; min-width: 0 !important; gap: .6rem; }
.tx-header .is-menu-open .wp-block-navigation__submenu-container a { font-size: 1rem; font-weight: 400; color: var(--wp--preset--color--muted); padding: .25rem 0 !important; }
body:has(.is-menu-open) .tx-help-fab { display: none; }

/* Header tools (rendered by Tronixis Core) */
.tx-tools { display: flex; align-items: center; gap: .25rem; }
.tx-tools a, .tx-tools button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: var(--wp--preset--color--ink); background: none; border: 0; cursor: pointer; text-decoration: none; position: relative; }
.tx-tools a:hover, .tx-tools button:hover { background: var(--wp--preset--color--subtle); color: var(--wp--preset--color--ink); }
.tx-tools svg { width: 20px; height: 20px; }
.tx-market { appearance: none; border: 1px solid var(--wp--preset--color--line); background: transparent; color: var(--wp--preset--color--ink); font: inherit; font-size: var(--wp--preset--font-size--xs); font-family: var(--wp--preset--font-family--mono); letter-spacing: .06em; padding: .45rem .6rem; border-radius: 999px; cursor: pointer; margin-right: .25rem; }
@media (max-width: 781px) { .tx-tools .tx-hide-sm { display: none; } }

/* Sections */
.tx-section { padding-block: var(--wp--preset--spacing--50); }
.tx-rule { border-top: 1px solid var(--wp--preset--color--line); }
.tx-hero h1 { font-size: var(--wp--preset--font-size--display); letter-spacing: -0.035em; line-height: 1.02; max-width: 14ch; }
.tx-hero .tx-hero-art img, .tx-art img { width: 100%; height: auto; display: block; border-radius: var(--wp--custom--radius); }
.tx-status { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: .35rem .8rem; color: var(--wp--preset--color--muted); }
.tx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--accent); }

/* Collection cards */
.tx-collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); }
.tx-collection { background: var(--wp--preset--color--base); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.tx-collection img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--wp--preset--color--subtle); }
.tx-collection h3 { margin: .5rem 0 0; font-size: var(--wp--preset--font-size--lg); }
.tx-collection p { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }
@media (max-width: 900px) { .tx-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tx-collections { grid-template-columns: 1fr; } }

/* Principles list */
.tx-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.tx-principles > * { border-top: 1px solid var(--wp--preset--color--ink); padding-top: 1rem; min-width: 0; }
@media (max-width: 781px) { .tx-principles { grid-template-columns: 1fr; } }

/* Notice panels (pre-launch states) */
.tx-notice { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .75rem; max-width: 720px; }
.tx-notice h2, .tx-notice h3 { margin: 0; font-size: var(--wp--preset--font-size--lg); }
.tx-notice p { margin: 0; color: var(--wp--preset--color--muted); }
.tx-notice .tx-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.tx-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.25rem; border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base) !important; text-decoration: none !important; font-size: var(--wp--preset--font-size--sm); font-weight: 520; border: 1px solid var(--wp--preset--color--ink); cursor: pointer; }
.tx-btn:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink) !important; }
.tx-btn.is-ghost { background: transparent; color: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--line); }
.tx-btn.is-ghost:hover { border-color: var(--wp--preset--color--ink); background: transparent; color: var(--wp--preset--color--ink) !important; }

/* Forms */
.tx-form *, .tx-form *::before, .tx-form *::after, .tx-help-panel *, .tx-help-search input, .tx-notice { box-sizing: border-box; }
.tx-form { display: grid; gap: 1.1rem; max-width: 720px; }
.tx-form .tx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .tx-form .tx-row { grid-template-columns: 1fr; } }
.tx-field { display: grid; gap: .4rem; min-width: 0; }
.tx-field label { font-size: var(--wp--preset--font-size--sm); font-weight: 520; }
.tx-field .tx-hint { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.tx-field input, .tx-field select, .tx-field textarea { font: inherit; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius); padding: .75rem .85rem; width: 100%; }
.tx-field textarea { min-height: 160px; resize: vertical; }
.tx-field input:focus, .tx-field select:focus, .tx-field textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; border-color: var(--wp--preset--color--accent); }
.tx-field [aria-invalid="true"] { border-color: #B3261E; }
.tx-error { color: #B3261E; font-size: var(--wp--preset--font-size--xs); }
:root[data-theme="dark"] .tx-error, :root[data-theme="dark"] .tx-field [aria-invalid="true"] { color: #FF8A80; border-color: #FF8A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tx-error { color: #FF8A80; } :root:not([data-theme="light"]) .tx-field [aria-invalid="true"] { border-color: #FF8A80; } }
.tx-alert { border-left: 3px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--surface); padding: 1rem 1.25rem; border-radius: 2px; }
.tx-alert.is-error { border-left-color: #B3261E; }
.tx-privacy { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); max-width: 64ch; }
.tx-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Contact details */
.tx-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.tx-contact-list a { text-decoration: none; }
.tx-contact-list .tx-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: .08em; color: var(--wp--preset--color--muted); display: inline-block; min-width: 2.5rem; }

/* Footer */
.tx-footer { border-top: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }
.tx-footer a { text-decoration: none; color: var(--wp--preset--color--muted); }
.tx-footer a:hover { color: var(--wp--preset--color--ink); }
.tx-footer ul { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .55rem; font-size: var(--wp--preset--font-size--sm); }
.tx-footer-cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; }
.tx-footer-cols > * { min-width: 0; margin-block-start: 0 !important; }
.tx-footer details > summary { list-style: none; cursor: default; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.tx-footer details > summary::-webkit-details-marker { display: none; }
.tx-footer .wp-block-details { border: 0 !important; padding: 0 !important; }
@media (max-width: 900px) {
	.tx-footer-cols { grid-template-columns: 1fr; gap: 0; }
	.tx-footer-cols > .tx-footer-brand { padding-bottom: 1.5rem; }
	.tx-footer .wp-block-details { border-top: 1px solid var(--wp--preset--color--line) !important; padding: 1rem 0 !important; }
	.tx-footer details > summary { cursor: pointer; display: flex; justify-content: space-between; }
	.tx-footer details > summary::after { content: "+"; font-size: 1rem; line-height: 1; }
	.tx-footer details[open] > summary::after { content: "–"; }
}
.tx-footer-bottom { border-top: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }

/* FAQ */
.tx-faq .wp-block-details summary { font-weight: 520; cursor: pointer; }
.tx-faq .wp-block-details p { color: var(--wp--preset--color--muted); }
.tx-help-search input { font: inherit; width: 100%; padding: .9rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.tx-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); }
.tx-topics a { background: var(--wp--preset--color--base); padding: 1.25rem; text-decoration: none; display: grid; gap: .25rem; min-width: 0; }
.tx-topics a:hover { background: var(--wp--preset--color--surface); }
.tx-topics small { color: var(--wp--preset--color--muted); }
@media (max-width: 781px) { .tx-topics { grid-template-columns: 1fr; } }

/* Legal / policy pages */
.tx-legal h2 { margin-top: 2.5rem; font-size: var(--wp--preset--font-size--lg); }
.tx-legal p, .tx-legal li { color: var(--wp--preset--color--ink); }
.tx-draft-note { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); border: 1px dashed var(--wp--preset--color--line); padding: 1rem; border-radius: 2px; }

/* Help panel */
.tx-help-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: .5rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); border: 0; border-radius: 999px; padding: .8rem 1.1rem; font: inherit; font-size: var(--wp--preset--font-size--sm); font-weight: 520; cursor: pointer; box-shadow: 0 10px 30px rgb(0 0 0 / .18); }
.tx-help-fab svg { width: 18px; height: 18px; }
.tx-help-panel { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 61; width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 100px)); display: flex; flex-direction: column; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); border-radius: 8px; box-shadow: 0 24px 60px rgb(0 0 0 / .22); overflow: hidden; }
.tx-help-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.tx-help-head p { margin: .2rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.tx-help-body { padding: 1rem 1.1rem; overflow: auto; display: grid; gap: .75rem; }
.tx-help-body input { font: inherit; width: 100%; padding: .7rem .8rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }
.tx-help-results { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.tx-help-results details { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius); padding: .7rem .8rem; }
.tx-help-results summary { cursor: pointer; font-weight: 520; font-size: var(--wp--preset--font-size--sm); }
.tx-help-results p { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); margin: .5rem 0 0; }
.tx-help-foot { border-top: 1px solid var(--wp--preset--color--line); padding: .9rem 1.1rem; font-size: var(--wp--preset--font-size--sm); display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.tx-x { background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; border-radius: 4px; }

/* WooCommerce touches */
.woocommerce-info, .wc-block-components-notice-banner { border-radius: var(--wp--custom--radius); }

/* Stacked columns on phones need breathing room between sections */
@media (max-width: 781px) {
	.wp-block-columns { row-gap: var(--wp--preset--spacing--40); }
	.tx-footer { padding-bottom: calc(var(--wp--preset--spacing--30) + 72px) !important; }
}

/* Gentle reveal; content is visible at rest and only animates when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
	.tx-hero h1, .tx-hero .tx-lead, .tx-hero .tx-status { animation: tx-rise .7s cubic-bezier(.2,.7,.2,1) both; }
	.tx-hero .tx-lead { animation-delay: .08s; }
	@keyframes tx-rise { from { transform: translateY(10px); opacity: .001; } to { transform: none; opacity: 1; } }
}

/* Dark mode: soften the light illustration panel */
:root[data-theme="dark"] .tx-art img, :root[data-theme="dark"] .tx-collection img { filter: invert(.9) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tx-art img, :root:not([data-theme="light"]) .tx-collection img { filter: invert(.9) hue-rotate(180deg); } }